/* Part of Survival Language — see index.html for load order.
   Mini-games for kid profiles (js/screens.games.js) — only what's genuinely
   new: the "Найди пару" tile grid and the "На скорость" status chips.
   Everything else these screens use (the hub's entry cards, the quiz
   prompt/options, the win/end screens) reuses classes already defined in
   screens.css/lesson.css. */

  /* Home screen's "Игры" entry card (js/screens.home.js, screens/home.php).
     Used to be a filled pink card (var(--pink-100)) — Sofia (Sept 8, screenshots):
     on a boy's profile it read fine (blue personal hero above it, pink card
     stands out), but on a girl's profile it visually merged with the page —
     the personal hero color for girls IS pink (js/store.js KID_GENDER_THEMES),
     so a fixed-pink card sitting under a pink hero read as "more of the same
     pink" even though the literal fill/background pixels never changed. Picking
     a different fixed hue (blue only for pink profiles, or one global color like
     yellow) just relocates the same coincidence to whichever personal color or
     purchased theme happens to land on that hue next (Sofia herself flagged this
     for the "золотой"/neutral-gender theme, which really is amber/gold).
     Instead: drop the filled background entirely and match #alpha-entry's
     already-working treatment (screens.css) — a plain neutral surface card with
     just a colored glyph. A near-white/near-black surface is never close enough
     in lightness to any saturated personal hero color to blend with it, so this
     is immune to the coincidence by construction, not by picking the "right"
     color for today's three gender themes. The pink identity survives via the
     icon + hover border color (var(--accent), always the fixed brand pink,
     never gender-tinted since ?v=79). */
  #games-entry:hover{ border-color:var(--accent); }
  #games-entry .facts-entry-icon{ background:none; border:none; color:var(--accent); }

  /* ---- Games hub, round 2 (v72 shipped a bento — one big tile + a cramped
     2x2 grid; Sofia flagged it as unbalanced on a real phone). Full-width
     single column now, plus a gradient-fill welcome heading above it (same
     background-clip:text move as Home's hero, js/screens.home.js) and two
     labeled stacks — word games, then math games (Числа/Таблица умножения,
     newly reachable here — see js/screens.games.js's MATH_ENTRIES comment).
     Every tile is the same shape; what tells them apart is color, not size. */
  .games-welcome{ padding:6px 2px 4px; }
  .games-welcome-kicker{
    font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
    color:var(--ink-faint); margin-bottom:6px;
  }
  .games-welcome h1{
    font-family:"Unbounded", sans-serif; font-weight:800; font-size:26px; line-height:1.18; margin:0;
    text-wrap:balance; max-width:12em;
    background:linear-gradient(120deg, var(--hero-a) 0%, var(--accent) 55%, var(--hero-b) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  /* п.37: заголовок стопки (словесные / математические игры) — секция, а не
     мелкий лейбл, поэтому обычный регистр вместо капса. */
  .games-section-label{
    font-family:"Unbounded", sans-serif; font-size:12.5px; font-weight:700; color:var(--ink-faint);
    margin:26px 2px 12px;
  }
  .games-section-label:first-of-type{ margin-top:18px; }
  .games-stack{ display:flex; flex-direction:column; gap:var(--space-5, 20px); }
  .game-tile{
    display:flex; align-items:center; gap:var(--space-4); padding:var(--space-6) var(--space-4);
    border-radius:var(--radius-lg); border:none; color:#fff; text-align:left;
    position:relative; overflow:hidden; isolation:isolate; min-height:76px;
  }
  /* A soft highlight in the corner opposite where text sits — same trick the
     old .game-tile-big used, now on every tile since every tile is "the big
     one" in this layout. */
  .game-tile::after{
    content:""; position:absolute; inset:0; border-radius:inherit;
    background:radial-gradient(140% 160% at 100% -20%, rgba(255,255,255,.32), transparent 55%);
    pointer-events:none;
  }
  .game-tile-icon{
    position:relative; z-index:1; flex:none; display:flex; align-items:center; justify-content:center;
    width:56px; height:56px; opacity:.98;
  }
  .game-tile-icon svg{ width:32px; height:32px; display:block; }
  .game-tile-icon.glyph{ font-family:"Unbounded", sans-serif; font-weight:800; font-size:26px; }
  .game-tile-body{ position:relative; z-index:1; min-width:0; }
  .game-tile .t-title{ font-weight:700; font-size:16px; line-height:1.25; }
  .game-tile-sub{ display:block; font-size:12.5px; color:rgba(255,255,255,.9); margin-top:3px; line-height:1.35; }

  /* Sofia's own reference sheet (a 5x2 grid of gradient swatches, hex triples
     per card) — these seven are picked straight from it, at her 19° angle.
     Each stop order below is chosen so the darkest/most-saturated color of
     the three sits first (where the icon+title are), not necessarily the
     order her sheet listed them in — see the comment on GAMES_ENTRIES. */
  .g-tint-1{ background:linear-gradient(19deg, #274B74 0%, #8233C5 55%, #E963FD 100%); } /* Найди пару — the purple one, her explicit pick */
  .g-tint-2{ background:linear-gradient(19deg, #5C2774 0%, #335CC5 55%, #637FFD 100%); } /* Кто быстрее? */
  .g-tint-3{ background:linear-gradient(19deg, #8929AD 0%, #436AAC 55%, #43B7B8 100%); } /* Словодел */
  .g-tint-4{ background:linear-gradient(19deg, #276174 0%, #33C58E 55%, #63FD88 100%); } /* Что лишнее? */
  .g-tint-5{ background:linear-gradient(19deg, #F17B41 0%, #E05BA2 55%, #CD4BC9 100%); } /* Мемо */
  .g-tint-6{ background:linear-gradient(19deg, #D3208B 0%, #879AF2 55%, #FDA000 100%); } /* Числа */
  .g-tint-7{ background:linear-gradient(19deg, #363553 0%, #903775 55%, #E8458B 100%); } /* Таблица умножения */

  .match-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin-top:var(--space-4); }
  .match-col{ display:flex; flex-direction:column; gap:var(--space-3); }
  .match-tile{
    background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-md);
    padding:var(--space-3); text-align:center; font-weight:700; font-size:14.5px; line-height:1.25;
    min-height:56px; display:flex; align-items:center; justify-content:center;
    transition:border-color .15s ease, background .15s ease;
  }
  .match-tile .ka{ font-size:17px; }
  .match-tile:hover:not(:disabled){ border-color:var(--hero-b); }
  .match-tile.selected{
    border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--surface));
    box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  .match-tile.matched{ background:var(--success-soft); border-color:var(--success); color:var(--success); opacity:.7; }
  .match-tile.wrong{ background:var(--error-soft); border-color:var(--error); animation:shake .32s ease; }
  .match-tile:disabled{ cursor:default; }

  .speed-status-row{ display:flex; gap:var(--space-3); margin-top:var(--space-2); }
  .speed-status-chip{
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
    background:var(--surface-2); border-radius:999px; padding:8px 14px;
    font-size:13px; font-weight:700; color:var(--ink-soft);
  }
  .speed-status-chip b{ font-size:16px; color:var(--ink); }

  /* ---- Собери слово (word builder) ---- */
  /* Answer bar: one slot per letter of the target word, filled in order as the
     player taps the right scrambled tile. Empty slots stay dashed so the word's
     length is visible as a shape from the start (same "don't spoil it, but show
     the outline" idea as a crossword). */
  .wordbuild-answer{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:var(--space-6) 0 var(--space-2); }
  .wordbuild-slot{
    width:34px; height:42px; border-radius:var(--radius-sm); border:2px dashed var(--border);
    display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700;
    color:var(--ink); background:var(--surface-2); flex:none;
  }
  .wordbuild-slot.filled{ border-style:solid; border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--surface)); }
  /* Scramble row: every letter of the word, shuffled — tapped-out tiles stay in
     place (opacity down, no pointer events) rather than disappearing, so the
     remaining tiles don't jump around mid-word. */
  .wordbuild-tiles{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:var(--space-6); }
  .wordbuild-tile{
    width:44px; height:44px; border-radius:var(--radius-sm); border:1.5px solid var(--border);
    background:var(--surface); font-size:19px; font-weight:700; color:var(--ink);
    display:flex; align-items:center; justify-content:center; transition:border-color .15s ease, opacity .15s ease;
  }
  .wordbuild-tile:hover:not(:disabled){ border-color:var(--hero-b); }
  .wordbuild-tile:active:not(:disabled){ transform:translateY(1px); }
  .wordbuild-tile.used{ opacity:.25; pointer-events:none; }
  .wordbuild-tile.wrong{ border-color:var(--error); background:var(--error-soft); animation:shake .32s ease; }