:root{
  --red:#d71920;--red2:#ff3340;--white:#fff;--blue:#1769e0;--gold:#ffd646;--grass:#62b84f;--ink:#18233a;--shadow:0 18px 50px rgba(21,31,55,.2)
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;font-family:ui-rounded,"Trebuchet MS",system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:#eaf7ff;overflow-x:hidden}
button,input{font:inherit} button{cursor:pointer} button:focus-visible,input:focus-visible{outline:4px solid rgba(255,214,70,.9);outline-offset:2px}
#app{min-height:100vh;background:linear-gradient(#8ed8ff 0 47%,#e8faff 47% 55%,#75c65e 55% 100%)}
.topbar{position:fixed;z-index:50;left:0;right:0;top:0;height:72px;padding:10px clamp(12px,3vw,34px);display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:3px solid var(--red);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.school-badge{display:flex;align-items:center;gap:10px}.school-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),#9c0d15);color:#fff;font-weight:1000;box-shadow:inset 0 0 0 3px #fff,0 6px 12px rgba(215,25,32,.25)}
.school-name{font-weight:1000;letter-spacing:.06em}.school-tagline{font-size:12px;font-weight:800;color:#667085}.top-actions{display:flex;gap:8px}.icon-btn{width:43px;height:43px;border:none;border-radius:13px;background:#f2f4f7;font-size:21px;box-shadow:inset 0 -2px rgba(0,0,0,.08)}.icon-btn.active{background:#ffe6e7}.icon-btn:active{transform:translateY(2px)}
.screen{display:none;min-height:100vh;padding-top:72px}.screen.active{display:block}.glass{background:rgba(255,255,255,.91);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow)}
.start-screen{position:relative;overflow:hidden;padding:100px 18px 90px;background:linear-gradient(180deg,#89d5ff 0%,#dff6ff 47%,#72c65a 47%,#4fa83f 100%)}
.hero-card{position:relative;z-index:3;width:min(860px,100%);margin:0 auto;text-align:center;border-radius:34px;padding:clamp(24px,4vw,42px);border:4px solid rgba(255,255,255,.95)}
.ribbon{display:inline-block;background:linear-gradient(90deg,#d71920,#ff4b55);color:#fff;border-radius:999px;padding:8px 18px;font-weight:1000;letter-spacing:.06em;box-shadow:0 8px 18px rgba(215,25,32,.25)}
.eyebrow{font-weight:1000;letter-spacing:.16em;color:#667085;margin:22px 0 8px;font-size:12px}.hero-card h1{font-size:clamp(40px,8vw,72px);line-height:.9;margin:0;letter-spacing:-.045em;color:#151d34;text-shadow:0 4px 0 #fff}.hero-card h1 span{color:var(--red)}.intro{max-width:650px;margin:20px auto;font-size:clamp(15px,2.2vw,19px);line-height:1.55}.hero-card h2{font-size:19px;margin:25px 0 12px}
.name-grid,.difficulty-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.name-card{border-radius:18px;padding:12px 14px;text-align:left;color:#fff;font-weight:1000}.name-card.red{background:linear-gradient(135deg,#df1f29,#a80b14)}.name-card.blue{background:linear-gradient(135deg,#2785ff,#1553aa)}.name-card span{display:block;font-size:11px;opacity:.86;letter-spacing:.1em}.name-card input{width:100%;border:none;background:rgba(255,255,255,.95);padding:11px 12px;border-radius:11px;margin-top:6px;font-weight:1000;color:#1e293b}
.difficulty-card{border:3px solid #e6e9ef;border-radius:21px;padding:18px;background:#fff;color:#1e293b;display:flex;flex-direction:column;gap:4px;align-items:center;transition:.2s transform,.2s border-color,.2s box-shadow}.difficulty-card:hover{transform:translateY(-3px)}.difficulty-card.selected{border-color:var(--red);box-shadow:0 10px 30px rgba(215,25,32,.16);background:linear-gradient(180deg,#fff,#fff4f4)}.difficulty-icon{font-size:33px}.difficulty-title{font-weight:1000;font-size:21px}.difficulty-desc{font-size:13px;font-weight:800;color:#667085}.difficulty-example{margin-top:8px;border-radius:999px;background:#f3f4f6;padding:6px 12px;font-weight:1000}
.primary-btn,.secondary-btn{border:none;border-radius:18px;padding:15px 24px;font-weight:1000;letter-spacing:.04em;font-size:17px}.primary-btn{background:linear-gradient(180deg,#ff3b45,#c90e17);color:#fff;box-shadow:0 8px 0 #8f0a11,0 14px 25px rgba(215,25,32,.27);margin-top:22px}.primary-btn:hover{filter:brightness(1.05)}.primary-btn:active{transform:translateY(5px);box-shadow:0 3px 0 #8f0a11}.secondary-btn{background:#eef2f6;color:#1e293b}.hint{font-size:12px;color:#667085;margin:20px 0 0}.cloud{position:absolute;font-size:90px;color:#fff;opacity:.78;filter:drop-shadow(0 5px 0 rgba(255,255,255,.3));animation:floatCloud 9s ease-in-out infinite alternate}.c1{left:5%;top:12%}.c2{right:5%;top:21%;animation-delay:-3s}.c3{right:23%;top:7%;font-size:55px;animation-delay:-6s}.hero-sun{position:absolute;width:170px;height:170px;border-radius:50%;background:#ffe46b;right:-30px;top:100px;box-shadow:0 0 0 24px rgba(255,228,107,.2),0 0 0 50px rgba(255,228,107,.09)}.decor-ground{position:absolute;left:0;right:0;bottom:13px;display:flex;justify-content:space-around;font-size:34px;opacity:.94}
@keyframes floatCloud{to{transform:translateX(24px) translateY(6px)}}

.game-screen{padding:86px 12px 22px;background:linear-gradient(#8ed8ff 0 45%,#dff7ff 45% 50%,#6cc057 50% 100%);min-height:100vh}.arena-header{width:min(1180px,100%);margin:0 auto 8px;display:flex;align-items:center;justify-content:space-between;gap:12px}.status-pill,.turn-banner{border-radius:999px;padding:8px 14px;background:rgba(255,255,255,.9);font-weight:1000;box-shadow:0 6px 18px rgba(0,0,0,.08)}.turn-banner{background:var(--gold);color:#542f00;animation:pulseTurn 1.1s ease-in-out infinite alternate}@keyframes pulseTurn{to{transform:scale(1.03)}}
.arena-wrap{position:relative;width:min(1180px,100%);margin:0 auto}.stadium-sign{text-align:center;background:linear-gradient(90deg,#d71920 0 50%,#fff 50% 100%);color:#fff;font-weight:1000;letter-spacing:.08em;padding:9px;border:4px solid #fff;border-radius:15px 15px 0 0;text-shadow:0 1px 3px #000}.stadium-sign::first-letter{color:#fff}.crowd{height:47px;background:repeating-linear-gradient(90deg,#f3d3a5 0 42px,#ecd0a6 42px 84px);overflow:hidden;display:flex;justify-content:space-around;align-items:end;font-size:33px;border-left:4px solid #fff;border-right:4px solid #fff}
.track-panel{position:relative;height:425px;border:4px solid #fff;border-top:none;border-radius:0 0 22px 22px;overflow:hidden;background:linear-gradient(180deg,#d59664,#bf7444);box-shadow:0 16px 40px rgba(0,0,0,.18)}.track-panel:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 60px,rgba(0,0,0,.025) 60px 120px);pointer-events:none}.lane{position:relative;height:190px;padding:13px 18px 5px}.lane-info{display:flex;justify-content:space-between;color:#fff;font-weight:1000;text-shadow:0 2px 3px rgba(0,0,0,.25)}.progress-shell{height:8px;background:rgba(0,0,0,.22);border-radius:999px;margin-top:8px;overflow:hidden}.progress-fill{height:100%;width:0%;border-radius:999px;transition:width .5s ease}.lane-a .progress-fill{background:#ffed73}.lane-b .progress-fill{background:#b6e0ff}.lane-divider{height:22px;background:rgba(255,255,255,.14);border-top:2px dashed rgba(255,255,255,.72);border-bottom:2px dashed rgba(255,255,255,.72);display:flex;justify-content:space-around;align-items:center;font-size:14px}
.finish-line{position:absolute;z-index:4;right:7.5%;top:0;bottom:0;width:35px;display:flex;flex-direction:column;align-items:center;pointer-events:none}.finish-label{position:absolute;top:8px;right:-18px;background:#111;color:#fff;font-weight:1000;font-size:11px;padding:4px 6px;transform:rotate(90deg);border-radius:4px}.checkers{width:22px;height:100%;background:conic-gradient(#fff 25%,#111 0 50%,#fff 0 75%,#111 0) 0/16px 16px;box-shadow:0 0 0 3px #fff}
.runner{position:absolute;z-index:5;left:3%;bottom:10px;width:92px;transition:left .75s cubic-bezier(.2,.9,.35,1.18)}
.runner.jumping .character{animation:jumpArc .74s cubic-bezier(.2,.7,.2,1)}.runner.jumping .dust{animation:dustBurst .65s ease}.runner.wobble .character{animation:wobble .48s ease}.runner-shadow{position:absolute;width:70px;height:16px;background:rgba(0,0,0,.18);border-radius:50%;left:12px;bottom:0;filter:blur(1px)}.character{position:relative;height:128px;display:flex;flex-direction:column;align-items:center;transform-origin:50% 100%}.head{position:relative;width:54px;height:54px;border-radius:48% 48% 45% 45%;background:#f1b880;border:4px solid #4b2b24;display:grid;place-items:center;z-index:4}.hair{position:absolute;left:0;right:0;top:0;height:17px;background:#3c281f;border-radius:48% 48% 50% 30%}.face{font-weight:1000;margin-top:8px;font-size:15px}.shirt{margin-top:-5px;width:58px;height:42px;border-radius:12px 12px 5px 5px;color:#fff;display:grid;place-items:center;font-weight:1000;font-size:20px;border:4px solid rgba(255,255,255,.8);z-index:3}.runner-a .shirt{background:#d71920}.runner-b .shirt{background:#1769e0}.sack{margin-top:-6px;width:67px;height:58px;background:linear-gradient(90deg,#d5a76e,#b17b42,#d5a76e);border:4px solid #80562d;border-radius:10px 10px 22px 22px;display:grid;place-items:center;font-size:9px;font-weight:1000;color:#6e451f;letter-spacing:.08em;z-index:2}.dust{position:absolute;bottom:4px;left:0;color:#fff0b0;font-size:17px;opacity:0;white-space:nowrap}.runner-b .head{background:#edb27c}.runner-b .hair{height:20px;border-radius:55% 55% 20% 30%}.runner-b .sack{background:linear-gradient(90deg,#d9ab73,#ae7944,#d9ab73)}
@keyframes jumpArc{0%{transform:translateY(0) rotate(0)}35%{transform:translateY(-62px) rotate(-5deg)}60%{transform:translateY(-38px) rotate(5deg)}100%{transform:translateY(0) rotate(0)}}@keyframes dustBurst{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1.35) translateX(-10px)}100%{opacity:0;transform:scale(1.7) translateX(-22px)}}@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}75%{transform:rotate(-4deg)}}

.dual-questions{width:min(1160px,calc(100% - 16px));margin:14px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:14px}.question-card{width:100%;margin:0;border-radius:25px;padding:16px 18px 15px;border:3px solid rgba(255,255,255,.95)}.player-card{position:relative}.player-card-a{box-shadow:0 15px 32px rgba(215,25,32,.12)}.player-card-b{box-shadow:0 15px 32px rgba(23,105,224,.12)}.player-card-a:before,.player-card-b:before{content:"";position:absolute;inset:0 auto 0 0;width:10px;border-radius:25px 0 0 25px}.player-card-a:before{background:linear-gradient(var(--red2),var(--red))}.player-card-b:before{background:linear-gradient(#4b94ff,var(--blue))}.question-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.small-label{font-size:10px;font-weight:1000;color:#6b7280;letter-spacing:.1em}.question-player{font-weight:1000;font-size:16px}.question-player-a{color:var(--red)}.question-player-b{color:var(--blue)}.streak{background:#fff1bf;border:2px solid #ffdc65;border-radius:999px;padding:6px 11px;font-weight:1000;font-size:12px;white-space:nowrap}.question-text{text-align:center;font-size:clamp(34px,4vw,56px);font-weight:1000;letter-spacing:-.03em;margin:5px 0 10px}.answer-row{display:grid;grid-template-columns:1fr 140px;gap:10px}.answer-row input{min-width:0;border:3px solid #d9dee7;border-radius:15px;padding:12px 16px;text-align:center;font-size:25px;font-weight:1000;background:#fff}.player-card-a .answer-row input{border-color:#f1c2c6}.player-card-b .answer-row input{border-color:#bfd4ff}.answer-row input:disabled{background:#f1f3f6;color:#7b8394}.answer-btn{border:none;border-radius:15px;background:linear-gradient(#1c83ff,#1355b8);color:#fff;font-weight:1000;box-shadow:0 6px 0 #0a3c84}.player-card-a .answer-btn{background:linear-gradient(#ff4b58,#bd1821);box-shadow:0 6px 0 #7d0f16}.player-card-b .answer-btn{background:linear-gradient(#1c83ff,#1355b8);box-shadow:0 6px 0 #0a3c84}.answer-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #0a3c84}.player-card-a .answer-btn:active{box-shadow:0 2px 0 #7d0f16}.answer-btn:disabled,.keypad button:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}.keypad{display:none;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.keypad button{border:none;border-radius:11px;padding:11px;background:#edf1f6;font-weight:1000;box-shadow:inset 0 -2px rgba(0,0,0,.08)}.feedback{min-height:24px;text-align:center;margin-top:8px;font-weight:1000}.feedback.correct{color:#0c8f3d}.feedback.wrong{color:#d71920}

.overlay{position:fixed;z-index:100;inset:0;background:rgba(12,20,36,.68);backdrop-filter:blur(7px);display:none;place-items:center;padding:20px}.overlay.show{display:grid}.countdown-card{text-align:center;color:#fff}.countdown-number{font-size:min(32vw,220px);line-height:.8;font-weight:1000;text-shadow:0 12px 0 rgba(0,0,0,.25);animation:countPop .65s ease}.countdown-caption{font-weight:1000;letter-spacing:.18em;margin-top:30px;font-size:20px}.countdown-number.go{font-size:min(22vw,150px);color:#ffdf58}.countdown-number.pop{animation:countPop .65s ease}@keyframes countPop{0%{transform:scale(.25) rotate(-10deg);opacity:0}55%{transform:scale(1.2) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.winner-overlay{background:radial-gradient(circle at 50% 40%,rgba(31,109,255,.25),rgba(6,13,28,.82))}.winner-card{position:relative;z-index:3;text-align:center;width:min(620px,100%);border-radius:32px;padding:34px 24px;border:4px solid #fff}.winner-crown{font-size:60px;animation:bounce 1s ease-in-out infinite alternate}.winner-kicker{font-weight:1000;letter-spacing:.13em;color:#6b7280;font-size:11px}.winner-card h2{font-size:clamp(36px,8vw,68px);color:var(--red);margin:8px 0 0;line-height:1}.trophy{font-size:70px}.winner-card p{font-weight:800}.winner-buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.winner-buttons .primary-btn{margin-top:0}.winner-overlay canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}@keyframes bounce{to{transform:translateY(-9px) rotate(4deg)}}
.toast{position:fixed;z-index:120;left:50%;bottom:24px;transform:translate(-50%,20px);background:#111827;color:#fff;border-radius:999px;padding:10px 16px;font-weight:900;font-size:13px;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:700px){.topbar{height:64px}.screen{padding-top:64px}.school-tagline{display:none}.school-name{font-size:14px}.school-mark{width:40px;height:40px}.icon-btn{width:38px;height:38px}.start-screen{padding-top:82px}.hero-card{border-radius:24px;padding:22px 15px}.name-grid,.difficulty-grid,.dual-questions{grid-template-columns:1fr}.difficulty-card{padding:13px}.arena-header{font-size:12px}.game-screen{padding-top:76px}.track-panel{height:365px}.lane{height:161px;padding:10px 10px}.lane-divider{height:22px}.runner{width:76px;left:1%;bottom:7px}.character{height:112px}.head{width:47px;height:47px}.shirt{width:51px;height:36px}.sack{width:59px;height:51px}.finish-line{right:6%;width:30px}.crowd{font-size:27px}.dual-questions{margin-top:8px}.question-card{padding:12px}.question-text{margin:2px 0 7px;font-size:clamp(32px,11vw,48px)}.answer-row{grid-template-columns:1fr 110px}.answer-row input{padding:10px;font-size:22px}.keypad{display:grid}.streak{font-size:10px;padding:5px 8px}}
@media(max-height:760px) and (min-width:701px){.track-panel{height:350px}.lane{height:151px}.runner{bottom:4px}.character{height:112px;transform:scale(.9);transform-origin:bottom}.dual-questions{margin-top:8px}.question-card{padding:10px}.question-text{font-size:43px;margin:0}.answer-row input{padding:8px}.game-screen{padding-top:78px}}

/* ===== Compact dual-player answer panels ===== */
.player-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;padding-left:4px}.player-panel-head>div:first-child{display:flex;align-items:baseline;gap:7px}.compact-question-row{display:grid;grid-template-columns:minmax(145px,1fr) minmax(105px,145px) 92px;gap:8px;align-items:stretch}.compact-question-row .question-text{display:flex;align-items:center;justify-content:center;margin:0;min-width:0;border-radius:14px;background:rgba(255,255,255,.72);font-size:clamp(28px,2.7vw,43px);line-height:1;font-weight:1000;white-space:nowrap;padding:8px 6px}.answer-input{width:100%;min-width:0;border:3px solid #d9dee7;border-radius:14px;padding:9px 9px;text-align:center;font-size:24px;font-weight:1000;background:#fff}.player-card-a .answer-input{border-color:#efb8bd}.player-card-b .answer-input{border-color:#b8d0ff}.answer-input:disabled{background:#f1f3f6;color:#7b8394}.compact-question-row .answer-btn{min-height:50px;padding:7px 8px}.compact-keypad{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:8px}.compact-keypad button{min-width:0;border:none;border-radius:10px;padding:8px 4px;background:#edf1f6;font-size:17px;font-weight:1000;box-shadow:inset 0 -3px rgba(0,0,0,.09);touch-action:manipulation;user-select:none;-webkit-user-select:none}.player-card-a .compact-keypad button{background:#fff0f1}.player-card-b .compact-keypad button{background:#edf5ff}.player-card-a .compact-keypad .key-ok{background:#d71920;color:#fff}.player-card-b .compact-keypad .key-ok{background:#1769e0;color:#fff}.compact-keypad button:active{transform:translateY(2px);box-shadow:inset 0 -1px rgba(0,0,0,.08)}.question-card .feedback{min-height:20px;margin-top:5px;font-size:12px;line-height:1.15}.question-card{padding:11px 14px 8px}.dual-questions{margin-top:9px;gap:10px}

@media(max-width:900px) and (min-width:701px){.compact-question-row{grid-template-columns:minmax(125px,1fr) 110px 78px}.compact-question-row .question-text{font-size:29px}.answer-input{font-size:21px;padding:8px 5px}.compact-keypad button{font-size:15px;padding:7px 2px}.streak{font-size:10px;padding:4px 7px}}
@media(max-width:700px){.compact-question-row{grid-template-columns:minmax(135px,1fr) 115px 82px}.compact-question-row .question-text{font-size:clamp(27px,8vw,38px)}.answer-input{font-size:21px;padding:8px 5px}.compact-keypad{grid-template-columns:repeat(6,1fr)}.compact-keypad button{font-size:16px;padding:8px 2px}.player-panel-head{margin-bottom:6px}.question-card .feedback{font-size:11px}}
@media(max-width:430px){.compact-question-row{grid-template-columns:1fr 92px 70px;gap:5px}.compact-question-row .question-text{font-size:25px;padding:7px 3px}.answer-input{font-size:19px}.compact-question-row .answer-btn{font-size:12px;padding:5px}.compact-keypad{gap:4px}.compact-keypad button{font-size:15px;border-radius:8px}.streak{display:none}}

/* ===== Official MIN 1 Bangka logo + guaranteed dual keypad ===== */
.school-logo{width:50px;height:50px;object-fit:contain;display:block;filter:drop-shadow(0 5px 8px rgba(0,0,0,.15))}.hero-school{display:inline-flex;align-items:center;gap:9px;margin-bottom:10px;padding:6px 12px 6px 7px;border-radius:16px;background:rgba(255,255,255,.86);box-shadow:0 8px 20px rgba(0,0,0,.08)}.hero-school img{width:46px;height:46px;object-fit:contain}.hero-school span{font-size:12px;font-weight:1000;letter-spacing:.09em;color:#087b39}.music-note{display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:7px 11px;border-radius:999px;background:#edf9ee;color:#24783c;font-size:11px;font-weight:900}.compact-keypad{display:grid!important}.compact-keypad button{-webkit-tap-highlight-color:transparent}.answer-input[readonly]{caret-color:transparent;cursor:default}.player-card-a .compact-keypad button:hover{background:#ffe0e3}.player-card-b .compact-keypad button:hover{background:#dceaff}.player-card-a .compact-keypad .key-ok:hover{background:#b80f18}.player-card-b .compact-keypad .key-ok:hover{background:#1154b8}
@media(max-width:700px){.school-logo{width:42px;height:42px}.hero-school img{width:40px;height:40px}.hero-school span{font-size:11px}}