/* ============================================================
   chrome.css — ORNATE FRAMED-WINDOW SYSTEM  (UN + WoW-LIKE)
   ------------------------------------------------------------
   The shared "chrome" layer (ui-design-system.md §2-3): every
   system window, panel, item socket, button, tab and the hero
   pedestal get the carved-gold fantasy-MMO treatment — built
   CSS-FIRST so it looks complete with zero art dependency.

   ASSET HOOKS: each ornament reads a --chrome-* / --ui-* CSS var
   (default `none`) so the CSS-drawn version shows now. When a
   MAKE ornament PNG lands, add `has-art` on #game and set the
   var — the real art lights up with no markup change. Every
   asset swap below is gated on `.has-art` for exactly that.

   Loaded AFTER styles.css so these rules layer on top. Original
   work: gradients/shadows over the project's own design tokens.
   ============================================================ */
:root{
  /* ---- ornament asset hooks ---- */
  --chrome-corner:url('/assets/ui/chrome-corner.svg');             /* filigree corner bracket (window + pedestal)   */
  --chrome-title:url('/assets/ui/chrome-title-plate.svg');         /* carved title-banner plate (3-slice)           */
  --chrome-seal:url('/assets/ui/chrome-seal.svg');                 /* wax-seal / gold-knob close button             */
  --panel-bg:url('/assets/ui/panel-bg.png');                       /* tileable dark stone/wood body texture         */
  --ui-socket:url('/assets/ui/ui-socket.svg');                     /* ornate recessed item-slot frame               */
  --ui-pedestal:url('/assets/ui/ui-pedestal.svg');                 /* ornate character dais (hero stage)            */
  --ui-node:url('/assets/ui/ui-node.svg');                         /* ornate dev-path / talent / saint node         */
  --chrome-corner-size:46px;  /* art box for the filigree corner PNG       */
  /* ---- chrome palette (extends styles.css tokens) ---- */
  --gold-lite:#ffe9a8; --gold-deep:#7a5410;
  --frame-hi:#ffe6a0; --frame-mid:#caa24e; --frame-lo:#6b4e1e;
  --well:#0a0f1c;
  /* the universal "carved inset" — recessed well look reused everywhere */
  --carve:inset 0 1px 0 rgba(255,233,168,.16), inset 0 -3px 8px rgba(0,0,0,.5);
}

/* ============================================================
   1 · FRAMED WINDOW — gold double-rule + carved corners
   ------------------------------------------------------------
   The frame is an inset overlay (::before) painted ABOVE the
   head/body so it reads at the very edge of every window. No
   markup needed for the frame; the 4 corner brackets are tiny
   <i> elements added once in main.js renderWindow().
   ============================================================ */
.gwin::before{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
  box-shadow:
    inset 0 0 0 2px var(--frame-lo),
    inset 0 0 0 4px rgba(245,196,81,.30),
    inset 0 0 0 5px rgba(0,0,0,.40),
    inset 0 0 70px rgba(0,0,0,.45);   /* warm-dark edge vignette */
}
/* (window corner brackets removed — they overlapped the close/emblem and read as clutter) */

/* ============================================================
   2 · TITLE BANNER — carved plaque, gold gilt title, emblem roundel
   ============================================================ */
.gwin-head{
  background:linear-gradient(#33457a,#1b2747 58%,#16203c);
  box-shadow:inset 0 1px 0 rgba(255,233,168,.18),0 3px 10px rgba(0,0,0,.45);
}
.gwin-head::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(245,196,81,.6),transparent)}
/* carved title plate (when produced): a centered, bounded banner BEHIND the title —
   not stretched across the whole header; head children sit above it. */
.has-art .gwin-head::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:0;width:min(62%,440px);height:84%;background:var(--chrome-title) center/100% 100% no-repeat}
.gwin-head>*{position:relative;z-index:1}
.gwin-head .gw-ic{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 50% 32%,#33427a,#10182c);
  border:1px solid var(--gold2);box-shadow:inset 0 1px 0 rgba(255,233,168,.2),0 2px 5px rgba(0,0,0,.5)}
/* gilt title: default SOLID gold (forced-colors/contrast safe); transparent gradient
   fill only where background-clip:text is supported. */
