/* «Снаряга» — the reward cabinet.

   Every number below is the Claude Design console mock's СНАРЯЖЕНИЕ block,
   copied rather than eyeballed: the mock writes its styles inline with exact
   pixels, so a port that guesses is a port that drifts. The mock's phone block
   (`isPhone` / `isGear`) is the narrow reading here and the desktop block
   (`isDesk` / `isGear`) is the wide one, and the two differ in three ways only
   — the header stacks, the shelf panels drop their card chrome, and the rows
   grow to a 56px thumb target.

   Written narrow-first. The breakpoints are @container scene, never @media:
   at a 1280px window the scene is ~858px, so a @media (min-width: 900px) here
   would lay a two-column screen into an 858px hole. See shell.css § WINDOW
   CLASSES. Two columns need >= 900 scene px by the console's own budget, and
   this screen's left column carries 38px glyph boxes, and 620 leaves it 272px
   of row — enough for the 38px box, the name and the badge. */

/* host: the cabinet owns the whole scene, edge to edge. The selector carries
   #scene because shell.css sets `padding-top: 18px` on
   `#scene.shell-scene .container`, which outranks a plain #view rule. */
#view.gear-host,
#scene.shell-scene #view.gear-host {
  max-width: none;
  padding: 0;
  overflow-x: hidden;
}

/* mock (phone): padding:0 15px 12px; gap:11px — the wide block's 16px/18px and
   13px gap arrive in the @container block at the foot. */
.gear-view {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 12px 15px 12px;
  min-width: 0;
}

/* ── The header card ────────────────────────────────────────────────────── */

/* mock (phone): the mark and the title on one row, the lead under it, the
   plate under that. One flex row with wrapping does all three, and becomes the
   mock's wide header — mark · copy · plate — the moment there is room. */
.gear-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
}
.gear-head.hidden { display: none; }
.gear-head-mark { font-size: 19px; line-height: 1; flex: 0 0 auto; }
/* `display: contents` is doing real work, not tidying: the mock's phone header
   is [🎖 · Снаряга] on one row and the lead on the next, full width, while its
   desktop header is [🎖][title over lead][plate] on one. Dissolving the copy
   wrapper lets the title and the lead be flex items of the header itself, so
   one DOM gives both readings — with the wrapper intact the whole two-line
   column became one wide flex item and pushed the mark onto a line of its own. */
.gear-head-copy { display: contents; }
.gear-head-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  flex: 1 1 auto;
  min-width: 0;
}
/* mock: font-size:10px;line-height:1.5;color:rgba(236,231,250,.5);max-width:600px */
.gear-head-lead {
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-soft);
  max-width: 600px;
  text-wrap: pretty;
  flex: 1 1 100%;
}

/* ── The preview: what the village actually sees ───────────────────────── */

/* The whole screen is an argument that these marks are visible somewhere, so
   the argument had better be on the screen. The plate shows the name exactly
   as the marks will sit on it — sigil at name height, title on the line below
   — which is also the placement rule that keeps climbed marks distinguishable
   from bought flair. */
.gear-prev {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1 1 100%;
}
/* The label is the wide block's; on a phone the mock shows the plate bare. */
.gear-prev-lbl { display: none; }
/* mock (phone): gap:9px;padding:11px 12px;border-radius:13px;
   border:1px solid rgba(167,139,250,.22);background:rgba(20,13,38,.6) */
