/**
 * Games "arcade" skin — the shared look for every self-rendered game:
 * Guess the Word, Anagram, Word Search and Sorting.
 *
 * Loaded AFTER each game's own stylesheet (word-game.css, anagram-game.css,
 * word-search-game.css, sorting-game.css). Those files own layout and behaviour;
 * this file only re-skins them, so it uses the same class names at the same
 * specificity and wins on source order. Raw asset, filemtime-busted (hooks/init.php).
 *
 * Palette is the house brand ($brand-primary #651FFF, mint #20FFC0, pink #FFB0E6
 * in common/_colors.scss) plus shades of those, on light lavender play surfaces.
 * Text is a deep purple (--ga-purple-900), never black; every coloured tile or
 * button pairs its fill with a text colour that meets WCAG AA (≥4.5:1).
 *
 * Sections: tokens · page header · console (play area) · per-game boards ·
 * result card · known banner · leaderboard · motion.
 */

/* ===== Tokens ========================================================== */
.word-game,
.anagram-game,
.word-search-game,
.sorting-game {
  --ga-purple: #651fff;        /* house primary */
  --ga-purple-600: #5315e0;
  --ga-purple-700: #4210bd;
  --ga-purple-800: #300c8f;
  --ga-purple-900: #1f0766;    /* the "black": text on light tiles */
  --ga-lilac: #b898ff;
  --ga-lilac-200: #dccbff;
  --ga-lilac-100: #efe8ff;
  --ga-lilac-50: #f8f5ff;
  --ga-mint: #20ffc0;          /* house secondary */
  --ga-mint-600: #12c994;
  --ga-mint-100: #d4fff2;
  --ga-pink: #ffb0e6;          /* house tertiary */
  --ga-pink-500: #fc7ed3;      /* house entertain */
  --ga-pink-600: #e85cbd;
  --ga-yellow: #fffd90;        /* house entertain-secondary */
  --ga-coral: #ff7a7a;         /* house tech */
  --ga-radius-lg: 28px;
  --ga-radius: 16px;
  --ga-radius-sm: 10px;

  /* Re-point each game's own variables at the house palette so every rule in
     the base stylesheets (borders, accents, feedback colours) follows suit. */
  --wg-accent: var(--ga-lilac);
  --wg-accent-dark: var(--ga-purple);
  --wg-ink: var(--ga-purple-900);
  --wg-muted: #6a5f8c;
  --wg-line: var(--ga-lilac-100);
  --wg-correct: var(--ga-mint);
  --wg-present: var(--ga-pink-500);
  --wg-absent: #5a4a9c;
  --ag-accent: var(--ga-lilac);
  --ag-accent-dark: var(--ga-purple);
  --ag-ink: var(--ga-purple-900);
  --ag-muted: #6a5f8c;
  --ag-line: var(--ga-lilac-100);
  --ag-correct: var(--ga-mint);
  --ag-present: var(--ga-pink-500);
  --ws-accent: var(--ga-lilac);
  --ws-accent-dark: var(--ga-purple);
  --ws-ink: var(--ga-purple-900);
  --ws-muted: #6a5f8c;
  --ws-line: var(--ga-lilac-100);
  --ws-found: var(--ga-mint);
  --ws-miss: var(--ga-coral);
  --sg-accent: var(--ga-lilac);
  --sg-accent-dark: var(--ga-purple);
  --sg-ink: var(--ga-purple-900);
  --sg-muted: #6a5f8c;
  --sg-line: var(--ga-lilac-100);
}

/* ===== Page header + ad labels ========================================
   Same structure as the embedded-game pages (single-games.php): icon, breadcrumb
   and title across the full width, a divider, then the game beside the siderail.
   Markup: templates/includes/game-header.php. */
.games-head {
  grid-column: 1 / -1; /* span the game column and the siderail column */
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--ga-lilac-100);
}
.games-head__icon {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border-radius: 1rem;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(101, 31, 255, .18);
  background: linear-gradient(135deg, var(--ga-purple) 0%, var(--ga-mint) 100%);
}
.games-head__meta { min-width: 0; }
.games-head__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ga-purple);        /* 6.6:1 on white */
  transition: color .15s ease;
}
.games-head__breadcrumb:is(:hover, :focus-visible) {
  color: var(--ga-purple-800);    /* 11:1 — same direction, never through a low-contrast shade */
  text-decoration: none;
}
.games-head__breadcrumb-arrow { display: inline-block; transform: translateX(-2px); }
.games-head__title {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ga-purple-900);
}
.games-head__subtitle { margin: .5rem 0 0; font-size: 1rem; color: #4d4273; }

/* "Advertisement" label above the siderail (and the mobile MREC), as on the
   embedded-game pages: a real label element above the GPT slot. (Not a
   ::before — the site-wide .sas-ad::before is the "Advertisement loading" text.) */
:is(.word-game__siderail, .anagram-game__siderail, .word-search-game__siderail, .sorting-game__siderail),
:is(.word-game__video-mrec, .anagram-game__video-mrec, .word-search-game__video-mrec, .sorting-game__video-mrec) {
  flex-direction: column;
  align-items: center;
  gap: .375rem;
}
.games-ad-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6a5f8c;                 /* 5.8:1 on white */
}
.games-ad-slot { position: relative; display: flex; justify-content: center; width: 300px; max-width: 100%; }
.games-ad-slot--siderail { min-height: 600px; }
.games-ad-slot--mrec { min-height: 250px; }

