/* ============================================================
   QUIZORIA — phones and tablets.

   The website only. Nothing here is scoped to `.is-tizen`, but nothing here
   reaches the television either: the set is 1920x1080, so every query below
   fails on it. The TV's own overrides live in tv-perf.css and are untouched.

   WHY THIS FILE EXISTS
   --------------------
   The whole design is scaled from `--u`, and on every phone `--u` hits its
   12px floor (a 390x844 screen computes 7.25px and clamps). At 12px the type
   ramp inverts: `--fs-mega` is 64.8px and overflows the word QUIZORIA below
   360px, while `--fs-body` — which is also the document default — is 13.8px
   and `--fs-micro` is 9.6px. Meanwhile several flex rows have no `flex-wrap`
   and a min-content far wider than the screen, and because `html, body` are
   `overflow: hidden` (right for a TV) everything that overflows is not merely
   ugly, it is permanently unreachable. The HUD was the worst case: its
   min-content is about 620px against 351px of usable width, and the timer is
   its last child, so the clock was clipped off the side of every phone.

   The approach is to keep every value a `--u` multiple, so the identity and
   the fluid scaling survive, and to change only the ratios that a screen held
   at 35cm needs rather than one seen from three metres.
   ============================================================ */

/* ---------------------------------------------------------------
   PHONES
   --------------------------------------------------------------- */
/* ---- type ----
   Every handheld width drives `--u` to its 12px floor, so a tablet and a
   landscape phone read exactly as badly as a portrait one: 13.8px body text
   under a 64.8px display face. The ramp is compressed from 6.75:1 to about
   3.4:1 for everything below a laptop — the right ratio for a screen held at
   arm's length rather than seen across a room. Every value stays a `--u`
   multiple, so the fluid scaling and the identity are unchanged. */
@media (max-width: 1000px) {
  :root {
    --fs-mega:  calc(var(--u) * 3.4);    /* 40.8px — was 64.8 and overflowed */
    --fs-title: calc(var(--u) * 2.2);    /* 26.4px */
    --fs-h1:    calc(var(--u) * 1.9);    /* 22.8px */
    --fs-h2:    calc(var(--u) * 1.5);    /* 18.0px */
    --fs-lead:  calc(var(--u) * 1.35);   /* 16.2px */
    --fs-body:  calc(var(--u) * 1.34);   /* 16.1px — 16 is the iOS zoom floor */
    --fs-small: calc(var(--u) * 1.17);   /* 14.0px */
    --fs-micro: calc(var(--u) * 1.0);    /* 12.0px */
  }
}

