:root{
  --ink:#3a210d;
  --cream:#fff7df;
  --blue:#0751a8;
  --blue-dark:#073574;
  --red:#b0062c;
  --red-dark:#75001d;
  --gold:#f4b62f;
  --offset:0px;
}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#1687c7;overflow-x:hidden}
button,select{font:inherit}
button{touch-action:manipulation}
.hidden{display:none!important}
.app{position:relative;min-height:100vh;background:url('../assets/background.webp') center/cover fixed no-repeat;isolation:isolate}
.app:before{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(74,35,3,.10));pointer-events:none;z-index:-1}
.topbar{position:fixed;right:12px;top:12px;z-index:80;display:flex;gap:8px}
.round-btn{width:44px;height:44px;border-radius:14px;border:2px solid rgba(91,45,12,.28);background:rgba(255,250,235,.92);box-shadow:0 5px 13px rgba(47,24,4,.20);cursor:pointer;font-size:20px;transition:.18s transform,.18s background}
.round-btn:hover{transform:translateY(-2px);background:#fff}
.round-btn.is-off{filter:grayscale(1);opacity:.62}
.game-shell{min-height:100vh;padding:10px clamp(10px,2vw,30px) 12px;display:flex;flex-direction:column;align-items:center}
.game-title{width:min(620px,50vw);max-height:154px;object-fit:contain;filter:drop-shadow(0 6px 5px rgba(63,29,4,.28));margin:0 auto -2px;z-index:3}
.game-grid{width:min(1580px,100%);display:grid;grid-template-columns:clamp(260px,21vw,330px) minmax(420px,1fr) clamp(260px,21vw,330px);gap:clamp(10px,1.25vw,20px);align-items:center;flex:1}
.player-panel{align-self:center;min-height:470px;border-radius:27px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,247,240,.97));box-shadow:0 12px 28px rgba(53,28,7,.24),inset 0 0 0 4px rgba(255,255,255,.86);overflow:hidden;border:5px solid;display:flex;flex-direction:column;transition:.2s transform,.2s filter,.2s box-shadow}
.player-panel--musa{border-color:var(--blue);box-shadow:0 12px 28px rgba(4,45,115,.28),inset 0 0 0 3px #fff}
.player-panel--aksara{border-color:var(--red);box-shadow:0 12px 28px rgba(117,0,29,.28),inset 0 0 0 3px #fff}
.panel-header{min-height:78px;display:flex;align-items:center;justify-content:space-between;padding:13px 16px;color:#fff;gap:8px}
.player-panel--musa .panel-header{background:linear-gradient(180deg,#0864c9,#063f8b)}
.player-panel--aksara .panel-header{background:linear-gradient(180deg,#c00a35,#8d0024)}
.player-badge{font-weight:1000;font-size:24px;letter-spacing:.8px;text-shadow:0 2px 2px rgba(0,0,0,.28)}
.category-badge{font-size:11px;font-weight:900;border:1px solid rgba(255,255,255,.48);background:rgba(255,255,255,.15);padding:6px 8px;border-radius:999px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.question-text{font-size:clamp(16px,1.25vw,21px);line-height:1.28;margin:0;padding:15px 14px 10px;min-height:108px;display:flex;align-items:center;justify-content:center;text-align:center;color:#29180b;overflow-wrap:break-word;word-break:normal;hyphens:none}
.answer-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(74px,auto);gap:9px;padding:7px 12px 13px;flex:1;align-content:start}
.answer-btn{position:relative;min-height:74px;border:2px solid #d6c4ad;border-radius:15px;background:linear-gradient(180deg,#fff,#f0ede8);display:grid;grid-template-columns:34px minmax(0,1fr);gap:7px;align-items:center;text-align:left;padding:9px;cursor:pointer;font-size:12.2px;font-weight:750;color:#2a1a0e;box-shadow:0 4px 0 #c7b39a;transition:.12s transform,.15s background,.15s border-color,.15s filter;overflow-wrap:normal;word-break:normal;hyphens:none}
.answer-btn:hover{transform:translateY(-2px);filter:brightness(1.02)}
.answer-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #c7b39a}
.answer-btn:disabled{cursor:not-allowed}
.answer-letter{width:32px;height:32px;border-radius:10px;background:#e7e0d6;display:grid;place-items:center;font-size:17px;font-weight:1000}
.player-panel--musa .answer-btn:hover{border-color:#2d77c3}.player-panel--aksara .answer-btn:hover{border-color:#cf3659}
.answer-btn.correct{background:#dff8e5;border-color:#28a34e;box-shadow:0 4px 0 #13843a}.answer-btn.wrong{background:#ffe0df;border-color:#e44343;box-shadow:0 4px 0 #bc2929}
.panel-footer{display:flex;justify-content:space-between;padding:12px 16px;background:#f2eadc;border-top:1px solid #dfd0ba;font-size:13px}.panel-footer b{font-size:17px}.side-label{opacity:.67}
.player-panel.flash-correct{animation:panelCorrect .56s ease}.player-panel.flash-wrong{animation:panelWrong .48s ease}
@keyframes panelCorrect{50%{transform:scale(1.025);filter:brightness(1.12)}}
@keyframes panelWrong{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.arena-wrap{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.arena{position:relative;width:100%;height:500px;overflow:hidden;border-radius:25px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);isolation:isolate}
.arena:after{content:"";position:absolute;left:0;right:0;bottom:0;height:18%;background:linear-gradient(180deg,transparent,rgba(87,44,7,.10));pointer-events:none}
.center-line{position:absolute;left:50%;top:19%;bottom:11%;border-left:4px dashed rgba(214,51,40,.8);transform:translateX(-50%);z-index:7;filter:drop-shadow(0 1px #fff)}
.win-gate{position:absolute;top:16%;bottom:13%;width:2px;background:rgba(255,255,255,.35);z-index:2}.win-gate:before{content:"";position:absolute;inset:0 -5px;border-left:2px dashed rgba(111,58,19,.30)}.win-gate span{position:absolute;top:0;writing-mode:vertical-rl;font-size:10px;font-weight:900;opacity:.46;color:#52290a;letter-spacing:.6px}
.win-gate--left{left:23%}.win-gate--left span{left:-18px}.win-gate--right{right:23%}.win-gate--right span{right:-18px;transform:rotate(180deg)}
.tug-group{position:absolute;left:50%;bottom:1%;width:min(850px,90%);transform:translate3d(calc(-50% + var(--offset)),0,0);transform-origin:center bottom;transition:transform .38s cubic-bezier(.18,.88,.25,1.12);z-index:5;will-change:transform;pointer-events:none}
.tug-team-image{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 12px 10px rgba(42,23,4,.28));transform-origin:center 72%;user-select:none;-webkit-user-drag:none}
.tug-group.pull-left .tug-team-image{animation:tugTeamLeft .48s ease}.tug-group.pull-right .tug-team-image{animation:tugTeamRight .48s ease}
@keyframes tugTeamLeft{45%{transform:translateX(-8px) rotate(-.45deg) scaleX(1.006)}}
@keyframes tugTeamRight{45%{transform:translateX(8px) rotate(.45deg) scaleX(1.006)}}
.instruction-banner{margin-top:-4px;z-index:12;display:flex;align-items:center;justify-content:center;gap:18px;width:min(610px,92%);padding:13px 22px;border-radius:18px;background:linear-gradient(180deg,#fffdf3,#fff2cf);border:3px solid #a86422;box-shadow:0 6px 0 #7d4515,0 10px 20px rgba(55,30,5,.24);font-size:clamp(17px,1.7vw,26px);text-align:center}.instruction-banner span{color:#b36c16}
.lead-meter{width:min(560px,88%);display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:16px;color:#4a260b;font-weight:950;font-size:12px;text-shadow:0 1px rgba(255,255,255,.7)}
.meter-track{height:12px;border:2px solid rgba(77,38,6,.48);background:linear-gradient(90deg,#1765b0 0 49%,#f7df92 49% 51%,#aa0b32 51% 100%);border-radius:999px;position:relative;box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.meter-track i{position:absolute;top:50%;left:50%;width:22px;height:22px;border-radius:50%;background:#ed241d;border:3px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.35);transform:translate(-50%,-50%);transition:left .38s cubic-bezier(.18,.88,.25,1.12)}
.creator-footer{height:65px;width:min(1050px,90%);display:flex;align-items:flex-end;justify-content:center;margin-top:8px}.creator-footer img{max-width:100%;max-height:58px;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(53,28,5,.25))}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(23,15,7,.68);backdrop-filter:blur(7px)}
.modal-card{position:relative;width:min(620px,96vw);max-height:94vh;overflow:auto;background:linear-gradient(180deg,#fffdf2,#f7e4b8);border:5px solid #744014;border-radius:27px;padding:25px;text-align:center;box-shadow:0 24px 65px rgba(0,0,0,.45),inset 0 0 0 3px #f5c86e}
.modal-logo{width:min(500px,90%);max-height:150px;object-fit:contain}.modal-card h1{margin:7px 0 8px;font-size:clamp(27px,4vw,42px)}.modal-card p{line-height:1.55;margin:0 auto 18px;max-width:540px}
.category-select-label{display:block;font-weight:900;margin:12px 0 7px}.category-select{width:100%;padding:14px;border-radius:13px;border:2px solid #aa6a23;background:#fff;font-weight:750;color:#3c210c}
.rules{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0}.rules span{background:#fff8df;border:1px solid #d8a65d;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800}
.primary-btn,.secondary-btn{border:0;border-radius:14px;padding:14px 22px;font-weight:950;cursor:pointer;box-shadow:0 5px 0 rgba(81,40,6,.25);transition:.15s transform,.15s filter}.primary-btn{background:linear-gradient(180deg,#f5bd3e,#dc7f12);color:#3d2104}.secondary-btn{background:#fff;color:#5a2f0a;border:2px solid #ad6c27}.primary-btn:hover,.secondary-btn:hover{filter:brightness(1.06);transform:translateY(-2px)}.primary-btn:active,.secondary-btn:active{transform:translateY(2px);box-shadow:none}
.win-card{overflow:hidden}.winner-image{height:min(430px,54vh);max-width:92%;object-fit:contain;filter:drop-shadow(0 13px 10px rgba(0,0,0,.22))}.trophy{position:absolute;right:24px;top:20px;font-size:58px;filter:drop-shadow(0 4px 3px rgba(0,0,0,.25))}.modal-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.confetti{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#f3b329 0 3px,transparent 4px),radial-gradient(circle,#d31c38 0 3px,transparent 4px),radial-gradient(circle,#1572bd 0 3px,transparent 4px);background-position:12% 10%,88% 18%,20% 78%;background-size:66px 72px,85px 90px,73px 80px;opacity:.56;animation:confettiDrift 3s linear infinite}@keyframes confettiDrift{to{background-position:12% 82%,88% 92%,20% 150%}}
@media(max-width:1120px){.game-title{width:min(580px,70vw)}.game-grid{grid-template-columns:minmax(230px,285px) minmax(380px,1fr) minmax(230px,285px)}.player-panel{min-height:450px}.arena{height:455px}.answer-btn{min-height:70px;font-size:12.5px}.tug-group{width:94%}}
@media(max-width:900px){.app{background-attachment:scroll}.game-shell{padding-top:65px}.game-title{width:min(560px,88vw)}.game-grid{grid-template-columns:1fr 1fr;grid-template-areas:'arena arena' 'musa aksara';align-items:start}.arena-wrap{grid-area:arena}.player-panel--musa{grid-area:musa}.player-panel--aksara{grid-area:aksara}.arena{height:410px}.tug-group{width:min(820px,90%)}.player-panel{min-height:400px}.question-text{min-height:94px}.answer-btn{min-height:68px}.creator-footer{margin-top:15px}}
@media(max-width:580px){.topbar{right:7px;top:7px;gap:5px}.round-btn{width:39px;height:39px;border-radius:12px}.game-shell{padding:55px 7px 10px}.game-title{width:94vw;max-height:118px}.game-grid{display:flex;flex-direction:column;width:100%}.arena-wrap{order:0;width:100%}.player-panel{order:1;width:100%;min-height:0}.player-panel--aksara{order:2}.arena{height:310px}.tug-group{width:100%;bottom:3%}.instruction-banner{font-size:15px;padding:10px 11px;gap:7px}.player-panel{border-radius:20px}.panel-header{min-height:58px}.question-text{min-height:84px;padding:12px}.answer-grid{grid-auto-rows:minmax(62px,auto);padding:7px 10px 12px}.answer-btn{min-height:62px;font-size:12.5px}.creator-footer{height:48px;width:98%}.creator-footer img{max-height:44px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}