:is(.word-game__intro, .anagram-game__intro, .word-search-game__intro, .sorting-game__intro) {
  font-size: 1.05rem;
  color: #3d3360;
}

/* ===== Console (the play area) ==========================================
   A light lavender play surface. All text on it is deep purple (--ga-purple-900
   ≈ 14:1 on the console), and colour carries the meaning on solid tiles and
   buttons, each paired with a text colour that meets WCAG AA (≥4.5:1). */
:is(.word-game__play, .anagram-game__play, .word-search-game__play, .sorting-game__play) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 0 0 1.5rem;
  padding: 1.75rem 1.75rem 1.5rem;
  border-radius: var(--ga-radius-lg);
  color: var(--ga-purple-900);
  background:
    radial-gradient(rgba(101, 31, 255, .09) 1.2px, transparent 1.6px) 0 0 / 20px 20px,
    radial-gradient(90% 70% at 100% 0%, rgba(32, 255, 192, .28) 0%, rgba(32, 255, 192, 0) 60%),
    radial-gradient(80% 70% at 0% 100%, rgba(255, 176, 230, .45) 0%, rgba(255, 176, 230, 0) 60%),
    linear-gradient(160deg, var(--ga-lilac-50) 0%, var(--ga-lilac-100) 100%);
  box-shadow:
    inset 0 0 0 2px var(--ga-lilac-200),
    0 18px 40px -24px rgba(48, 12, 143, .45);
}

/* Prompt = the console's headline. */
:is(.word-game__prompt, .anagram-game__prompt, .word-search-game__prompt, .sorting-game__prompt) {
  margin: 0 0 1rem;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ga-purple-900);
}
.sorting-game__bar { margin: 0 0 1rem; align-items: flex-end; }
.sorting-game__bar .sorting-game__prompt { margin: 0; }

/* Difficulty picker: chunky "select your level" buttons. Selected = solid
   house purple with white text (6.6:1). */
:is(.word-game__levels, .anagram-game__levels, .word-search-game__levels) {
  gap: .75rem;
  margin: 0 0 1.5rem;
}
:is(.word-game__level, .anagram-game__level, .word-search-game__level) {
  min-width: 7.25rem;
  padding: .7rem 1.25rem .8rem;
  border: 2px solid var(--ga-lilac-200);
  border-radius: var(--ga-radius);
  background: #fff;
  color: var(--ga-purple-900);
  box-shadow: 0 4px 0 var(--ga-lilac-200);
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .12s ease;
}
:is(.word-game__level, .anagram-game__level, .word-search-game__level):hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--ga-lilac);
  box-shadow: 0 6px 0 var(--ga-lilac);
}
:is(.word-game__level, .anagram-game__level, .word-search-game__level).is-selected {
  border-color: var(--ga-purple);
  background: var(--ga-purple);
  color: #fff;
  box-shadow: 0 4px 0 var(--ga-purple-800), 0 0 0 4px rgba(101, 31, 255, .18);
}
:is(.word-game__level, .anagram-game__level, .word-search-game__level).is-selected:hover:not(:disabled) {
  border-color: var(--ga-purple);
  box-shadow: 0 6px 0 var(--ga-purple-800), 0 0 0 4px rgba(101, 31, 255, .18);
}
/* Locked mid-game: flattened, but text stays ≥4.5:1 on the console. */
:is(.word-game__level, .anagram-game__level, .word-search-game__level):disabled { opacity: .72; box-shadow: none; }
:is(.word-game__level, .anagram-game__level, .word-search-game__level).is-selected:disabled { opacity: 1; }
:is(.word-game__level-name, .anagram-game__level-name, .word-search-game__level-name) { font-size: 1.05rem; font-weight: 800; }
:is(.word-game__level-detail, .anagram-game__level-detail, .word-search-game__level-detail) { color: #3a2f5e; }
:is(.word-game__level, .anagram-game__level, .word-search-game__level).is-selected :is(.word-game__level-detail, .anagram-game__level-detail, .word-search-game__level-detail) { color: var(--ga-lilac-100); }

/* Buttons: pressable keycaps. Primary = house purple + white text (6.6:1);
   ghost = white + purple text and border. */
:is(.word-game__btn, .anagram-game__btn, .word-search-game__btn, .sorting-game__btn) {
  position: relative;
  padding: .8rem 1.75rem;
  border-width: 2px;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .01em;
  transition: transform .1s ease, box-shadow .1s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
:is(.word-game__btn--primary, .anagram-game__btn--primary, .word-search-game__btn--primary, .sorting-game__btn--primary) {
  background: var(--ga-purple);
  color: #fff;
  box-shadow: 0 5px 0 var(--ga-purple-800), 0 12px 22px -10px rgba(101, 31, 255, .7);
}
:is(.word-game__btn--primary, .anagram-game__btn--primary, .word-search-game__btn--primary, .sorting-game__btn--primary):hover:not(:disabled) {
  background: var(--ga-purple-600);
  transform: translateY(-1px);
  box-shadow: 0 6px 0 var(--ga-purple-800), 0 14px 24px -10px rgba(101, 31, 255, .75);
}
:is(.word-game__btn, .anagram-game__btn, .word-search-game__btn, .sorting-game__btn):active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--ga-purple-800);
}
/* Disabled reads as "not yet": muted but still legible (6:1). */
:is(.word-game__btn--primary, .anagram-game__btn--primary, .word-search-game__btn--primary, .sorting-game__btn--primary):disabled {
  opacity: 1;
  background: var(--ga-lilac-200);
  color: #4d4273;
  box-shadow: 0 4px 0 var(--ga-lilac);
}
:is(.word-game__btn--ghost, .anagram-game__btn--ghost, .word-search-game__btn--ghost, .sorting-game__btn--ghost) {
  border-color: var(--ga-purple);
  background: #fff;
  color: var(--ga-purple);
  box-shadow: 0 4px 0 var(--ga-lilac-200);
}
:is(.word-game__btn--ghost, .anagram-game__btn--ghost, .word-search-game__btn--ghost, .sorting-game__btn--ghost):hover:not(:disabled) {
  background: var(--ga-lilac-100);
  transform: translateY(-1px);
}
:is(.word-game__btn--ghost, .anagram-game__btn--ghost, .word-search-game__btn--ghost, .sorting-game__btn--ghost):disabled { opacity: .72; box-shadow: none; }
:is(.word-game__btn, .anagram-game__btn, .word-search-game__btn, .sorting-game__btn):focus-visible {
  outline: 3px solid var(--ga-purple-900);
  outline-offset: 3px;
}