.gwin-head h3{text-align:center;letter-spacing:1.5px;color:var(--gold);
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.5))}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .gwin-head h3{background:linear-gradient(#ffe9a8,#f0b63f);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
@media (forced-colors:active){
  .gwin-head h3{background:none;-webkit-text-fill-color:CanvasText;color:CanvasText}
}

/* ============================================================
   3 · CLOSE — wax-seal / gold-ringed knob
   ============================================================ */
.gwin-close{width:40px;height:40px;border-radius:50%;border:2px solid var(--gold2);color:#ffd9d9;font-weight:900;
  background:radial-gradient(circle at 50% 36%,#b23b3b,#7e1f1f 70%,#4a0f0f);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.25),inset 0 -3px 6px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.5)}
.gwin-close:hover{border-color:var(--gold);color:#fff;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.3),0 0 12px rgba(255,77,77,.6)}
.has-art .gwin-close{background:var(--chrome-seal) center/contain no-repeat;border:0;box-shadow:none}

/* ============================================================
   4 · BODY — subtle stone texture + ornate gold scrollbar
   ============================================================ */
.gwin-body{
  background-image:
    radial-gradient(140% 70% at 50% -8%,rgba(245,196,81,.05),transparent 55%),
    linear-gradient(rgba(8,12,22,0),rgba(8,12,22,.32));
}
.has-art .gwin-body{background-image:var(--panel-bg)}
.gwin-body::-webkit-scrollbar{width:10px}
.gwin-body::-webkit-scrollbar-track{background:#0a0f1c;border-left:1px solid var(--line)}
.gwin-body::-webkit-scrollbar-thumb{border-radius:6px;border:2px solid #0a0f1c;
  background:linear-gradient(var(--gold),var(--gold2))}
.gwin-body::-webkit-scrollbar-thumb:hover{background:linear-gradient(var(--gold-lite),var(--gold))}

/* ============================================================
   5 · PANELS / WELLS — carved inset on content boxes
   ============================================================ */
.panel,.gear-detail,.camp-side,.beast-dev .bd-art{box-shadow:var(--carve),var(--shadow)}
.panel-title,.section-head h2{text-shadow:0 1px 0 #000,0 0 16px rgba(245,196,81,.22)}

/* ============================================================
   6 · ITEM SOCKETS — recessed wells (equip slots upgrade app-wide)
   ============================================================ */
.gear-slot,.slot{
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(245,196,81,.06),transparent 60%),
    linear-gradient(#0e1626,#070b14);
  box-shadow:var(--carve)}
.gear-slot:hover{box-shadow:var(--carve),0 0 10px rgba(245,196,81,.22)}

/* canonical reusable socket (hero view + any grid) */
.ui-socket{position:relative;border-radius:12px;display:grid;place-items:center;
  border:2px solid var(--frame-lo);
  background:radial-gradient(120% 90% at 50% 0%,rgba(245,196,81,.07),transparent 60%),linear-gradient(#0e1626,#070b14);
  box-shadow:var(--carve);transition:transform .1s,box-shadow .15s,border-color .15s}
.ui-socket::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(245,196,81,.20)}
.ui-socket:hover{transform:translateY(-1px);box-shadow:var(--carve),0 0 12px rgba(245,196,81,.28)}
.ui-socket.r-blue{border-color:var(--blue)} .ui-socket.r-purple{border-color:var(--purple)}
.ui-socket.r-yellow{border-color:#f5e050} .ui-socket.r-orange{border-color:#ff9a3c}
.ui-socket.r-gold{border-color:var(--rare-gold)} .ui-socket.r-red{border-color:var(--red)}
.has-art .ui-socket{background:var(--ui-socket) center/100% 100% no-repeat}

/* ============================================================
   7 · PEDESTAL — ornate character dais + aura floor (hero stage)
   ============================================================ */
.ui-pedestal{position:relative;display:grid;place-items:end center}
.ui-pedestal::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:76%;height:28px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(245,196,81,.42),rgba(245,196,81,.08) 60%,transparent 76%);
  filter:blur(1px)}
.has-art .ui-pedestal::after{width:88%;height:auto;aspect-ratio:4/1;
  background:var(--ui-pedestal) center/contain no-repeat;filter:none}

/* ============================================================
   8 · NODE — dev-path / talent / saint milestone node (reuse)
   ============================================================ */
.ui-node{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--frame-mid);box-shadow:var(--carve);
  background:radial-gradient(circle at 50% 34%,#2a3a66,#0e1424)}
.ui-node.done{border-color:#5b8cff;box-shadow:var(--carve),0 0 8px rgba(91,140,255,.4)}
.ui-node.cur{border-color:var(--gold);box-shadow:var(--carve),0 0 12px rgba(245,166,35,.55)}
.ui-node.lock{opacity:.4}
.has-art .ui-node{background:var(--ui-node) center/contain no-repeat}

/* ============================================================
   9 · BUTTONS — carved gloss (keeps the existing 3px drop)
   ============================================================ */
.btn-gold{position:relative;overflow:hidden}
.btn-gold::before{content:"";position:absolute;inset:0 0 auto 0;height:46%;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.5),transparent)}

/* ============================================================
   10 · TABS — carved segmented control; active = raised gold plaque.
   The universal .chapter-tabs bar (campaign/shop/bag/auction/
   rankings/tavern/janken) seated in a recessed groove.
   ============================================================ */
.chapter-tabs{padding:5px;gap:5px;border-radius:12px;
  background:linear-gradient(#0a0f1c,#0c1322);border:1px solid var(--line);box-shadow:var(--carve)}
.chapter-tab{border-radius:9px;box-shadow:var(--carve);
  transition:transform .1s,color .15s,box-shadow .15s,background .15s}
.chapter-tab:not(.active){color:var(--muted)}
.chapter-tab:not(.active):hover{color:var(--parch);box-shadow:var(--carve),0 0 8px rgba(245,196,81,.18)}
.chapter-tab.active{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 8px rgba(0,0,0,.45),0 0 10px rgba(245,196,81,.28)}

/* ============================================================
   11 · PRIMITIVES — divider + section banner plate
   ============================================================ */
.chrome-divider{height:2px;margin:12px 0;border:0;position:relative;
  background:linear-gradient(90deg,transparent,var(--gold2),transparent)}
.chrome-divider::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--gold);
  box-shadow:0 0 8px rgba(245,196,81,.6)}
.chrome-banner{display:inline-block;font-family:'Cinzel',serif;font-size:16px;letter-spacing:1px;
  color:var(--gold);padding:3px 14px;border:1px solid var(--gold2);border-radius:4px;
  background:linear-gradient(#243156,#16203a);box-shadow:var(--carve)}

/* ============================================================
   12 · MODAL — match the window frame (centered overlays)
   ============================================================ */
.modal{box-shadow:inset 0 0 0 1px rgba(245,196,81,.25),var(--shadow)}
.modal-head{box-shadow:inset 0 1px 0 rgba(255,233,168,.16)}
.modal-head h3{filter:drop-shadow(0 1px 0 rgba(0,0,0,.4))}

/* ============================================================
   ★ HERO VIEW (showpiece, spec 4.1a) — the 5% WoW moment.
   ------------------------------------------------------------
   Name plaque top · full-body portrait on an ornate pedestal w/
   rarity aura behind · 16-slot paperdoll WRAPPING the figure
   (left 7 / right 7 / bottom 2) · stats + jutsu below the gear.
   Rendered as a wide framed plate over the dimmed game
   (.modal-hero) — the reference's "large centered plate" model.
   ============================================================ */
.modal.modal-hero{width:min(96vw,1040px);max-height:94vh}
.modal-hero .modal-head{display:none}
.modal-hero .modal-body{padding:0}
.hero-view{position:relative;padding:18px 20px 22px}
.hv-close{position:absolute;top:14px;right:14px;z-index:5;width:36px;height:36px;border-radius:50%;
  border:2px solid var(--gold2);color:#ffd9d9;font-weight:900;font-size:19px;
  background:radial-gradient(circle at 50% 36%,#b23b3b,#7e1f1f 70%,#4a0f0f);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.25),0 2px 6px rgba(0,0,0,.5)}
.hv-close:hover{border-color:var(--gold);color:#fff;box-shadow:0 0 12px rgba(255,77,77,.6)}

/* ① identity band */
.hv-id{text-align:center;margin-bottom:12px;padding:0 46px}
/* bounded carved nameplate (not loose text); swaps to the title-plate art under .has-art */
.hv-name{display:inline-block;font-family:'Cinzel',serif;font-weight:900;font-size:34px;letter-spacing:1px;line-height:1.1;
  padding:5px 28px;border-radius:9px;border:1px solid var(--gold2);
  background:linear-gradient(#243156,#16203a);box-shadow:var(--carve),0 3px 10px rgba(0,0,0,.4);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.has-art .hv-name{border:0;background:var(--chrome-title) center/100% 100% no-repeat}
.hv-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:9px}
.hv-chip{font-size:14px;font-weight:700;padding:3px 12px;border-radius:14px;text-transform:capitalize;
  background:#0c1322;border:1px solid var(--line);box-shadow:var(--carve)}
.hv-chip.bp{color:var(--gold);border-color:var(--gold2)}
.hv-title{font-size:14px;font-style:italic;margin-top:5px}

/* ② stage: left gear | pedestal | right gear */
.hv-stage{display:grid;grid-template-columns:88px minmax(200px,1fr) 88px;gap:16px;align-items:center;
  justify-items:center;max-width:840px;margin:0 auto}
.hv-gearcol{display:flex;flex-direction:column;gap:9px;width:88px;justify-content:center}
.hv-gearcol .gear-slot{width:100%;min-height:62px;padding:6px}
.hv-pedestal{width:100%;padding-bottom:22px}
.hv-portrait{position:relative;height:min(50vh,470px);aspect-ratio:3/4;max-width:100%;margin:0 auto;z-index:1;
  border:3px solid var(--gold2);border-radius:16px;overflow:hidden;
  background:radial-gradient(circle at 50% 30%,#33437a,#0c1322);box-shadow:0 14px 36px rgba(0,0,0,.6)}
.hv-aura{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:74%;height:66%;z-index:0;
  border-radius:50%;pointer-events:none;background:radial-gradient(circle,var(--aura,#f5c451),transparent 66%);
  opacity:.3;filter:blur(15px);animation:hvAura 3.8s ease-in-out infinite}
@keyframes hvAura{0%,100%{opacity:.22;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.4;transform:translate(-50%,-50%) scale(1.08)}}

/* level plate at the base of the portrait (spec 4.1a) */
.hv-level{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:2;
  font-family:'Cinzel',serif;font-weight:900;font-size:14px;color:#3a2606;letter-spacing:.5px;
  padding:2px 14px;border-radius:11px;border:1px solid #ffe9a8;
  background:linear-gradient(#fcd97a,var(--gold2));box-shadow:0 2px 6px rgba(0,0,0,.55)}

/* hero sockets get the ui-socket gem accent + asset hook; rarity borders preserved */
.hv-gearcol .gear-slot,.hv-bottomgear .gear-slot{position:relative}
.hv-gearcol .gear-slot::after,.hv-bottomgear .gear-slot::after{content:"";position:absolute;top:-3px;left:-3px;
  width:8px;height:8px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 38% 34%,var(--gold-lite),var(--gold2));box-shadow:0 0 6px rgba(245,196,81,.5)}
.has-art .hv-gearcol .gear-slot,.has-art .hv-bottomgear .gear-slot{background:var(--ui-socket) center/100% 100% no-repeat}

/* bottom gear row (weapon · S.Weapon) under the pedestal */
.hv-bottomgear{display:flex;gap:14px;justify-content:center;margin:2px auto 12px;max-width:360px}
.hv-bottomgear .gear-slot{width:150px;min-height:64px}

/* actions */
.hv-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:2px 0 12px}
.hv-actions .btn-gold,.hv-actions .btn-dark{min-width:180px}

/* ③ stats + jutsu */
.hv-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.hv-panel{background:linear-gradient(#161f36,#0d1322);border:1px solid var(--gold2);border-radius:12px;
  padding:12px 14px;box-shadow:var(--carve),var(--shadow)}
.hv-jutsu-ic{flex:0 0 auto;width:42px;height:42px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 35%,#243156,#0c1322);border:1px solid var(--gold2);box-shadow:var(--carve)}

@media(prefers-reduced-motion:reduce){.hv-aura{animation:none}}
@media(max-width:680px){
  .hv-name{font-size:28px}
  .hv-id{padding:0 36px}
  .hv-stage{grid-template-columns:1fr;max-width:320px;gap:12px}
  .hv-gearcol{flex-direction:row;flex-wrap:wrap;width:auto;justify-content:center;gap:8px}
  .hv-gearcol .gear-slot{width:72px}
  /* icon-first sockets on narrow widths: suppress item labels so cells don't wrap/expand */
  .hv-gearcol .gs-name,.hv-gearcol .gs-empty,.hv-gearcol .gs-fort{display:none}
  .hv-portrait{height:min(46vh,360px)}
  .hv-cols{grid-template-columns:1fr}
}

/* ============================================================
   13 · SHARED SURFACES (part 3, batch A) — roll the chrome across
   EVERY screen via the high-frequency component classes, CSS-only
   (no JS). These classes appear on campaign/mail/
   talents/beasts/mall/club/… so one pass uplifts them all.
   Cascade-safe: state variants (.boss/.cur/.ranked/.done) keep
   their own glow via higher specificity or later styles rules.
   ============================================================ */
/* section header → a gold hairline under the title (most screens lead with this) */
.section-head{border-bottom:1px solid rgba(245,196,81,.16);padding-bottom:8px}

/* list row — campaign stages, kage, mail, jades.
   carved bevel + hover lift; the leading number/icon becomes a recessed plate. */
.stage-card{box-shadow:var(--carve);transition:transform .1s,border-color .15s,box-shadow .15s}
.stage-card:hover{transform:translateY(-1px);box-shadow:var(--carve),0 4px 14px rgba(0,0,0,.45)}
.stage-card.boss{box-shadow:var(--carve),0 0 16px rgba(245,166,35,.3)}
.stage-no{box-shadow:var(--carve);background:radial-gradient(circle at 50% 30%,#2a3a66,#0c1322)}

/* framed cards — mall / club / sigil / camp (tabbed-grid archetype) */
.mall-card,.club-card,.camp-card{box-shadow:var(--carve),0 3px 10px rgba(0,0,0,.4)}
.mall-card{transition:transform .12s,border-color .15s}
.mall-card:hover{transform:translateY(-2px);border-color:var(--gold2)}

/* node-path nodes — talents / beast-pet dev-path / pickers (node archetype): recessed
   depth on the base; ranked/cur/done states keep their glow (higher specificity wins). */
.dp-node{box-shadow:var(--carve)}
.tt-node .tn-ic{box-shadow:var(--carve)}
.jk-btn{box-shadow:var(--carve)}

/* ============================================================
   14 · PERSISTENT HUD (part 3, batch B) — reworked 2026-07-12: the
   HUD is now borderless plain text floating on the full-bleed
   village art (owner call); the carved capsule/plate look is gone.
   ============================================================ */
.cs-item .val{text-shadow:0 1px 2px #000}
.player-logo .avatar{box-shadow:inset 0 1px 0 rgba(255,233,168,.2),0 2px 6px rgba(0,0,0,.5)}

/* ============================================================
   15 · NODE-PATH BANDS (part 3, batch C) — archetype E. Talent
   build-trees read as themed node-paths: a --tcol-tinted band +
   a connecting spine down the tiers; the dev-path links gild.
   CSS-only; --tcol is set inline per tree in screens2.js.
   ============================================================ */
.talent-tree{position:relative;
  background:linear-gradient(#16203a,#0e1424); /* standalone fallback if color-mix unsupported */
  background:
    radial-gradient(130% 55% at 50% 0%,color-mix(in srgb,var(--tcol,#9aa) 16%,transparent),transparent 62%),
    linear-gradient(#16203a,#0e1424)}
.talent-tree .tt-ic{box-shadow:var(--carve),0 0 10px color-mix(in srgb,var(--tcol,#9aa) 45%,transparent)}
.tt-nodes{position:relative}
.tt-nodes::before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:2px;transform:translateX(-50%);
  z-index:0;opacity:.5;background:linear-gradient(color-mix(in srgb,var(--tcol,#9aa) 70%,transparent),transparent)}
.tt-tier,.tt-row{position:relative;z-index:1}
/* beast/pet dev-path: gild the connector links into a lit path */
.dev-path .dp-link{background:linear-gradient(90deg,var(--gold2),var(--gold))}

/* ============================================================
   16 · SHELL DENSITY (redesign P0) — historical note.
   ============================================================ */
/* (top function band removed — its systems live in the bottom-nav More window) */
/* (bottom #exp-strip removed 2026-07-12 — level/XP render as the gold ring around the HUD avatar) */

/* ============================================================
   17 · SHELL OVERLAYS (redesign P0) — right quest rail + lower-left
   activity log: content-row overlays on the village (covered by windows).
   ============================================================ */
#quest-rail{grid-row:2;grid-column:1;z-index:3;
  background:linear-gradient(#1a2440,#10182b);border:1px solid var(--gold2);border-radius:12px;
  box-shadow:var(--carve),var(--shadow)}
#quest-rail.hidden{display:none!important}
#quest-rail{justify-self:end;align-self:start;width:clamp(210px,22vw,290px);margin:12px;padding:10px 12px}
.qr-head{font-family:'Cinzel',serif;color:var(--gold);font-size:16px;font-weight:700;display:flex;align-items:center}
.qr-name{font-weight:700;font-size:17px;margin:6px 0 3px}
.qr-prog{font-size:14px;color:var(--muted);margin-bottom:8px;line-height:1.35}
.qr-go{width:100%;padding:7px}
@media(max-width:767.98px){#quest-rail{display:none!important}}

/* ============================================================
   18 · WORKBENCH ARCHETYPE (redesign P0c) — the reusable dense
   feature-window layout the reference uses everywhere:
   left rail · center preview · right grid/stats · bottom actions.
   P1+ screens render their content into these regions. Additive:
   nothing uses it until a screen adopts `.wb`.
   ============================================================ */
.wb{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;
  gap:10px;height:100%;min-height:0}
.wb-rail{grid-row:1/3;grid-column:1;display:flex;flex-direction:column;gap:6px;overflow-y:auto;
  width:clamp(120px,15vw,176px);padding:6px;background:linear-gradient(#141d33,#0d1322);
  border:1px solid var(--gold2);border-radius:12px;box-shadow:var(--carve)}
.wb-center{grid-row:1;grid-column:2;min-width:0;min-height:0;overflow:auto;
  display:flex;flex-direction:column;align-items:center;padding:6px}
.wb-side{grid-row:1;grid-column:3;min-height:0;overflow-y:auto;
  width:clamp(220px,26vw,340px);padding:8px;background:linear-gradient(#141d33,#0d1322);
  border:1px solid var(--gold2);border-radius:12px;box-shadow:var(--carve)}
.wb-foot{grid-row:2;grid-column:2/4;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 10px;background:linear-gradient(#1a2440,#10182b);border:1px solid var(--gold2);
  border-radius:12px;box-shadow:var(--carve)}
/* rail item (roster/category selector) */
.wb-rail-item{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:9px;cursor:pointer;
  background:#0c1322;border:1px solid var(--line);box-shadow:var(--carve);transition:transform .1s,border-color .12s}
.wb-rail-item:hover{transform:translateY(-1px);border-color:var(--gold2)}
.wb-rail-item.active{border-color:var(--gold);box-shadow:var(--carve),0 0 8px rgba(245,196,81,.35)}
/* dense item grid for the side/center panels (inventory, shop, …) */
.wb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(67px,1fr));gap:6px}
.wb-section{font-family:'Cinzel',serif;color:var(--gold);font-size:14px;font-weight:700;
  letter-spacing:.04em;margin:2px 0 6px}
/* responsive: stack rail/side under the center on narrow */
@media(max-width:860px){
  .wb{grid-template-columns:1fr;grid-template-rows:auto auto auto auto}
  .wb-rail{grid-row:1;grid-column:1;flex-direction:row;flex-wrap:wrap;width:auto}
  .wb-center{grid-row:2;grid-column:1}
  .wb-side{grid-row:3;grid-column:1;width:auto}
  .wb-foot{grid-row:4;grid-column:1}
}

/* ============================================================
   19 · HERO/EQUIPMENT WORKBENCH (redesign P1) — first .wb adopter.
   Reuses the hero-view stage (.hv-*) at workbench size; adds roster
   rail items + the right inventory grid tiles.
   ============================================================ */
.hero-wb{max-width:1080px;max-height:100%;margin:0 auto;gap:12px}
.hero-wb .hv-id{margin-bottom:6px}
.hero-wb .hv-name{display:inline-block;font-size:23px;line-height:1.15;padding:6px 30px}
.hero-wb .hv-stage{max-width:600px;gap:8px;margin:0 auto}
.hero-wb .hv-gearcol{width:104px;gap:8px}
.hero-wb .hv-gearcol .gear-slot{min-height:72px;padding:6px}
.hero-wb .hv-gearcol .gs-ic{font-size:36px}
.hero-wb .hv-gearcol .gs-name,.hero-wb .hv-gearcol .gs-empty{font-size:12px}
.hero-wb .hv-portrait{height:min(34vh,290px)}
.hero-wb .hv-bottomgear{margin-bottom:6px}
.hero-wb .hv-bottomgear .gs-ic{font-size:34px}
.hero-wb .hw-stats{max-width:440px;margin:4px auto 0}
.hero-wb .wb-section{text-align:center}
.hw-jutsu{max-width:560px;margin:0 auto;font-size:15px;line-height:1.45}
.hw-jt{display:flex;gap:9px;align-items:flex-start}
.hw-jt-ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;overflow:hidden;border:1px solid var(--gold2);background:radial-gradient(circle at 50% 35%,#243156,#0c1322)}
/* roster rail items (rarity left-edge) */
.wb-rail-item{padding:5px 7px}
.wb-rail-item.r-blue{border-left:3px solid var(--blue)} .wb-rail-item.r-purple{border-left:3px solid var(--purple)}
.wb-rail-item.r-yellow{border-left:3px solid #f5e050} .wb-rail-item.r-orange{border-left:3px solid #ff9a3c}
.wb-rail-item.r-red{border-left:3px solid var(--red)} .wb-rail-item.r-gold{border-left:3px solid var(--rare-gold)}
.hw-ros-ic{flex:0 0 auto;width:30px;height:30px;border-radius:7px;overflow:hidden;background:radial-gradient(circle at 50% 30%,#33437a,#141b2e)}
.hw-ros-meta{min-width:0;display:flex;flex-direction:column;line-height:1.18;font-size:14px}
.hw-ros-meta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-ros-meta .muted{font-size:12px}
/* right inventory grid tiles */
.hw-invtabs{margin-bottom:8px}
.hw-inv{align-content:start;grid-template-columns:repeat(auto-fill,minmax(62px,1fr))}
.hw-tile{position:relative;aspect-ratio:1;min-height:0;padding:3px;display:grid;place-items:center;cursor:pointer}
.hw-tile .gs-ic{font-size:29px}
.hw-tile:hover{border-color:var(--gold);box-shadow:0 0 8px rgba(245,196,81,.4)}
.hw-tile.equipped{opacity:.5}
.hw-tile.busy{opacity:.6}
.hw-eqbadge{position:absolute;top:0;left:2px;font-size:13px;font-weight:900;color:#7dffa8;text-shadow:0 1px 2px #000}
.hw-eqbadge.busy{color:var(--muted)}
.hw-fort{position:absolute;bottom:1px;right:3px;font-size:11px;font-weight:800;color:var(--gold);text-shadow:0 1px 1px #000}
.hw-stats{font-size:14px;margin-top:2px}
.hw-foot-bp b{color:var(--gold)}

/* ============================================================
   20 · BAG (redesign P1) — left category rail + dense item grid.
   ============================================================ */
.bag-wb{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;height:100%;min-height:0}
.bag-wb .wb-rail{width:clamp(118px,14vw,158px)}
.bag-body{min-height:0;overflow-y:auto;padding:2px 2px 8px}
.bag-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}
.bag-grid .hw-tile .gs-ic{font-size:31px}
/* narrow: collapse the rail+content to one column (was staying 2-col over the generic .wb rule) */
@media(max-width:860px){.bag-wb{grid-template-columns:1fr}.bag-wb .wb-rail{flex-direction:row;flex-wrap:wrap;width:auto}}

/* ============================================================
   21 · MAIL (redesign P2) — two-pane: message list + detail.
   ============================================================ */
.mail-wb .wb-rail{width:clamp(180px,24vw,280px)}
.mail-item{align-items:center}
.mail-detail{align-items:stretch;text-align:left;padding:6px 14px;overflow-y:auto}
.mail-d-title{font-family:'Cinzel',serif;font-size:20px;color:var(--gold);margin-bottom:8px}
.mail-d-body{font-size:16px;line-height:1.55;color:var(--parch)}

/* ============================================================
   22 · QUESTS (redesign P2) — centered ornate tracker card.
   ============================================================ */
.quest-wrap{max-width:560px;margin:0 auto}
.quest-card{background:linear-gradient(#1a2440,#10182b);border:1px solid var(--gold2);border-radius:14px;padding:18px;box-shadow:var(--carve),var(--shadow)}
.quest-q-name{font-family:'Cinzel',serif;font-size:22px;color:var(--gold)}
.quest-q-desc{font-size:16px;color:var(--parch);margin-top:6px;line-height:1.5}
.tower-wrap{max-width:640px;margin:0 auto}