/* =============================================================================
   ui/wsa.css  —  Word Search Academy (free web version) styles.
   Vanilla CSS, no frameworks. Colours come from CSS variables so a future
   theme can be added by overriding :root. Mobile-first, wide-age-group look.
============================================================================= */
:root {
  --wsa-bg: #f4f7fb;
  --wsa-surface: #ffffff;
  --wsa-ink: #1f2a37;
  --wsa-muted: #5b6b7b;
  --wsa-line: #d9e1ea;
  --wsa-accent: #2563eb;   /* AA-contrast blue (>=4.5:1 on the light bg + white-on-accent) */
  --wsa-accent-ink: #ffffff;
  --wsa-found: #2ec4b6;
  --wsa-found-ink: #ffffff;
  --wsa-sel: #ffd166;
  --wsa-sel-ink: #1f2a37;
  --wsa-hint: #ff7ad9;
  --wsa-radius: 14px;
  --wsa-shadow: 0 6px 22px rgba(31, 42, 55, .10);
  --wsa-cell-font: 22px;
  font-synthesis: none;
}

* { box-sizing: border-box; }

.wsa {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--wsa-ink);
  max-width: 960px;
  margin: 0 auto;
  padding: 12px;
}

/* --- top bar --- */
.wsa-bar {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.wsa-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: clamp(1.1rem, 4vw, 1.5rem); }
.wsa-emoji { font-size: 1.4em; }
.wsa-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.wsa-intro { color: var(--wsa-muted); margin: 0 0 12px; }

