/* Arena Hikmah: gaya asal inovator (style.css), diskop dalam .ah secara program (_bina css.py).
   rem asal -> var(--ah-r) (1.15em halaman, dikira px sekali) supaya ikut saiz teks A-/A+ tanpa berganda. */
@property --ah-r { syntax: '<length>'; inherits: true; initial-value: 16px; }
.ah{color-scheme:dark;--navy:#081623;--panel:#0c2031;--gold:#e6bb6c;--teal:#67e9d5;--muted:#aebfcf;--line:#ffffff20;--text:#f1f5fa}
.ah *{box-sizing:border-box}
.ah{margin:0;color:var(--text);background:linear-gradient(90deg,#06101eef,#091a2ec4,#06101ee8),url('../arena.webp') center top/cover;font-family:Inter,Arial,sans-serif;line-height:1.55;}
.ah button,.ah input,.ah select{font:inherit}
.ah button,.ah a,.ah select{touch-action:manipulation}
.ah button{cursor:pointer;border:1px solid var(--line);color:inherit;border-radius:5px;padding:calc(.7*var(--ah-r)) calc(1*var(--ah-r));font-weight:600;transition:background .15s,box-shadow .15s}
.ah button:hover{filter:brightness(1.15)}
.ah button:disabled{cursor:default;filter:none;opacity:.65}
.ah button:focus-visible,.ah a:focus-visible,.ah input:focus-visible,.ah select:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.ah button[hidden],.ah [hidden]{display:none!important}
.ah a{color:var(--teal)}
.ah .ah-bar{display:flex;justify-content:space-between;align-items:center;padding:calc(1.1*var(--ah-r)) 3.4%;border-bottom:1px solid var(--line);background:#071421e8;gap:calc(1*var(--ah-r))}
.ah .brand{display:flex;align-items:center;gap:calc(.8*var(--ah-r));text-decoration:none;font-family:Cinzel,Georgia,serif;color:#fff;letter-spacing:.08em;font-size:calc(1.3*var(--ah-r));line-height:1.3}
.ah .brand b{color:var(--gold)}
.ah .brand small{display:block;font:600 calc(.7*var(--ah-r)) Inter,Arial,sans-serif;letter-spacing:.23em;color:var(--muted);margin-top:calc(.3*var(--ah-r))}
.ah .sigil{color:var(--gold);font-size:calc(2*var(--ah-r));border:1px solid #e6bb6c80;display:grid;place-items:center;width:44px;height:48px;clip-path:polygon(50% 0,100% 20%,100% 80%,50% 100%,0 80%,0 20%);background:#e6bb6c10}
.ah .ah-nav{display:flex;gap:calc(.5*var(--ah-r))}
.ah .quiet{background:#102337;border-color:#63829c42}
.ah .text-button{background:none;border:0;color:var(--gold);padding:0;font-size:calc(.8*var(--ah-r))}
.ah .gold{background:linear-gradient(110deg,#e7c682,#cf9950);border-color:#f6dc9e;color:#23190b;letter-spacing:.06em;box-shadow:0 4px 20px #c68b3a25}
.ah .teal{background:#143b44;color:var(--teal);border-color:#67e9d554;width:100%;font-size:calc(.85*var(--ah-r))}
.ah .primary{font-size:calc(1*var(--ah-r));width:100%;padding:calc(1.1*var(--ah-r))}
.ah .eyebrow{font-size:calc(.75*var(--ah-r));letter-spacing:.18em;font-weight:700;color:var(--teal)}
.ah .ah-main{max-width:1540px;margin:auto;padding:calc(1.5*var(--ah-r)) 3.4% calc(2*var(--ah-r))}
.ah .section-title{text-align:center;margin:0 auto calc(1.6*var(--ah-r))}
.ah .section-title h2{font:600 clamp(calc(1.7*var(--ah-r)),3vw,calc(2.75*var(--ah-r)))/1.2 Cinzel,Georgia,serif;margin:calc(.45*var(--ah-r)) 0 calc(.7*var(--ah-r))}
.ah .section-title h2 br{display:none}
.ah .section-title em{font-style:normal;color:var(--gold)}
.ah .section-title p{font-size:calc(.9*var(--ah-r));color:#c3d2df;margin:0}
.ah .lobby-grid{display:grid;grid-template-columns:1fr 1.17fr .94fr;gap:calc(1.4*var(--ah-r));align-items:stretch}
.ah .ah-panel{background:linear-gradient(145deg,#0e2434ed,#071826ed);border:1px solid #526f8555;border-radius:8px;padding:calc(1.4*var(--ah-r));box-shadow:0 12px 36px #0003}
.ah .panel-heading{display:flex;align-items:center;gap:calc(.7*var(--ah-r));margin-bottom:calc(1*var(--ah-r))}
.ah .ah-panel h2{font-size:calc(1.1*var(--ah-r));margin:0}
.ah .step{font-family:Cinzel,Georgia,serif;color:var(--gold);font-size:calc(.85*var(--ah-r));border:1px solid #e6bb6c55;padding:calc(.2*var(--ah-r)) calc(.4*var(--ah-r))}
.ah label{display:block;color:var(--muted);font-size:calc(.85*var(--ah-r));margin:0 0 calc(.35*var(--ah-r))}
.ah input,.ah select{background:#071723;border:1px solid #476078;color:#fff;border-radius:4px;padding:calc(.55*var(--ah-r)) calc(.7*var(--ah-r));width:100%;min-width:0}
.ah #teamFields{display:grid;gap:calc(.55*var(--ah-r));margin:calc(.9*var(--ah-r)) 0 calc(1*var(--ah-r))}
.ah .team-input{display:flex;align-items:center;gap:calc(.7*var(--ah-r))}
.ah .team-input label{margin:0;width:27px;text-align:center;font-size:calc(1.2*var(--ah-r))}
.ah .two{display:grid;grid-template-columns:1fr 1fr;gap:calc(.6*var(--ah-r))}
.ah .subtle{font-size:calc(.8*var(--ah-r));color:var(--muted);line-height:1.6}
.ah .arena-intro{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(1.4*var(--ah-r));background:radial-gradient(ellipse at 50% 40%,#1a6c7030,transparent 65%);border-top:1px solid #e6bb6c40;border-bottom:1px solid #e6bb6c40}
.ah .arena-intro h2{font:600 clamp(calc(1.8*var(--ah-r)),2.5vw,calc(2.5*var(--ah-r)))/1.2 Cinzel,Georgia,serif;margin:calc(.8*var(--ah-r)) 0 calc(1.6*var(--ah-r));text-shadow:0 3px 10px #000}
.ah .rank-mark{width:100px;height:115px;display:grid;place-items:center;background:linear-gradient(120deg,#56dad920,#e6bb6c20);border:2px solid var(--gold);clip-path:polygon(50% 0,100% 25%,90% 75%,50% 100%,10% 75%,0 25%);margin-bottom:calc(1.2*var(--ah-r))}
.ah .rank-mark span{font-size:calc(4*var(--ah-r));color:var(--gold);text-shadow:0 0 25px #e6bb6c88}
.ah .game-facts{display:flex;width:100%;justify-content:space-evenly;gap:calc(.5*var(--ah-r));margin-bottom:calc(2*var(--ah-r))}
.ah .game-facts span{font-size:calc(.75*var(--ah-r));color:var(--muted)}
.ah .game-facts b{display:block;color:var(--gold);font-size:calc(1.55*var(--ah-r));line-height:1.5}
.ah .arena-intro .primary{max-width:360px}
.ah .camera-box{margin-bottom:calc(.6*var(--ah-r))}
.ah .video-wrap{position:relative;width:100%;aspect-ratio:4/2.3;background:#040e16;border:1px solid #38576c;overflow:hidden;border-radius:4px;margin-bottom:calc(.6*var(--ah-r))}
.ah video,.ah canvas{position:absolute;width:100%;height:100%;object-fit:contain;transform:scaleX(-1)}
.ah #cameraPlaceholder{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--muted);font-size:calc(2*var(--ah-r))}
.ah #cameraPlaceholder span{font-size:calc(.8*var(--ah-r))}
.ah #cameraStatus{font-size:calc(.8*var(--ah-r));line-height:1.4;color:var(--muted);margin:calc(.5*var(--ah-r)) 0;min-height:2.2em}
.ah .practice{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(.45*var(--ah-r))}
.ah .practice button{background:#142e43;border-color:#365773;font-size:calc(1.1*var(--ah-r));padding:calc(.55*var(--ah-r))}
.ah #practiceResult{font-size:calc(.8*var(--ah-r));color:var(--teal);min-height:2.5em;margin:calc(.6*var(--ah-r)) 0}
.ah .instructions{padding-left:calc(1.1*var(--ah-r));font-size:calc(.85*var(--ah-r));color:#b8cbd9;line-height:1.8}
.ah .battle-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:calc(1.5*var(--ah-r))}
.ah .battle-heading h2{font-family:Cinzel,Georgia,serif;font-size:calc(1.8*var(--ah-r));margin:calc(.3*var(--ah-r)) 0;color:var(--gold)}
.ah .battle-tools{display:flex;align-items:center;gap:calc(1.2*var(--ah-r))}
.ah .timer{width:90px;height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--gold);border-radius:50%;background:#0a1b2c}
.ah .timer b{font-size:calc(2*var(--ah-r));line-height:1.1;font-variant-numeric:tabular-nums}
.ah .timer span{font-size:calc(.65*var(--ah-r));letter-spacing:.15em;color:var(--muted)}
.ah .timer.urgent{color:#ff9c92;border-color:#ff9c92}
.ah .battle-grid{display:grid;grid-template-columns:260px 1fr;gap:calc(1.7*var(--ah-r))}
.ah .leaderboard h2{font-size:calc(1*var(--ah-r));margin-bottom:calc(1*var(--ah-r))}
.ah .score-row{display:flex;align-items:center;gap:calc(.6*var(--ah-r));padding:calc(.75*var(--ah-r)) calc(.4*var(--ah-r));border-bottom:1px solid var(--line)}
.ah .score-row.active{border-left:3px solid var(--gold);background:#e6bb6c10}
.ah .score-row b{font-size:calc(.9*var(--ah-r));overflow-wrap:anywhere}
.ah .score-row small{display:block;color:var(--muted);font-size:calc(.75*var(--ah-r))}
.ah .score-row .points{margin-left:auto;color:var(--gold);font-weight:700;font-size:calc(1.1*var(--ah-r))}
.ah .score-icon{font-size:calc(1.3*var(--ah-r))}
.ah #battleCameraMount{margin-top:calc(1.4*var(--ah-r))}
.ah .question-card{padding:calc(1.5*var(--ah-r)) calc(1.7*var(--ah-r));background:linear-gradient(120deg,#143346eb,#0d2238f2);border:1px solid #e6bb6c55;border-radius:7px;position:relative;overflow:hidden;min-height:190px}
.ah .question-label{display:flex;justify-content:space-between;gap:calc(1*var(--ah-r));align-items:center}
.ah .question-card h2{font-size:clamp(calc(1.3*var(--ah-r)),2.15vw,calc(2.1*var(--ah-r)));line-height:1.4;margin:calc(1*var(--ah-r)) 0;font-weight:600}
.ah .time-track{position:absolute;bottom:0;left:0;right:0;height:4px;background:#ffffff12}
.ah #timeBar{height:100%;background:var(--gold);width:100%;transition:width .2s linear}
.ah .answers{display:grid;grid-template-columns:1fr 1fr;gap:calc(1*var(--ah-r));margin:calc(1.3*var(--ah-r)) 0}
.ah .answer{display:flex;align-items:center;text-align:left;gap:calc(1*var(--ah-r));min-height:128px;padding:calc(1.2*var(--ah-r));background:linear-gradient(130deg,#122c42f5,#0b1e32f2);border:1px solid #4e6c88;font-size:clamp(calc(1*var(--ah-r)),1.5vw,calc(1.35*var(--ah-r)));font-weight:500;line-height:1.45}
.ah .answer .letter{font-family:Cinzel,Georgia,serif;color:var(--gold);background:#e6bb6c10;border:1px solid #e6bb6c55;min-width:42px;height:46px;display:grid;place-items:center}
.ah .answer.aimed,.ah .practice button.aimed{border-color:var(--teal);background:#174653;box-shadow:0 0 0 2px #67e9d544,0 0 24px #67e9d525}
.ah .answer.correct{background:#0d4941;border-color:#67e9b9;color:#fff;opacity:1}
.ah .answer.wrong{background:#572c36;border-color:#ff918d;color:#fff;opacity:1}
.ah .feedback{background:#0b2633f5;border-left:3px solid var(--teal);padding:calc(1*var(--ah-r)) calc(1.2*var(--ah-r));margin:calc(1*var(--ah-r)) 0}
.ah .feedback strong{display:block;font-size:calc(1.1*var(--ah-r));color:var(--teal)}
.ah .feedback p{margin:calc(.4*var(--ah-r)) 0}
.ah .feedback a{font-size:calc(.8*var(--ah-r))}
.ah .results{text-align:center;max-width:800px;margin:calc(1.2*var(--ah-r)) auto}
.ah .results h2{font:600 calc(2.4*var(--ah-r)) Cinzel,Georgia,serif;color:var(--gold);overflow-wrap:anywhere}
.ah .victory-star{font-size:calc(5*var(--ah-r));color:var(--gold);text-shadow:0 0 50px #e6bb6c88}
.ah .final-ranks{display:grid;gap:calc(.75*var(--ah-r));margin:calc(2*var(--ah-r)) 0;text-align:left}
.ah .final-row{display:flex;align-items:center;gap:calc(1*var(--ah-r));padding:calc(1.1*var(--ah-r)) calc(1.5*var(--ah-r));background:#0b2236e8;border:1px solid #49667d;border-radius:6px}
.ah .final-row:first-child{border-color:var(--gold)}
.ah .final-row .position{font:calc(1.5*var(--ah-r)) Cinzel,Georgia,serif;color:var(--gold)}
.ah .final-row strong{flex:1}
.ah .final-row span:last-child{color:var(--gold)}
.ah .ah-kaki{max-width:1540px;margin:calc(1.5*var(--ah-r)) auto 0;border-top:1px solid var(--line);padding:calc(1*var(--ah-r)) 3.4%;display:flex;gap:calc(1*var(--ah-r));flex-wrap:wrap;color:#a8bbca;font-size:calc(.75*var(--ah-r))}
.ah .ah-kaki button{margin-left:auto}
.ah dialog{background:#0b2032;color:var(--text);border:1px solid #8b7652;border-radius:8px;padding:calc(1.6*var(--ah-r));width:min(680px,94vw);max-height:90vh}
.ah dialog::backdrop{background:#020a13d9;backdrop-filter:blur(5px)}
.ah dialog p{color:#c7d4df}
.ah dialog h2{margin-top:0;color:var(--gold)}
.ah dialog h3{color:var(--teal);font-size:calc(1.05*var(--ah-r))}
.ah dialog .gold{margin-right:calc(.5*var(--ah-r))}
.ah dialog.large-dialog{width:min(1000px,95vw)}
.ah .dialog-head{display:flex;justify-content:space-between;gap:calc(1*var(--ah-r));align-items:center;position:sticky;top:-calc(1.6*var(--ah-r));background:#0b2032;padding:calc(.6*var(--ah-r)) 0;z-index:2}
.ah .dialog-head h2{margin:calc(.3*var(--ah-r)) 0}
.ah .bank-item{border-bottom:1px solid var(--line);padding:calc(1*var(--ah-r)) 0}
.ah .bank-item summary{cursor:pointer;font-weight:600;font-size:calc(1*var(--ah-r))}
.ah .bank-item p{font-size:calc(.9*var(--ah-r))}
.ah .bank-options{display:grid;gap:calc(.2*var(--ah-r))}
.ah .bank-options .key{color:var(--teal)}
.ah #handCursor{position:fixed;z-index:20;pointer-events:none;width:48px;height:48px;border:2px solid var(--teal);border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center;background:#67e9d51c;box-shadow:0 0 24px #67e9d577;color:white}
.ah #handCursor span{font-size:calc(1.5*var(--ah-r))}
.ah #handCursor i{position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(var(--gold) var(--hold,0%),transparent 0);mask:radial-gradient(transparent 60%,#000 62%)}
.ah #handCursor.closing{border-color:var(--gold)}
@container ah (max-width:1050px){
.ah .lobby-grid{grid-template-columns:1fr 1fr}
.ah .arena-intro{grid-column:1/-1;grid-row:1;padding:calc(1.5*var(--ah-r))}
.ah .rank-mark{display:none}
.ah .arena-intro h2{font-size:calc(1.6*var(--ah-r));margin:calc(.7*var(--ah-r))}
.ah .arena-intro h2 br{display:none}
.ah .game-facts{margin:calc(.5*var(--ah-r)) 0 calc(1*var(--ah-r));max-width:480px}
.ah .section-title{display:none}
.ah .battle-grid{grid-template-columns:210px 1fr;gap:calc(1*var(--ah-r))}
.ah .ah-panel{padding:calc(1*var(--ah-r))}
.ah .answer{padding:calc(.8*var(--ah-r));gap:calc(.6*var(--ah-r))}
}
@container ah (max-width:700px){
.ah .ah-bar{align-items:flex-start;flex-direction:column}
.ah .ah-bar .ah-nav{flex-wrap:wrap}
.ah .ah-nav button{font-size:calc(.8*var(--ah-r));padding:calc(.5*var(--ah-r)) calc(.7*var(--ah-r))}
.ah .lobby-grid{grid-template-columns:1fr}
.ah .arena-intro{grid-column:auto}
.ah .battle-grid{display:flex;flex-direction:column}
.ah .leaderboard{order:2}
.ah .question-label{align-items:flex-start;flex-direction:column;gap:calc(.2*var(--ah-r))}
.ah .question-card{padding:calc(1*var(--ah-r));min-height:160px}
.ah .answers{gap:calc(.65*var(--ah-r))}
.ah .answer{min-height:135px;flex-direction:column;align-items:flex-start;font-size:calc(1*var(--ah-r))}
.ah .answer .letter{min-width:30px;height:32px}
.ah .battle-heading h2{font-size:calc(1.3*var(--ah-r))}
.ah .timer{width:70px;height:70px}
.ah .timer b{font-size:calc(1.5*var(--ah-r))}
.ah .battle-tools{gap:calc(.5*var(--ah-r))}
.ah #battleCameraMount{max-width:300px}
.ah #scoreboard{display:grid;grid-template-columns:1fr 1fr}
.ah .score-row{padding:calc(.5*var(--ah-r))}
.ah .results h2{font-size:calc(1.8*var(--ah-r))}
.ah .ah-kaki{gap:calc(.4*var(--ah-r))}
.ah .ah-kaki span{width:100%}
.ah .ah-kaki button{margin-left:0}
.ah .final-row{padding:calc(.8*var(--ah-r))}
.ah .final-row strong{overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){
.ah *{transition:none!important;animation:none!important}
}
.ah .volume-control{display:flex;align-items:center;gap:calc(.4*var(--ah-r));margin:0;font-size:calc(.8*var(--ah-r));white-space:nowrap}
.ah .volume-control input{width:80px;padding:0;accent-color:var(--gold)}
.ah .ah-bar .ah-nav{flex-wrap:wrap;align-items:center}
.ah #answerHint{color:var(--gold)}