/* ══════════════════════════════════════════════════════════
   7SLF · CLIENT CHROME
   Everything here is layout and feel. The canvas draws the
   world; the DOM draws the interface, because text in canvas is
   a accessibility dead end and DOM text is free and crisp.
   ══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#07080e; --bg2:#0b0d16; --panel:#11141f; --panel2:#171b2a;
  --line:#232a3d; --line2:#333c56;
  --text:#f2f4f8; --muted:#b3bdd0; --dim:#8792a8;

  --ice:#7dd3fc; --violet:#a78bfa; --cyan:#38d4e6;
  --green:#34d399; --amber:#fbbf24; --mag:#f472b6; --red:#fb7185;

  --hp:#3ddc84; --hp2:#1f9d5a;
  --res:#4aa8ff; --res2:#1f6fd0;
  --xp:#a78bfa; --xp2:#7c3aed;

  --common:#ffffff; --uncommon:#1eff00; --rare:#0070dd;
  --epic:#a335ee; --legendary:#ff8000; --poor:#9d9d9d;

  --font:'Inter',system-ui,-apple-system,sans-serif;
  --display:'Outfit','Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --r:10px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:15px;-webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
canvas{display:block}

/* A canvas is a REPLACED element: inset:0 alone does not stretch it the way
   it stretches a div — the used width falls back to the intrinsic 300x150.
   Explicit 100% is required. */
#world{position:fixed;inset:0;width:100%;height:100%;z-index:0;image-rendering:auto}

/* ── vignette + colour grade over the world ────────────── */
#grade{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 42%,rgba(0,0,0,.55) 100%)}
#dmgflash{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(255,40,60,.55) 100%);
  transition:opacity .09s ease-out}
#lowhp{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 180px rgba(255,30,50,.55);transition:opacity .4s}

/* ══ HUD ═════════════════════════════════════════════════ */
.hud{position:fixed;z-index:10;pointer-events:none}
.hud > *{pointer-events:auto}

/* unit frames */
#playerFrame{top:16px;left:16px;width:262px}
#targetFrame{top:16px;left:294px;width:262px;display:none}
.frame{background:linear-gradient(180deg,rgba(23,27,42,.94),rgba(17,20,31,.94));
  border:1px solid var(--line2);border-radius:var(--r);padding:9px 11px;
  backdrop-filter:blur(10px);box-shadow:0 8px 28px rgba(0,0,0,.55)}
.frame__top{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.frame__name{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.01em}
.frame__lvl{font-family:var(--mono);font-size:12px;color:var(--dim);margin-left:auto}
.frame__class{font-size:11.5px;color:var(--muted)}
.bar{position:relative;height:15px;border-radius:5px;overflow:hidden;
  background:#0a0d16;border:1px solid rgba(0,0,0,.6);margin-bottom:4px}
.bar__fill{position:absolute;inset:0;transform-origin:left center;
  transition:transform .16s cubic-bezier(.2,.9,.25,1)}
/* the classic "damage chaser" — a pale bar that lags behind so you
   SEE the size of the hit, not just the new value */
.bar__chase{position:absolute;inset:0;transform-origin:left center;
  background:rgba(255,255,255,.28);transition:transform .5s ease-out .18s}
.bar__txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.95);letter-spacing:.02em}
.bar--hp .bar__fill{background:linear-gradient(180deg,var(--hp),var(--hp2))}
.bar--res .bar__fill{background:linear-gradient(180deg,var(--res),var(--res2))}
.bar--cast .bar__fill{background:linear-gradient(180deg,#ffd76e,#f0a020)}
.bar--xp{height:9px;border-radius:4px}
.bar--xp .bar__fill{background:linear-gradient(180deg,var(--xp),var(--xp2))}

/* auras */
.auras{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px;min-height:22px}
.aura{position:relative;width:24px;height:24px;border-radius:5px;display:grid;place-items:center;
  font-size:13px;border:1px solid;background:rgba(0,0,0,.42)}
.aura--buff{border-color:rgba(52,211,153,.6)}
.aura--debuff{border-color:rgba(251,113,133,.6)}
.aura__n{position:absolute;right:-2px;bottom:-3px;font-family:var(--mono);font-size:9px;
  font-weight:700;color:#fff;text-shadow:0 0 3px #000}
.aura__cd{position:absolute;inset:0;border-radius:4px;
  background:conic-gradient(rgba(0,0,0,.66) var(--p,0deg),transparent 0)}

/* cast bar */
#castBar{position:fixed;left:50%;transform:translateX(-50%);bottom:158px;width:330px;
  z-index:11;display:none}
#castBar .bar{height:19px}
#castLabel{font-family:var(--display);font-size:12.5px;font-weight:700;text-align:center;
  margin-bottom:4px;letter-spacing:.02em}

/* ── action bar ────────────────────────────────────────── */
#actionBar{bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:12}
.slot{position:relative;width:54px;height:54px;border-radius:9px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line2);display:grid;place-items:center;
  transition:transform .12s cubic-bezier(.2,.9,.25,1),border-color .15s,box-shadow .15s}
.slot:hover{transform:translateY(-3px);border-color:var(--ice);
  box-shadow:0 6px 20px rgba(125,211,252,.28)}
.slot:active{transform:translateY(-1px) scale(.96)}
.slot__icon{font-size:23px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.slot__key{position:absolute;top:2px;left:5px;font-family:var(--mono);font-size:10px;
  color:var(--dim);font-weight:700}
.slot__cd{position:absolute;inset:0;border-radius:8px;pointer-events:none;
  background:conic-gradient(rgba(4,6,12,.78) var(--p,0deg),transparent 0)}
.slot__cdn{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:15px;font-weight:800;color:#fff;
  text-shadow:0 2px 5px #000;pointer-events:none}
.slot--unusable{opacity:.4;filter:grayscale(.75)}
.slot--nores .slot__icon{filter:drop-shadow(0 0 5px var(--res))}
/* "ready" pulse the instant a cooldown finishes — the small
   feedback that stops you spamming a key to test it */
@keyframes slotReady{
  0%{box-shadow:0 0 0 0 rgba(125,211,252,.75)}
  100%{box-shadow:0 0 0 15px rgba(125,211,252,0)}
}
.slot--ready{animation:slotReady .45s ease-out}
/* global cooldown sweep — thin, so it reads as different from a real CD */
.slot__gcd{position:absolute;inset:0;border-radius:8px;pointer-events:none;
  background:conic-gradient(rgba(255,255,255,.14) var(--g,0deg),transparent 0)}

/* ── combat log ────────────────────────────────────────── */
#log{bottom:16px;left:16px;width:330px;max-height:172px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
  font-family:var(--mono);font-size:11.5px;line-height:1.5;z-index:10}
.logline{opacity:0;transform:translateX(-10px);animation:logIn .26s ease-out forwards;
  text-shadow:0 1px 3px rgba(0,0,0,.9)}
@keyframes logIn{to{opacity:1;transform:none}}
.logline.fade{opacity:.4}

/* ── minimap ───────────────────────────────────────────── */
#minimap{top:16px;right:16px;width:158px;z-index:10}
#minimap canvas{border-radius:50%;border:2px solid var(--line2);
  background:#070910;box-shadow:0 6px 22px rgba(0,0,0,.6)}
#zoneName{font-family:var(--display);font-weight:800;font-size:13px;text-align:center;
  margin-top:6px;letter-spacing:.04em;text-shadow:0 2px 6px #000}
#zoneSub{font-size:11px;color:var(--dim);text-align:center;font-family:var(--mono)}

/* ── quest tracker ─────────────────────────────────────── */
#tracker{top:200px;right:16px;width:236px;z-index:10;font-size:12.5px}
.qt{margin-bottom:11px}
.qt__t{font-family:var(--display);font-weight:700;font-size:12.5px;color:var(--amber);
  margin-bottom:3px;text-shadow:0 2px 5px #000}
.qt__o{color:var(--muted);padding-left:9px;text-shadow:0 1px 3px #000}
.qt__o.done{color:var(--green);text-decoration:line-through;opacity:.72}
.qt__c{color:var(--green);font-weight:700}

/* ── panels ────────────────────────────────────────────── */
.panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(.96);
  width:min(760px,92vw);max-height:82vh;overflow:hidden;z-index:40;
  background:linear-gradient(180deg,rgba(23,27,42,.985),rgba(13,16,26,.985));
  border:1px solid var(--line2);border-radius:14px;
  box-shadow:0 30px 90px rgba(0,0,0,.75);display:none;opacity:0;
  transition:opacity .18s ease,transform .22s cubic-bezier(.2,.95,.3,1)}
.panel.open{display:flex;flex-direction:column;opacity:1;transform:translate(-50%,-50%) scale(1)}
.panel__head{display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--line)}
.panel__title{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.01em}
.panel__close{margin-left:auto;color:var(--dim);font-size:20px;line-height:1;padding:2px 6px;border-radius:6px}
.panel__close:hover{color:var(--text);background:rgba(255,255,255,.08)}
.panel__body{padding:16px 18px;overflow-y:auto}
.panel__body::-webkit-scrollbar{width:8px}
.panel__body::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}

/* bags */
.bagGrid{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}
.cell{aspect-ratio:1;border-radius:8px;background:rgba(8,10,18,.85);
  border:1px solid var(--line);display:grid;place-items:center;position:relative;
  transition:transform .12s,border-color .15s}
.cell:hover{transform:scale(1.07);border-color:var(--ice);z-index:2}
.cell__i{font-size:21px}
.cell__q{position:absolute;right:3px;bottom:2px;font-family:var(--mono);font-size:10px;
  font-weight:700;text-shadow:0 1px 3px #000}
.cell[data-q="uncommon"]{border-color:var(--uncommon)}
.cell[data-q="rare"]{border-color:var(--rare)}
.cell[data-q="epic"]{border-color:var(--epic)}
.cell[data-q="legendary"]{border-color:var(--legendary);box-shadow:0 0 14px rgba(255,128,0,.45)}

/* paper doll */
.doll{display:grid;grid-template-columns:1fr 128px 1fr;gap:14px;align-items:start}
.dollCol{display:flex;flex-direction:column;gap:7px}
.dslot{height:50px;border-radius:8px;border:1px solid var(--line);
  background:rgba(8,10,18,.8);display:flex;align-items:center;gap:9px;padding:0 10px;
  transition:border-color .15s,transform .12s}
.dslot:hover{border-color:var(--ice);transform:translateX(2px)}
.dslot__i{font-size:19px;width:24px;text-align:center}
.dslot__n{font-size:11.5px;line-height:1.25;overflow:hidden}
.dslot__s{font-family:var(--mono);font-size:10px;color:var(--dim)}
.dollMid{display:grid;place-items:center;gap:9px}
.statList{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:5px 18px;font-size:13px}
.statRow{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.05);
  padding-bottom:3px}
.statRow b{font-family:var(--mono);font-weight:700}

/* tooltip */
#tip{position:fixed;z-index:90;max-width:310px;pointer-events:none;display:none;
  background:rgba(6,8,14,.985);border:1px solid var(--line2);border-radius:9px;
  padding:10px 12px;box-shadow:0 14px 44px rgba(0,0,0,.8);font-size:12.5px;line-height:1.5}
#tip .tn{font-family:var(--display);font-weight:800;font-size:14px;margin-bottom:3px}
#tip .tl{color:var(--muted)}
#tip .tl.stat{color:var(--ice)}
#tip .tl.bad{color:var(--red)}
#tip .tl.flavour{color:var(--dim);font-style:italic;margin-top:5px}
#tip .up{color:var(--green)} #tip .dn{color:var(--red)}

/* ── toast / banner ────────────────────────────────────── */
#banner{position:fixed;top:24%;left:50%;transform:translateX(-50%);z-index:60;
  text-align:center;pointer-events:none;display:none}
#bannerT{font-family:var(--display);font-weight:900;font-size:44px;letter-spacing:-.02em;
  text-shadow:0 4px 26px rgba(0,0,0,.9)}
#bannerS{font-size:15px;color:var(--muted);margin-top:2px;text-shadow:0 2px 8px #000}
@keyframes bannerIn{
  0%{opacity:0;transform:translateX(-50%) scale(.7) translateY(18px)}
  55%{opacity:1;transform:translateX(-50%) scale(1.06) translateY(0)}
  100%{opacity:1;transform:translateX(-50%) scale(1)}
}
#banner.show{display:block;animation:bannerIn .5s cubic-bezier(.2,1.3,.35,1) both}

