@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Space+Mono:wght@400;700&display=swap');

/* Palette (3 inks + black/white only):
   --pk #ff2e88 neon magenta · --cy #22e6ff electric cyan · --am #ffb02e sunset amber
   --bk #0b0714 night black · --wt #fff6ec signal white */
:root{
  --pk:#ff2e88; --cy:#22e6ff; --am:#ffb02e;
  --bk:#0b0714; --wt:#fff6ec;
  --panel:rgba(11,7,20,.82);
  --line:rgba(255,246,236,.16);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bk); color:var(--wt);
  font-family:'Space Mono',ui-monospace,monospace;
  min-height:100vh; overflow-x:hidden;
  background-image:linear-gradient(180deg,rgba(11,7,20,0) 0%,rgba(11,7,20,.55) 62%,rgba(11,7,20,.95) 100%);
}

/* --- sky --- */
.sky{position:fixed;inset:0 0 auto 0;height:46vh;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(11,7,20,0) 0%,rgba(255,46,136,.14) 55%,rgba(255,176,46,.12) 100%);}
.stars{position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,246,236,.9) 1px,transparent 1.4px);
  background-size:64px 48px,96px 72px;background-position:0 0,32px 24px;opacity:.35;
  mask-image:linear-gradient(180deg,#000 0%,transparent 75%);}
.sun{
  position:absolute;left:50%;top:5vh;translate:-50% 0;pointer-events:auto;cursor:pointer;
  width:min(200px,44vw);aspect-ratio:1;border-radius:50%;border:0;
  background:linear-gradient(180deg,var(--am) 0%,var(--pk) 78%);
  box-shadow:0 0 60px rgba(255,46,136,.55),0 0 140px rgba(255,176,46,.28);
}
.sun::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-linear-gradient(180deg,transparent 0 12px,rgba(11,7,20,.85) 12px 16px,transparent 16px 30px);
  background-position-y:38%;}
.sun-glow{position:absolute;left:50%;top:5vh;translate:-50% 0;width:min(320px,70vw);aspect-ratio:1.4;
  background:radial-gradient(ellipse at center,rgba(255,46,136,.28),transparent 65%);filter:blur(6px);}
.sun:active{transform:scale(.96)}

.scanlines{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(11,7,20,.35) 3px 4px);}
.vignette{position:fixed;inset:0;z-index:39;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(11,7,20,.6) 100%);}

/* --- header / hud --- */
.top{position:relative;z-index:2;text-align:center;padding:26px 16px 6px}
.kicker{font-size:11px;letter-spacing:.35em;color:var(--cy);text-shadow:0 0 12px rgba(34,230,255,.8);margin:0 0 8px}
h1{font-family:Orbitron,sans-serif;font-weight:900;font-size:clamp(30px,6vw,54px);margin:0;letter-spacing:.04em;
  text-transform:uppercase;color:var(--wt);text-shadow:0 0 18px rgba(255,46,136,.65),0 0 60px rgba(255,46,136,.3);}
h1 span{background:linear-gradient(90deg,var(--cy),var(--pk));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(34,230,255,.5));}
.sub{margin:10px auto 0;max-width:60ch;font-size:13px;color:rgba(255,246,236,.78)}

.hud{position:relative;z-index:2;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:14px 12px 2px}
.meter{min-width:118px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 14px;text-align:center;
  box-shadow:0 0 0 1px rgba(11,7,20,.6),0 0 22px rgba(34,230,255,.12);backdrop-filter:blur(4px)}
.meter b{display:block;font-family:Orbitron,sans-serif;font-size:20px;color:var(--am);text-shadow:0 0 12px rgba(255,176,46,.7)}
.meter i{font-style:normal;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,246,236,.6)}
.chargebar{height:5px;margin-top:7px;border-radius:3px;background:rgba(255,246,236,.14);overflow:hidden}
.chargebar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cy),var(--pk));
  box-shadow:0 0 10px rgba(255,46,136,.8);transition:width .12s}

/* --- layout --- */
.layout{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:14px;
  max-width:1060px;margin:0 auto;padding:10px 14px 8px}
@media (max-width:820px){.layout{grid-template-columns:1fr}}
.board-wrap{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:10px;
  box-shadow:0 0 40px rgba(255,46,136,.14),inset 0 0 60px rgba(11,7,20,.6)}
