/**
 * DUELISTS' KEEP — the duel screen.
 *
 * Loaded AFTER /assets/realm.css, and it borrows everything it can from it: the parchment, the
 * ink, the wax, the gold, .realm-btn. The Keep is an island on the same chart, so it must not
 * invent a second colour scheme — it adds only what a duel needs (fighters, HP, a typing line,
 * a knowledge card) and inherits the rest.
 *
 * THE HARD RULE HERE IS OVERFLOW. The child is on an iPad, sometimes an iPhone, with the
 * on-screen keyboard up. The line being typed and the box being typed into must BOTH stay on
 * screen, at 320px, for the longest legend-tier sentence in the game. Nothing may ever be
 * clipped, and the page must never scroll sideways. Measured in real Chromium, not eyeballed.
 */

:root {
  /* Green ink: a letter you have already landed. Dark enough to clear 4.5:1 against the pale
     prompt AND against its own green wash — a letter the child cannot read is not a reward. */
  --hit: #245a34;
  --hit-soft: rgba(36, 90, 52, 0.16);
  --miss: var(--wax);      /* the Realm's wax red: a letter you got wrong */
  --miss-soft: rgba(157, 43, 43, 0.22);
}

/* ── The sheet: the same aged parchment the Realm's map is drawn on ─────────── */

.keep { padding: clamp(0.5rem, 2.5vw, 1.5rem); }

.sheet {
  position: relative;
  max-width: 900px;
  /* The parchment fills the screen rather than stopping halfway down it. Exactly the viewport
     minus the body's own padding, so the page never grows a scrollbar it does not need. */
  min-height: calc(100dvh - 2 * clamp(0.5rem, 2.5vw, 1.5rem));
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 2.25rem) clamp(0.9rem, 4vw, 2.25rem) clamp(4.5rem, 9vw, 5rem);
  background-color: var(--parchment);
  background-image:
    radial-gradient(ellipse at 16% 10%, rgba(150, 108, 48, 0.2), transparent 45%),
    radial-gradient(ellipse at 86% 80%, rgba(132, 94, 42, 0.22), transparent 42%),
    radial-gradient(ellipse at 50% 45%, rgba(255, 248, 226, 0.55), transparent 68%),
    repeating-linear-gradient(102deg, rgba(120, 90, 40, 0.045) 0 2px, transparent 2px 6px);
  border: 2px solid var(--ink-faint);
  border-radius: 10px 4px 12px 5px / 5px 12px 4px 10px;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.5);
}

.screen[hidden], [hidden] { display: none !important; }

.keep-title {
  font-size: clamp(1.6rem, 6.5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  text-shadow: 1px 1px 0 var(--parchment-lit), 3px 3px 0 rgba(139, 105, 48, 0.25);
}

.lead {
  margin-top: 0.6rem;
  font-size: clamp(1rem, 3.4vw, 1.15rem);
  line-height: 1.45;
  color: var(--ink-soft);
}

.who { margin-top: 0.6rem; font-weight: 700; }

/* Names and ranks are stored lower-cased (the Realm lower-cases a name so "LEYAN" and "leyan"
   are one player). Capitalise them for the child — but ONLY them: `text-transform` on the whole
   sentence gives you "Fighting As Leyan". */
.who__name { text-transform: capitalize; }

.hint {
  margin-top: 0.7rem;
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink-soft);
}

.back {
  display: inline-block;
  min-height: 44px;      /* a thumb, not a mouse pointer */
  padding: 0.7rem 0 0.3rem;
  color: var(--ink-soft);
  font-size: 1rem;
}

.panel {
  margin-top: 1.2rem;
  padding: clamp(1rem, 4vw, 1.5rem);
  background: rgba(255, 250, 235, 0.62);
  border: 2px solid var(--ink-soft);
  border-radius: 10px 4px 12px 5px / 5px 12px 4px 10px;
  box-shadow: inset 0 0 24px rgba(160, 120, 60, 0.12);
}

.panel p { margin-top: 0.6rem; line-height: 1.5; }
a.realm-btn { text-decoration: none; }

/* ── Cards: the worlds, and the enemies ────────────────────────────────────── */

.card-grid {
  display: grid;
  gap: 0.9rem;
  /* min(100%, 220px) — NOT 220px. A bare 220px minimum blows a grid track wider than a 320px
     phone once padding is counted, and the whole page starts scrolling sideways. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin-top: 1.2rem;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 88px;
  padding: 1rem 1.1rem;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  background: rgba(255, 250, 235, 0.66);
  border: 2px solid var(--ink-soft);
  border-radius: 9px 4px 10px 5px / 5px 10px 4px 9px;
  box-shadow: 0 4px 0 rgba(90, 65, 30, 0.28);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.card:hover:not(:disabled) { border-color: var(--gold-deep); transform: translateY(-2px); }
.card:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(90, 65, 30, 0.28); }
.card:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }

/* A locked enemy is not a broken button — it is a place you have already been. Fogged, like a
   locked island on the map, and it says WHY in the note under it. */
.card:disabled {
  cursor: not-allowed;
  color: var(--locked);
  background: rgba(230, 222, 202, 0.75);
  border-color: rgba(43, 29, 14, 0.35);
  border-style: dashed;
  box-shadow: none;
}

.card__emoji { font-size: 1.8rem; line-height: 1; }
.card__title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: capitalize;
}
.card__title em { font-style: italic; font-weight: 400; font-size: 0.95rem; }
.card__note { font-size: 0.95rem; line-height: 1.35; color: var(--ink-soft); overflow-wrap: anywhere; }
.card:disabled .card__note--locked { color: var(--wax-dark); }

