/* Page layouts, copied from the approved design pages (design/*.html <style> blocks).
   App-only rules are at the end. */

/* ---------- Shared patterns (one per job, Home is the reference) ----------
   Header row: .top, the same height on every screen. Left: the seal on Home, the
   Back / Cancel / Home link everywhere else. Right: context (.meta or the player).
   Body: .body, a centred block under the header. Big kanji title: .kanji-title,
   with a .label above it. Primary action .btn, a real second choice .btn--line,
   quiet actions .link-btn (design/base.css). */
.top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 3rem; }
.top__end { min-width: 0; text-align: right; }
.body { flex: 1; display: grid; align-content: center; gap: var(--s-5); padding: var(--s-5) 0; }
.body--top { align-content: start; }
/* A quiet action alone under the buttons sits in the middle, not stretched. */
.stack > .link-btn { align-self: center; }
.kanji-title { margin: 0; font: 800 clamp(4rem, 22vw, 6.5rem)/0.95 var(--font-kanji); text-shadow: 0 0 1px rgb(27 23 18 / 0.35); }

/* ---------- home (design/home.html) ---------- */
  .hero { flex: 1; display: grid; align-content: center; gap: var(--s-5); padding: var(--s-5) 0 var(--s-5); }
  .hero__kanji {
    font: 800 clamp(5rem, 27vw, 8rem)/0.95 var(--font-kanji);
    letter-spacing: -0.02em;
    margin: 0;
    text-shadow: 0 0 1px rgb(27 23 18 / 0.35);
  }
  .hero__kanji span { display: block; }
  .hero__kanji span + span { padding-left: 0.5em; }
  .hero__line { margin: 0; max-width: 22ch; font-size: var(--step-1); line-height: 1.35; color: var(--ink-soft); }
  .hero__line em { font-style: normal; color: var(--ink); }
  /* The motto: a brushed rule, then two lines in the kanji face. "casual" is struck out in ink. */
  .motto { margin: 0; padding-left: var(--s-3); border-left: var(--rule) solid var(--ink); font: 500 var(--step--1)/1.5 var(--font-kanji); letter-spacing: 0.02em; color: var(--ink-soft); }
  .motto span, .motto b { display: block; }
  .motto s { text-decoration-color: var(--ink); text-decoration-thickness: 1.5px; }
  .motto b { font-weight: 800; color: var(--ink); font-size: var(--step-0); }
  .page--home .me { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--s-1) var(--s-4); padding: var(--s-4) 0; border-top: var(--hair) solid var(--ink-faint); }
  .me__name { font-weight: 700; font-size: var(--step-1); }
  .me__elo { font: 800 var(--step-3)/1 var(--font-kanji); text-align: right; }
  .me__elo small { display: block; font: 400 var(--step--1)/1.4 var(--font-ui); color: var(--ink-soft); letter-spacing: var(--track-label); text-transform: uppercase; }
  .me__chapter { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); }
  .me__chapter b { color: var(--ink); font-weight: 700; }
  .actions { display: grid; gap: var(--s-3); padding-top: var(--s-2); }
  .actions__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .actions .btn { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--s-1); padding: var(--s-4); }
  /* Desktop: the title takes the left, the player and actions the right. */
  @media (min-width: 900px) {
    .page--home { grid-template-columns: 1fr minmax(0, 60rem) 1fr; }
    .page--home .screen {
      display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto 1fr auto auto auto;
      column-gap: var(--s-8);
      /* Room under the actions, so they do not sit on the bottom edge. */
      padding-bottom: clamp(var(--s-6), 8vh, var(--s-8) * 2);
    }
    .page--home .top { grid-column: 1 / -1; }
    .hero { grid-column: 1; grid-row: 2 / 6; align-content: center; padding: 0; }
    .hero__kanji { font-size: 10rem; }
    .page--home .me { grid-column: 2; grid-row: 3; }
    .actions { grid-column: 2; grid-row: 4; }
    .foot { grid-column: 2; grid-row: 5; }
  }
  .foot { display: flex; justify-content: space-between; align-items: center; padding-top: var(--s-4); }

