:root{--ink:#263f3d;--muted:#667b76;--red:#ef6253;--blue:#3688dc;--green:#28885f;--cream:#fffaf0;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:#f5f7ed;color:var(--ink);font-family:"Segoe UI",Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:4px solid #fff;box-shadow:0 0 0 7px #277d64;outline-offset:1px}
#app{min-height:calc(100vh - 58px);padding:13px 20px 9px}.game-header{width:min(1440px,100%);margin:0 auto 9px;display:flex;align-items:end;justify-content:space-between;gap:20px}.kicker{display:block;color:#72827c;font-size:11px;font-weight:850;letter-spacing:1.5px;text-transform:uppercase}.game-header h1{font-size:clamp(30px,3vw,46px);line-height:1;margin:5px 0 0;letter-spacing:-1.5px}.game-header h1 span{color:#f1b82d}.toolbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.btn{border:1px solid #d0dbce;background:#fffdf7;color:#38544c;border-radius:11px;padding:9px 13px;font-size:13px;font-weight:800;box-shadow:0 2px 0 #dae2d4}.btn:hover{background:#f0f7eb}.btn.primary{background:#277e60;border-color:#277e60;color:white;box-shadow:0 3px 0 #185b46}
.scoreboard{width:min(1160px,100%);margin:0 auto 9px;display:grid;grid-template-columns:1fr 150px 1fr;gap:10px;align-items:stretch}.team-card{position:relative;min-height:84px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:10px 14px;border:2px solid color-mix(in srgb,var(--team) 35%,#d7dfd2);border-radius:17px;background:#fffdf8;box-shadow:0 4px 0 color-mix(in srgb,var(--team) 14%,#d8e0d3);overflow:hidden}.team-card::before{content:"";position:absolute;inset:0 auto 0 0;width:7px;background:var(--team)}.team-card.active{border-color:var(--team);background:color-mix(in srgb,var(--team) 7%,white);box-shadow:0 0 0 3px color-mix(in srgb,var(--team) 12%,transparent),0 4px 0 color-mix(in srgb,var(--team) 35%,#ccd7ca)}.team-badge{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--team);color:white;font-size:23px;font-weight:950;box-shadow:0 3px 0 color-mix(in srgb,var(--team) 70%,black)}.team-card>div:nth-child(2){display:grid;gap:2px}.team-card>div:nth-child(2) span{color:var(--team);font-size:9px;font-weight:900;letter-spacing:1.5px}.team-card>div:nth-child(2) strong{font-size:clamp(17px,1.7vw,24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.team-stats{display:grid;text-align:center}.team-stats b{font-size:25px;color:var(--team);line-height:1}.team-stats small{font-size:9px;color:var(--muted);white-space:nowrap}.streak{position:absolute;right:12px;bottom:5px;display:flex;align-items:center;gap:5px;color:#8a948f;font-size:9px;font-weight:800}.streak i{width:7px;height:7px;border-radius:50%;background:#cfd7d0}.streak.ready{color:#ac7211}.streak.ready i{background:#f4b727;box-shadow:0 0 0 3px #f7d97c55}.versus{display:grid;place-items:center;align-content:center;border-radius:16px;background:#263f3d;color:#fff;text-align:center;box-shadow:0 4px 0 #18302e}.versus span{font-size:8px;letter-spacing:1.5px;font-weight:850;color:#c8d6d1}.versus b{font-size:28px;line-height:1;color:#f8c545}.versus small{font-size:9px;color:#e4eee9;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stadium{position:relative;width:min(1160px,100%);margin:0 auto;overflow:hidden;border:3px solid #89642b;border-radius:23px;background:#bee9ff;box-shadow:0 9px 0 #d2ddc9,0 18px 43px #5b45242b}.sky{position:relative;height:90px;background:linear-gradient(#65c9f3,#caeffb);overflow:hidden}.sun{position:absolute;right:7%;top:12px;color:#ffe56d;font-size:44px;text-shadow:0 3px 0 #e9a930}.cloud{position:absolute;width:95px;height:24px;border-radius:30px;background:#fff9;filter:drop-shadow(0 4px 4px #2789b12a)}.cloud::before,.cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}.cloud::before{width:38px;height:38px;left:17px;top:-17px}.cloud::after{width:47px;height:47px;right:13px;top:-24px}.cloud.one{left:10%;top:39px}.cloud.two{left:57%;top:22px;transform:scale(.75)}.crowd{height:45px;padding-top:12px;background:linear-gradient(#5e916b,#3e7356);color:#f5d989;font-size:20px;letter-spacing:10px;text-align:center;white-space:nowrap;overflow:hidden;text-shadow:0 2px #254d3d}.field{position:relative;height:255px;background:linear-gradient(#71c75e 0 8%,#85d366 8% 16%,#72c45e 16% 24%,#83d064 24% 32%,#70bf59 32%);isolation:isolate}.field::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,transparent 0 12.5%,#ffffff0e 12.5% 25%)}.center-line{position:absolute;left:50%;top:0;bottom:0;border-left:3px dashed #fff8}.win-line{position:absolute;top:0;bottom:0;width:5px;background:#fff;border:1px solid #d1c68e;box-shadow:0 0 0 4px #fff4}.win-line.left{left:24%}.win-line.right{right:24%}.lane-label{position:absolute;top:13px;color:#fff;font-size:9px;font-weight:900;letter-spacing:1px;text-shadow:0 2px 2px #306a3f;max-width:20%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lane-label.left{left:2%}.lane-label.right{right:2%;text-align:right}.rope{position:absolute;z-index:4;left:16%;right:16%;top:52%;height:9px;border-radius:999px;background:repeating-linear-gradient(45deg,#b07131 0 7px,#e3ad59 7px 14px);box-shadow:0 3px 0 #76441f,0 6px 8px #38542355}.knot{position:absolute;left:50%;top:50%;width:24px;height:24px;border-radius:50%;background:#c48137;border:4px solid #f2c46f;transform:translate(calc(-50% + var(--position)*52px),-50%);transition:transform .75s cubic-bezier(.2,.9,.2,1)}.flag{position:absolute;left:50%;bottom:4px;font-size:43px;filter:drop-shadow(0 4px 2px #34523f55);transform:translateX(calc(-50% + var(--position)*52px));transform-origin:bottom left;transition:transform .75s cubic-bezier(.2,.9,.2,1)}.pullers{position:absolute;z-index:5;top:35%;display:flex;align-items:end;gap:2px;transition:transform .75s cubic-bezier(.2,.9,.2,1)}.pullers span{display:block;font-size:55px;filter:drop-shadow(0 5px 2px #34512c66);transform:rotate(calc((var(--i) - 1)*3deg))}.pullers-0{left:4%;transform:translateX(calc(var(--position)*10px))}.pullers-1{right:4%;flex-direction:row-reverse;transform:translateX(calc(var(--position)*10px))}.pullers-1 span{transform:scaleX(-1) rotate(calc((var(--i) - 1)*3deg))}.ground-shadow{position:absolute;left:2%;right:2%;bottom:19px;height:11px;border-radius:50%;background:#356e3b29;filter:blur(5px)}.turn-panel{min-height:69px;padding:8px 16px;display:flex;align-items:center;justify-content:center;gap:13px;background:#fffdf8;text-align:center}.turn-panel>div{display:grid;gap:1px}.turn-panel small{font-size:9px;letter-spacing:1.3px;font-weight:900;color:var(--active)}.turn-panel strong{font-size:20px}.turn-panel p{margin:0;color:var(--muted);font-size:11px}.turn-light{width:19px;height:19px;border-radius:50%;background:var(--active);box-shadow:0 0 0 6px color-mix(in srgb,var(--active) 16%,transparent)}.turn-panel .btn{margin-left:20px;font-size:15px;padding:11px 17px}.footer-note{text-align:center;color:#73837d;font-size:11px;margin:9px 0 0}
.stadium.tug-0 .pullers,.stadium.tug-0 .rope{animation:tug-left .65s ease-in-out}.stadium.tug-1 .pullers,.stadium.tug-1 .rope{animation:tug-right .65s ease-in-out}.stadium.tug-miss .pullers{animation:slip .5s ease-in-out}@keyframes tug-left{35%{translate:-18px 0}65%{translate:7px 0}}@keyframes tug-right{35%{translate:18px 0}65%{translate:-7px 0}}@keyframes slip{35%{translate:0 8px;rotate:2deg}70%{translate:0 -3px}}
dialog{width:min(980px,calc(100vw - 30px));max-height:calc(100dvh - 24px);overflow:auto;border:1px solid #d9e2d2;border-radius:24px;padding:0;background:#fffdf7;color:var(--ink);box-shadow:0 25px 100px #1d3a355c}dialog::backdrop{background:#183d36a8;backdrop-filter:blur(5px)}.dialog-inner{padding:25px 30px}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:17px}.question-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pill{padding:7px 10px;border-radius:8px;background:#f0eadc;color:#6a5c3f;font-size:12px;font-weight:850}.pill.team{background:color-mix(in srgb,var(--team) 14%,white);border:1px solid color-mix(in srgb,var(--team) 42%,white);color:var(--team)}.dialog-close{border:0;background:transparent;color:#687b74;padding:8px;border-radius:8px}.dialog-close:hover{background:#f0f3ea}.setup-heading{font-size:29px;margin:0 0 20px}.name-grid{display:flex;align-items:flex-start;gap:14px;height:72px;overflow:hidden}.name-grid .field{flex:1;min-width:0}.field{display:grid;grid-template-rows:auto 48px;align-content:start;gap:7px;height:auto;color:#476057;font-size:13px;font-weight:800}.field.red{color:var(--red)}.field.blue{color:var(--blue)}.field input{align-self:start;width:100%;height:48px;min-height:48px;max-height:48px;border:2px solid #cad8c4;border-radius:12px;padding:10px 12px;background:#fff;color:var(--ink);font-size:18px}.turn-count{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;border:0;padding:0;margin:22px 0 0}.turn-count legend{font-size:14px;font-weight:850;margin-bottom:9px}.turn-count label{display:grid;gap:2px;padding:13px;border:2px solid #dce4d6;border-radius:14px;background:white;cursor:pointer;text-align:center}.turn-count label:has(input:checked){border-color:#27815f;background:#eef7e9}.turn-count input{position:absolute;opacity:0}.turn-count b{font-size:20px}.turn-count small{color:var(--muted)}.question-heading{font-size:clamp(23px,2.55vw,34px);line-height:1.35;letter-spacing:-.6px;margin:0 0 20px}.options{display:grid;grid-template-columns:1fr 1fr;gap:11px}.answer{min-height:82px;display:flex;align-items:center;gap:13px;border:2px solid #dfe5d8;border-radius:16px;background:#fff;padding:13px 15px;text-align:left;color:var(--ink);font-size:clamp(17px,1.65vw,22px);line-height:1.35}.answer:not(:disabled):hover{border-color:#d6a831;background:#fffaf0}.answer-letter{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:#f3ead5;color:#815b16;font-size:16px;font-weight:900}.answer.selected{border-color:#e2a928;background:#fff7d9;box-shadow:0 0 0 1px #e2a928}.answer.selected .answer-letter{background:#e7ad25;color:white}.answer.correct{border-color:#4a9b61;background:#e9f6e7;color:#285934}.answer.correct .answer-letter{background:#45905a;color:#fff}.answer.wrong{border-color:#e47764;background:#fff0ec;color:#873b2f}.answer.wrong .answer-letter{background:#dc6855;color:#fff}.feedback{margin-top:17px;padding:13px 16px;border-radius:13px;line-height:1.45}.feedback.correct{background:#e8f5e4;color:#315f34}.feedback.wrong{background:#fff0e9;color:#844433}.feedback strong{display:block;font-size:19px}.feedback p{margin:5px 0 0}.rules{padding-left:23px;font-size:17px;line-height:1.5}.rules li{margin:7px 0;padding-left:4px}.source-note{padding:12px 15px;border-radius:12px;background:#f6edd7;color:#756444;font-size:12px;line-height:1.55}.dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:20px}.dialog-actions .btn{font-size:16px;padding:12px 18px}.dialog-actions.centered{justify-content:center}.shortcut{margin-right:auto;color:#738179;font-size:11px}.result-dialog{text-align:center}.result-dialog .dialog-top{text-align:left}.cup{font-size:78px;filter:drop-shadow(0 8px 4px #8b5c2344)}.result-dialog h2{font-size:38px;margin:3px 0;color:var(--winner)}.result-dialog>p{font-size:17px;color:var(--muted)}.result-stats{display:flex;justify-content:center;gap:14px;margin-top:18px}.result-stats span{min-width:130px;padding:13px;border-radius:14px;background:#f2f6ed;display:grid}.result-stats b{font-size:28px;color:var(--winner)}#toast{position:fixed;left:50%;bottom:22px;z-index:20;transform:translateX(-50%);padding:11px 18px;border-radius:12px;background:#24493e;color:#fff;font-size:14px}#toast:empty{display:none}
@media(max-width:900px){#app{padding:10px 8px}.game-header{align-items:flex-start}.toolbar .btn{font-size:11px;padding:8px}.scoreboard{grid-template-columns:1fr 90px 1fr}.team-card{min-height:74px;padding:8px}.team-badge{width:34px;height:34px}.team-stats,.streak{display:none}.versus small{display:none}.sky{height:62px}.crowd{height:35px}.field{height:225px}.pullers span{font-size:43px}.knot,.flag{transform:translateX(calc(-50% + var(--position)*37px))}.turn-panel .btn{margin-left:5px}.footer-note{display:none}}
@media(max-width:650px){.game-header{display:block}.toolbar{justify-content:flex-start;margin-top:8px}.scoreboard{grid-template-columns:1fr 65px 1fr}.team-card{grid-template-columns:auto 1fr}.team-card>div:nth-child(2) strong{font-size:14px}.team-badge{display:none}.versus b{font-size:22px}.sky{height:50px}.crowd{display:none}.field{height:210px}.pullers span{font-size:34px}.pullers{gap:0}.turn-panel{padding:7px}.turn-panel p{display:none}.turn-panel strong{font-size:16px}.turn-count,.options{grid-template-columns:1fr}.name-grid{height:158px;flex-direction:column}.name-grid .field{width:100%;flex:0 0 72px}.answer{min-height:64px}.dialog-inner{padding:19px}.shortcut{display:none}.result-dialog h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}