/* "Start game" breathes so the next step is obvious. */
:is(.word-game__btn, .anagram-game__btn, .word-search-game__btn, .sorting-game__btn)[data-start]:not([hidden]) {
  padding: .95rem 2.4rem;
  font-size: 1.12rem;
  animation: ga-breathe 2.4s ease-in-out infinite;
}

:is(.word-game__status, .anagram-game__status, .word-search-game__status, .sorting-game__status) {
  color: #4d4273;
  font-weight: 600;
}
:is(.word-game__noscript, .anagram-game__noscript, .word-search-game__noscript, .sorting-game__noscript) { color: #b0156f; }

/* ===== Guess the Word board ============================================
   Feedback tiles: right spot = mint, wrong spot = pink, not in word = slate
   purple — each with deep-purple or white text (all ≥ 7:1). */
.word-game__legend {
  justify-content: center;
  gap: .5rem;
  margin: -.25rem 0 1.25rem;
  color: var(--ga-purple-900);
}
.word-game__legend-item {
  padding: .3rem .75rem .3rem .4rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ga-lilac-200);
}
.word-game__legend-tile { width: 1.05rem; height: 1.05rem; border-radius: 5px; }
.word-game__legend-tile.is-correct { box-shadow: inset 0 0 0 1px var(--ga-mint-600); }