.wsa-btn {
  appearance: none; border: 0; cursor: pointer;
  background: var(--wsa-accent); color: var(--wsa-accent-ink);
  font: inherit; font-weight: 600;
  padding: 10px 16px; border-radius: 10px;
  box-shadow: var(--wsa-shadow);
  transition: transform .08s ease, filter .15s ease;
}
.wsa-btn:hover { filter: brightness(1.05); }
.wsa-btn:active { transform: translateY(1px); }
.wsa-btn-ghost { background: var(--wsa-surface); color: var(--wsa-ink); border: 1px solid var(--wsa-line); }
.wsa-room-options { font-size: .9rem; padding: 7px 14px; min-height: 42px; box-sizing: border-box; margin: 0; display: inline-flex; align-items: center; }   /* ready-room "Word options" - sits in the control group */
.wsa-ready .wsa-select { min-height: 42px; box-sizing: border-box; }   /* selects + button all the same height */
/* Desktop: all controls flow across in ONE row (the row groups "dissolve"). */
.wsa-ready .wsa-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.wsa-ready .wsa-crow { display: contents; }
.wsa-ready .wsa-crow > .wsa-select, .wsa-ready .wsa-crow > .wsa-room-options { flex: 0 0 auto; }
/* Phone: stack into two tidy rows - languages on top, settings below. */
@media (max-width: 640px) {
  .wsa-ready .wsa-controls { flex-direction: column; align-items: stretch; max-width: 460px; }
  .wsa-ready .wsa-crow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .wsa-ready .wsa-crow > .wsa-select { flex: 1 1 0; min-width: 0; max-width: none; }
}
.wsa-skip { display: block; width: 100%; margin-top: 12px; padding: 12px; font-size: 1.05rem; }   /* big "Skip for now" */
.wsa-ml-note { margin: 6px 0 12px; font-size: .82rem; color: var(--wsa-muted); }   /* automated-translation notice */
.wsa-learn-note { margin: 4px 0 8px; font-size: .9rem; font-weight: 600; color: var(--wsa-accent, #3a86ff); }   /* which language the reveal shows */
.wsa-learn-note[hidden] { display: none; }
.wsa-word-trans { color: var(--wsa-accent); font-weight: 700; }                     /* meaning kept beside a found word */

/* Big centred learning reveal over the grid (e.g. "CHAT = KATZE"). */
.wsa-reveal {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 90%; text-align: center;
  background: var(--wsa-ink); color: var(--wsa-bg);
  padding: 16px 24px; border-radius: 14px;
  font-size: clamp(1.4rem, 5vw, 2.3rem); font-weight: 800; line-height: 1.2;
  box-shadow: 0 12px 44px rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none; z-index: 7; transition: opacity .18s ease;
}
.wsa-reveal.is-on { opacity: .97; pointer-events: auto; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .wsa-reveal { transition: none; } }
.wsa-select {
  font: inherit; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--wsa-line); background: var(--wsa-surface); color: var(--wsa-ink);
}

/* --- stage: grid + word list --- */
.wsa-stage { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) {
  .wsa-stage { grid-template-columns: minmax(0, 1.6fr) minmax(180px, 1fr); align-items: start; }
}

.wsa-gridwrap {
  background: var(--wsa-surface); border-radius: var(--wsa-radius);
  box-shadow: var(--wsa-shadow); padding: 10px;
}
.wsa-grid {
  display: grid;
  /* minmax(0,1fr) lets cells shrink below the letter's width, so the grid never
     overflows the screen (the cause of the right-edge crowding on small phones). */
  grid-template-columns: repeat(var(--wsa-size, 10), minmax(0, 1fr));
  gap: 2px;
  container-type: inline-size;   /* enables cqw so letters scale to the grid */
  touch-action: none;            /* let us own touch drags */
  user-select: none; -webkit-user-select: none;
}
.wsa-cell {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--wsa-bg);
  border-radius: 6px;
  /* Letter scales with the grid width so it always fits on any screen and any
     piece count. --wsa-font-scale is raised by the accessibility text-size options. */
  font-size: 20px; /* fallback for browsers without container query units */
  font-size: clamp(
    calc(11px * var(--wsa-font-scale, 1)),
    calc(60cqw / var(--wsa-size, 10) * var(--wsa-font-scale, 1)),
    calc(30px * var(--wsa-font-scale, 1))
  );
  font-weight: 700; line-height: 1;
  color: var(--wsa-ink);
  cursor: pointer;
  overflow: hidden;
}
.wsa-cell span { pointer-events: none; }
.wsa-cell.is-sel { background: var(--wsa-sel); color: var(--wsa-sel-ink); }
.wsa-cell.is-found { background: var(--wsa-found); color: var(--wsa-found-ink); }
.wsa-cell.is-hint { outline: 3px solid var(--wsa-hint); outline-offset: -3px; }
.wsa-cell.is-pop { animation: wsa-pop .35s ease; }
/* "Show first letters" aid: ring the starting square of each unfound word. */
.wsa-cell.wsa-start { box-shadow: inset 0 0 0 2px var(--wsa-accent); border-radius: 8px; }
@keyframes wsa-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* --- word list --- */
.wsa-side { background: var(--wsa-surface); border-radius: var(--wsa-radius); box-shadow: var(--wsa-shadow); padding: 14px 16px; }
.wsa-status { font-weight: 700; margin-bottom: 8px; color: var(--wsa-muted); }
.wsa-words { list-style: none; margin: 0; padding: 0; columns: 2; }
@media (min-width: 760px) { .wsa-words { columns: 1; } }
.wsa-word { padding: 4px 0; cursor: pointer; break-inside: avoid; }
.wsa-word:hover { color: var(--wsa-accent); }
/* Found words: a big blue tick instead of a strike-through, so the word (and its
   translation) stays easy to read. */
.wsa-word.is-found { cursor: default; }
.wsa-word.is-found::before { content: "✓ "; color: var(--wsa-accent); font-weight: 800; font-size: 1.15em; }
.wsa-alt { color: var(--wsa-muted); font-size: .82em; font-style: italic; }