.practice-note { margin-top: 1.2rem; }

.practice {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  line-height: 1.4;
  cursor: pointer;
  color: var(--ink-soft);
  background: rgba(255, 250, 235, 0.5);
  border: 2px dashed var(--ink-faint);
  border-radius: 8px;
}

.practice input {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 0.1rem;
  accent-color: var(--wax);
}

/* ── The duel ──────────────────────────────────────────────────────────────── */

/* The HUD sticks to the top. With the keyboard up the browser scrolls the page to keep the
   typing line in view, which would otherwise push the HP bars off the screen — and a duel you
   cannot see the HP of is just a typing test. Opaque parchment, or the line would show through. */
.hud {
  position: sticky;
  top: 0;
  z-index: 2;
  /* Bled out to the edges of the sheet (and padded back in), so the line scrolling underneath
     never appears in the margin beside the HP bars. */
  margin: 0 calc(-1 * clamp(0.9rem, 4vw, 2.25rem));
  padding: 0.4rem clamp(0.9rem, 4vw, 2.25rem) 0.4rem;
  background: var(--parchment-lit);
  box-shadow: 0 6px 10px -6px rgba(43, 29, 14, 0.4);
}

/* Compact on purpose: with the on-screen keyboard up an iPhone has roughly 380px of page left,
   and the two things that MUST survive that are the line and the input under your thumbs. */