@media (max-width: 640px) {

  /* ---- a screen that can scroll ----
     `overflow: hidden` on the shell is correct for a television, where there
     is no scrolling input. On a phone it turns every overflow into something
     the reader can never get to, so the screen itself becomes scrollable and
     content stops being centred (centring plus clipping loses both ends). */
  .screen {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .step__body { justify-content: flex-start; }

  /* ---- the HUD: wrap instead of clipping the clock ---- */
  .hud {
    flex-wrap: wrap;
    gap: var(--sp-2);
    row-gap: var(--sp-1);
    min-width: 0;
  }
  .hud__name {
    font-size: var(--fs-body);
    white-space: normal;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hud__meta {
    flex: 1 1 100%;
    order: 3;
    min-width: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .hud__spacer { display: none; }
  /* The category was chosen two screens ago and is the least useful thing
     competing with the timer for room. A quiz's title is NOT that - it is the
     only thing on screen saying which quiz this is - so it keeps its place and
     truncates instead. */
  .hud__meta .chip--category { display: none; }
  .hud__meta .chip--quiz {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chip { white-space: normal; }

  /* ---- lifelines row ---- */
  .tools { flex-wrap: wrap; gap: var(--sp-2); }
  .tools .chip { display: none; }
  .tools__spacer { display: none; }

  /* ---- answers ---- */
  .answers { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .answer { min-height: calc(var(--u) * 4.6); padding: var(--sp-2) var(--sp-3); }
  .question { padding: var(--sp-3); }

  /* ---- modals ----
     Two full-width buttons stacked, rather than a 278px row inside a box that
     was 234px wide. */
  .overlay { padding: var(--sp-3); }
  .overlay__box {
    width: 92vw;
    max-width: 92vw;
    padding: var(--sp-4);
    gap: var(--sp-3);
  }
  .overlay__row { flex-direction: column; }
  .overlay__row .btn { width: 100%; }

  /* ---- the on-screen keyboard: 494px of keys into 351px of room ---- */
  .kbd__row { flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * .4); }
  .kbd__key { min-width: calc(var(--u) * 3.7); height: calc(var(--u) * 3.7); }
  .kbd__key--wide { min-width: calc(var(--u) * 6); flex: 1 1 auto; }
  .name__value { font-size: calc(var(--u) * 1.8); }
  .name__display { padding: var(--sp-2) var(--sp-3); overflow: hidden; min-width: 0; }

  /* ---- grids: never let one long word blow a track out ---- */
  .langGrid,
  .diffGrid,
  .catGrid       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results__review { grid-template-columns: minmax(0, 1fr); }
  .playerGrid { grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 11), 1fr)); }
  .cefrGrid--review { grid-template-columns: minmax(0, calc(var(--u) * 26)); }

  /* ---- the ladder strip ---- */
  .ladder { padding-bottom: var(--sp-1); }

  /* ---- logo ---- */
  .logo__word { letter-spacing: calc(var(--u) * .12); }
  .logo__sub  { letter-spacing: calc(var(--u) * .28); }
}

/* ---- touch targets ----
   Keyed on the size of the device rather than on width alone: a phone held in
   landscape is 852px wide and would miss a width-only query, but its owner is
   still using a finger. `(hover: none)` would be the honest signal and is
   used for the tap feedback below, but it cannot be relied on for sizing —
   a touchscreen laptop reports `hover: hover`. The television is 1920x1080
   and matches neither term. Measured heights before: 32.6, 29.4, 28.2, 40.8. */
@media (max-width: 1000px), (max-height: 500px) {
  .lifeline  { padding: calc(var(--u) * 1.1) var(--sp-4); }
  .navbtn    { padding: calc(var(--u) * 1.0) calc(var(--u) * 1.3); }
  .hud__menu { padding: calc(var(--u) * 1.05) calc(var(--u) * 1.05); }
  .kbd__key  { min-width: calc(var(--u) * 3.7); height: calc(var(--u) * 3.7); }
}

/* Very short landscape phones: the ladder strip and the lifeline row are the
   first things to give up their height. */
@media (max-height: 460px) and (orientation: landscape) {
  .ladder { display: none; }
  .screen__hint { display: none; }
  .answer { min-height: calc(var(--u) * 3.8); }
}

/* ---------------------------------------------------------------
   TABLETS — roomier than a phone, still not a television
   --------------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1000px) {
  .langGrid, .diffGrid, .catGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .answers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overlay__box { width: 72vw; max-width: 72vw; }
  .screen { overflow-y: auto; overflow-x: hidden; }
}

/* ---------------------------------------------------------------
   TOUCH — no hover means every control must acknowledge a tap
   ---------------------------------------------------------------
   The whole interface signals state through `.is-focused`, a class the remote
   focus engine sets. There was no `:active` rule anywhere and no tap
   highlight, so a finger got no feedback at all; and `.navbtn` / `.hud__menu`
   rest at the faintest colours in the palette with only a `:hover` to lift
   them, which on a touchscreen never fires — so they read as disabled. */
@media (hover: none) {
  .btn:active, .tile:active, .answer:active, .kbd__key:active,
  .playerCard:active, .navbtn:active, .lifeline:active,
  .hud__menu:active, .playerEdit:active, .pressOk:active {
    transform: scale(.97);
    transition: transform 60ms var(--ease-out);
  }
  .navbtn, .hud__menu { color: var(--c-text-dim); }
}

/* ---------------------------------------------------------------
   WRAPPING SAFETY NET — applies at every width
   ---------------------------------------------------------------
   There was no `overflow-wrap`, `word-break` or `hyphens` rule anywhere in the
   project, so a long compound word, a URL inside a question or a wide Arabic
   string simply overflowed and was clipped. */
.question__text, .answer__text, .tile__label, .tile__meta,
.overlay__title, .overlay__body, .verdict__explain,
.setting__label, .playerCard__name, .screen__title, .screen__hint,
.pinDialog__error, .reviewItem {
  overflow-wrap: break-word;
}

/* A pointer of any kind deserves a pointer cursor; `base.css` strips button
   styling wholesale and never puts one back. */
button, [role="button"], .focusable { cursor: pointer; }
button { -webkit-tap-highlight-color: transparent; }