:root{
  --neon-green:#39ff14;
  --neon-cyan:#00e5ff;
  --neon-mag:#ff2e97;
  --amber:#ffaa00;
  --bg:#05000f;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:radial-gradient(circle at 50% 30%,#160830,#05000f 70%);
  font-family:'VT323',monospace;
  color:#e8e0ff;
  display:flex;flex-direction:column;
  min-height:100vh;
  overflow:hidden;
  user-select:none;
}

/* CRT bezel */
#crt-frame{
  flex:1;
  margin:10px;
  border-radius:26px;
  background:linear-gradient(145deg,#1a1a20,#0a0a0e);
  padding:14px;
  box-shadow:0 0 0 3px #000, inset 0 0 30px rgba(0,0,0,0.9), 0 20px 60px rgba(0,0,0,0.8);
  position:relative;
}
#crt-frame::before,#crt-frame::after{
  content:'';position:absolute;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(#333,#000);top:12px;
}
#crt-frame::before{left:12px;} #crt-frame::after{right:12px;}

#screen{
  position:relative;width:100%;height:100%;
  border-radius:18px;overflow:hidden;
  background:#05000f;
  box-shadow:inset 0 0 80px rgba(0,0,0,0.9);
  animation:flicker 6s infinite;
}
/* barrel/bulge + chromatic feel */
#screen::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:18px;
  box-shadow:inset 0 0 120px rgba(60,20,120,0.25);
  z-index:60;
}
@keyframes flicker{
  0%,100%{filter:brightness(1);}
  47%{filter:brightness(1.02);}
  48%{filter:brightness(0.94);}
  49%{filter:brightness(1.03);}
  92%{filter:brightness(1);}
}

canvas{position:absolute;inset:0;width:100%;height:100%;}
#game{z-index:1;filter:saturate(1.3) contrast(1.05);}
#fx{z-index:50;pointer-events:none;}
/* chromatic aberration on game canvas */
#game{ image-rendering:pixelated; }
#screen{ text-shadow:none; }

/* HUD */
#hud-top{
  position:absolute;top:0;left:0;right:0;z-index:55;
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 12px;font-size:19px;letter-spacing:1px;
  background:linear-gradient(180deg,rgba(0,0,0,0.6),transparent);
  text-shadow:0 0 6px currentColor;
  pointer-events:none;
}
#seed-label{color:var(--amber);}
#turn-label{color:var(--neon-cyan);}
#rec{color:#ff4455;display:flex;align-items:center;gap:4px;}
#rec .dot{animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0.15;}}

#title-glyph{
  position:absolute;top:34px;left:50%;transform:translateX(-50%);
  z-index:54;font-family:'Press Start 2P',monospace;font-size:14px;
  color:var(--neon-green);text-shadow:0 0 10px var(--neon-green),0 0 24px rgba(57,255,20,0.5);
  pointer-events:none;opacity:0.85;
}

