:root{
  box-sizing:border-box;
  /* the palette. game.js reads these once at start (COLORS); no hex in draw calls.
     This is the placeholder theme: every theme is a palette and a look, never a rule
     (DESIGN.md rule 10). */
  --bg:#0b1020;          /* deep night */
  --bg2:#17224a;         /* the glow over the base */
  --ink:#eef4ff;         /* untyped letters */
  --dim:#7f8db3;         /* labels, secondary text */
  --plate:#050814;       /* the plate behind a word */
  --accent:#62e6ff;      /* typed letters, the lock, the turret */
  --good:#8dffa8;        /* a word destroyed */
  --bad:#ff4d6d;         /* a wrong key */
  --hot:#ffb23e;         /* a word close to the base */
  --gold:#ffd84d;        /* score */
  --foe:#9d7bff;         /* the enemies' bodies */
  --line:#3a5bd9;        /* the defence line */
  --ice:#8fe3ff;         /* a freeze */
  --boss:#ff5fd2;        /* a wave's boss */
  --s:1;
}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0}
body{
  background:radial-gradient(120% 80% at 50% 110%, var(--bg2), var(--bg) 65%);
  background-color:var(--bg);
  color:var(--ink);
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono","Liberation Mono",monospace;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
}
#wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:12px}
#stage{position:relative;border-radius:calc(10px * var(--s));overflow:hidden;
  box-shadow:0 0 0 1px rgba(98,230,255,.18), 0 calc(18px * var(--s)) calc(50px * var(--s)) rgba(0,0,0,.6)}
#c{display:block}

/* ---- overlay screens: title, pause, end ---- */
.screen{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(12px * var(--s));
  padding:calc(24px * var(--s));
  text-align:center;
  background:rgba(5,8,20,.82);
}
.screen[hidden]{display:none}
.title{font-size:calc(54px * var(--s));font-weight:800;letter-spacing:.06em;color:var(--accent);
  text-shadow:0 0 calc(18px * var(--s)) rgba(98,230,255,.55)}
.banner{font-size:calc(13px * var(--s));letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin-top:calc(-8px * var(--s))}
.big{font-size:calc(44px * var(--s));font-weight:800;letter-spacing:.05em}
.big.win{color:var(--good);text-shadow:0 0 calc(16px * var(--s)) rgba(141,255,168,.45)}
.big.lose{color:var(--bad);text-shadow:0 0 calc(16px * var(--s)) rgba(255,77,109,.45)}
.sub{font-size:calc(17px * var(--s));line-height:1.55;color:var(--ink)}
.stat{font-size:calc(15px * var(--s));color:var(--gold)}
.stat:empty{display:none}
.foot,.hint-small{font-size:calc(13px * var(--s));color:var(--dim)}
.warn{font-size:calc(15px * var(--s));color:var(--hot)}
.warn[hidden]{display:none}
.ver{position:absolute;right:calc(12px * var(--s));bottom:calc(10px * var(--s));font-size:calc(11px * var(--s));color:var(--dim)}
.kbd{display:inline-block;padding:0 calc(6px * var(--s));border:1px solid var(--dim);border-bottom-width:calc(3px * var(--s));
  border-radius:calc(5px * var(--s));font-size:.9em;line-height:1.4;color:var(--ink)}
.blink{font-size:calc(19px * var(--s));color:var(--ink);animation:blink 1.1s steps(2, jump-none) infinite}
@keyframes blink{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){ .blink{animation:none} }

.speeds{display:flex;gap:calc(12px * var(--s));margin-top:calc(6px * var(--s))}
.speed{
  font:inherit;cursor:pointer;
  min-width:calc(170px * var(--s));
  padding:calc(10px * var(--s)) calc(14px * var(--s));
  border-radius:calc(8px * var(--s));
  border:calc(2px * var(--s)) solid rgba(127,141,179,.45);
  background:rgba(23,34,74,.6);color:var(--dim);
}
.speed b{display:block;font-size:calc(18px * var(--s));color:var(--ink);margin-bottom:calc(3px * var(--s))}
.speed span{font-size:calc(13px * var(--s))}
.speed.on{border-color:var(--accent);color:var(--accent);box-shadow:0 0 calc(14px * var(--s)) rgba(98,230,255,.35)}

