/* ==========================================================================
   Venn-acular — style.css
   Clean, modern, classic: warm paper background, charcoal ink, dusty rose
   and soft grey circles, Playfair Display for titles, Inter for the UI.
   Light and dark themes share every rule; only the tokens change.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Surfaces and ink */
  --bg: #F9F8F6;             /* warm off-white page */
  --surface: #FFFEFC;        /* dialogs */
  --card: #FFFFFF;           /* rule labels, input, pills */
  --field-off: #F1EFEA;      /* disabled input */
  --ink: #2C2C2C;            /* deep charcoal text */
  --ink-soft: #6C6861;       /* secondary text (4.9:1 on --bg) */
  --hairline: #E2DED5;       /* thin dividers and borders */
  --placeholder: #9A958C;
  --btn-bg: #2C2C2C;
  --btn-ink: #F9F8F6;
  --btn-hover: #474747;
  --shadow: rgba(44, 44, 44, 0.22);
  --backdrop: rgba(249, 248, 246, 0.72);

  /* Left circle: dusty rose */
  --a: #B98F97;
  --a-fill: #E0C9CC;
  --a-ink: #6B4550;

  /* Right circle: soft warm grey */
  --b: #9C99A0;
  --b-fill: #CCCACD;
  --b-ink: #4A4850;

  /* Overlap: the mauve you get when rose and grey multiply */
  --both: #8B6E77;
  --both-ink: #4E3840;

  /* Outside, rare words, alerts */
  --out: #B9B3A6;
  --out-line: #D6D0C4;
  --out-ink: #6C6861;
  --rare: #A9782F;           /* muted gold sparkle */
  --alert: #A63D40;

  /* Difficulty chips */
  --easy: #6E8B5E;
  --medium: #B48A3C;
  --hard: #8B5A6B;

  --circle-blend: multiply;

  /* Type */
  --serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Shape */
  --radius-lg: 24px;
  --radius-md: 14px;
}

/* Dark theme: follows the device unless the player picked Light in Settings */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1B1A19;
    --surface: #242321;
    --card: #2B2A28;
    --field-off: #232220;
    --ink: #EDEAE4;
    --ink-soft: #A8A39A;
    --hairline: #3A3835;
    --placeholder: #7E796F;
    --btn-bg: #EDEAE4;
    --btn-ink: #1B1A19;
    --btn-hover: #FFFFFF;
    --shadow: rgba(0, 0, 0, 0.55);
    --backdrop: rgba(20, 19, 18, 0.7);
    --a: #A27880;
    --a-fill: #5A4046;
    --a-ink: #E7C3CA;
    --b: #8D8A92;
    --b-fill: #45444A;
    --b-ink: #D5D3DA;
    --both: #B796A1;
    --both-ink: #F1DCE3;
    --out: #6E6960;
    --out-line: #4A4742;
    --out-ink: #B2ADA4;
    --rare: #D9A94F;
    --alert: #E07A7C;
    --easy: #8FB07D;
    --medium: #D3A85A;
    --hard: #C58A9E;
    --circle-blend: screen;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1B1A19;
  --surface: #242321;
  --card: #2B2A28;
  --field-off: #232220;
  --ink: #EDEAE4;
  --ink-soft: #A8A39A;
  --hairline: #3A3835;
  --placeholder: #7E796F;
  --btn-bg: #EDEAE4;
  --btn-ink: #1B1A19;
  --btn-hover: #FFFFFF;
  --shadow: rgba(0, 0, 0, 0.55);
  --backdrop: rgba(20, 19, 18, 0.7);
  --a: #A27880;
  --a-fill: #5A4046;
  --a-ink: #E7C3CA;
  --b: #8D8A92;
  --b-fill: #45444A;
  --b-ink: #D5D3DA;
  --both: #B796A1;
  --both-ink: #F1DCE3;
  --out: #6E6960;
  --out-line: #4A4742;
  --out-ink: #B2ADA4;
  --rare: #D9A94F;
  --alert: #E07A7C;
  --easy: #8FB07D;
  --medium: #D3A85A;
  --hard: #C58A9E;
  --circle-blend: screen;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ol, ul, dl, dd, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--a-ink) 45%, transparent);
  outline-offset: 2px;
}

.app {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px 28px;
}

/* --------------------------------------------------------------------------
   3. Top bar: title, menu, puzzle label, score, timer
   Desktop: one row. Phones: brand + menu on top, puzzle label + clock below.
   -------------------------------------------------------------------------- */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "brand toolbar status";
  align-items: center;
  column-gap: 18px;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--hairline);
}