/* ── dialogue ──────────────────────────────────────────── */
#dialogue{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);width:min(660px,92vw);
  z-index:50;display:none;background:linear-gradient(180deg,rgba(23,27,42,.985),rgba(11,13,22,.985));
  border:1px solid var(--line2);border-radius:14px;padding:16px 20px;
  box-shadow:0 20px 60px rgba(0,0,0,.7)}
#dlgName{font-family:var(--display);font-weight:800;font-size:15px;color:var(--amber);margin-bottom:6px}
#dlgText{color:var(--muted);line-height:1.7;margin-bottom:12px;min-height:46px}
.dlgOpt{display:block;width:100%;text-align:left;padding:9px 13px;border-radius:8px;
  border:1px solid var(--line);margin-bottom:6px;font-size:13.5px;
  transition:all .14s}
.dlgOpt:hover{border-color:var(--ice);background:rgba(125,211,252,.09);transform:translateX(3px)}
.dlgOpt.q{border-color:rgba(251,191,36,.5);color:var(--amber)}

/* ── character creation ────────────────────────────────── */
#create{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  overflow:auto;padding:28px 0;
  background:radial-gradient(ellipse at 50% 40%,#141a2e 0%,#07080e 70%)}
#createInner{width:min(980px,94vw);text-align:center;margin:auto}
#createInner h1{font-family:var(--display);font-weight:900;font-size:clamp(38px,7vw,72px);
  letter-spacing:-.03em;line-height:1;
  background:linear-gradient(120deg,var(--ice),var(--violet) 45%,var(--mag));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 34px rgba(167,139,250,.35))}
#createInner .tag{color:var(--dim);font-family:var(--mono);font-size:12.5px;
  letter-spacing:.24em;text-transform:uppercase;margin:8px 0 22px}

/* Section headers for the two picks. The screen asks two questions
   now and they constrain each other, so each one is named. */
.pickHead{display:flex;align-items:baseline;gap:10px;margin:0 2px 9px;text-align:left}
.pickHead__n{font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.02em}
.pickHead__h{font-family:var(--mono);font-size:10.5px;color:var(--dim);
  letter-spacing:.1em;text-transform:uppercase}
.pickHead__h.warn{color:var(--amber)}

.races{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin-bottom:20px}
@media(max-width:900px){.races{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.races{grid-template-columns:repeat(3,1fr)}}
.classes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
@media(max-width:720px){.classes{grid-template-columns:repeat(2,1fr)}}

/* A race card is the same object as a class card, smaller. */
.cls--rce{padding:12px 8px}
.cls--rce .cls__i{font-size:28px;margin-bottom:5px}
.cls--rce .cls__n{font-size:14px}
.cls__st{font-family:var(--mono);font-size:10px;color:var(--ice);
  letter-spacing:.04em;margin:4px 0 5px;line-height:1.5}
.cls__tr{font-size:10.5px;color:var(--dim);line-height:1.45}

/* CLOSED, not merely dim. A choice the data forbids says which
   choice forbids it, and clicking it still does something — it
   drops the selection that closed it rather than eating the click. */
.cls--shut{opacity:.42;filter:saturate(.25)}
.cls--shut:hover{transform:none;border-color:var(--amber);opacity:.72}
.cls__shut{display:block;font-family:var(--mono);font-size:9.5px;color:var(--amber);
  letter-spacing:.08em;text-transform:uppercase;margin-top:7px}

#createNote{min-height:34px;margin:0 auto 14px;max-width:660px;
  font-size:12.5px;line-height:1.5;color:var(--muted)}
#createNote b{color:var(--text)}
#createNote.warn{color:var(--amber)}
.cls{padding:18px 14px;border-radius:13px;border:1px solid var(--line2);
  background:linear-gradient(180deg,rgba(23,27,42,.9),rgba(13,16,26,.9));
  transition:all .2s cubic-bezier(.2,.9,.25,1);text-align:center}
.cls:hover{transform:translateY(-5px);border-color:var(--ice)}
.cls.sel{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet),0 12px 40px rgba(167,139,250,.3);
  transform:translateY(-5px)}
.cls__i{font-size:38px;margin-bottom:8px;display:block}
.cls__n{font-family:var(--display);font-weight:800;font-size:17px}
.cls__r{font-family:var(--mono);font-size:10.5px;color:var(--dim);text-transform:uppercase;
  letter-spacing:.14em;margin:3px 0 8px}
.cls__d{font-size:12px;color:var(--muted);line-height:1.55}
#nameIn{width:min(340px,80vw);padding:12px 16px;border-radius:10px;border:1px solid var(--line2);
  background:rgba(8,10,18,.9);color:var(--text);font:inherit;font-size:16px;text-align:center;
  margin-bottom:14px}
#nameIn:focus{outline:2px solid var(--violet);outline-offset:2px}
.btnBig{padding:13px 44px;border-radius:11px;font-family:var(--display);font-weight:800;
  font-size:16px;letter-spacing:.03em;border:1px solid var(--violet);color:var(--text);
  background:linear-gradient(180deg,rgba(167,139,250,.28),rgba(124,58,237,.22));
  transition:all .18s}
.btnBig:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(167,139,250,.4)}
.btnBig:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}

/* ── cinematic ─────────────────────────────────────────── */
#cine{position:fixed;inset:0;z-index:80;display:none;pointer-events:none}
#cine.on{display:block;pointer-events:auto}
.bars{position:absolute;left:0;right:0;height:0;background:#000;transition:height .8s cubic-bezier(.2,.9,.25,1)}
#barTop{top:0} #barBot{bottom:0}
#cine.on .bars{height:12vh}
#cineText{position:absolute;left:50%;bottom:18vh;transform:translateX(-50%);
  width:min(760px,88vw);text-align:center;font-family:var(--display);font-size:22px;
  font-weight:600;line-height:1.6;text-shadow:0 3px 20px #000;opacity:0;transition:opacity .5s}
#cineText.show{opacity:1}
#cineSkip{position:absolute;right:24px;bottom:calc(12vh + 16px);font-family:var(--mono);
  font-size:12px;color:var(--dim);opacity:0;transition:opacity .4s}
#cine.on #cineSkip{opacity:1}

/* ── boss frame ────────────────────────────────────────── */
#bossFrame{top:16px;left:50%;transform:translateX(-50%);width:430px;display:none;z-index:11}
#bossFrame .frame{border-color:rgba(251,113,133,.5);
  box-shadow:0 0 30px rgba(251,113,133,.2),0 8px 28px rgba(0,0,0,.6)}
#bossName{font-family:var(--display);font-weight:900;font-size:17px}
#bossTitle{font-size:11.5px;color:var(--dim);font-style:italic}
#bossPhase{font-family:var(--mono);font-size:11px;color:var(--amber);margin-left:auto}
#bossCast{margin-top:5px;display:none}
#bossTell{font-family:var(--display);font-size:12.5px;font-weight:700;color:var(--amber);
  text-align:center;margin-top:3px;text-shadow:0 2px 6px #000}
@keyframes tellPulse{0%,100%{opacity:.72}50%{opacity:1}}
#bossTell.urgent{color:var(--red);animation:tellPulse .4s infinite}

/* ── help ──────────────────────────────────────────────── */
#help{position:fixed;left:16px;top:16px;z-index:10;font-family:var(--mono);font-size:11px;
  color:var(--dim);line-height:1.7;display:none}
kbd{background:rgba(255,255,255,.09);border:1px solid var(--line2);border-radius:4px;
  padding:1px 5px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE HUD
   The first screenshot at 414px wide showed the help overlay
   sitting directly on top of the player frame — both anchored
   top-left. A HUD that only works at one width is a HUD that
   breaks on the first machine that is not yours.
   ══════════════════════════════════════════════════════════ */

/* Help starts hidden and is toggled with H — it is a reference,
   not permanent furniture, and it occupied the most valuable
   corner of the screen. */
#help{
  display:none; left:auto; right:16px; bottom:200px; top:auto;
  background:rgba(7,8,14,.9); border:1px solid var(--line);
  border-radius:9px; padding:9px 12px; max-width:290px;
}

@media (max-width: 900px){
  /* Stack the unit frames instead of letting them collide. */
  #playerFrame{ width:min(250px,52vw); }
  #targetFrame{ left:auto; right:16px; top:186px; width:min(220px,46vw); }
  #bossFrame{ width:min(380px,92vw); top:auto; bottom:210px; }
  #minimap{ width:118px; }
  #minimap canvas{ width:110px; height:110px; }
  #tracker{ top:auto; bottom:212px; right:12px; width:min(210px,46vw); font-size:11.5px; }
  #log{ width:min(300px,58vw); max-height:120px; font-size:10.5px; }
  #castBar{ width:min(300px,84vw); bottom:136px; }
  .slot{ width:48px; height:48px; }
  .slot__icon{ font-size:20px; }
}

@media (max-width: 560px){
  /* Phone: the world is small, so the interface has to get out of it. */
  #playerFrame{ top:10px; left:10px; width:min(210px,58vw); }
  #targetFrame{ top:10px; right:10px; left:auto; width:min(160px,40vw); }
  #targetFrame .auras, #playerFrame .auras{ min-height:0; }
  #minimap{ top:auto; bottom:150px; right:10px; width:86px; }
  #minimap canvas{ width:80px; height:80px; border-width:1px; }
  #zoneName{ font-size:11px; } #zoneSub{ display:none; }
  #tracker{ display:none; }              /* the quest log is one key away */
  #log{ width:calc(100vw - 20px); left:10px; bottom:76px; max-height:74px; }
  #actionBar{ bottom:10px; gap:5px; }
  .slot{ width:44px; height:44px; border-radius:8px; }
  .slot__icon{ font-size:18px; }
  .slot__key{ font-size:9px; }
  .panel{ width:96vw; max-height:88vh; }
  .bagGrid{ grid-template-columns:repeat(5,1fr); }
  .doll{ grid-template-columns:1fr; }
  .dollMid{ order:-1; }
  #bossFrame{ bottom:auto; top:96px; width:calc(100vw - 20px); }
  #cineText{ font-size:16px; bottom:22vh; }
  .classes{ grid-template-columns:repeat(2,1fr); }
}

/* Landscape phone: vertical space is the scarce resource. */
@media (max-height: 480px){
  #log{ max-height:60px; }
  #playerFrame .bar--xp{ display:none; }
  #castBar{ bottom:112px; }
}

/* ══════════════════════════════════════════════════════════
   MENUS
   ══════════════════════════════════════════════════════════ */
.menuHost{position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(4,6,12,.78);backdrop-filter:blur(7px);padding:20px}
.menuHost.on{display:grid}
.menu{width:min(560px,94vw);max-height:88vh;overflow-y:auto;
  background:linear-gradient(180deg,rgba(23,27,42,.99),rgba(12,15,24,.99));
  border:1px solid var(--line2);border-radius:16px;padding:22px 24px;
  box-shadow:0 30px 90px rgba(0,0,0,.8);
  animation:menuIn .24s cubic-bezier(.2,1.1,.3,1) both}
