/* Shared visual scale: readable body copy, compact labels, and centered actions. */
:root{--muted:#b0b2bd;--line:#363942;--body-size:16px}
body{font-size:var(--body-size);line-height:1.55}
button{line-height:1.35}
.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 24px;border-radius:10px;font-size:16px;font-weight:600;text-align:center}
.primary{font-weight:700}.secondary{background:#22242c;color:var(--text);border-color:#484c58}
.text-btn,.skip,.game-top button{font-size:14px;min-height:44px;line-height:1.5}
.primary:hover:not(:disabled){background:#e1ff79}.secondary:hover:not(:disabled){background:#2c2f38;border-color:#77728d}
button:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
header nav button{font-size:16px}.round-btn{width:42px;height:42px;font-size:18px}.streak{font-size:12px}
.eyebrow,.mode-tag{font-size:12px;letter-spacing:1.5px;line-height:1.5}.pill{font-size:11px;line-height:1.4;padding:7px 10px}
.tiny{font-size:13px;line-height:1.6}.hero{gap:48px;padding:64px 0 60px}.hero h1{font-size:clamp(76px,8.2vw,112px);line-height:.94}
.hero-copy{font-size:19px;line-height:1.7;max-width:500px}.hero-copy b{display:inline-block;margin-top:8px;color:var(--text);font-weight:600}
.hero-actions{gap:16px;flex-wrap:wrap;margin-top:30px}.hero-actions .primary{padding:17px 28px;min-width:235px}.hero-actions .text-btn{padding:14px 18px}
.hero-foot{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--muted);line-height:1.6;margin-top:22px}.hero-foot span{white-space:nowrap}
.preview-card{transform:none;border-radius:20px;padding:24px;background:linear-gradient(145deg,#242630,#1a1b22)}
.preview-top{gap:12px;flex-wrap:wrap}.video-preview .preview-bottom{font-size:13px;line-height:1.5;flex-wrap:wrap;gap:12px}.video-toggle{font-size:13px;min-height:40px;padding:8px 12px}
.buzzer-demo{transform:none;border-radius:12px;padding:16px 24px;font-size:15px;gap:16px}.buzzer-demo kbd{font-size:11px}
.section-title{margin:36px 0 24px}.section-title h2,.mood-heading h2,.corner-heading h2{font:700 30px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.8px;margin:0}
.section-title>span{font-size:14px}.modes{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.mode{padding:28px;min-height:320px;border-radius:18px}
.mode .mode-icon{position:static;width:44px;height:44px;margin:22px 0 20px;font-size:24px}.mode:nth-child(3) .mode-icon{color:var(--lime);background:#303823}
.mode h3{font:700 25px/1.25 'Space Grotesk',sans-serif;letter-spacing:-.7px;margin:0 0 14px}.mode p{font-size:16px;line-height:1.65;max-width:none;color:var(--muted)}
.mode-footer{margin-top:auto;padding-top:28px;font-size:14px;line-height:1.5;color:#c5c9ba}.mode-tag{min-height:18px}.mode:hover{background-color:#22262b;border-color:#86965c}
.mood-picker{margin:16px 0 48px}.mood-heading{align-items:baseline;margin-bottom:24px}.mood-heading>p{font-size:16px}.mood-grid{gap:20px}
.mood-card{display:flex;flex-direction:column;padding:26px;border-radius:18px}.mood-card>strong{font-size:26px;line-height:1.25;letter-spacing:-.6px}
.mood-icon{font-size:28px;margin-bottom:20px}.mood-card p{font-size:16px;line-height:1.65;min-height:0;margin:14px 0 22px}.mood-default{font-size:14px;line-height:1.5;margin-top:auto}.mood-note{font-size:14px;margin-top:18px}
.corner{margin:48px 0;padding:32px;border-color:#42454f}.corner-heading{align-items:end}.corner-heading .eyebrow{font-size:12px;margin-bottom:10px}.corner-heading p{font-size:16px;max-width:300px}
.corner-grid{gap:16px}.corner-card{padding:24px 20px;min-height:132px;gap:16px}.corner-copy{padding:0;min-width:0}.corner-copy strong{font-size:21px}.corner-copy small{font-size:14px;line-height:1.6;margin-top:6px}
.corner-card:nth-child(n){--cat:var(--purple)}.corner-card:nth-child(3n+1){--cat:var(--lime)}
.bottom-strip{padding:32px 0;gap:28px}.step-no{font-size:32px;color:var(--purple)}.bottom-strip strong{font-size:16px;font-weight:600}.bottom-strip p{font-size:14px;line-height:1.6}
footer{font-size:12px;line-height:1.6;color:#959aa8;gap:20px;flex-wrap:wrap}footer button{font-size:13px;min-height:40px}
.game-label{font-size:12px;letter-spacing:1px}.score-label{font-size:12px}.score-label strong{font-size:32px}.clue-label{font-size:12px;color:#b3b6c2;letter-spacing:1.5px}
.clues{font-family:var(--font);font-size:26px;line-height:1.65}.clues .past{color:#a3a7b4}.point-pill{font-size:14px}.timer{font-size:16px}
.game-hint{font-size:14px;line-height:1.65;color:var(--muted)}.answer-panel label{font-size:16px;font-weight:600}.answer-panel p{font-size:14px;line-height:1.6}.answer-row input{font-family:var(--font);font-size:18px}
.buzz{font-size:28px;min-height:66px;position:relative}.buzz kbd{font-size:12px}.skip{padding:14px 20px}
.result-meta,.finish-subtitle,.page-head p{font-size:16px;line-height:1.7}.result-answer{font-size:40px;line-height:1.2;overflow-wrap:anywhere}
.answer-clues p{font-size:16px;line-height:1.7}.answer-clues span{font-size:12px;color:#a2a6b4}.result-grid small{font-size:14px;line-height:1.5}.result-grid strong{font-size:30px}
.review-row b{font-size:16px}.review-row small{font-size:14px;line-height:1.5}.review-row button{font-size:14px;min-height:44px}.review-row>strong{font-size:16px}
.stat-card>span,.stat-card small{font-size:14px;line-height:1.6}.stat-card strong{font-size:40px}.stats-explanation{font-size:14px}.stats-filter,.stats-filter #stats-filter-label{font-size:15px}
.filter-trigger,.filter-option{font-size:15px}.history-row{font-size:16px}.history-row small{font-size:14px}.empty{font-size:16px;line-height:1.7}.notice{font-size:14px}
.dialog-head h2{font-size:26px}dialog p,dialog li{font-size:16px;line-height:1.7}.settings-row b{font-size:16px}.settings-row small{font-size:14px;line-height:1.6}.share-box{font-size:15px}
.challenge-banner p{font-size:16px}.countdown p{font-size:16px}#toast{font-size:14px}
.live-entry>p,.live-lobby-main>p{font-size:17px}.live-entry .tiny{font-size:14px}.live-entry input{font-size:16px}.live-entry .live-level-select .filter-trigger,.live-entry .live-level-select .filter-option{font-size:16px}
.live-entry #live-join{font-size:16px;padding:12px 20px}.live-connection{font-size:14px}.live-root .tiny{font-size:14px}.live-board-head>span,.live-player>span{font-size:13px}
.live-player small,.live-player-score>span{font-size:12px}.live-root .clues{font-size:25px}.live-root .result-answer{font-size:40px}.live-phase-row{font-size:15px}
.live-root:not([data-live-mode=lobby]):not([data-live-mode=finished]) .live-room-heading .secondary{font-size:14px;min-height:44px}
@media(max-width:1050px){.hero{gap:28px}.hero-copy{font-size:18px}.mode{padding:24px}.mode h3{font-size:23px}.mood-card{padding:22px}.corner-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
 .wrap{padding:0 20px}header nav button{font-size:14px}.hero{grid-template-columns:1fr;padding:36px 0 44px;gap:36px}.hero h1{font-size:clamp(76px,16vw,110px)}.hero-copy{font-size:18px}
 .hero-actions{gap:10px}.hero-actions .primary{min-width:0;flex:1;padding:16px 20px}.hero-actions .text-btn{padding:12px}.hero-foot{font-size:13px;gap:8px 16px}
 .preview-scene{margin:0 0 20px}.preview-card{padding:18px}.preview-top .tiny{font-size:12px}.buzzer-demo{right:12px}.video-preview .preview-bottom{font-size:13px}
 .section-title h2,.mood-heading h2,.corner-heading h2{font-size:27px}.mood-heading{display:block}.mood-heading>p{margin:10px 0 0}.mood-grid,.modes{grid-template-columns:1fr;gap:14px}
 .mood-card{padding:22px 22px 22px 66px}.mood-icon{position:absolute;top:24px;left:24px;font-size:26px}.mood-card>strong{font-size:24px}.mood-card p{font-size:16px;margin:10px 0 16px}.mood-default,.mood-note{font-size:14px}
 .mode{min-height:0;padding:26px}.mode .mode-icon{position:absolute;right:26px;top:24px;margin:0}.mode-tag{padding-right:58px}.mode h3{font-size:26px;margin:30px 0 12px}.mode p{font-size:16px}.mode-footer{font-size:14px;padding-top:24px}
 .corner{padding:24px 20px}.corner-heading{display:block}.corner-heading p{font-size:16px;margin-top:12px}.corner-grid{grid-template-columns:1fr}.corner-card{display:flex;min-height:105px;padding:20px;gap:18px}.corner-icon{margin:0}.corner-copy strong{font-size:21px}.corner-copy small{font-size:14px}
 .bottom-strip{grid-template-columns:1fr;gap:24px}.bottom-strip strong{font-size:16px}.bottom-strip p{font-size:14px}
 .game-top{gap:10px;flex-wrap:wrap}.game-top .game-label{font-size:11px;max-width:50%}.game-top button{font-size:13px}.arena{padding:24px 20px}.clues,.live-root .clues{font-size:22px;line-height:1.65}.clue-label{font-size:12px}
 .game-hint{font-size:14px}.answer-row .primary,.result-buttons .secondary{font-size:14px;padding:12px 16px}.result-buttons{flex-wrap:wrap}.result-buttons>*{flex:1}.result-answer,.live-root .result-answer{font-size:32px}.result-card .result-flag strong{font-size:16px}.result-card .point-pill{font-size:13px}
 .result-grid{gap:10px}.result-grid small{font-size:13px}.review-row{padding:16px 12px;gap:10px;flex-wrap:wrap}.review-row b{font-size:15px}.review-row small{font-size:13px}.review-row button{font-size:14px}.review-main{min-width:140px}
 .clutch-stats-grid .stat-card{padding:20px 16px}.stat-card strong{font-size:34px}.stat-card>span,.stat-card small{font-size:14px}.stats-filter{flex-wrap:wrap}.stats-select{width:230px}.filter-trigger{font-size:15px}
 .history-row{font-size:15px;gap:12px}.history-row small{font-size:13px}.history-row strong{font-size:20px}.live-entry .answer-row{flex-wrap:wrap}.live-entry #live-code{flex:1 1 130px;font-size:16px}.live-entry #live-join{font-size:15px;padding:12px 18px}
 .live-top>.text-btn{font-size:14px}.live-connection{font-size:13px}.live-board{padding:22px}.live-root .answer-row{flex-wrap:wrap}.live-root .answer-row input{flex:1 1 160px}.live-root .answer-row .primary{font-size:15px}
 dialog{padding:24px}dialog .rules-score span{font-size:14px;padding:10px 8px}.finish h1{font-size:52px}.finish-subtitle{font-size:16px}footer{font-size:12px}footer button{font-size:13px}
}

@media(min-width:701px) and (max-width:900px){.corner-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-scene{max-width:580px;width:100%;margin:0 auto 20px}.hero-actions .primary{flex:0 1 auto;min-width:235px}}
@media(max-width:600px){
 .game-top{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}
 .game-top>button{grid-column:1;grid-row:1;justify-self:start;padding-left:0}
 .game-top>.score-label{grid-column:2;grid-row:1;text-align:right}
 .game-top>.game-label{grid-column:1/-1;grid-row:2;max-width:none;width:100%;margin:0;text-align:left;font-size:12px}
 .hero-actions .primary{flex:0 0 auto;min-width:210px}.hero-actions .text-btn{padding:12px 6px}
}

/* Keep the demo action clear of playback controls and center buzzer labels. */
.buzzer-demo{position:relative;bottom:auto;right:auto;width:100%;justify-content:center;margin:16px 0 0;border:1px solid var(--lime);padding:16px 24px;font-size:16px;font-weight:700;box-shadow:none}
.buzz{display:flex;align-items:center;justify-content:center}.buzz kbd{position:absolute;right:24px;margin:0}
@media(min-width:701px){.buzz{padding-left:105px;padding-right:105px}}

.category-symbol{display:inline-block;width:18px;height:18px;vertical-align:-4px;flex:none}.corner-icon .category-symbol{width:29px;height:29px;vertical-align:middle}

/* One shared canvas, stroke, and badge size for every category. */
.corner-icon{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center}.corner-icon .category-symbol{display:block;width:28px;height:28px;vertical-align:initial}

.mode .mode-icon{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center}.mode-symbol-icon{display:block;width:28px;height:28px}

.mood-icon{display:block;width:28px;height:28px;flex:none}.mood-icon svg{display:block;width:100%;height:100%}

/* Category choices appear directly over the card, in three equal columns. */
.category-item{position:relative;min-width:0}.category-item>.corner-card{width:100%;height:100%}
.category-item.is-open>.corner-card{filter:brightness(.25);transform:none}
.category-levels{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden;border:1px solid var(--purple);border-radius:15px;background:#15171bef;box-shadow:0 8px 28px #0004}
.category-levels[hidden]{display:none}
.category-levels button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0;padding:16px 6px;color:var(--text);background:transparent;transition:background .15s,color .15s}
.category-levels button+button{border-left:1px solid #454352}
.category-levels button:hover,.category-levels button:focus-visible{background:#303823;color:var(--lime);outline:2px solid var(--lime);outline-offset:-3px}
.category-levels button>span{width:28px;height:28px;color:var(--lime)}.category-levels svg{display:block;width:100%;height:100%}.category-levels strong{font-size:16px;line-height:1.3;font-weight:600}
@media(prefers-reduced-motion:no-preference){.category-item.is-open .category-levels{animation:category-choices-in .16s ease-out}}
@keyframes category-choices-in{from{opacity:0}to{opacity:1}}
@media(max-width:600px){.category-levels button{gap:8px;padding:12px 5px}.category-levels strong{font-size:15px}}
.category-item .corner-card{--cat:var(--purple)}.category-item:nth-child(3n+1) .corner-card{--cat:var(--lime)}

.review-row .clutch-mark{width:30px;height:30px;flex:none;border-radius:8px;background:var(--lime);color:#17200d;box-shadow:0 0 14px #d8fb5825}.clutch-mark svg{display:block;width:21px;height:21px;fill:currentColor}

/* The preview uses the same arena, form, buzzer and outcome styles as gameplay. */
@media(min-width:901px){.hero{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:center}}
.preview-scene{padding:0;min-width:0}.preview-card{padding:22px}.video-preview{padding-bottom:20px}
.preview-top{margin-bottom:18px}.preview-top .eyebrow{font-size:12px}.preview-top .tiny{font-size:13px}
.preview-simulation{width:100%;min-width:0;min-height:440px;margin:0 0 18px;pointer-events:none}
.preview-simulation .arena{padding:24px;min-height:320px;height:320px;border-radius:16px}
.preview-simulation .clues{font:500 22px/1.65 var(--font);min-height:0;max-height:202px;margin:0;overflow-y:auto}
.preview-simulation .clue-label{margin:22px 0 12px;font-size:12px}.preview-simulation .arena-top{gap:12px;flex-wrap:wrap}.preview-simulation .arena-top>div{gap:12px}
.preview-simulation .game-controls{margin-top:18px;gap:14px}.preview-simulation .buzz{flex:1;min-width:0;min-height:66px;padding:16px 90px;font-size:28px}.preview-simulation .buzz kbd{right:20px}
.preview-simulation .skip{padding:12px;font-size:14px}.preview-simulation .answer-panel{padding-top:14px}.preview-simulation .answer-panel label{margin-bottom:8px}
.preview-simulation .answer-row{gap:10px;align-items:stretch}.demo-answer{flex:1;min-width:0;white-space:nowrap;overflow:hidden;background:#18191e;border:1px solid var(--purple);border-radius:8px;color:var(--text);padding:14px;font:500 18px/1.4 var(--font)}
.preview-simulation .answer-row .primary{font-size:15px;padding:12px 18px;white-space:nowrap;flex-shrink:0}.preview-simulation .answer-panel p{font-size:13px;margin:8px 0 0}
.preview-simulation .result-card{height:398px;min-height:398px}.preview-simulation .result-flag{gap:12px;flex-wrap:wrap;margin-bottom:18px}.preview-simulation .result-flag>span:first-child{display:contents}.preview-simulation .result-flag strong{font-size:19px}.preview-simulation .outcome-clutch .result-flag strong{font-size:34px}
.preview-simulation .result-answer{font-size:32px;line-height:1.2;margin-bottom:10px}.preview-simulation .result-meta{font-size:15px}.preview-simulation .answer-clues{margin-top:18px;max-height:190px;overflow-y:auto;scrollbar-width:thin}.preview-simulation .answer-clues p{font-size:14px;line-height:1.6;gap:10px}.preview-simulation .answer-clues span{font-size:11px}
.preview-next{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:14px;padding:14px 2px;font-variant-numeric:tabular-nums}
@media(max-width:1100px) and (min-width:901px){.preview-simulation .buzz{padding:16px 70px;font-size:25px}.preview-simulation .buzz kbd{right:12px;font-size:10px}.preview-simulation .result-card .point-pill{font-size:13px;padding:8px}.preview-simulation .outcome-clutch .result-flag strong{font-size:29px}}
@media(max-width:600px){.preview-card{padding:16px}.preview-simulation{min-height:430px}.preview-simulation .arena{padding:20px;min-height:310px;height:310px}.preview-simulation .clues{font-size:19px;max-height:194px}.preview-simulation .buzz{font-size:25px;padding:16px 20px}.preview-simulation .buzz kbd{display:none}.preview-simulation .answer-row .primary{font-size:13px;padding:12px}.demo-answer{font-size:16px;padding:12px}.preview-simulation .result-card{height:388px;min-height:388px}.preview-simulation .result-answer{font-size:28px}.preview-simulation .result-card .point-pill{font-size:12px;padding:7px}.preview-simulation .outcome-clutch .result-flag strong{font-size:28px}.preview-simulation .answer-clues{max-height:176px}}
.preview-simulation{height:455px;min-height:455px}
@media(max-width:600px){.preview-simulation{height:450px;min-height:450px}}

/* A three-second invitation to buzz; stops when buzzing or timing out. */
.buzz.buzz-final-window:not(:disabled){outline:2px solid var(--purple);outline-offset:4px;box-shadow:0 5px 0 #8aa033,0 0 18px 4px #d8fb5870,0 0 42px #d8fb5840;animation:buzz-window-glow 1s ease-in-out infinite}
@keyframes buzz-window-glow{0%,100%{box-shadow:0 5px 0 #8aa033,0 0 12px 2px #d8fb5855,0 0 28px #d8fb5825}50%{box-shadow:0 5px 0 #8aa033,0 0 22px 6px #d8fb5880,0 0 48px #d8fb5845}}
@media(prefers-reduced-motion:reduce){.buzz.buzz-final-window:not(:disabled){animation:none}}