.duel-where {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.fighters {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.fighter { flex: 1 1 0; min-width: 0; } /* min-width:0 lets a long name shrink instead of overflow */
.fighter--enemy { text-align: right; }

.fighter__emoji { font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.1; }

.fighter__name {
  font-weight: 700;
  font-size: clamp(0.9rem, 3.4vw, 1.05rem);
  text-transform: capitalize;  /* the Realm stores "leyan"; the Keep bills them as Leyan */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* "Lü Bu, the Flying General" must not push the page sideways */
}

.hp {
  height: 12px;
  margin-top: 0.3rem;
  background: rgba(43, 29, 14, 0.18);
  border: 1px solid var(--ink-faint);
  border-radius: 999px;
  overflow: hidden;
}

.hp__fill { height: 100%; transition: width 0.25s ease; }
.hp__fill--player { background: linear-gradient(180deg, #4e9a63, var(--hit)); }
.hp__fill--enemy { background: linear-gradient(180deg, #c14b4b, var(--wax-dark)); }
.hp__value { margin-top: 0.15rem; font-size: 0.75rem; color: var(--ink-soft); }

.combo {
  min-height: 1.7em;
  margin: 0.6rem 0 0;
  font-weight: 700;
  font-size: clamp(1rem, 4vw, 1.3rem);
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--gold-deep);
}

.combo--blazing { animation: pulse 0.45s ease-in-out infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.1); } }

/* ── THE TYPING LINE. It must never clip, at any width, for any sentence. ──── */

.prompt {
  margin: 0.5rem 0;
  padding: clamp(0.8rem, 3vw, 1.2rem);
  font-family: 'SF Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
  font-size: clamp(1.02rem, 4.1vw, 1.45rem);
  line-height: 1.75;
  color: var(--ink-soft);
  background: rgba(255, 252, 242, 0.8);
  border: 2px solid var(--ink-soft);
  border-radius: 9px 4px 10px 5px / 5px 10px 4px 9px;
  /* The four rules that keep the text on screen: */
  white-space: pre-wrap;     /* wrap — and keep the spaces the player has to type */
  overflow-wrap: anywhere;   /* break even a monstrous word rather than clip it */
  word-break: normal;
  max-width: 100%;
}

.prompt--question {
  font-family: inherit;
  font-weight: 700;
  color: var(--ink);
  white-space: normal;
}

.ch { transition: color 0.08s ease; }
.ch--done { color: var(--hit); background: var(--hit-soft); }
.ch--next { color: var(--ink); background: rgba(201, 150, 46, 0.35); box-shadow: inset 0 -3px 0 var(--gold-deep); }
.ch--wrong { color: #fff; background: var(--miss); border-radius: 2px; }

/* The real input: invisible, but focusable — tapping the words raises the keyboard.
   NOT display:none and NOT disabled, or iOS would never open the keyboard for it. */
.hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;   /* under 16px, iOS Safari zooms the whole page in the moment it focuses */
  pointer-events: none;
  /* Ask the browser for a whole screen of clearance above and below when it scrolls this into
     view on focus. It cannot have it, so it does not scroll — which is the point: the page must
     not lurch the moment the keyboard comes up. game.js then keeps the CURSOR in view instead. */
  scroll-margin: 100dvh 0;
}

.tap-hint {
  margin-top: 0.2rem;
  font-weight: 700;
  color: var(--wax-dark);
}

/* ── The knowledge round ───────────────────────────────────────────────────── */

.question-flag {
  margin-top: 0.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--wax-dark);
}

.choices { display: grid; gap: 0.6rem; margin-top: 0.7rem; }

.choice {
  min-height: 48px;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 1rem;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  background: rgba(255, 250, 235, 0.7);
  border: 2px solid var(--ink-soft);
  border-radius: 8px;
  /* A four-line answer wraps. It never clips. */
  white-space: normal;
  overflow-wrap: anywhere;
}

.choice:hover:not(:disabled) { border-color: var(--gold-deep); }
.choice:disabled { cursor: default; opacity: 0.75; }
.choice--right { border-color: var(--hit); background: var(--hit-soft); opacity: 1; font-weight: 700; }
.choice--wrong { border-color: var(--miss); background: var(--miss-soft); opacity: 1; }

/* The whole reason the questions exist: you are told the answer either way. */
.teaches {
  margin-top: 0.8rem;
  padding: 0.8rem 1rem;
  line-height: 1.5;
  background: rgba(201, 150, 46, 0.16);
  border-left: 5px solid var(--gold-deep);
  border-radius: 0 8px 8px 0;
  overflow-wrap: anywhere;
}

#next-round { margin-top: 0.9rem; }

.give-up { display: block; margin-top: 1.4rem; }

/* ── The result ────────────────────────────────────────────────────────────── */

.stats {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
  margin-top: 1.2rem;
}

.stat {
  padding: 0.8rem 1rem;
  text-align: center;
  background: rgba(255, 250, 235, 0.66);
  border: 2px solid var(--ink-soft);
  border-radius: 8px;
}

.stat__value { font-size: 1.7rem; font-weight: 700; color: var(--wax-dark); }
.stat__label { font-size: 0.8rem; line-height: 1.3; color: var(--ink-soft); }

.banner {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  font-weight: 700;
  line-height: 1.45;
  background: rgba(201, 150, 46, 0.16);
  border: 2px solid var(--gold-deep);
  border-radius: 8px;
  overflow-wrap: anywhere;
}

/* What the duel taught, said again with nothing to type and no enemy swinging. */
.learned { margin-top: 1.4rem; }

.learned__title {
  margin-bottom: 0.6rem;
  font-family: var(--font-title, inherit);
  font-size: 1.3rem;
  color: var(--wax-dark);
}

.learned__list { display: grid; gap: 0.7rem; list-style: none; }

.learned__item {
  padding: 0.8rem 1rem;
  background: rgba(255, 250, 235, 0.66);
  border: 2px solid var(--ink-soft);
  border-left-width: 7px;
  border-radius: 8px;
  overflow-wrap: anywhere;
}

.learned__item--right { border-left-color: var(--hit); }
.learned__item--wrong { border-left-color: var(--wax); }

.learned__q { font-weight: 700; line-height: 1.4; color: var(--ink); }
.learned__a { margin-top: 0.3rem; line-height: 1.5; color: var(--ink-soft); }

.banner--good { background: var(--hit-soft); border-color: var(--hit); }
.banner--bad { background: var(--miss-soft); border-color: var(--wax-dark); color: var(--wax-dark); }

.buttons { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.2rem; }

/* ── The mute switch ───────────────────────────────────────────────────────── */

.mute {
  position: absolute;
  right: clamp(0.9rem, 4vw, 2.25rem);
  bottom: clamp(1rem, 3vw, 1.5rem);
  min-height: 44px;
  margin: 0;
}

/* ── The boards ────────────────────────────────────────────────────────────── */

.board-block { margin-top: 1.6rem; }

.board__title {
  font-family: var(--font-title, inherit);
  font-size: 1.45rem;
  color: var(--wax-dark);
}

/* The rules of the board, printed ON the board. Not fine print: a child is meant to read this. */
.board__rules {
  margin: 0.45rem 0 0.9rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
  background: rgba(201, 150, 46, 0.14);
  border-left: 5px solid var(--gold-deep);
  border-radius: 6px;
}

/* Five columns of numbers do not fit across 390px of iPad. The TABLE scrolls inside this box;
   the page itself never moves sideways. */
.board__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 2px solid var(--ink-soft);
  border-radius: 8px;
  background: rgba(255, 250, 235, 0.66);
}

.board {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

.board th,
.board td {
  padding: 0.6rem 0.9rem;
  text-align: left;
}

.board th {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--ink-faint);
}

.board tbody tr + tr td { border-top: 1px solid var(--ink-faint); }
.board td { color: var(--ink); }

/* You, on a board of twenty names. Not colour alone — the row is also bold and carries a mark,
   so it still reads for a colour-blind child. */
.row--me td {
  font-weight: 700;
  background: rgba(201, 150, 46, 0.28);
  box-shadow: inset 3px 0 0 var(--wax);
}

.board__empty {
  padding: 1.1rem 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
  white-space: normal; /* the one cell that is a sentence, not a number */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}