.word-game__grid { gap: .5rem; margin: 0 0 1.25rem; }
.word-game__row {
  grid-template-columns: repeat(var(--wg-cols, 5), minmax(0, 3.9rem));
  gap: .5rem;
}
.word-game__tile {
  border: 2px solid var(--ga-lilac-200);
  border-radius: var(--ga-radius-sm);
  background: rgba(255, 255, 255, .7);
  color: var(--ga-purple-900);
  font-size: 1.65rem;
  font-weight: 800;
}
.word-game__tile.is-filled {
  border-color: var(--ga-purple);
  background: #fff;
  animation: ga-pop .14s ease-out;
}
.word-game__tile:is(.is-correct, .is-present, .is-absent) {
  --ga-tile-from-bg: #fff;
  --ga-tile-from-border: var(--ga-purple);
  --ga-tile-from-ink: var(--ga-purple-900);
  box-shadow: inset 0 -4px 0 rgba(31, 7, 102, .18);
  animation: ga-flip .5s ease-in-out both;
}
.word-game__tile.is-correct { --ga-tile-bg: var(--ga-mint); --ga-tile-ink: var(--ga-purple-900); background: var(--ga-mint); border-color: var(--ga-mint); color: var(--ga-purple-900); }
.word-game__tile.is-present { --ga-tile-bg: var(--ga-pink-500); --ga-tile-ink: var(--ga-purple-900); background: var(--ga-pink-500); border-color: var(--ga-pink-500); color: var(--ga-purple-900); }
.word-game__tile.is-absent { --ga-tile-bg: #5a4a9c; --ga-tile-ink: #fff; background: #5a4a9c; border-color: #5a4a9c; color: #fff; }
/* Reveal the row left-to-right. */
.word-game__tile:nth-child(2) { animation-delay: .12s; }
.word-game__tile:nth-child(3) { animation-delay: .24s; }
.word-game__tile:nth-child(4) { animation-delay: .36s; }
.word-game__tile:nth-child(5) { animation-delay: .48s; }
.word-game__tile:nth-child(6) { animation-delay: .6s; }
.word-game__tile.is-filled:nth-child(n) { animation-delay: 0s; }

.word-game__keyboard { max-width: 38rem; margin-top: .75rem; }
.word-game__key-row { gap: .35rem; margin-bottom: .4rem; }
.word-game__key {
  max-width: 3.1rem;
  padding: .8rem 0;
  border: 0;
  border-radius: var(--ga-radius-sm);
  background: #fff;
  color: var(--ga-purple-900);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--ga-lilac-200), 0 4px 0 var(--ga-lilac-200);
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}
.word-game__key:hover { background: var(--ga-lilac-50); }
.word-game__key:active { transform: translateY(3px); box-shadow: inset 0 0 0 1px var(--ga-lilac-200), 0 1px 0 var(--ga-lilac-200); }
.word-game__key--wide { max-width: 5rem; background: var(--ga-lilac-100); }
.word-game__key.is-correct { background: var(--ga-mint); color: var(--ga-purple-900); box-shadow: 0 4px 0 var(--ga-mint-600); }
.word-game__key.is-present { background: var(--ga-pink-500); color: var(--ga-purple-900); box-shadow: 0 4px 0 var(--ga-pink-600); }
.word-game__key.is-absent { background: #5a4a9c; color: #fff; box-shadow: 0 4px 0 #3b2f72; }

/* ===== Anagram board =================================================== */
.anagram-game__answer,
.anagram-game__tray {
  gap: .5rem;
  max-width: calc(var(--ag-len, 8) * 4.1rem);
}
.anagram-game__answer { margin-bottom: 1.4rem; }
.anagram-game__tray { margin-bottom: 1.5rem; }
.anagram-game__slot {
  border: 2px dashed var(--ga-lilac);
  border-radius: var(--ga-radius-sm);
  background: rgba(255, 255, 255, .55);
  color: var(--ga-purple-900);
  font-weight: 800;
}
.anagram-game__slot.is-filled {
  border: 2px solid var(--ga-purple);
  background: #fff;
  color: var(--ga-purple-900);
  animation: ga-pop .14s ease-out;
}
.anagram-game__slot.is-locked {
  border: 2px solid var(--ga-pink-500);
  background: var(--ga-pink);
  color: var(--ga-purple-900);
  box-shadow: inset 0 -4px 0 rgba(31, 7, 102, .12);
}
.anagram-game__answer.is-won .anagram-game__slot {
  border-color: var(--ga-mint-600);
  background: var(--ga-mint);
  color: var(--ga-purple-900);
  box-shadow: inset 0 -4px 0 rgba(31, 7, 102, .14);
  animation: ga-hop .5s ease both;
}
.anagram-game__answer.is-won .anagram-game__slot:nth-child(2) { animation-delay: .05s; }
.anagram-game__answer.is-won .anagram-game__slot:nth-child(3) { animation-delay: .1s; }
.anagram-game__answer.is-won .anagram-game__slot:nth-child(4) { animation-delay: .15s; }
.anagram-game__answer.is-won .anagram-game__slot:nth-child(5) { animation-delay: .2s; }
.anagram-game__answer.is-won .anagram-game__slot:nth-child(6) { animation-delay: .25s; }
.anagram-game__answer.is-won .anagram-game__slot:nth-child(7) { animation-delay: .3s; }
.anagram-game__answer.is-won .anagram-game__slot:nth-child(8) { animation-delay: .35s; }
.anagram-game__answer.is-won .anagram-game__slot:nth-child(9) { animation-delay: .4s; }
.anagram-game__answer.is-won .anagram-game__slot:nth-child(10) { animation-delay: .45s; }

/* Letter tray: tumbled purple tiles (white letters, 6.6:1), as if just tipped
   out of the bag. */
.anagram-game__tile {
  border: 0;
  border-radius: var(--ga-radius-sm);
  background: linear-gradient(180deg, #7a3dff 0%, var(--ga-purple) 100%);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 5px 0 var(--ga-purple-800), 0 10px 18px -8px rgba(31, 7, 102, .55);
  transform: rotate(var(--ga-tilt, 0deg));
  transition: transform .14s ease, box-shadow .14s ease;
}
.anagram-game__tile:nth-child(4n+1) { --ga-tilt: -4deg; }
.anagram-game__tile:nth-child(4n+2) { --ga-tilt: 3deg; }
.anagram-game__tile:nth-child(4n+3) { --ga-tilt: -2deg; }
.anagram-game__tile:nth-child(4n+4) { --ga-tilt: 4deg; }
.anagram-game__tile:hover {
  transform: translateY(-4px) rotate(0deg);
  box-shadow: 0 8px 0 var(--ga-purple-800), 0 16px 22px -8px rgba(31, 7, 102, .55);
}
.anagram-game__tile:active { transform: translateY(3px) rotate(0deg); box-shadow: 0 2px 0 var(--ga-purple-800); }

/* ===== Word Search board =============================================== */
.word-search-game__meta {
  gap: .75rem;
  margin: -.25rem 0 1.25rem;
  color: #4d4273;
}
.word-search-game__meta > span {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding: .4rem 1rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--ga-lilac-200);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.word-search-game__meta b {
  color: var(--ga-purple);
  font-size: 1.25rem;
  letter-spacing: 0;
}

@media (min-width: 721px) {
  .word-search-game__layout { grid-template-columns: minmax(0, 1fr) 200px; gap: 1.25rem; }
  /* Fill the column: the base `margin: 0 auto` shrink-wraps a grid item. */
  .word-search-game__grid { width: 100%; }
  .word-search-game__wordlist { display: flex; flex-direction: column; gap: .4rem; }
}
/* The grid is printed on a white "puzzle card". */
.word-search-game__grid {
  gap: 3px;
  padding: .75rem;
  border-radius: var(--ga-radius);
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--ga-lilac-200), 0 6px 0 var(--ga-lilac-200);
}
.word-search-game__grid:empty { display: none; }
.word-search-game__cell {
  border-radius: 999px;
  background: transparent;
  color: var(--ga-purple-900);
  font-weight: 700;
  transition: background-color .12s ease, color .12s ease;
}
.word-search-game__cell:hover { background: var(--ga-lilac-100); }
.word-search-game__cell.is-preview { background: var(--ga-lilac-200); color: var(--ga-purple-900); }
.word-search-game__cell.is-anchor { background: var(--ga-purple); color: #fff; box-shadow: 0 0 0 3px rgba(101, 31, 255, .25); }
.word-search-game__cell.is-found { background: var(--ga-mint); color: var(--ga-purple-900); animation: ga-pop .25s ease-out; }
.word-search-game__cell.is-miss { background: var(--ga-coral); color: var(--ga-purple-900); }

/* Word list as chips (a column beside the grid on desktop, the base 2-column
   grid below it on phones); found words turn mint and strike through. */
.word-search-game__wordlist { gap: .4rem; }
.word-search-game__word {
  padding: .45rem .8rem;
  border-radius: var(--ga-radius-sm);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ga-lilac-200);
  color: var(--ga-purple-900);
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease;
}
.word-search-game__word::before {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--ga-lilac);
}
.word-search-game__word.is-found {
  background: var(--ga-mint);
  box-shadow: inset 0 0 0 1px var(--ga-mint-600);
  color: var(--ga-purple-800);
  text-decoration-thickness: 2px;
}
.word-search-game__word.is-found::before { background: var(--ga-purple-800); }

