:root{
  --bg:#071013;--panel:#0d1b20e8;--panel2:#13272d;--line:#294850;
  --text:#effff9;--muted:#9bb3b4;--mint:#6df2ce;--gold:#ffd166;
  --coral:#ff7b72;--blue:#72d5ff;--shadow:0 20px 60px #0007;
}
*{box-sizing:border-box}
html,body{min-height:100%;overscroll-behavior:none}
body{margin:0;color:var(--text);background:radial-gradient(circle at 20% 0,#15423b66,transparent 30%),radial-gradient(circle at 90% 12%,#6e4c1c55,transparent 28%),linear-gradient(180deg,#061014,#09161a 55%,#050b0d);font-family:Inter,ui-rounded,"Trebuchet MS","Segoe UI",sans-serif}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
.shell{width:min(1540px,100%);margin:auto;padding:clamp(.65rem,2vw,1.2rem)}
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;margin-bottom:1rem}
.home,.iconBtn,.version{border:1px solid #ffffff18;background:#ffffff09;color:var(--text);border-radius:999px;box-shadow:0 8px 24px #0004}
.home{justify-self:start;padding:.62rem .85rem;text-decoration:none;font-weight:800}
.brand{text-align:center;text-transform:uppercase;letter-spacing:.1em}.brand strong{display:block;font-size:clamp(1.45rem,4vw,3rem);line-height:1;text-shadow:0 0 26px #6df2ce2b}.brand span{display:block;color:var(--muted);font-size:.74rem;margin-top:.32rem}
.topActions{justify-self:end;display:flex;align-items:center;gap:.45rem}.iconBtn{width:2.65rem;height:2.65rem;padding:0;cursor:pointer}.version{padding:.54rem .7rem;color:var(--muted);font:700 .72rem/1 ui-monospace,monospace}
.soundBtn{font:900 .62rem/1 ui-monospace,monospace;letter-spacing:.04em}
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.65rem;margin-bottom:.75rem}.stats>div{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.66rem .8rem;border:1px solid #ffffff14;border-radius:14px;background:#0b171bd9;box-shadow:0 8px 26px #0003}.stats span{color:var(--muted);font-size:.73rem;text-transform:uppercase;letter-spacing:.08em}.stats b{font-size:1.04rem}.stats>div:last-child b{color:var(--coral);letter-spacing:.16em}
.gameLayout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:.85rem;align-items:start}.stageColumn{min-width:0}.missionBar{display:grid;grid-template-columns:auto auto minmax(220px,1fr) minmax(180px,auto);align-items:center;gap:1rem;padding:.7rem .85rem;margin-bottom:.65rem;border:1px solid #ffffff16;border-radius:16px;background:#0c1b20e8;box-shadow:var(--shadow)}
.targetRow{display:flex;align-items:center;gap:.65rem}.targetRow small{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.65rem}.targetRow b{display:block;margin-top:.12rem}.swatch{width:40px;height:40px;border-radius:13px;border:1px solid #ffffff26;box-shadow:inset 0 1px #ffffff26,0 0 18px #0007}
.meterGroup span{display:flex;justify-content:space-between;gap:1rem;font-size:.78rem;margin-bottom:.35rem}.meterGroup i{font-style:normal;color:var(--muted)}.meter{height:11px;overflow:hidden;border-radius:999px;background:#ffffff12;border:1px solid #ffffff10}.meter>i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--coral),var(--gold) 48%,var(--mint));transition:width .12s linear}
.status{text-align:right;color:#dffcf5;font:700 .78rem/1.25 ui-monospace,monospace;max-width:25ch}
.paintBtn{display:flex;align-items:center;gap:.45rem;border:1px solid #6df2ce40;border-radius:999px;padding:.58rem .7rem;color:var(--text);background:#6df2ce12;font-weight:900;cursor:pointer}.paintBtn kbd{height:1.3rem;min-width:1.3rem;border-bottom-width:2px}.paintBtn:hover{background:#6df2ce22}
.canvasFrame{position:relative;overflow:hidden;border:1px solid #ffffff1c;border-radius:20px;background:#050b0d;box-shadow:var(--shadow);aspect-ratio:16/9;isolation:isolate}.canvasFrame canvas{display:block;width:100%;height:100%;touch-action:none}.overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:1rem;background:radial-gradient(circle,#07131655,#071316e8 78%);backdrop-filter:blur(4px)}.overlay.hidden{display:none}.overlayCard{width:min(560px,96%);max-height:96%;overflow:auto;padding:clamp(1rem,3vw,1.6rem);border:1px solid #ffffff21;border-radius:22px;background:linear-gradient(180deg,#142a2fee,#09171bee);box-shadow:0 28px 80px #0009}.kicker{color:var(--mint);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.13em}.overlayCard h1{margin:.4rem 0 .6rem;font-size:clamp(1.8rem,6vw,3.3rem);line-height:.95}.overlayCard p{margin:0;color:#cde0dc;line-height:1.5}.tips{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:1rem 0}.tips span{padding:.58rem .65rem;border-radius:11px;background:#ffffff08;color:#c9dcd8;font-size:.82rem}.tips b{display:block;color:var(--text);margin-bottom:.15rem}.overlayActions{display:flex;gap:.55rem;flex-wrap:wrap}.primary,.secondary,.touchActions button{border:0;border-radius:999px;padding:.78rem 1rem;font-weight:900;cursor:pointer}.primary{color:#041410;background:linear-gradient(180deg,#83f7d8,#55dbb8);box-shadow:0 10px 28px #55dbb830}.secondary{color:var(--text);background:#ffffff11;border:1px solid #ffffff1c}.secondary[hidden]{display:none}
.sidePanel{display:flex;flex-direction:column;gap:.7rem}.box{padding:.9rem;border:1px solid #ffffff14;border-radius:17px;background:linear-gradient(180deg,#102126e6,#09161ae8);box-shadow:0 12px 34px #0004}.box h2{margin:0 0 .65rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.09em}.box ol{margin:0;padding-left:1.15rem;color:#c5d8d4;font-size:.84rem;line-height:1.48}.box li+li{margin-top:.35rem}.boxTitle{display:flex;justify-content:space-between;gap:1rem;align-items:center}.boxTitle span{color:var(--gold);font:700 .72rem ui-monospace,monospace}.seekerList{display:flex;flex-direction:column;gap:.48rem}.seeker{padding:.6rem .65rem;border-radius:12px;background:#ffffff08;border:1px solid #ffffff10}.seekerTop{display:flex;justify-content:space-between;gap:.5rem;font-size:.77rem;margin-bottom:.3rem}.seekerTop span{color:var(--muted)}.seekerTop .warn{color:var(--gold)}.seekerTop .bad{color:var(--coral)}.seeker .meter{height:7px}.compact{padding:.8rem}.keyGrid{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;color:#b9cfcb;font-size:.76rem}.keyGrid span{display:flex;align-items:center;gap:.35rem}kbd{display:inline-grid;place-items:center;min-width:1.8rem;height:1.6rem;padding:0 .3rem;border:1px solid #ffffff20;border-bottom-width:3px;border-radius:6px;background:#ffffff0c;color:var(--text);font:700 .68rem ui-monospace,monospace}
.touchControls{display:none;position:absolute;z-index:5;inset:auto 0 0;align-items:flex-end;justify-content:space-between;padding:1rem;pointer-events:none}.stick{position:relative;width:104px;height:104px;border:1px solid #ffffff29;border-radius:50%;background:#0610148c;pointer-events:auto;touch-action:none}.stick i{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px;border-radius:50%;background:#dffcf5cc;box-shadow:0 0 24px #6df2ce55;transform:translate(0,0)}.touchActions{display:grid;grid-template-columns:repeat(2,auto);gap:.45rem;pointer-events:auto}.touchActions button{min-width:70px;min-height:46px;padding:.6rem .72rem;color:#061014;background:#d8eee8df;font-size:.72rem;touch-action:none}.touchActions button:nth-child(-n+2){background:#69e9c8}.touchActions button.active{background:var(--gold);transform:scale(.96)}
.paintOverlay{position:absolute;z-index:12;inset:0;display:grid;place-items:center;padding:.7rem;background:#041013ed;backdrop-filter:blur(5px)}.paintOverlay.hidden{display:none}.paintStudio{width:min(790px,98%);max-height:98%;overflow:auto;border:1px solid #ffffff22;border-radius:22px;padding:1rem;background:linear-gradient(180deg,#142a2f,#08171b);box-shadow:0 28px 80px #000a}.paintStudio header{display:flex;align-items:start;justify-content:space-between;gap:1rem}.paintStudio h2{margin:.25rem 0 0;font-size:clamp(1.35rem,4vw,2rem)}.paintStudio>p{margin:.5rem 0 .8rem;color:#c5d9d4;line-height:1.4}.paintClose{width:2.45rem;height:2.45rem;border:1px solid #ffffff20;border-radius:50%;color:var(--text);background:#ffffff0b;font-size:1.5rem;cursor:pointer}.paintWorkspace{display:grid;grid-template-columns:minmax(260px,1fr) minmax(230px,.8fr);gap:1rem}.paintCanvasWrap{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.7rem;border:1px solid #ffffff12;border-radius:16px;background:#061014}.paintCanvasWrap canvas{display:block;width:min(100%,300px);max-height:52vh;aspect-ratio:3/4;border-radius:18px;cursor:crosshair;touch-action:none;background-color:#142328;background-image:linear-gradient(45deg,#ffffff0c 25%,transparent 25%),linear-gradient(-45deg,#ffffff0c 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ffffff0c 75%),linear-gradient(-45deg,transparent 75%,#ffffff0c 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.paintCanvasWrap>span{color:var(--muted);font-size:.7rem;text-align:center}.paintTools{display:flex;flex-direction:column;gap:.75rem}.activePaint{display:flex;align-items:center;gap:.6rem}.activePaint small,.paintTools>div>small{display:block;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}.activePaint b{display:block;margin-top:.15rem}.paintTools label{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem}.paintTools input[type=range]{width:100%;accent-color:var(--mint)}.toolButtons{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.tool{border:1px solid #ffffff18;border-radius:10px;padding:.58rem;color:var(--text);background:#ffffff0b;font-weight:800;cursor:pointer}.tool.active{color:#061014;background:var(--mint)}.tool.danger{color:#ffb1ab}.paintPalette{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.45rem}.paletteColor{width:34px;height:34px;border:2px solid #ffffff25;border-radius:10px;cursor:pointer}.paletteColor.active{outline:2px solid var(--mint);outline-offset:2px}.paintQuality{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}.paintQuality span{padding:.55rem;border-radius:10px;background:#ffffff09;color:var(--muted);font-size:.72rem}.paintQuality b{display:block;color:var(--text);font-size:1.05rem}.paintTools>.primary{margin-top:auto}
button:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:3px}.iconBtn:hover,.home:hover,.secondary:hover{background:#ffffff14}.primary:hover{filter:brightness(1.05)}
@media(max-width:1050px){.gameLayout{grid-template-columns:1fr}.sidePanel{display:grid;grid-template-columns:1fr 1fr}.sidePanel .compact{grid-column:span 2}}
@media(max-width:760px){.shell{padding:.55rem}.topbar{grid-template-columns:auto 1fr auto;gap:.5rem}.brand{text-align:left}.brand span{display:none}.home{font-size:0;width:2.65rem;height:2.65rem;padding:0;display:grid;place-items:center}.home::after{content:"←";font-size:1.2rem}.version{display:none}.stats{grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}.stats>div{display:block;min-width:0;padding:.52rem .6rem}.stats b{display:block;margin-top:.12rem}.missionBar{grid-template-columns:auto auto 1fr;padding:.55rem;gap:.55rem}.paintBtn{font-size:.75rem}.paintBtn kbd{display:none}.status{display:none}.canvasFrame{border-radius:14px}.sidePanel{grid-template-columns:1fr}.sidePanel .compact{grid-column:auto}.tips{grid-template-columns:1fr}.touchControls{display:flex}.overlay{padding:.5rem}.overlayCard{max-height:98%;padding:.9rem}.overlayCard h1{margin:.25rem 0 .4rem}.tips{gap:.32rem;margin:.65rem 0}.tips span{padding:.42rem .5rem}.box ol{font-size:.8rem}.paintWorkspace{grid-template-columns:1fr}.paintCanvasWrap canvas{width:min(68vw,240px);max-height:40vh}.paintTools{gap:.5rem}.paintStudio{padding:.75rem}.paintStudio>p{font-size:.8rem}.paintQuality{display:none}}
@media(pointer:coarse){.touchControls{display:flex}.canvasFrame{min-height:56vw}}
@media(max-width:480px){.iconBtn{width:2.4rem;height:2.4rem}.topActions{gap:.3rem}.stats{gap:.35rem}.stats>div{min-width:72px}.swatch{width:34px;height:34px}.missionBar{margin-bottom:.4rem}.meterGroup span{font-size:.68rem}.touchControls{padding:.6rem}.stick{width:90px;height:90px}.touchActions button{min-width:62px;min-height:42px}.sidePanel{margin-top:.25rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
body.painting{overflow:hidden}
.paintCanvasWrap canvas{width:min(100%,250px);max-height:40vh}
@media(max-width:760px){.paintOverlay{position:fixed;z-index:100;padding:.45rem}.paintStudio{width:100%;max-height:calc(100dvh - .9rem)}.paintCanvasWrap canvas{width:min(68vw,220px);max-height:35vh}}