/* Letter Strike — responsive arcade styling; no external fonts or libraries. */
:root {
  color-scheme: dark;
  --bg: #070b1b;
  --panel: #111936;
  --panel-light: #182347;
  --stroke: #2a3963;
  --text: #edf6ff;
  --muted: #99add2;
  --aqua: #60f4e6;
  --yellow: #ffdf7b;
  --pink: #ff6eab;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 0%, #152856 0%, var(--bg) 60%);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .46; }
button:focus-visible, select:focus-visible, canvas:focus-visible, a:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}
.game-shell { width: min(100% - 32px, 1070px); margin: 0 auto; padding: 28px 0 35px; }
.site-header {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  margin-bottom: 22px;
}
.brand { margin: 0 0 6px; letter-spacing: .25em; color: var(--aqua); font-weight: 800; font-size: .71rem; }
.brand span { color: var(--pink); }
h1 { font-size: clamp(2rem, 5.8vw, 4rem); letter-spacing: -.065em; line-height: 1; margin: 0; font-weight: 950; }
.accent { color: var(--aqua); }
.cursor { color: var(--pink); }
.tagline { color: var(--muted); margin: 9px 0 0; font-size: .95rem; }
.header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.small-button, .control-button {
  color: var(--text); background: var(--panel-light); border: 1px solid var(--stroke);
  padding: 12px 16px; border-radius: 12px; font-weight: 700;
}
.small-button:hover:not(:disabled), .control-button:hover:not(:disabled) {
  background: #22315c; border-color: var(--aqua);
}
.scoreboard {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 12px;
}
.stat { padding: 13px 16px; border: 1px solid var(--stroke); border-radius: 12px; background: #111a35df; min-width: 0; }
.stat span { display: block; color: var(--muted); font-size: .73rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; margin-bottom: 3px; }
.stat strong { display: block; font-size: clamp(1rem, 2.8vw, 1.7rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
#lives { color: var(--pink); letter-spacing: .05em; }
#combo { color: var(--yellow); }
.stage {
  position: relative; overflow: hidden; aspect-ratio: 8 / 5;
  border-radius: 18px; border: 2px solid #364876;
  background: #050b1e; box-shadow: 0 0 65px #080e2d, inset 0 0 30px #172a47;
}
#game { display: block; width: 100%; height: 100%; touch-action: none; }
.overlay {
  position: absolute; inset: 0; display: flex; justify-content: center; align-items: center;
  background: #060b20ba; padding: 14px; backdrop-filter: blur(5px);
}
.overlay[hidden] { display: none; }
.overlay-card {
  width: min(100%, 510px); text-align: center; padding: clamp(16px, 4vw, 35px);
  border: 1px solid #4a6795; background: linear-gradient(160deg, #17264c, #0d1630);
  border-radius: 20px; box-shadow: 0 20px 85px #01030ebd;
}
.overlay-eyebrow { display: block; color: var(--aqua); font-size: .68rem; letter-spacing: .18em; font-weight: 900; }
.overlay h2 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); letter-spacing: -.045em; margin: 10px 0; }
.overlay p { color: #ccd9f5; font-size: .93rem; line-height: 1.6; margin: 9px 0 19px; }
.difficulty-wrap { text-align: left; margin: 0 auto 17px; width: min(100%, 340px); }
.difficulty-wrap[hidden] { display: none; }
.difficulty-wrap label { display: block; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; margin-bottom: 7px; }
.difficulty-wrap select {
  display: block; width: 100%; padding: 12px; border: 1px solid #546896;
  background: #0d1632; color: white; border-radius: 10px;
}
.primary-button {
  border: 0; padding: 13px 20px; border-radius: 11px; background: var(--aqua);
  color: #051c29; font-weight: 900; box-shadow: 0 5px 0 #268e89;
  transition: transform .1s, background .1s;
}
.primary-button:hover:not(:disabled) { background: #a3fff6; }
.primary-button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #268e89; }
.overlay-card .primary-button { min-width: min(100%, 240px); margin: 4px 0 10px; }
.overlay .overlay-tip { font-size: .76rem; color: var(--muted); margin: 12px 0 0; }
.word-console {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  margin-top: 12px; padding: 18px 22px; background: #111a35e8;
  border: 1px solid var(--stroke); border-radius: 15px;
}
.word-info { flex: 1; min-width: 0; }
.section-label { display: block; color: var(--aqua); font-size: .73rem; letter-spacing: .14em; font-weight: 800; }
.word-display { font-size: clamp(1.7rem, 4vw, 2.7rem); letter-spacing: .19em; font-weight: 950; line-height: 1.25; min-height: 1.25em; overflow-wrap: anywhere; }
.message { margin: 7px 0 0; font-size: .86rem; color: var(--muted); min-height: 1.25em; }
.message.success { color: var(--aqua); }
.message.error { color: var(--pink); }
.message.hint { color: var(--yellow); }
.word-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.word-buttons button { white-space: nowrap; }
.bottom-panel { color: var(--muted); font-size: .79rem; padding: 13px 2px 2px; line-height: 1.5; }
.bottom-panel p { margin: 6px 0; }
.bottom-panel strong { color: var(--aqua); letter-spacing: .06em; }
.footer { text-align: center; color: #7e94ba; font-size: .8rem; margin-top: 25px; }
.footer a { color: var(--aqua); }
@media (max-width: 760px) {
  .site-header { align-items: flex-start; flex-direction: column; gap: 15px; }
  .scoreboard { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .stat { padding: 9px 7px; text-align: center; }
  .stat span { font-size: .57rem; letter-spacing: 0; }
  .stat strong { font-size: clamp(.85rem, 3vw, 1.1rem); }
  .stage { border-radius: 11px; }
  .word-console { flex-direction: column; align-items: stretch; padding: 13px; }
  .word-buttons { justify-content: stretch; }
  .word-buttons button { flex: 1 1 auto; padding: 11px 12px; }
  .overlay-card { padding: 13px 15px; }
  .overlay p { font-size: .78rem; line-height: 1.35; margin: 7px 0 11px; }
  .overlay h2 { margin: 5px 0; }
  .overlay .overlay-tip { display: none; }
}
@media (max-width: 440px) {
  .game-shell { width: calc(100% - 16px); padding-top: 17px; }
  .brand { font-size: .62rem; }
  .stage { aspect-ratio: 4 / 3; }
  .overlay-eyebrow { font-size: .56rem; }
  .overlay h2 { font-size: 1.4rem; }
  .overlay p { font-size: .72rem; }
  .difficulty-wrap { margin-bottom: 8px; }
  .difficulty-wrap select { padding: 8px; font-size: .8rem; }
  .overlay-card .primary-button { padding: 9px 12px; margin: 2px 0; }
  #lives { letter-spacing: -.13em; }
}
@media (prefers-reduced-motion: reduce) {
  .primary-button { transition: none; }
}