/* Hangman topic + hub pages (scripts/build-corpus.js buildHangmanTopicPage /
   buildHangmanHubPage, content/hangman-page.js). Sits on top of corpus.css.

   Night theme: every value below is copied from teacher/class-progress.css
   (the site's design-system reference) — palette, Baloo 2 / Nunito Sans,
   the .tool-control-label labels, the Hangman theme cards (.hnh-theme-option)
   and the modules stepper (.cp-stepper-group). Keep them in step with it. */

body.corpus-night {
    --font-display: 'Baloo 2', 'Fredoka', cursive;
    --font-body: 'Nunito Sans', system-ui, sans-serif;
    --cp-bg: #2B1D4B;
    --cp-panel: #3E2F6D;
    --cp-card: #33255A;
    --cp-accent: #EE7F3B;
    --cp-accent-soft: rgba(238,127,59,0.14);
    --cp-accent-line: rgba(238,127,59,0.6);
    background: #241a3c;
    color: #fff;
    font-family: var(--font-body);
}
.corpus-night .corpus-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 4.6vw, 2.75rem);
    letter-spacing: 0;
    line-height: 1.1;
    margin: 8px 0 6px;
}
.corpus-night .corpus-section-title { font-family: var(--font-display); font-weight: 800; letter-spacing: 0; }
.corpus-night .corpus-intro-p { color: #B3A2D8; }
.corpus-night .corpus-back { color: #9B8AC4; font-family: var(--font-body); font-weight: 700; }
.corpus-night .corpus-back:hover { color: #fff; }
.corpus-night .corpus-inline-link { color: #C4B5FD; }
.corpus-night .corpus-container { padding-top: 18px; }

.hm-header { margin-bottom: 0; }
.hm-sub {
    font-size: 1rem;
    color: #E4D9FF;
    line-height: 1.6;
    margin: 0;
    max-width: 62ch;
}
.hm-sub strong { color: #fff; font-weight: 900; }

/* ── The game, in the hero ─────────────────────────────────────────── */
.hm-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 4;
    max-height: 78vh;
    margin: 0;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    background: var(--cp-bg);
}
@media (min-width: 700px) { .hm-stage { aspect-ratio: 16 / 10; } }
.hm-stage iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.hm-cover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    justify-content: center;
    background: rgba(24,14,48,.42);
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
}
/* .cp-welcome-btn, scaled up for the one action on the page */
.hm-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 34px;
    border-radius: 14px;
    background: #7C2BF5;
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    line-height: 1.2;
    box-shadow: 0 4px 0 rgba(0,0,0,.2), 0 14px 34px rgba(124,43,245,.45);
    transition: transform .15s, background .15s;
}
.hm-cover:hover .hm-play-btn,
.hm-cover:focus-visible .hm-play-btn { background: #8F45FF; transform: translateY(-2px); }
.hm-cover:focus-visible { outline: 3px solid #FBBF24; outline-offset: -3px; }
/* "Any whiteboard or projector. Nothing to install." — the one hesitation
   before pressing Play in front of a class. */
.hm-cover-note {
    padding: 5px 14px; border-radius: 999px;
    background: rgba(20,10,40,.62); color: #E4D9FF;
    font: 700 0.92rem var(--font-body);
}
.hm-stage.is-playing .hm-cover { display: none; }

.hm-stage:fullscreen { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; border: 0; margin: 0; }
.hm-stage:-webkit-full-screen { width: 100vw; height: 100vh; max-height: none; border-radius: 0; border: 0; margin: 0; }

/* ── The board: game + console, one unit ─────────────────────────────
   The console sits flush under the game, same width, no gap — a console
   under a screen. Three cells: Theme · Words · Players. */
.hm-board {
    margin: 22px 0 18px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    overflow: hidden;
    background: var(--cp-card);
    box-shadow: 0 20px 44px rgba(11,16,32,.35);
}
.hm-console {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--cp-card);
    border-top: 1px solid rgba(255,255,255,0.12);
}
@media (min-width: 860px) {
    .hm-console { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.05fr); }
    .hm-cell + .hm-cell { border-left: 1px solid rgba(255,255,255,0.08); }
}
@media (max-width: 859px) {
    .hm-cell + .hm-cell { border-top: 1px solid rgba(255,255,255,0.08); }
}
.hm-cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px 16px; }
/* .tool-control-label */
.hm-label { font-size: 0.72rem; letter-spacing: 1.5px; font-weight: 900; color: #9B8AC4; text-transform: uppercase; }
.hm-cell-note { margin: 0; font-size: 0.78rem; font-weight: 600; color: #B3A2D8; line-height: 1.4; }

/* Segmented pills — .tool-pill-row / .tool-pill, on with the .cpg gold */
.hm-pills { display: flex; gap: 4px; background: rgba(16,8,34,0.45); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 4px; }
.hm-pill {
    flex: 1 1 auto; min-width: 0; text-align: center; padding: 7px 10px; border-radius: 999px; cursor: pointer;
    font: 800 0.875rem var(--font-body); color: #E4D9FF; background: none; border: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-pill:hover { color: #fff; }
.hm-pill[aria-pressed="true"] { background: #FBBF24; color: #241a3c; }
.hm-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Theme cards — a screenshot of the real game in that theme over its name,
   the name dressed as the theme (.hnh-theme-option), the chosen one ringed
   in gold. Seeing Saloon and Low-poly without clicking is the point. */
.hm-themes { display: flex; gap: 10px; }
.hm-theme {
    position: relative; display: flex; flex-direction: column; align-items: stretch;
    flex: 1 1 0; min-width: 0; padding: 0; overflow: hidden; border-radius: 13px; cursor: pointer;
    font: inherit;
}
.hm-theme img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.hm-theme strong { padding: 3px 4px 4px; font-size: 0.82rem; letter-spacing: 0.02em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-theme[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--cp-card), 0 0 0 6px #FBBF24; }
.hm-theme:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hm-theme[data-hm-theme="wanted"] { background: #ecdcb8; color: #3d2312; border: 3px double #6b4a26; }
.hm-theme[data-hm-theme="wanted"] strong { font-family: 'Rye', serif; font-weight: 400; }
.hm-theme[data-hm-theme="saloon"] { background: #1b1109; color: #e8bd63; border: 1px solid #c8922f; }
.hm-theme[data-hm-theme="saloon"] strong { font-family: 'Rye', serif; font-weight: 400; }
.hm-theme[data-hm-theme="lowpoly"] { background: linear-gradient(#f2c766, #e9ad3f); color: #6b3f14; border: 3px solid #fff; border-radius: 16px; }
.hm-theme[data-hm-theme="lowpoly"] strong { font-family: 'Fredoka', sans-serif; font-weight: 700; }

/* Modules stepper — .cp-stepper-group / .cp-stepper / .cp-range-foot */
.hm-stepper-group {
    background: rgba(16,8,34,0.45); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 22px; overflow: hidden;
}
.hm-stepper { display: flex; align-items: center; gap: 6px; padding: 5px; }
.hm-step {
    width: 28px; height: 28px; flex: none; border-radius: 50%; border: none;
    background: rgba(255,255,255,0.08); color: #fff; font: 800 1rem/1 var(--font-body); cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.hm-step:hover:not(:disabled) { background: rgba(255,255,255,0.18); }
.hm-step:disabled { opacity: 0.35; cursor: default; }
.hm-stepper-val {
    flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: 6px;
    font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: #fff; line-height: 1;
}
.hm-stepper-input {
    width: 3.4ch; min-width: 0; padding: 0; border: none; background: transparent;
    color: inherit; font: inherit; text-align: center; -moz-appearance: textfield; appearance: textfield;
}
.hm-stepper-input:focus { outline: none; border-bottom: 2px solid var(--cp-accent); }
.hm-stepper-input::-webkit-outer-spin-button,
.hm-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hm-stepper-of, .hm-stepper-arrow { font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; color: #8E7DB8; white-space: nowrap; }
.hm-stepper-arrow { font-size: 0.9rem; }
.hm-stepper-name {
    padding: 7px 16px 9px; border-top: 1px solid rgba(255,255,255,0.08);
    text-align: center; font: 800 0.85rem/1.3 var(--font-body); color: #E4D9FF;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-stepper-name:empty { display: none; }
/* Topic peek: hidden until held (content/hangman-page.js) — a module's topic
   is usually the word itself. */
.hm-peek {
    display: block; width: 100%; margin: 0; background: none; border: none;
    border-top: 1px solid rgba(255,255,255,0.08); cursor: pointer;
    color: #9B8AC4; font-weight: 700; user-select: none; -webkit-user-select: none;
    touch-action: none; -webkit-touch-callout: none;
}
.hm-peek:hover { color: #E4D9FF; }
.hm-peek.is-peeking { color: #FBBF24; font-weight: 800; }
.hm-peek:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.hm-stepper-group[hidden] { display: none; }
.hm-link { background: none; border: none; padding: 0; color: #C4B5FD; font: 800 0.78rem var(--font-body); cursor: pointer; }
.hm-link:hover { color: #fff; }

/* ── Quiet lines + panels ───────────────────────────────────────────── */
.hm-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 12px 16px;
    margin: 0 0 18px;
    border-radius: 20px;
    background: var(--cp-card);
    border: 1px solid rgba(255,255,255,0.12);
    color: #E4D9FF;
    font-size: 0.95rem;
    font-weight: 700;
}
.hm-line[hidden], .hm-panel[hidden] { display: none; }
.hm-line strong { color: #fff; font-weight: 900; }
.hm-btn {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-radius: 14px;
    padding: 9px 16px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    transition: transform .15s, background .15s;
}
.hm-btn:hover { background: rgba(255,255,255,0.18); }
a.hm-btn { display: inline-block; text-decoration: none; }
.hm-btn[hidden] { display: none; }
/* .cp-welcome-btn */
.hm-btn.is-primary { background: #7C2BF5; border-color: #7C2BF5; box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.hm-btn.is-primary:hover { background: #8F45FF; transform: translateY(-2px); }
.hm-btn:focus-visible { outline: 3px solid #FBBF24; outline-offset: 3px; }
.hm-btn.is-quiet { background: none; border-color: transparent; color: #C4B5FD; font-family: var(--font-body); font-size: 0.85rem; padding-left: 4px; padding-right: 4px; }
.hm-btn.is-quiet:hover { color: #fff; transform: none; }

.hm-panel {
    padding: 18px 20px;
    margin: 0 0 22px;
    border-radius: 20px;
    background: var(--cp-card);
    border: 1px solid rgba(255,255,255,0.12);
}
.hm-panel label { display: block; font-size: 0.72rem; letter-spacing: 1.5px; font-weight: 900; color: #9B8AC4; text-transform: uppercase; margin: 0 0 8px; }
.hm-panel input,
.hm-panel textarea {
    width: 100%;
    box-sizing: border-box;
    background: rgba(16,8,34,0.45);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 13px;
    padding: 10px 12px;
    font: 600 0.95rem/1.5 var(--font-body);
    margin-bottom: 14px;
}
.hm-panel input:focus,
.hm-panel textarea:focus { outline: none; border-color: var(--cp-accent-line); }
.hm-panel input { max-width: 220px; }
.hm-panel textarea { min-height: 150px; resize: vertical; }
.hm-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hm-note { font-size: 0.8rem; color: #B3A2D8; margin: 10px 0 0; }
.hm-msg { font-size: 0.85rem; font-weight: 700; color: #fca5a5; min-height: 1em; }

/* ── Journey page: what the journey is, and one line to the generator ─── */
.hm-about { margin: 0 0 10px; max-width: 70ch; font-size: 0.95rem; line-height: 1.6; color: #B3A2D8; }
.hm-aside { margin: 0 0 30px; font-size: 0.95rem; font-weight: 700; color: #E4D9FF; }

/* ── "Same words, on paper" — the printables as the next activity ────────
   A paper card (.cp-welcome-card's paper: #FBF6EA / #E6DCC4 / #2B1C50,
   Caveat kicker in #B7791F): the quiet activity after the loud one. */
.hm-paper {
    margin: 0 0 34px;
    padding: 22px 24px 20px;
    border-radius: 8px;
    background: #FBF6EA;
    border: 1px solid #E6DCC4;
    color: #2B1C50;
    box-shadow: 0 20px 44px rgba(11,16,32,.35);
}
.hm-paper-title { margin: 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; line-height: 1.15; color: #2B1C50; }
.hm-paper-sub { margin: 2px 0 14px; font-family: 'Caveat', cursive; font-size: 1.35rem; font-weight: 700; line-height: 1.1; color: #B7791F; }
.hm-paper-row { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0; padding: 8px 0; border-top: 1px dashed #E6DCC4; font-size: 0.95rem; font-weight: 700; }
.hm-paper-row strong { flex: 0 0 7.5em; font-weight: 900; }
.hm-paper-row span { color: #8A7A5A; }
.hm-paper a { color: #7C2BF5; font-weight: 800; text-decoration: none; }
.hm-paper a:hover { text-decoration: underline; }
.hm-paper-devices { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #E6DCC4; font-size: 0.88rem; font-weight: 600; color: #8A7A5A; }
.hm-paper-devices em { font-style: normal; font-weight: 900; color: #2B1C50; }

/* ── Generator (/hangman/): the list, the theme, play ───────────────── */
.hm-maker {
    display: grid; grid-template-columns: 1fr; gap: 20px;
    margin: 22px 0 18px; padding: 20px 22px;
    background: var(--cp-card); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px;
    box-shadow: 0 20px 44px rgba(11,16,32,.35);
}
@media (min-width: 860px) { .hm-maker { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 26px; } }
.hm-maker-words, .hm-maker-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hm-maker textarea {
    width: 100%; box-sizing: border-box; min-height: 230px; resize: vertical;
    background: rgba(16,8,34,0.45); color: #fff;
    border: 1px solid rgba(255,255,255,0.12); border-radius: 13px;
    padding: 12px 14px; font: 600 1rem/1.55 var(--font-body);
}
.hm-maker textarea:focus { outline: none; border-color: var(--cp-accent-line); }
/* .cp-welcome-btn, full width */
.hm-maker-play {
    margin-top: 10px; padding: 14px 22px; border: none; border-radius: 14px;
    background: #7C2BF5; color: #fff; cursor: pointer;
    font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; line-height: 1.2;
    box-shadow: 0 4px 0 rgba(0,0,0,.2); transition: transform .15s, background .15s;
}
.hm-maker-play:hover { background: #8F45FF; transform: translateY(-2px); }
.hm-maker-play:focus-visible { outline: 3px solid #FBBF24; outline-offset: 3px; }
.hm-board[hidden] { display: none; }

/* ── The terms ──────────────────────────────────────────────────────── */
.hm-terms { display: grid; gap: 2px; margin: 0; }
.hm-term { padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.hm-term dt { margin: 0; display: flex; gap: 10px; align-items: baseline; }
.hm-term-num { flex: 0 0 2.2em; color: #8E7DB8; font-size: 0.8rem; font-weight: 700; }
.hm-term dt a { color: #fff; font-weight: 800; text-decoration: none; }
.hm-term dt a:hover { text-decoration: underline; }
.hm-term dd { margin: 2px 0 0 calc(2.2em + 10px); color: #B3A2D8; font-size: 0.88rem; line-height: 1.5; }

/* ── What next: more for this subject · other topics ─────────────────── */
.hm-next { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 34px 0 10px; }
@media (min-width: 760px) { .hm-next { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }
.hm-next-col {
    display: flex; flex-direction: column; gap: 4px;
    padding: 18px 20px; border-radius: 20px;
    background: var(--cp-card); border: 1px solid rgba(255,255,255,0.12);
}
.hm-next-title { margin: 0 0 6px; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1.2; color: #fff; }
.hm-next-link {
    display: flex; flex-direction: column; gap: 1px;
    padding: 9px 12px; margin: 0 -12px; border-radius: 13px;
    color: #fff; text-decoration: none;
}
.hm-next-link:hover { background: rgba(255,255,255,0.06); }
.hm-next-link strong { font-weight: 800; font-size: 0.98rem; }
.hm-next-link span { font-size: 0.82rem; font-weight: 600; color: #B3A2D8; }
.hm-next-empty { margin: 0 0 4px; font-size: 0.9rem; color: #B3A2D8; }

/* ── Generator: ready-made topics, grouped by curriculum ───────────── */
.hm-group-title { margin: 22px 0 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: #E4D9FF; }

/* ── Hub topic cards ────────────────────────────────────────────────── */
.hm-topics { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.hm-topic {
    display: block;
    padding: 18px 20px;
    border-radius: 20px;
    background: var(--cp-card);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    text-decoration: none;
    transition: transform .15s, border-color .15s;
}
.hm-topic:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.3); }
.hm-topic-name { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1.2; }
.hm-topic-meta { display: block; color: #B3A2D8; font-size: 0.85rem; font-weight: 600; margin-top: 4px; }