.menu--sm{width:min(420px,92vw)} .menu--md{width:min(500px,92vw)} .menu--lg{width:min(640px,94vw)}
@keyframes menuIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.menu__brand{font-family:var(--display);font-weight:900;font-size:34px;letter-spacing:-.02em;
  text-align:center;margin-bottom:2px;
  background:linear-gradient(120deg,var(--ice),var(--violet) 50%,var(--mag));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.menu__title{font-family:var(--display);font-weight:800;font-size:19px;margin-bottom:14px;text-align:center}
.menu__body{color:var(--muted);line-height:1.7;font-size:14px;margin-bottom:16px}
.menu__body b{color:var(--text)}
.menu__section{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin:16px 0 8px;padding-bottom:5px;
  border-bottom:1px solid var(--line)}
.menu__row{display:flex;gap:9px;justify-content:flex-end;margin-top:16px}
.menu__row--spread{justify-content:space-between}
.menu__stack{display:flex;flex-direction:column;gap:8px}
.menu__note{margin-top:12px;font-size:12px;color:var(--dim);text-align:center;line-height:1.6}
.menu__empty{text-align:center;color:var(--dim);padding:34px 10px;line-height:1.9}
.menu__input{width:100%;padding:10px 13px;border-radius:9px;border:1px solid var(--line2);
  background:rgba(8,10,18,.9);color:var(--text);font:inherit;margin-bottom:6px}
.menu__input:focus{outline:2px solid var(--violet);outline-offset:1px}

.mbtn{padding:9px 17px;border-radius:9px;border:1px solid var(--line2);
  font-family:var(--display);font-weight:700;font-size:13.5px;
  background:rgba(255,255,255,.04);transition:all .15s}
.mbtn:hover:not(:disabled){border-color:var(--ice);background:rgba(125,211,252,.12);transform:translateY(-1px)}
.mbtn:disabled{opacity:.35;cursor:not-allowed}
.mbtn--go{border-color:var(--violet);background:rgba(167,139,250,.18)}
.mbtn--go:hover:not(:disabled){border-color:var(--violet);background:rgba(167,139,250,.3)}
.mbtn--danger{border-color:rgba(251,113,133,.5);color:var(--red)}
.mbtn--danger:hover:not(:disabled){background:rgba(251,113,133,.16);border-color:var(--red)}

/* character rows */
.charList{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.charRow{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;
  border:1px solid var(--line);background:rgba(8,10,18,.6);transition:all .15s}
.charRow:hover{border-color:var(--line2);transform:translateX(2px)}
.charRow--broken{border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.06)}
.charRow__i{font-size:26px;width:34px;text-align:center;flex:0 0 auto}
.charRow__m{flex:1;min-width:0}
.charRow__n{font-family:var(--display);font-weight:800;font-size:15px}
.charRow__lv{font-family:var(--mono);font-size:12px;color:var(--amber);font-weight:700;margin-left:5px}
.charRow__s{font-size:12px;color:var(--dim);margin-top:1px}
.charRow .mbtn{padding:6px 11px;font-size:12.5px;flex:0 0 auto}

/* settings rows */
.setRow{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.05)}
.setRow span{flex:1;color:var(--muted)}
.setRow input[type=range]{width:150px;accent-color:var(--violet)}
.setRow input[type=checkbox]{width:19px;height:19px;accent-color:var(--violet)}
.setRow b{font-family:var(--mono);font-size:12px;width:44px;text-align:right;color:var(--ice)}

/* micro-menu */
.micro{position:fixed;right:14px;bottom:14px;z-index:13;display:flex;gap:5px}
.micro__b{width:40px;height:40px;border-radius:9px;border:1px solid var(--line2);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  transition:all .14s}
.micro__b:hover{transform:translateY(-3px);border-color:var(--ice);
  box-shadow:0 6px 18px rgba(125,211,252,.25)}
.micro__b span{font-size:16px;line-height:1}
.micro__b em{font-family:var(--mono);font-size:8px;font-style:normal;color:var(--dim)}

/* toasts */
.toasts{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:150;
  display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{padding:8px 16px;border-radius:99px;font-size:13px;font-weight:600;
  background:rgba(12,15,24,.96);border:1px solid var(--line2);
  box-shadow:0 8px 26px rgba(0,0,0,.6);animation:toastIn .26s cubic-bezier(.2,1.2,.3,1) both}
.toast.out{animation:toastOut .35s ease forwards}
.toast.good{border-color:rgba(52,211,153,.5);color:var(--green)}
.toast.bad{border-color:rgba(251,113,133,.5);color:var(--red)}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px) scale(.94)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}

/* reduced motion — set by Settings, independent of the OS flag */
html.reduced *{animation-duration:.01ms !important;transition-duration:.08s !important}

@media (max-width:560px){
  .micro{right:10px;bottom:66px}
  .micro__b{width:36px;height:36px}
  .menu{padding:18px 16px}
  .charRow{flex-wrap:wrap}
  .charRow__m{min-width:60%}
}

/* ══════════════════════════════════════════════════════════
   THE FRAME
   A housing for the action bar. High-tech but quiet: the shape
   does the work, not the decoration.

   Built from four cheap layers that together read as expensive:
     1 · a bevel — two hairlines, one light on top, one dark
         beneath, which is what makes a surface look milled
         rather than drawn
     2 · a slow scan sweep, gated to once every few seconds so
         it registers as "powered" not "animated"
     3 · corner brackets, drawn with borders on pseudo-elements
     4 · a soft under-glow that lifts the whole assembly off
         the world behind it
   ══════════════════════════════════════════════════════════ */

.rig{
  position:fixed; bottom:12px; left:50%; transform:translateX(-50%);
  z-index:12; padding:9px 14px 10px;
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(30,36,54,.92), rgba(14,17,27,.95));
  border:1px solid var(--line2);
  /* layer 1 — the bevel. Inset light above, inset shadow below. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 10px 34px rgba(0,0,0,.6),
    0 0 0 1px rgba(0,0,0,.4);
  backdrop-filter:blur(12px);
  isolation:isolate;
}

/* layer 4 — under-glow, sitting behind everything */
.rig::before{
  content:''; position:absolute; inset:-1px; z-index:-1; border-radius:inherit;
  background:linear-gradient(90deg,
    transparent, color-mix(in srgb,var(--ice) 55%,transparent) 22%,
    color-mix(in srgb,var(--violet) 60%,transparent) 50%,
    color-mix(in srgb,var(--mag) 55%,transparent) 78%, transparent);
  opacity:.30; filter:blur(9px);
}

/* layer 2 — the scan. 7s cycle, visible for well under one of them. */
.rig::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg,
    transparent 42%, rgba(255,255,255,.11) 50%, transparent 58%);
  transform:translateX(-120%);
  animation:rigScan 7s cubic-bezier(.3,0,.2,1) infinite;
}
@keyframes rigScan{ 0%,78%{transform:translateX(-120%)} 100%{transform:translateX(120%)} }

/* layer 3 — corner brackets */
.rig__c{position:absolute;width:13px;height:13px;pointer-events:none;opacity:.55}
.rig__c--tl{top:5px;left:5px;border-top:1.5px solid var(--ice);border-left:1.5px solid var(--ice);border-radius:5px 0 0 0}
.rig__c--tr{top:5px;right:5px;border-top:1.5px solid var(--ice);border-right:1.5px solid var(--ice);border-radius:0 5px 0 0}
.rig__c--bl{bottom:5px;left:5px;border-bottom:1.5px solid var(--mag);border-left:1.5px solid var(--mag);border-radius:0 0 0 5px}
.rig__c--br{bottom:5px;right:5px;border-bottom:1.5px solid var(--mag);border-right:1.5px solid var(--mag);border-radius:0 0 5px 0}

/* a hairline rail under the slots — grounds them as one unit */
.rig__rail{
  position:absolute; left:16px; right:16px; bottom:5px; height:1px;
  background:linear-gradient(90deg,transparent,var(--line2) 18%,var(--line2) 82%,transparent);
}

/* the bar itself sits inside the rig and loses its own positioning */
.rig #actionBar{ position:static; transform:none; bottom:auto; left:auto; }

/* slots get milled edges to match the housing */
.rig .slot{
  background:linear-gradient(180deg, rgba(38,45,66,.95), rgba(17,20,31,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 2px 6px rgba(0,0,0,.45);
}
.rig .slot:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 8px 22px rgba(125,211,252,.3);
}
/* pressed state reads as a real key travelling down */
.rig .slot:active{
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.6),
    inset 0 -1px 0 rgba(255,255,255,.05);
}