/* --- win overlay --- */
.wsa-win {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 42, 55, .55); padding: 16px;
}
.wsa-win[hidden] { display: none; }
.wsa-win-card {
  position: relative; background: var(--wsa-surface); color: var(--wsa-ink);
  border-radius: var(--wsa-radius); box-shadow: var(--wsa-shadow);
  padding: 28px; text-align: center; max-width: 360px; width: 100%;
}
.wsa-win-title { margin: 0 0 8px; font-size: 1.6rem; }
.wsa-win-text { margin: 0 0 18px; color: var(--wsa-muted); }
.wsa-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* dismiss the win modal to admire the finished grid */
.wsa-win-x {
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px;
  border: 1px solid var(--wsa-line); border-radius: 9px;
  background: var(--wsa-surface); color: var(--wsa-ink); font-size: 1rem; cursor: pointer;
}
/* stacked, clearly-separated action buttons */
.wsa-win-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.wsa-win-actions .wsa-btn { width: 100%; }
.wsa-btn-shopnow {
  appearance: none; cursor: pointer; font: inherit; font-weight: 700;
  padding: 10px 16px; border-radius: 10px; border: 0;
  background: var(--wsa-found); color: var(--wsa-found-ink);
  box-shadow: var(--wsa-shadow); margin-top: 4px;
}
.wsa-btn-shopnow:hover { filter: brightness(1.05); }
.wsa-win-x:focus-visible, .wsa-btn-shopnow:focus-visible { outline: 3px solid var(--wsa-accent); outline-offset: 2px; }

/* floating button that reopens the "Well done" card after stepping away to admire the grid */
.wsa-win-reopen {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 50;
  border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700;
  padding: 12px 22px; background: var(--wsa-accent, #3a86ff); color: #fff;
  box-shadow: 0 6px 18px rgba(31, 42, 55, .3);
}
.wsa-win-reopen[hidden] { display: none; }
.wsa-win-reopen:hover { filter: brightness(1.05); }
.wsa-win-reopen:focus-visible { outline: 3px solid var(--wsa-ink); outline-offset: 2px; }

/* --- visible keyboard focus (helps low-vision + keyboard users) --- */
.wsa :focus-visible,
.wsa-btn:focus-visible,
.wsa-select:focus-visible {
  outline: 3px solid var(--wsa-accent);
  outline-offset: 2px;
}

/* --- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .wsa-cell.is-pop { animation: none; }
}

/* --- compact the top area on phones so the grid sits high and the page
       does not shift while selecting words --- */
@media (max-width: 760px) {
  .wsa { padding: 8px 10px; }
  body { overscroll-behavior-y: contain; }   /* no rubber-band scroll on drag */

  .wsa-bar { margin-bottom: 6px; gap: 8px 10px; }
  .wsa-title { font-size: 1.1rem; gap: 6px; }
  .wsa-emoji { font-size: 1.15em; }

  .wsa-controls { gap: 6px; }
  .wsa-btn { padding: 7px 12px; }
  .wsa-select { padding: 7px 10px; max-width: 46vw; }

  .wsa-intro { display: none; }   /* the flavour line adds little on a phone - reclaim the space */

  .wsa-gridwrap { padding: 6px; }
  .wsa-side { padding: 10px 12px; }
  .wsa-stage { gap: 12px; }
}

/* =============================================================================
   READY ROOM (the page before play): words preview + fenced ad + Play button
============================================================================= */
.wsa-ready-words { margin-bottom: 0; }
.wsa-word-static { cursor: default; }
.wsa-word-static:hover { color: inherit; }

/* Word preview: flow into as many columns as comfortably fit (up to 4) so a long
   list stays short vertically and the advert below stays in view on wide screens.
   (Overrides the base 1-column rule for wide screens — this preview only.) */
.wsa-ready-words .wsa-words { columns: 9rem 4; column-gap: 30px; }

/* A little playful variety in size and weight — purely cosmetic, makes the list
   feel friendly. Each word stays on one line (break-inside: avoid is already set). */
.wsa-ready-words .wsa-word { line-height: 1.55; }
.wsa-ready-words .wsa-word:nth-child(5n+1) { font-size: 1.00em; font-weight: 600; }
.wsa-ready-words .wsa-word:nth-child(5n+2) { font-size: 1.16em; font-weight: 800; }
.wsa-ready-words .wsa-word:nth-child(5n+3) { font-size: .95em;  font-weight: 600; }
.wsa-ready-words .wsa-word:nth-child(5n+4) { font-size: 1.09em; font-weight: 700; }
.wsa-ready-words .wsa-word:nth-child(5n)   { font-size: 1.02em; font-weight: 800; }
/* Accessibility: keep it calm and uniform in the readable / dyslexia text setting. */
:root[data-font="readable"] .wsa-ready-words .wsa-word {
  font-size: 1em; font-weight: 600; line-height: 1.7;
}

/* Phones: shrink the word preview so it doesn't dominate the screen. The em-based
   sizes above scale down with the container, keeping the variety but smaller and
   tighter. Left at full size in the dyslexia/readable mode (legibility first). */
@media (max-width: 640px) {
  :root:not([data-font="readable"]) .wsa-ready-words .wsa-words {
    font-size: .82rem; columns: 8rem 3; column-gap: 18px;
  }
  .wsa-ready-words .wsa-word { padding: 2px 0; line-height: 1.4; }
  /* Phone: just a tighter gap; the advert sizes itself (responsive AdSense). */
  .wsa-adzone { margin: 16px 0; }
}

.wsa-adzone {
  margin: 28px 0;                       /* deliberate gap so it can't be mis-tapped */
  min-height: 120px;
  display: flex; align-items: center; justify-content: center;
  background: var(--wsa-surface);
  border: 2px dashed var(--wsa-line); border-radius: 12px;
  color: var(--wsa-muted);
}
.wsa-adzone-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
/* "Advertisement" caption shown above the injected ad (see site/promotional.html) */
.promo-label { text-align: center; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wsa-muted); margin: 0 0 4px; }

