/* IndianTyping.com — game.css — loaded only on typing-games.php */

.game-shell {
  max-width: var(--test-max, 720px);
  margin: 0 auto;
}

.game-hud {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; margin-bottom: 14px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-lg);
}
.game-hud-item { text-align: center; }
.game-hud-val { font-size: 20px; font-weight: 800; color: var(--text-1); font-family: var(--mono); }
.game-hud-lbl { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.game-hud-lives { font-size: 18px; letter-spacing: 2px; }

.game-lang-toggle { display: flex; gap: 8px; }
.game-lang-btn {
  padding: 6px 14px; border-radius: var(--r-md); border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 700; cursor: pointer;
}
.game-lang-btn.sel { background: var(--brand); color: #fff; border-color: var(--brand); }

.game-arena {
  position: relative;
  height: 420px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 14px;
}
.game-arena::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--red); opacity: 0.4;
}

.falling-word {
  position: absolute;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-dev), var(--mono);
  font-size: 16px; font-weight: 600; color: var(--text-1);
  white-space: nowrap;
  will-change: top;
}
.falling-word.matched { border-color: var(--green); color: var(--green); background: var(--green-dim); }

/* display:none by default so the [hidden] attribute JS toggles actually
   hides this — an explicit .game-overlay[hidden] override wasn't enough
   because author-stylesheet display:flex here would still win; this way
   "visible" is the exception, not the rule. */
.game-overlay {
  display: none;
  position: absolute; inset: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(255,255,255,0.92); text-align: center; padding: 24px;
}
.game-overlay:not([hidden]) { display: flex; }
[data-theme="dark"] .game-overlay { background: rgba(20,20,20,0.92); }

.game-input-wrap { display: flex; justify-content: center; }
.game-input {
  width: 100%; max-width: 320px; padding: 14px 18px;
  font-size: 17px; font-family: var(--font-dev), var(--mono);
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-lg);
  color: var(--text-1); text-align: center; outline: none;
}
.game-input:focus { border-color: var(--brand); box-shadow: var(--shadow-glow); }

/* Same rule as test.css's .btn-start — duplicated intentionally rather than
   loading test.css on the games page just for one button. */
.btn-start {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--brand); color: #fff;
  border-radius: var(--r-lg); padding: 16px 32px;
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  transition: all 0.2s var(--ease);
  box-shadow: 0 4px 20px rgba(232,66,10,0.25);
  border: none; cursor: pointer; font-family: var(--font);
}
.btn-start:hover { filter: brightness(1.07); transform: translateY(-2px); }
.btn-start:active { transform: translateY(0); }

@media (max-width: 560px) {
  .game-arena { height: 340px; }
}

/* ================================================================
   TYPING GAMES HUB  (added with the multi-mode catalogue)

   The page previously carried its layout in inline styles on a
   full-bleed shell. It now uses .page-wrap like every other mature
   page, and everything below is games-owned — no shared CSS is
   modified for this feature.
================================================================ */

/* ── THE CONTAINER, DEFINED HERE ON PURPOSE ──────────────────
   .page-wrap and .content-section live in tool.css, and this page does
   NOT load tool.css — AssetHelper::extraCssFor('game') returns ['game'],
   so the page gets main.css + game.css only.

   That is the whole cause of the "full width / zoomed" regression: the
   markup was wrapped correctly, but the class had no rule on this page,
   so there was no max-width, no centring, no gutters and no top padding
   to clear the fixed nav. The supporting sections looked unfinished for
   exactly the same reason.

   Re-declared here rather than adding tool.css to the games chain,
   because pulling in an entire tool stylesheet for two rules would drag
   the transliteration tool's styling onto a page that has no tool on it.
   Same tokens, so the geometry matches the rest of the site exactly. */
.page-wrap {
  max-width: var(--tool-max);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 32px) 24px 80px;
}

.content-section {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 36px 40px;
  margin-bottom: 20px;
}
.content-section h2 {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text-1); margin-bottom: 12px; line-height: 1.3;
}
.content-section h2:not(:first-child) { margin-top: 28px; }
/* max-width caps the MEASURE — see the same note in training.css. 68ch
   matches course.css, which already capped its equivalent content. */
.content-section p,
.content-section li {
  color: var(--text-2); line-height: 1.75; margin-bottom: 14px; max-width: 68ch;
}
.content-section a { color: var(--brand); }

@media (max-width: 560px) {
  .page-wrap { padding-left: 16px; padding-right: 16px; }
  .content-section { padding: 24px 20px; }
}

.g-intro { text-align: center; margin-bottom: 28px; }
.g-title {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-1);
  margin-bottom: 8px;
}
.g-sub {
  font-size: 16px;
  color: var(--text-2);
  max-width: 56ch;          /* a readable measure, not the full 1100px */
  margin: 0 auto;
}
.g-h2 {
  font-size: 18px; font-weight: 800; color: var(--text-1);
  margin: 0 0 14px;
}

/* ── catalogue ─────────────────────────────────────────────── */
.g-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.g-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  text-align: left;
  padding: 18px 18px 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.g-card:hover { border-color: var(--text-3); transform: translateY(-2px); }