.brand-wrap { grid-area: brand; min-width: 0; }
.toolbar { grid-area: toolbar; }
.status { grid-area: status; }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: clamp(24px, 4.4vw, 32px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

.brand-mark { flex: none; }
.brand-mark circle { stroke-width: 1.6; mix-blend-mode: var(--circle-blend); }
.mark-a { fill: var(--a-fill); stroke: var(--a); }
.mark-b { fill: var(--b-fill); stroke: var(--b); }

.toolbar {
  display: flex;
  gap: 2px;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.icon-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn svg .dot { fill: currentColor; }

.status {
  display: flex;
  align-items: center;
  gap: 18px;
}

.mode-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.hud {
  display: flex;
  align-items: center;
  gap: 18px;
}

.score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}

.score-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.score-value {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.score-value.is-bump { animation: bump 0.34s ease-out; }

/* Circular countdown */
.timer {
  position: relative;
  width: 56px;
  height: 56px;
  flex: none;
}

.timer svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }

.timer circle {
  fill: none;
  stroke-width: 4;
}

.timer-track { stroke: var(--hairline); }

.timer-progress {
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-dasharray: 150.8;         /* 2 * PI * 24, kept in sync in script.js */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.12s linear, stroke 0.3s ease;
}

.timer-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.timer.is-low .timer-progress { stroke: var(--alert); }
.timer.is-low .timer-text { color: var(--alert); animation: pulse-text 1s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   4. Stage and Venn diagram
   Geometry is in percentages of the diagram width so everything scales
   together. Two circles, each 56% of the width, centres 32% apart.
   -------------------------------------------------------------------------- */
.stage {
  margin-top: 16px;
  padding: 18px 18px 16px;
}

.diagram {
  /* Fit the width to the viewport height so the whole game stays on screen */
  width: min(100%, 720px, max(300px, calc((100dvh - 560px) * 1.72)));
  margin-inline: auto;
  container-type: inline-size;
  --pill-fs: clamp(10.5px, 1.75cqw, 13.5px);
}

/* Rule labels: two columns, each centred over its circle (at 34% and 66%) */
.venn-labels {
  display: flex;
  padding-inline: 18%;
  margin-bottom: 4px;
}

.venn-label {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 4px;
  text-align: center;
}

.venn-label h2 {
  display: inline-block;
  max-width: 100%;
  padding: 0.42em 1em;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(44, 44, 44, 0.06);
  font-family: var(--sans);
  font-size: clamp(10.5px, 1.8cqw, 13px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink);
}

.venn-label p {
  margin-top: 5px;
  font-size: 12px;
  color: var(--ink-soft);
}

.venn {
  position: relative;
  aspect-ratio: 100 / 58;
}

.circle {
  position: absolute;
  top: calc(100% / 58);
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  mix-blend-mode: var(--circle-blend);   /* overlap mixes naturally */
}

.circle--a { left: 6%;  background: var(--a-fill); --glow: color-mix(in srgb, var(--a) 60%, transparent); }
.circle--b { left: 38%; background: var(--b-fill); --glow: color-mix(in srgb, var(--b) 55%, transparent); }

/* Zones are rectangles placed inside each region of the diagram */
.zone {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.zone--a    { left: 12%;   top: 22.41%; width: 25%; height: 55.17%; }
.zone--b    { left: 63%;   top: 22.41%; width: 25%; height: 55.17%; }
.zone--both { left: 41.5%; top: 29.31%; width: 17%; height: 41.38%; }

.zone-caption {
  flex: none;
  text-align: center;
  font-size: calc(var(--pill-fs) * 0.95);
  font-weight: 600;
  line-height: 1.2;
  color: var(--both-ink);
}

.zone-caption span {
  display: block;
  font-weight: 500;
  color: var(--ink-soft);
}

/* Pills wrap and centre; if a zone fills up it scrolls quietly */
.zone-words {
  --scale: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: calc(var(--pill-fs) * 0.4);
  min-height: 0;
  max-height: 100%;
  margin-block: auto;              /* centres vertically, collapses when full */
  padding: 2px;
  overflow-y: auto;
  scrollbar-width: none;
}
.zone-words::-webkit-scrollbar { display: none; }

.zone-words[data-density="2"] { --scale: 0.9; }
.zone-words[data-density="3"] { --scale: 0.8; }

/* Words that fit neither rule sit below the circles, centred, no box.
   Two rows of height are reserved so nothing jumps when the first lands. */
.outside {
  height: 64px;
  margin-top: 12px;
}

.outside .zone-words {
  height: 100%;
  justify-content: center;
  margin-block: 0;
}

/* --------------------------------------------------------------------------
   5. Word pills
   -------------------------------------------------------------------------- */
.pill {
  --pill-line: var(--out-line);
  --pill-ink: var(--out-ink);
  flex: none;
  max-width: 100%;
  padding: 0.3em 0.75em;
  border: 1px solid var(--pill-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  color: var(--pill-ink);
  font-family: var(--sans);
  font-size: calc(var(--pill-fs, 13.5px) * var(--scale, 1));
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 1px rgba(44, 44, 44, 0.05);
}

.pill--a    { --pill-line: var(--a);    --pill-ink: var(--a-ink); }
.pill--b    { --pill-line: var(--b);    --pill-ink: var(--b-ink); }
.pill--both { --pill-line: var(--both); --pill-ink: var(--both-ink); font-weight: 600; }

/* Rare words: gold outline and a small sparkle */
.pill.is-rare {
  border-color: var(--rare);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rare) 30%, transparent);
}
.pill.is-rare::before {
  content: "✦ ";
  color: var(--rare);
  font-size: 0.85em;
}

.pill.is-new { animation: settle 0.38s ease-out; }

/* The copy of a pill that travels from the input into its zone */
.pill--ghost {
  position: fixed;
  z-index: 60;
  margin: 0;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(44, 44, 44, 0.18);
}

.fly-layer {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  overflow: hidden;
}

.float-points {
  position: fixed;
  z-index: 61;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transform: translate(-50%, -100%);
  animation: float-up 0.95s ease-out forwards;
}
.float-points--a    { color: var(--a-ink); }
.float-points--b    { color: var(--b-ink); }
.float-points--both { color: var(--both-ink); font-size: 18px; }

/* Brief glow on whichever circle just received a word */
.circle.is-hit { animation: glow 0.7s ease-out; }

/* --------------------------------------------------------------------------
   6. Bottom area: input, done panel, feedback, hint, history
   -------------------------------------------------------------------------- */
.play { margin-top: 16px; }

.entry {
  display: flex;
  gap: 10px;
}

.entry input {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0 18px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 20px;          /* 16px+ prevents iOS zoom on focus */
  font-weight: 500;
  letter-spacing: 0.01em;
}

.entry input::placeholder {
  color: var(--placeholder);
  font-weight: 400;
  letter-spacing: 0;
}

.entry input:disabled {
  background: var(--field-off);
  border-color: var(--hairline);
}

.entry input.is-shake { animation: shake 0.38s ease-in-out; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.btn:hover:not(:disabled) { background: var(--btn-hover); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.btn--small { height: 42px; padding: 0 18px; font-size: 15px; border-radius: 12px; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--hairline);
}
.btn--ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 6%, transparent); }

/* After a round: summary and next steps where the input was */
.done-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 54px;
  padding: 8px 8px 8px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--card);
}