/* the micro-menu gets the same housing so the two read as one system */
.micro{
  padding:6px; border-radius:13px;
  background:linear-gradient(180deg, rgba(30,36,54,.9), rgba(14,17,27,.94));
  border:1px solid var(--line2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 8px 26px rgba(0,0,0,.55);
  backdrop-filter:blur(12px);
}

/* Reduced motion kills the sweep — a repeating highlight is exactly
   the kind of thing that is tiring if you are sensitive to it. */
html.reduced .rig::after{ animation:none; opacity:0 }

@media (max-width:560px){
  .rig{ padding:6px 9px 8px; border-radius:13px; bottom:8px }
  .rig__c{ width:9px; height:9px }
}

/* ══════════════════════════════════════════════════════════
   PARTY FRAMES
   Under the player frame. The member you are driving is marked,
   because in a game where control moves the single most
   important thing on screen is "which one am I".
   ══════════════════════════════════════════════════════════ */
#partyFrames{top:150px;left:16px;width:262px;display:flex;flex-direction:column;gap:5px;z-index:10}
.pf{display:flex;align-items:center;gap:9px;width:100%;padding:6px 9px;border-radius:9px;
  border:1px solid var(--line);background:rgba(17,20,31,.88);backdrop-filter:blur(8px);
  transition:all .15s cubic-bezier(.2,.9,.25,1);text-align:left}
.pf:hover{border-color:var(--line2);transform:translateX(3px)}
.pf--on{border-color:var(--ice);background:rgba(125,211,252,.12);
  box-shadow:0 0 0 1px var(--ice),0 6px 18px rgba(125,211,252,.2)}
.pf--dead{opacity:.4;filter:grayscale(.8)}
.pf__i{font-size:18px;width:22px;text-align:center;flex:0 0 auto}
.pf__m{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pf__n{font-family:var(--display);font-weight:700;font-size:12.5px;display:flex;
  align-items:center;gap:5px}
.pf__race{font-style:normal;font-size:10px;opacity:.9;margin-left:3px;flex:0 0 auto}
.pf__n em{font-family:var(--mono);font-style:normal;font-size:9px;color:var(--dim);
  border:1px solid var(--line2);border-radius:3px;padding:0 3px;margin-left:auto}
.pf--on .pf__n em{color:var(--ice);border-color:var(--ice)}
.pf__bar{height:5px;border-radius:3px;background:#0a0d16;overflow:hidden;position:relative}
.pf__bar i{position:absolute;inset:0;transform-origin:left center;
  background:linear-gradient(180deg,var(--hp),var(--hp2));transition:transform .2s}

@media (max-width:900px){ #partyFrames{top:auto;bottom:120px;width:min(210px,46vw)} }
@media (max-width:560px){
  #partyFrames{bottom:auto;top:96px;left:10px;width:min(150px,42vw);gap:3px}
  .pf{padding:4px 6px;gap:6px}
  .pf__i{font-size:14px;width:16px}
  .pf__n{font-size:11px}
}

/* ══════════════════════════════════════════════════════════
   PATCH · the pet console
   Reads as an instrument panel rather than a character sheet —
   the thing on screen is an agent editing your game, and the UI
   should feel like you are looking at its work, not its portrait.
   ══════════════════════════════════════════════════════════ */
.panel--wide{width:min(940px,94vw);max-height:86vh}

.pet-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.pet-mark{font-size:30px;color:#67e8f9;text-shadow:0 0 18px rgba(103,232,249,.55);
  animation:petspin 5s linear infinite;display:inline-block}
@keyframes petspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pet-mark{animation:none}}
.pet-head b{font-family:var(--display);font-size:17px;display:block}
.pet-head em{font-family:var(--mono);font-size:11.5px;color:var(--dim);font-style:normal}
.pet-trust{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--dim);
  display:flex;align-items:center;gap:7px}
.pet-trust select{background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--text);
  border-radius:7px;padding:5px 8px;font-family:inherit;font-size:11.5px}

#pnlPetBody h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin:20px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
#pnlPetBody h4:first-of-type{margin-top:6px}
#pnlPetBody .dim{color:var(--dim);font-size:12.5px;margin:6px 0}

.pet-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.pet-tbl td{padding:7px 10px 7px 0;border-bottom:1px solid var(--line);vertical-align:top}
.pet-tbl code{font-family:var(--mono);font-size:11.5px;color:#a5f3fc}
.pet-tbl .why{color:var(--dim);font-size:11.5px;max-width:280px}
.pet-tbl--nums td{font-family:var(--mono);font-size:11.5px;padding:5px 10px 5px 0}
.pet-tbl--nums td:first-child{color:var(--dim);width:170px}
.pet-tbl--nums td b{font-variant-numeric:tabular-nums}

.risk{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  margin-left:8px;padding:2px 6px;border-radius:999px;border:1px solid}
.risk--self{color:#67e8f9;border-color:rgba(103,232,249,.4)}
.risk--party{color:#fbbf24;border-color:rgba(251,191,36,.4)}
.risk--world{color:#fb7185;border-color:rgba(251,113,133,.45)}

.pet-ask{border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.06);
  border-radius:11px;padding:13px 15px;margin-bottom:10px}
.pet-ask p{margin:0 0 6px;font-size:13px}
.pet-ask .why{color:#fbbf24;font-size:12.5px}
.pet-ask code{font-family:var(--mono);font-size:11.5px}

.mini{font-family:var(--mono);font-size:11px;padding:5px 11px;border-radius:8px;
  border:1px solid var(--line2);background:rgba(255,255,255,.05);color:var(--text);cursor:pointer}
.mini:hover{background:rgba(255,255,255,.11);border-color:var(--line)}
.mini.good{border-color:rgba(61,220,132,.45);color:#3ddc84}
.mini.good:hover{background:rgba(61,220,132,.12)}

.pet-log{margin:0;padding-left:18px;font-size:12.5px;line-height:1.55}
.pet-log li{margin-bottom:5px;color:var(--muted)}

.pet-src{font-family:var(--mono);font-size:11.5px;line-height:1.6;white-space:pre;
  overflow-x:auto;background:rgba(0,0,0,.42);border:1px solid var(--line);
  border-radius:10px;padding:13px 15px;color:#a5f3fc;margin:0}
.pet-src--small{font-size:10.5px;color:var(--muted)}

.pet-fused{border:1px solid rgba(251,113,133,.45);background:rgba(251,113,133,.08);
  border-radius:10px;padding:11px 14px;font-size:12.5px;color:#fb7185;margin:0 0 4px}

@media (max-width:700px){
  .pet-tbl .why{display:none}
  .pet-head{flex-wrap:wrap}
  .pet-trust{margin-left:0;width:100%}
}

/* PATCH's party chip — a status light, not a portrait. It has no
   number because it is not yours to drive. */
.pf--pet{border-color:rgba(103,232,249,.32);background:rgba(103,232,249,.05)}
.pf--pet .pf__n em{color:#67e8f9}
.pf--pet .pf__bar i{background:#22d3ee}
.pf__gen{font-family:var(--mono);font-size:9.5px;color:var(--dim);margin-left:auto;padding-left:8px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pf--ask{border-color:rgba(251,191,36,.6);background:rgba(251,191,36,.09)}
.pf--ask .pf__gen{color:#fbbf24}
.pf--ask{animation:pfask 1.6s ease-in-out infinite}
@keyframes pfask{50%{box-shadow:0 0 0 2px rgba(251,191,36,.18)}}
@media (prefers-reduced-motion:reduce){.pf--ask{animation:none}}

/* ══════════════════════════════════════════════════════════
   THE WORKSHOP
   The panel is a reading, not a shop: the biggest thing on it is
   what your materials remember, because that is what decides
   what comes out.
   ══════════════════════════════════════════════════════════ */
.cf-profs{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:9px;margin-bottom:14px}
.cf-prof{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:11px;
  border:1px solid var(--line2);background:rgba(255,255,255,.035);text-align:left;position:relative;
  overflow:hidden;cursor:pointer;transition:border-color .15s,background .15s}
.cf-prof:hover{background:rgba(255,255,255,.07)}
.cf-prof--on{border-color:rgba(94,234,212,.5);background:rgba(94,234,212,.08)}
.cf-prof__i{font-size:20px;line-height:1}
.cf-prof__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.cf-prof__t b{font-size:13.5px}
.cf-prof__t em{font-family:var(--mono);font-size:10.5px;color:var(--dim);font-style:normal;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-prof__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.07)}
.cf-prof__bar i{display:block;height:100%;background:#5eead4;transform-origin:left;transition:transform .3s}

.cf-learn{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;margin-bottom:6px;
  border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:12.5px}

.cf-recipes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.cf-recipe{display:flex;flex-direction:column;gap:3px;align-items:flex-start;padding:10px 12px;
  border-radius:10px;border:1px solid var(--line2);background:rgba(255,255,255,.035);
  text-align:left;cursor:pointer}
.cf-recipe:hover{background:rgba(255,255,255,.075)}
.cf-recipe--on{border-color:rgba(251,191,36,.55);background:rgba(251,191,36,.09)}
.cf-recipe--no{opacity:.55}
.cf-recipe b{font-size:13px}
.cf-recipe em{font-family:var(--mono);font-size:10.5px;color:var(--dim);font-style:normal}
.cf-flag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#fb7185}

.cf-intents{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}
.cf-intent{padding:7px 13px;border-radius:999px;border:1px solid var(--line2);
  background:rgba(255,255,255,.04);font-size:12.5px;cursor:pointer}
.cf-intent:hover{background:rgba(255,255,255,.09)}
.cf-intent--on{border-color:rgba(167,139,250,.6);background:rgba(167,139,250,.14);color:#c4b5fd}

/* Coherence reading — the one thing on the panel that should
   catch the eye before anything else. */
.cf-res{display:flex;align-items:center;gap:14px;padding:13px 15px;border-radius:12px;
  border:1px solid var(--line2);background:rgba(255,255,255,.035);margin-bottom:12px}
.cf-res__meter{flex:0 0 90px;height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.cf-res__meter i{display:block;height:100%;transform-origin:left;background:currentColor;transition:transform .35s}
.cf-res__t{display:flex;flex-direction:column;gap:3px;font-size:12.5px}
.cf-res__t b{text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-family:var(--mono)}
.cf-res__t span{color:var(--dim)}
.cf-res--harmonic{color:#5eead4;border-color:rgba(94,234,212,.35)}
.cf-res--agreeable{color:#3ddc84;border-color:rgba(61,220,132,.3)}
.cf-res--mixed{color:#fbbf24;border-color:rgba(251,191,36,.32)}
.cf-res--discordant{color:#fb923c;border-color:rgba(251,146,60,.38)}
.cf-res--sundered{color:#fb7185;border-color:rgba(251,113,133,.45)}

.cf-props{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.cf-prop{padding:9px 12px;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:3px}
.cf-prop b{font-size:12.5px}
.cf-prop span{font-size:11.5px;color:var(--dim)}
.cf-prop--uncommon b{color:#3ddc84}
.cf-prop--rare b{color:#60a5fa}
.cf-prop--epic b{color:#c084fc}
.cf-prop--legendary b{color:#fb923c}
.cf-prop--epic,.cf-prop--legendary{border-color:rgba(192,132,252,.3)}

.cf-specs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:8px}
.cf-spec{padding:12px 14px;border-radius:11px;border:1px solid rgba(251,191,36,.35);
  background:rgba(251,191,36,.06);text-align:left;display:flex;flex-direction:column;gap:4px;cursor:pointer}
.cf-spec:hover{background:rgba(251,191,36,.12)}
.cf-spec b{font-size:13px}
.cf-spec span{font-size:11.5px;color:var(--dim)}

.cf-go{display:flex;align-items:center;gap:14px;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.cf-go .dim{flex:1;min-width:200px;font-size:12px}
.cf-go i{font-style:normal;color:var(--muted)}
.cf-go .warn{color:#fb7185}
.cf-go .mini{padding:9px 20px;font-size:12.5px}
.mini[disabled]{opacity:.45;cursor:not-allowed}

@media (max-width:700px){ .cf-specs{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════════════
   THE BASE
   A build screen that always answers one question before you
   press start: can this base carry this wave, and by how much.
   ══════════════════════════════════════════════════════════ */
.bs-tabs{display:flex;align-items:center;gap:6px;margin-bottom:14px;
  border-bottom:1px solid var(--line);padding-bottom:10px}
.bs-tab{padding:7px 14px;border-radius:8px;border:1px solid var(--line2);
  background:rgba(255,255,255,.04);font-size:12.5px;cursor:pointer}
.bs-tab:hover{background:rgba(255,255,255,.09)}
.bs-tab.on{border-color:rgba(94,234,212,.55);background:rgba(94,234,212,.12);color:#5eead4}
.bs-record{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.bs-away{background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.3);
  border-radius:9px;padding:9px 12px;font-size:12.5px;margin-bottom:12px}

#pnlBaseBody h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin:18px 0 8px;padding-bottom:6px;
  border-bottom:1px solid var(--line)}
#pnlBaseBody h4:first-of-type{margin-top:0}

.bs-owned{display:flex;flex-direction:column;gap:6px;margin-bottom:9px}
.bs-item{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;
  border:1px solid var(--line);background:rgba(255,255,255,.03)}
.bs-item--wip{opacity:.6;border-style:dashed}
.bs-item--dead{opacity:.4;text-decoration:line-through}
.bs-ico{font-size:17px;flex:0 0 auto}
.bs-nm{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.bs-nm b{font-size:12.5px}
.bs-nm em{font-family:var(--mono);font-size:10px;color:var(--dim);font-style:normal}

.bs-shop{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.bs-buy{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  padding:10px 12px;border-radius:10px;border:1px solid var(--line2);
  background:rgba(255,255,255,.035);cursor:pointer}
.bs-buy:hover{background:rgba(255,255,255,.08);border-color:#3a445e}
.bs-buy b{font-size:12.5px}
.bs-buy em{font-family:var(--mono);font-size:10px;color:#5eead4;font-style:normal}
.bs-buy span{font-size:11px;color:var(--dim);line-height:1.4}
.bs-buy--no{opacity:.5}
.bs-no{font-family:var(--mono);font-size:9.5px;color:#fb7185;font-style:normal}

.bs-shards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:9px}
.bs-shard{display:flex;flex-direction:column;gap:5px;padding:11px 13px;border-radius:11px;
  border:1px solid var(--line2);background:rgba(255,255,255,.03)}
.bs-shard.on{border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.08)}
.bs-shard b{font-size:13px}
.bs-shard span{font-size:11.5px;color:#5eead4}
.bs-shard em{font-size:11px;color:var(--dim)}
.bs-shard .mini{align-self:flex-start;margin-top:2px}

/* the verdict — the biggest thing on the wave tab, deliberately */
.bs-verdict{display:flex;align-items:center;gap:14px;padding:13px 15px;border-radius:12px;
  border:1px solid var(--line2);background:rgba(255,255,255,.035);margin-bottom:10px}
.bs-share{flex:0 0 110px;height:8px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden}
.bs-share i{display:block;height:100%;background:currentColor;transition:width .35s}
.bs-verdict > div:last-child{display:flex;flex-direction:column;gap:3px;font-size:12px}
.bs-verdict b{font-size:13px}
.bs-verdict span{color:var(--dim)}
.bs-verdict--safe{color:#5eead4;border-color:rgba(94,234,212,.35)}
.bs-verdict--ok{color:#3ddc84;border-color:rgba(61,220,132,.3)}
.bs-verdict--thin{color:#fbbf24;border-color:rgba(251,191,36,.35)}
.bs-verdict--bad{color:#fb7185;border-color:rgba(251,113,133,.45)}
.bs-over{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#fb7185;border:1px solid rgba(251,113,133,.4);border-radius:999px;padding:2px 7px;margin-left:6px}

.bs-comp{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
.bs-att{display:flex;flex-direction:column;gap:3px;padding:9px 11px;border-radius:9px;
  border:1px solid var(--line);background:rgba(255,255,255,.03)}
.bs-att b{font-size:12px}
.bs-att span{font-size:11px;color:var(--dim);line-height:1.4}

.bs-go{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:13px;
  border-top:1px solid var(--line)}
.bs-go .mini{padding:9px 22px;font-size:13px}
.bs-live{font-family:var(--mono);font-size:12px;color:#fb7185;font-weight:700;
  animation:bslive 1.2s ease-in-out infinite}
@keyframes bslive{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.bs-live{animation:none}}

/* live wave readout — visible without opening anything */
#waveHud{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:30;display:none;
  align-items:center;gap:12px;padding:8px 16px;border-radius:999px;
  background:rgba(10,8,14,.92);border:1px solid rgba(251,113,133,.45);
  backdrop-filter:blur(6px);font-size:12px;font-family:var(--mono)}
#waveHud b{color:#fb7185;letter-spacing:.1em}
#waveHud .wh-bar{width:150px;height:5px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
#waveHud .wh-bar i{display:block;height:100%;background:#fb7185;transform-origin:left;transition:transform .3s}
#waveHud .wh-bad{color:#fbbf24}
@media (max-width:700px){ #waveHud .wh-bar{width:80px} .bs-shop{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════════════
   THE PROLOGUE
   The score has to be readable WHILE you play. A score you only
   learn afterwards is not one you can play toward — and playing
   toward it is the entire reason the forced loss works.
   ══════════════════════════════════════════════════════════ */
#proHud{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:31;display:none;
  align-items:center;gap:14px;padding:9px 20px;border-radius:999px;
  background:rgba(14,10,6,.93);border:1px solid rgba(251,191,36,.5);
  backdrop-filter:blur(6px);font-family:var(--mono);font-size:12px}
#proHud .pro-t{color:#fb7185;font-weight:700;letter-spacing:.12em}
#proHud .pro-shards{font-size:15px;letter-spacing:3px;color:#fbbf24;
  text-shadow:0 0 10px rgba(251,191,36,.55)}
#proHud .pro-n{color:var(--dim);font-size:11px}
@media (max-width:700px){ #proHud{font-size:10.5px;gap:8px;padding:7px 12px} }

/* ══════════════════════════════════════════════════════════════════
   VISUAL PASS · 7SLF
   The house language, in this game's own dark register.

   The GAMER leg of the studio skin is what belongs here — HUD
   numerals, SEGMENTED energy bars, instruments that move on a
   spring rather than a linear transition. The paper-and-chalkboard
   leg of l8-arcade.css is deliberately NOT imported: a warm '95
   classroom on a dark fantasy RPG would fight the content, and a
   skin applied against its subject is the tell that nobody looked.

   Everything below is additive. Delete this block and the game
   returns exactly to how it looked before.
   ══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root{
  /* the ramp that was missing — one accent with real steps, rather
     than six unrelated brights competing for the same job */
  --acc:#7dd3fc; --acc-2:#38bdf8; --acc-3:#0ea5e9;
  --acc-soft:rgba(125,211,252,.14); --acc-line:rgba(125,211,252,.34);

  /* elevation, so a panel over a panel is legible without a border */
  --e1:0 1px 2px rgba(0,0,0,.4);
  --e2:0 4px 14px rgba(0,0,0,.5);
  --e3:0 14px 40px rgba(0,0,0,.62);
  --e4:0 30px 90px rgba(0,0,0,.75);

  --f-hud:'Press Start 2P','JetBrains Mono',monospace;
  --ring:0 0 0 2px rgba(125,211,252,.55);
}

/* ── Numbers line up, everywhere ──────────────────────────────────
   Any digit that sits above or below another digit gets tabular
   figures. Without this a health bar counting down visibly jitters
   as glyph widths change, which reads as the UI being unsteady. */
.bar__txt, .frame__lvl, .sb .v, .pet-tbl--nums td, .bs-nm em,
#waveHud, #proHud, .lvCum, .pf__n em, .cd, .slot__key,
.pet-src, .cf-go, .bs-buy em{ font-variant-numeric:tabular-nums }

/* ── HUD numerals · used sparingly, where it is a readout ───────── */
#proHud .pro-n, #waveHud b, .frame__lvl{
  font-family:var(--f-hud); letter-spacing:0 }
#proHud .pro-n{ font-size:9px }
#waveHud b{ font-size:9.5px }
.frame__lvl{ font-size:8.5px; padding:2px 5px; border-radius:4px;
  background:var(--acc-soft); color:var(--acc); border:1px solid var(--acc-line) }

/* ══ SEGMENTED BARS ═══════════════════════════════════════════════
   The arcade convention, and it is not decoration: a continuous bar
   at 34% and one at 39% look identical at a glance, while segments
   are countable. In a fight you read "three left", not a fraction.

   Done with a repeating-gradient overlay so the existing bar markup
   and every JS width update keep working untouched. */
.bar{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--e1) }
.bar::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:repeating-linear-gradient(90deg,
    transparent 0 calc(6.25% - 2px), rgba(4,6,12,.85) calc(6.25% - 2px) 6.25%);
}
.bar--xp::after{
  background:repeating-linear-gradient(90deg,
    transparent 0 calc(5% - 1.5px), rgba(4,6,12,.8) calc(5% - 1.5px) 5%);
}
/* the cast bar reads as one continuous action, so it keeps no segments */
.bar--cast::after{ display:none }

/* a fill that is nearly empty should look urgent without a script */
.bar--hp .bar__fill{ transition:width .16s linear, filter .3s }
.hud--low .bar--hp .bar__fill{ filter:brightness(1.25) saturate(1.3) }

/* ── Frames get depth and a live edge ───────────────────────────── */
.frame{ box-shadow:var(--e2), inset 0 1px 0 rgba(255,255,255,.05);
  border-radius:12px; position:relative; overflow:hidden }
.frame::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,var(--acc),transparent);
  opacity:.75 }
#playerFrame .frame::before{ background:linear-gradient(180deg,var(--hp),transparent) }
#targetFrame .frame::before{ background:linear-gradient(180deg,var(--red),transparent) }
#bossFrame  .frame::before{ background:linear-gradient(180deg,var(--amber),transparent) }

/* ── Action bar · the thing hands live on ───────────────────────── */
.slot{ transition:transform .08s ease, box-shadow .15s, border-color .15s }
.slot:hover{ transform:translateY(-2px); box-shadow:var(--e2) }
.slot:active{ transform:translateY(0) scale(.96) }
.slot--ready{ border-color:var(--acc-line) }
.slot__key{ font-family:var(--f-hud); font-size:7.5px; opacity:.85 }

/* ── Panels · one chrome, applied once ──────────────────────────── */
.panel{ box-shadow:var(--e4), inset 0 1px 0 rgba(255,255,255,.05) }
.panel__head{ position:sticky; top:0; z-index:5;
  background:linear-gradient(180deg,rgba(23,27,42,.99),rgba(20,24,37,.97));
  backdrop-filter:blur(8px) }
.panel__body{ overflow:auto; padding:16px 18px 18px }
.panel__body::-webkit-scrollbar{ width:10px }
.panel__body::-webkit-scrollbar-track{ background:transparent }
.panel__body::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:99px;
  border:3px solid transparent; background-clip:content-box }
.panel__body::-webkit-scrollbar-thumb:hover{ background:var(--dim);
  border:3px solid transparent; background-clip:content-box }

/* ── Focus is visible. Always. ──────────────────────────────────── */
button:focus-visible, select:focus-visible, input:focus-visible,
.slot:focus-visible, .pf:focus-visible{ outline:none; box-shadow:var(--ring) }

/* ── Instruments · dark skin for the shared L8 gauges ───────────── */
.g-bars{ display:flex; gap:3px; width:100%; height:14px; padding:2px;
  border:1px solid var(--line2); border-radius:6px; background:rgba(4,6,12,.7);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5) }
.g-bars i{ flex:1; border-radius:2px; background:var(--line);
  transition:opacity .12s linear, background .2s }
.g-bars-lab{ display:block; width:100%; margin-top:5px; text-align:center;
  font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim) }
.g-val{ font-family:var(--f-hud); font-size:13px !important; fill:var(--text) }
.g-lab{ font-family:var(--mono); font-size:9px !important; fill:var(--dim);
  letter-spacing:.1em; text-transform:uppercase }
.g-blank{ filter:grayscale(.7) brightness(.72) }
.g-blank .g-val{ opacity:.5 }
[data-gauge] svg{ width:100%; height:auto; display:block; overflow:visible }

/* ── Motion, honestly ───────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .slot, .frame, .bar__fill{ transition:none !important }
  .bs-live, .pf--ask, .pet-mark{ animation:none !important }
}

/* ── Character sheet · shape at a glance ─────────────────────────── */
.stat-group{ margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line) }
.stat-group:last-child{ border-bottom:0; margin-bottom:0 }
.stat-gauge{ display:grid; grid-template-columns:82px 1fr 54px; align-items:center;
  gap:10px; margin-bottom:7px }
.sg-k{ font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim) }
.sg-v{ font-family:var(--mono); font-size:12px; text-align:right;
  font-variant-numeric:tabular-nums; color:var(--text) }
.sg-bar{ display:block; min-width:0 }
.sg-bar .g-bars-lab{ display:none }
.sg-note{ font-size:10.5px; color:var(--dim); margin-top:8px; line-height:1.5 }

/* ── The left HUD stack ──────────────────────────────────────────
   The player frame and the party frames were each fixed with their
   own hardcoded `top`, so the party position was a GUESS about how
   tall the player frame happened to be. At 375px that guess was 27px
   short and the two overlapped.

   Stacking them in one flex column makes the overlap structurally
   impossible at any width, at any frame height, with any number of
   party members — rather than correct for the sizes someone checked. */
#hudLeft{ position:fixed; top:16px; left:16px; z-index:10;
  display:flex; flex-direction:column; gap:8px;
  width:262px; max-width:58vw; pointer-events:none }
#hudLeft > *{ pointer-events:auto }
#hudLeft #playerFrame,
#hudLeft #partyFrames{ position:static; top:auto; left:auto; bottom:auto; width:100% }
@media (max-width:900px){ #hudLeft{ width:min(250px,52vw) } }
@media (max-width:560px){ #hudLeft{ top:10px; left:10px; width:min(210px,58vw); gap:6px } }

/* ══════════════════════════════════════════════════════════
   WALLET · chip + vault panel

   The colour rule enforced here: a MEASURED balance is bright
   and mono; an UNMETERED one is dim, italic, and shows an
   em-dash. They must never be mistakable for each other, which
   is why the difference is weight, colour AND glyph rather than
   just one of the three.
   ══════════════════════════════════════════════════════════ */
.walletChip{
  position:fixed; top:14px; right:180px; z-index:40;
  display:flex; flex-direction:column; gap:3px;
  padding:8px 10px; min-width:132px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--e2); cursor:pointer;
  font-family:var(--mono); font-size:12px; line-height:1.25;
  transition:border-color .15s, transform .15s;
}
.walletChip:hover{ border-color:var(--acc-line); transform:translateY(-1px); }
.walletChip--off{ padding:0; background:none; border:none; box-shadow:none; min-width:0; }

.wchip__connect{
  display:flex; align-items:center; gap:7px;
  padding:8px 12px; cursor:pointer;
  background:var(--panel); color:var(--muted);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--e2);
  font-family:var(--font); font-size:12px; font-weight:600; letter-spacing:.02em;
  transition:border-color .15s, color .15s;
}
.wchip__connect:hover{ border-color:var(--acc-line); color:var(--text); }

.wchip__row{ display:flex; align-items:baseline; gap:6px; }
.wchip__ico{ font-size:11px; opacity:.85; }
.wchip__val{ flex:1; text-align:right; color:var(--text); font-variant-numeric:tabular-nums; font-weight:600; }
.wchip__sym{ color:var(--dim); font-size:10px; letter-spacing:.04em; min-width:34px; }
.wchip__row.is-unmetered .wchip__val{ color:var(--dim); font-style:italic; font-weight:400; }

.wchip__addr{
  margin-top:2px; padding-top:5px; border-top:1px solid var(--line);
  color:var(--dim); font-size:10px; text-align:right; letter-spacing:.02em;
}
.wchip__warn{
  margin-top:3px; padding:2px 5px; border-radius:4px; text-align:center;
  background:rgba(251,113,133,.14); color:var(--red);
  font-size:9px; text-transform:uppercase; letter-spacing:.06em;
}

/* ── vault panel ──────────────────────────────────────────── */
#pnlWallet .panel__body{ display:flex; flex-direction:column; gap:14px; min-width:340px; }

.wal__hint{ color:var(--dim); font-size:12px; line-height:1.5; margin:0 0 4px; }

.wal__id{
  display:flex; flex-direction:column; gap:7px;
  padding:11px 12px; background:var(--panel2);
  border:1px solid var(--line); border-radius:var(--r);
}
.wal__idTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.wal__wname{ font-weight:700; font-size:13px; color:var(--text); }
.wal__addr{
  font-family:var(--mono); font-size:11px; color:var(--muted);
  word-break:break-all; cursor:pointer; transition:color .15s;
}
.wal__addr:hover{ color:var(--acc); }
.wal__addr.is-copied{ color:var(--green); }
.wal__addr.is-copied::after{ content:' copied'; font-size:10px; }
.wal__chain{ font-family:var(--mono); font-size:11px; color:var(--dim); }
.wal__chain.is-wrong{ color:var(--amber); }

.wal__btn{
  padding:7px 12px; cursor:pointer;
  background:var(--acc-soft); color:var(--text);
  border:1px solid var(--acc-line); border-radius:7px;
  font-family:var(--font); font-size:12px; font-weight:600;
  transition:background .15s, opacity .15s;
}
.wal__btn:hover{ background:var(--acc-line); }
.wal__btn:disabled{ opacity:.5; cursor:default; }
.wal__btn--ghost{ background:none; border-color:var(--line); color:var(--dim); }
.wal__btn--ghost:hover{ background:none; border-color:var(--line2); color:var(--text); }

/* ── token cards ──────────────────────────────────────────── */
.wal__tokens{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.walTok{
  display:flex; flex-direction:column; gap:5px;
  padding:11px 12px; background:var(--panel2);
  border:1px solid var(--line); border-radius:var(--r);
}
.walTok__head{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.walTok__ico{ font-size:14px; }
.walTok__name{ font-weight:700; font-size:12px; color:var(--text); }
.walTok__sym{ font-family:var(--mono); font-size:10px; color:var(--dim); letter-spacing:.04em; }
.walTok__tag{
  padding:1px 5px; border-radius:4px;
  background:rgba(167,139,250,.16); color:var(--violet);
  font-size:9px; text-transform:uppercase; letter-spacing:.05em;
}
.walTok__val{
  font-family:var(--mono); font-size:21px; font-weight:700;
  color:var(--text); font-variant-numeric:tabular-nums; line-height:1.1;
}
.walTok__why{ color:var(--dim); font-size:11px; line-height:1.4; }
.walTok.is-unmetered{ border-style:dashed; }
.walTok.is-unmetered .walTok__val{ color:var(--dim); font-weight:400; }
.walTok.is-unmetered .walTok__why{ color:var(--amber); font-style:italic; }

/* ── provider picker ──────────────────────────────────────── */
.wal__pick{ display:flex; flex-direction:column; gap:8px; }
.wal__provider{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 12px; cursor:pointer; text-align:left;
  background:var(--panel2); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--font); font-size:13px;
  transition:border-color .15s, background .15s;
}
.wal__provider:hover{ border-color:var(--acc-line); background:var(--panel); }
.wal__provider.is-busy{ opacity:.6; }
.wal__provider.is-busy .wal__pname::after{ content:' — check your wallet'; color:var(--dim); font-size:11px; }
.wal__pico{ width:22px; height:22px; border-radius:5px; object-fit:contain; }
.wal__pico--ph{ display:grid; place-items:center; background:var(--panel); font-size:12px; }
.wal__pname{ flex:1; font-weight:600; }
.wal__badge{
  padding:2px 6px; border-radius:4px;
  background:var(--acc-soft); color:var(--acc);
  font-size:9px; text-transform:uppercase; letter-spacing:.05em;
}

.wal__empty{ text-align:center; padding:22px 10px; color:var(--muted); }
.wal__emptyIco{ font-size:30px; opacity:.4; margin-bottom:8px; }
.wal__empty p{ margin:0 0 7px; font-size:13px; }

.wal__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.wal__stamp{ font-family:var(--mono); font-size:10px; color:var(--dim); }
.wal__err{
  padding:8px 10px; border-radius:7px;
  background:rgba(251,113,133,.12); border:1px solid rgba(251,113,133,.3);
  color:var(--red); font-size:11px; line-height:1.45;
}

@media (max-width:820px){
  .walletChip{ right:10px; top:auto; bottom:96px; }
  #pnlWallet .panel__body{ min-width:0; }
}

/* ══════════════════════════════════════════════════════════
   FACTIONS & WAR  (J)
   ══════════════════════════════════════════════════════════ */
#pnlWar .panel__body{ min-width:400px; max-width:520px; }

.wtabs{ display:flex; gap:4px; margin-bottom:12px; border-bottom:1px solid var(--line); }
.wtab{
  padding:7px 13px; cursor:pointer; background:none; border:none;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  color:var(--dim); font-family:var(--font); font-size:12px; font-weight:600;
  transition:color .15s, border-color .15s;
}
.wtab:hover{ color:var(--muted); }
.wtab.on{ color:var(--acc); border-bottom-color:var(--acc); }

.wh{ margin:14px 0 7px; font-size:11px; font-weight:700; letter-spacing:.06em;
     text-transform:uppercase; color:var(--muted); }
.wh:first-child{ margin-top:0; }
.wnote{ color:var(--dim); font-size:11px; line-height:1.5; margin-bottom:9px; }
.wempty{ color:var(--dim); font-size:12px; padding:18px; text-align:center; font-style:italic; }

/* ── standing rows ────────────────────────────────────────── */
.frows{ display:flex; flex-direction:column; gap:11px; }
.frow{
  display:flex; flex-direction:column; gap:5px;
  padding:11px 12px; background:var(--panel2);
  border:1px solid var(--line); border-radius:var(--r);
}
.frow.is-hostile{ border-color:rgba(251,113,133,.42); background:rgba(251,113,133,.06); }
.frow__hd{ display:flex; align-items:baseline; gap:7px; }
.frow__ico{ font-size:15px; }
.frow__name{ flex:1; font-weight:700; font-size:13px; color:var(--text); }
.frow__st{ font-size:11px; font-weight:700; }
.frow__num{ font-family:var(--mono); font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums; }

.repbar{ height:6px; border-radius:3px; background:var(--panel); overflow:hidden; border:1px solid var(--line); }
.repbar__fill{ height:100%; border-radius:3px; transition:width .3s ease; }
.frow__next{ font-family:var(--mono); font-size:10px; color:var(--dim); }
.frow__desc{ color:var(--muted); font-size:11px; line-height:1.45; }
.frow__perk{ color:var(--green); font-size:11px; font-weight:600; }
.frow__earn,.frow__cost{ font-size:11px; line-height:1.45; color:var(--muted); }
.frow__cost{ color:var(--amber); }
.frow__earn .k,.frow__cost .k{
  display:inline-block; min-width:42px; font-size:9px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dim);
}

.frow__rw{ display:flex; flex-direction:column; gap:2px; margin-top:3px;
           padding-top:6px; border-top:1px solid var(--line); }
.rw{ display:flex; align-items:baseline; gap:7px; font-size:11px; color:var(--dim); }
.rw.is-earned{ color:var(--muted); }
.rw__at{ min-width:62px; font-family:var(--mono); font-size:9px; letter-spacing:.05em;
         text-transform:uppercase; opacity:.75; }
.rw__txt{ flex:1; }
.rw.is-earned .rw__k{ color:var(--green); }

/* ── the war ──────────────────────────────────────────────── */
.wstand{ display:grid; grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); gap:6px; margin-bottom:5px; }
.wstand__c{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:7px 4px; background:var(--panel2);
  border:1px solid var(--line); border-radius:8px;
}
.wstand__ico{ font-size:15px; }
.wstand__n{ font-family:var(--mono); font-size:15px; font-weight:700; color:var(--text); }
.wstand__l{ font-size:9px; color:var(--dim); text-align:center; line-height:1.2; }

.fronts{ display:flex; flex-direction:column; gap:11px; }
.front{
  display:flex; flex-direction:column; gap:6px;
  padding:11px 12px; background:var(--panel2);
  border:1px solid var(--line); border-radius:var(--r);
}
.front.is-contested{ border-color:var(--amber); background:rgba(251,191,36,.06); }
.front__hd{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.front__name{ flex:1; font-weight:700; font-size:12px; color:var(--text); }
.front__zone{ font-family:var(--mono); font-size:10px; color:var(--dim); }
.front__tag{
  padding:1px 6px; border-radius:4px; background:rgba(251,191,36,.18); color:var(--amber);
  font-size:9px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
}
.front__flips{ font-family:var(--mono); font-size:10px; color:var(--violet); }

/* two-sided, because this is territory and not progress */
.tug{ position:relative; display:flex; height:19px; border-radius:5px;
      overflow:hidden; border:1px solid var(--line); background:var(--panel); }
.tug__side{ display:flex; align-items:center; transition:width .35s ease; min-width:0; }
.tug__side--a{ background:linear-gradient(90deg,rgba(244,114,182,.42),rgba(244,114,182,.20)); justify-content:flex-start; padding-left:5px; }
.tug__side--b{ background:linear-gradient(90deg,rgba(125,211,252,.20),rgba(125,211,252,.42)); justify-content:flex-end; padding-right:5px; }
.tug__ico{ font-size:11px; }
.tug__mid{ position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line2); }

.front__holder{ font-size:11px; color:var(--muted); }
.front__none{ color:var(--amber); }
.front__text{ color:var(--dim); font-size:11px; line-height:1.45; font-style:italic; }
.front__conseq{ color:var(--muted); font-size:11px; line-height:1.45;
                padding-left:8px; border-left:2px solid var(--line2); }

/* ── your part ────────────────────────────────────────────── */
.wmods{ display:grid; grid-template-columns:repeat(auto-fit,minmax(78px,1fr)); gap:7px; margin-bottom:9px; }
.wmod{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:8px 5px; background:var(--panel2);
  border:1px solid var(--line); border-radius:8px;
}
.wmod.is-on{ border-color:var(--amber); background:rgba(251,191,36,.09); }
.wmod__v{ font-family:var(--mono); font-size:13px; font-weight:700; color:var(--dim); font-variant-numeric:tabular-nums; }
.wmod.is-on .wmod__v{ color:var(--amber); }
.wmod__k{ font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:.05em; }

.wcomp{ display:flex; flex-direction:column; gap:4px; }
.wcomp__r{
  display:flex; align-items:center; gap:7px; padding:6px 9px;
  background:var(--panel2); border:1px solid var(--line); border-radius:7px;
  font-size:11px; color:var(--muted);
}
.wcomp__r.is-contested{ border-color:var(--amber); }
.wcomp__a{ color:var(--dim); }
.wcomp__p{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--amber); font-variant-numeric:tabular-nums; }

.wtbl{ width:100%; border-collapse:collapse; font-size:11px; }
.wtbl th{
  text-align:left; padding:5px 8px; border-bottom:1px solid var(--line);
  font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); font-weight:600;
}
.wtbl td{ padding:5px 8px; border-bottom:1px solid var(--line); color:var(--muted); }
.wtbl .num{ text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }

@media (max-width:820px){ #pnlWar .panel__body{ min-width:0; } }
.wstand__c.is-none{ opacity:.42; border-style:dashed; }
.wstand__c.is-none .wstand__n{ color:var(--dim); }

/* ══ GUILD (O) ═════════════════════════════════════════════ */
#pnlGuild .panel__body{ min-width:420px; max-width:540px; }
.gerr{ padding:7px 10px; margin-bottom:9px; border-radius:7px;
  background:rgba(251,113,133,.12); border:1px solid rgba(251,113,133,.3);
  color:var(--red); font-size:11px; line-height:1.45; }

.gfound{ text-align:center; padding:14px 8px; display:flex; flex-direction:column; gap:9px; align-items:center; }
.gfound__ico{ font-size:34px; opacity:.5; }
.gfound h4{ margin:0; font-size:15px; color:var(--text); }
.gfound p{ margin:0; color:var(--dim); font-size:12px; line-height:1.55; max-width:380px; }
.gfound__f{ display:flex; align-items:center; gap:9px; }
.gfound__f span{ font-size:11px; color:var(--dim); min-width:44px; text-align:right; }

.ghd{ padding:10px 12px; margin-bottom:11px; background:var(--panel2);
  border:1px solid var(--line); border-radius:var(--r); }
.ghd__top{ display:flex; align-items:baseline; gap:7px; }
.ghd__name{ font-weight:700; font-size:15px; color:var(--text); }
.ghd__tag{ font-family:var(--mono); font-size:12px; color:var(--acc); }
.ghd__fac{ margin-left:auto; font-size:15px; }
.ghd__sub{ font-family:var(--mono); font-size:11px; color:var(--dim); margin-top:2px; }
.ghd__motd{ margin-top:5px; font-size:11px; color:var(--muted); font-style:italic; }

.groster{ display:flex; flex-direction:column; gap:5px; margin-bottom:9px; }
.gmem{ display:grid; grid-template-columns:auto 1fr auto auto; grid-template-areas:'i d n a' 'i l l l';
  gap:3px 9px; align-items:center; padding:8px 10px; background:var(--panel2);
  border:1px solid var(--line); border-radius:8px; }
.gmem.is-me{ border-color:var(--acc-line); }
.gmem__ico{ grid-area:i; font-size:16px; }
.gmem__id{ grid-area:d; display:flex; flex-direction:column; min-width:0; }
.gmem__name{ font-weight:600; font-size:12px; color:var(--text); }
.gmem__you{ font-size:9px; color:var(--acc); text-transform:uppercase; letter-spacing:.05em; }
.gmem__meta{ font-size:10px; color:var(--dim); }
.gmem__num{ grid-area:n; display:flex; gap:7px; font-family:var(--mono); font-size:10px; }
.gmem__in{ color:var(--green); } .gmem__out{ color:var(--amber); }
.gmem__act{ grid-area:a; display:flex; gap:3px; }
.gmem__allow{ grid-area:l; font-family:var(--mono); font-size:9px; color:var(--dim); }
.gbtn{ padding:2px 7px; cursor:pointer; background:var(--panel); color:var(--muted);
  border:1px solid var(--line2); border-radius:5px; font-size:10px; }
.gbtn:hover{ border-color:var(--acc-line); color:var(--text); }
.gbtn--bad:hover{ border-color:var(--red); color:var(--red); }

.granks{ display:flex; flex-direction:column; gap:3px; }
.grank{ display:grid; grid-template-columns:auto 96px 62px 76px 1fr; gap:8px; align-items:center;
  padding:5px 8px; font-size:10px; color:var(--dim); border-bottom:1px solid var(--line); }
.grank__n{ color:var(--muted); font-weight:600; font-size:11px; }
.grank__lim{ font-family:var(--mono); }
.grank__perms{ font-size:9px; opacity:.7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.gtabs{ display:flex; gap:4px; margin-bottom:9px; }
.gtabb{ padding:5px 11px; cursor:pointer; background:var(--panel2); color:var(--dim);
  border:1px solid var(--line); border-radius:6px; font-size:11px; }
.gtabb:hover{ border-color:var(--acc-line); }
.gtabb.on{ border-color:var(--acc); color:var(--acc); }
.gtabb.is-locked{ opacity:.5; }

.gslots,.gbags{ display:grid; grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); gap:5px; margin-bottom:9px; }
.gslot{ position:relative; aspect-ratio:1; display:grid; place-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:7px; }
.gslot.has{ background:var(--panel2); border-color:var(--line2); cursor:pointer; }
.gslot.has:hover{ border-color:var(--acc-line); }
.gslot__i{ font-size:17px; }
.gslot__q{ position:absolute; right:2px; bottom:1px; font-family:var(--mono);
  font-size:9px; color:var(--muted); }
.gslot__w{ position:absolute; top:1px; right:1px; padding:0 3px; cursor:pointer;
  background:var(--panel); border:1px solid var(--line2); border-radius:4px;
  color:var(--muted); font-size:9px; }
.gslot__w:hover{ border-color:var(--acc); color:var(--acc); }
.glocked{ text-align:center; padding:16px; color:var(--dim); font-size:12px; }
.glocked p{ margin:0 0 9px; }

.gtok{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:7px; }
.gtok__big{ font-family:var(--mono); font-size:22px; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums; }
.gtok__big span{ font-size:11px; color:var(--dim); font-weight:400; margin-left:5px; }
.gtok__you{ font-family:var(--mono); font-size:11px; color:var(--dim); }
.gtokrow{ display:flex; gap:7px; align-items:center; margin-bottom:7px; }

.gledger{ display:flex; flex-direction:column; gap:2px; }
.gled{ display:grid; grid-template-columns:38px 108px 1fr; gap:8px; align-items:baseline;
  padding:5px 7px; border-bottom:1px solid var(--line); font-size:11px; }
.gled__n{ font-family:var(--mono); font-size:10px; color:var(--dim); }
.gled__k{ font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); }
.gled__k--deposit_tokens,.gled__k--deposit_item{ color:var(--green); }
.gled__k--withdraw_tokens,.gled__k--withdraw_item{ color:var(--amber); }
.gled__k--kicked{ color:var(--red); }
.gled__t{ color:var(--muted); }
.gled__t b{ color:var(--text); font-weight:600; }

@media (max-width:820px){ #pnlGuild .panel__body{ min-width:0; } }

/* ══ ARENA (X) ═════════════════════════════════════════════ */
#pnlArena .panel__body{ min-width:400px; max-width:520px; }

.arat{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:8px; }
.arat__c{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:10px 6px;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r); text-align:center; }
.arat__v{ font-family:var(--mono); font-size:24px; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums; line-height:1.1; }
.arat__v--mmr{ color:var(--cyan); }
.arat__d{ font-size:15px; color:var(--dim); }
.arat__t{ font-size:11px; font-weight:700; letter-spacing:.03em; }
.arat__k{ font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); }
.arat__s{ font-size:9px; color:var(--dim); opacity:.75; line-height:1.3; }

.anote{ padding:8px 10px; margin-bottom:9px; border-radius:7px; font-size:11px; line-height:1.5; }
.anote--ok{ background:rgba(52,211,153,.10); border:1px solid rgba(52,211,153,.28); color:var(--green); }
.anote--up{ background:rgba(56,212,230,.10); border:1px solid rgba(56,212,230,.28); color:var(--cyan); }
.anote--dn{ background:rgba(251,191,36,.10); border:1px solid rgba(251,191,36,.28); color:var(--amber); }

.ateam{ display:flex; flex-direction:column; gap:4px; margin-bottom:9px; }
.amem{ display:flex; align-items:center; gap:8px; padding:7px 10px; background:var(--panel2);
  border:1px solid var(--line); border-radius:8px; font-size:12px; }
.amem__n{ flex:1; font-weight:600; color:var(--text); }
.amem__l{ font-family:var(--mono); font-size:10px; color:var(--dim); }
.ashort{ padding:7px 10px; border-radius:7px; background:rgba(251,191,36,.10);
  border:1px solid rgba(251,191,36,.28); color:var(--amber); font-size:11px; line-height:1.45; }

.arow{ display:flex; gap:7px; align-items:center; margin:9px 0; }

.arules{ display:flex; flex-direction:column; gap:6px; }
.arule{ padding:8px 10px; background:var(--panel2); border:1px solid var(--line);
  border-radius:8px; font-size:11px; line-height:1.5; color:var(--dim); }
.arule b{ display:block; color:var(--muted); font-size:11px; margin-bottom:2px; }

/* ── live match ───────────────────────────────────────────── */
.amatch{ display:flex; flex-direction:column; gap:10px; }
.amatch__hd{ display:flex; align-items:baseline; gap:9px; }
.amatch__br{ font-weight:700; font-size:14px; color:var(--text); }
.amatch__tag{ padding:1px 6px; border-radius:4px; background:var(--acc-soft); color:var(--acc);
  font-size:9px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.amatch__clock{ margin-left:auto; font-family:var(--mono); font-size:16px; color:var(--text);
  font-variant-numeric:tabular-nums; }
.agates{ padding:8px 10px; border-radius:7px; text-align:center;
  background:rgba(167,139,250,.12); border:1px solid rgba(167,139,250,.32);
  color:var(--violet); font-family:var(--mono); font-size:12px; letter-spacing:.04em; }
.amis{ padding:7px 10px; border-radius:7px; background:rgba(251,191,36,.12);
  border:1px solid rgba(251,191,36,.32); color:var(--amber); font-size:11px; line-height:1.45; }

.asides{ display:grid; grid-template-columns:1fr auto 1fr; gap:9px; align-items:start; }
.avs{ padding-top:16px; color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.aside{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.afighter{ padding:7px 9px; background:var(--panel2); border:1px solid var(--line); border-radius:8px; }
.afighter.is-dead{ opacity:.42; border-style:dashed; }
.afighter__top{ display:flex; align-items:baseline; gap:6px; }
.afighter__n{ flex:1; font-size:11px; font-weight:600; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.afighter__p{ font-family:var(--mono); font-size:10px; color:var(--dim); }
.ahp{ height:5px; margin:3px 0; border-radius:3px; background:var(--panel); overflow:hidden; }
.ahp__f{ height:100%; background:linear-gradient(90deg,var(--hp2),var(--hp)); transition:width .2s; }
.afighter__st{ font-family:var(--mono); font-size:9px; color:var(--dim); }
.aside--b .ahp__f{ background:linear-gradient(90deg,#9f1239,var(--red)); }

.ameters{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ameter{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px;
  background:var(--panel2); border:1px solid var(--line); border-radius:8px; }
.ameter.is-on{ border-color:var(--amber); background:rgba(251,191,36,.09); }
.ameter__v{ font-family:var(--mono); font-size:15px; font-weight:700; color:var(--dim);
  font-variant-numeric:tabular-nums; }
.ameter.is-on .ameter__v{ color:var(--amber); }
.ameter__k{ font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); }

/* ── result ───────────────────────────────────────────────── */
.ares{ margin-top:11px; padding:11px 12px; border-radius:var(--r);
  background:var(--panel2); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:5px; }
.ares--a{ border-color:rgba(52,211,153,.4); }
.ares--b{ border-color:rgba(251,113,133,.4); }
.ares__hd{ display:flex; align-items:baseline; gap:9px; }
.ares__w{ font-size:16px; font-weight:700; color:var(--text); }
.ares__m{ font-family:var(--mono); font-size:10px; color:var(--dim); }
.ares__note{ font-size:11px; color:var(--dim); line-height:1.45; }
.ares__delta{ display:flex; gap:11px; font-family:var(--mono); font-size:13px; font-weight:700; }
.ares__delta .up{ color:var(--green); } .ares__delta .dn{ color:var(--red); }

@media (max-width:820px){
  #pnlArena .panel__body{ min-width:0; }
  .asides{ grid-template-columns:1fr; } .avs{ padding:0; text-align:center; }
}

/* ══════════════════════════════════════════════════════════
   THE TOWN  (T)
   Same vocabulary as Factions & War and the Guild: .wtabs /
   .wtab / .wbody / .wh / .wnote / .wempty / .gerr / .gbtn /
   .wal__btn. Only the rows that are new to a shop are new here.
   ══════════════════════════════════════════════════════════ */
#pnlTown .panel__body{ min-width:440px; max-width:580px; }

.tsay{ padding:7px 10px; margin-bottom:9px; border-radius:7px;
  background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.3);
  color:var(--green); font-size:11px; line-height:1.45; }

/* ── header ───────────────────────────────────────────────── */
.thd{ padding:10px 12px; margin-bottom:11px; background:var(--panel2);
  border:1px solid var(--line); border-radius:var(--r); }
.thd__top{ display:flex; align-items:baseline; gap:9px; }
.thd__name{ font-weight:700; font-size:15px; color:var(--text); }
.thd__tag{ margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--dim); }
.thd__nums{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:8px; }
.tnum{ display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:7px 5px; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.tnum__v{ font-family:var(--mono); font-size:13px; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums; }
.tnum__k{ font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:.05em; }
.tnum.is-warn{ border-color:var(--amber); } .tnum.is-warn .tnum__v{ color:var(--amber); }
.tnum.is-bad{ border-color:var(--red); }   .tnum.is-bad .tnum__v{ color:var(--red); }

/* ── who is behind the counter ────────────────────────────── */
.tvend{ display:flex; gap:10px; align-items:flex-start; margin:0 0 9px;
  padding:9px 11px; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r); }
.tvend__i{ font-size:19px; line-height:1.2; }
.tvend__d{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tvend__n{ font-weight:700; font-size:13px; color:var(--text); }
.tvend__r{ margin-left:7px; font-family:var(--mono); font-size:10px; font-weight:400; color:var(--dim); }
.tvend__f{ font-size:10px; color:var(--muted); }
.tvend__q{ font-size:11px; color:var(--dim); font-style:italic; line-height:1.45; }

/* ── durability ───────────────────────────────────────────── */
.tdur{ display:grid; grid-template-columns:58px 1fr 70px 38px 46px; gap:8px; align-items:center;
  padding:5px 8px; border-bottom:1px solid var(--line); font-size:11px; }
.tdur.is-broken{ background:rgba(251,113,133,.08); }
.tdur__s{ font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); }
.tdur__n{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tdur__bar{ height:5px; border-radius:3px; background:var(--panel); border:1px solid var(--line); overflow:hidden; }
.tdur__fill{ height:100%; background:var(--green); transition:width .3s ease; }
.tdur.is-broken .tdur__fill{ background:var(--red); }
.tdur__p,.tdur__c{ font-family:var(--mono); font-size:10px; text-align:right;
  color:var(--dim); font-variant-numeric:tabular-nums; }
.tdur__c{ color:var(--amber); }
.tbroken{ padding:7px 10px; margin-bottom:9px; border-radius:7px;
  background:rgba(251,113,133,.1); border:1px solid rgba(251,113,133,.28);
  color:var(--red); font-size:11px; line-height:1.45; }

/* ── the bill ─────────────────────────────────────────────── */
.ttill{ margin-bottom:10px; padding:9px 11px; background:var(--panel2);
  border:1px solid var(--line); border-radius:var(--r); }
.ttill__r{ display:flex; justify-content:space-between; gap:12px;
  padding:3px 0; font-size:11px; color:var(--muted); }
.ttill__r.is-good{ color:var(--green); }
.ttill__v{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.ttill__total{ margin-top:5px; padding-top:7px; border-top:1px solid var(--line);
  font-weight:700; font-size:13px; color:var(--text); }

/* ── a shelf row ──────────────────────────────────────────── */
.tshelf{ display:flex; flex-direction:column; gap:5px; margin-bottom:9px; }
.titem{ display:flex; gap:10px; align-items:center; padding:7px 10px;
  background:var(--panel2); border:1px solid var(--line); border-radius:8px; }
.titem.is-locked{ opacity:.6; border-style:dashed; }
.titem[data-q="uncommon"]{ border-left:3px solid var(--uncommon); }
.titem[data-q="rare"]{ border-left:3px solid var(--rare); }
.titem[data-q="epic"]{ border-left:3px solid var(--epic); }
.titem[data-q="legendary"]{ border-left:3px solid var(--legendary); }
.titem__i{ font-size:18px; }
.titem__d{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.titem__n{ font-weight:600; font-size:12px; color:var(--text); }
.titem__il{ font-family:var(--mono); font-size:9px; font-weight:400; color:var(--dim); }
.titem__s{ font-family:var(--mono); font-size:10px; color:var(--green); }
.titem__f{ font-size:10.5px; color:var(--dim); line-height:1.4; }
.titem__gate{ font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--amber); }
.titem__bad{ font-size:10px; color:var(--red); }
.titem__stock{ font-family:var(--mono); font-size:9px; color:var(--dim); }
.titem__stock.is-out{ color:var(--amber); }
.titem__buy{ display:flex; align-items:center; gap:7px; flex-shrink:0; }
.titem__was{ font-family:var(--mono); font-size:10px; color:var(--dim); text-decoration:line-through; }
.titem__off{ font-size:9px; font-weight:700; color:var(--green); }
.titem__p{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--amber);
  font-variant-numeric:tabular-nums; }
.titem__no{ font-size:10px; color:var(--dim); font-style:italic; }
.gbtn[disabled]{ opacity:.4; cursor:not-allowed; }

/* ── bank grid ────────────────────────────────────────────── */
.tgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(40px,1fr));
  gap:5px; margin-bottom:9px; }
.tcell{ aspect-ratio:1; position:relative; display:grid; place-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:7px; }
.tcell.has{ cursor:pointer; background:var(--panel2); }
.tcell.has:hover{ border-color:var(--acc-line); transform:scale(1.06); }
.tcell[data-q="uncommon"]{ border-color:var(--uncommon); }
.tcell[data-q="rare"]{ border-color:var(--rare); }
.tcell[data-q="epic"]{ border-color:var(--epic); }
.tcell[data-q="legendary"]{ border-color:var(--legendary); }
.tcell__i{ font-size:17px; }
.tcell__q{ position:absolute; right:2px; bottom:1px; font-family:var(--mono);
  font-size:9px; color:var(--text); text-shadow:0 1px 2px #000; }

/* ── the inn ──────────────────────────────────────────────── */
.thearth{ display:flex; flex-direction:column; gap:7px; margin-bottom:9px;
  padding:9px 11px; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r); }
.thearth__now{ font-size:11.5px; color:var(--muted); line-height:1.45; }
.trest{ margin-bottom:9px; }
.trest__bar{ height:7px; border-radius:4px; background:var(--panel);
  border:1px solid var(--line); overflow:hidden; }
.trest__fill{ height:100%; background:var(--xp); transition:width .3s ease; }
.trest__n{ margin-top:4px; font-family:var(--mono); font-size:10px; color:var(--dim); }

/* ── trainer ──────────────────────────────────────────────── */
.ttrain{ display:flex; flex-direction:column; gap:5px; margin-bottom:9px; }
.trank{ display:flex; gap:10px; align-items:center; padding:7px 10px;
  background:var(--panel2); border:1px solid var(--line); border-radius:8px; }
.trank.is-ready{ border-color:var(--acc-line); }
.trank.is-maxed{ opacity:.55; }
.trank__i{ font-size:17px; }
.trank__d{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.trank__n{ font-weight:600; font-size:12px; color:var(--text); }
.trank__r{ margin-left:7px; font-family:var(--mono); font-size:9px; font-weight:400; color:var(--acc); }
.trank__f{ font-size:10.5px; color:var(--dim); line-height:1.4; }
.trank__bad{ font-size:10px; color:var(--amber); }
.trank__buy{ display:flex; align-items:center; gap:7px; flex-shrink:0; }

/* ── selling ──────────────────────────────────────────────── */
.tsell{ display:flex; flex-direction:column; gap:5px; margin:9px 0; }
.tsellr{ display:flex; gap:10px; align-items:center; padding:7px 10px;
  background:var(--panel2); border:1px solid var(--line); border-radius:8px; }
.tsellr[data-q="uncommon"]{ border-left:3px solid var(--uncommon); }
.tsellr[data-q="rare"]{ border-left:3px solid var(--rare); }
.tsellr[data-q="epic"]{ border-left:3px solid var(--epic); }
.tsellr[data-q="legendary"]{ border-left:3px solid var(--legendary); }

/* ── nowhere to shop ──────────────────────────────────────── */
.tzones{ display:flex; flex-direction:column; gap:4px; }
.tzone{ display:grid; grid-template-columns:auto 1fr auto auto; gap:9px; align-items:center;
  padding:7px 10px; background:var(--panel2); border:1px solid var(--line);
  border-radius:8px; font-size:11.5px; color:var(--muted); }
.tzone.is-here{ border-color:var(--acc-line); }
.tzone__i{ font-size:15px; }
.tzone__n{ font-weight:600; color:var(--text); }
.tzone__l,.tzone__s{ font-family:var(--mono); font-size:10px; color:var(--dim); }
.tnb{ margin-top:11px; padding-top:9px; border-top:1px solid var(--line); }

@media (max-width:820px){
  #pnlTown .panel__body{ min-width:0; }
  .tdur{ grid-template-columns:1fr 60px 34px 42px; }
  .tdur__s{ display:none; }
}

/* ══ SPELLBOOK · key R ═════════════════════════════════════
   The tabs are the ring: seven elements in ring order, each one
   carrying its own colour through `--el` so the screen never has
   to say "this is the fire tab" in words. */
.slot--empty{ opacity:.42; border-style:dashed }
.slot--empty:hover{ opacity:.7 }

.sbtabs{ flex-wrap:wrap }
.sbtab[style*="--el"]{ border-bottom-color:transparent }
.sbtab[style*="--el"].on{ color:var(--el); border-bottom-color:var(--el) }
.sbtab__n{ margin-left:5px; font-family:var(--mono); font-size:9px; color:var(--acc) }

.sbbad{ margin:0 0 9px; padding:7px 10px; border-radius:8px; font-size:11.5px;
  background:rgba(251,113,133,.10); border:1px solid rgba(251,113,133,.35); color:var(--red) }
.sbgood{ margin:0 0 9px; padding:7px 10px; border-radius:8px; font-size:11.5px;
  background:rgba(52,211,153,.10); border:1px solid rgba(52,211,153,.35); color:var(--green) }

/* ── your bar ──────────────────────────────────────────────── */
.sbbar{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px }
.sbslot{ display:flex; align-items:center; gap:7px; padding:6px 9px; min-width:150px;
  background:var(--panel2); border:1px solid var(--line); border-radius:8px }
.sbslot.is-empty{ opacity:.55; border-style:dashed }
.sbslot__k{ font-family:var(--mono); font-size:10px; color:var(--acc);
  width:15px; text-align:center }
.sbslot__i{ font-size:16px }
.sbslot__n{ font-size:11.5px; color:var(--text); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sbslot__lock{ font-family:var(--mono); font-size:9px; color:var(--dim) }

/* ── attunement ────────────────────────────────────────────── */
.sbatt{ display:flex; gap:6px; flex-wrap:wrap }
.sbatt__c{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:7px 11px;
  background:var(--panel2); border:1px solid var(--line); border-radius:8px; opacity:.5 }
.sbatt__c.is-on{ opacity:1; border-color:var(--el) }
.sbatt__i{ font-size:17px }
.sbatt__n{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--el) }
.sbatt__l{ font-size:9.5px; color:var(--dim) }

/* ── the element card ──────────────────────────────────────── */
.sbel{ padding:11px 13px; margin-bottom:11px; border-radius:10px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line); border-left:3px solid var(--el) }
.sbel__hd{ display:flex; gap:11px; align-items:center }
.sbel__i{ font-size:26px }
.sbel__d{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.sbel__n{ font-weight:700; font-size:14px; color:var(--el) }
.sbel__k{ margin-left:9px; font-family:var(--mono); font-size:10px; font-weight:400; color:var(--dim) }
.sbel__id{ font-size:11.5px; color:var(--muted); line-height:1.45 }
.sbel__tax{ display:flex; gap:6px; margin:9px 0 7px; flex-wrap:wrap }
.sbtax{ font-size:10px; color:var(--dim); padding:3px 8px; border-radius:99px;
  background:var(--panel); border:1px solid var(--line) }
.sbtax b{ font-family:var(--mono); color:var(--muted) }
.sbtax.is-up b{ color:var(--amber) }
.sbtax.is-dn b{ color:var(--ice) }
.sbel__sw{ font-size:11px; color:var(--muted); line-height:1.5; margin-top:3px }
.sbel__sw .k{ font-family:var(--mono); font-size:9px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dim); margin-right:6px }
.sbel__ring{ display:flex; gap:5px; align-items:center; flex-wrap:wrap; margin-top:9px }
.sbel__ring .k{ font-family:var(--mono); font-size:9px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--dim) }
.sbchip{ font-size:10px; font-family:var(--mono); padding:2px 7px; border-radius:99px;
  color:var(--el); background:var(--panel); border:1px solid var(--line) }
.sbchip.is-strong{ border-color:var(--el) }
.sbel__lore{ margin-top:9px; font-size:11px; font-style:italic; color:var(--dim); line-height:1.5 }
.sbhere{ color:var(--green) }
.sbaway{ color:var(--amber) }

/* ── branches and tiers ────────────────────────────────────── */
.sbbranches{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:11px }
.sbbr{ background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:10px }
.sbbr__hd{ display:flex; gap:7px; align-items:center }
.sbbr__i{ font-size:15px }
.sbbr__n{ font-weight:700; font-size:12.5px; color:var(--text) }
.sbbr__f{ font-size:10.5px; color:var(--dim); line-height:1.45; margin:3px 0 8px }
.sbtier{ margin-bottom:8px }
.sbtier.is-shut{ opacity:.72 }
.sbtier__hd{ display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--dim); border-bottom:1px solid var(--line); padding-bottom:3px; margin-bottom:5px }
.sbtier__r{ text-transform:none; letter-spacing:0; color:var(--muted) }

/* ── one spell ─────────────────────────────────────────────── */
.sbsp{ display:flex; gap:9px; align-items:flex-start; padding:7px 9px; margin-bottom:4px;
  background:var(--panel); border:1px solid var(--line); border-radius:8px }
.sbsp.is-open{ border-color:var(--acc-line) }
.sbsp.is-shut{ opacity:.85 }
.sbsp.is-known{ border-left:3px solid var(--el,var(--acc)) }
.sbsp__i{ font-size:16px; line-height:1.3 }
.sbsp__d{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0 }
.sbsp__n{ font-weight:600; font-size:12px; color:var(--text) }
.sbsp__el{ margin-right:4px }
.sbsp__r{ margin-left:7px; font-family:var(--mono); font-size:9px; font-weight:400; color:var(--acc) }
.sbsp__m{ display:block; font-family:var(--mono); font-size:9.5px; font-weight:400; color:var(--dim) }
.sbsp__f{ font-size:10.5px; color:var(--dim); line-height:1.45 }
.sbsp__buy{ display:flex; align-items:center; gap:6px; flex-shrink:0; flex-wrap:wrap;
  justify-content:flex-end; max-width:46% }
.sbsp__slot{ font-family:var(--mono); font-size:9px; color:var(--dim) }
.sbsp__slot b{ color:var(--acc) }
.sbsp__lock{ font-family:var(--mono); font-size:9px; color:var(--amber) }
.sbpick{ display:flex; gap:2px }

/* ── why it is locked ──────────────────────────────────────────
   Four gates, four colours, and every one of them prints the
   threshold and where you stand against it. "Locked" on its own
   is the same dead end as content with no door. */
.sbgates{ display:flex; flex-direction:column; gap:3px; margin-top:4px }
.sbgate{ display:grid; grid-template-columns:auto 1fr auto; gap:6px; align-items:baseline;
  padding:4px 7px; border-radius:6px; background:var(--panel2);
  border-left:2px solid var(--dim) }
.sbgate--level{ border-left-color:var(--ice) }
.sbgate--attunement{ border-left-color:var(--amber) }
.sbgate--lane{ border-left-color:var(--acc) }
.sbgate--fusion{ border-left-color:var(--mag) }
.sbgate__k{ font-family:var(--mono); font-size:8.5px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--dim) }
.sbgate__n{ font-size:10.5px; color:var(--text) }
.sbgate__h{ font-family:var(--mono); font-size:9px; color:var(--amber) }
.sbgate__w{ grid-column:1/-1; font-size:10px; color:var(--dim); line-height:1.45 }

@media (max-width:820px){
  .sbbranches{ grid-template-columns:1fr }
  .sbsp__buy{ max-width:none }
}