:root{font-family:Inter,system-ui,sans-serif;color:#26354e;background:#f3f8ff}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:linear-gradient(135deg,#e8f7ff,#fff0f7)}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #f39a32;outline-offset:3px}[hidden]{display:none!important}.app{width:calc(100% - 8px);min-height:calc(100dvh - var(--games-header-height,80px));margin:auto;display:flex;align-items:center;justify-content:center;padding:0 0 3px}.card{border:1px solid #d8e3f2;border-radius:20px;background:#fff;box-shadow:0 10px 35px #1a385216}.setup{width:min(1080px,100%);height:calc(100dvh - var(--games-header-height,80px) - 12px);min-height:0;padding:clamp(12px,2vw,24px);display:flex;flex-direction:column;text-align:center;background:#eaf5ff;overflow:hidden}.setup-top{display:flex;flex-direction:column;flex-shrink:0}.setup-bottom{flex-shrink:0;padding-top:10px}.hint{color:#576985;line-height:1.5}.settings .primary{width:100%;min-width:0;min-height:50px}.settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:8px;text-align:left;margin:8px auto;width:min(760px,100%);max-width:100%}.grade-row{display:grid;grid-template-columns:minmax(0,1fr);text-align:left;margin:12px 0 0}.grade-row label{font-weight:750;font-size:clamp(16px,1.5vw,20px)}.grade-row select{display:block;width:100%;height:50px;margin-top:6px;padding:0 12px;border:1px solid #bacbe1;border-radius:10px;background:white;color:#26354e;font-size:21px;font-weight:650}.settings label{font-weight:750;font-size:clamp(16px,1.5vw,20px)}.settings select{display:block;width:100%;height:50px;margin-top:6px;padding:0 12px;border:1px solid #bacbe1;border-radius:10px;background:white;color:#26354e;font-size:17px}.primary,.small{border:0;border-radius:12px;padding:12px 20px;font-weight:850}.primary{background:#ffca56;color:#243149;box-shadow:0 4px 0 #dc9d35;min-height:48px}.small{background:#e5edf9;color:#264d85}.error{color:#c32d47;font-weight:700}.play{width:100%;height:calc(100dvh - var(--games-header-height,80px) - 3px);min-height:380px;display:flex;flex-direction:column;gap:3px}.stage{flex:1 1 55%;min-height:130px;display:flex;flex-direction:column;background:linear-gradient(#ddf2ff,#f7fbff);border:2px solid #c4dff2;border-radius:14px;padding:2px;overflow:hidden}.field{flex:1;min-height:0}.game-bottom{flex:1 1 45%;min-height:180px;display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.65fr) minmax(0,1fr);gap:6px;align-items:stretch}.question-column{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:5px}.topline{display:flex;align-items:center;justify-content:center;min-height:24px;font-weight:900;color:#2458a0;font-size:clamp(1rem,1.7vw,1.35rem)}.prompt{text-align:center;padding:12px 8px;display:grid;place-items:center;min-height:90px}.prompt strong{font-size:clamp(1.15rem,2.45vw,2.2rem);overflow-wrap:anywhere;color:#1f4e98}.field{position:relative;height:clamp(150px,32vh,360px);overflow:hidden;background:linear-gradient(#dff2ff 0 76%,#d8edc7 76% 100%);border-radius:12px}.field:after{content:"";position:absolute;bottom:23%;left:0;right:0;border-bottom:2px solid #95b888}.centerline{position:absolute;top:0;bottom:0;left:50%;border-left:3px dashed #dc6c6c;opacity:.8}.finish{position:absolute;top:0;bottom:0;width:2px;background:#d75b5b;opacity:.7}.finish.left{left:42%}.finish.right{right:42%}.tug-track{position:absolute;inset:0}.rope{position:absolute;z-index:1;bottom:0;left:20%;right:20%;height:94%;background:url("rope.png") repeat-x left center / auto 100%;transition:left 1.05s cubic-bezier(.22,1,.36,1),right 1.05s cubic-bezier(.22,1,.36,1)}.actor{position:absolute;z-index:2;bottom:0;height:94%;aspect-ratio:1;background-image:url("boy.png");background-size:200% 100%;background-repeat:no-repeat;background-position:left center;transition:translate 1.05s cubic-bezier(.22,1,.36,1);clip-path:polygon(0 0,100% 0,100% 46%,94% 46%,94% 60%,100% 60%,100% 100%,0 100%,0 60%,6% 60%,6% 46%,0 46%)}.actor-one{left:0;translate:var(--pull-one,0px) 0}.actor-two{right:0;transform:scaleX(-1);translate:var(--pull-two,0px) 0}.tug-track.pull-left .actor-two,.tug-track.pull-right .actor-one{background-position:right center}.player{min-width:0;min-height:0;padding:6px 8px 8px;text-align:center;display:flex;flex-direction:column}.player-one{border-top:5px solid #38a6df}.player-two{border-top:5px solid #e48ab6}.player-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-inline:clamp(8px,1vw,18px);color:#2458a0;font-weight:900;font-size:clamp(.85rem,1.4vw,1.2rem)}.player-head strong{font-size:clamp(2rem,3.7vw,3.3rem);line-height:1;font-variant-numeric:tabular-nums}.player p{min-height:18px;margin:2px 0 5px;font-size:.85rem;color:#63738d}.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;flex:1}.answer{min-height:60px;padding:8px;border:2px solid #d4e0f0;border-radius:12px;background:#f5f9ff;color:#253e64;font-weight:800;font-size:clamp(1.08rem,1.3vw,1.45rem);overflow-wrap:anywhere;transition:background .15s,border-color .15s}.answer:hover:not(:disabled){background:#e3f1ff;border-color:#7db7e9}.answer:disabled{opacity:.65;cursor:default}.overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:12px;background:#1b294d99}.result-card{position:relative;isolation:isolate;overflow:hidden;width:min(680px,100%);padding:clamp(16px,3vw,28px);text-align:center}.result-card h2{color:#2458a0;font-size:clamp(1.6rem,4vw,2.4rem)}.result-card .small{margin-left:10px}.designer{position:fixed;right:12px;bottom:8px;z-index:5;font-size:11px;color:#7b8ba2;text-decoration:none;opacity:.8}
.landscape-required{display:none;position:fixed;inset:0;z-index:80;align-items:center;justify-content:center;padding:16px;background:linear-gradient(135deg,#dff2ff,#fff0f7)}
.landscape-notice{width:min(420px,100%);padding:20px 18px;text-align:center;max-height:100%;overflow:auto}
.landscape-notice svg{display:block;margin:0 auto 6px;color:#236ca0}
.landscape-notice h2{margin:6px 0;font-size:clamp(1.2rem,5vw,1.55rem)}
.landscape-notice p{margin:8px auto 14px;line-height:1.4}
.landscape-notice .primary{width:100%;max-width:250px}
.landscape-status{font-size:.9rem;color:#a93b35;font-weight:700}
@media(orientation:portrait) and (pointer:coarse){.landscape-required{display:flex}body{overflow:hidden}}
@media(orientation:landscape) and (pointer:coarse) and (max-height:650px){
 .app{min-height:0}
 .setup{height:auto;min-height:calc(100dvh - var(--games-header-height,80px) - 6px);overflow:visible}
 .unit-choices{grid-template-columns:repeat(2,minmax(0,1fr));flex:0 1 auto;max-height:35dvh}
 .play{min-height:310px;height:calc(100dvh - var(--games-header-height,80px) - 3px)}
 .stage{flex:1 1 40%;min-height:105px}
 .game-bottom{flex:1 1 60%;min-height:170px;grid-template-columns:minmax(0,1fr) minmax(115px,.6fr) minmax(0,1fr)}
 .player{padding:3px 5px}
 .player-head{font-size:.75rem}
 .player-head strong{font-size:clamp(1.25rem,3vw,1.8rem)}
 .player p{min-height:16px;margin:0 0 2px;font-size:.69rem}
 .options{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 .answer{min-height:34px;padding:4px;font-size:clamp(.75rem,1.7vw,.98rem)}
 .prompt{min-height:65px;padding:5px}
 .prompt strong{font-size:clamp(.95rem,2.1vw,1.4rem)}
 .topline{min-height:21px;font-size:.9rem}
 .question-column{gap:3px}
 .overlay .result-card,.overlay .pause-card{max-height:calc(100dvh - 24px);overflow-y:auto}
 .games-is-fullscreen .play{height:calc(100dvh - 3px)}
}
@media(max-width:700px){.app{width:calc(100% - 4px);padding:0 0 2px}.setup{padding:12px}.settings{gap:9px;margin:15px 0}.settings select{height:44px;padding:0 6px;font-size:16px}.settings .primary{min-height:44px}.play{height:calc(100dvh - var(--games-header-height,80px) - 2px);gap:2px}.stage{flex-basis:44%;min-height:110px}.game-bottom{flex-basis:56%;grid-template-columns:minmax(0,1fr) minmax(92px,.65fr) minmax(0,1fr);gap:3px}.player{padding:4px 3px 5px}.player-head{font-size:.68rem;gap:2px}.player-head strong{font-size:clamp(1.4rem,4vw,2rem)}.player p{font-size:.68rem;min-height:28px;margin:2px 0}.options{grid-template-columns:1fr;gap:4px}.answer{min-height:38px;padding:3px;font-size:.92rem}.prompt{padding:6px 3px;min-height:72px}.prompt strong{font-size:clamp(.9rem,3vw,1.3rem)}.topline{font-size:.9rem}.question-column{gap:3px}}@media(max-width:380px){.settings label{font-size:.85rem}.game-bottom{grid-template-columns:minmax(0,1fr) minmax(78px,.6fr) minmax(0,1fr)}.player-head{font-size:.6rem}.prompt strong{font-size:.9rem}}@media(max-height:600px) and (min-width:701px){.stage{flex-basis:48%}.game-bottom{flex-basis:52%}.answer{min-height:38px}.player{padding:4px 8px}}
.modal-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:18px}.pause-card{width:min(480px,100%);padding:clamp(20px,4vw,32px);text-align:center}.pause-card h2{color:#2458a0;margin:0 0 10px}.games-is-fullscreen .app{min-height:100dvh}.games-is-fullscreen .play{height:calc(100dvh - 3px)}.fullscreen-exit{position:fixed;top:12px;right:12px;z-index:30;width:44px;height:44px;border:1px solid #cad6e9;border-radius:12px;background:#fff;color:#294d9c;box-shadow:0 4px 15px #18264233;display:grid;place-items:center}.fullscreen-exit svg{width:23px;height:23px}@media(max-width:700px){.setup{min-height:calc(100dvh - var(--games-header-height,80px) - 10px)}.modal-actions{gap:8px}}
.result-card h2{position:relative;z-index:1;margin:0 0 18px}.result-panels{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.result-player{min-width:0;border:2px solid #d9e5f4;border-radius:16px;padding:16px 8px;background:#f5f9ff}.result-player:first-child{border-top:5px solid #38a6df}.result-player:nth-child(2){border-top:5px solid #e48ab6}.result-player.is-winner{background:#fff7de;border-color:#efbc4b}.result-player h3{margin:0;color:#2458a0;font-size:clamp(.9rem,2vw,1.2rem)}.result-player>strong{display:block;margin:8px 0;color:#2458a0;font-size:clamp(2.6rem,6vw,4rem);line-height:1}.result-stats{display:grid;gap:5px;margin:10px 0;font-size:clamp(.8rem,1.6vw,1rem);font-weight:600}.result-stats>div{display:flex;justify-content:space-between;gap:8px;padding:4px 8px;border-radius:6px;background:#ffffffa8}.result-stats strong{font-variant-numeric:tabular-nums}.winner-tag{display:inline-block;margin-top:5px;padding:5px 12px;border-radius:999px;background:#ffd46a;color:#63430a;font-weight:900;font-size:.8rem}.result-card .modal-actions{position:relative;z-index:1}.pause-instructions{text-align:left;margin:14px 0;padding:12px 16px;background:#f2f7ff;border-radius:12px;line-height:1.5;color:#344b70}.pause-instructions h3{margin:0 0 6px;color:#2458a0}.pause-instructions p{margin:0}.confetti{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}.confetti i{position:absolute;left:var(--x);top:-15px;width:8px;height:13px;border-radius:2px;opacity:0;animation:confetti-fall var(--duration) linear var(--delay) forwards}@keyframes confetti-fall{0%{transform:translate(0,-10px) rotate(0);opacity:1}90%{opacity:1}100%{transform:translate(var(--drift),650px) rotate(720deg);opacity:0}}@media(max-width:420px){.result-panels{gap:6px}.result-player{padding:12px 4px}.result-stats{font-size:.75rem}.result-card{padding:14px 9px}}

.unit-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;flex:1 1 0;min-height:65px;gap:5px;padding:2px;overflow:auto;margin:5px 0}.unit-choice{display:flex;align-items:center;gap:7px;min-width:0;min-height:56px;padding:7px 10px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;cursor:pointer;text-align:left}.unit-choice.selected{border-color:#2296d2;background:#dff2ff}.unit-choice input{flex:none;width:20px;height:20px;margin:0;accent-color:#168ac6}.unit-choice strong{font-size:clamp(16px,1.4vw,20px);white-space:nowrap}.unit-choice span{margin-left:auto;font-size:clamp(14px,1.15vw,18px);font-weight:650;text-align:right;overflow-wrap:anywhere}@media(max-width:600px){.unit-choices{grid-template-columns:1fr}.unit-choice{min-height:48px;padding:7px 10px}.unit-choice strong{font-size:15px}.unit-choice span{font-size:13px}}

.grade-row #grade{width:min(240px,100%);max-width:100%;margin:0;font-size:21px}

#clock{display:inline-flex;align-items:center;justify-content:center;margin-left:8px;padding:3px 10px;border-radius:9px;background:#e7f0ff;color:#194d8e;font-variant-numeric:tabular-nums}.topline{flex-wrap:wrap;gap:4px}.answer.is-correct{background:#c9f7da;border-color:#28a66f;color:#13593c;opacity:1}.answer.is-wrong{background:#ffe0e0;border-color:#df6b6b;color:#8e2424;opacity:1}

/* Curriculum grade selection: keep the closed control comfortable and options compact. */
.grade-row #grade{width:min(320px,100%);max-width:320px}
.grade-row #grade option{font-size:15px;padding:3px 8px}