.done-copy { min-width: 0; }
.done-title { font-weight: 600; font-size: 15px; }
.done-text {
  font-size: 13px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.done-actions { display: flex; gap: 8px; flex: none; }

/* Feedback line with the hint button on the right */
.feedback-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 2em;
  margin-top: 8px;
}

.feedback {
  flex: 1;
  min-width: 0;
  min-height: 1.5em;                /* reserved so the layout never jumps */
  padding: 2px 2px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
}
.feedback--a     { color: var(--a-ink); }
.feedback--b     { color: var(--b-ink); }
.feedback--both  { color: var(--both-ink); font-weight: 600; }
.feedback--error { color: var(--alert); }
.feedback--hint  { color: var(--ink); font-weight: 600; letter-spacing: 0.02em; }

.link-btn {
  flex: none;
  padding: 2px 2px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.link-btn:hover { color: var(--a-ink); }

.hint-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.hint-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--rare); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hint-btn:hover:not(:disabled) { border-color: var(--ink-soft); }
.hint-btn:disabled { opacity: 0.45; cursor: default; }
.hint-count {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rare) 18%, transparent);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.history {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

.history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}

.history-head h2 {
  font-size: 14px;
  font-weight: 600;
}

.history-head span {
  font-size: 12.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.history-list {
  max-height: clamp(96px, 16dvh, 168px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}

.log-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 12px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
}

.log-word {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.log-tag::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot, var(--out));
}

