/* TT Interactive Trivia Time. Experiment-local styling; no storefront dependencies. */
:root { color-scheme:dark; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid #f6ce4f; outline-offset:3px; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
/* A 720×1280 logical surface scales cleanly to the recommended 1080×1920 source. */
html.tt-source, .tt-source body { margin:0;width:100%;height:100%;background:transparent!important;overflow:hidden; }
#viewport { position:fixed;inset:0;display:grid;place-items:center;background:transparent; }
.stage { --back:#0e1420;--question:#f5f1e5;--answer:#244873;--accent:#ffd43b;--question-ink:#141a24;--answer-ink:#fff;--accent-ink:#101114;position:absolute;width:720px;height:1280px;overflow:hidden;transform-origin:center;flex:none;color:#f6f4ed;background:var(--back); }
.stage[data-background="studio"] { background-image:radial-gradient(ellipse at 100% 0%,#ffffff07,transparent 55%); }
.stage[data-background="transparent"] { background:transparent!important; }
.particles { position:absolute;inset:0;pointer-events:none; }
.particles i { position:absolute;width:3px;height:3px;background:var(--accent);border-radius:50%;opacity:.4;animation:drift 15s ease-in-out infinite; }
@keyframes drift { 50% { transform:translate(12px,-28px);opacity:.15; } }
.game-brand { position:absolute;top:30px;left:26px;right:26px;height:40px;display:flex;align-items:center;gap:12px;font-size:17px;font-weight:850;letter-spacing:2px; }
.tt-mark { display:inline-grid;place-items:center;background:var(--accent,#f6ce4f);color:var(--accent-ink,#141a24);width:40px;height:40px;font-size:19px;font-weight:950;letter-spacing:-1px;border-radius:9px; }
.input-label { margin-left:auto;font-size:14px;letter-spacing:1.2px;border:1px solid #a4b0c43d;border-radius:5px;padding:7px 9px;background:#152034;color:#d8dfed; }
.game-title { position:absolute;left:26px;top:78px; }
.game-title h1 { margin:0;font-size:48px;line-height:1.15;letter-spacing:-2px;font-weight:900; }
.title-dot { color:var(--accent,#f6ce4f); }
.game-title p { margin:9px 0 0;font-size:14px;letter-spacing:2px;font-weight:700;color:#afbbd0; }
.phase-row { position:absolute;left:26px;right:26px;top:166px;height:38px;display:flex;align-items:center;justify-content:space-between; }
.phase-pill { display:inline-flex;gap:18px;align-items:center;min-width:142px;background:var(--accent);color:var(--accent-ink);padding:8px 12px;font-size:18px;font-weight:900;border-radius:5px; }
.phase-pill b { font-variant-numeric:tabular-nums;margin-left:auto; }
.round-label { color:#b6c1d2;font-size:16px;letter-spacing:1.5px;font-weight:700;background:#142035;padding:7px 9px;border-radius:4px; }
.question-card { position:absolute;left:26px;right:26px;top:225px;height:177px;border-radius:16px;background:var(--question);color:var(--question-ink);padding:18px 25px; }
.category { display:block;font-size:14px;line-height:18px;letter-spacing:2px;font-weight:850;opacity:.75; }
.question-card h2 { padding:0 2px;margin:9px 0 0;height:112px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:39px;line-height:1.13;font-weight:850;letter-spacing:-1.2px;overflow-wrap:anywhere; }
.options { position:absolute;left:26px;right:26px;top:425px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:122px 122px;gap:14px; }
.option { position:relative;display:flex;align-items:center;justify-content:center;padding:12px 12px 26px 63px;background:var(--answer);color:var(--answer-ink);border:2px solid #ffffff12;border-radius:11px;transition:background .24s ease,opacity .24s ease,transform .24s ease; }
.letter { position:absolute;left:10px;top:11px;width:38px;height:39px;display:grid;place-items:center;border-radius:7px;background:var(--accent);color:var(--accent-ink);font-size:24px;font-weight:900;border:2px solid #1119268a;box-shadow:0 2px 0 #070c1477; }
/* Keep a dedicated lower band for revealed vote badges; never cover an answer. */
.option-text { padding:0 2px;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;height:80px;font-weight:800;font-size:27px;line-height:1.08;text-align:center;overflow-wrap:anywhere; }
.option.removed { opacity:.32;transform:scale(.975);background:#152131; }
.option.removed .option-text { text-decoration:line-through;text-decoration-thickness:2px; }
.option.correct { background:#48d6a8;color:#082a24;border-color:#86f3d0; }
.option.correct .letter { background:#effcf6;color:#092a24; }
.option.incorrect { background:#1b293c;color:#b0bbcc; }
.option.incorrect .letter { opacity:.6; }
.vote-count { position:absolute;right:7px;bottom:6px;font-size:14px;line-height:16px;padding:1px 5px;border-radius:3px;font-weight:800;background:#071725a6;color:#fff; }
.option.correct .vote-count { background:#0c5948;color:#fff; }
.big-countdown { pointer-events:none;position:absolute;inset:-12px;display:grid;place-items:center;font-size:157px;font-weight:950;line-height:1;color:var(--accent);text-shadow:0 5px 0 #111a2b,3px 0 0 #111a2b,-3px 0 0 #111a2b; }
.count-pop { animation:count-pop .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes count-pop { from { transform:scale(1.22);opacity:.2; } to { transform:scale(1);opacity:1; } }
.game-prompt { position:absolute;left:26px;right:26px;top:696px;margin:0;height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;letter-spacing:.65px;text-align:center; }
.timer-track { position:absolute;left:26px;right:26px;top:740px;height:5px;background:#9bb4da25;border-radius:3px;overflow:hidden; }
#timer-fill { height:100%;width:100%;background:var(--accent);transition:width .05s linear; }
#timer-fill.urgent { background:#f08675; }
.voters { position:absolute;left:26px;right:26px;top:759px;height:74px; }
#vote-total { margin:0 0 10px;text-align:center;color:#bec9da;font-size:14px;font-weight:800;letter-spacing:1.2px; }
.voter-strip { display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;max-height:48px;overflow:hidden; }
.voter { display:inline-flex;align-items:center;gap:4px;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:700;color:#dce4f2; }
.monogram { display:inline-grid;flex:none;place-items:center;background:#cee7df;color:#21433e;border-radius:50%;width:25px;height:25px;font-size:14px;font-weight:900; }
.voter .monogram { width:19px;height:19px;font-size:14px; }
.monogram[data-tone="1"] { background:#e9d3b9;color:#603d20; }.monogram[data-tone="2"] { background:#d1d8ef;color:#303f70; }.monogram[data-tone="3"] { background:#e4cadd;color:#663b5d; }
.score-panel,.result-panel { position:absolute;left:26px;right:26px;top:851px;height:294px;border-radius:12px; }
.panel-heading { display:flex;justify-content:space-between;align-items:center;margin-bottom:13px; }
.panel-heading h2 { margin:0;font-size:18px;letter-spacing:1.3px;font-weight:850;color:var(--accent); }
.panel-heading>span { font-size:14px;font-weight:700;color:#afbdd4;letter-spacing:.6px; }
.score-list { margin:0;padding:0;list-style:none;display:grid;gap:5px; }
.score-row { height:28px;background:#1b293c;border:1px solid #35445a;border-radius:5px;display:flex;align-items:center;gap:10px;padding:1px 10px;color:#e2e8f1; }
.score-row:first-child { background:var(--accent);color:var(--accent-ink);border-color:var(--accent); }
.rank { font-size:14px;font-weight:800;width:14px; }
.score-row .monogram { width:21px;height:21px;font-size:14px; }
.score-name { font-size:15px;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.points { font-size:16px;letter-spacing:.3px;font-variant-numeric:tabular-nums; }
.board-empty { white-space:pre-line;text-align:center;margin:66px 0 0;font-size:23px;line-height:1.4;font-weight:700;color:#aab8ce; }
.result-panel { background:var(--accent);color:var(--accent-ink);padding:16px 15px;animation:result-in .32s ease both; }
.result-panel>h2 { margin:0 0 14px;text-align:center;font-size:27px;letter-spacing:.6px;font-weight:900; }
.result-meta { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:14px;font-weight:850; }
#correct-answer { padding:3px 6px;border-radius:4px;background:#ffffffd9;color:#171d27; }
.winner-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px; }
.winner { display:flex;align-items:center;gap:6px;min-width:0;height:39px;padding:4px 7px;background:#fbf7ea;color:#172733;border:1px solid #29313c60;border-bottom-width:2px;border-radius:5px; }
.winner-name { font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1; }
.winner-detail { display:flex;flex-direction:column;align-items:flex-end;font-size:14px;line-height:1.08; }
.winner-detail small { font-size:14px;opacity:.75;font-weight:800;margin-top:2px; }
.result-panel .board-empty { color:var(--accent-ink);font-size:20px;margin-top:36px; }
@keyframes result-in { from { transform:translateY(14px);opacity:0; } to { transform:translateY(0);opacity:1; } }
.explanation { overflow-wrap:anywhere;padding:0 2px;position:absolute;left:30px;right:30px;top:1148px;height:49px;margin:0;font-size:15px;line-height:1.4;text-align:center;color:#c3cee0;display:flex;align-items:center;justify-content:center; }
.intervention-notice { position:absolute;left:26px;right:26px;top:694px;height:40px;display:flex;justify-content:center;align-items:center;border:1px solid var(--accent);border-radius:7px;padding:8px 12px;background:#111c2df5;color:#fff5ca;font-size:14px;font-weight:750;text-align:center;animation:result-in .25s ease both; }
.source-footer { position:absolute;left:26px;right:26px;bottom:28px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;line-height:1.5;color:#aab8ce;text-align:center;font-weight:650; }
.source-footer span { max-width:100%;overflow-wrap:anywhere; }
#narration-status { font-size:14px;color:#c2bba5; }
.pause-shade { position:absolute;inset:215px 15px 80px;background:#101928ed;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;border:1px solid #cbd6ec33;border-radius:14px; }
.pause-shade strong { font-size:52px;letter-spacing:-1px;color:var(--accent); }.pause-shade span { font-size:22px;color:#d0d9e8; }
.stage[data-paused="true"] *, .reduced-motion *, .reduced-motion *::after { animation-play-state:paused!important; }
.reduced-motion * { transition:none!important;animation:none!important; }
.new-question .question-card { animation:question-in .3s ease both; }
@keyframes question-in { from { transform:translateY(7px);opacity:.5; } to { transform:translateY(0);opacity:1; } }
/* Hosted workshop */
html.tt-host, .tt-host body { background:#101216;color:#f5f3eb;margin:0;min-height:100%; }
.tt-host body { font-size:15px;line-height:1.5; }
.host-wrap { max-width:1250px;margin:auto;padding:28px 28px 60px; }
.host-brand { display:flex;gap:12px;align-items:center;font-size:14px;letter-spacing:1.6px;font-weight:850; }
.host-brand .tt-mark { flex:none; }
.experiment-tag { margin-left:auto;padding:5px 9px;border:1px solid #42454e;border-radius:5px;font-size:14px;letter-spacing:1px;color:#b7bcc7; }
.host-heading { margin:32px 0 28px; }
.host-heading h1 { margin:0;font-size:44px;letter-spacing:-1.7px;line-height:1.15; }
.host-heading p { max-width:740px;color:#b5bbc6;margin:10px 0 0;font-size:16px; }
.workspace { display:grid;grid-template-columns:minmax(300px,410px) minmax(0,1fr);gap:32px;align-items:start; }
.preview-column { position:sticky;top:18px;min-width:0; }
.preview-top { display:flex;align-items:center;justify-content:space-between;font-size:14px;letter-spacing:1px;font-weight:850;margin-bottom:11px; }
#preview-mode { color:#f6ce4f; }
.preview-frame { border:1px solid #454c5b;border-radius:14px;padding:5px;background:repeating-conic-gradient(#202734 0% 25%,#303a49 0% 50%) 0 / 18px 18px;overflow:hidden; }
#preview { display:block;width:100%;aspect-ratio:9/16;border:0;border-radius:10px;background:transparent; }
.preview-caption { margin:10px 0 0;color:#acb4c3;font-size:14px;line-height:1.5; }
.controls-column { display:grid;gap:18px;min-width:0; }
.panel { padding:22px;background:#191d24;border:1px solid #343a45;border-radius:12px;min-width:0; }
.panel h2 { margin:0 0 8px;font-size:19px;letter-spacing:-.3px; }.panel h3 { margin:0;font-size:16px; }
.eyebrow { margin:0 0 5px!important;letter-spacing:1.5px;font-weight:850;color:#f6ce4f!important; }
.muted { color:#b1bac9;font-size:14px;line-height:1.5;margin:6px 0 14px; }
.scope-note { border-left:3px solid #f6ce4f;padding-left:12px;color:#d8d8ce;font-size:14px;margin:12px 0 18px; }
.button-row,.mode-row { display:flex;flex-wrap:wrap;gap:8px;align-items:center; }
.mode-row { margin-bottom:12px; }
button,.button-link { cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:41px;padding:9px 13px;background:#252c37;color:#e9edf4;border:1px solid #485366;border-radius:7px;text-decoration:none;font-weight:750;font-size:14px;line-height:1.35; }
button:hover,.button-link:hover { background:#303949;border-color:#8997ac; }
button.primary { background:#f6ce4f;border-color:#f6ce4f;color:#141a24; }button.primary:hover { background:#ffe183; }
button[data-mode][aria-pressed="true"] { background:#f6ce4f;color:#151b25;border-color:#f6ce4f; }
button:disabled { cursor:not-allowed;opacity:.4; }
button.quiet { background:transparent; }button.danger { color:#ffc4b8; }
.status-line { display:block;min-height:21px;margin:12px 0 0;font-size:14px;line-height:1.5;color:#c5cfdf;overflow-wrap:anywhere; }
.status-line.error { color:#ffb8ad; }.status-line.success { color:#a8e0c9; }
.diagnostics { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0; }
.diagnostics div { padding:9px 10px;background:#101722;border:1px solid #303a49;border-radius:5px; }
.diagnostics dt { font-size:14px;text-transform:uppercase;letter-spacing:.65px;color:#9fadbf; }.diagnostics dd { margin:3px 0 0;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums; }
label { display:flex;flex-direction:column;gap:6px;color:#d9deea;font-size:14px;font-weight:750;min-width:0; }
input,select,textarea { width:100%;min-width:0;background:#111722;color:#edf1f8;border:1px solid #465166;border-radius:6px;padding:10px 11px;font-size:14px;line-height:1.4; }
input[type="color"] { padding:4px;height:43px; }.check { display:flex;flex-direction:row;align-items:center;font-size:14px;gap:9px; }.check input { width:17px;height:17px;accent-color:#f6ce4f;flex:none; }
.field-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0; }
.field-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }.field-grid .full { grid-column:1/-1; }
.vote-buttons { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:13px 0; }.vote-buttons button { font-size:20px;font-weight:900;color:#f6ce4f;background:#1c334f;border-color:#425774;min-height:48px; }
.practice-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px; }
html.tt-shell #source-url { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.accordion { border-top:1px solid #363f4f;margin-top:14px;padding-top:14px; }
summary { cursor:pointer;font-size:14px;font-weight:800; }.accordion[open]>summary { margin-bottom:16px; }
.mapping { border:1px solid #3c4657;border-radius:8px;padding:14px;margin-bottom:12px; }.mapping h3 { font-size:14px; }
#bank-editor,#packet-editor { font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:14px;resize:vertical;min-height:200px;margin:12px 0;tab-size:2; }
#packet-editor { min-height:130px; }
.file-label { display:inline-flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer; }.file-label input { font-size:14px;max-width:230px;padding:7px; }
.rules-list { color:#c3ccda;font-size:14px;padding-left:20px;margin:8px 0 0; }.rules-list li { margin:6px 0; }
.host-footer { margin:28px 0 0;border-top:1px solid #333943;padding-top:18px;font-size:14px;color:#949fb0; }
code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:1em;overflow-wrap:anywhere; }
@media (max-width:760px) { .host-wrap { padding:20px 16px 40px; }.host-heading { margin:25px 0 24px; }.host-heading h1 { font-size:38px; }.host-heading p { font-size:14px; }.workspace { grid-template-columns:minmax(0,1fr);gap:22px; }.preview-column { position:static;max-width:420px;width:100%;margin:auto; }.panel { padding:18px; }.host-brand { font-size:14px;letter-spacing:1px;gap:9px; }.experiment-tag { font-size:14px;padding:5px; }.tt-mark { width:34px;height:34px;font-size:16px; }.field-grid.three { grid-template-columns:repeat(2,minmax(0,1fr)); }.diagnostics { gap:5px; }.diagnostics div { padding:8px; }.button-row button,.button-row .button-link { flex-grow:1; }.mapping .field-grid { grid-template-columns:minmax(0,1fr); } }
@media (prefers-reduced-motion:reduce) { .stage * { animation:none!important;transition:none!important; } }

/* Hosted gift and question controls. */
[hidden] { display:none !important; }
#source-url { width:100%;min-width:0; }
.gift-choice { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
#gift-guide p { display:flex;align-items:center;gap:10px; }
#gift-guide img { flex:none;object-fit:contain; }
#question-fields { display:grid;gap:12px;margin-top:12px; }
.game-prompt img { object-fit:contain;margin-right:8px; }

/* Shared Codex-4 hosted shell. Source artwork and its 720 x 1280 geometry stay above. */
html.tt-shell { --accent:#ffd43b;--accent-ink:#101114;--accent-text:#ffd43b; }
html.tt-shell .panel input:not([type=checkbox]),html.tt-shell .panel select { font-size:15px; }
html.tt-shell .switch { flex-direction:row;color:var(--ink); }
html.tt-shell .switch input { padding:0; }
html.tt-shell input[type=checkbox]:not([role=switch]) { width:auto;padding:0;align-self:flex-start; }
html.tt-shell .settings-form { display:contents; }
html.tt-shell .panel { margin:0; }
html.tt-shell .preview-wrap { background:repeating-conic-gradient(#202734 0 25%,#303a49 0 50%) 0/18px 18px; }
html.tt-shell .preview-wrap iframe { background:transparent; }
html.tt-shell .input-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
html.tt-shell .choice-buttons { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0; }
html.tt-shell .choice-buttons button { min-height:48px;border:1px solid var(--line);border-radius:9px;background:#1c334f;color:#f6ce4f;font-size:20px;font-weight:850; }
html.tt-shell .effects { margin-top:16px; }
html.tt-shell .mapping { margin-bottom:16px;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--surface); }
html.tt-shell .mapping-heading { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin-bottom:14px; }
html.tt-shell .mapping h3 { margin:0;font-size:17px;line-height:1.4; }
html.tt-shell .mapping-heading .switch { flex-direction:row;gap:10px;min-height:32px;padding:0;border:0;margin-left:auto;font-size:14px; }
html.tt-shell .mapping-fields { align-items:end;gap:12px 16px;grid-template-columns:repeat(2,minmax(0,1fr)); }
html.tt-shell .mapping-fields label { gap:0;font-size:14px; }
html.tt-shell .comment-choice { grid-column:1/-1; }
html.tt-shell .gift-assignment { grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;padding:2px 0; }
html.tt-shell .gift-assignment .gift-copy { min-width:0; }
html.tt-shell .gift-assignment .gift-copy>span { display:flex;align-items:center;color:var(--copy);font-size:14px;overflow-wrap:anywhere; }
html.tt-shell .gift-copy>small { display:block;color:var(--muted);font-size:14px;margin-top:2px; }
html.tt-shell .mapping-help,html.tt-shell .mapping-error { font-size:14px;margin-top:12px; }
html.tt-shell .mapping-error:empty { display:none; }
html.tt-shell .gift-actions { justify-content:flex-end; }
html.tt-shell details>.input-grid,html.tt-shell details>.switch-list { margin-top:18px; }
html.tt-shell #question-fields { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0; }
html.tt-shell .file-label { margin-top:18px; }
html.tt-shell .file-label input { margin-top:7px; }
html.tt-shell #settings-status,html.tt-shell #bank-status,html.tt-shell #input-result { min-height:1.5em; }
html.tt-shell .error { color:#ffb8ad!important; }
html.tt-shell .source-actions { margin-top:12px; }
html.tt-shell .streaming-panel a { color:var(--accent-text); }
.tt-core-avatar.monogram { font-family:Inter,ui-sans-serif,system-ui,sans-serif; }

@media(max-width:1050px) {
  html.tt-shell .input-grid.three { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  html.tt-shell .input-grid.three,html.tt-shell #question-fields { grid-template-columns:1fr; }
  html.tt-shell .mapping-fields { grid-template-columns:1fr; }
  html.tt-shell .gift-assignment { align-items:flex-start;flex-direction:column; }
}
/* Notion #3: section 05 body text matches the Battle Arena reference. */
html.tt-shell .panel .input-grid>label{color:var(--ink)}

html.tt-shell .mapping .gift-copy small{font-size:14px}