#board{display:block;width:100%;height:auto;border-radius:10px;touch-action:none;cursor:crosshair}
.hint{font-size:12px;color:rgba(255,246,236,.72);margin:10px 4px 8px}
.hint b{color:var(--cy)} .hint b:last-child{color:var(--am)}
.board-actions{display:flex;gap:8px;flex-wrap:wrap;padding:0 2px 4px}
.btn{font-family:Orbitron,sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  border-radius:9px;padding:9px 14px;cursor:pointer;border:1px solid var(--line);
  background:transparent;color:var(--wt);transition:transform .08s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost:hover{box-shadow:0 0 16px rgba(34,230,255,.4);border-color:var(--cy)}
.btn.primary{background:linear-gradient(90deg,var(--pk),var(--am));border:0;color:var(--bk);font-weight:700;
  box-shadow:0 0 22px rgba(255,46,136,.55)}
.btn.primary:hover{box-shadow:0 0 32px rgba(255,176,46,.7)}

.side{display:flex;flex-direction:column;gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.card h2{font-family:Orbitron,sans-serif;font-size:13px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--cy);text-shadow:0 0 10px rgba(34,230,255,.6);margin:0 0 8px}
.log{list-style:none;margin:0;padding:0;max-height:220px;overflow:auto;font-size:12px}
.log li{padding:5px 2px;border-bottom:1px dashed rgba(255,246,236,.14)}
.log li b{color:var(--am)}
.log .t{color:rgba(255,246,236,.45);margin-right:6px}
.legend ul{list-style:none;margin:0;padding:0;font-size:12px;display:grid;gap:6px}
.sw{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:8px;vertical-align:-2px}
.sw.d0{background:rgba(255,46,136,.5);box-shadow:0 0 8px rgba(255,46,136,.8)}
.sw.d1{background:rgba(34,230,255,.5);box-shadow:0 0 8px rgba(34,230,255,.8)}
.sw.d2{background:rgba(255,176,46,.55);box-shadow:0 0 8px rgba(255,176,46,.8)}
.sw.fog{background:repeating-linear-gradient(45deg,rgba(255,246,236,.7) 0 2px,rgba(11,7,20,.9) 2px 5px)}
.tiny{font-size:11.5px;color:rgba(255,246,236,.62);line-height:1.6}

/* --- floor grid --- */
.floor{position:fixed;left:-20vw;right:-20vw;bottom:-6vh;height:26vh;z-index:1;pointer-events:none;opacity:.8;
  background-image:linear-gradient(rgba(34,230,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(34,230,255,.35) 1px,transparent 1px);
  background-size:44px 44px;transform:perspective(320px) rotateX(62deg);transform-origin:top center;
  mask-image:linear-gradient(180deg,#000 30%,transparent 95%);
  animation:floorScroll 6s linear infinite}
@keyframes floorScroll{to{background-position-y:44px}}
.foot{position:relative;z-index:2;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;
  max-width:1060px;margin:0 auto;padding:14px 16px 30px;font-size:11px;color:rgba(255,246,236,.5);letter-spacing:.08em}
.psst{color:rgba(255,176,46,.75)}

/* --- overlays --- */
.overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:18px;
  background:rgba(11,7,20,.72);backdrop-filter:blur(3px)}
.overlay.hidden{display:none}
.panel{max-width:520px;width:100%;background:rgba(11,7,20,.94);border:1px solid rgba(34,230,255,.5);border-radius:16px;
  padding:24px;box-shadow:0 0 60px rgba(255,46,136,.35)}
.panel h2{font-family:Orbitron,sans-serif;margin:4px 0 10px;color:var(--wt)}
.panel ol{font-size:13px;line-height:1.7;color:rgba(255,246,236,.85);padding-left:20px}
.panel ol b{color:var(--am)}
.win{border-color:rgba(255,176,46,.6);box-shadow:0 0 70px rgba(255,176,46,.4)}
.egg{border-color:var(--pk);box-shadow:0 0 80px rgba(255,46,136,.6);text-align:center}
.ascii{font-size:10px;line-height:1.5;color:var(--cy);text-shadow:0 0 10px rgba(34,230,255,.7);overflow-x:auto}
.row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}

/* night-drive easter egg mode */
body.night-drive h1{text-shadow:0 0 18px rgba(34,230,255,.9),0 0 70px rgba(255,46,136,.5)}
body.night-drive .sun{box-shadow:0 0 80px rgba(34,230,255,.8),0 0 160px rgba(255,46,136,.4)}

.toast{position:fixed;left:50%;bottom:22px;translate:-50% 0;z-index:70;background:rgba(11,7,20,.95);
  border:1px solid var(--am);color:var(--wt);font-size:12px;border-radius:10px;padding:9px 16px;
  box-shadow:0 0 24px rgba(255,176,46,.5);opacity:0;pointer-events:none;transition:opacity .25s}
.toast.show{opacity:1}

@media (max-width:420px){
  .meter{min-width:calc(50% - 14px);padding:6px 8px}
  .meter b{font-size:17px}
  .top{padding-top:18px}
}