*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#cfe6f2; --dim:#5d7b8c; --faint:#31485a;
  --cyan:#5ee7ff; --amber:#ffb454; --red:#ff4060;
  --violet:#b07bff; --green:#6bffa8; --bg:#04060a;
  --mono:ui-monospace,"JetBrains Mono","IBM Plex Mono",Menlo,Consolas,monospace;
}
html,body{height:100%;background:#000;overflow:hidden;color:var(--ink);
  font-family:var(--mono);-webkit-font-smoothing:antialiased;cursor:default;
  user-select:none;-webkit-user-select:none}
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 42%,#070b12 0%,#000 72%)}
#frame{position:relative;width:min(100vw,160vh);aspect-ratio:8/5;container-type:size;
  overflow:hidden;box-shadow:0 0 140px rgba(0,0,0,.95),0 0 0 1px rgba(90,180,220,.07)}
canvas{display:block;width:100%;height:100%;image-rendering:auto;cursor:crosshair}

#scan{position:absolute;inset:0;pointer-events:none;z-index:4;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 1px,rgba(0,0,0,.22) 1px 2px);
  opacity:.20;mix-blend-mode:multiply}
#scan::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(0,0,0,.62) 100%)}

.kicker{font-size:1.02cqw;letter-spacing:.55em;color:#7d9aab;text-transform:uppercase;text-indent:.55em}
.k{font-size:.86cqw;letter-spacing:.3em;color:#587888;text-transform:uppercase}
.cap{font-size:.86cqw;letter-spacing:.2em;color:#4d6a7a;margin-left:.8cqw}
.num{font-variant-numeric:tabular-nums}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:3;
  opacity:0;transition:opacity .5s ease}
#hud.on{opacity:1}
#vitals{position:absolute;left:2.4cqw;top:2.2cqw;width:26cqw}
#vitals .row{display:flex;align-items:center;gap:.7cqw;margin-bottom:.55cqw}
.tag{width:2.3cqw;font-size:.9cqw;letter-spacing:.24em;color:#6d8c9d}
.bar{position:relative;flex:1;height:.42cqw;background:rgba(120,190,220,.10);overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;width:100%;transition:width .18s ease}
.bar.hp i{background:linear-gradient(90deg,#ff2d52,#ff7a6a);box-shadow:0 0 1cqw rgba(255,60,90,.6)}
.bar.en i{background:linear-gradient(90deg,#2aa8ff,#7cf4ff);box-shadow:0 0 1cqw rgba(90,220,255,.55)}
.bar.xp{height:.2cqw}
.bar.xp i{background:linear-gradient(90deg,#8b5cff,#c9a8ff);box-shadow:0 0 1cqw rgba(160,110,255,.5)}
#vitals .num{font-size:.95cqw;letter-spacing:.1em;color:#8fb0c2;min-width:4.6cqw;text-align:right}

#meta{position:absolute;right:2.4cqw;top:2.2cqw;text-align:right}
#meta .line{display:flex;justify-content:flex-end;align-items:baseline;gap:.7cqw;margin-bottom:.16cqw}
#meta b{font-size:1.7cqw;font-weight:300;letter-spacing:.12em;color:#e9f8ff;text-shadow:0 0 1cqw rgba(110,225,255,.4)}
#meta .of{font-size:.86cqw;color:#416070}

#log{position:absolute;left:2.4cqw;bottom:2.2cqw;width:56cqw;font-size:1.06cqw;line-height:1.62;
  display:flex;flex-direction:column-reverse;max-height:17cqw;overflow:hidden}
#log div{opacity:.95;transition:opacity .4s ease;text-shadow:0 0 1.2cqw rgba(0,0,0,.9)}
#log .good{color:var(--green)}
#log .bad{color:var(--red)}
#log .warn{color:var(--amber)}
#log .sys{color:#8fb0c2}
#log .loot{color:var(--violet)}

#abil{position:absolute;right:2.4cqw;bottom:2.2cqw;display:flex;gap:.8cqw}
.chip{width:8.1cqw;padding:.55cqw .5cqw .45cqw;border:1px solid rgba(110,200,230,.16);
  background:rgba(8,20,30,.55);position:relative;overflow:hidden}
.chip .key{position:absolute;top:.3cqw;right:.45cqw;font-size:.72cqw;color:#5e7f90}
.chip .nm{font-size:.84cqw;letter-spacing:.1em;color:#cfe6f2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip .cd{font-size:.72cqw;letter-spacing:.16em;color:#4d6a7a;margin-top:.2cqw}
.chip.ready{border-color:rgba(110,240,255,.5);box-shadow:inset 0 0 1.4cqw rgba(60,200,255,.16)}
.chip.ready .cd{color:var(--cyan)}
.chip.cool{opacity:.45}
.chip.noen .cd{color:var(--red)}

#hint{position:absolute;left:50%;top:1.05cqw;transform:translateX(-50%);
  font-size:.74cqw;letter-spacing:.24em;color:#31505f;text-transform:uppercase}

/* ---------- panels ---------- */
.panel{position:absolute;z-index:6;right:4cqw;top:8cqw;width:40cqw;max-height:76cqw;
  background:linear-gradient(180deg,rgba(9,18,26,.97),rgba(5,10,16,.98));
  border:1px solid rgba(110,200,230,.18);box-shadow:0 0 8cqw rgba(0,0,0,.85),inset 0 0 4cqw rgba(30,120,160,.06);
  padding:1.6cqw 1.7cqw;transform:translateX(0);transition:opacity .22s ease,transform .22s ease}
.panel.off{opacity:0;pointer-events:none;transform:translateX(2cqw)}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2cqw;
  padding-bottom:.9cqw;border-bottom:1px solid rgba(110,200,230,.12)}
.x{font-family:var(--mono);font-size:.8cqw;letter-spacing:.2em;color:#6d8c9d;background:none;
  border:1px solid rgba(110,200,230,.2);padding:.28cqw .5cqw;cursor:pointer}
.x:hover{color:var(--cyan);border-color:rgba(110,240,255,.5)}
#invList{display:flex;flex-direction:column;gap:.42cqw;min-height:6cqw}
.item{display:flex;justify-content:space-between;align-items:baseline;gap:1cqw;
  padding:.6cqw .7cqw;border-left:2px solid var(--faint);background:rgba(120,200,230,.035);
  cursor:pointer;transition:background .12s ease,border-color .12s ease}
.item:hover{background:rgba(120,220,255,.09);border-left-color:var(--cyan)}
.item.sel{background:rgba(120,220,255,.13);border-left-color:var(--cyan)}
.item .nm{font-size:.96cqw;letter-spacing:.06em}
.item .st{font-size:.78cqw;letter-spacing:.08em;color:#6d8c9d;white-space:nowrap}
.item .eq{font-size:.7cqw;color:var(--amber);letter-spacing:.18em;margin-left:.5cqw}
.item canvas.ico{width:2.1cqw;height:2.1cqw;flex:0 0 auto;align-self:center;
 background:rgba(0,0,0,.28);border:1px solid rgba(120,200,230,.18);border-radius:2px;
 image-rendering:pixelated}
.item .nm{margin-right:auto;text-align:left}

#bossBanner{position:absolute;z-index:6;left:50%;top:7.2cqw;transform:translate(-50%,-10px);
 display:flex;flex-direction:column;align-items:center;gap:.4cqw;padding:.85cqw 2.4cqw;
 border-top:1px solid rgba(120,220,255,.35);border-bottom:1px solid rgba(120,220,255,.18);
 background:linear-gradient(90deg,transparent,rgba(5,16,24,.78),transparent);
 opacity:0;transition:opacity .35s,transform .35s;pointer-events:none;white-space:nowrap}
#bossBanner.on{opacity:1;transform:translate(-50%,0)}
#bossBanner.rage{border-top-color:rgba(255,90,60,.6);border-bottom-color:rgba(255,90,60,.3);
 background:linear-gradient(90deg,transparent,rgba(38,8,8,.82),transparent)}
.bb-kick{font-size:.66cqw;letter-spacing:.4em;color:#6f93a6}
.bb-name{font-size:2.15cqw;letter-spacing:.3em;color:#d8f3ff;
 text-shadow:0 0 18px rgba(110,231,255,.45)}
#bossBanner.rage .bb-kick{color:#c07a6e}
#bossBanner.rage .bb-name{color:#ff9a80;text-shadow:0 0 20px rgba(255,80,50,.6)}
.item.empty{opacity:.32;cursor:default;border-left-color:transparent}
.r-common{color:#b9d3e0}.r-rare{color:#6fd7ff}.r-epic{color:#c095ff}.r-legend{color:#ffb454}
.panel-foot{margin-top:1.1cqw;padding-top:.8cqw;border-top:1px solid rgba(110,200,230,.12);
  font-size:.8cqw;letter-spacing:.14em;color:#4d6a7a;min-height:1.4cqw}

.helpbody{display:flex;flex-direction:column;gap:.85cqw}
.hrow{display:flex;justify-content:space-between;gap:2cqw;font-size:.92cqw;color:#a9c6d4}
.hrow b{font-weight:400;letter-spacing:.18em;color:#58808f;font-size:.8cqw;white-space:nowrap}
.hrow.dim{opacity:.6;padding-top:.6cqw;border-top:1px solid rgba(110,200,230,.1)}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.85cqw;text-align:center;
  background:radial-gradient(ellipse at 50% 46%,rgba(2,5,9,.55) 0%,rgba(1,2,4,.9) 76%);
  transition:opacity .55s ease}
.screen.off{opacity:0;pointer-events:none}
.bigtitle{font-size:12.5cqw;line-height:.92;font-weight:200;letter-spacing:.18em;text-indent:.18em;
  color:#f0fbff;text-shadow:0 0 3cqw rgba(90,220,255,.45),0 0 10cqw rgba(50,120,255,.22)}
.bigtitle.small{font-size:7cqw}
.sub{font-size:1.06cqw;letter-spacing:.46em;color:#89adbf;text-transform:uppercase}
.hr{width:18cqw;height:1px;background:linear-gradient(90deg,transparent,#3d6c85,transparent);margin:.4cqw 0}
.meta-line{font-size:.88cqw;letter-spacing:.24em;color:#4f7183;text-transform:uppercase}
.cta{margin-top:.9cqw;font-size:1.12cqw;letter-spacing:.46em;text-indent:.46em;color:#eafcff;
  cursor:pointer;padding:.62cqw 1.6cqw;border:1px solid rgba(110,220,255,.22);
  background:rgba(40,140,190,.06);transition:all .15s ease}
.cta:hover{border-color:rgba(110,240,255,.35);background:rgba(60,200,255,.06);text-shadow:0 0 1.4cqw rgba(110,240,255,.7)}
.cta.alt{font-size:.9cqw;color:#6d8c9d;margin-top:.1cqw}
.cta.hidden{display:none}
.keys{position:absolute;bottom:3cqw;font-size:.8cqw;letter-spacing:.22em;color:#35566a;text-transform:uppercase}
.statgrid{display:grid;grid-template-columns:auto auto;gap:.5cqw 2.4cqw;font-size:.96cqw;
  letter-spacing:.1em;color:#9dbccd;margin:.6cqw 0 1.2cqw}
.statgrid b{font-weight:300;color:#ecfaff;text-align:right}
.statgrid .hl b{color:var(--amber)}
.warnline{color:var(--red);font-size:.88cqw;letter-spacing:.3em;text-transform:uppercase}

/* ---------- character select ---------- */
#pick{z-index:7;gap:1cqw}
.pick-title{font-size:2.7cqw;font-weight:200;letter-spacing:.3em;text-indent:.3em;color:#eaf9ff;
  text-shadow:0 0 2.4cqw rgba(90,220,255,.3)}
.pickrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5cqw;width:76cqw;margin:.6cqw 0 .4cqw}
.pickcard{position:relative;padding:1.35cqw 1.35cqw 1.1cqw;overflow:hidden;cursor:pointer;
  border:1px solid rgba(110,200,230,.14);
  background:linear-gradient(168deg,rgba(12,23,33,.92),rgba(4,8,13,.97));
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.pickcard::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5}
.pickcard:hover{transform:translateY(-.45cqw);border-color:rgba(150,230,255,.32);
  box-shadow:0 1.4cqw 4cqw rgba(0,0,0,.65),inset 0 0 3cqw rgba(40,140,190,.07)}
.pk-num{position:absolute;top:.85cqw;left:1.05cqw;font-size:.74cqw;letter-spacing:.22em;color:#3d5a6b}
.pk-glow{position:absolute;top:-4cqw;left:50%;transform:translateX(-50%);width:24cqw;height:16cqw;
  background:radial-gradient(ellipse at 50% 45%,rgba(120,210,255,.13),transparent 66%);pointer-events:none}
.pk-stage{position:relative;height:11.6cqw;display:flex;align-items:flex-end;justify-content:center;margin-bottom:.6cqw}
.pk-stage canvas{width:10.4cqw;height:10.4cqw;image-rendering:pixelated;
  filter:drop-shadow(0 .5cqw 1.2cqw rgba(0,0,0,.8))}
.pk-stage::before{content:"";position:absolute;top:52%;left:50%;width:7cqw;height:7cqw;
  transform:translate(-50%,-50%);background:var(--accent);opacity:.14;filter:blur(14px);border-radius:50%;pointer-events:none}
.pk-stage::after{content:"";position:absolute;bottom:.5cqw;width:8.6cqw;height:1.1cqw;border-radius:50%;
  background:radial-gradient(ellipse,var(--accent),transparent 72%);opacity:.2}
.pk-role{font-size:.68cqw;letter-spacing:.3em;color:var(--accent);text-transform:uppercase;opacity:.85}
.pk-name{font-size:1.85cqw;font-weight:300;letter-spacing:.16em;color:#f2fcff;margin:.2cqw 0 .5cqw}
.pk-blurb{font-size:.8cqw;line-height:1.5;color:#7f9cad;min-height:3.2cqw}
.pk-stats{display:flex;flex-direction:column;gap:.26cqw;margin:.85cqw 0 .75cqw}
.pk-stats .stat{display:flex;align-items:center;gap:.55cqw;font-size:.68cqw;letter-spacing:.16em;color:#5d7b8c}
.sbar{flex:1;height:.22cqw;background:rgba(120,190,220,.1)}
.sbar i{display:block;height:100%;background:var(--accent);opacity:.6}
.pk-stats b{color:#cfe6f2;font-weight:400;min-width:2cqw;text-align:right;font-size:.72cqw}
.pk-perk{font-size:.68cqw;letter-spacing:.22em;color:var(--accent);opacity:.9;
  border-top:1px solid rgba(110,200,230,.1);padding-top:.55cqw}
.pk-abils{display:flex;flex-wrap:wrap;gap:.3cqw;margin:.7cqw 0 .9cqw;min-height:2.2cqw}
.pk-ab{font-size:.6cqw;letter-spacing:.1em;padding:.22cqw .38cqw;color:#9dbccd;
  border:1px solid rgba(110,200,230,.15);white-space:nowrap}
.pk-ab em{font-style:normal;color:#4d6a7a}
.pk-go{width:100%;font-family:var(--mono);font-size:.76cqw;letter-spacing:.34em;text-indent:.34em;
  padding:.5cqw;color:#dff6ff;background:rgba(60,200,255,.05);
  border:1px solid rgba(110,220,255,.22);cursor:pointer;transition:all .14s ease}
.pickcard:hover .pk-go{background:rgba(60,200,255,.13);border-color:var(--accent)}

/* ---------- dialogue ---------- */
#talk{position:absolute;z-index:7;left:50%;bottom:2.8cqw;width:66cqw;
  transform:translateX(-50%);transition:opacity .18s ease,transform .18s ease}
#talk.off{opacity:0;pointer-events:none;transform:translate(-50%,1.2cqw)}
.talk-card{display:flex;gap:1.3cqw;padding:1.3cqw 1.5cqw;border:1px solid rgba(110,200,230,.2);
  background:linear-gradient(180deg,rgba(9,19,28,.97),rgba(4,9,15,.98));
  box-shadow:0 2cqw 6cqw rgba(0,0,0,.72),inset 0 0 3cqw rgba(40,130,170,.05)}
.talk-side{width:10.6cqw;flex:none;display:flex;flex-direction:column;align-items:center;gap:.35cqw}
#talkPortrait{width:9.4cqw;height:9.4cqw;image-rendering:pixelated;
  background:radial-gradient(circle,rgba(80,180,220,.09),transparent 70%)}
.talk-role{font-size:.62cqw;letter-spacing:.24em;color:#5d7b8c;text-transform:uppercase;text-align:center}
.talk-main{flex:1;display:flex;flex-direction:column;gap:.45cqw;min-width:0}
.talk-name{font-size:1.2cqw;letter-spacing:.2em;color:#eafaff}
.talk-text{font-size:.98cqw;line-height:1.55;color:#9dbccd;min-height:3cqw}
.talk-opts{display:flex;flex-direction:column;gap:.32cqw;margin-top:.25cqw}
.talk-opt{display:flex;align-items:center;gap:.7cqw;text-align:left;font-family:var(--mono);
  background:rgba(120,200,230,.04);border:1px solid rgba(110,200,230,.14);
  border-left:2px solid var(--faint);padding:.4cqw .7cqw;color:#cfe6f2;cursor:pointer;
  font-size:.86cqw;letter-spacing:.06em;transition:background .12s ease,border-color .12s ease}
.talk-opt:hover{border-left-color:var(--cyan);background:rgba(120,220,255,.09)}
.talk-opt.off{opacity:.32;cursor:default}
.talk-opt.off:hover{border-left-color:var(--faint);background:rgba(120,200,230,.04)}
.talk-opt .oi{font-size:.62cqw;color:#4d6a7a;border:1px solid rgba(110,200,230,.2);padding:.04cqw .26cqw}
.talk-opt .ol{flex:1}
.talk-opt .os{font-size:.7cqw;color:#5d7b8c;letter-spacing:.04em;white-space:nowrap}

/* ---------- shop ---------- */
.panel.shop{right:auto;left:50%;top:50%;width:46cqw;max-height:70cqw;transform:translate(-50%,-50%)}
.panel.shop.off{transform:translate(-50%,-46%)}
#shopList{display:flex;flex-direction:column;gap:.42cqw;min-height:5cqw}
.shopitem .st{flex:1;text-align:left;color:#6d8c9d}
.shopitem .price{font-size:.8cqw;color:var(--amber);letter-spacing:.08em;white-space:nowrap}
.shopitem.poor{opacity:.42}
.shopitem.poor .price{color:var(--red)}
#shopCap{color:var(--amber)}