*{box-sizing:border-box} :root{--ink:#172e31;--muted:#536969;--green:#146454;--blue:#1458a5;--red:#b63b38;--line:#d9e3dc}body{margin:0;background:#f4f5ed;color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif}a{color:inherit}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid #c27005;outline-offset:4px}.shell{width:min(1280px,100% - 48px);margin:0 auto;padding:28px 0 60px}.brand{display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:800;letter-spacing:.04em;padding:8px 0 28px}.brand a{text-decoration:none}.brand span{font-size:13px;font-weight:500;letter-spacing:0;color:var(--muted)}.hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:48px;padding:55px 0 65px}h1,h2,p{margin-top:0}h1{font-size:clamp(32px,4.2vw,64px);line-height:1.1;letter-spacing:-.04em;margin-bottom:24px}h1 em{font-style:normal;color:var(--green)}h2{font-size:21px;line-height:1.35}.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--green);margin-bottom:14px}.lead{font-size:20px;color:var(--muted);max-width:500px}.button{display:inline-flex;justify-content:center;align-items:center;gap:18px;min-height:48px;border:1px solid var(--line);border-radius:12px;background:white;color:var(--ink);padding:12px 22px;cursor:pointer;text-decoration:none;font-weight:700}.button.primary{background:var(--green);border-color:var(--green);color:white}.button:hover{filter:brightness(.95)}button:disabled{opacity:.5;cursor:not-allowed}.button.small{padding:8px 14px;font-size:14px}.hint{font-size:14px;color:var(--muted);margin-top:14px}.hero-art{background:#e1e9db;border:1px solid #cddac5;border-radius:48% 48% 22px 22px;min-height:340px;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.hero-art img{width:90%;height:200px;object-fit:contain;mix-blend-mode:multiply}.art-caption{font-weight:900;font-size:28px;letter-spacing:.12em;color:var(--green)}.how{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:1px solid var(--line);padding-top:32px}.how article>span{font-size:13px;color:var(--green);font-weight:800}.how h2{margin:12px 0}.how p{color:var(--muted);font-size:15px}.heading{max-width:850px;margin:30px auto;text-align:center}.heading h1{font-size:clamp(30px,4vw,46px)}.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 8px 28px #18372a05}.settings-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;max-width:1100px;margin:auto}.round-card{align-self:start;position:sticky;top:20px}.round-card>.button{width:100%}fieldset{border:0;padding:0;margin:0 0 28px}legend{font-size:19px;font-weight:750;margin-bottom:16px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}.choice{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:15px;cursor:pointer}.choice:has(input:checked){background:#eef6ef;border-color:var(--green)}.choice input{width:20px;height:20px;flex-shrink:0;accent-color:var(--green)}.choice strong,.choice small{display:block}.choice small{font-size:12px;color:var(--muted)}.unit-list{display:grid;gap:8px;max-height:340px;overflow:auto;padding:4px}.field{display:flex;flex-direction:column;gap:10px;font-weight:650}.field input,.field select{width:100%;min-height:50px;border:1px solid #91a6a0;border-radius:10px;padding:12px;background:white;color:var(--ink)}.notice{font-size:14px;padding:12px;background:#faf3dd;border-radius:10px}.setup-card{max-width:760px;margin:auto}.team-blue{color:var(--blue)}.team-red{color:var(--red)}.arena-card{padding:16px 28px;margin-bottom:20px;text-align:center}.match-info{display:flex;justify-content:center;gap:24px;font-size:13px;color:var(--muted)}.scoreboard{display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:720px;margin:12px auto}.scoreboard>div{display:flex;flex-direction:column;max-width:40%;overflow-wrap:anywhere}.scoreboard strong{font-size:38px;line-height:1.1}.versus{font-size:12px;font-weight:800;color:var(--muted);margin:0}.rope-arena{height:110px;position:relative;max-width:620px;margin:auto;overflow:hidden;background:linear-gradient(90deg,#edf5fc,#fcf3ee);border-radius:16px;border-bottom:4px solid #c0cdb9}.rope-arena img{height:100%;width:62%;object-fit:contain;position:absolute;left:19%;transition:transform .3s;mix-blend-mode:multiply}.center-mark{position:absolute;height:100%;border-left:2px dashed #668275;left:50%}.finish{position:absolute;top:8px;font-size:10px;font-weight:800;z-index:1}.blue-finish{left:12px;color:var(--blue)}.red-finish{right:12px;color:var(--red)}.arena-card>.hint{margin:8px 0 0}.play-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.player{min-width:0;border-top:4px solid var(--blue)}.red-player{border-top-color:var(--red)}.player-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.player-heading h1{font-size:22px;margin:0;overflow-wrap:anywhere}.player-heading span{font-size:12px;color:var(--muted);white-space:nowrap}.player progress{width:100%;height:7px;accent-color:var(--blue);margin:12px 0 22px}.red-player progress{accent-color:var(--red)}.player h2{font-size:clamp(19px,2vw,25px);min-height:64px}.question-picture{text-align:center;margin-bottom:16px}.question-picture img{height:150px;max-width:100%;object-fit:contain}.answers{display:grid;grid-template-columns:1fr 1fr;gap:10px}.answer{min-height:60px;padding:12px;border:2px solid #dce4e8;border-radius:12px;background:#f7f9fb;cursor:pointer;color:var(--ink);font-weight:650;overflow-wrap:anywhere}.answer:hover:not(:disabled){border-color:var(--blue);background:#ecf4ff}.red-player .answer:hover:not(:disabled){border-color:var(--red);background:#fff1ee}.answer.correct{border-color:#176641;background:#e0f3e7;color:#13452e}.answer.incorrect{border-color:#b63838;background:#ffeded;color:#7e2020}.feedback{min-height:26px;margin:14px 0 0;font-size:14px;font-weight:650}dialog{border:1px solid var(--line);border-radius:24px;padding:0;width:min(520px,calc(100% - 32px));color:var(--ink)}dialog::backdrop{background:#102925b3;backdrop-filter:blur(4px)}.dialog-content{padding:36px;text-align:center}.dialog-content h2{font-size:34px}.dialog-content .button{margin:8px 4px}.dialog-content p{overflow-wrap:anywhere}@media(max-width:760px){.shell{width:calc(100% - 28px);padding-top:14px}.brand{flex-wrap:wrap;padding-bottom:18px}.brand>span{font-size:11px}.hero{grid-template-columns:1fr;gap:24px;padding:25px 0 38px}.hero-art{min-height:220px;grid-row:2}.hero-art img{height:140px}.how{grid-template-columns:1fr;gap:12px}.settings-grid{grid-template-columns:1fr}.round-card{position:static}.card{padding:20px}.choices{grid-template-columns:1fr}.match-info{gap:10px;flex-wrap:wrap;font-size:11px}.arena-card{padding:12px}.rope-arena{height:80px}.play-grid{gap:12px}.player{padding:12px}.player-heading{display:block}.player-heading h1{font-size:18px}.answers{grid-template-columns:1fr}.answer{font-size:14px;min-height:52px}.player h2{font-size:18px;min-height:90px}.question-picture img{height:100px}.feedback{font-size:12px}.scoreboard strong{font-size:30px}.scoreboard span{font-size:14px}}@media(max-width:380px){.play-grid{grid-template-columns:1fr}.player h2{min-height:0}.answers{grid-template-columns:1fr 1fr}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.hero-art img,.rope-arena img{visibility:hidden}.rope-arena::after{content:'\2190 ROPE \2192';position:absolute;left:35%;top:30%;width:30%;font-weight:800;color:var(--green)}}

/* Three-column game layout based on the supplied reference. */
body.game-page{height:100dvh;overflow:hidden;background:#eef2f6;}
.game-page .shell{width:calc(100% - 32px);max-width:1800px;height:100dvh;padding:12px 0;display:grid;grid-template-rows:48px minmax(0,1fr);gap:12px;}
.game-page .brand{padding:0;display:grid;grid-template-columns:120px 1fr 120px;gap:10px;}
.game-page .brand>a,.game-page #sound{background:white;border-radius:16px;box-shadow:0 5px 20px #0001;padding:8px 12px;font-size:14px;text-align:center;}
.game-page .game-title{font-size:clamp(18px,2.5vw,38px);text-align:center;color:#007fbb;margin:0;letter-spacing:0;line-height:1.1;}
.game-page .play-grid{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.85fr) minmax(0,1fr);gap:20px;}
.game-page .player{height:100%;min-height:0;padding:0;display:grid;grid-template-rows:56px 5px minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1.8fr) 18px minmax(22px,.25fr);gap:6px;border:0;box-shadow:0 8px 25px #0002;overflow:hidden;}
.game-page .blue-player{grid-column:1;grid-row:1;}.game-page .red-player{grid-column:3;grid-row:1;}
.game-page .player:has(.question-picture[hidden]){grid-template-rows:56px 5px 0 minmax(0,1fr) minmax(0,2fr) 18px minmax(22px,.25fr);}
.game-page .player-heading{grid-row:1;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:linear-gradient(120deg,#239af4,#1476d0);color:white;min-height:0;}
.game-page .red-player .player-heading{background:linear-gradient(120deg,#ef3737,#c72127);}
.game-page .player-heading h1{font-size:22px;margin:0;max-height:44px;min-width:0;line-height:1.1;}
.game-page .score-chip{background:white;color:#0086c5;padding:2px 14px;border-radius:30px;font-size:22px;line-height:1.2;}
.game-page .player progress{grid-row:2;height:5px;margin:0;width:100%;}
.game-page .question-picture{grid-row:3;min-height:0;margin:0;padding:0 12px;}
.game-page .question-picture img{display:block;width:100%;height:100%;object-fit:contain;}
.game-page .player h2{grid-row:4;min-height:0;margin:0;padding:6px 14px;align-content:center;background:#e3f2ff;color:#137bc1;font-size:clamp(16px,1.8vw,28px);line-height:1.2;text-align:center;overflow-wrap:anywhere;}
.game-page .red-player h2{background:#ffebed;color:#d82930;}
.game-page .answers{grid-row:5;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);min-height:0;gap:8px;padding:0 12px;}
.game-page .answer{height:100%;min-height:0;padding:8px;border:1px solid #e3e4e6;border-radius:16px;background:white;box-shadow:0 4px 12px #0001;font-size:clamp(14px,1.5vw,22px);line-height:1.2;}
.game-page .question-progress{grid-row:6;text-align:center;font-size:11px;color:var(--muted);line-height:18px;}
.game-page .feedback{grid-row:7;min-height:0;margin:0;padding:0 10px;font-size:12px;line-height:1.2;text-align:center;align-content:center;}
.game-page .arena-card{grid-column:2;grid-row:1;height:100%;min-height:0;margin:0;padding:14px;display:grid;grid-template-rows:22px 65px minmax(0,1fr) 26px;gap:8px;box-shadow:0 8px 25px #0002;}
.game-page .match-info{font-size:11px;gap:10px;line-height:1.2;align-items:center;flex-wrap:nowrap;}
.game-page .match-info #timer{font-weight:800;color:#008cc6;}
.game-page .scoreboard{width:100%;max-width:none;height:100%;margin:0;background:#e9e9e9;border-radius:15px;padding:8px 20px;line-height:1.2;}
.game-page .scoreboard>div{flex-direction:column;gap:4px;}.game-page .scoreboard span{font-size:14px;font-weight:700;}.game-page .scoreboard strong{font-size:24px;color:#008bc7;}
.game-page .rope-arena{width:100%;max-width:none;height:100%;min-height:0;background:white;border:0;border-radius:18px;box-shadow:0 4px 15px #0001;}
.game-page .rope-arena img{width:94%;height:100%;left:3%;object-fit:contain;}
.game-page .center-mark{border-left:3px dashed #999;}.game-page .finish{font-size:10px;}
.game-page .arena-card>.hint{margin:0;font-size:11px;line-height:1.2;text-align:center;align-content:center;}
.game-page dialog{max-height:calc(100dvh - 16px);}.game-page .dialog-content{padding:clamp(12px,3vh,30px);}
@media(max-width:900px){.game-page .shell{width:calc(100% - 16px);gap:8px;padding:8px 0;grid-template-rows:40px minmax(0,1fr);}.game-page .play-grid{gap:8px;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);}.game-page .brand{grid-template-columns:80px 1fr 85px;}.game-page .brand>a,.game-page #sound{font-size:11px;padding:6px;min-height:32px;}.game-page .player-heading{padding:8px;}.game-page .player-heading h1{font-size:16px;}.game-page .score-chip{font-size:16px;padding:2px 8px;}.game-page .arena-card{padding:8px;grid-template-rows:28px 52px minmax(0,1fr) 26px;gap:5px;}.game-page .match-info{font-size:9px;gap:6px;}.game-page .scoreboard{padding:5px 10px;}.game-page .scoreboard span{font-size:11px;}.game-page .scoreboard strong{font-size:20px;}.game-page .answers{padding:0 6px;gap:5px;}.game-page .answer{font-size:13px;padding:4px;border-radius:10px;}.game-page .player h2{padding:5px 8px;font-size:16px;}.game-page .feedback,.game-page .arena-card>.hint{font-size:10px;}}
@media(max-width:600px) and (orientation:portrait){.game-page .play-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,38%) minmax(0,1fr);}.game-page .arena-card{grid-column:1/3;grid-row:1;grid-template-rows:20px 35px minmax(0,1fr) 20px;}.game-page .blue-player{grid-column:1;grid-row:2;}.game-page .red-player{grid-column:2;grid-row:2;}.game-page .player{grid-template-rows:40px 5px minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1.8fr) 16px minmax(20px,.25fr);gap:4px;}.game-page .player:has(.question-picture[hidden]){grid-template-rows:40px 5px 0 minmax(0,1fr) minmax(0,2fr) 16px minmax(20px,.25fr);}.game-page .scoreboard>div{flex-direction:row;gap:6px;}.game-page .game-title{font-size:16px;}.game-page .rope-arena img{width:80%;left:10%;}.game-page .player-heading h1{max-height:30px;}}
@media(max-height:500px){.game-page .shell{grid-template-rows:30px minmax(0,1fr);gap:5px;padding:5px 0;}.game-page .game-title{font-size:20px;}.game-page .player{grid-template-rows:30px 4px minmax(0,1fr) minmax(0,.8fr) minmax(0,1.6fr) 14px minmax(16px,.2fr);gap:3px;}.game-page .player:has(.question-picture[hidden]){grid-template-rows:30px 4px 0 minmax(0,1fr) minmax(0,2fr) 14px minmax(16px,.2fr);}.game-page .player-heading h1{font-size:14px;max-height:22px;}.game-page .player-heading{padding:4px 8px;}.game-page .answer{font-size:12px;padding:3px;}.game-page .question-progress{font-size:9px;line-height:14px;}.game-page .feedback{font-size:9px;}.game-page .arena-card{grid-template-rows:20px 42px minmax(0,1fr) 20px;}.game-page .dialog-content{padding:10px 16px;}.game-page .dialog-content h2{font-size:24px;margin-bottom:8px;}.game-page .dialog-content p{font-size:13px;margin-bottom:8px;}.game-page .dialog-content .button{padding:6px 14px;min-height:36px;margin:4px;}}
@media(max-height:500px){.game-page .shell{grid-template-rows:34px minmax(0,1fr);}}

/* The same blue and red identity throughout the app. */
:root{--green:#007fb9;--ink:#16354a;--muted:#566c7c;--blue:#147ed3;--red:#db2932;--line:#dfe6ed}
body{background:#eef2f6}.brand{color:#007fb9}.hero h1 em{color:#0087c7}.hero-art{background:linear-gradient(130deg,#e1f2ff,#fff0f1);border-color:#d1e3ef;border-radius:28px;box-shadow:0 12px 35px #16354a12}.hero-art .art-caption{color:#007fb9}.hero-art img{mix-blend-mode:multiply}.card{box-shadow:0 8px 28px #16354a0d}.how{gap:20px;border:0}.how article{background:white;padding:24px;border-radius:20px;box-shadow:0 7px 24px #16354a0d;border-top:4px solid #168be0}.how article:nth-child(2){border-top-color:#ec363c}.how article:nth-child(3){border-top-color:#ffc64f}.button.primary{background:linear-gradient(120deg,#029bd6,#0074b3);border-color:#0089c4;box-shadow:0 5px 15px #007fb925}.button{border-radius:14px}.choice:has(input:checked){background:#e8f4ff;border-color:#168be0}.choice input{accent-color:#0787cc}.choice:has(input[value="computer"]:checked){background:#fff0f1;border-color:#e33740}.choice:has(input[value="computer"]) input{accent-color:#e33740}.settings-grid>.card:first-child{border-top:5px solid #168be0}.round-card{border-top:5px solid #e33740}.setup-card{border-top:5px solid #168be0}.setup-card .team-blue{background:#e9f5ff;padding:20px;border-radius:16px}.setup-card .team-red{background:#fff0f1;padding:20px;border-radius:16px}.heading h1{color:#007fb9}.notice{background:#fff5dc;color:#655123}.unit-list .choice{background:#f8fafc}dialog{box-shadow:0 18px 90px #00182d55}dialog::backdrop{background:#112b48c9}
.celebration-modal{width:min(720px,calc(100% - 24px));max-height:calc(100dvh - 20px);border:0;overflow:hidden;background:radial-gradient(ellipse at top,#f1faff,white 65%);isolation:isolate}.celebration-modal::backdrop{background:radial-gradient(ellipse at center,#163757b3,#05172bea);backdrop-filter:blur(7px)}#fireworks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.celebration-content{position:relative;z-index:1;padding:28px 40px}.victory-ribbon{display:inline-block;padding:6px 18px;background:#fff0bd;color:#83560b;border-radius:30px;font-size:11px;font-weight:900;letter-spacing:.2em;margin-bottom:10px}.trophy{font-size:76px;line-height:1.25;filter:drop-shadow(0 8px 12px #edb93240);animation:trophy-arrive .7s cubic-bezier(.2,.8,.2,1)}.celebration-content .eyebrow{margin:12px 0 8px}.celebration-content h2{font-size:clamp(28px,4vw,44px);color:#007fb9;margin:0 0 12px;line-height:1.12}.celebration-modal[data-winner="B"] h2{color:#d82b36}.celebration-content #final-score{font-size:14px;margin:0 auto 16px;color:var(--muted)}.final-scorecards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 auto 18px;max-width:460px}.final-team{display:flex;flex-direction:column;gap:2px;padding:16px;background:#e8f4ff;border:1px solid #cde7fa;border-radius:18px;color:#087ac4}.red-score{background:#ffedef;border-color:#fad2d7;color:#d52b38}.final-team span{font-size:15px;font-weight:750;overflow-wrap:anywhere}.final-team strong{font-size:46px;line-height:1.1}.final-team small{font-size:11px}.celebration-content #result-detail{font-size:13px;margin:0 0 8px}.celebration-note{font-size:14px;font-weight:650;margin-bottom:16px}.celebration-actions{display:flex;justify-content:center;gap:10px}.celebration-actions .button{margin:0}.celebration-modal[data-winner="A"] .blue-score,.celebration-modal[data-winner="B"] .red-score{box-shadow:0 0 0 3px #ffc94a,0 8px 22px #ffc94a25}@keyframes trophy-arrive{from{opacity:0;transform:translateY(20px) scale(.5) rotate(-15deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}@media(max-width:600px){.celebration-content{padding:22px 18px}.trophy{font-size:62px}.final-scorecards{gap:10px}.final-team{padding:12px}.celebration-actions{flex-direction:column}.celebration-content h2{font-size:30px}.how article{padding:20px}}@media(max-height:600px){.celebration-content{padding:12px 22px}.victory-ribbon{padding:3px 12px;margin-bottom:4px}.trophy{font-size:42px}.celebration-content .eyebrow{margin:4px 0}.celebration-content h2{font-size:28px;margin-bottom:5px}.celebration-content #final-score{margin-bottom:8px}.final-scorecards{margin-bottom:8px}.final-team{padding:7px}.final-team strong{font-size:30px}.celebration-note{margin-bottom:8px}.celebration-actions{flex-direction:row}.celebration-actions .button{min-height:36px;padding:7px 14px}.celebration-content #result-detail{margin-bottom:4px}}@media(prefers-reduced-motion:reduce){.trophy{animation:none}}
@media(max-height:420px){.celebration-content{padding:8px 18px}.celebration-content .trophy{font-size:30px}.celebration-content .eyebrow{font-size:10px;margin:2px 0}.celebration-content h2{font-size:24px}.celebration-content .victory-ribbon{font-size:9px;margin:0;padding:2px 10px}.celebration-content .final-scorecards{margin-bottom:5px}.celebration-content .final-team{padding:4px}.celebration-content .final-team strong{font-size:26px}.celebration-content .celebration-note{margin:4px 0;font-size:11px}.celebration-content #result-detail{font-size:11px}.celebration-content #final-score{margin-bottom:4px;font-size:11px}}

.countdown-modal{width:min(300px,calc(100% - 32px));padding:32px;text-align:center;border:0;border-radius:28px;background:radial-gradient(circle,#fff,#e6f5ff);box-shadow:0 16px 70px #007fb940}.countdown-modal #countdown-number{font-size:100px;font-weight:900;line-height:1.2;color:#0088c8;text-shadow:0 5px 0 #c5e9ff}.countdown-modal p{margin:12px 0 0;color:#32617f;font-weight:700}.count-pop{animation:count-pop .45s ease-out}@keyframes count-pop{from{transform:scale(.55);opacity:.2}to{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.count-pop{animation:none}}