/* Pahlawan Angka v3.25.5 — one visual language for form controls and battle choices. */
:root{color-scheme:dark;--pa-control-bg:#091a30;--pa-control-hi:#132d4d;--pa-control-line:#3a567a;--pa-control-gold:#f3c847;--pa-control-text:#f4f7fc;--pa-control-mut:#9fb0c8}

/* Native fields: retain accessibility while removing the browser-default appearance. */
select,input[type="date"],input[type="time"],input[type="number"]{font:inherit;color:var(--pa-control-text);background-color:var(--pa-control-bg);border:1px solid var(--pa-control-line);border-radius:13px;min-height:46px;outline:0;box-shadow:inset 0 1px rgba(255,255,255,.035);transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}
select{appearance:none;-webkit-appearance:none;padding:0 44px 0 14px;background-image:linear-gradient(45deg,transparent 50%,#f5cf55 50%),linear-gradient(135deg,#f5cf55 50%,transparent 50%),linear-gradient(180deg,#173251,#091a30);background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%,0 0;background-size:6px 6px,6px 6px,100% 100%;background-repeat:no-repeat}
select:focus,input[type="date"]:focus,input[type="time"]:focus,input[type="number"]:focus{border-color:var(--pa-control-gold);box-shadow:0 0 0 3px rgba(243,200,71,.15),inset 0 1px rgba(255,255,255,.04)}
select:disabled,input:disabled{opacity:.55;cursor:not-allowed}select option{background:#0b1d34;color:#f4f7fc}
input[type="date"]::-webkit-calendar-picker-indicator,input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(88%) sepia(71%) saturate(734%) hue-rotate(339deg) brightness(101%);opacity:.9}
input[type="number"]{-moz-appearance:textfield;padding-inline:14px}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

input[type="checkbox"]{appearance:none;-webkit-appearance:none;display:inline-grid!important;place-content:center;flex:0 0 auto;width:21px!important;height:21px!important;margin:0;border:1.5px solid #587496;border-radius:6px;background:#08182c;box-shadow:inset 0 1px rgba(255,255,255,.04);transition:.15s}
input[type="checkbox"]::before{content:"";width:10px;height:6px;border:0 solid #17200d;border-width:0 0 3px 3px;transform:rotate(-45deg) scale(0);margin-top:-2px;transition:transform .12s ease}
input[type="checkbox"]:checked{border-color:#f3c847;background:linear-gradient(180deg,#ffdc61,#eeb92d);box-shadow:0 0 0 3px rgba(243,200,71,.12)}input[type="checkbox"]:checked::before{transform:rotate(-45deg) scale(1)}
input[type="checkbox"]:focus-visible{outline:3px solid rgba(94,158,238,.35);outline-offset:2px}

input[type="range"]{appearance:none;-webkit-appearance:none;width:100%;height:6px;border:0;border-radius:99px;background:linear-gradient(90deg,#f3c847,#f0a93b);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:24px;border:3px solid #f6d75b;border-radius:50%;background:#102a49;box-shadow:0 3px 10px rgba(0,0,0,.4),0 0 0 4px rgba(243,200,71,.12)}
input[type="range"]::-moz-range-thumb{width:19px;height:19px;border:3px solid #f6d75b;border-radius:50%;background:#102a49;box-shadow:0 3px 10px rgba(0,0,0,.4)}

/* Battle answers: tactile friendly 3D tiles, designed for quick reading and large touch targets. */
#game .answers:not(.paTypedAnswers){counter-reset:pa-answer;gap:9px;margin-top:5px}
#game .answers:not(.paTypedAnswers)>.ans{counter-increment:pa-answer;position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:9px;min-height:60px;padding:9px 12px;border:2px solid #b3d1f5;border-radius:16px;background:linear-gradient(180deg,#ffffff 0%,#f0f5fc 60%,#e4effa 100%);color:#0d2847;font-weight:950;text-align:left;line-height:1.15;box-shadow:0 5px 0 #7fafe8,0 8px 16px rgba(13,40,71,.08);text-shadow:none;transition:transform .1s ease,border-color .12s ease,box-shadow .12s ease,background .12s ease}
#game .answers:not(.paTypedAnswers)>.ans::before{content:counter(pa-answer,upper-alpha);display:grid;place-items:center;width:32px;height:32px;border:1.5px solid #7fafe8;border-radius:10px;background:linear-gradient(180deg,#ebf3fd,#d5e5fa);color:#1d4ed8;font-size:13px;font-weight:1000;text-shadow:none;box-shadow:0 2px 0 #93c5fd}
#game .answers:not(.paTypedAnswers)>.ans:active{transform:translateY(3px);box-shadow:0 2px 0 #7fafe8,0 3px 6px rgba(13,40,71,.08)}
#game .answers:not(.paTypedAnswers)>.ans:focus-visible{outline:3px solid rgba(2,132,199,.4);outline-offset:2px;border-color:#0284c7}
#game .answers:not(.paTypedAnswers)>.ans.ok{border-color:#16a34a;background:linear-gradient(180deg,#4ade80 0%,#22c55e 50%,#16a34a 100%);color:#ffffff;box-shadow:0 5px 0 #15803d,0 8px 20px rgba(22,163,74,.35);text-shadow:0 1px 2px rgba(0,0,0,.25);animation:paAnsCorrectPop .5s cubic-bezier(.22,.85,.28,1) both}
#game .answers:not(.paTypedAnswers)>.ans.ok::before{content:"✓";border-color:#bbf7d0;background:#15803d;color:#fff;box-shadow:0 2px 0 #14532d}
#game .answers:not(.paTypedAnswers)>.ans.no{border-color:#ef4444;background:linear-gradient(180deg,#fca5a5 0%,#f87171 50%,#ef4444 100%);color:#ffffff;box-shadow:0 5px 0 #b91c1c,0 8px 20px rgba(239,68,68,.3);text-shadow:0 1px 2px rgba(0,0,0,.25);animation:paAnsWrongShake .4s cubic-bezier(.22,.8,.28,1) both}
#game .answers:not(.paTypedAnswers)>.ans.no::before{content:"×";border-color:#fecaca;background:#b91c1c;color:#fff;box-shadow:0 2px 0 #7f1d1d}
@keyframes paAnsCorrectPop{0%{transform:scale(1);box-shadow:0 5px 0 #15803d,0 8px 20px rgba(22,163,74,.35)}40%{transform:scale(1.035);box-shadow:0 5px 0 #15803d,0 0 24px rgba(74,222,128,.6)}100%{transform:scale(1);box-shadow:0 5px 0 #15803d,0 8px 20px rgba(22,163,74,.35)}}
@keyframes paAnsWrongShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

@media(hover:hover){#game .answers:not(.paTypedAnswers)>.ans:hover{border-color:#0284c7;background:linear-gradient(180deg,#ffffff 0%,#f5f9ff 100%);box-shadow:0 5px 0 #0284c7,0 7px 15px rgba(2,132,199,.15)}}
@media(max-width:390px){#game .answers:not(.paTypedAnswers)>.ans{grid-template-columns:30px minmax(0,1fr);gap:7px;min-height:56px;padding:8px 9px 8px 8px;font-size:clamp(15px,4.35vw,18px)}#game .answers:not(.paTypedAnswers)>.ans::before{width:28px;height:28px;border-radius:9px;font-size:12px}}
@media(prefers-reduced-motion:reduce){select,input[type="checkbox"],#game .answers:not(.paTypedAnswers)>.ans{transition:none}#game .answers:not(.paTypedAnswers)>.ans.ok,#game .answers:not(.paTypedAnswers)>.ans.no{animation:none!important}}