.g-card:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
/* Selected state is a border AND a label weight change, never colour alone. */
.g-card.is-active {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.g-card-icon { font-size: 28px; line-height: 1; }
.g-card-name { font-weight: 800; color: var(--text-1); font-size: 16px; }
.g-card.is-active .g-card-name { text-decoration: underline; text-underline-offset: 3px; }
.g-card-alt { font-family: var(--font-dev); font-weight: 400; color: var(--text-2); font-size: 14px; }
.g-card-skill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--brand);
}
.g-card-desc { font-size: 13px; color: var(--text-2); line-height: 1.55; }
.g-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.g-tag {
  font-size: 11px; font-weight: 600; color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 100px; padding: 2px 8px;
}

/* ── stage ─────────────────────────────────────────────────── */
.g-stage { margin-bottom: 20px; }
.g-hud { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; }
.g-metric {
  min-width: 92px; text-align: center;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); padding: 10px 14px;
}
.g-metric-v { display: block; font-size: 22px; font-weight: 800; color: var(--text-1); }
.g-metric-l { display: block; font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }

.g-prompt-surface {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 40px 24px 24px;
  min-height: 280px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
}
.g-prompt {
  font-size: clamp(32px, 6vw, 52px);
  font-weight: 800; letter-spacing: -0.02em;
  color: var(--text-1);
  min-height: 1.2em;
  text-align: center;
  word-break: break-word;
}
.g-input-wrap { width: 100%; max-width: 420px; }
.g-input {
  width: 100%; text-align: center;
  font-size: 20px; font-weight: 600;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--text-1);
}
.g-input:focus { outline: none; border-color: var(--brand); }
/* Wrong input is marked by border AND background, not colour alone. */
.g-input.is-wrong { border-color: var(--red); background: var(--red-dim); }

.g-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--surface);
  border-radius: var(--r-xl);
  text-align: center; padding: 24px;
}
.g-overlay[hidden] { display: none; }
.g-ov-title { font-size: 22px; font-weight: 800; color: var(--text-1); margin: 0; }
.g-ov-copy { font-size: 14px; color: var(--text-2); max-width: 42ch; margin: 0; }
.g-ov-best { font-size: 13px; color: var(--green); font-weight: 700; margin: 0; }
.g-res { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin: 4px 0; }
.g-res-row { text-align: center; }
.g-res-row strong { display: block; font-size: 26px; font-weight: 800; color: var(--text-1); }
.g-res-row span { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.g-res-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.g-res-link { font-size: 13px; color: var(--brand); text-decoration: none; }
.g-res-link:hover { text-decoration: underline; }

/* Reserved, empty, and below the game. Fixed height so a future unit
   cannot shift the playfield while someone is typing. */
.g-adslot { min-height: 90px; margin: 8px 0 32px; }

.g-lang { display: flex; justify-content: center; margin-bottom: 12px; gap: 8px; }
.g-list, .g-links { margin: 0 0 18px; padding-left: 20px; color: var(--text-2); line-height: 1.7; }
.g-list li, .g-links li { margin-bottom: 6px; }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .g-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .g-prompt-surface { padding: 28px 16px 20px; min-height: 240px; }
  .g-hud { flex-wrap: wrap; }
  .g-metric { min-width: 78px; padding: 8px 10px; }
  /* Comfortable touch targets on phones without inflating desktop. */
  .g-input { padding: 16px; font-size: 18px; }
  .btn-start { min-height: 48px; padding-left: 22px; padding-right: 22px; }
  .g-card { min-height: 44px; }
}

/* Motion is feedback here, never decoration — honour the preference. */
@media (prefers-reduced-motion: reduce) {
  .g-card { transition: none; }
  .g-card:hover { transform: none; }
}

/* ================================================================
   GAMES DESIGN SYSTEM  (polish pass)

   One visual language across all three modes so they read as parts of
   the same product rather than three developer demos, while each mode
   keeps its own composition. Everything here is games-owned; no shared
   stylesheet is touched.

   Priority order the layout expresses, top to bottom:
     1 active game   2 current target   3 input   4 live metrics
     5 feedback      6 secondary controls
================================================================ */

/* ── 1. COMPACT SELECTOR ───────────────────────────────────────
   The catalogue is navigation, not the product. Three tall cards
   used to eat the first screen before anyone could play, so this is
   a horizontal strip on desktop that stays scannable. */
.g-cards {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.g-card {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  min-height: 0;
}
.g-card-icon { font-size: 22px; }
.g-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.g-card-name { font-size: 15px; }
.g-card-skill { font-size: 10px; letter-spacing: 0.08em; }
/* Descriptions and tags are useful on the hub but not worth the vertical
   cost above the fold — kept for screen readers and wider viewports. */
.g-card-desc {
  font-size: 12px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.g-card-tags { display: none; }
@media (min-width: 1200px) { .g-card-tags { display: flex; } }

/* Selected state: colour PLUS a left rule and weight, never colour alone. */
.g-card.is-active {
  border-color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand);
}

/* ── 2. SHARED GAME SHELL ──────────────────────────────────────
   Word Fall and the prompt modes sit in the same frame so switching
   between them does not feel like changing websites. */
.g-stage {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 18px 18px 20px;
  margin-bottom: 22px;
}
.g-topbar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.g-mode-name {
  font-size: 15px; font-weight: 800; color: var(--text-1);
  letter-spacing: -0.01em;
}
.g-mode-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
}