.log-pts {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.log-item--a    { --dot: var(--a);    }
.log-item--b    { --dot: var(--b);    }
.log-item--both { --dot: var(--both); }
.log-item--a .log-pts    { color: var(--a-ink); }
.log-item--b .log-pts    { color: var(--b-ink); }
.log-item--both .log-pts { color: var(--both-ink); }
.log-item--out .log-pts  { color: var(--ink-soft); }

.log-item--rejected .log-word { font-weight: 500; color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1px; }
.log-item--rejected .log-tag  { color: var(--alert); }
.log-item--rejected .log-tag::before { display: none; }
.log-item--rejected .log-pts  { color: var(--ink-soft); }

.log-item--hint .log-word { font-weight: 600; letter-spacing: 0.08em; }
.log-item--hint .log-tag { color: var(--rare); }
.log-item--hint .log-tag::before { background: var(--rare); }

.log-report {
  padding: 1px 8px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.log-report:disabled { color: var(--ink-soft); cursor: default; }

.log-empty {
  padding: 10px 4px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* Small confirmation that floats in at the top */
.toast {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 100;
  max-width: min(92vw, 420px);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 10px 30px var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* No double-tap zoom on phones: taps act immediately */
html, body, button, a, label, .vkb, .app { touch-action: manipulation; }

/* Archive button wiggles when it can't be opened mid-round */
.icon-btn.is-blocked { animation: shake 0.38s ease-in-out; color: var(--alert); }

/* "Timer still running · 0:42" on Help, Stats and Settings during a round */
.live-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--alert) 12%, var(--card));
  color: var(--alert);
  font-size: 13px;
  font-weight: 600;
  animation: live-pulse 1.4s ease-in-out infinite;
}
.live-timer[hidden] { display: none; }
.live-timer strong { font-variant-numeric: tabular-nums; }
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: live-blink 1s steps(2, start) infinite;
}
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes live-blink { to { visibility: hidden; } }

/* Banner ad space (see setupAds() in script.js). Hidden until ads are switched on. */
.ad-slot { display: none; }
html.has-ads .ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  margin-top: 10px;
  overflow: hidden;
}

/* Under the game on computers: a short intro and the site links */
.site-footer {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: 13.5px;
  color: var(--ink-soft);
}
.site-intro { max-width: 640px; line-height: 1.55; }
.site-intro strong { color: var(--ink); }
.site-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.site-links a, .dialog-links a, .help-more a { color: var(--ink-soft); text-underline-offset: 3px; }
.site-links a:hover, .dialog-links a:hover, .help-more a:hover { color: var(--ink); }
.dialog-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  margin-top: 14px;
  font-size: 13px;
}
.help-more { margin-top: 12px; text-align: center; font-size: 13.5px; color: var(--ink-soft); }

/* The one-line word strip, the game keyboard and its settings are for phones only */
.word-strip,
.vkb,
.touch-only { display: none; }
html.own-kb .touch-only { display: grid; }

/* --------------------------------------------------------------------------
   7. Dialogs
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  width: min(92vw, 440px);
  max-height: 92dvh;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 30px 80px var(--shadow);
  overflow: auto;
  overscroll-behavior: contain;
}

.modal[open] { animation: modal-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }

.modal::backdrop {
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.modal-body { padding: 30px 30px 26px; }

.close-btn {
  position: sticky;
  top: 12px;
  float: right;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 12px 12px -48px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  color: var(--ink-soft);
  cursor: pointer;
  z-index: 2;
}
.close-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.close-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
  padding-right: 34px;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.modal-title {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.modal-lead {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 15.5px;
}

.section-title {
  margin-top: 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.fine-print {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-soft);
}

.btn--wide {
  width: 100%;
  margin-top: 22px;
}

.modal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  margin-top: 16px;
}
.modal-links .link-btn { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.modal-links .link-btn:hover { color: var(--ink); }

/* Difficulty chip (header, intro and archive) */
.level-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.level-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--medium);
}
.level-chip[data-level="easy"]::before { background: var(--easy); }
.level-chip[data-level="hard"]::before { background: var(--hard); }
.mode-label .level-chip { padding: 2px 8px 2px 7px; font-size: 11px; letter-spacing: 0.02em; text-transform: none; }

/* Intro: rules and scoring */
.rule-list {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.rule-list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-areas: "swatch side" "swatch rule";
  column-gap: 14px;
  align-items: center;
}

