@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root {
  --green: #75ff98;
  --dim: #2c9b55;
  --amber: #ffd166;
  --red: #ff5263;
  --black: #030705;
  --panel: #07110b;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  color: var(--green);
  background:
    radial-gradient(circle at 50% 35%, #102719 0, #06100a 35%, #010302 80%);
  font-family: "Share Tech Mono", Consolas, monospace;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}

.game-shell {
  width: min(1120px, 100%);
  border: 1px solid #266b3c;
  background: rgba(2, 8, 4, .92);
  box-shadow: 0 0 60px #0f6b2b22, inset 0 0 40px #000;
}

.topbar, .hud, footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #1d4f2d;
}

.topbar { padding: 13px 18px; font-size: 14px; letter-spacing: .08em; }
.brand i { color: var(--dim); font-size: 11px; font-style: normal; }
.prompt, footer span { color: var(--dim); }
.status-light { color: #68ae7d; font-size: 12px; }
.status-light span { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }

.hud { justify-content: flex-start; padding: 10px 18px; gap: clamp(20px, 5vw, 72px); background: #08120b; }
.hud div { display: grid; gap: 2px; }
.hud small { color: #478a5c; font-size: 10px; letter-spacing: .18em; }
.hud strong { color: #d8ffe2; font-size: 19px; font-weight: 400; text-shadow: 0 0 8px #69ff9144; }
.hud .lives { color: var(--red); letter-spacing: 4px; }

.screen-wrap { position: relative; height: min(64vh, 570px); min-height: 380px; overflow: hidden; background: var(--black); }
canvas { display: block; width: 100%; height: 100%; cursor: text; }
.scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, #0008 4px); opacity: .3; }

.overlay { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 20px; background: #020804d9; transition: opacity .2s; }
.overlay.hidden { opacity: 0; pointer-events: none; }
.terminal-card { width: min(650px, 100%); padding: 44px; text-align: center; border: 1px solid #2a7b44; background: #06110af2; box-shadow: 0 0 35px #1ade5522, inset 0 0 30px #000; }
.terminal-card.compact { width: min(440px, 100%); padding: 36px; }
.eyebrow { margin: 0 0 15px; color: #45a564; font-size: 12px; letter-spacing: .2em; }
.eyebrow.error { color: var(--red); }
h1 { margin: 0; font-size: clamp(48px, 9vw, 92px); line-height: .9; letter-spacing: -.08em; color: #e3ffe9; text-shadow: 0 0 18px #58ff8055; }
h1 span { color: var(--green); }
h2 { margin: 6px 0 22px; font-size: 44px; color: #e3ffe9; }
.lead { color: var(--amber); font-size: 18px; margin-top: 28px; }
.terminal-card p { line-height: 1.6; }
button { border: 0; color: var(--green); background: transparent; font: inherit; cursor: pointer; }
.terminal-card button { margin: 22px 0 8px; padding: 13px 20px; border: 1px solid var(--green); background: #0c2b17; box-shadow: 0 0 16px #43ff7022; }
.terminal-card button:hover, .terminal-card button:focus { color: #021006; background: var(--green); outline: none; }
.hint { color: #39794c; font-size: 12px; }
kbd { padding: 1px 4px; border: 1px solid #39794c; font: inherit; }
.hall { width: min(390px, 100%); margin: 22px auto 0; padding-top: 14px; border-top: 1px dashed #275c37; text-align: left; }
.hall-title { margin: 0 0 8px !important; color: var(--amber); text-align: center; font-size: 12px; letter-spacing: .16em; }
.hall ol { margin: 0; padding-left: 36px; color: #5dae74; font-size: 12px; line-height: 1.55; }
.hall li { padding-left: 5px; }
.hall li::marker { color: #387249; }
.hall .hall-score { float: right; color: #d8ffe2; }
.compact-hall { margin-top: 16px; }
.record-form { margin: 16px 0 5px; padding: 12px; border: 1px solid var(--amber); background: #261e08; }
.record-form.hidden { display: none; }
.record-form label { display: block; margin-bottom: 9px; color: var(--amber); font-size: 12px; }
.record-form div { display: flex; gap: 6px; }
.record-form input { min-width: 0; flex: 1; padding: 8px; border: 1px solid #8f7635; outline: none; color: #fff4c9; background: #080a05; font: inherit; text-transform: uppercase; }
.record-form button { margin: 0; padding: 8px; border-color: var(--amber); color: var(--amber); background: #191503; box-shadow: none; }

.level-banner { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 12px 24px; color: var(--amber); border: 1px solid var(--amber); background: #090d06dd; font-size: 26px; letter-spacing: .15em; text-shadow: 0 0 12px #ffd16688; }
.level-banner.hidden { display: none; }

footer { min-height: 46px; padding: 10px 18px; border-top: 1px solid #1d4f2d; border-bottom: 0; color: #62b87a; font-size: 13px; }
footer p { margin: 0; }
#targetWord { color: var(--amber); font-weight: 400; }
.controls button { color: #62b87a; padding: 2px 4px; }
.mobile-input { position: fixed; left: -10000px; opacity: 0; }

@media (max-width: 650px) {
  body { padding: 0; }
  .game-shell { width: 100vw; height: 100dvh; display: grid; grid-template-rows: auto auto 1fr auto; border: 0; }
  .screen-wrap { min-height: 0; height: auto; }
  .hud { padding: 8px 10px; gap: 0; justify-content: space-between; }
  .hud div:last-child { display: none; }
  .hud strong { font-size: 16px; }
  .hud small { font-size: 8px; }
  .terminal-card { padding: 28px 16px; }
  .topbar { padding: 10px; }
  .status-light { display: none; }
  footer { padding: 9px 10px; }
  footer .controls span { display: none; }
}