:root{
  --bg:#050914;--panel:#0b1222cc;--panel2:#0e1830;--line:#21365d;--text:#edf8ff;--muted:#7e94b9;
  --cyan:#33e7ff;--cyan2:#008dff;--mag:#ff3fe1;--gold:#ffd056;--danger:#ff4f78;--good:#55f5b2;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 15%,#101d3d 0,#080e1f 30%,#03060d 75%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}body{overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(#7adfff22 1px,transparent 1px),radial-gradient(#ff59df14 1px,transparent 1px);background-size:34px 34px,53px 53px;background-position:0 0,13px 7px;mask-image:linear-gradient(to bottom,#000,transparent 86%)}
button{font:inherit}.app-shell{width:min(1480px,100%);margin:auto;padding:18px 18px 28px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:4px 8px 18px}.eyebrow{font-size:11px;letter-spacing:.22em;color:var(--cyan);font-weight:800}.topbar h1{font-size:clamp(24px,4vw,40px);line-height:1;margin:5px 0 0;letter-spacing:.05em;text-shadow:0 0 22px #19dfff66}.top-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.stat{min-width:100px;border:1px solid #1d365f;background:#091326cc;border-radius:14px;padding:8px 12px;text-align:right}.stat span{display:block;font-size:9px;letter-spacing:.16em;color:var(--muted)}.stat strong{font-size:18px;color:#fff}
.game-layout{display:grid;grid-template-columns:minmax(190px,240px) minmax(300px,620px) minmax(190px,240px);gap:18px;justify-content:center;align-items:start}.side-panel{display:flex;flex-direction:column;gap:14px;min-width:0}.panel-card{border:1px solid #1d3459;background:linear-gradient(180deg,#0e1930dc,#08111fdd);border-radius:18px;padding:14px;box-shadow:inset 0 1px #ffffff0a}.panel-title{font-size:10px;letter-spacing:.18em;color:#8db2dc;font-weight:900;margin-bottom:10px}.panel-card canvas{display:block;width:100%;height:auto;background:#050b16;border-radius:12px;border:1px solid #152847}.key-hint{text-align:center;color:#597399;font-size:10px;margin-top:7px;letter-spacing:.12em}.objective{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid #ffffff08}.objective:first-of-type{border-top:0}.objective b,.objective small{display:block}.objective b{font-size:12px}.objective small{font-size:10px;color:var(--muted);margin-top:2px}.dot{width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.core{color:var(--gold)}.status-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:11px;color:var(--muted)}.status-row b{color:#fff}.compact{padding-bottom:10px}
.board-column{min-width:0}.board-frame{position:relative;width:100%;aspect-ratio:8/18;border-radius:22px;padding:8px;background:linear-gradient(180deg,#123561,#09152b);border:1px solid #3bcff655;box-shadow:0 0 0 1px #57e7ff18,0 0 45px #0ac8ff18,inset 0 0 45px #0c2448}.board-frame:before{content:"";position:absolute;inset:4px;border-radius:18px;border:1px solid #44e7ff33;pointer-events:none}.board-frame canvas{width:100%;height:100%;display:block;border-radius:15px;background:#030814;touch-action:none}.fx-layer{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;overflow:hidden}.major-fx,.combo-fx,.chain-score{position:absolute;text-align:center;font-weight:1000;letter-spacing:.04em;text-shadow:0 3px 20px #000}.major-fx{font-size:clamp(25px,5vw,48px);top:38%;color:#fff}.combo-fx{font-size:clamp(20px,4vw,38px);top:48%;color:var(--cyan)}.chain-score{font-size:clamp(14px,2vw,22px);top:57%;color:var(--gold)}.fx-pop{animation:fxPop .48s cubic-bezier(.16,.9,.25,1)}@keyframes fxPop{0%{opacity:0;transform:scale(.7)}45%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}.selection-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:#06111eee;border:1px solid var(--cyan);color:#fff;padding:9px 12px;border-radius:999px;font-size:11px;white-space:nowrap;box-shadow:0 0 20px #18dfff44}.hidden{display:none!important}.game-over{position:absolute;inset:0;display:grid;place-items:center;background:#020714cc;backdrop-filter:blur(7px);border-radius:18px}.game-over-card{text-align:center;width:min(330px,86%);padding:26px 18px;border:1px solid #ff5f7f66;background:#090d18;border-radius:20px;box-shadow:0 0 50px #ff355b28}.game-over-card span{font-size:10px;letter-spacing:.18em;color:var(--danger)}.game-over-card h2{margin:7px 0;font-size:28px}.game-over-card p{color:var(--muted)}.game-over-card button{border:0;border-radius:12px;padding:11px 18px;background:linear-gradient(135deg,var(--cyan),var(--cyan2));font-weight:900;color:#03101a;cursor:pointer}
.powers-card{display:flex;flex-direction:column;gap:8px}.power{width:100%;display:grid;grid-template-columns:28px 1fr 28px;gap:8px;align-items:center;text-align:left;border:1px solid #1a3153;background:#081425;color:#fff;border-radius:12px;padding:9px;cursor:pointer;transition:.15s}.power:hover{border-color:#2bbfe4;transform:translateY(-1px)}.power:disabled{opacity:.35;cursor:not-allowed;transform:none}.power>span{font-size:18px}.power b,.power small{display:block}.power b{font-size:11px}.power small{font-size:9px;color:var(--muted);margin-top:2px}.power em{font-style:normal;border-radius:99px;background:#122643;text-align:center;font-size:10px;padding:4px 0;color:var(--cyan)}.lab-card summary{cursor:pointer;font-size:11px;font-weight:900;letter-spacing:.1em;color:#8db2dc}.lab-card p{font-size:10px;line-height:1.4;color:var(--muted)}.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.lab-grid button{border:1px solid #203a61;background:#0a172a;color:#bdd8f4;border-radius:9px;padding:7px 6px;font-size:10px;cursor:pointer}
.mobile-controls{display:none;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:10px}.mobile-controls button{min-height:46px;border:1px solid #203960;background:#0b1729;color:#dff7ff;border-radius:12px;font-weight:900}.mobile-controls .accent{background:linear-gradient(135deg,#0b5270,#06345a);border-color:#22d5ff}.helpbar{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;padding:16px 4px 0;color:#6983a8;font-size:10px}.helpbar kbd{display:inline-block;background:#0c1729;border:1px solid #213a60;border-bottom-width:2px;border-radius:5px;padding:2px 5px;color:#bfefff;margin-right:2px}
@media(max-width:980px){.game-layout{grid-template-columns:minmax(160px,200px) minmax(300px,560px)}.right-panel{grid-column:1;grid-row:1;margin-top:430px}.board-column{grid-column:2;grid-row:1/span 2}.helpbar{display:none}.mobile-controls{display:grid}}
@media(max-width:720px){.app-shell{padding:10px}.topbar{padding:4px 2px 10px}.top-stats .stat:nth-child(2){display:none}.stat{min-width:78px;padding:7px 9px}.stat strong{font-size:15px}.game-layout{display:flex;flex-direction:column;align-items:stretch}.board-column{order:1;width:min(100%,480px);margin:auto}.left-panel{order:2;display:grid;grid-template-columns:1.2fr .8fr;gap:10px}.right-panel{order:3;margin:0;display:grid;grid-template-columns:.8fr 1.2fr;gap:10px}.panel-card{padding:10px;border-radius:14px}.objective-card{grid-row:span 2}.compact{grid-column:2}.lab-card{grid-column:1/-1}.mobile-controls{display:grid}.mobile-controls button{font-size:11px}.board-frame{border-radius:18px;padding:6px}.topbar h1{font-size:25px}}
@media(max-width:420px){.left-panel,.right-panel{grid-template-columns:1fr 1fr}.powers-card{grid-column:1/-1}.mobile-controls{grid-template-columns:repeat(3,1fr)}.top-stats{gap:5px}.stat{min-width:69px}.app-shell{padding:7px}}

/* ---------- V0.2 · Renderer Premium ---------- */
.board-frame>.three-canvas,.board-frame>.fallback-canvas{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);border-radius:15px;display:block;touch-action:none}
.board-frame>.three-canvas{opacity:0;visibility:hidden;pointer-events:none;background:#020611}
.board-frame>.fallback-canvas{opacity:1;visibility:visible}
.board-frame.three-ready>.three-canvas{opacity:1;visibility:visible}
.board-frame.three-ready>.fallback-canvas{opacity:0;visibility:hidden;pointer-events:none}
.renderer-badge{position:absolute;right:15px;top:15px;z-index:4;padding:5px 8px;border:1px solid #34dffc55;border-radius:999px;background:#020a15cc;backdrop-filter:blur(8px);font-size:8px;line-height:1;letter-spacing:.13em;font-weight:900;color:#91eeff;pointer-events:none;box-shadow:0 0 18px #16d7ff1f}
.renderer-card{position:relative;overflow:hidden}
.renderer-card:after{content:"";position:absolute;width:90px;height:90px;right:-38px;top:-38px;border-radius:50%;background:radial-gradient(circle,#21dcff28,transparent 68%);pointer-events:none}
.renderer-status{display:flex;gap:9px;align-items:center}.renderer-status b,.renderer-status small{display:block}.renderer-status b{font-size:11px}.renderer-status small{font-size:9px;color:var(--muted);margin-top:2px;line-height:1.35}.renderer-dot{width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:#55f5b2;box-shadow:0 0 14px #55f5b2}
.timing-note{font-size:9px;line-height:1.45;color:#85a1c8;margin:10px 0 5px;padding-top:8px;border-top:1px solid #ffffff0a}.config-note{font-size:8px;color:#5f789c}.config-note code{color:#8eefff;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
@media(max-width:720px){.board-frame>.three-canvas,.board-frame>.fallback-canvas{inset:6px;width:calc(100% - 12px);height:calc(100% - 12px)}.renderer-badge{top:12px;right:12px;font-size:7px}.renderer-card{grid-column:1/-1}}

/* ==========================================================
   V0.2.1 · VISUAL PASS "NEON REACTOR"
   ========================================================== */
:root{
  --bg0:#01040b;--bg1:#061020;--panelGlow:#0d1d37e8;
  --cyan:#43ecff;--cyan2:#008dff;--mag:#ff42dc;--violet:#7658ff;--gold:#ffd45b;
}
html,body{
  background:
    radial-gradient(ellipse at 18% 14%,rgba(42,40,121,.24),transparent 34%),
    radial-gradient(ellipse at 82% 22%,rgba(140,28,130,.18),transparent 33%),
    radial-gradient(ellipse at 50% 68%,rgba(0,131,184,.12),transparent 36%),
    linear-gradient(180deg,#061020 0%,#030813 42%,#01040b 100%);
}
body:before{
  opacity:.85;
  background-image:
    radial-gradient(circle,#65eaff30 0 1px,transparent 1.25px),
    radial-gradient(circle,#ff55e31f 0 1px,transparent 1.25px),
    linear-gradient(115deg,transparent 0 48%,rgba(80,225,255,.028) 49%,transparent 50%);
  background-size:33px 33px,59px 59px,120px 120px;
  animation:starDrift 28s linear infinite;
}
body:after{
  content:"";position:fixed;inset:-20%;pointer-events:none;z-index:-1;
  background:
    radial-gradient(ellipse at 25% 40%,rgba(0,224,255,.08),transparent 23%),
    radial-gradient(ellipse at 72% 45%,rgba(255,47,220,.07),transparent 25%);
  filter:blur(40px);animation:nebulaMove 14s ease-in-out infinite alternate;
}
@keyframes starDrift{to{background-position:33px 66px,-59px 118px,120px 0}}
@keyframes nebulaMove{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,2%,0) scale(1.08)}}

.app-shell{width:min(1540px,100%);padding:16px 18px 32px}
.topbar{
  position:relative;padding:11px 14px 15px;margin:0 0 12px;
  border:1px solid rgba(70,190,255,.14);border-radius:18px;
  background:linear-gradient(180deg,rgba(8,21,43,.72),rgba(4,10,22,.45));
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 18px 60px rgba(0,0,0,.18);
  backdrop-filter:blur(16px);
}
.topbar:after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),var(--mag),transparent);opacity:.45}
.eyebrow{font-size:10px;color:#7ef2ff;text-shadow:0 0 12px #26e9ff88}
.topbar h1{font-size:clamp(27px,3.7vw,44px);font-style:italic;letter-spacing:.075em;background:linear-gradient(180deg,#fff,#c7f8ff 63%,#64dfff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 16px #15dfff4d)}
.stat{position:relative;overflow:hidden;border-color:#274a7b;background:linear-gradient(180deg,#0d1c35e6,#06101fe8);box-shadow:inset 0 1px rgba(255,255,255,.05),0 0 25px rgba(24,193,255,.05)}
.stat:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.055) 42%,transparent 63%);transform:translateX(-100%);animation:statShine 6s ease-in-out infinite}
@keyframes statShine{0%,65%{transform:translateX(-110%)}85%,100%{transform:translateX(110%)}}
.stat strong{color:#f6fdff;text-shadow:0 0 11px rgba(78,236,255,.36)}

.game-layout{grid-template-columns:minmax(200px,250px) minmax(330px,660px) minmax(200px,250px);gap:19px}
.panel-card{
  position:relative;overflow:hidden;border-color:rgba(50,113,175,.48);
  background:linear-gradient(160deg,rgba(15,31,58,.92),rgba(5,13,27,.94));
  box-shadow:inset 0 1px rgba(255,255,255,.045),0 10px 35px rgba(0,0,0,.18);
}
.panel-card:before{content:"";position:absolute;left:0;top:0;width:55%;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);opacity:.65}
.panel-title{color:#a6c8ec;text-shadow:0 0 12px rgba(45,213,255,.16)}
.panel-card canvas{background:radial-gradient(circle at 50% 45%,#0b1730,#020711 72%);border-color:#1d426c;box-shadow:inset 0 0 25px rgba(0,0,0,.55)}
.objective.active{position:relative}.objective.active:after{content:"";position:absolute;left:-5px;right:-5px;bottom:0;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);opacity:.35}
.dot{box-shadow:0 0 8px var(--cyan),0 0 22px var(--cyan)}
.core{filter:drop-shadow(0 0 6px rgba(255,212,91,.5))}

.board-column{position:relative}
.board-column:before,.board-column:after{content:"";position:absolute;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(35px)}
.board-column:before{width:45%;height:35%;left:-10%;top:18%;background:rgba(0,215,255,.12)}
.board-column:after{width:48%;height:38%;right:-13%;bottom:12%;background:rgba(255,38,220,.10)}
.board-frame{
  padding:9px;border-radius:25px;
  background:
    linear-gradient(135deg,rgba(65,239,255,.18),transparent 19%,transparent 80%,rgba(255,66,220,.14)),
    linear-gradient(180deg,#102f55,#071225 68%,#0a1831);
  border:1px solid rgba(80,231,255,.48);
  box-shadow:
    0 0 0 1px rgba(83,231,255,.12),
    0 0 32px rgba(0,206,255,.18),
    0 32px 70px rgba(0,0,0,.38),
    inset 0 0 55px rgba(4,28,60,.78);
}
.board-frame:before{inset:4px;border-radius:20px;border-color:rgba(86,239,255,.48);box-shadow:inset 0 0 15px rgba(56,229,255,.13),0 0 15px rgba(56,229,255,.11)}
.board-frame:after{content:"";position:absolute;inset:10px;pointer-events:none;border-radius:14px;background:linear-gradient(115deg,rgba(255,255,255,.055),transparent 16%,transparent 84%,rgba(108,55,255,.04));mix-blend-mode:screen;z-index:2}
.board-frame>.three-canvas,.board-frame>.fallback-canvas{inset:9px;width:calc(100% - 18px);height:calc(100% - 18px);border-radius:16px;background:#01040a;box-shadow:inset 0 0 35px rgba(0,0,0,.8)}
.board-frame.three-ready>.three-canvas{filter:saturate(1.18) contrast(1.04)}
.renderer-badge{top:16px;right:16px;padding:6px 9px;border-color:#42e8ff70;background:linear-gradient(180deg,#041521e8,#020912e8);box-shadow:0 0 18px #1de1ff2d,inset 0 0 12px #0fdfff12;color:#b4f8ff}

.fx-layer{z-index:5}
.major-fx{font-size:clamp(30px,5.2vw,58px);font-style:italic;background:linear-gradient(180deg,#fff 0,#fff0ae 48%,#ff9c30 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 13px #ffb33a) drop-shadow(0 0 28px #ff3dbe)}
.combo-fx{font-size:clamp(23px,4.4vw,46px);font-style:italic;background:linear-gradient(180deg,#fff,#76f4ff 52%,#8a5cff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(60,226,255,.75))}
.chain-score{font-size:clamp(15px,2.3vw,25px);color:#ffe36a;text-shadow:0 0 13px #ffb900aa,0 3px 18px #000}
.fx-pop{animation:fxPopPremium .52s cubic-bezier(.12,.95,.22,1)}
@keyframes fxPopPremium{0%{opacity:0;transform:scale(.55) translateY(12px)}45%{opacity:1;transform:scale(1.16) translateY(-4px)}72%{transform:scale(.96)}100%{opacity:1;transform:scale(1)}}
.selection-hint{z-index:8;border-color:#63f1ff;background:#06111ef5;box-shadow:0 0 25px rgba(29,226,255,.38),inset 0 0 14px rgba(29,226,255,.08)}

.power{border-color:#23486f;background:linear-gradient(180deg,#0c1d34,#071221);box-shadow:inset 0 1px rgba(255,255,255,.035)}
.power:hover{border-color:#54e9ff;box-shadow:0 0 18px rgba(38,220,255,.10),inset 0 0 18px rgba(38,220,255,.05)}
.power em{background:linear-gradient(180deg,#17375d,#0b223d);box-shadow:inset 0 0 8px rgba(45,219,255,.08)}
.mobile-controls button{background:linear-gradient(180deg,#10233d,#071323);box-shadow:inset 0 1px rgba(255,255,255,.05),0 6px 18px rgba(0,0,0,.22)}
.mobile-controls button:active{transform:translateY(1px);box-shadow:inset 0 0 14px rgba(52,228,255,.14)}
.mobile-controls .accent{background:linear-gradient(135deg,#08708f,#083864);box-shadow:0 0 16px rgba(36,222,255,.12)}
.helpbar{color:#7792b8}.helpbar kbd{border-color:#31547e;background:#09172a;color:#d2faff}

.renderer-card:after{width:130px;height:130px;right:-52px;top:-52px;background:radial-gradient(circle,#28e6ff35,transparent 68%)}
.renderer-dot{background:#65ffbf;box-shadow:0 0 8px #65ffbf,0 0 22px #65ffbf}

@media(max-width:1080px){
  .game-layout{grid-template-columns:minmax(165px,205px) minmax(310px,585px) minmax(165px,205px);gap:12px}
  .panel-card{padding:11px}
}
@media(max-width:980px){
  .game-layout{grid-template-columns:minmax(165px,205px) minmax(310px,590px)}
}
@media(max-width:720px){
  .topbar{border-radius:14px;padding:9px 10px 11px}
  .board-frame{padding:7px;border-radius:20px}
  .board-frame>.three-canvas,.board-frame>.fallback-canvas{inset:7px;width:calc(100% - 14px);height:calc(100% - 14px)}
  .board-frame:after{inset:8px}
}
@media(prefers-reduced-motion:reduce){body:before,body:after,.stat:before{animation:none!important}}

/* ==========================================================
   V0.2.2 · RESPONSIVE FIT + REFERENCE-DRIVEN LAYOUT PASS
   ========================================================== */
:root{
  --shell-max: 1720px;
  --layout-gap: clamp(12px, 1.2vw, 20px);
  --side-w: clamp(220px, 14vw, 280px);
  --shell-pad-x: clamp(10px, 1.2vw, 18px);
  --shell-pad-y: clamp(10px, 1.2vw, 18px);
  --board-height-vh: calc(100dvh - 170px);
  --board-height-vw: calc((100vw - (2 * var(--shell-pad-x)) - (2 * var(--side-w)) - (2 * var(--layout-gap)) - 28px) * 18 / 8);
  --board-height: min(980px, var(--board-height-vh), var(--board-height-vw));
  --board-width: calc(var(--board-height) * 8 / 18);
}
html,body{min-height:100dvh}
body{overflow-x:hidden;overflow-y:auto}
.app-shell{
  width:min(var(--shell-max),100vw);
  min-height:100dvh;
  padding:var(--shell-pad-y) var(--shell-pad-x) 22px;
  display:flex;
  flex-direction:column;
  gap:clamp(10px,1vw,18px);
}
.topbar{
  margin:0;
  min-height:84px;
  align-items:center;
}
.topbar h1{font-size:clamp(30px,3.6vw,52px)}
.top-stats{gap:clamp(8px,.8vw,12px)}
.stat{min-width:clamp(90px,8vw,118px);padding:10px 12px}
.stat strong{font-size:clamp(18px,1.8vw,26px)}
.game-layout{
  display:grid;
  grid-template-columns:var(--side-w) var(--board-width) var(--side-w);
  gap:var(--layout-gap);
  justify-content:center;
  align-items:start;
  width:100%;
}
.side-panel{width:var(--side-w);gap:12px}
.panel-card{border-radius:20px;padding:14px}
.objective-card .objective b{font-size:13px}
.objective-card .objective small{font-size:11px}
.board-column{
  width:var(--board-width);
  min-width:0;
}
.board-frame{
  width:var(--board-width);
  height:var(--board-height);
  aspect-ratio:auto;
  margin:0 auto;
}
.board-frame>.three-canvas,
.board-frame>.fallback-canvas{image-rendering:auto}
.major-fx{font-size:clamp(30px,3.2vw,58px)}
.combo-fx{font-size:clamp(22px,2.9vw,44px)}
.chain-score{font-size:clamp(16px,1.7vw,26px)}
.power b{font-size:12px}.power small{font-size:10px}
.helpbar{padding:10px 4px 0}

/* Keep 1080p desktops perfectly fitted at browser zoom 100% */
@media (max-width: 1600px){
  :root{
    --side-w: clamp(205px, 13vw, 255px);
    --board-height-vh: calc(100dvh - 168px);
    --board-height-vw: calc((100vw - (2 * var(--shell-pad-x)) - (2 * var(--side-w)) - (2 * var(--layout-gap)) - 24px) * 18 / 8);
  }
}
@media (max-width: 1360px){
  :root{
    --side-w: clamp(190px, 12vw, 230px);
    --layout-gap: clamp(10px, 1vw, 16px);
    --board-height-vh: calc(100dvh - 162px);
    --board-height-vw: calc((100vw - (2 * var(--shell-pad-x)) - (2 * var(--side-w)) - (2 * var(--layout-gap)) - 20px) * 18 / 8);
  }
  .panel-card{padding:12px}
  .stat{min-width:84px}
}
@media (max-width: 1180px){
  :root{
    --side-w: clamp(175px, 17vw, 205px);
    --layout-gap: 12px;
    --board-height-vh: calc(100dvh - 156px);
    --board-height-vw: calc((100vw - (2 * var(--shell-pad-x)) - (2 * var(--side-w)) - (2 * var(--layout-gap)) - 18px) * 18 / 8);
  }
  .panel-card{padding:11px;border-radius:18px}
  .power{padding:8px}
}
@media (max-width: 980px){
  :root{
    --board-height: min(78dvh, 920px, calc((100vw - 26px) * 18 / 8));
    --board-width: calc(var(--board-height) * 8 / 18);
  }
  .game-layout{
    grid-template-columns:1fr;
    justify-items:center;
    gap:12px;
  }
  .board-column{order:1;width:min(100%,var(--board-width))}
  .board-frame{width:min(100%,var(--board-width));height:auto;aspect-ratio:8/18}
  .left-panel,.right-panel{
    width:min(100%,760px);
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .left-panel{order:2}
  .right-panel{order:3}
  .objective-card{grid-column:1/-1}
  .powers-card,.lab-card,.renderer-card{grid-column:1/-1}
  .helpbar{display:none}
  .mobile-controls{display:grid}
}
@media (max-width: 720px){
  :root{
    --board-height: min(72dvh, calc((100vw - 20px) * 18 / 8));
    --board-width: calc(var(--board-height) * 8 / 18);
  }
  .app-shell{padding:8px 8px 16px}
  .topbar{
    padding:10px;
    gap:10px;
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .topbar h1{font-size:clamp(26px,8vw,40px)}
  .top-stats{width:100%;justify-content:space-between}
  .stat{flex:1;min-width:0;padding:8px 10px}
  .left-panel,.right-panel{width:100%;grid-template-columns:1fr 1fr}
  .board-column{width:100%}
  .board-frame{width:100%;max-width:min(100vw - 16px,var(--board-width))}
}
@media (max-width: 480px){
  :root{
    --board-height: min(68dvh, calc((100vw - 16px) * 18 / 8));
    --board-width: calc(var(--board-height) * 8 / 18);
  }
  .topbar{border-radius:14px}
  .eyebrow{font-size:9px;letter-spacing:.16em}
  .topbar h1{font-size:clamp(22px,8.5vw,34px)}
  .top-stats .stat:nth-child(2){display:block}
  .left-panel,.right-panel{grid-template-columns:1fr}
  .compact,.renderer-card,.powers-card,.lab-card,.objective-card{grid-column:auto}
  .panel-card{padding:10px;border-radius:16px}
  .mobile-controls{grid-template-columns:repeat(3,1fr)}
}

/* ==========================================================
   V0.2.6 · SNAPPY SPAWN + 0.90 S FLOATING MESSAGE FX
   Mensajes: suben y se desvanecen en 900 ms por defecto.
   ========================================================== */
.major-fx,.combo-fx,.chain-score{
  will-change:transform,opacity;
  pointer-events:none;
}
.fx-pop{
  animation:fxRiseFade var(--fx-ms,900ms) cubic-bezier(.18,.72,.24,1) both !important;
}
@keyframes fxRiseFade{
  0%{opacity:0;transform:translateY(14px) scale(.88)}
  10%{opacity:1;transform:translateY(0) scale(1.05)}
  34%{opacity:.95;transform:translateY(-14px) scale(1.02)}
  62%{opacity:.68;transform:translateY(-34px) scale(1)}
  82%{opacity:.32;transform:translateY(-50px) scale(.98)}
  100%{opacity:0;transform:translateY(-64px) scale(.96)}
}

/* ==========================================================
   V0.2.7 · STYLE PICKER + FASTER MESSAGE RISE
   ========================================================== */
.style-picker{display:grid;gap:6px;margin-top:10px}
.style-picker label{font-size:11px;font-weight:800;color:#cfefff;letter-spacing:.08em;text-transform:uppercase}
.style-picker select{
  width:100%;border-radius:12px;border:1px solid #54e8ff55;background:#071423;color:#eaffff;
  padding:10px 12px;font-weight:800;outline:none;box-shadow:inset 0 0 0 1px #ffffff08,0 0 14px #00c8ff10;
}
.style-picker select:focus{border-color:#6cf0ff;box-shadow:0 0 0 2px #47dcff22, 0 0 20px #12dfff22}
.style-picker small{font-size:10px;color:#90a6bd;line-height:1.35}

/* Mensajes: suben más rápido pero siguen desvaneciéndose en .90s */
.fx-pop{
  animation:fxRiseFadeFast var(--fx-ms,900ms) cubic-bezier(.16,.76,.22,1) both !important;
}
@keyframes fxRiseFadeFast{
  0%{opacity:0;transform:translateY(16px) scale(.90)}
  8%{opacity:1;transform:translateY(-4px) scale(1.05)}
  20%{opacity:1;transform:translateY(-24px) scale(1.03)}
  42%{opacity:.88;transform:translateY(-48px) scale(1.0)}
  68%{opacity:.52;transform:translateY(-68px) scale(.985)}
  100%{opacity:0;transform:translateY(-92px) scale(.965)}
}

/* ==========================================================
   V0.2.9 · MOBILE AUDIO PASS
   ========================================================== */
.audio-toggle{
  position:absolute;left:210px;bottom:12px;z-index:8;
  border:1px solid #42e8ff66;background:linear-gradient(180deg,#0b2033,#06111d);
  color:#dffaff;border-radius:999px;padding:7px 11px;font-size:9px;font-weight:900;
  letter-spacing:.09em;cursor:pointer;box-shadow:0 0 16px #25dfff18,inset 0 1px #ffffff12;
}
.audio-toggle:hover{border-color:#79f2ff;box-shadow:0 0 20px #25dfff2e}
.audio-toggle.muted{color:#8298ad;border-color:#516375;background:#08101a}
.audio-settings{display:grid;gap:7px;margin-top:9px;padding-top:8px;border-top:1px solid #ffffff0c}
.audio-settings label{display:grid;grid-template-columns:54px 1fr;gap:7px;align-items:center;color:#9eb9d3;font-size:9px;font-weight:800}
.audio-settings input[type="range"]{width:100%;accent-color:#42e8ff;min-width:0}
.audio-settings small{font-size:8px;color:#6f8aa6;line-height:1.35}

@media(max-width:720px){
  .audio-toggle{left:auto;right:9px;bottom:7px;padding:6px 9px;font-size:8px}
}

/* ==========================================================
   R15 · EVENTOS DE PRESENTACION
   No altera el layout base; aparece solamente durante eventos.
   ========================================================== */
.board-frame{isolation:isolate}
.presentation-event-stage{
  position:absolute;inset:0;z-index:28;pointer-events:none;overflow:hidden;
  display:flex;justify-content:center;align-items:center;padding:12%;
}
.presentation-event{
  width:min(92%,420px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;
  opacity:0;transform:translateY(18px) scale(.92);will-change:transform,opacity,filter;
  text-transform:uppercase;filter:drop-shadow(0 5px 18px #000d);
}
.presentation-event.show{animation:eventRiseFade var(--event-ms,900ms) cubic-bezier(.16,.76,.22,1) both}
.presentation-event strong{
  font-size:clamp(20px,5vw,42px);font-weight:1000;line-height:.98;letter-spacing:.035em;
  color:#fff;text-shadow:0 0 7px currentColor,0 0 22px currentColor,0 4px 15px #000;
}
.presentation-event span{
  font-size:clamp(12px,2.3vw,19px);font-weight:900;letter-spacing:.12em;color:#d8fbff;
  text-shadow:0 0 11px #20dfff,0 3px 8px #000;
}
.presentation-event-number strong,.presentation-event-core strong{color:#78f5ff}
.presentation-event-first-million strong,.presentation-event-perfect strong{color:#ffe66d}
.presentation-event-record strong{color:#ff7ce7}
.presentation-event-world strong{color:#8cffb7}
.presentation-event-objective strong{color:#fff}
@keyframes eventRiseFade{
  0%{opacity:0;transform:translateY(24px) scale(.88);filter:blur(2px) drop-shadow(0 5px 18px #000d)}
  8%{opacity:1;transform:translateY(-3px) scale(1.05);filter:blur(0) drop-shadow(0 5px 18px #000d)}
  23%{opacity:1;transform:translateY(-27px) scale(1.02)}
  55%{opacity:.78;transform:translateY(-56px) scale(1)}
  78%{opacity:.36;transform:translateY(-76px) scale(.98)}
  100%{opacity:0;transform:translateY(-96px) scale(.96)}
}
.result-event-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:-5px 0 14px}
.result-event-chip{
  border:1px solid #43e8ff66;background:#071529d9;color:#c9faff;border-radius:999px;padding:6px 10px;
  font-size:9px;font-weight:950;letter-spacing:.09em;text-transform:uppercase;box-shadow:inset 0 0 12px #0adfff10,0 0 10px #00dfff0d;
}
.result-event-chip.perfect{border-color:#ffe06b99;color:#ffe978;box-shadow:0 0 14px #ffc4001c}
.result-event-chip.record{border-color:#ff72dd88;color:#ff9be8}
.result-event-chip.world{border-color:#66ffad88;color:#9affc4}
@media(max-width:700px){
  .presentation-event-stage{padding:8%}
  .presentation-event strong{font-size:clamp(18px,7vw,34px)}
  .presentation-event span{font-size:clamp(10px,3.6vw,15px)}
  .result-event-strip{gap:5px;margin-bottom:10px}.result-event-chip{font-size:8px;padding:5px 8px}
}