.swatch {
  grid-area: swatch;
  width: 26px;
  height: 26px;
  border: 2px solid;
  border-radius: 50%;
}
.swatch--a { background: var(--a-fill); border-color: var(--a); }
.swatch--b { background: var(--b-fill); border-color: var(--b); }

.rule-side {
  grid-area: side;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.rule-list strong {
  grid-area: rule;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}

.points-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 22px;
  padding: 14px 0;
  border-block: 1px solid var(--hairline);
  text-align: center;
}

.points-row li + li { border-left: 1px solid var(--hairline); }

.points-row strong {
  display: block;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
}

.points-row span {
  font-size: 12.5px;
  color: var(--ink-soft);
}

.rare-note {
  margin-top: 10px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.sparkle { color: var(--rare); }

/* Results */
.result-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.result-score {
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 80px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.result-note {
  min-height: 1.5em;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 15.5px;
}

.btn--share { margin-top: 14px; }

.compare-summary {
  margin-top: 8px;
  font-size: 15px;
}

.compare-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.compare-row {
  display: grid;
  grid-template-columns: minmax(70px, 34%) 1fr 40px;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.compare-word { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-bar {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  overflow: hidden;
}
.compare-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--b);
}
.compare-row--both .compare-bar span { background: var(--both); }
.compare-row--a .compare-bar span { background: var(--a); }
.compare-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 13px; }

.missed-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.missed-list .pill { font-size: 13.5px; }

.next-row {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
}
.next-row strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Results: kept deliberately short */
.result-line {
  margin-top: 2px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.result-rank {
  margin-top: 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--both-ink);
}
.btn--next { margin-top: 10px; }
.result-details {
  margin-top: 16px;
  border-top: 1px solid var(--hairline);
}
.result-details > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
}
.result-details > summary::-webkit-details-marker { display: none; }
.result-details > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.result-details[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.result-details > summary:hover { color: var(--ink); }

/* You vs. everyone on the results screen */
.versus {
  margin-top: 14px;
  padding: 12px 14px 10px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.versus-head {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.versus-chart {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}
.versus-chart:empty { display: none; }
.versus-chart li {
  display: grid;
  grid-template-columns: 62px 1fr 40px;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.vs-track {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  overflow: hidden;
}
.vs-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--ink) 28%, transparent);
}
.vs-num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.versus-chart li.is-you { color: var(--ink); font-weight: 600; }
.versus-chart li.is-you .vs-track span { background: var(--both); }
.versus-foot {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.versus-foot:empty { display: none; }

/* Help */
.help-demo {
  margin-top: 18px;
  padding: 14px 10px 12px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.help-venn {
  position: relative;
  height: 128px;
  max-width: 320px;
  margin: 0 auto;
}
.help-circle {
  position: absolute;
  top: 24px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  mix-blend-mode: var(--circle-blend);
}
.help-circle--a { left: calc(50% - 86px); background: var(--a-fill); }
.help-circle--b { left: calc(50% - 18px); background: var(--b-fill); }
.help-tag {
  position: absolute;
  top: 0;
  padding: 2px 8px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--card);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}
.help-tag--a { left: calc(50% - 76px); }
.help-tag--b { left: calc(50% + 76px); }
.help-pill { position: absolute; top: 66px; font-size: 12px; transform: translateX(-50%); }
.help-pill--a { left: calc(50% - 58px); }
.help-pill--both { left: 50%; }
.help-pill--b { left: calc(50% + 58px); }
.help-note {
  position: absolute;
  top: 94px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  transform: translateX(-50%);
}
.help-note--a { left: calc(50% - 58px); color: var(--a-ink); }
.help-note--both { left: 50%; color: var(--both-ink); }
.help-note--b { left: calc(50% + 58px); color: var(--b-ink); }

/* How to play: three numbered steps */
.help-steps {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  counter-reset: step;
}
.help-steps li {
  position: relative;
  min-height: 28px;
  padding: 3px 0 0 40px;
  font-size: 15.5px;
  line-height: 1.4;
  counter-increment: step;
}
.help-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--both) 18%, var(--card));
  color: var(--both-ink);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
}
.help-steps strong { font-weight: 600; }
.help-foot {
  margin-top: 14px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* Stats */
.tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 20px;
  text-align: center;
}
.tiles strong {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tiles span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--ink-soft);
}

