/* Random Name Picker Wheel + Random Team Generator pages
   (scripts/build-corpus.js buildClassToolPage, content/class-tool-page.js).
   Sits on top of corpus.css + content/hangman-page.css: the board frame, the
   console (.hm-console / .hm-cell / .hm-pill / .hm-stepper), the theme cards,
   the quiet line and the panels are Hangman's own classes, so the two pages
   read as the same family. This file is the stage — the wheel, the teams —
   and its three themes, after the Hangman game's (teacher/high-noon-hangman.css:
   Wanted poster paper, Saloon at night, High Noon low-poly).

   Everything on the stage is sized in container units of the stage itself,
   so it scales from the page to a 1080p board in full screen: the picked
   name is 11cqh (≈120px at 1080p), never under 64px there. */

.ct-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 80vh;
    overflow: hidden;
    container-type: size;
    border-radius: 20px 20px 0 0;
    background: var(--cp-bg);
    color: #fff;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
@media (min-width: 700px) { .ct-stage { aspect-ratio: 16 / 10; } }
.ct-stage:fullscreen { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; }
.ct-stage:-webkit-full-screen { width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
/* No Fullscreen API (iPhone): the stage fills the window. */
.ct-stage.is-max {
    position: fixed; inset: 0; z-index: 1000;
    width: 100vw; height: 100vh; height: 100dvh; max-height: none; aspect-ratio: auto; border-radius: 0;
}
html.ct-no-scroll, html.ct-no-scroll body { overflow: hidden; }

.ct-stage .ct-cover { z-index: 6; }
.ct-stage.is-started .ct-cover { display: none; }

/* Logo in the corner, sound + full screen in the other. */
.ct-logo { position: absolute; left: 2.2cqw; top: 2.4cqh; z-index: 4; display: block; line-height: 0; }
.ct-logo img { height: clamp(22px, 5.6cqh, 54px); width: auto; }
.ct-corner { position: absolute; right: 2cqw; top: 2.2cqh; z-index: 4; display: flex; gap: 1.2cqh; }
.ct-icon {
    width: clamp(32px, 6.4cqh, 60px); height: clamp(32px, 6.4cqh, 60px);
    display: flex; align-items: center; justify-content: center; padding: 0;
    border-radius: 12px; border: 2px solid rgba(255,255,255,.25); background: rgba(16,8,34,.35);
    color: #fff; font-size: clamp(15px, 3cqh, 28px); line-height: 1; cursor: pointer;
}
.ct-icon:focus-visible, .ct-go:focus-visible, .ct-btn:focus-visible, .ct-link:focus-visible { outline: 3px solid #FBBF24; outline-offset: 3px; }

.ct-play { position: absolute; inset: 10cqh 0 0 0; display: flex; flex-direction: column; }

/* The strip along the bottom: the action button, a count, the called list. */
.ct-strip {
    flex: none; display: flex; align-items: center; gap: 1.6cqh 2cqw;
    padding: 1.2cqh 3cqw 2.4cqh; min-width: 0;
}
.ct-go {
    flex: none; cursor: pointer; border: none; border-radius: 1.4cqh;
    padding: 1.1cqh 3.4cqh; font-size: max(16px, 3.8cqh); line-height: 1.15; font-weight: 800;
    font-family: var(--font-display); background: #7C2BF5; color: #fff;
    box-shadow: 0 .6cqh 0 rgba(0,0,0,.25); transition: transform .12s;
}
.ct-go:hover:not(:disabled) { transform: translateY(-2px); }
.ct-go:disabled { opacity: .45; cursor: default; }
.ct-strip-count { flex: none; font-weight: 800; font-size: max(12px, 2.3cqh); white-space: nowrap; opacity: .85; }
.ct-chips {
    flex: 1 1 auto; min-width: 0; display: flex; gap: .8cqh; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.ct-chips::-webkit-scrollbar { display: none; }
.ct-chip {
    flex: none; padding: .4cqh 1.4cqh; border-radius: 999px; white-space: nowrap;
    font-weight: 800; font-size: max(12px, 2.1cqh); text-decoration: line-through; text-decoration-thickness: 2px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
}
@container (max-width: 560px) {
    .ct-strip { flex-wrap: wrap; row-gap: 1cqh; }
    .ct-chips { order: 3; flex-basis: 100%; }
}
.ct-link {
    flex: none; margin-left: auto; background: none; border: none; padding: .4cqh 0; cursor: pointer;
    font-weight: 800; font-size: max(12px, 2.2cqh); color: inherit; text-decoration: underline; text-underline-offset: 3px;
}

/* ── The wheel ───────────────────────────────────────────────────────── */
.ct-wheel-layout { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.ct-wheel-wrap {
    position: relative; width: min(72cqh, 92cqw); aspect-ratio: 1; flex: none;
    container-type: inline-size;
    --lab: min(6.4cqw, calc(150cqw / var(--n, 1)));
}
.ct-disc {
    position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-sizing: border-box;
    cursor: pointer; will-change: transform;
}
.ct-disc-face, .ct-disc-overlay { position: absolute; inset: 0; border-radius: 50%; }
.ct-disc-overlay { z-index: 2; pointer-events: none; }
.ct-seg { position: absolute; left: 50%; top: 50%; width: 50%; height: 0; transform-origin: 0 0; z-index: 1; }
.ct-seg-label {
    /* As big as the segment allows (--lab), then smaller for a long name
       (--len characters across ~31cqw of radius), and only then an ellipsis. */
    position: absolute; left: 15cqw; right: 3.8cqw; top: -0.62em;
    font-size: max(min(var(--lab), calc(50cqw / var(--len, 4))), min(var(--lab), 2.6cqw));
    line-height: 1.24; font-weight: 800; text-align: right;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-pointer {
    position: absolute; left: 50%; top: -2.6cqw; z-index: 3; transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 4cqw solid transparent; border-right: 4cqw solid transparent; border-top: 7.4cqw solid #fff;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.4));
}
.ct-hub {
    position: absolute; left: 50%; top: 50%; z-index: 3; width: 13cqw; height: 13cqw; margin: -6.5cqw 0 0 -6.5cqw;
    border-radius: 50%; box-sizing: border-box; pointer-events: none;
}

/* The pick, large, over the wheel. */
.ct-result {
    position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%);
    width: max-content; max-width: 90cqw; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; gap: 1.4cqh;
    padding: 3cqh 5cqh 3.4cqh; border-radius: 2.6cqh; text-align: center;
}
.ct-result[hidden] { display: none; }
.ct-result.is-in { animation: ct-pop .42s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes ct-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.82); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.ct-result-label { font-size: max(12px, 2.4cqh); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.ct-result-label:empty { display: none; }
.ct-result-name { font-size: max(28px, 11cqh); line-height: 1.04; font-weight: 800; overflow-wrap: anywhere; }
.ct-result-actions:empty { display: none; }
.ct-btn {
    cursor: pointer; border: none; border-radius: 1.2cqh; padding: .9cqh 2.6cqh;
    font-size: max(14px, 2.8cqh); font-weight: 800; font-family: var(--font-display); line-height: 1.2;
}

/* ── The teams ───────────────────────────────────────────────────────── */
.ct-teams-area { position: relative; flex: 1 1 auto; min-height: 0; padding: 0 3cqw; overflow: auto; }
.ct-teams {
    display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--gap, 12px);
    align-content: center; min-height: 100%; font-size: var(--fs, 22px);
}
.ct-team {
    position: relative; min-width: 0; box-sizing: border-box;
    display: flex; flex-direction: column; gap: .18em; padding: .4em .65em .5em;
}
.ct-team-tag { font-size: .5em; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; }
.ct-team-tag:empty { display: none; }
.ct-team-name { margin: 0 0 .1em; font-size: 1.05em; line-height: 1.15; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-team-list { list-style: none; margin: 0; padding: 0; }
.ct-team-list li { line-height: 1.18; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-teams.is-dealing .ct-team { animation: ct-card .32s ease-out both; animation-delay: calc(var(--i) * 55ms); }
.ct-teams.is-dealing .ct-team-list li { animation: ct-deal .34s ease-out both; animation-delay: calc(180ms + var(--d) * 26ms); }
@keyframes ct-card { from { opacity: 0; transform: translateY(-.6em) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ct-deal { from { opacity: 0; transform: translate(-.4em, -.5em) rotate(-5deg); } to { opacity: 1; transform: none; } }

/* Before the first deal: everyone in a pile. */
.ct-pile { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 1.2cqh; min-height: 100%; }
.ct-pile-chip { padding: .5cqh 1.8cqh; border-radius: 999px; font-weight: 800; font-size: max(13px, 3.2cqh); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    .ct-result.is-in { animation: ct-fade .3s ease-out both; }
    .ct-teams.is-dealing .ct-team, .ct-teams.is-dealing .ct-team-list li { animation: none; }
    .ct-go { transition: none; }
}
@keyframes ct-fade { from { opacity: 0; } to { opacity: 1; } }

/* ══════════ THEME — WANTED (poster paper) ══════════ */
.ct-stage[data-theme="wanted"] {
    background: radial-gradient(ellipse at 50% 38%, #f1e6cb, #d9cdbb 62%, #c7b48f);
    color: #3d2312; font-family: 'Special Elite', monospace;
}
.ct-stage[data-theme="wanted"] .ct-icon { border-color: #8a6a40; background: #ddc797; color: #3d2312; }
.ct-stage[data-theme="wanted"] .ct-go { font-family: 'Rye', serif; font-weight: 400; background: #7a2a12; color: #fbf3e0; border: 3px double #fbf3e0; box-shadow: 0 .6cqh 0 #4a1a0a; }
.ct-stage[data-theme="wanted"] .ct-chip { background: #ecdcb8; border-color: #8a6a40; color: #5a3a1c; }
.ct-stage[data-theme="wanted"] .ct-disc { border: 2.2cqw solid #6b4a26; box-shadow: inset 0 0 0 .9cqw #a07a48, 0 1.6cqw 3.6cqw rgba(58,36,20,.35); }
.ct-stage[data-theme="wanted"] .ct-disc-overlay {
    background:
        radial-gradient(circle, transparent 0 72%, rgba(61,35,18,.18) 72.5% 73.5%, transparent 74%),
        repeating-conic-gradient(rgba(61,35,18,.42) 0 .5deg, transparent .5deg calc(360deg / var(--n, 1)));
}
.ct-stage[data-theme="wanted"] .ct-seg-label { font-family: 'Special Elite', monospace; font-weight: 400; }
.ct-stage[data-theme="wanted"] .ct-pointer { border-top-color: #7a2a12; }
.ct-stage[data-theme="wanted"] .ct-hub { background: radial-gradient(circle, #a07a48 0 30%, #6b4a26 32%); border: .9cqw solid #3d2312; }
.ct-stage[data-theme="wanted"] .ct-result { background: #ecdcb8; border: 6px double #6b4a26; box-shadow: 0 2cqh 5cqh rgba(58,36,20,.4); color: #3d2312; }
.ct-stage[data-theme="wanted"] .ct-result-name { font-family: 'Rye', serif; font-weight: 400; }
.ct-stage[data-theme="wanted"] .ct-result-label { font-family: 'Rye', serif; font-weight: 400; color: #7a2a12; }
.ct-stage[data-theme="wanted"] .ct-btn { font-family: 'Rye', serif; font-weight: 400; background: #7a2a12; color: #fbf3e0; }
.ct-stage[data-theme="wanted"] .ct-team { background: #ecdcb8; border: .14em double #6b4a26; box-shadow: 0 .25em .6em rgba(58,36,20,.25); text-align: center; }
.ct-stage[data-theme="wanted"] .ct-team-tag { font-family: 'Rye', serif; font-weight: 400; color: #7a2a12; letter-spacing: .3em; border-bottom: 2px solid #8a6a40; padding-bottom: .15em; }
.ct-stage[data-theme="wanted"] .ct-team-name { font-family: 'Rye', serif; font-weight: 400; }
.ct-stage[data-theme="wanted"] .ct-team-list li { font-weight: 400; }
.ct-stage[data-theme="wanted"] .ct-pile-chip { background: #ecdcb8; border: 2px solid #8a6a40; }

/* ══════════ THEME — SALOON (at night) ══════════ */
.ct-stage[data-theme="saloon"] {
    background: radial-gradient(ellipse at 50% 30%, #3a2614, #1b1109 55%, #0d0804);
    color: #e8bd63; font-family: 'Special Elite', monospace;
}
.ct-stage[data-theme="saloon"] .ct-icon { border: 1px solid #6b4a2a; background: #2a1a0e; color: #c9a267; border-radius: 8px; }
.ct-stage[data-theme="saloon"] .ct-go { font-family: 'Rye', serif; font-weight: 400; background: #c8922f; color: #1b1109; box-shadow: 0 .6cqh 0 #6b4a16; }
.ct-stage[data-theme="saloon"] .ct-chip { background: #2a1a0e; border-color: #6b4a2a; color: #c9a267; }
.ct-stage[data-theme="saloon"] .ct-disc { border: 2cqw solid #c8922f; box-shadow: 0 0 0 .8cqw #4a2f16, 0 0 6cqw rgba(232,189,99,.18); }
.ct-stage[data-theme="saloon"] .ct-disc-overlay {
    background:
        radial-gradient(circle, rgba(0,0,0,0) 0 60%, rgba(0,0,0,.25) 100%),
        repeating-conic-gradient(rgba(232,189,99,.55) 0 .45deg, transparent .45deg calc(360deg / var(--n, 1)));
}
.ct-stage[data-theme="saloon"] .ct-seg-label { font-family: 'Fredoka', sans-serif; font-weight: 700; }
.ct-stage[data-theme="saloon"] .ct-pointer { border-top-color: #e8bd63; }
.ct-stage[data-theme="saloon"] .ct-hub { background: radial-gradient(circle, #e8bd63 0 28%, #1b1109 30%); border: .9cqw solid #c8922f; }
.ct-stage[data-theme="saloon"] .ct-result { background: rgba(27,17,9,.95); border: 2px solid #c8922f; box-shadow: 0 0 0 .6cqh #4a2f16, 0 2cqh 6cqh rgba(0,0,0,.6); color: #e8bd63; }
.ct-stage[data-theme="saloon"] .ct-result-name { font-family: 'Rye', serif; font-weight: 400; color: #f5e6c8; }
.ct-stage[data-theme="saloon"] .ct-btn { font-family: 'Rye', serif; font-weight: 400; background: #c8922f; color: #1b1109; }
/* Teams dealt like hands of cards. */
.ct-stage[data-theme="saloon"] .ct-team { background: #f7efdc; color: #1b1109; border-radius: .45em; border: 1px solid #c8b48a; box-shadow: 0 .3em .8em rgba(0,0,0,.55); padding-right: 1.6em; }
.ct-stage[data-theme="saloon"] .ct-team-tag { position: absolute; right: .25em; top: .05em; font-size: 1.2em; letter-spacing: 0; color: #1b1109; }
.ct-stage[data-theme="saloon"] .ct-team:nth-child(4n+2) .ct-team-tag,
.ct-stage[data-theme="saloon"] .ct-team:nth-child(4n+4) .ct-team-tag,
.ct-stage[data-theme="saloon"] .ct-team-name.is-red { color: #8c2424; }
.ct-stage[data-theme="saloon"] .ct-team-name { font-family: 'Rye', serif; font-weight: 400; }
.ct-stage[data-theme="saloon"] .ct-team-list li { font-weight: 400; }
.ct-stage[data-theme="saloon"] .ct-pile-chip { background: #f7efdc; color: #1b1109; }

/* ══════════ THEME — LOW-POLY (high noon) ══════════ */
.ct-stage[data-theme="lowpoly"] {
    background:
        linear-gradient(rgba(242,199,102,.2), rgba(217,143,43,.6)),
        url('/images/games/high-noon-hangman/desert-banner.jpg') center 35% / cover, #d98f2b;
    color: #6b3f14; font-family: 'Fredoka', sans-serif;
}
.ct-stage[data-theme="lowpoly"] .ct-icon { border: none; background: #fff; color: #6b3f14; box-shadow: 0 3px 0 #c2761f; }
.ct-stage[data-theme="lowpoly"] .ct-go { font-family: 'Fredoka', sans-serif; font-weight: 700; background: #fff; color: #6b3f14; box-shadow: 0 .6cqh 0 #c2761f; text-transform: uppercase; }
.ct-stage[data-theme="lowpoly"] .ct-strip-count { color: #fff; text-shadow: 0 2px 0 #c2761f; opacity: 1; }
.ct-stage[data-theme="lowpoly"] .ct-link { color: #fff; text-shadow: 0 2px 0 #c2761f; }
.ct-stage[data-theme="lowpoly"] .ct-chip { background: rgba(255,255,255,.9); border: none; color: #6b3f14; }
.ct-stage[data-theme="lowpoly"] .ct-disc { border: 1.8cqw solid #fff; box-shadow: 0 1.4cqw 0 #c2761f, 0 2cqw 4cqw rgba(58,36,20,.3); }
/* Faceted: each band split light / shade, like a cut gem. */
.ct-stage[data-theme="lowpoly"] .ct-disc-overlay {
    background:
        radial-gradient(circle at 38% 30%, rgba(255,255,255,.28), transparent 55%),
        repeating-conic-gradient(rgba(255,255,255,.16) 0 calc(180deg / var(--n, 1)), rgba(107,63,20,.10) 0 calc(360deg / var(--n, 1)));
}
.ct-stage[data-theme="lowpoly"] .ct-seg-label { font-family: 'Fredoka', sans-serif; font-weight: 700; }
.ct-stage[data-theme="lowpoly"] .ct-pointer { border-top-color: #fff; }
.ct-stage[data-theme="lowpoly"] .ct-hub { background: #fff; border: .9cqw solid #e9ad3f; box-shadow: 0 .5cqw 0 #c2761f; }
.ct-stage[data-theme="lowpoly"] .ct-result { background: #fff; color: #6b3f14; border-radius: 3cqh; box-shadow: 0 1cqh 0 #c2761f, 0 3cqh 6cqh rgba(58,36,20,.35); }
.ct-stage[data-theme="lowpoly"] .ct-result-name { font-family: 'Fredoka', sans-serif; font-weight: 700; color: #b3401f; }
.ct-stage[data-theme="lowpoly"] .ct-btn { font-family: 'Fredoka', sans-serif; font-weight: 700; background: #e9ad3f; color: #fff; box-shadow: 0 .4cqh 0 #c2761f; text-transform: uppercase; }
/* Faceted tiles. */
.ct-stage[data-theme="lowpoly"] .ct-team {
    background: linear-gradient(135deg, #fffaf0 0 48%, #fff1cf 48% 100%); color: #6b3f14;
    clip-path: polygon(.7em 0, 100% 0, 100% calc(100% - .7em), calc(100% - .7em) 100%, 0 100%, 0 .7em);
    filter: drop-shadow(0 .2em 0 #c2761f);
}
.ct-stage[data-theme="lowpoly"] .ct-team-name { color: #b3401f; text-transform: uppercase; }
.ct-stage[data-theme="lowpoly"] .ct-team:nth-child(4n+2) .ct-team-name { color: #2f7a48; }
.ct-stage[data-theme="lowpoly"] .ct-team:nth-child(4n+3) .ct-team-name { color: #2b5c8a; }
.ct-stage[data-theme="lowpoly"] .ct-team:nth-child(4n+4) .ct-team-name { color: #8a4b9e; }
.ct-stage[data-theme="lowpoly"] .ct-pile-chip { background: rgba(255,255,255,.92); box-shadow: 0 3px 0 #c2761f; }

/* ── Console extras ──────────────────────────────────────────────────── */
@media (min-width: 860px) {
    .ct-console { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}
.ct-console .hm-pill { padding-left: 6px; padding-right: 6px; }
.ct-console-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ct-console-links [hidden] { display: none; }
.hm-stepper-group[hidden] { display: none; }

/* ── Who's here today ────────────────────────────────────────────────── */
.ct-here-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.ct-here-head strong { font-family: var(--font-display); font-size: 1.25rem; color: #fff; }
.ct-here-head span { font-weight: 800; color: #FBBF24; }
.ct-here-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; margin: 12px 0 16px; }
.ct-here-item {
    display: flex !important; align-items: center; gap: 8px; margin: 0 !important; cursor: pointer;
    font: 700 0.95rem var(--font-body) !important; letter-spacing: 0 !important; text-transform: none !important; color: #E4D9FF !important;
}
.ct-here-item input { width: 18px !important; height: 18px; margin: 0 !important; accent-color: #FBBF24; flex: none; }
.ct-here-item input:not(:checked) + span { color: #8E7DB8; text-decoration: line-through; }

/* ── Same class, more tools ──────────────────────────────────────────── */
.ct-offer {
    margin: 0 0 30px; padding: 18px 20px; border-radius: 20px;
    background: linear-gradient(100deg, rgba(255,255,255,.07) 30%, rgba(251,191,36,.10));
    border: 1px solid rgba(255,255,255,0.12);
}
.ct-offer-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 8px; }
.ct-offer-note { margin: 0; font-family: 'Caveat', cursive; font-size: 1.35rem; font-weight: 700; color: #FBBF24; line-height: 1.1; }