/* ---------- reveal (design/reveal.html) ---------- */
  .rv { flex: 1; display: grid; align-content: center; justify-items: center; gap: var(--s-5); padding: var(--s-5) 0; position: relative; }
  /* The answer, as furigana over the word; the English meaning under it. */
  .rv__word { display: grid; justify-items: center; gap: var(--s-2); position: relative; justify-self: stretch; }
  .rv__kana { font: 500 var(--step-3)/1 var(--font-kanji); letter-spacing: 0.06em; color: var(--ink); }
  .rv__meaning { margin: 0; max-width: 24ch; font: 500 var(--step-1)/1.3 var(--font-ui); color: var(--ink); text-align: center; text-wrap: balance; }
  .rv .word { font-size: calc(var(--word) * 0.82); }
  /* The stamp sits beside the reading, in the flow: it never covers the word. */
  .rv__top { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-2) var(--s-4); }
  .rv .stamp { width: 3.6rem; height: 3.6rem; font-size: 2.2rem; border-width: 0.22rem; }
  .lines { display: grid; gap: 0; border-top: var(--hair) solid var(--ink-faint); }
  .line { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-4); align-items: baseline; padding: var(--s-3) 0; border-bottom: var(--hair) solid var(--paper-edge); }
  .line__name { font-weight: 700; }
  .line__kana { font: 500 var(--step-1)/1 var(--font-kanji); }
  .line__time { font: 800 var(--step-1)/1 var(--font-kanji); min-width: 4.5ch; text-align: right; }
  .line__time small { font: 400 var(--step--1) var(--font-ui); color: var(--ink-soft); }
  .line.is-win .line__name::after { content: " · won the round"; font-weight: 400; color: var(--ink-soft); font-size: var(--step--1); }
  #line-me.is-win .line__name::after { color: var(--shu); }
  .line.is-wrong .line__kana { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--shu); }
  .next { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: center; }
  .next__bar { height: 2px; background: var(--paper-edge); }
  .next__bar i { display: block; height: 100%; background: var(--ink); transform-origin: left; animation: drain 6s linear both; }
  @keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- result (design/result.html) ---------- */
  .res { flex: 1; display: grid; align-content: center; gap: var(--s-6); padding: var(--s-6) 0; }
  .res__top { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: center; }
  .res .stamp { width: 8.5rem; height: 8.5rem; font-size: 5.4rem; }
  .res__word { font: 800 var(--step-3)/1.05 var(--font-kanji); margin: 0; }
  .res__word small { display: block; margin-top: var(--s-2); font: 400 var(--step-0)/1.4 var(--font-ui); color: var(--ink-soft); }
  .tally { display: grid; grid-template-columns: repeat(7, 1fr); border-top: var(--hair) solid var(--ink); border-bottom: var(--hair) solid var(--ink); }
  .tally span { display: grid; place-items: center; padding: var(--s-3) 0; font: 800 var(--step-1)/1 var(--font-kanji); border-left: var(--hair) solid var(--paper-edge); }
  .tally span:first-child { border-left: 0; }
  .tally .w { color: var(--shu); }
  .tally .l { color: var(--ink); }
  .tally .d { color: var(--ink-faint); }
  .elo { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--s-1) var(--s-4); }
  .elo__num { font: 800 3.5rem/1 var(--font-kanji); }
  .elo__delta { font: 800 var(--step-2)/1 var(--font-kanji); }
  .elo__delta.up { color: var(--shu); }
  .chapter { margin: 0; color: var(--ink-soft); }
  .chapter b { color: var(--ink); }