/* ===== Sorting board =================================================== */
.sorting-game__timer {
  padding: .4rem 1rem;
  border: 0;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--ga-purple);
}
.sorting-game__timer-label { color: #4d4273; font-weight: 700; }
.sorting-game__timer-value { color: var(--ga-purple); font-size: 1.35rem; font-weight: 800; }
.sorting-game__timer.is-low {
  background: var(--ga-coral);
  box-shadow: inset 0 0 0 2px var(--ga-purple-900);
  animation: ga-alarm .9s ease-in-out infinite;
}
.sorting-game__timer.is-low .sorting-game__timer-value,
.sorting-game__timer.is-low .sorting-game__timer-label { color: var(--ga-purple-900); }

.sorting-game__timelimit {
  border: 0;
  border-radius: var(--ga-radius);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ga-lilac-200), inset 5px 0 0 var(--ga-purple);
  color: var(--ga-purple-900);
}
.sorting-game__timelimit strong { color: var(--ga-purple); }

.sorting-game__item {
  gap: .85rem;
  margin-bottom: .6rem;
  padding: .75rem .9rem;
  border: 0;
  border-radius: var(--ga-radius);
  background: #fff;
  color: var(--ga-purple-900);
  box-shadow: inset 0 0 0 1px var(--ga-lilac-200), 0 4px 0 var(--ga-lilac-200);
  transition: box-shadow .15s ease, background-color .2s ease; /* never transform: JS drives it */
}
.sorting-game__item--live:hover { box-shadow: inset 0 0 0 2px var(--ga-lilac), 0 4px 0 var(--ga-lilac); }
.sorting-game__item.is-dragging {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--ga-purple), 0 22px 40px -14px rgba(31, 7, 102, .6);
}
.sorting-game__item::before {
  flex-basis: 2.1rem;
  height: 2.1rem;
  background: linear-gradient(135deg, var(--ga-purple), var(--ga-purple-700));
  box-shadow: inset 0 -3px 0 rgba(31, 7, 102, .35);
  font-size: .95rem;
  font-weight: 800;
}
.sorting-game__grip { color: var(--ga-lilac); font-weight: 700; }
.sorting-game__item-media img { width: 48px; height: 48px; border-radius: var(--ga-radius-sm); }
.sorting-game__item-label { font-weight: 700; }
.sorting-game__move {
  width: 30px;
  height: 22px;
  border: 0;
  border-radius: 7px;
  background: var(--ga-lilac-100);
  color: var(--ga-purple);
}
.sorting-game__move:hover { background: var(--ga-purple); color: #fff; }
.sorting-game__list.is-locked .sorting-game__item { opacity: 1; }
.sorting-game__item.is-correct {
  background: var(--ga-mint);
  box-shadow: inset 0 0 0 1px var(--ga-mint-600), 0 4px 0 var(--ga-mint-600);
}
.sorting-game__item.is-correct::before { background: var(--ga-purple-900); }
.sorting-game__item-mark.is-correct { background: var(--ga-purple-900); color: var(--ga-mint); }
.sorting-game__controls { margin-top: 1.25rem; }

/* ===== Result card ===================================================== */
:is(.word-game__result, .anagram-game__result, .word-search-game__result, .sorting-game__result) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 0 0 1.5rem;
  padding: 1.75rem;
  border: 0;
  border-radius: var(--ga-radius-lg);
  background:
    radial-gradient(circle at 12% 18%, var(--ga-yellow) 0 5px, transparent 6px),
    radial-gradient(circle at 88% 14%, var(--ga-mint) 0 7px, transparent 8px),
    radial-gradient(circle at 78% 82%, var(--ga-purple) 0 4px, transparent 5px),
    radial-gradient(circle at 94% 56%, var(--ga-pink-500) 0 5px, transparent 6px),
    radial-gradient(circle at 6% 74%, var(--ga-lilac) 0 6px, transparent 7px),
    linear-gradient(135deg, var(--ga-pink) 0%, var(--ga-lilac-200) 50%, var(--ga-mint-100) 100%);
  box-shadow: 0 20px 40px -22px rgba(48, 12, 143, .6);
}
:is(.word-game__result, .anagram-game__result, .word-search-game__result, .sorting-game__result):not([hidden]) {
  animation: ga-rise .45s cubic-bezier(.2, .9, .3, 1.2) both;
}
:is(.word-game__score, .anagram-game__score, .word-search-game__score, .sorting-game__score) {
  margin: 0 0 1.25rem;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ga-purple-900);
}
:is(.word-game__score, .anagram-game__score, .word-search-game__score, .sorting-game__score) strong {
  display: inline-block;
  padding: 0 .4rem;
  border-radius: 8px;
  background: var(--ga-purple);
  color: #fff;
}
:is(.word-game__form, .anagram-game__form, .word-search-game__form, .sorting-game__form) {
  padding: 1.25rem;
  border-radius: var(--ga-radius);
  background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9);
}
:is(.word-game__form, .anagram-game__form, .word-search-game__form, .sorting-game__form).is-known {
  padding: 0;
  background: none;
  box-shadow: none;
}
:is(.word-game__form-intro, .anagram-game__form-intro, .word-search-game__form-intro, .sorting-game__form-intro) {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ga-purple-900);
}
:is(.word-game__field, .anagram-game__field, .word-search-game__field, .sorting-game__field) { font-weight: 600; color: var(--ga-purple-900); }
:is(.word-game__field, .anagram-game__field, .word-search-game__field, .sorting-game__field) input {
  padding: .65rem .85rem;
  border: 2px solid var(--ga-lilac-200);
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
:is(.word-game__field, .anagram-game__field, .word-search-game__field, .sorting-game__field) input:focus-visible {
  outline: 0;
  border-color: var(--ga-purple);
  box-shadow: 0 0 0 4px rgba(101, 31, 255, .18);
}
:is(.word-game__consent, .anagram-game__consent, .word-search-game__consent, .sorting-game__consent) input { accent-color: var(--ga-purple); }
:is(.word-game__form-feedback, .anagram-game__form-feedback, .word-search-game__form-feedback, .sorting-game__form-feedback) { font-weight: 600; color: var(--ga-purple-700); }

/* ===== Known-player banner ============================================= */
:is(.word-game__known, .anagram-game__known, .word-search-game__known, .sorting-game__known) {
  position: relative;
  padding: .9rem 1.1rem .9rem 3.6rem;
  border: 0;
  border-radius: var(--ga-radius);
  background: var(--ga-lilac-100);
}
:is(.word-game__known, .anagram-game__known, .word-search-game__known, .sorting-game__known)::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 1.9rem;
  height: 1.9rem;
  margin-top: -.95rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, var(--ga-purple-900) 0 .3rem, transparent .32rem),
    radial-gradient(ellipse at 50% 100%, var(--ga-purple-900) 0 .55rem, transparent .57rem),
    var(--ga-mint);
}
:is(.word-game__known-name, .anagram-game__known-name, .word-search-game__known-name, .sorting-game__known-name) strong { color: var(--ga-purple); }