.results{display:flex;gap:calc(34px * var(--s));margin:calc(8px * var(--s)) 0}
.res-n{font-size:calc(40px * var(--s));font-weight:800;color:var(--accent)}
.res-l{font-size:calc(13px * var(--s));color:var(--dim);letter-spacing:.15em;text-transform:uppercase}
.legend{font-size:calc(13px * var(--s));line-height:1.6;color:var(--dim)}
.legend b{font-weight:700}
.legend .ice{color:var(--ice)} .legend .gold{color:var(--gold)} .legend .good{color:var(--good)} .legend .boss{color:var(--boss)}
.more{font-size:calc(14px * var(--s));color:var(--ink)}
.more:empty{display:none}
.missed{font-size:calc(15px * var(--s));color:var(--dim);min-height:calc(28px * var(--s))}
.missed .kbd{color:var(--bad);border-color:var(--bad);margin:0 calc(3px * var(--s))}
.missed small{color:var(--dim);font-size:.8em;margin-right:calc(8px * var(--s))}

.world{font-size:calc(15px * var(--s));color:var(--accent)}
.world[hidden],.name[hidden],.board-hint[hidden]{display:none}
.name{display:flex;flex-direction:column;align-items:center;gap:calc(6px * var(--s))}
.name label{font-size:calc(13px * var(--s));color:var(--dim)}
.name input{
  font:inherit;font-size:calc(22px * var(--s));font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center;
  width:calc(260px * var(--s));padding:calc(6px * var(--s)) calc(10px * var(--s));
  border-radius:calc(6px * var(--s));border:calc(2px * var(--s)) solid var(--accent);
  background:var(--plate);color:var(--ink);outline:none;
  -webkit-user-select:text;user-select:text}
.name-note{font-size:calc(12px * var(--s));color:var(--dim)}
.name-note.bad{color:var(--bad)}
#scr-board{gap:calc(10px * var(--s))}
.board-tabs{display:flex;gap:calc(8px * var(--s))}
.board-tabs span{font-size:calc(14px * var(--s));padding:calc(4px * var(--s)) calc(12px * var(--s));border-radius:calc(6px * var(--s));
  border:1px solid rgba(127,141,179,.45);color:var(--dim)}
.board-tabs span.on{border-color:var(--accent);color:var(--accent)}
.board{width:calc(620px * var(--s))}
.board-cols,.board-rows li{display:grid;gap:calc(10px * var(--s));text-align:left;
  grid-template-columns:calc(36px * var(--s)) 1fr calc(96px * var(--s)) calc(52px * var(--s)) calc(56px * var(--s)) calc(112px * var(--s))}
.board-cols span:nth-child(n+3),.board-rows li span:nth-child(n+3){text-align:right}
.board-cols{font-size:calc(11px * var(--s));letter-spacing:.12em;color:var(--dim);padding:0 calc(8px * var(--s)) calc(4px * var(--s));border-bottom:1px solid rgba(127,141,179,.3)}
.board-rows{list-style:none;margin:0;padding:0;height:calc(250px * var(--s));overflow-y:auto;scrollbar-width:thin}
.board-rows li{font-size:calc(15px * var(--s));line-height:calc(25px * var(--s));padding:0 calc(8px * var(--s))}
.board-rows li:nth-child(odd){background:rgba(23,34,74,.45)}
.board-rows li.me{color:var(--gold)}
.board-rows li.empty{display:block;text-align:center;color:var(--dim);background:none}
.board-rows li span{font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.coffee{font-size:calc(13px * var(--s));color:var(--gold);text-decoration:none}
.coffee[hidden]{display:none}

#caps{position:absolute;left:50%;top:calc(44px * var(--s));transform:translateX(-50%);
  padding:calc(6px * var(--s)) calc(14px * var(--s));border-radius:calc(6px * var(--s));
  background:var(--hot);color:var(--plate);font-size:calc(15px * var(--s));font-weight:700;pointer-events:none}
#caps[hidden]{display:none}

#mute{position:absolute;right:calc(10px * var(--s));top:calc(8px * var(--s));z-index:2;
  font:inherit;font-size:calc(12px * var(--s));cursor:pointer;
  padding:calc(3px * var(--s)) calc(8px * var(--s));border-radius:calc(5px * var(--s));
  border:1px solid rgba(127,141,179,.5);background:rgba(5,8,20,.6);color:var(--dim)}
#mute.off{color:var(--bad);border-color:var(--bad)}
body.playing #mute{display:none}