/* ---------- App only ---------- */
/* Long words shrink to fit the column (--n = characters in the word). */
.word { font-size: min(var(--word), calc((min(100vw, var(--column)) - 2 * var(--s-5)) / (var(--n, 2) * 1.12))); }
.rv .word { font-size: min(calc(var(--word) * 0.82), calc((min(100vw, var(--column)) - 2 * var(--s-5)) / (var(--n, 2) * 1.12))); }
.foot { flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.page--home .foot { justify-content: flex-start; }
.foot__links { display: flex; gap: var(--s-4); white-space: nowrap; }
#home-note:not(:empty) { flex-basis: 100%; }

/* ---------- save my progress, sign in (design/save.html) ---------- */
.sv__intro { display: grid; gap: var(--s-3); }
.sv__intro p { margin: 0; color: var(--ink-soft); max-width: 32ch; }
.sv__carry { display: flex; gap: var(--s-5); padding: var(--s-3) 0; border-top: var(--hair) solid var(--ink-faint); border-bottom: var(--hair) solid var(--ink-faint); }
.sv__carry b { display: block; font: 800 var(--step-2)/1.1 var(--font-kanji); }
.sv__warn { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.sv__warn b { color: var(--shu); font-weight: 700; }
.sv__error { margin: 0; min-height: 1.4em; font-size: var(--step--1); color: var(--shu); }
.sv__error:empty { min-height: 0; margin-top: calc(-1 * var(--s-5)); }
/* Contact: the honeypot field sits off-screen; people never see it, simple bots fill it. */
.contact__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Phone, Home: keep "Save my progress" above the fold. The hero gives up
   space first: smaller title, tighter gaps. */
@media (max-width: 899px) {
  .page--home .hero { gap: var(--s-4); padding: var(--s-3) 0; }
  .page--home .hero__kanji { font-size: clamp(4rem, min(24vw, 12dvh), 8rem); }
  .page--home .me { padding: var(--s-3) 0; }
}

/* Phone, Round with the on-screen keyboard open (short viewport): the word
   and the input must both stay visible, so everything above them shrinks. */
@media (max-height: 640px) and (max-width: 899px) {
  #round .screen, #train .screen { gap: var(--s-2); }
  #round .page, #round.page, #train.page { padding-top: var(--s-2); padding-bottom: var(--s-2); }
  #round .screen, #train .screen { min-height: calc(100dvh - 2 * var(--s-2)); }
  #round .word-stage, #train .word-stage { padding: var(--s-2) 0; gap: var(--s-2); }
  #round .word, #train .word { --word: clamp(4rem, 22dvh, 9.5rem); }
  #round .player__elo, #round .rounds { display: none; }
  #round .answer__field, #train .answer__field { padding-top: var(--s-2); }
}

/* ---------- Training ---------- */
.answer__field.is-wrong { color: var(--ink-faint); border-bottom-color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--shu); }
.intro__line { margin: 0; font-size: var(--step-0); line-height: 1.45; max-width: 30ch; }
.intro__line--soft { color: var(--ink-soft); font-size: var(--step--1); }
.tips { display: grid; border-top: var(--hair) solid var(--ink-faint); }
.tip { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-3) 0; border-bottom: var(--hair) solid var(--paper-edge); }
.tip b { display: block; font-weight: 700; }
.tip span { color: var(--ink-soft); font-size: var(--step--1); }
.tip__ex { text-align: right; }
.tip__ex code { display: block; font: 400 var(--step--1)/1.3 var(--font-ui); color: var(--ink-soft); letter-spacing: 0.04em; }
.tip__ex span { font: 500 var(--step-1)/1.2 var(--font-kanji); color: var(--ink); }
.tips--rules .tip { grid-template-columns: 1fr; }
.credits { margin-top: var(--s-5); font-size: var(--step--1); color: var(--ink-soft); }
.credits ul { margin: var(--s-2) 0; padding-left: 1.1rem; }
.credits li, .credits p { margin: var(--s-1) 0; }
.credits a { color: inherit; text-underline-offset: 0.2em; }
.train-actions { display: grid; gap: var(--s-2); }
.train-opts { display: flex; justify-content: space-between; align-items: center; }
.train-opts label { display: flex; gap: var(--s-2); align-items: center; cursor: pointer; }
.train-opts input { accent-color: var(--ink); }
#train .rv { padding: 0; }
@media (max-height: 640px) and (max-width: 899px) {
  #intro .kanji-title, #intro .intro__line--soft { display: none; }
  #intro .screen { gap: var(--s-3); min-height: calc(100dvh - 2 * var(--s-2)); }
  #intro.page { padding-top: var(--s-2); padding-bottom: var(--s-2); }
  #intro .body { gap: var(--s-3); padding: 0; }
  #intro .tip { padding: var(--s-2) 0; }
  #intro .tip > div:first-child span { display: none; }
  #intro .btn { padding: var(--s-3) var(--s-4); }
  #train .rv { gap: var(--s-2); }
}