/* ===== Leaderboard ===================================================== */
:is(.word-game__leaderboard, .anagram-game__leaderboard, .word-search-game__leaderboard, .sorting-game__leaderboard) {
  margin-top: 0;
  padding: 1.5rem 1.5rem 1.25rem;
  border-radius: var(--ga-radius-lg);
  background: linear-gradient(180deg, var(--ga-lilac-50) 0%, #fff 60%);
  box-shadow: inset 0 0 0 2px var(--ga-lilac-100);
}
:is(.word-game__leaderboard-title, .anagram-game__leaderboard-title, .word-search-game__leaderboard-title, .sorting-game__leaderboard-title) {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1rem;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ga-purple-900);
}
/* Podium badge (2nd · 1st · 3rd bars in the podium colours), drawn in CSS so
   no icon asset is needed. */
:is(.word-game__leaderboard-title, .anagram-game__leaderboard-title, .word-search-game__leaderboard-title, .sorting-game__leaderboard-title)::before {
  content: '';
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 2.3rem;
  height: 2.3rem;
  padding: .45rem .4rem 0;
  border-radius: 12px;
  background:
    linear-gradient(var(--ga-mint), var(--ga-mint)) 0 100% / 30% 62% no-repeat,
    linear-gradient(var(--ga-yellow), var(--ga-yellow)) 50% 100% / 30% 100% no-repeat,
    linear-gradient(var(--ga-pink), var(--ga-pink)) 100% 100% / 30% 42% no-repeat,
    var(--ga-purple);
  background-origin: content-box;
  box-shadow: 0 3px 0 var(--ga-purple-800);
}
:is(.word-game__board-row, .anagram-game__board-row, .word-search-game__board-row, .sorting-game__board-row) {
  grid-template-columns: 2.6rem 1fr auto;
  gap: .85rem;
  padding: .55rem .75rem;
  border-bottom: 0;
  border-radius: 12px;
  transition: background-color .15s ease;
}
:is(.word-game__board-row, .anagram-game__board-row, .word-search-game__board-row, .sorting-game__board-row) + :is(.word-game__board-row, .anagram-game__board-row, .word-search-game__board-row, .sorting-game__board-row) { margin-top: .2rem; }
:is(.word-game__board-row, .anagram-game__board-row, .word-search-game__board-row, .sorting-game__board-row):hover { background: var(--ga-lilac-50); }
:is(.word-game__board-rank, .anagram-game__board-rank, .word-search-game__board-rank, .sorting-game__board-rank) {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--ga-lilac-100);
  color: var(--ga-purple);
  font-size: .82rem;
  font-weight: 800;
}
/* Podium: the first three rows of the board are always ranks 1–3. */
:is(.word-game__board-row, .anagram-game__board-row, .word-search-game__board-row, .sorting-game__board-row):nth-child(-n+3) {
  font-weight: 700;
}
:is(.word-game__board-row, .anagram-game__board-row, .word-search-game__board-row, .sorting-game__board-row):nth-child(1) :is(.word-game__board-rank, .anagram-game__board-rank, .word-search-game__board-rank, .sorting-game__board-rank) {
  background: var(--ga-yellow);
  color: var(--ga-purple-900);
  box-shadow: 0 3px 0 #d8d55a;
}
:is(.word-game__board-row, .anagram-game__board-row, .word-search-game__board-row, .sorting-game__board-row):nth-child(2) :is(.word-game__board-rank, .anagram-game__board-rank, .word-search-game__board-rank, .sorting-game__board-rank) {
  background: var(--ga-mint);
  color: var(--ga-purple-900);
  box-shadow: 0 3px 0 var(--ga-mint-600);
}
:is(.word-game__board-row, .anagram-game__board-row, .word-search-game__board-row, .sorting-game__board-row):nth-child(3) :is(.word-game__board-rank, .anagram-game__board-rank, .word-search-game__board-rank, .sorting-game__board-rank) {
  background: var(--ga-pink);
  color: var(--ga-purple-900);
  box-shadow: 0 3px 0 var(--ga-pink-500);
}
:is(.word-game__board-score, .anagram-game__board-score, .word-search-game__board-score, .sorting-game__board-score) {
  padding: .2rem .7rem;
  border-radius: 999px;
  background: var(--ga-lilac-100);
  color: var(--ga-purple-800);
  font-weight: 800;
}
:is(.word-game__board-row, .anagram-game__board-row, .word-search-game__board-row, .sorting-game__board-row).is-me {
  background: var(--ga-purple);
  color: #fff;
}
:is(.word-game__board-row, .anagram-game__board-row, .word-search-game__board-row, .sorting-game__board-row).is-me em { color: var(--ga-mint); }
:is(.word-game__board-row, .anagram-game__board-row, .word-search-game__board-row, .sorting-game__board-row).is-me :is(.word-game__board-score, .anagram-game__board-score, .word-search-game__board-score, .sorting-game__board-score) {
  background: var(--ga-mint);
  color: var(--ga-purple-900);
}
:is(.word-game__board-empty, .anagram-game__board-empty, .word-search-game__board-empty, .sorting-game__board-empty) {
  padding: 1.25rem;
  border-radius: var(--ga-radius);
  background: var(--ga-lilac-100);
  color: var(--ga-purple-700);
  font-style: normal;
  font-weight: 600;
  text-align: center;
}
:is(.word-game__board-note, .anagram-game__board-note, .word-search-game__board-note) { color: #6a5f8c; }

/* ===== Small screens =================================================== */
@media (max-width: 560px) {
  :is(.word-game__play, .anagram-game__play, .word-search-game__play, .sorting-game__play) {
    margin-left: -.5rem;
    margin-right: -.5rem;
    padding: 1.25rem 1rem 1.1rem;
    border-radius: 22px;
  }
  .games-head { gap: 1rem; padding-bottom: 1rem; }
  .games-head__icon { flex-basis: 56px; width: 56px; height: 56px; border-radius: .75rem; }
  .games-head__title { font-size: 1.625rem; }
  .games-head__subtitle { font-size: .9375rem; }
  /* 3 levels → one row of 3; 4 levels → a 2×2 block (never 3 + 1). */
  :is(.word-game__levels, .anagram-game__levels, .word-search-game__levels) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
  }
  :is(.word-game__levels, .anagram-game__levels, .word-search-game__levels):has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  :is(.word-game__level, .anagram-game__level, .word-search-game__level) { min-width: 0; padding: .6rem .4rem .7rem; }
  .word-game__row { grid-template-columns: repeat(var(--wg-cols, 5), minmax(0, 3.2rem)); gap: .4rem; }
  .word-game__grid { gap: .4rem; }
  .word-game__tile { font-size: 1.35rem; }
  .word-game__key-row { gap: .25rem; }
  .word-game__key { padding: .9rem 0; border-radius: 8px; }
  .word-game__legend { gap: .35rem; font-size: .76rem; }
  .anagram-game__answer,
  .anagram-game__tray { gap: .35rem; }
  .word-search-game__grid { padding: .45rem; gap: 2px; }
  :is(.word-game__result, .anagram-game__result, .word-search-game__result, .sorting-game__result),
  :is(.word-game__leaderboard, .anagram-game__leaderboard, .word-search-game__leaderboard, .sorting-game__leaderboard) {
    padding: 1.25rem 1rem;
    border-radius: 22px;
  }
  .sorting-game__item { padding: .65rem .7rem; gap: .6rem; }
}