.hist {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.hist-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.hist-label { color: var(--ink-soft); font-variant-numeric: tabular-nums; text-align: right; }
.hist-bar { height: 22px; }
.hist-bar span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
  padding-right: 7px;
  border-radius: 6px;
  background: var(--b-fill);
  color: var(--b-ink);
  font-size: 12px;
  font-weight: 600;
}
.hist-bar[data-empty="1"] { border-bottom: 1px dashed var(--hairline); height: 12px; }
.hist-bar[data-empty="1"] span { display: none; }
.hist-row.is-today .hist-bar span { background: var(--both); color: var(--surface); }

/* Archive: month calendar */
.cal { margin-top: 18px; }
.cal-head {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  text-align: center;
}
.cal-title h3 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
}
.cal-title p {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.cal-nav svg { stroke-width: 2; }
.cal-nav:disabled { opacity: 0.25; cursor: default; background: transparent; }

.cal-weekdays,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.cal-weekdays {
  margin-top: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
}
.cal-grid { margin-top: 6px; }

.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  aspect-ratio: 1 / 1.08;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.cal-cell:hover:not(:disabled) { border-color: var(--ink-soft); }
.cal-cell:active:not(:disabled) { transform: scale(0.96); }
.cal-day { font-size: 15px; font-weight: 600; line-height: 1; }

/* Under the day number: a difficulty dot, or the score once played */
.cal-mark {
  display: inline-grid;
  place-items: center;
  min-height: 12px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cal-mark[data-level]::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--medium);
}
.cal-mark[data-level="easy"]::before { background: var(--easy); }
.cal-mark[data-level="hard"]::before { background: var(--hard); }

.cal-cell.is-done {
  border-color: color-mix(in srgb, var(--both) 40%, var(--hairline));
  background: color-mix(in srgb, var(--both) 17%, var(--card));
}
.cal-cell.is-done .cal-mark { color: var(--both-ink); }
.cal-cell.is-progress .cal-mark[data-level]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.cal-cell.is-today { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cal-cell[aria-current="date"]:not(.is-today) { border-color: var(--ink-soft); border-style: dashed; }
.cal-cell.is-locked {
  background: transparent;
  border-style: dashed;
  color: var(--ink-soft);
  opacity: 0.45;
  cursor: default;
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.cal-legend li { display: inline-flex; align-items: center; gap: 6px; }
.cal-key-done {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--both) 40%, var(--hairline));
  background: color-mix(in srgb, var(--both) 17%, var(--card));
}

/* Settings */
.segmented {
  margin-top: 20px;
  padding: 0;
  border: 0;
}
.segmented legend {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.segmented legend { grid-column: 1 / -1; }
.segmented--two { grid-template-columns: repeat(2, 1fr); }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; }
.segmented span {
  display: grid;
  place-items: center;
  height: 44px;
  border: 1.5px solid var(--hairline);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.segmented input:checked + span { border-color: var(--ink); background: var(--card); }
.segmented input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--a-ink) 45%, transparent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   8. Animations
   -------------------------------------------------------------------------- */
@keyframes settle {
  0%   { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@keyframes glow {
  0%   { box-shadow: 0 0 0 0 var(--glow); }
  100% { box-shadow: 0 0 0 16px transparent; }
}

@keyframes float-up {
  0%   { opacity: 0; margin-top: 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; margin-top: -34px; }
}

@keyframes bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-7px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(3px); }
}