/* ---------- Leaderboard ---------- */
.me__board { grid-column: 1 / -1; justify-self: start; }
.lb__list { list-style: none; margin: 0; padding: 0; border-top: var(--hair) solid var(--ink); }
.lb__row { display: grid; grid-template-columns: 2.4ch 1fr auto; gap: var(--s-3); align-items: baseline; padding: var(--s-2) var(--s-2); border-bottom: var(--hair) solid var(--paper-edge); }
.lb__rank { font: 800 var(--step-1)/1 var(--font-kanji); text-align: right; color: var(--ink-soft); }
.lb__who b { font-weight: 700; overflow-wrap: anywhere; }
.lb__who i { font-style: normal; font-size: var(--step--1); color: var(--ink-soft); }
.lb__elo small { display: block; font: 400 var(--step--1)/1.35 var(--font-ui); color: var(--ink-soft); }
.lb__elo { font: 800 var(--step-2)/1.1 var(--font-kanji); text-align: right; }
.lb__row:nth-child(-n+3) .lb__rank { color: var(--ink); }
.lb__row.is-me { background: var(--paper-deep); box-shadow: inset 3px 0 0 var(--ink); }
.lb__row.is-me .lb__rank { color: var(--ink); }
.lb__gap { text-align: center; color: var(--ink-faint); padding: var(--s-1) 0; letter-spacing: 0.3em; }
.lb__empty { margin: var(--s-6) 0; color: var(--ink-soft); max-width: 28ch; }


/* ---------- queue (design/queue.html) ---------- */
.q-stage { flex: 1; display: grid; place-content: center; justify-items: center; gap: var(--s-6); text-align: center; }
/* An ensō-like ring drawn by the countdown: 20 s of ink. */
.ring { position: relative; width: 14rem; height: 14rem; }
.ring svg { position: absolute; inset: 0; rotate: -90deg; }
.ring circle { fill: none; stroke-linecap: round; }
.ring .bg { stroke: var(--paper-edge); stroke-width: 2; }
.ring .fg { stroke: var(--ink); stroke-width: 5; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--done, 0) * 100); }
.ring__secs { position: absolute; inset: 0; display: grid; place-content: center; }
.ring__secs b { font: 800 4.5rem/1 var(--font-kanji); }
.ring__secs span { font-size: var(--step--1); color: var(--ink-soft); }
.q-text { display: grid; gap: var(--s-2); max-width: 22rem; justify-items: center; }
.q-text p { margin: 0; color: var(--ink-soft); }
#queue .q-found { display: none; }
#queue.is-found .q-search { display: none; }
#queue.is-found .q-found { display: grid; }
/* Found: the ring stays a closed circle of ink (never a grey ring) with the red seal of the duel. */
#queue.is-found .ring .fg { stroke: var(--ink); }
#queue.is-found .ring__secs b { color: var(--shu); }
.opp { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5); border: var(--hair) solid var(--ink); border-radius: var(--radius); }
.opp__name { font-weight: 700; font-size: var(--step-1); }

/* ---------- challenge a friend ---------- */
.fr p { margin: 0; color: var(--ink-soft); max-width: 32ch; }
.fr__link { display: grid; gap: var(--s-3); }
.fr__link input { font: 500 var(--step-0)/1.4 var(--font-ui); padding: var(--s-3) 0; border: 0; border-bottom: var(--rule) solid var(--ink); background: transparent; color: var(--ink); width: 100%; }