/* ===== Motion ========================================================== */
@keyframes ga-pop {
  0% { transform: scale(.88); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
/* Flip: the first half shows the typed tile, the second half the result. */
@keyframes ga-flip {
  0% { transform: rotateX(0); background: var(--ga-tile-from-bg); border-color: var(--ga-tile-from-border); color: var(--ga-tile-from-ink); box-shadow: none; }
  49% { transform: rotateX(90deg); background: var(--ga-tile-from-bg); border-color: var(--ga-tile-from-border); color: var(--ga-tile-from-ink); box-shadow: none; }
  50% { transform: rotateX(90deg); background: var(--ga-tile-bg); border-color: var(--ga-tile-bg); color: var(--ga-tile-ink); }
  100% { transform: rotateX(0); background: var(--ga-tile-bg); border-color: var(--ga-tile-bg); color: var(--ga-tile-ink); }
}
@keyframes ga-hop {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-12px); }
  70% { transform: translateY(2px); }
}
@keyframes ga-rise {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes ga-breathe {
  0%, 100% { box-shadow: 0 5px 0 var(--ga-purple-800), 0 0 0 0 rgba(101, 31, 255, .35); }
  50% { box-shadow: 0 5px 0 var(--ga-purple-800), 0 0 0 12px rgba(101, 31, 255, 0); }
}
@keyframes ga-alarm {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--ga-purple-900), 0 0 0 0 rgba(255, 122, 122, .6); }
  50% { box-shadow: inset 0 0 0 2px var(--ga-purple-900), 0 0 0 10px rgba(255, 122, 122, 0); }
}

@media (prefers-reduced-motion: reduce) {
  :is(.word-game, .anagram-game, .word-search-game, .sorting-game) *,
  :is(.word-game, .anagram-game, .word-search-game, .sorting-game) *::before {
    animation: none !important;
    transition: none !important;
  }
  .anagram-game__tile,
  .anagram-game__tile:hover { transform: none; }
}