/* unit panel */
#unit-panel{
  position:absolute;left:8px;right:8px;bottom:60px;z-index:56;
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,rgba(10,2,30,0.85),rgba(30,10,60,0.85));
  border:1px solid var(--neon-mag);border-radius:8px;padding:8px;
  box-shadow:0 0 18px rgba(255,46,151,0.4);
  transition:transform .25s;
}
#unit-panel.hidden{transform:translateY(160%);}
#unit-portrait{width:52px;height:52px;image-rendering:pixelated;border:1px solid #444;background:#000;border-radius:4px;}
#unit-info{flex:1;min-width:0;}
#unit-name{font-size:22px;font-family:'Press Start 2P',monospace;font-size:12px;text-shadow:0 0 8px currentColor;}
.hpbar{height:8px;background:#220a33;border:1px solid #55336a;border-radius:2px;margin:5px 0;overflow:hidden;}
#unit-hp{height:100%;width:100%;transition:width .3s;box-shadow:0 0 8px currentColor;}
#unit-stats{font-size:17px;color:#b8a8d8;letter-spacing:1px;}
#unit-actions{display:flex;gap:4px;flex-direction:column;}

/* buttons */
.btn{
  font-family:'VT323',monospace;font-size:18px;letter-spacing:1px;
  padding:6px 12px;cursor:pointer;
  background:#1a0a2e;color:var(--neon-cyan);
  border:1px solid var(--neon-cyan);border-radius:5px;
  text-shadow:0 0 6px currentColor;
  transition:all .1s;
}
.btn:active{transform:scale(0.94);background:var(--neon-cyan);color:#000;}
.btn.primary{border-color:var(--neon-green);color:var(--neon-green);}
.btn.primary:active{background:var(--neon-green);color:#000;}
.btn.ghost{border-color:#664488;color:#b09ad0;font-size:16px;padding:6px 10px;}
.btn.big{font-size:22px;padding:12px 24px;margin:6px;}

#bottom-bar{
  position:absolute;bottom:6px;left:0;right:0;z-index:56;
  display:flex;gap:6px;justify-content:center;align-items:center;
  padding:0 8px;flex-wrap:wrap;
}
#endturn-btn{margin-left:auto;}

/* briefing */
.briefing{
  position:absolute;top:58px;left:8px;right:8px;z-index:57;
  color:var(--neon-green);font-size:20px;letter-spacing:1px;
  text-shadow:0 0 8px var(--neon-green);
  background:rgba(0,0,0,0.5);padding:4px 8px;border-left:3px solid var(--neon-green);
  transition:opacity .5s;text-align:center;
}
.briefing.hidden{opacity:0;}

/* modal */
.modal{
  position:absolute;inset:0;z-index:80;
  display:none;align-items:center;justify-content:center;
  background:rgba(3,0,10,0.9);
  padding:20px;text-align:center;
}
.modal.open{display:flex;}
.modal-inner{max-width:420px;width:100%;}
.modal h1{
  font-family:'Press Start 2P',monospace;font-size:22px;margin-bottom:8px;
  color:var(--neon-cyan);text-shadow:0 0 16px var(--neon-cyan);
}
.glitch{position:relative;}
.glitch::before,.glitch::after{
  content:attr(data-t);position:absolute;left:0;top:0;width:100%;
}
.glitch::before{color:var(--neon-mag);animation:gl1 2s infinite;clip-path:inset(0 0 55% 0);}
.glitch::after{color:var(--neon-green);animation:gl2 2.4s infinite;clip-path:inset(55% 0 0 0);}
@keyframes gl1{0%,100%{transform:translate(0);}20%{transform:translate(-3px,1px);}40%{transform:translate(2px,-1px);}}
@keyframes gl2{0%,100%{transform:translate(0);}30%{transform:translate(3px,1px);}60%{transform:translate(-2px,-1px);}}
.glitch.win{color:var(--neon-green);text-shadow:0 0 20px var(--neon-green);}
.glitch.lose{color:#ff3355;text-shadow:0 0 20px #ff3355;}
.sub{font-size:20px;color:var(--amber);letter-spacing:2px;margin-bottom:10px;}
.lore{font-size:18px;color:#c0b0e0;line-height:1.4;margin:10px 0;}
.best{font-size:19px;color:var(--neon-cyan);margin:8px 0;text-shadow:0 0 8px currentColor;}
.streak{font-size:20px;color:var(--amber);margin:6px 0 14px;}
.score-big{font-family:'Press Start 2P',monospace;font-size:34px;color:var(--neon-green);text-shadow:0 0 24px var(--neon-green);margin:10px 0;}

/* leaderboard */
.lb{margin:12px 0;text-align:left;font-size:20px;max-height:44vh;overflow:auto;}
.lbrow{display:flex;gap:8px;padding:5px 8px;border-bottom:1px dashed #443066;align-items:center;}
.lbrow .rk{color:var(--amber);width:30px;}
.lbrow .nm{flex:1;color:var(--neon-cyan);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lbrow .sc{color:var(--neon-green);font-weight:bold;}
.lbrow .tn{color:#9080b0;width:44px;text-align:right;}
.dim{color:#7060a0;}

#auth-status{
  position:absolute;bottom:44px;left:8px;z-index:56;
  font-size:15px;color:#8878b8;letter-spacing:1px;pointer-events:auto;
}
#auth-status a{color:var(--amber);text-decoration:none;}

footer{
  display:flex;gap:16px;justify-content:center;align-items:center;
  padding:8px;font-size:17px;color:#7868a0;letter-spacing:1px;
  flex-wrap:wrap;
}
.footlink{
  background:none;border:none;cursor:pointer;
  color:var(--neon-mag);font-family:'VT323',monospace;font-size:17px;
  text-decoration:none;text-shadow:0 0 6px var(--neon-mag);letter-spacing:1px;
}
.footlink:hover{color:var(--neon-cyan);}

.hidden{display:none !important;}

@media(max-width:520px){
  #title-glyph{font-size:11px;}
  #hud-top{font-size:16px;}
  .btn{font-size:16px;padding:5px 9px;}
  .modal h1{font-size:16px;}
}
</parameter>