/* ---------- paused (design/disconnect.html) ---------- */
.dc__clock { font: 800 clamp(5rem, 26vw, 7.5rem)/1 var(--font-kanji); letter-spacing: -0.02em; margin: 0; }
.dc p { margin: 0; color: var(--ink-soft); max-width: 30ch; }
.dc p b { color: var(--ink); }
.dc__bar { height: 3px; background: var(--paper-edge); position: relative; }
.dc__bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--done, 0) * 100%); background: var(--ink); }
/* 60 s mark: when Claim win unlocks. */
.dc__bar::after { content: ""; position: absolute; left: 40%; top: -5px; width: 1px; height: 13px; background: var(--ink); }
.dc__marks { display: flex; justify-content: space-between; font-size: var(--step--1); color: var(--ink-soft); }
.dc__marks span:nth-child(2) { margin-left: calc(40% - 3ch); margin-right: auto; }
#paused.is-claimable #claim-wait { display: none; }
#claim-btn { display: none; }
#paused.is-claimable #claim-btn { display: flex; }

/* ---------- word-set picker (Training, Challenge a friend) ----------
   Tabs are underlined text, like a book's index tabs; the chosen row gets the
   leaderboard's "me" mark (paper-deep + an ink rule on the left). The bar is
   a hairline of ink over paper-edge: known / total words. */
#sets .screen { min-height: 100dvh; }
.ws { gap: var(--s-4); padding-bottom: var(--s-3); }
.ws__tabs, .ws__books { display: flex; gap: var(--s-5); border-bottom: var(--hair) solid var(--ink-faint); }
.ws__books { gap: var(--s-1) var(--s-4); flex-wrap: wrap; border-bottom: 0; }
.ws__tabs button, .ws__books button {
  font: 700 var(--step-0)/1 var(--font-ui); color: var(--ink-soft); background: none; border: 0; padding: var(--s-2) 0; cursor: pointer;
  border-bottom: var(--rule) solid transparent; margin-bottom: calc(-1 * var(--hair));
}
.ws__books button { font-weight: 400; font-size: var(--step--1); letter-spacing: var(--track-label); text-transform: uppercase; padding: var(--s-1) 0; }
.ws__tabs [aria-selected="true"], .ws__books [aria-checked="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.ws__list { list-style: none; margin: 0; padding: 0; border-top: var(--hair) solid var(--ink); }
.ws__row {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: var(--s-1) var(--s-3); align-items: center;
  width: 100%; padding: var(--s-2) var(--s-2); text-align: left; font: inherit; color: var(--ink); background: none; border: 0;
  border-bottom: var(--hair) solid var(--paper-edge); cursor: pointer;
}
.ws__row.is-on { background: var(--paper-deep); box-shadow: inset 3px 0 0 var(--ink); }
.ws__name { grid-row: 1 / 3; display: grid; gap: 2px; min-width: 0; }
.ws__name b { font: 800 1.125rem/1.3 var(--font-kanji); }
.ws__name i { font-style: normal; display: inline-block; min-width: 1.6ch; color: var(--ink-soft); }
.ws__name small { font: 400 var(--step--1)/1.35 var(--font-ui); color: var(--ink-soft); }
.ws__count { font: 400 var(--step--1)/1 var(--font-ui); color: var(--ink-soft); text-align: right; white-space: nowrap; }
.ws__count b { font: 800 var(--step-0)/1 var(--font-kanji); color: var(--ink); }
.ws__bar { display: block; width: 4.5rem; height: 3px; background: var(--paper-edge); }
.ws__bar i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--done, 0)); }
.ws__go { position: sticky; bottom: 0; padding: var(--s-3) 0 var(--s-4); background: var(--paper); }
.train-set { margin: 0; text-align: center; }
.train-set:empty { display: none; }
.fr__set b { color: var(--ink); font-weight: 700; }

/* The restart strip: ink on paper-deep, one line above the screen. */
.notice { position: fixed; inset: 0 0 auto 0; z-index: 10; padding: var(--s-2) var(--s-4); background: var(--ink); color: var(--paper); font-size: var(--step--1); text-align: center; letter-spacing: 0.02em; }
.notice[hidden] { display: none; }