/* Responsive AdSense needs a real width when it renders, or it throws
   "availableWidth=0". These zones centre their placeholder with flexbox (which
   collapses an ad to zero width), so stack them as a column and let the injected
   ad fill the full width. */
.ad-slot, .wsa-adzone { flex-direction: column; }
.ad-slot .promo-ads, .ad-slot .promo-amazon,
.wsa-adzone .promo-ads, .wsa-adzone .promo-amazon { width: 100%; }
.ad-slot .adsbygoogle, .wsa-adzone .adsbygoogle { display: block; width: 100%; }

.wsa-play-btn {
  display: block; width: 100%;
  margin-top: 20px;                     /* clear separation from the ad above */
  padding: 16px 20px; font-size: 1.15rem;
}

/* =============================================================================
   PLAY OVERLAY — two layouts:
     • Large screens (desktop / large tablets): a sensibly-sized centred MODAL
       (never the whole display), grid + word-list side by side (classic).
     • Small screens (phones / small tablets): fills the screen (true fullscreen
       requested in JS), with a slide-up word panel that SHRINKS the grid.
   No adverts inside play — ads live only on the underlying page.
============================================================================= */
body.wsa-playing { overflow: hidden; }   /* lock the page behind the overlay */

.wsa-ov {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 22, 28, .55);     /* dim backdrop (seen on large screens) */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.wsa-ov-panel {
  position: relative;                    /* anchor for the toast */
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--wsa-bg); color: var(--wsa-ink);
  width: 100%; height: 100%;             /* default (small) = fill the screen */
}
/* word the player has already spent a hint on (re-showing it is free) */
.wsa-ov-words .wsa-word.is-hinted { color: var(--wsa-muted); }
.wsa-ov-words .wsa-word.is-hinted::after { content: " ·shown"; font-size: .72em; opacity: .7; }