/* ── 3. METRICS ROW ────────────────────────────────────────────
   Monospace numerals so a changing value does not shift its neighbours
   while someone is typing — layout stability matters more here than
   typographic flourish. */
.g-hud { gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.g-metric {
  min-width: 84px; padding: 8px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.g-metric-v {
  font-size: 20px; font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.g-metric-l { font-size: 10px; letter-spacing: 0.07em; }
/* The metric each mode is really about gets visual weight. */
.g-metric.is-hero { border-color: var(--brand); background: var(--brand-dim); }
.g-metric.is-hero .g-metric-v { color: var(--brand); font-size: 24px; }

/* ── 4. PROMPT MODES (Word Rush, Accuracy Streak) ──────────────── */
.g-prompt-surface {
  border: 0; background: transparent; padding: 24px 0 8px;
  min-height: 260px; gap: 22px;
}
.g-prompt {
  font-size: clamp(34px, 5.5vw, 54px);
  font-family: var(--mono);
  letter-spacing: -0.01em;
  /* Reserve the line so advancing to a shorter word cannot bounce the
     input upward mid-keystroke. */
  min-height: 1.15em;
  display: flex; align-items: center; justify-content: center;
}
.g-input {
  font-family: var(--mono);
  letter-spacing: 0.02em;
  transition: border-color 0.12s var(--ease), background 0.12s var(--ease);
}
.g-input.is-wrong {
  border-color: var(--red); background: var(--red-dim);
  /* A short nudge, not a shake — feedback should not fight the typist. */
  animation: g-nudge 0.16s var(--ease);
}
@keyframes g-nudge { 50% { transform: translateX(-3px); } }

/* Progress bar — used by Word Rush for the clock and Accuracy Streak
   for session position. Same component, different meaning. */
.g-progress {
  width: 100%; max-width: 420px; height: 6px;
  background: var(--surface-2); border-radius: 100px; overflow: hidden;
}
.g-progress-fill {
  height: 100%; background: var(--brand);
  transition: width 0.25s linear;
}
.g-progress-fill.is-low { background: var(--red); }

/* ── 5. WORD FALL PLAYFIELD ────────────────────────────────────
   The playfield needs to look like a contained arena. The page is not
   the game field — this is. */
.g-fall .game-arena {
  min-height: 320px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1.5px solid var(--border);
  /* A faint floor line so a falling word visibly approaches something. */
  box-shadow: inset 0 -2px 0 var(--border);
  overflow: hidden;
  position: relative;
}
.g-fall .game-input-wrap { margin-top: 14px; display: flex; justify-content: center; }
.g-fall .game-input {
  max-width: 420px; width: 100%; text-align: center;
  font-family: var(--mono); font-size: 18px;
}
.g-lang { margin-bottom: 12px; }
.game-lang-btn { min-height: 36px; }
.game-lang-btn.sel { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* ── 6. RESULT STATE ───────────────────────────────────────────── */
.g-res { gap: 26px; margin: 8px 0 4px; }
.g-res-row strong { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* The hero metric differs per mode: WPM for speed, best streak for precision. */
.g-res-row.is-hero strong { color: var(--brand); font-size: 34px; }
.g-res-actions { margin-top: 6px; }
.g-ov-title { font-size: 20px; }

/* ── 7. RESPONSIVE ─────────────────────────────────────────────
   Desktop is the priority — these games are played on a keyboard —
   but narrow widths must stay usable rather than merely not broken. */
@media (max-width: 900px) {
  .g-cards { grid-template-columns: 1fr; gap: 8px; }
  .g-card-desc { -webkit-line-clamp: 1; }
  .g-prompt-surface { min-height: 220px; }
}
@media (max-width: 560px) {
  .g-stage { padding: 14px 12px 16px; }
  .g-prompt { font-size: clamp(28px, 9vw, 40px); }
  .g-hud { gap: 6px; }
  .g-metric { min-width: 0; flex: 1 1 72px; padding: 7px 8px; }
  .g-metric-v { font-size: 17px; }
  .g-fall .game-arena { min-height: 240px; }
  /* Comfortable targets without inflating the desktop UI. */
  .g-card { min-height: 56px; padding: 12px; }
  .game-lang-btn { min-height: 44px; padding-left: 18px; padding-right: 18px; }
  .g-input, .g-fall .game-input { min-height: 48px; font-size: 17px; }
  .btn-start { min-height: 48px; }
  .g-res { gap: 16px; }
  .g-res-row strong { font-size: 22px; }
  .g-res-row.is-hero strong { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-input.is-wrong { animation: none; }
  .g-progress-fill { transition: none; }
}

/* Metrics live in a row beneath the topbar; the progress bar spans below. */
.g-hud-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px; }
[data-g-metrics] { display: flex; flex-direction: column; align-items: center; }