/* GAME.CSS = the full-screen Type Attack game.
   Black screen, coral dotted text, scanlines to match the boot screen. */
.game{
  position:fixed;inset:0;z-index:40000;
  display:flex;flex-direction:column;
  background:#0a0a0a;color:var(--coral);
  font-family:"DotGothic16",monospace;letter-spacing:.06em;
  overflow:hidden;
}
.game[hidden]{display:none}
/* faint scanlines for the old-CRT feel */
.game::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 4px);
}

/* ---------- Password gate ---------- */
.game-gate{position:relative;z-index:1;margin:auto;width:min(34rem,90%);padding:2rem 0;text-align:left}
.game-kicker{font-size:clamp(1.6rem,5vw,2.6rem);line-height:1.1;margin:0 0 1.2rem;text-shadow:0 0 10px rgba(188,60,74,.55)}
.game-line{margin:0 0 .3rem}
.game-hint{margin:0 0 .5rem;color:#8f3a38;font-size:.9em}
.game-input-row{display:flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--coral);padding-bottom:.25rem}
.game-caret{color:var(--coral)}
.game-pass{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--coral);font:inherit;letter-spacing:.1em;caret-color:var(--coral)}
.game-btns{display:flex;gap:1.6rem;margin-top:1.4rem}
.game-btns button{background:none;border:0;color:var(--coral);font:inherit;cursor:pointer;padding:0}
.game-btns button:hover{color:var(--paper)}

/* ---------- Playing area ---------- */
.game-play{position:relative;z-index:1;flex:1;min-height:0}
#game-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.game-hud{
  position:absolute;z-index:2;top:0;left:0;right:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 2rem;
  padding:.9rem 1.2rem;font-size:clamp(.8rem,1.8vw,1rem);
  pointer-events:none;
}
.game-hud b{color:var(--paper);font-weight:400}
.game-quit{pointer-events:auto;margin-left:auto;background:none;border:0;color:var(--coral);font:inherit;cursor:pointer;padding:0}
.game-quit:hover{color:var(--paper)}

/* ---------- Game over ---------- */
.game-over{
  position:absolute;z-index:3;inset:0;
  display:grid;place-content:center;justify-items:center;gap:.4rem;
  text-align:center;background:rgba(10,10,10,.82);
}
.game-over[hidden]{display:none}
.game-over .game-kicker{margin-bottom:.6rem}

/* Personal best + your own ranked runs on the game-over screen */
.game-best-line{margin:.2rem 0 .4rem}
.game-best-line b{color:var(--paper);font-weight:400}
.game-newbest{color:#e07a3f;font-size:.8em;letter-spacing:.1em}
.game-ranks-title{margin:.6rem 0 .1rem;font-size:.8em;letter-spacing:.12em;color:#8f3a38}
.game-ranks{list-style:none;margin:.2rem 0 1rem;padding:0;display:grid;gap:.1rem;min-width:12rem;font-size:.95em}
.game-ranks[hidden]{display:none}
.game-ranks li{display:flex;justify-content:space-between;gap:2rem;padding:.12rem 0;border-bottom:1px solid rgba(188,60,74,.25)}
.game-ranks li b{color:var(--paper);font-weight:400}
.game-ranks li.me b{color:var(--coral)}

/* Retro serif wordmark inside the type_attack.exe window */
.ta-logo{
  font:600 1.9rem/1 var(--serif);letter-spacing:.01em;
  color:var(--ink);margin:0 0 .7rem;
  text-shadow:3px 3px 0 var(--coral);          /* offset shadow = old print feel */
}
.ta-logo i{font-style:italic;font-weight:400;color:var(--coral);text-shadow:none}

/* Wrong-password message on the gate */
.game-error{margin:.6rem 0 0;color:#e07a3f;font-size:.9em}