@keyframes pulse-text {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .app { padding: 0 12px 24px; }
  .topbar {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand toolbar" "status status";
    row-gap: 4px;
    padding: 8px 0 8px;
  }
  .status { justify-content: space-between; }
  .brand { font-size: 24px; gap: 10px; }
  .brand-mark { width: 34px; height: 22px; }
  .icon-btn { width: 36px; height: 38px; }
  .icon-btn svg { width: 21px; height: 21px; }
  .hud { gap: 14px; }
  .score { flex-direction: row; align-items: baseline; gap: 6px; }
  .score-value { font-size: 22px; }
  .timer { width: 46px; height: 46px; }
  .timer-text { font-size: 13px; }
  .stage { padding: 12px 8px 10px; }
  .diagram { width: 100%; }
  .entry input { height: 50px; font-size: 18px; padding: 0 14px; }
  .btn { height: 50px; padding: 0 18px; }
  .btn--small { height: 40px; padding: 0 14px; font-size: 14px; }
  .done-panel { padding-left: 14px; }
  .modal-body { padding: 24px 22px 22px; }
  .modal-title { font-size: 28px; }
  .result-score { font-size: 64px; }
  .tiles strong { font-size: 25px; }
  .tiles span { font-size: 10.5px; }
  .cal-grid, .cal-weekdays { gap: 4px; }
  .cal-cell { border-radius: 10px; }
  .cal-day { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   10. Touch devices: fit the visible area
   The on-screen keyboard covers the bottom of a phone screen and the browser
   scrolls the page to keep the input in view, which pushed the Venn diagram
   off the top. Here the game is pinned to the visual viewport (--vvh / --vvtop
   come from syncViewport() in script.js), never scrolls as a page, and the
   diagram shrinks to leave room for the input. html.kb-open is set while the
   keyboard is up.
   -------------------------------------------------------------------------- */
@media (max-width: 560px), (pointer: coarse) {
  html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body { min-height: 0; }

  .app {
    position: fixed;
    top: var(--vvtop, 0px);
    left: 0;
    right: 0;
    width: min(100%, 880px);
    height: var(--vvh, 100dvh);
    margin-inline: auto;
    padding: 0 12px calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .app > main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .topbar { flex: none; }

  .stage { flex: none; margin-top: 6px; padding: 0; }

  /* Width is set by fitDiagram() in script.js so nothing is ever cut off */
  .diagram { width: min(100%, 720px, var(--fit-w, 100%)); }

  /* Rule labels get their own width so they stay readable even when the
     diagram has to shrink to fit above the keyboard */
  .venn-labels {
    position: relative;
    left: 50%;
    width: min(340px, calc(100vw - 24px));
    padding-inline: 0;
    transform: translateX(-50%);
  }
  .venn-label h2 { font-size: 11px; }

  /* The center is small on a phone: once words land there, they get the room */
  .zone--both:has(.pill) .zone-caption { display: none; }

  .outside { height: 56px; margin-top: 8px; }

  .play {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 8px;
  }

  /* The word log takes whatever room is left and scrolls inside itself */
  .history {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .history-list { flex: 1; min-height: 0; max-height: none; }

  /* Keyboard up: drop everything that isn't needed to play */
  html.kb-open .history { display: none; }
  html.kb-open .venn-label p { display: none; }
  html.kb-open .brand-wrap,
  html.kb-open .toolbar { display: none; }
  html.kb-open .topbar { grid-template-areas: "status status"; padding: 4px 0; }
  html.kb-open .outside { height: 54px; margin: 4px 0 6px; }
  html.kb-open .timer { width: 40px; height: 40px; }
  html.kb-open .timer-text { font-size: 12px; }
  html.kb-open .play { margin-top: 4px; }
  html.kb-open .feedback-row { margin-top: 4px; }
  html.kb-open .feedback { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   10b. Phone: fewer, cleaner words
   A phone-sized circle can't hold dozens of pills, so each region shows only
   its newest few (numbers match `phoneMax` in script.js) with a quiet
   "+N more" above them. Every word is still in "Your words" below.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* Rule labels: tinted to match their circle; points live in the intro */
  .venn-label p { display: none; }
  .venn-labels { margin-bottom: 6px; }
  .venn-label--a h2 { border-color: var(--a); background: color-mix(in srgb, var(--a-fill) 35%, var(--card)); color: var(--a-ink); }
  .venn-label--b h2 { border-color: var(--b); background: color-mix(in srgb, var(--b-fill) 35%, var(--card)); color: var(--b-ink); }

  /* Whole words, never "obser…": smaller pills that may spill past the box */
  .zone-words {
    overflow: visible;
    gap: 4px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
  }
  .zone-words[data-density] { --scale: 1; }
  .pill {
    max-width: none;
    overflow: visible;
    padding: 0.22em 0.6em;
    font-size: 11.5px;
  }
  .pill.is-rare::before { content: "✦"; margin-right: 2px; }

  /* The lens in the middle is widest at its centre line */
  .zone--both { left: 39%; width: 22%; }

  .zone--a .pill:nth-last-child(n+5),
  .zone--b .pill:nth-last-child(n+5),
  .zone--both .pill:nth-last-child(n+4),
  .outside .pill:nth-last-child(n+4) { display: none; }

  .zone-words[data-more]::before {
    content: attr(data-more);
    order: -1;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
  }

  /* Outside words: one tidy row under the circles */
  .outside { height: 30px; margin-top: 6px; }
  .outside .zone-words { flex-direction: row; gap: 6px; }
  .outside .zone-words[data-more]::before { order: 9; align-self: center; }
}

/* --------------------------------------------------------------------------
   10c. Phones and tablets: the game's own keyboard
   html.own-kb is set by setupOwnKeyboard() in script.js on touch screens.
   The phone keyboard never opens, so the page no longer shrinks; the word
   list becomes one scrolling line and the keyboard sits at the bottom.
   -------------------------------------------------------------------------- */
html.own-kb .history { display: none; }
@media (max-width: 560px), (pointer: coarse) {
  .site-footer { display: none; }
  html.has-ads .ad-slot { min-height: 50px; margin-top: 6px; }
}

/* Board, word line and keyboard stay together at the bottom of the screen.
   Any spare height collects in the ad slot under the header (empty for now). */
html.own-kb .ad-slot { display: block; flex: 1 1 0; min-height: 0; }
/* After a round there's no keyboard: keep the board up top, spare space below */
html.own-kb.is-done .ad-slot { flex: 0 0 0; }
html.own-kb.has-ads.is-done .ad-slot { flex: 0 0 auto; }
html.own-kb.has-ads .ad-slot { display: flex; align-items: center; justify-content: center; min-height: 54px; margin-top: 6px; }
html.own-kb .play { flex: none; }
html.own-kb .stage { margin-top: 4px; }
/* Nothing in the play area may squash; if space runs out the diagram shrinks instead */
html.own-kb .play > * { flex-shrink: 0; }
html.own-kb .submit-hide,
html.own-kb #submit-btn { display: none; }

html.own-kb .entry input {
  height: 48px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.06em;
  caret-color: transparent;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
html.own-kb .entry input::placeholder { font-size: 16px; font-weight: 500; letter-spacing: 0; }
html.own-kb .entry input:read-only:not(:disabled) { border-color: var(--ink); }

/* Feedback and hint share one short line */
html.own-kb .feedback-row { margin-top: 6px; height: 36px; min-height: 0; align-items: center; }
html.own-kb .feedback {
  min-height: 0;
  font-size: 13px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Recent words, newest first, in a single line that scrolls sideways */
html.own-kb .word-strip {
  display: flex;
  gap: 6px;
  min-height: 30px;
  margin-top: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
          mask-image: linear-gradient(to right, #000 85%, transparent);
}
html.own-kb .word-strip::-webkit-scrollbar { display: none; }
.strip-chip {
  --chip-line: var(--out-line);
  --chip-ink: var(--out-ink);
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--chip-line);
  border-radius: 999px;
  background: var(--card);
  color: var(--chip-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 26px;
  white-space: nowrap;
}
.strip-chip small { font-size: 11px; font-weight: 600; opacity: 0.75; }
.strip-chip--a    { --chip-line: var(--a);    --chip-ink: var(--a-ink); }
.strip-chip--b    { --chip-line: var(--b);    --chip-ink: var(--b-ink); }
.strip-chip--both { --chip-line: var(--both); --chip-ink: var(--both-ink); background: color-mix(in srgb, var(--both) 14%, var(--card)); }
.strip-chip.is-rare { border-color: var(--rare); }
.strip-chip--rejected { border-style: dashed; color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1px; font-weight: 500; }

/* The keyboard: three rows of letters, Enter and Delete */
html.own-kb .vkb:not([hidden]) {
  display: grid;
  gap: 7px;
  margin-top: 10px;            /* right under the word line */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.vkb-row { display: flex; gap: 5px; }
.vkb-half { flex: 0.5; }
.vkb button {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 9%, var(--card));
  color: var(--ink);
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.08s ease, transform 0.08s ease;
}
.vkb button:active { background: color-mix(in srgb, var(--ink) 22%, var(--card)); transform: scale(0.95); }
.vkb .vkb-wide { flex: 1.55; font-size: 12.5px; letter-spacing: 0.04em; }
.vkb button[data-key="enter"] { background: var(--btn-bg); color: var(--btn-ink); }
.vkb button[data-key="enter"]:active { background: var(--btn-hover); }
.vkb svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.vkb.is-off button { opacity: 0.45; }

@media (min-height: 760px) {
  .vkb button { height: 56px; }
  html.own-kb .vkb:not([hidden]) { gap: 8px; }
}
@media (max-height: 700px) {
  .vkb button { height: 44px; }
  html.own-kb .vkb:not([hidden]) { gap: 6px; }
}

/* --------------------------------------------------------------------------
   11. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}