.gear-prev-plate {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border-radius: 13px;
  border: 1px solid rgba(var(--t-violet), 0.22);
  /* Literal rather than --panel-soft: the token is .5 and the mock's plate is
     .6, and «copy the number» is the whole point of this port. */
  background: rgba(20, 13, 38, 0.6);
  min-width: 0;
}
/* mock (phone): 34×34, radius 10, font 15px. */
.gear-prev-av {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  background: linear-gradient(135deg, var(--violet-600), #241638);
  border: 1px solid rgba(var(--t-gold), 0.34);
}
.gear-prev-lines {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gear-prev-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}
.gear-prev-name {
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.gear-prev-tag { font-size: 9px; font-weight: 800; color: var(--gold); }
/* A sigil is one glyph at name height — here, in the rows, and wherever a name
   renders. Never larger: the moment it grows it reads as an icon, and icons
   are the bought register. */
.gear-sigil { font-size: 13px; line-height: 1; }
.gear-prev-deed { font-size: 10px; font-weight: 700; color: var(--ok); }
.gear-prev-bare { font-size: 10px; color: var(--text-faint); }

/* The in-flight name: a bar at exactly the geometry the name will take, so the
   plate does not jump and nothing is claimed while the fetch is out. */
.gear-prev-skel {
  display: inline-block;
  width: 116px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(var(--t-violet), 0.1), rgba(var(--t-violet), 0.22), rgba(var(--t-violet), 0.1));
  background-size: 200% 100%;
  animation: gearSkel 1.3s linear infinite;
}
@keyframes gearSkel {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gear-prev-skel { animation: none; }
}
.gear-prev-fail { font-size: 11px; font-weight: 700; color: var(--danger-soft); }
.gear-prev-retry {
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(var(--t-violet), 0.26);
  background: var(--panel-soft);
  color: var(--text-soft);
  font: inherit;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
}
@media (hover: hover) {
  .gear-prev-retry:hover { border-color: rgba(var(--t-gold), 0.45); color: var(--gold); }
}

/* ── Columns ────────────────────────────────────────────────────────────── */

.gear-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
.gear-col {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}
.gear-col.hidden { display: none; }
/* In the mock each column is its own scroller inside a frame that never
   scrolls. Here #scene is the scroller, so the columns only need placing: the
   rule card sits UNDER the shelves at one column and beside them at two, which
   is the mock's phone order and its desktop order in one DOM. */
.gear-col-a { grid-column: 1; }
.gear-col-b { grid-column: 1; }

/* ── Shelf panels ───────────────────────────────────────────────────────── */

/* mock (phone): a bare labelled list — the card chrome is the wide block's. */
.gear-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.gear-panel-head {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* mock: font-size:10px;line-height:1.5;color:rgba(241,193,82,.8) */
.gear-idle {
  font-size: 10px;
  line-height: 1.5;
  color: rgba(var(--t-gold), 0.8);
  text-wrap: pretty;
}
/* mock: font-size:9.5px;line-height:1.5;color:rgba(236,231,250,.38) */
.gear-note {
  font-size: 9.5px;
  line-height: 1.5;
  color: rgba(var(--t-mute), 0.38);
  text-wrap: pretty;
}
.gear-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* ── Rows ───────────────────────────────────────────────────────────────── */

/* mock: display:flex;align-items:center;gap:11px;padding:11px 12px;
   border-radius:13px;text-align:left;width:100%;transition:.16s;
   border:1px solid rgba(167,139,250,.16);background:rgba(20,13,38,.5)
   — plus min-height:56px on the phone block, which is the thumb target and is
   kept at every width because this list is operated by thumb everywhere. */
.gear-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 56px;
  padding: 11px 12px;
  border-radius: 13px;
  border: 1px solid rgba(var(--t-violet), 0.16);
  background: var(--panel-soft);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s, opacity 0.16s;
}
@media (hover: hover) {
  .gear-row:hover:not(:disabled) { border-color: rgba(var(--t-gold), 0.4); }
}
/* mock, worn: border rgba(167,139,250,.5) over background rgba(167,139,250,.1) */
.gear-row.is-on {
  border-color: rgba(var(--t-violet), 0.5);
  background: rgba(var(--t-violet), 0.1);
}
/* mock, reserved (the laurel): the gold channel instead of the violet one. */
.gear-row.is-rare { border-color: rgba(var(--t-gold), 0.16); }
.gear-row.is-rare.is-on {
  border-color: rgba(var(--t-gold), 0.5);
  background: rgba(var(--t-gold), 0.09);
}
.gear-row.is-locked { opacity: 0.5; cursor: default; }
.gear-row.is-busy { opacity: 0.45; cursor: progress; }

/* mock: 38×38, radius 11, font 18px, radial-gradient(circle at 50% 32%,
   #241a44,#0d0a1c 78%), border rgba(167,139,250,.22) */
.gear-glyph {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  background: radial-gradient(circle at 50% 32%, #241a44, #0d0a1c 78%);
  border: 1px solid rgba(var(--t-violet), 0.22);
}
.gear-row.is-rare .gear-glyph { border-color: rgba(var(--t-gold), 0.4); }
.gear-glyph.is-bare { color: var(--text-faint); }
.gear-row.is-locked .gear-glyph { border-style: dashed; }
/* A bespoke plate (the cup podium) fills the same 38px well the glyph sits in,
   clipped to its radius so the locked/rare border still frames it. object-fit
   cover because the plates are square and the well is square — no letterbox. */
.gear-glyph-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

.gear-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* mock: font-size:12px;font-weight:800;color:rgba(236,231,250,.78) — .98 worn */
.gear-row-name {
  font-size: 12px;
  font-weight: 800;
  color: rgba(var(--t-mute), 0.78);
  overflow-wrap: anywhere;
}
.gear-row.is-on .gear-row-name { color: rgba(var(--t-mute), 0.98); }
/* mock: font-size:9px;line-height:1.4;color:rgba(236,231,250,.38) */
.gear-row-deed {
  font-size: 9px;
  line-height: 1.4;
  color: rgba(var(--t-mute), 0.38);
  text-wrap: pretty;
}

/* mock, «надето»: padding:4px 9px;border-radius:7px;
   background:rgba(53,199,131,.14);border:1px solid rgba(53,199,131,.4);
   font-size:9px;font-weight:800;color:#35c783 */
.gear-badge {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 7px;
  background: rgba(var(--t-ok), 0.14);
  border: 1px solid rgba(var(--t-ok), 0.4);
  font-size: 9px;
  font-weight: 800;
  color: var(--ok);
}
/* mock, «надеть»: padding:5px 11px;border-radius:8px;
   border:1px solid rgba(167,139,250,.26);background:rgba(20,13,38,.6);
   font-size:9.5px;font-weight:700;color:rgba(236,231,250,.6) */
.gear-wear {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid rgba(var(--t-violet), 0.26);
  background: rgba(20, 13, 38, 0.6);
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(var(--t-mute), 0.6);
}
/* Not in the mock, which lists only what you hold. This cabinet lists what you
   do not, so the locked rows need a state of their own — deliberately quieter
   than «надеть», because it is not a control. */
.gear-locked {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── The newcomer's card ────────────────────────────────────────────────── */

/* mock (phone): gap:10px;padding:15px;border-radius:15px;
   border:1px solid rgba(167,139,250,.22);background:rgba(18,12,34,.5) */
.gear-empty {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  border-radius: 15px;
  border: 1px solid rgba(var(--t-violet), 0.22);
  background: rgba(18, 12, 34, 0.5);
}
.gear-empty-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  text-wrap: pretty;
}
.gear-empty-body {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-dim);
  text-wrap: pretty;
}
/* mock (phone): min-height:44px;padding:12px;border-radius:12px; gold gradient */
.gear-empty-act {
  white-space: nowrap;
  min-height: 44px;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: var(--gold-grad);
  color: var(--gold-ink);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
@media (hover: hover) {
  .gear-empty-act:hover { filter: brightness(1.06); }
}

/* ── The register rule, and the naming systems ──────────────────────────── */

/* mock (phone): gap:9px;padding:14px;border-radius:15px;
   border:1px solid rgba(241,193,82,.3);background:rgba(26,19,8,.36) */
.gear-rulecard {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border-radius: 15px;
  border: 1px solid rgba(var(--t-gold), 0.3);
  background: rgba(26, 19, 8, 0.36);
}
.gear-rule-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
}
/* The register firewall, said once and in plain words. Gear and the shop are
   otherwise two grids of marks you put on, and nothing on either screen tells
   a player which one money reaches.
   mock: font-size:11px;line-height:1.6;color:rgba(236,231,250,.62) */
.gear-rule {
  font-size: 11px;
  line-height: 1.6;
  color: rgba(var(--t-mute), 0.62);
  text-wrap: pretty;
}
/* mock (phone): min-height:44px;padding:11px;border-radius:11px */
.gear-store {
  white-space: nowrap;
  min-height: 44px;
  padding: 11px;
  border-radius: 11px;
  border: 1px solid rgba(var(--t-violet), 0.26);
  background: rgba(20, 13, 38, 0.6);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  color: rgba(var(--t-mute), 0.6);
  cursor: pointer;
}
@media (hover: hover) {
  .gear-store:hover { border-color: rgba(var(--t-gold), 0.45); color: var(--gold); }
}

/* mock: gap:3px;padding:11px 12px;border-radius:12px;
   border:1px solid rgba(hue,.24);background:rgba(hue,.05) */
.gear-reg {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 12px;
  border-radius: 12px;
}
.gear-reg.tone-gold {
  border: 1px solid rgba(var(--t-gold), 0.24);
  background: rgba(var(--t-gold), 0.05);
}
.gear-reg.tone-ok {
  border: 1px solid rgba(var(--t-ok), 0.24);
  background: rgba(var(--t-ok), 0.05);
}
.gear-reg-name {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.gear-reg.tone-gold .gear-reg-name { color: rgba(var(--t-gold), 0.8); }
.gear-reg.tone-ok .gear-reg-name { color: rgba(var(--t-ok), 0.8); }
.gear-reg-what { font-size: 9px; line-height: 1.4; color: rgba(var(--t-mute), 0.4); }

/* ── The worn identity on the profile ──────────────────────────────────── */

/* These belong to profile.css by name and live here by ownership: this lane
   added the render and does not own that file. If the two are ever merged,
   move them — nothing here depends on being in this stylesheet. */
.pf-worn-sigil {
  font-size: 0.85em;
  margin-right: 5px;
  line-height: 1;
}
.pf-worn-title {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(241, 193, 82, 0.22);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Medium scene: the panels take their card chrome ───────────────────── */

/* The mock's wide block draws every shelf as a panel — gap:9px;padding:15px
   16px;border-radius:16px;border:1px solid rgba(167,139,250,.2);
   background:rgba(18,12,34,.5) — and gives the header its own card. Below 600
   scene px that chrome costs 32px of a 390px screen, which is why the phone
   block does without it. */
@container scene (min-width: 600px) {
  .gear-view { gap: 13px; padding: 16px 18px; }

  /* mock: gap:14px;padding:15px 18px;border-radius:17px;
     border:1px solid rgba(241,193,82,.24);
     background:linear-gradient(115deg,rgba(34,25,10,.6),rgba(16,11,30,.72)) */
  .gear-head {
    gap: 14px;
    padding: 15px 18px;
    border-radius: 17px;
    border: 1px solid rgba(var(--t-gold), 0.24);
    background: linear-gradient(115deg, rgba(34, 25, 10, 0.6), rgba(16, 11, 30, 0.72));
  }
  .gear-head-mark { font-size: 22px; }
  /* The wrapper comes back: the mock's wide header is a 4px-gapped column of
     title over lead, sitting between the mark and the flexible gap. */
  .gear-head-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .gear-head-title { font-size: 15px; flex: 0 0 auto; }
  .gear-head-lead { flex: 0 0 auto; }

  .gear-prev {
    flex: 0 0 auto;
    align-items: flex-end;
    margin-left: auto;
  }
  .gear-prev-lbl {
    display: block;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  /* mock: gap:8px;padding:9px 13px;border-radius:12px */
  .gear-prev-plate { gap: 8px; padding: 9px 13px; border-radius: 12px; }
  /* mock: 30×30, radius 9, font 14px */
  .gear-prev-av { width: 30px; height: 30px; border-radius: 9px; font-size: 14px; }

  .gear-cols { gap: 13px; }
  .gear-col { gap: 12px; }

  .gear-panel {
    gap: 9px;
    padding: 15px 16px;
    border-radius: 16px;
    border: 1px solid rgba(var(--t-violet), 0.2);
    background: rgba(18, 12, 34, 0.5);
  }
  .gear-panel-head { font-size: 11px; }
  .gear-list { gap: 9px; }

  /* mock: gap:10px;padding:18px;border-radius:16px */
  .gear-empty { gap: 10px; padding: 18px; border-radius: 16px; }
  .gear-empty-title { font-size: 14px; }
  /* mock: align-self:flex-start;min-height:42px;padding:12px 17px */
  .gear-empty-act { align-self: flex-start; min-height: 42px; padding: 12px 17px; }

  /* mock: gap:9px;padding:15px 16px;border-radius:16px */
  .gear-rulecard { gap: 9px; padding: 15px 16px; border-radius: 16px; }
  .gear-rule-title { font-size: 13px; }
  /* mock: align-self:flex-start;min-height:38px;padding:10px 14px;radius:10px */
  .gear-store {
    align-self: flex-start;
    min-height: 38px;
    padding: 10px 14px;
    border-radius: 10px;
  }
}

/* ── Wide scene: the mock's two columns ─────────────────────────────────── */

/* mock: grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap 13px.
   620 is the console's own two-column budget (shell.css § WINDOW CLASSES) and
   it is the number that matters here: at a 1280px WINDOW the scene is 858px,
   so a 900px threshold would have left the desktop console reading as a phone
   — the exact mistake that note exists to prevent. */
@container scene (min-width: 620px) {
  .gear-cols { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .gear-col-b { grid-column: 2; }
}