.wsa-ov-toast {
  position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 14px);
  background: var(--wsa-ink); color: var(--wsa-bg);
  padding: 8px 14px; border-radius: 10px; font-size: .9rem; font-weight: 600;
  opacity: 0; pointer-events: none; z-index: 6;
  transition: opacity .2s ease, transform .2s ease;
}
.wsa-ov-toast.is-on { opacity: .96; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .wsa-ov-toast { transition: opacity .2s ease; } }
/* large screens: a contained modal, not the entire monitor */
.wsa-ov-large .wsa-ov-panel {
  width: min(1100px, 94vw);
  height: min(860px, 92vh);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}

.wsa-ov-top {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px;
  padding: 8px 10px; background: var(--wsa-surface);
  border-bottom: 1px solid var(--wsa-line);
}
.wsa-ov-title { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.wsa-ov-status { flex: 1; padding-left: 12px; color: var(--wsa-muted); font-weight: 600; }
.wsa-ov-btn { padding: 7px 12px; font-size: .9rem; }
.wsa-ov-controls { display: flex; gap: 6px; flex-wrap: wrap; }
.wsa-ov-top .wsa-select { padding: 6px 8px; font-size: .85rem; }
.wsa-ov-close {
  margin-left: 2px; width: 40px; height: 40px; flex: 0 0 auto;
  border: 1px solid var(--wsa-line); border-radius: 10px;
  background: var(--wsa-surface); color: var(--wsa-ink);
  font-size: 1.1rem; cursor: pointer;
}

.wsa-ov-body { flex: 1; min-height: 0; display: flex; }   /* large: grid | words row */
.wsa-ov-stage { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 10px; }

/* The board must be a true square (1:1) — the LARGEST square that fits the
   stage, whatever the screen shape. Fallback below for older browsers. */
.wsa-ov-board { width: 100%; aspect-ratio: 1 / 1; max-width: 100%; max-height: 100%; }
@supports (width: min(1cqw, 1cqh)) {
  .wsa-ov-stage { container-type: size; }
  .wsa-ov-board {
    width: min(100cqw, 100cqh);
    height: min(100cqw, 100cqh);   /* = smaller stage dimension -> always square */
    aspect-ratio: auto; max-width: none; max-height: none;
  }
}
.wsa-ov .wsa-grid {
  width: 100%; height: 100%;
  grid-template-rows: repeat(var(--wsa-size, 10), 1fr);   /* square cells fill the board */
}
.wsa-ov .wsa-cell { aspect-ratio: auto; }   /* cells fill their (square) tracks */

/* word list as a side column (classic) on large screens */
.wsa-ov-words {
  flex: 0 0 260px; overflow: auto; padding: 14px 16px;
  background: var(--wsa-surface); border-left: 1px solid var(--wsa-line);
}
.wsa-ov-words .wsa-words { columns: 1; }
.wsa-ov-wordsbtn { display: none; }   /* words always visible on large — no toggle */

/* --- small screens: stack, and make the word list a collapsible panel that
       shrinks the grid instead of covering it --- */
@media (max-width: 820px) {
  .wsa-ov-body { flex-direction: column; }
  .wsa-ov-wordsbtn { display: inline-flex; }
  .wsa-ov-words {
    flex: 0 0 auto; max-height: 0; padding-top: 0; padding-bottom: 0;
    border-left: 0; border-top: 1px solid var(--wsa-line);
    transition: max-height .22s ease, padding .22s ease;
  }
  .wsa-ov-words.is-open { max-height: 42vh; padding-top: 12px; padding-bottom: 12px; }
  .wsa-ov-words .wsa-words { columns: 2; }
}
@media (max-width: 560px) {
  .wsa-ov-status { display: none; }
  .wsa-ov-btn { padding: 7px 10px; font-size: .82rem; }
  .wsa-ov-top .wsa-select { padding: 6px 6px; font-size: .8rem; }
  .wsa-ov-title { font-size: .95rem; max-width: 38vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) { .wsa-ov-words { transition: none; } }