/* Typing Invaders — dark space theme, no dependencies */
:root{
  --bg:#070b16; --panel:#0e1526; --line:#1d2a4a;
  --cyan:#39d0ff; --magenta:#ff4fd8; --green:#3dff8a; --yellow:#ffd23f; --red:#ff5a5a;
  --text:#dfe8ff; --dim:#8a97b8;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--bg); color:var(--text); font-family:"Segoe UI",Verdana,sans-serif;
  min-height:100vh; display:flex; justify-content:center;}
#app{width:100%; max-width:900px; padding:16px;}
.screen{display:none; flex-direction:column; align-items:center; gap:14px; padding:24px 8px;}
.screen.active{display:flex;}

/* Title */
.logo{font-size:64px; line-height:1; text-align:center; letter-spacing:6px; color:var(--cyan);
  text-shadow:0 0 24px rgba(57,208,255,.55); font-weight:800;}
.logo span{color:var(--magenta); text-shadow:0 0 24px rgba(255,79,216,.55);}
.tagline{color:var(--dim); font-size:17px;}
.menu{display:flex; gap:16px; margin-top:8px;}
.meta{display:flex; gap:28px; color:var(--dim); font-size:15px;}
.meta strong{color:var(--text);}
.how{max-width:560px; color:var(--dim); font-size:14px; border:1px solid var(--line);
  border-radius:8px; padding:10px 14px; background:var(--panel);}
.how summary{cursor:pointer; color:var(--cyan);}
.how p{margin-top:8px; line-height:1.5;}

/* Buttons */
.btn{background:var(--panel); color:var(--text); border:2px solid var(--cyan); border-radius:10px;
  padding:10px 22px; font-size:16px; cursor:pointer; transition:.15s;}
.btn:hover{background:var(--cyan); color:#06121f; box-shadow:0 0 18px rgba(57,208,255,.6);}
.btn.big{font-size:20px; padding:14px 34px;}
.btn.alt{border-color:var(--magenta);}
.btn.alt:hover{background:var(--magenta); box-shadow:0 0 18px rgba(255,79,216,.6);}
.btn.small{font-size:13px; padding:6px 14px;}
.btn.tiny{font-size:14px; padding:4px 10px; border-width:1px;}
.btn.back{margin-top:6px;}
.btn:disabled{opacity:.35; cursor:default;}
.btn:disabled:hover{background:var(--panel); color:var(--text); box-shadow:none;}

/* Stage select */
#screen-stages h2{color:var(--cyan); letter-spacing:2px;}
.sub{color:var(--dim); font-size:14px;}
#stage-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%; max-width:640px;}
.stage-card{background:var(--panel); border:2px solid var(--line); border-radius:12px; padding:16px 10px;
  text-align:center; cursor:pointer; transition:.15s;}
.stage-card:hover:not(.locked){border-color:var(--cyan); transform:translateY(-2px);}
.stage-card.locked{opacity:.4; cursor:default;}
.stage-card .num{font-size:13px; color:var(--dim);}
.stage-card .nm{font-size:17px; font-weight:700; margin:4px 0; color:var(--text);}
.stage-card .ds{font-size:12px; color:var(--dim);}
.stage-card .best{font-size:12px; color:var(--green); margin-top:6px;}

/* Game */
#hud{width:100%; max-width:800px; display:flex; justify-content:space-between; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 14px; font-size:15px;}
.hud-left{display:flex; gap:18px; align-items:center;}
#hud-mode{color:var(--cyan); font-weight:700;}
#hud-score{font-size:20px; font-weight:800; color:var(--yellow); font-variant-numeric:tabular-nums;}
#hud-combo{color:var(--magenta); font-weight:700; min-height:20px;}
.hud-right{display:flex; gap:14px; align-items:center; color:var(--dim);}
#hud-acc{color:var(--green);} #hud-wpm{font-variant-numeric:tabular-nums;}
#stage-goal{color:var(--dim); font-size:13px; min-height:18px;}
#game{background:#05070f; border:2px solid var(--line); border-radius:12px; max-width:100%;}

/* Keyboard */
#keyboard-wrap{width:100%; max-width:800px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:10px;}
#keyboard{display:flex; flex-direction:column; gap:6px; align-items:center;}
.krow{display:flex; gap:6px;}
.key{min-width:44px; height:48px; display:flex; align-items:center; justify-content:center;
  background:#141d33; border:1px solid #2a3a61; border-bottom:4px solid var(--fc,#555);
  border-radius:8px; font-family:"Courier New",monospace; font-weight:700; font-size:17px; color:var(--text);
  transition:all .08s;}
.key.space{min-width:320px;}
.key.dim{opacity:.45;}
.key.rest{box-shadow:inset 0 -6px 0 rgba(255,255,255,.12);}
.key.next{background:#fff; color:#06121f; border-bottom-color:var(--fc,#555);
  box-shadow:0 0 16px var(--fc,#fff); transform:scale(1.12);}
.key.shiftnext{background:var(--yellow); color:#06121f; box-shadow:0 0 16px var(--yellow); transform:scale(1.12);}
#legend{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:10px; font-size:12px; color:var(--dim);}
#legend span{display:flex; align-items:center; gap:5px;}
#legend i{width:12px; height:12px; border-radius:3px; display:inline-block;}

/* Pause / result */
#pause-overlay{position:fixed; inset:0; background:rgba(4,6,12,.8); display:flex;
  align-items:center; justify-content:center; z-index:50;}
#pause-overlay.hidden{display:none;}
.panel{background:var(--panel); border:2px solid var(--cyan); border-radius:14px; padding:32px;
  display:flex; flex-direction:column; gap:14px; align-items:center;}
#result-stats{display:grid; grid-template-columns:repeat(2,minmax(180px,220px)); gap:10px; margin:8px 0;}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px; text-align:center;}
.stat .v{font-size:26px; font-weight:800; color:var(--yellow); font-variant-numeric:tabular-nums;}
.stat .k{font-size:12px; color:var(--dim); margin-top:4px;}
.stat.good .v{color:var(--green);} .stat.bad .v{color:var(--red);}
#result-buttons{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}
#result-title{color:var(--cyan); letter-spacing:2px; font-size:32px;}
#result-title.fail{color:var(--red);}
.unlock{color:var(--green); font-weight:700;}
@media (max-width:640px){
  .logo{font-size:44px;} #stage-grid{grid-template-columns:repeat(2,1fr);}
  .key{min-width:30px; height:40px; font-size:14px;} .key.space{min-width:200px;}
  #result-stats{grid-template-columns:1fr 1fr;}
}