@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@600;700;800;900&display=swap');
:root{--ink:#14213d;--yellow:#ffc400;--green:#19c96b;--green-dark:#087c42;--purple:#9c4ff4;--purple-dark:#5320a3;--red:#ff405d;--cream:#fff7df;--sky:#dff6ff;--shadow:0 14px 30px rgba(12,32,61,.18)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#081526;font-family:'Nunito',system-ui,sans-serif;color:var(--ink)}
button{font:inherit;border:0;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:5px solid rgba(255,196,0,.72);outline-offset:3px}
.hidden{display:none!important}.screen{position:fixed;inset:0;min-height:100dvh;overflow:hidden}
.icon-btn{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(14,31,58,.84);color:white;font-size:24px;border:2px solid rgba(255,255,255,.75);box-shadow:0 6px 16px rgba(0,0,0,.2)}
.icon-btn.light{background:white;color:var(--ink)}
#splash{background:url('assets/cover.jpg') center/cover no-repeat;display:flex;align-items:flex-end;justify-content:center;padding:5vh 4vw}
#splash:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,17,31,.04) 20%,rgba(4,17,31,.22) 56%,rgba(4,17,31,.92) 100%)}
.splash-card{position:relative;text-align:center;color:#fff;max-width:950px;animation:rise .7s ease-out}
.splash-badge{display:inline-flex;gap:8px;align-items:center;background:var(--yellow);color:#522d00;font-weight:900;border-radius:999px;padding:8px 18px;box-shadow:0 6px 0 #c87d00;letter-spacing:.05em}
.splash-card h1{margin:16px 0 0;font-family:'Baloo 2',sans-serif;font-size:clamp(42px,7vw,92px);line-height:.88;text-shadow:0 6px 0 #7d220e,0 12px 24px rgba(0,0,0,.45);color:#fff}
.splash-card h1 span{color:#ffe63d}.splash-card p{font-size:clamp(16px,2vw,24px);font-weight:800;margin:14px auto 22px;max-width:760px;text-shadow:0 3px 8px #000}
.primary{background:linear-gradient(180deg,#2ae77f,#12a756);color:white;border-radius:22px;padding:17px 34px;font-size:clamp(20px,2.2vw,30px);font-weight:900;box-shadow:0 9px 0 #087c42,0 15px 24px rgba(0,0,0,.25);transition:.16s transform,.16s filter}
.primary:active{transform:translateY(6px);box-shadow:0 3px 0 #087c42}.footer{margin-top:24px;font-size:13px;opacity:.85}
@keyframes rise{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}

#setup{background:radial-gradient(circle at 20% 20%,#79f2cf,transparent 32%),radial-gradient(circle at 90% 10%,#66b8ff,transparent 35%),linear-gradient(135deg,#13b28b,#4851d8);padding:22px;display:grid;place-items:center}
.setup-panel{width:min(1100px,95vw);max-height:94vh;overflow:auto;background:rgba(255,255,255,.96);border-radius:34px;padding:28px 32px 34px;box-shadow:0 25px 80px rgba(0,0,0,.3);border:4px solid rgba(255,255,255,.7)}
.setup-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.setup-head h2{font-family:'Baloo 2';font-size:clamp(32px,4vw,54px);margin:0;color:#17315f;line-height:1}
.step{margin-top:24px}.step-title{font-size:18px;font-weight:900;color:#4b5f82;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}.choices{display:grid;gap:14px}.choices.two{grid-template-columns:repeat(2,1fr)}.choices.three{grid-template-columns:repeat(3,1fr)}.choices.four{grid-template-columns:repeat(4,1fr)}.choices.six{grid-template-columns:repeat(6,1fr)}
.choice{min-height:90px;padding:13px;border-radius:22px;border:4px solid #d9e4fa;background:#f7faff;color:#253866;font-size:clamp(18px,2vw,28px);font-weight:900;box-shadow:0 7px 0 #b5c4e2;transition:.15s}
.choice small{display:block;font-size:.58em;color:#607291}.choice:hover{transform:translateY(-2px)}.choice.selected{background:linear-gradient(180deg,#ffe64d,#ffb500);border-color:#fff0a0;color:#5a3100;box-shadow:0 7px 0 #c87900;transform:translateY(-2px)}
.setup-actions{display:flex;justify-content:center;margin-top:28px}.source-note{text-align:center;margin-top:14px;font-size:13px;color:#65728a;font-weight:700}

#game{background:linear-gradient(#bdeeff 0 54%,#78d952 54% 100%);display:flex;flex-direction:column}
.game-top{height:18vh;min-height:120px;display:grid;grid-template-columns:1fr minmax(250px,28vw) 1fr;border-bottom:7px solid #10172b;z-index:5}
.score-side{display:flex;align-items:center;justify-content:center;gap:18px;color:white;padding:10px;position:relative;overflow:hidden}.score-side.left{background:linear-gradient(120deg,#075a32,#12a85d)}.score-side.right{background:linear-gradient(240deg,#32105d,#7b31d2)}
.team-badge{display:flex;align-items:center;gap:12px;font-size:clamp(15px,1.8vw,25px);font-weight:900;z-index:2}.team-dot{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:white;color:#16325d;font-size:24px}.score{font-family:'Baloo 2';font-size:clamp(42px,5vw,74px);font-weight:800;line-height:.8;text-shadow:0 4px rgba(0,0,0,.2)}
.center-top{background:#111b30;color:white;border:5px solid var(--yellow);border-top:0;border-radius:0 0 34px 34px;display:grid;place-items:center;text-align:center;padding:5px 10px;z-index:4;box-shadow:0 10px 20px rgba(0,0,0,.18)}
.center-top small{display:block;color:var(--yellow);font-weight:900;letter-spacing:.12em}.timer{font-family:'Baloo 2';font-size:clamp(34px,4.6vw,62px);font-weight:800;letter-spacing:.07em;line-height:1}.meta{font-size:12px;font-weight:800;opacity:.85}
.top-controls{position:absolute;top:12px;right:12px;display:flex;gap:8px;z-index:20}.home-control{position:absolute;top:12px;left:12px;z-index:20}
.arena{height:42vh;min-height:280px;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.16)),repeating-linear-gradient(90deg,transparent 0 11%,rgba(255,255,255,.28) 11% 11.5%)}
.arena:before{content:'';position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(#83df59,#54b93d);clip-path:polygon(0 28%,12% 13%,25% 30%,38% 10%,52% 27%,68% 8%,82% 25%,100% 10%,100% 100%,0 100%)}
.center-line{position:absolute;left:50%;top:4%;bottom:4%;border-left:5px dashed rgba(255,65,65,.72);z-index:1}.finish-left,.finish-right{position:absolute;top:3%;bottom:3%;border-left:5px dashed rgba(14,147,76,.45)}.finish-left{left:15%}.finish-right{right:15%}
.rope-wrap{position:absolute;left:11%;right:11%;top:43%;height:66px;z-index:3;transition:transform .45s cubic-bezier(.22,1.5,.5,1)}.rope{position:absolute;left:8%;right:8%;top:22px;height:28px;border-radius:18px;background:repeating-linear-gradient(135deg,#7d4218 0 12px,#bd7332 12px 24px);border:5px solid #542b11;box-shadow:0 8px 10px rgba(0,0,0,.25)}.rope:before,.rope:after{content:'';position:absolute;top:-12px;width:35px;height:43px;background:#784216;border:5px solid #542b11;border-radius:8px}.rope:before{left:-24px}.rope:after{right:-24px}.flag{position:absolute;left:50%;top:-13px;width:5px;height:66px;background:#653210}.flag:after{content:'';position:absolute;left:5px;top:0;border-top:17px solid transparent;border-bottom:17px solid transparent;border-left:42px solid #ff3154}
.team-characters{position:absolute;top:7%;bottom:1%;width:25%;z-index:4;display:flex;align-items:flex-end;justify-content:center;gap:2%;transition:transform .45s cubic-bezier(.22,1.4,.5,1)}.team-characters.left{left:5%}.team-characters.right{right:5%;flex-direction:row-reverse}.character-card{height:92%;max-height:330px;aspect-ratio:.76;border-radius:46% 46% 24% 24%;background-image:url('assets/character.jpg');background-position:50% 48%;background-size:cover;border:7px solid white;box-shadow:0 16px 22px rgba(0,0,0,.26);position:relative;overflow:hidden}.right .character-card{transform:scaleX(-1)}.character-card.second{height:76%;margin-left:-20%;filter:saturate(.92)}
.pull-bubble{position:absolute;top:7%;left:50%;transform:translateX(-50%) scale(0);z-index:10;background:white;border:4px solid #14213d;border-radius:22px;padding:8px 16px;font-family:'Baloo 2';font-size:26px;font-weight:800;box-shadow:var(--shadow);transition:.18s}.pull-bubble.show{transform:translateX(-50%) scale(1)}

.answer-zone{height:40vh;min-height:285px;background:#081526;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:14px;z-index:8}.player-panel{border-radius:24px;padding:12px;display:grid;grid-template-rows:auto 1fr;gap:10px;border:4px solid rgba(255,255,255,.13);min-width:0}.player-panel.left{background:#083d28}.player-panel.right{background:#2b1353}
.question-card{background:white;border-radius:18px;padding:7px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:0 5px 0 rgba(0,0,0,.16)}.question-label{font-size:12px;font-weight:900;color:#75809a;letter-spacing:.08em}.question{font-family:'Baloo 2';font-size:clamp(21px,3vw,42px);font-weight:800;line-height:1;text-align:center;flex:1;color:#14213d}.streak{font-size:14px;font-weight:900;white-space:nowrap}.answers{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;min-height:0}.answer{border-radius:18px;color:white;font-family:'Baloo 2';font-size:clamp(22px,3vw,45px);font-weight:800;line-height:1;padding:8px;min-height:72px;box-shadow:inset 0 -9px rgba(0,0,0,.18),0 5px 0 rgba(0,0,0,.26);transition:.12s transform,.12s filter;overflow-wrap:anywhere}.left .answer{background:#1fc76a}.right .answer{background:#9d4ef1}.answer:active{transform:translateY(5px);box-shadow:inset 0 -4px rgba(0,0,0,.15),0 1px 0 rgba(0,0,0,.2)}.answer.correct{background:#ffd229!important;color:#533500!important;transform:scale(1.04)}.answer.wrong{background:#ff405d!important;animation:shake .35s}.answer:disabled{cursor:not-allowed}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}
.arena.tug-left{animation:tugleft .42s}.arena.tug-right{animation:tugright .42s}@keyframes tugleft{50%{filter:brightness(1.12);transform:translateX(-5px)}}@keyframes tugright{50%{filter:brightness(1.12);transform:translateX(5px)}}
.spark{position:fixed;z-index:100;pointer-events:none;font-size:32px;animation:spark .85s forwards}@keyframes spark{to{transform:translate(var(--x),var(--y)) rotate(540deg) scale(.2);opacity:0}}

.modal{position:fixed;inset:0;background:rgba(8,18,34,.82);display:grid;place-items:center;z-index:100;padding:18px}.modal-card{width:min(680px,94vw);background:white;border-radius:30px;padding:28px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.4);border:5px solid #eaf1ff}.modal-card h2{font-family:'Baloo 2';font-size:clamp(35px,5vw,60px);margin:0;color:#19325d;line-height:1}.modal-card p{font-size:18px;font-weight:700;color:#52617a}.howto{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.howto div{background:#f1f6ff;border-radius:18px;padding:14px;font-weight:900}.howto b{display:block;font-size:28px}.modal-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.secondary{background:#edf2fc;color:#263e69;border-radius:18px;padding:14px 25px;font-weight:900;box-shadow:0 6px 0 #b9c7e2}.winner-art{font-size:70px;animation:bounce 1s infinite alternate}@keyframes bounce{to{transform:translateY(-10px) rotate(4deg)}}
.toast{position:fixed;left:50%;top:22%;transform:translate(-50%,-30px);opacity:0;z-index:60;padding:12px 22px;border-radius:999px;background:#17243f;color:white;font-weight:900;font-size:20px;box-shadow:var(--shadow);transition:.25s}.toast.show{transform:translate(-50%,0);opacity:1}
.orientation{display:none}
@media(max-width:850px){.choices.six{grid-template-columns:repeat(3,1fr)}.setup-panel{padding:20px}.game-top{height:17vh}.answer-zone{height:43vh}.arena{height:40vh}.team-characters{width:29%}.question-card{padding:5px 8px}}
@media(max-height:650px){.game-top{height:16vh;min-height:90px}.arena{height:38vh;min-height:220px}.answer-zone{height:46vh;min-height:250px}.character-card{max-height:250px}.answer{min-height:58px}.question{font-size:clamp(20px,3vw,34px)}}
@media(orientation:portrait){.orientation{display:grid;position:fixed;inset:0;background:#12233e;color:white;z-index:9999;place-items:center;text-align:center;padding:40px}.orientation div{max-width:500px}.orientation b{display:block;font-size:58px;margin-bottom:12px}.orientation h2{font-family:'Baloo 2';font-size:38px;margin:0}.orientation p{font-size:18px;font-weight:700}}
/* ===== Visual Upgrade V2: Festival Olahraga Matematika ===== */
#setup:before{content:'';position:absolute;inset:0;background:url('assets/cover.jpg') center/cover no-repeat;opacity:.14;filter:saturate(1.2) blur(1px);transform:scale(1.03)}
#setup:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(255,255,255,.42),transparent 35%),linear-gradient(135deg,rgba(2,134,102,.92),rgba(59,54,180,.94));z-index:0}
.setup-panel{position:relative;z-index:1;width:min(1240px,96vw);border:6px solid rgba(255,255,255,.9);background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(242,248,255,.96));box-shadow:0 28px 90px rgba(2,14,42,.42),inset 0 0 0 2px rgba(27,74,137,.08)}
.setup-panel:before,.setup-panel:after{content:'';position:absolute;top:-14px;width:96px;height:32px;background:repeating-linear-gradient(90deg,#ff405d 0 24px,#fff 24px 48px,#2a7fff 48px 72px,#fff 72px 96px);border-radius:7px;box-shadow:0 6px 10px rgba(0,0,0,.16)}
.setup-panel:before{left:8%}.setup-panel:after{right:8%}
.setup-head{padding:4px 4px 14px;border-bottom:3px dashed #cbd8ee}.setup-head h2{letter-spacing:.02em;text-shadow:0 3px 0 #fff}
.setup-hero{margin:18px 0 6px;display:grid;grid-template-columns:108px 1fr auto;align-items:center;gap:18px;background:linear-gradient(100deg,#102a56,#244f91 56%,#162c58);border-radius:24px;padding:12px 18px;color:white;box-shadow:0 9px 0 #091c3d,0 16px 28px rgba(9,28,61,.22);overflow:hidden;position:relative}
.setup-hero:after{content:'⚑  ⚐  ⚑  ⚐  ⚑';position:absolute;right:20px;top:5px;color:rgba(255,255,255,.12);font-size:42px;letter-spacing:8px;white-space:nowrap}
.mascot-mini{width:90px;height:90px;border-radius:24px;background:url('assets/character.jpg') 50% 23%/155% auto no-repeat;border:5px solid #fff;box-shadow:0 5px 0 #ffc400;position:relative;z-index:1}
.setup-hero-copy{position:relative;z-index:1}.setup-kicker{font-weight:900;color:#ffd229;letter-spacing:.14em;font-size:13px}.setup-hero h3{font-family:'Baloo 2';font-size:clamp(24px,3vw,40px);line-height:1;margin:2px 0}.setup-hero p{margin:0;font-weight:700;opacity:.86}
.setup-summary{position:relative;z-index:1;min-width:220px;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.28);border-radius:18px;padding:11px 14px;text-align:center;font-weight:900;backdrop-filter:blur(4px)}.setup-summary small{display:block;color:#ffd229;letter-spacing:.1em;margin-bottom:3px}
.step{background:#fff;border:3px solid #e0e9f9;border-radius:24px;padding:16px 18px 20px;box-shadow:0 8px 18px rgba(22,53,99,.08);margin-top:16px}.step-title{display:flex;align-items:center;gap:10px;margin-bottom:13px;color:#2f4772}.step-title:before{content:attr(data-step);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#244f91;color:#fff;box-shadow:0 4px 0 #102a56;font-size:15px}
.choice{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,#edf4ff);border-color:#d8e5fa;box-shadow:0 7px 0 #b7c7e5,0 10px 18px rgba(20,49,93,.08)}.choice:before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 0 42%,rgba(255,255,255,.78) 50%,transparent 58%);transform:translateX(-120%);transition:.45s}.choice:hover:before{transform:translateX(120%)}
.choice.selected{background:linear-gradient(180deg,#ffe85a,#ffb213);border-color:#fff4a7;box-shadow:0 7px 0 #bd7000,0 12px 22px rgba(237,154,0,.25)}
.choice.op-choice{min-height:105px;display:grid;grid-template-columns:58px 1fr;align-items:center;text-align:left;column-gap:9px}.op-symbol{grid-row:1/3;width:54px;height:54px;border-radius:17px;display:grid;place-items:center;font-family:'Baloo 2';font-size:36px;background:#17315f;color:white;box-shadow:0 5px 0 #091c3d}.op-title{font-size:clamp(16px,1.55vw,22px);line-height:1}.op-desc{font-size:11px;color:#647594;line-height:1.1}.choice.selected .op-symbol{background:#fff;color:#8b4c00;box-shadow:0 5px 0 #e39a00}.choice.selected .op-desc{color:#694000}
.primary{position:relative;overflow:hidden;min-width:280px}.primary:before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.62) 50%,transparent 65%);transform:translateX(-140%);animation:shine 2.8s infinite}@keyframes shine{55%,100%{transform:translateX(140%)}}
.source-note{display:inline-flex;align-items:center;justify-content:center;width:100%;gap:7px}.source-note:before{content:'✓';width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#19c96b;color:white}

#game{background:#0a1830}.game-top{height:17vh;background:#10182d;border-bottom:7px solid #ffc400;box-shadow:0 8px 18px rgba(0,0,0,.3)}
.score-side:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 20px,rgba(255,255,255,.055) 20px 40px)}.score-side.left{background:linear-gradient(120deg,#064829,#0da85a)}.score-side.right{background:linear-gradient(240deg,#321052,#8a35d5)}
.team-badge{background:rgba(3,17,34,.25);border:2px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 13px}.team-dot{box-shadow:0 5px 0 rgba(0,0,0,.22)}.score{min-width:70px;text-align:center;color:#ffe43b}
.power-pips{display:flex;gap:5px;position:relative;z-index:2}.power-pips i{width:14px;height:28px;border-radius:6px;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.38);transform:skew(-8deg);transition:.24s}.power-pips i.on{background:#ffe43b;border-color:#fff3a1;box-shadow:0 0 14px #ffe43b}
.center-top{border-width:0 5px 5px;background:linear-gradient(180deg,#1e2d4d,#0b1528);min-width:270px}.timer{color:white;text-shadow:0 4px 0 #000}.meta{background:rgba(255,255,255,.1);border-radius:999px;padding:3px 9px;margin-top:3px}.mini-rope-meter{display:grid;grid-template-columns:28px 1fr 28px;align-items:center;gap:4px;margin-top:5px}.mini-track{height:12px;border-radius:999px;background:linear-gradient(90deg,#1fc76a 0 48%,#fff 48% 52%,#9d4ef1 52%);border:2px solid rgba(255,255,255,.62);position:relative}.mini-track i{position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;background:#ffd229;border:3px solid white;transform:translate(-50%,-50%);box-shadow:0 3px 8px rgba(0,0,0,.35);transition:left .45s cubic-bezier(.22,1.4,.5,1)}
.arena{height:43vh;background:linear-gradient(180deg,#9be1ff 0 48%,#e7faff 48% 53%,#6fce45 53% 100%);border-bottom:5px solid #092237}.arena:after{content:'';position:absolute;left:0;right:0;top:0;height:54%;background:linear-gradient(180deg,rgba(255,255,255,.38),transparent),radial-gradient(circle at 20% 22%,#fff 0 5%,transparent 5.5%),radial-gradient(circle at 76% 18%,#fff 0 7%,transparent 7.5%);opacity:.75}
.festival-banner{position:absolute;left:50%;top:5%;transform:translateX(-50%);z-index:2;background:#fff;border:4px solid #ff405d;border-radius:14px;padding:5px 22px;font-family:'Baloo 2';font-size:clamp(15px,1.6vw,23px);font-weight:800;color:#152b55;box-shadow:0 6px 0 #b52339;white-space:nowrap}.festival-banner:before,.festival-banner:after{content:'🚩';position:absolute;top:-2px}.festival-banner:before{left:-38px}.festival-banner:after{right:-38px}
.crowd{position:absolute;left:0;right:0;bottom:35%;height:30%;z-index:1;opacity:.36;background:repeating-linear-gradient(90deg,transparent 0 4%,rgba(19,62,104,.25) 4% 5%);clip-path:polygon(0 58%,3% 32%,6% 56%,9% 24%,12% 57%,15% 34%,18% 62%,21% 30%,24% 58%,27% 18%,30% 60%,33% 31%,36% 57%,39% 21%,42% 60%,45% 35%,48% 58%,51% 24%,54% 59%,57% 31%,60% 62%,63% 20%,66% 60%,69% 29%,72% 58%,75% 18%,78% 61%,81% 34%,84% 59%,87% 24%,90% 60%,93% 31%,96% 58%,100% 25%,100% 100%,0 100%);background-color:#2e668f}
.center-line{z-index:2;border-left:5px dashed rgba(255,65,65,.85)}.finish-left,.finish-right{z-index:2;border-left:5px dashed rgba(255,255,255,.72)}
.rope-wrap{top:48%;z-index:6}.rope{height:31px;background:repeating-linear-gradient(135deg,#66320f 0 11px,#c67b35 11px 22px,#f0b15f 22px 27px);border-color:#47210b;box-shadow:0 8px 0 rgba(80,35,9,.22),0 15px 18px rgba(0,0,0,.24)}.flag:after{border-left-color:#ff304f;filter:drop-shadow(0 4px 2px rgba(0,0,0,.25))}
.team-characters{top:10%;bottom:0;width:27%;z-index:7}.character-card{border-radius:36px 36px 18px 18px;border:7px solid white;background-position:50% 45%;box-shadow:0 0 0 6px #19c96b,0 18px 24px rgba(0,0,0,.28)}.right .character-card{box-shadow:0 0 0 6px #9d4ef1,0 18px 24px rgba(0,0,0,.28)}.character-card:after{content:'AYO!';position:absolute;left:50%;bottom:7px;transform:translateX(-50%);background:#ff405d;color:white;border:3px solid white;border-radius:999px;padding:3px 14px;font-weight:900;box-shadow:0 4px 0 #a71c35}.right .character-card:after{transform:translateX(-50%) scaleX(-1)}
.pull-bubble{top:19%;border-color:#ff405d;background:#fff8c7;color:#182a4d;z-index:12}

.answer-zone{height:40vh;background:linear-gradient(180deg,#071321,#0a1e34);padding:10px 12px 13px}.player-panel{border-radius:26px;border-width:4px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}.player-panel.left{background:linear-gradient(145deg,#073a26,#096340)}.player-panel.right{background:linear-gradient(215deg,#281144,#4a1c79)}
.question-card{min-height:66px;border:4px solid #e7effb;box-shadow:0 7px 0 rgba(0,0,0,.2);background:linear-gradient(180deg,#fff,#f2f7ff)}.question-label{display:flex;align-items:center;gap:7px}.question-label:before{content:'?';width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#17315f;color:white;font-family:'Baloo 2';font-size:20px}.question{letter-spacing:.01em}.streak{background:#fff1b8;color:#7b4b00;border-radius:999px;padding:5px 9px}
.answer{position:relative;border:3px solid rgba(255,255,255,.2);min-height:70px;overflow:hidden}.answer:before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.28),transparent 45%)}.answer:hover{filter:brightness(1.12);transform:translateY(-2px)}.left .answer{background:linear-gradient(180deg,#2bdd7e,#10a959)}.right .answer{background:linear-gradient(180deg,#b966ff,#8532d8)}
.modal-card{border:7px solid #fff;box-shadow:0 0 0 7px #ffc400,0 35px 90px rgba(0,0,0,.48);background:linear-gradient(180deg,#fff,#f2f7ff)}.winner-art{filter:drop-shadow(0 6px 0 rgba(0,0,0,.12))}

@media(max-width:1050px){.setup-hero{grid-template-columns:82px 1fr}.mascot-mini{width:72px;height:72px}.setup-summary{grid-column:1/-1;display:flex;gap:8px;justify-content:center}.choices.four{grid-template-columns:repeat(2,1fr)}.power-pips i{width:10px;height:23px}.team-characters{width:30%}}
@media(max-height:720px){.setup-panel{padding:18px 24px 22px}.setup-hero{margin:10px 0 4px;padding:8px 15px}.mascot-mini{width:62px;height:62px}.step{margin-top:10px;padding:10px 14px 14px}.choice{min-height:70px}.choice.op-choice{min-height:78px}.op-symbol{width:45px;height:45px;font-size:30px}.setup-actions{margin-top:15px}.source-note{margin-top:9px}.festival-banner{top:2%}.character-card{max-height:285px}}

/* V2.1 usability fixes */
.splash-card h1,.setup-head h2,.setup-hero h3,.center-top,.timer,.score,.question,.answer,.modal-card h2,.winner-art,.festival-banner{font-family:'Trebuchet MS','Arial Rounded MT Bold',system-ui,sans-serif}
.setup-actions{position:sticky;bottom:-1px;z-index:20;margin:16px -8px -8px;padding:12px 8px 7px;background:linear-gradient(180deg,rgba(245,249,255,0),rgba(245,249,255,.97) 28%,rgba(245,249,255,1));border-radius:0 0 22px 22px}



/* ===== V3: Karakter transparan dan soundtrack baru ===== */
.soundtrack-label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:16px;
  padding:8px 15px;
  border:2px solid rgba(255,255,255,.55);
  border-radius:999px;
  background:rgba(7,21,38,.62);
  color:#fff7bf;
  font-size:clamp(12px,1.2vw,16px);
  font-weight:800;
  box-shadow:0 7px 18px rgba(0,0,0,.25);
  backdrop-filter:blur(6px);
}
.soundtrack-label strong{color:#fff}
.sound-toggle.music-playing{
  box-shadow:0 0 0 3px rgba(255,196,0,.45),0 6px 16px rgba(0,0,0,.25);
  animation:musicPulse 1.8s ease-in-out infinite;
}
@keyframes musicPulse{
  50%{transform:scale(1.06);filter:brightness(1.18)}
}

/* Supplied transparent tug-of-war character */
.team-characters{
  top:2%;
  bottom:0;
  width:38%;
  display:block;
  overflow:visible;
  pointer-events:none;
}
.team-characters.left{left:1.5%}
.team-characters.right{right:1.5%}
.character-card{
  position:absolute;
  left:0;
  bottom:0;
  z-index:2;
  height:100%;
  max-height:390px;
  aspect-ratio:1.35;
  border:0;
  border-radius:0;
  overflow:visible;
  background-image:url('assets/character.png');
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:contain;
  box-shadow:none;
  filter:drop-shadow(0 16px 10px rgba(0,0,0,.28));
  transform-origin:center bottom;
  animation:characterReady 2.3s ease-in-out infinite;
}
.team-characters.right .character-card{
  left:auto;
  right:0;
  transform:scaleX(-1);
}
.character-card.second{
  left:19%;
  bottom:-1%;
  z-index:1;
  height:79%;
  margin:0;
  opacity:.92;
  filter:drop-shadow(0 12px 8px rgba(0,0,0,.24)) saturate(.9);
  animation-delay:-1.15s;
}
.team-characters.right .character-card.second{
  left:auto;
  right:19%;
  transform:scaleX(-1);
}
.character-card:after{display:none!important}
@keyframes characterReady{
  0%,100%{translate:0 0}
  50%{translate:0 -4px}
}

/* Align the supplied character's rope with the game rope. */
.rope-wrap{top:48%}
.rope{
  height:29px;
  box-shadow:0 8px 0 rgba(80,35,9,.22),0 15px 18px rgba(0,0,0,.24),0 0 0 3px rgba(255,255,255,.13);
}
.mascot-mini{
  width:150px;
  height:94px;
  border-radius:20px;
  background-image:url('assets/character.png');
  background-position:center bottom;
  background-size:contain;
  background-repeat:no-repeat;
  background-color:#dff6ff;
  border:4px solid #fff;
  box-shadow:0 5px 0 #ffc400,0 12px 20px rgba(0,0,0,.22);
}
.setup-hero{grid-template-columns:165px 1fr auto}
.setup-hero:before{
  content:'';
  position:absolute;
  inset:auto auto -45px 12px;
  width:190px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,210,41,.38),transparent 68%);
}

/* Music indicator in the setup banner. */
.setup-kicker:after{
  content:'  •  🎵 MENULIS MEMBACA BERHITUNG';
  color:#9eefff;
  letter-spacing:.05em;
}

@media(max-width:1050px){
  .setup-hero{grid-template-columns:120px 1fr}
  .mascot-mini{width:112px;height:76px}
  .team-characters{width:42%}
}
@media(max-height:720px){
  .mascot-mini{width:96px;height:64px}
  .setup-hero{grid-template-columns:105px 1fr auto}
  .character-card{max-height:300px}
}


/* ===== V4: Arena lebih bersih, tanpa kotak warna, tali benar-benar menyambung ===== */

/* Hapus seluruh bingkai/outline lama pada karakter, termasuk kotak ungu tim kanan. */
#arena .team-characters,
#arena .team-characters.left,
#arena .team-characters.right,
#arena .team-characters .character-card,
#arena .team-characters.left .character-card,
#arena .team-characters.right .character-card,
#arena .right .character-card {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Karakter memenuhi tinggi arena agar posisi tangan dan tali stabil di semua resolusi IFP. */
#arena .team-characters {
  top: 1.5% !important;
  bottom: 0 !important;
  width: 32% !important;
  overflow: visible !important;
  z-index: 8 !important;
}
#arena .team-characters.left {
  left: 0 !important;
}
#arena .team-characters.right {
  right: 0 !important;
}
#arena .team-characters .character-card {
  height: 100% !important;
  max-height: none !important;
  width: auto !important;
  aspect-ratio: 1.333 / 1 !important;
  background-size: contain !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  filter: drop-shadow(0 15px 9px rgba(0,0,0,.26)) !important;
}
#arena .team-characters.right .character-card {
  transform: scaleX(-1) !important;
}
#arena .team-characters .character-card.second {
  height: 78% !important;
  bottom: 0 !important;
  opacity: .92 !important;
  filter: drop-shadow(0 12px 8px rgba(0,0,0,.23)) saturate(.92) !important;
}
#arena .team-characters.left .character-card.second {
  left: 17% !important;
}
#arena .team-characters.right .character-card.second {
  right: 17% !important;
  left: auto !important;
}

/* Tali utama memakai tekstur tambang, bukan balok kayu. Dibuat overlap dengan tali pada gambar karakter. */
#arena .rope-wrap {
  left: 18% !important;
  right: 18% !important;
  top: 45.8% !important;
  height: 42px !important;
  z-index: 7 !important;
  overflow: visible !important;
}
#arena .rope {
  left: 0 !important;
  right: 0 !important;
  top: 8px !important;
  height: 24px !important;
  border: 3px solid #4a2915 !important;
  border-radius: 999px !important;
  background:
    repeating-linear-gradient(
      154deg,
      #5c321a 0 7px,
      #9a5c30 7px 14px,
      #d89d58 14px 20px,
      #7a4322 20px 27px
    ) !important;
  box-shadow:
    inset 0 4px 4px rgba(255,231,181,.26),
    inset 0 -5px 4px rgba(52,22,7,.35),
    0 7px 7px rgba(0,0,0,.24) !important;
}
#arena .rope::before,
#arena .rope::after {
  display: none !important;
}

/* Serat silang tipis agar tali terlihat lebih hidup dan menyatu dengan ilustrasi. */
#arena .rope {
  background-blend-mode: multiply;
}
#arena .rope .flag {
  top: -19px !important;
  height: 68px !important;
  width: 5px !important;
  z-index: 3 !important;
}
#arena .rope .flag::after {
  top: 1px !important;
}

/* Pastikan elemen arena tidak membentuk kotak visual di sekitar tim. */
#arena .team-characters::before,
#arena .team-characters::after,
#arena .character-card::before,
#arena .character-card::after {
  display: none !important;
}

/* Sedikit penyempurnaan panggung agar fokus ke karakter dan tali. */
#arena {
  overflow: hidden !important;
}
#arena .festival-banner {
  z-index: 12 !important;
  box-shadow: 0 5px 0 #b52339, 0 12px 20px rgba(0,0,0,.16) !important;
}
#arena .center-line,
#arena .finish-left,
#arena .finish-right {
  z-index: 3 !important;
}
#arena .crowd {
  opacity: .5 !important;
}

/* Penyesuaian layar lebar IFP dan layar pendek. */
@media (min-width: 1500px) {
  #arena .team-characters { width: 31% !important; }
  #arena .rope-wrap { left: 19% !important; right: 19% !important; }
}
@media (max-width: 1050px) {
  #arena .team-characters { width: 35% !important; }
  #arena .rope-wrap { left: 16% !important; right: 16% !important; }
}
@media (max-height: 720px) {
  #arena .team-characters .character-card {
    max-height: none !important;
  }
  #arena .rope-wrap {
    top: 45.5% !important;
  }
}


/* ===== V4.1: Tekstur tali asli dari ilustrasi karakter ===== */
#arena .rope-wrap {
  left: 14% !important;
  right: 14% !important;
  top: 43.6% !important;
}
#arena .rope {
  top: 8px !important;
  height: 23px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-image: url('assets/rope-texture.png') !important;
  background-repeat: repeat-x !important;
  background-position: center center !important;
  background-size: auto 100% !important;
  background-color: transparent !important;
  box-shadow: 0 6px 6px rgba(0,0,0,.19) !important;
}
#arena .rope::before,
#arena .rope::after {
  content: none !important;
  display: none !important;
}
#arena .rope .flag {
  top: -20px !important;
}

/* Overlap tali utama dengan tali di gambar karakter supaya sambungan tidak terlihat terputus. */
@media (min-width: 1500px) {
  #arena .rope-wrap {
    left: 13.5% !important;
    right: 13.5% !important;
    top: 43.6% !important;
  }
}
@media (max-width: 1050px) {
  #arena .rope-wrap {
    left: 11.5% !important;
    right: 11.5% !important;
    top: 43.4% !important;
  }
}
@media (max-height: 720px) {
  #arena .rope-wrap {
    top: 43.6% !important;
  }
}


/* ===== V4.2: Satu gambar tali panjang, tanpa sambungan berulang ===== */
#arena .rope {
  background-image: url('assets/rope-long.png') !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
}