.game-shell:has(.st-game){grid-template-columns:minmax(0,1fr);gap:12px}
.game-shell:has(.st-game) .game-status{flex-direction:row;align-items:center;justify-content:space-between;gap:18px;padding:10px 14px}
.game-shell:has(.st-game) .game-status strong{max-width:68%}
.game-shell:has(.st-game) .game-tools{flex-direction:row;padding:0}
.game-shell:has(.st-game) .game-tools button{flex:1;padding:12px 8px;text-align:center}
.st-game{width:min(100%,1140px);display:grid;gap:7px;color:#f5e2b9}
.st-title{position:relative;margin:0;color:#f7dfaa;font:900 clamp(1.95rem,4.2vw,3.55rem)/.88 "Barlow Condensed",system-ui,sans-serif;letter-spacing:.11em;text-align:center;text-shadow:2px 3px 0 #260e0c,0 0 24px #e7a53248;text-transform:uppercase}
.st-title span{display:block;margin-bottom:3px;color:#f7dfaa;font-size:.52em;letter-spacing:.18em}
.st-title::before,.st-title::after{content:"";position:absolute;top:21%;width:min(11vw,126px);height:2px;background:linear-gradient(90deg,transparent,#c69443)}
.st-title::before{right:calc(50% + min(22vw,245px))}.st-title::after{left:calc(50% + min(22vw,245px));background:linear-gradient(90deg,#c69443,transparent)}
.st-box{--time-ratio:1;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-areas:"summary" "question" "choices" "drive" "actions" "prompt";gap:10px;padding:15px 27px 12px;border:2px solid #a7732e;border-radius:5px;background-color:#07131c;background-image:linear-gradient(90deg,#040a0ef2,#07131cc9 23%,#07131cb5 77%,#040a0ef2),linear-gradient(0deg,#1c0d09d9,#07131c55),url("/assets/covers/sports-trivia.webp");background-position:center 59%;background-size:cover;box-shadow:inset 0 0 0 5px #020405,inset 0 0 0 6px #69431f,0 6px 0 #010203,0 15px 34px #000e}
.st-box::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 28%,#f1b34318 0 25%,transparent 62%),linear-gradient(90deg,#280c0b75,transparent 24% 76%,#071a1378)}
.st-box::after{content:"";position:absolute;inset:8px;z-index:1;pointer-events:none;border:1px solid #d19a435c;clip-path:polygon(0 0,38% 0,40% 2px,60% 2px,62% 0,100% 0,100% 100%,62% 100%,60% calc(100% - 2px),40% calc(100% - 2px),38% 100%,0 100%)}
.st-summary{grid-area:summary;position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);margin-inline:68px;border:1px solid #b17b30;border-radius:4px;background:#06121cf2;box-shadow:inset 0 0 0 2px #321b13,0 3px 0 #010203}
.st-summary span{position:relative;display:grid;gap:2px;padding:8px 5px;text-align:center}.st-summary span+span{border-left:1px solid #71471f}
.st-summary small{display:flex;align-items:center;justify-content:center;gap:4px;color:#d09a45;font:900 .49rem "Barlow Condensed",system-ui,sans-serif;letter-spacing:.15em;text-transform:uppercase}
.st-summary small svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.st-summary strong{color:#f4dfb5;font:900 1rem "Barlow Condensed",system-ui,sans-serif;letter-spacing:.04em}.st-summary span:nth-child(3) strong{color:#f2a928}.st-summary span:nth-child(4) strong{color:#7dcc6c}
.st-summary span:last-child::before{content:"";position:absolute;left:8px;right:8px;bottom:4px;height:3px;background:#342719}.st-summary span:last-child::after{content:"";position:absolute;left:8px;bottom:4px;width:calc((100% - 16px)*var(--time-ratio));height:3px;background:#f0a72b;box-shadow:0 0 7px #f0a72b;transition:width .2s linear}
.st-question-panel{grid-area:question;position:relative;z-index:2;width:min(100%,930px);min-height:164px;margin:auto;display:grid;place-content:center;gap:10px;padding:31px 78px 24px;border:2px solid #a97735;border-radius:5px;background-color:#f2dfb7;color:#14181a;background-image:radial-gradient(circle at 9% 24%,#7e6743 0 1px,transparent 1.6px),radial-gradient(circle at 89% 76%,#7e6743 0 1px,transparent 1.6px),repeating-linear-gradient(0deg,transparent 0 28px,#856f4e1a 29px);background-size:91px 83px,117px 107px,100% 29px;box-shadow:inset 0 0 0 4px #fff0cb,inset 0 0 0 5px #8b6334,0 7px 18px #000c;text-align:center}
.st-question-panel::before{content:"PRESS NOTES";position:absolute;top:0;left:50%;padding:5px 20px;border:1px solid #9c6b31;border-top:0;background:#d6b376;color:#4e1c17;font:900 .47rem "Barlow Condensed",system-ui,sans-serif;letter-spacing:.22em;transform:translateX(-50%)}
.st-sport{color:#7d261f;font:900 .7rem "Barlow Condensed",system-ui,sans-serif;letter-spacing:.23em;text-transform:uppercase}.st-sport::before,.st-sport::after{content:"";display:inline-block;width:52px;height:1px;margin:0 14px 3px;background:#92703a}
.st-question{max-width:800px;margin:0;font:700 clamp(1.28rem,2.55vw,2.05rem)/1.16 Georgia,serif;letter-spacing:-.012em;text-wrap:balance}
.st-timeouts{position:absolute;right:17px;top:13px;display:flex;align-items:center;gap:7px}.st-timeouts small{color:#4d3827;font:900 .4rem "Barlow Condensed",system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase}
.st-timeouts span{position:relative;width:18px;height:13px;border:1px solid #65442c;border-radius:55% 55% 48% 48%;background:linear-gradient(90deg,#493327 0 42%,#d0b080 43% 55%,#493327 56%);opacity:.28;transform:rotate(-18deg)}
.st-timeouts span.active{border-color:#a66d30;background:linear-gradient(90deg,#7a2821 0 42%,#f3ddaf 43% 55%,#7a2821 56%);opacity:1;filter:drop-shadow(0 0 4px #d99336)}
.st-choices{grid-area:choices;position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;width:min(100%,950px);margin:auto}
.st-choice{position:relative;overflow:hidden;min-height:70px;display:grid;grid-template-columns:49px 1fr 78px;align-items:center;gap:10px;padding:10px 15px;border:2px solid #b17a31;border-radius:4px;background:#0b2333ed;color:#f2dfb7;box-shadow:inset 0 0 0 2px #173a4d,0 4px 0 #04121b,0 8px 15px #000b;cursor:pointer;transition:transform .14s,border-color .14s,background .14s,box-shadow .14s,opacity .14s}
.st-choice::before{content:"";position:absolute;inset:5px;z-index:0;pointer-events:none;border:1px solid #d09a4542;background:repeating-linear-gradient(90deg,transparent 0 17px,#f3e2bd08 18px 19px)}
.st-choice:hover:not(:disabled),.st-choice:focus-visible{z-index:3;transform:translateY(-2px);border-color:#f0ab32;outline:3px solid #f0ab32;outline-offset:2px;background:#16405b;box-shadow:inset 0 0 0 2px #255d7a,0 4px 0 #09283a,0 9px 18px #000c}
.st-choice>span{position:relative;z-index:1;width:43px;height:43px;display:grid;place-items:center;border:1px solid #d19a43;border-radius:3px;background:#651f1c;color:#f5ddb0;font:900 1.4rem "Barlow Condensed",system-ui,sans-serif;box-shadow:inset 0 0 0 3px #862f27}
.st-choice strong{position:relative;z-index:1;min-width:0;font:800 clamp(.84rem,1.7vw,1.07rem)/1.16 "Barlow Condensed",system-ui,sans-serif;letter-spacing:.035em;text-align:center;text-transform:uppercase;text-wrap:balance}.st-choice i{position:relative;z-index:1;color:#c5a66f;font:900 .36rem "Barlow Condensed",system-ui,sans-serif;letter-spacing:.09em;text-align:right;text-transform:uppercase}
.st-choice.hinted{border-color:#f0a72b;box-shadow:inset 0 0 0 2px #613918,0 0 0 4px #f0a72b,0 8px 18px #e49a2755;animation:st-pulse .68s ease-in-out infinite alternate}.st-choice.correct{border-color:#9bd27e;background:#27673f;color:#f6ffef;box-shadow:inset 0 0 0 2px #b8e99d,0 4px 0 #164429}.st-choice.wrong{border-color:#f08a66;background:#853126;color:#fff0dc;animation:st-shake .24s linear}.st-choice.rejected{border-color:#66594a;background:#343632;color:#aea796;box-shadow:none;opacity:.68}.st-choice:disabled{cursor:default}
.st-drive{grid-area:drive;position:relative;z-index:2;display:flex;justify-content:center;gap:58px;padding:14px 20px 4px;margin:2px auto 0;border-top:1px solid #80602d;background:#06120dc4}.st-drive::before{content:"DRIVE PROGRESS";position:absolute;bottom:calc(100% + 4px);left:50%;color:#d3a454;font:900 .44rem "Barlow Condensed",system-ui,sans-serif;letter-spacing:.22em;transform:translateX(-50%)}
.st-drive span{position:relative;width:39px;aspect-ratio:1;display:grid;place-items:center;border:2px solid #8b7348;border-radius:50%;background:#18271c;color:#c1b392;font:900 .72rem "Barlow Condensed",system-ui,sans-serif;box-shadow:0 0 0 3px #020503}.st-drive span+span::before{content:"";position:absolute;right:100%;top:50%;width:61px;height:5px;background:repeating-linear-gradient(90deg,#6c6038 0 8px,#27351f 8px 12px);transform:translateY(-50%)}.st-drive span.active{border-color:#e5a42d;background:#7e2b22;color:#f7dfa8;box-shadow:0 0 0 3px #020503,0 0 15px #e5a42d88}.st-drive span.done{border-color:#d3a34e;background:#3b7d3f;color:transparent}.st-drive span.done::after{content:"\2713";position:absolute;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#e4bd6d;color:#132016;font-size:.66rem}.st-drive span.done+span::before{background:repeating-linear-gradient(90deg,#d09a45 0 8px,#4b7339 8px 12px);box-shadow:0 0 6px #c18a3d}
.st-actions{grid-area:actions;position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,250px));justify-content:center;gap:14px}.st-actions button{min-height:46px;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #d59937;border-radius:4px;background:#681f1b;color:#f1c478;font:900 .75rem "Barlow Condensed",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 3px 0 #210807;cursor:pointer}.st-actions button:last-child{border-color:#8c734b;background:#0a1d2a;color:#dec28d}.st-actions button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.st-actions button:hover:not(:disabled),.st-actions button:focus-visible{outline:3px solid #f0a72b;outline-offset:2px;transform:translateY(-1px)}.st-actions button:disabled{opacity:.38;cursor:default;transform:none}
.st-prompt{grid-area:prompt;position:relative;z-index:2;margin:0;padding-top:5px;border-top:1px solid #75542b;color:#c9b99b;font-size:.59rem;line-height:1.35;text-align:center}.st-game.paused .st-question-panel,.st-game.paused .st-choices,.st-game.paused .st-drive{opacity:.42}.st-game.complete .st-title{color:#a8db86;text-shadow:2px 3px 0 #24472c,0 0 24px #76bc6966}
@keyframes st-shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}@keyframes st-pulse{to{box-shadow:inset 0 0 0 2px #613918,0 0 0 5px #f0a72b,0 9px 19px #e49a2777}}
@media(prefers-reduced-motion:reduce){.st-choice,.st-summary span:last-child::after{transition:none}.st-choice.wrong,.st-choice.hinted{animation:none}}
@media(max-width:720px){.game-shell:has(.st-game) .game-status{align-items:flex-start;flex-direction:column;gap:7px}.game-shell:has(.st-game) .game-status strong{max-width:none}.st-title{font-size:1.95rem;letter-spacing:.08em}.st-title::before,.st-title::after{display:none}.st-box{gap:8px;padding:10px 9px;background-position:center}.st-summary{margin-inline:3px}.st-summary span{padding:7px 2px}.st-summary small{font-size:.36rem}.st-summary strong{font-size:.73rem}.st-question-panel{min-height:132px;padding:23px 36px 18px}.st-question-panel::before{font-size:.38rem;padding:4px 12px}.st-sport{font-size:.55rem}.st-sport::before,.st-sport::after{width:28px;margin-inline:8px}.st-question{font-size:clamp(1.08rem,4.5vw,1.46rem)}.st-timeouts{right:10px;top:9px}.st-choices{gap:8px}.st-choice{min-height:60px;grid-template-columns:35px 1fr;padding:7px 9px}.st-choice>span{width:31px;height:37px;font-size:1.15rem}.st-choice strong{font-size:.79rem}.st-choice i{display:none}.st-drive{gap:34px}.st-drive span{width:32px}.st-drive span+span::before{width:37px}.st-actions button{min-height:46px}.st-prompt{font-size:.52rem}}
@media(max-width:430px){.st-title{font-size:1.58rem}.st-title span{font-size:.54em}.st-summary small{font-size:.29rem;letter-spacing:.07em}.st-summary strong{font-size:.61rem}.st-question-panel{min-height:118px;padding:21px 15px 15px}.st-sport{font-size:.47rem}.st-sport::before,.st-sport::after{width:15px;margin-inline:5px}.st-question{font-size:1rem}.st-timeouts{position:static;justify-content:center}.st-choices{grid-template-columns:1fr}.st-choice{min-height:55px}.st-choice strong{font-size:.78rem}.st-drive{gap:21px}.st-drive span{width:28px}.st-drive span+span::before{width:24px}.st-prompt{display:none}}
