/* Lantai tipografi 10px (label) / 11px (sekunder).
   Acuan: Material 3 label-small 11sp, Apple HIG minimum 11pt.
   Diukur ulang dengan tools/benteng-visual-audit.mjs + audit DOM. */
/* Palet senja 90-an. Tiap warna punya alasan di
   docs/RISET_VISUAL_SENJA_90AN.md §5 — bukan default Tailwind seperti
   palet sebelumnya (#c0764a sky-500, #e08a4a purple-500, dst). */
:root{
  color-scheme:dark;
  --ink:#fbf3e4;          /* kapur kena cahaya */
  --muted:#c0ad95;        /* debu, teks sekunder */
  --night:#2e2542;        /* langit puncak magrib */
  --cream:#fdf3dc;
  --tanah:#3a2b20;        /* tanah lapang dalam bayangan */
  --bata:#c05e3c;         /* genting, batu bata */
  --natrium:#ffb35c;      /* lampu jalan natrium */
  --blue:#7fb2e5;         /* nila */
  --red:#f08a6a;          /* bata terang */
  --glass:rgba(38,28,22,.76);
  --line:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--night);font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);touch-action:none;user-select:none}
button,a{font:inherit}
button{color:inherit}
#arena{position:fixed;inset:0;width:100%;height:100%;display:block}
.topbar{position:fixed;z-index:20;inset:0 0 auto;height:70px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 18px;background:linear-gradient(180deg,rgba(32,24,19,.92),rgba(32,24,19,.4),transparent);pointer-events:none}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;width:max-content;pointer-events:auto}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(253,243,220,.55);border-radius:13px;background:radial-gradient(circle at 30% 25%,#fdf3dc,#e08a4a 34%,#c0764a 68%,#5a3a2a);font:900 17px Bitter,Georgia,serif;box-shadow:0 0 24px rgba(224,138,74,.35)}
.brand b{display:block;font:800 13px Bitter,Georgia,serif;letter-spacing:.13em}
.brand small{display:block;margin-top:2px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.16em}
.scoreboard{display:flex;align-items:center;gap:11px;padding:5px 8px;border:1px solid var(--line);border-radius:18px;background:rgba(38,28,22,.7);box-shadow:0 14px 35px rgba(0,0,0,.25);backdrop-filter:blur(12px)}
.score{display:grid;place-items:center;width:37px;height:37px;border-radius:13px;font:900 20px Bitter,Georgia,serif;color:#2b2018}
.score-blue{background:var(--blue);box-shadow:0 0 18px rgba(127,178,229,.35)}
.score-red{background:var(--red);box-shadow:0 0 18px rgba(240,138,106,.35)}
.match-clock{text-align:center;min-width:59px}.match-clock small{display:block;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.18em}.match-clock strong{display:block;font:800 18px Bitter,Georgia,serif;letter-spacing:.04em}
.top-actions{justify-self:end;display:flex;align-items:center;gap:7px;pointer-events:auto}
.chip,.icon-button,.text-button,.secondary-button{border:1px solid var(--line);background:rgba(44,32,25,.76);backdrop-filter:blur(12px);cursor:pointer;transition:.18s ease}
.chip:hover,.icon-button:hover,.text-button:hover,.secondary-button:hover{border-color:rgba(253,243,220,.52);transform:translateY(-1px)}
.chip{height:36px;border-radius:12px;padding:0 12px;color:var(--cream);font-size:11px;font-weight:900;letter-spacing:.08em}
.icon-button{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;color:var(--ink);text-decoration:none}
.roster{position:fixed;z-index:12;top:82px;width:152px;padding:10px;border:1px solid var(--line);border-radius:16px;background:var(--glass);box-shadow:0 18px 40px rgba(0,0,0,.2);backdrop-filter:blur(12px);pointer-events:none}
.roster-blue{left:14px}.roster-red{right:14px;text-align:right}
.roster-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.14em}.roster-blue .roster-title span{color:var(--blue)}.roster-red .roster-title span{color:var(--red)}
.unit-row{display:grid;grid-template-columns:1fr 31px;gap:6px;align-items:center;margin:5px 0}.roster-red .unit-row{grid-template-columns:31px 1fr}.unit-row.capture{opacity:.5}.unit-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:900}.unit-meter{height:5px;margin-top:2px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}.unit-meter i{display:block;height:100%;border-radius:inherit;transition:width .16s linear,background .16s}.unit-charge{font:900 11px monospace;color:var(--cream)}
.event-banner{position:fixed;z-index:19;left:50%;top:84px;transform:translate(-50%,-15px) scale(.96);padding:9px 16px;border:1px solid rgba(253,243,220,.35);border-radius:999px;background:rgba(41,30,24,.88);color:var(--cream);font:900 11px Bitter,Georgia,serif;letter-spacing:.05em;opacity:0;transition:.22s ease;pointer-events:none;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.event-banner.on{opacity:1;transform:translate(-50%,0) scale(1)}
.event-banner.danger{border-color:rgba(240,138,106,.6);color:#f6d3bd}.event-banner.hero{border-color:rgba(127,178,229,.7);box-shadow:0 0 32px rgba(127,178,229,.25)}
.mission-card{position:fixed;z-index:13;left:50%;bottom:18px;transform:translateX(-50%);width:min(360px,42vw);padding:9px 13px 10px;border:1px solid var(--line);border-radius:15px;background:rgba(38,28,22,.78);backdrop-filter:blur(12px);text-align:center;pointer-events:none}.mission-card small{display:block;color:#ffb35c;font-size:10px;font-weight:900;letter-spacing:.2em}.mission-card strong{display:block;margin:3px 0 6px;font-size:10px;font-weight:900}.charge-bar{height:5px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden}.charge-bar i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--cream);box-shadow:0 0 10px currentColor;transition:width .12s linear,background .12s}.mission-card>span{display:block;margin-top:4px;color:var(--cream);font:900 11px monospace;letter-spacing:.08em}
.controls-hint{position:fixed;z-index:10;right:16px;bottom:18px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;color:rgba(255,255,255,.52);font-size:10px;font-weight:800;pointer-events:none}.controls-hint kbd{padding:2px 5px;border:1px solid var(--line);border-radius:5px;background:rgba(38,28,22,.65);font:800 10px 'Plus Jakarta Sans',sans-serif}
.joystick{position:fixed;z-index:18;left:max(22px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));width:112px;height:112px;border-radius:50%;display:none;place-items:center;touch-action:none}.joystick-ring{position:absolute;inset:0;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(38,28,22,.32);box-shadow:inset 0 0 32px rgba(0,0,0,.25)}.joystick-knob{width:49px;height:49px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fdf3dc,#e08a4a 32%,#3d6b9e 72%);box-shadow:0 0 24px rgba(224,138,74,.45);will-change:transform}
.pull-button{position:fixed;z-index:19;right:max(25px,env(safe-area-inset-right));bottom:max(28px,env(safe-area-inset-bottom));width:116px;height:116px;border:2px solid rgba(253,243,220,.72);border-radius:50%;display:none;background:radial-gradient(circle,#ffb35c,#b0503a 68%,#3a2118);box-shadow:0 0 35px rgba(255,179,92,.36);font-size:10px;font-weight:900;letter-spacing:.05em;cursor:pointer}.pull-button span{display:block;font:900 22px Bitter,Georgia,serif}.pull-button.visible{display:block;animation:pullPulse .9s ease-in-out infinite}.pull-button.pressed{transform:scale(.9)}
@keyframes pullPulse{50%{box-shadow:0 0 55px rgba(255,179,92,.7);transform:scale(1.04)}}
.playtest-tools{position:fixed;z-index:11;left:16px;bottom:16px}.text-button{border-radius:10px;padding:7px 10px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.1em}
.overlay{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at center,rgba(70,50,38,.65),rgba(28,21,17,.93));backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:.25s ease}.overlay.on{opacity:1;visibility:visible}
.modal{width:min(620px,94vw);padding:32px;border:1px solid rgba(253,243,220,.2);border-radius:28px;background:linear-gradient(145deg,rgba(56,40,31,.97),rgba(38,27,22,.97));box-shadow:0 35px 90px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.09)}
.eyebrow{color:#ffb35c;font-size:11px;font-weight:900;letter-spacing:.19em}.intro-modal h1{margin:10px 0 12px;font:800 clamp(32px,6vw,58px)/.94 Bitter,Georgia,serif;letter-spacing:-.055em}.intro-modal h1 em{font-style:normal;color:var(--blue);text-shadow:0 0 28px rgba(127,178,229,.35)}.intro-modal>p{max-width:560px;margin:0;color:#e6d8c2;font-size:13px;line-height:1.55}.rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:23px 0}.rule-grid>div{display:flex;gap:9px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035)}.rule-grid b{color:rgba(253,243,220,.25);font:800 18px Bitter,Georgia,serif}.rule-grid strong,.rule-grid span{display:block}.rule-grid strong{color:var(--cream);font-size:11px;letter-spacing:.08em}.rule-grid span{color:var(--muted);font-size:11px;line-height:1.35}
.primary-button{width:100%;min-height:48px;border:0;border-radius:14px;background:linear-gradient(100deg,#c0764a,#b0503a 55%,#e0913f);color:#fff;font:900 12px Bitter,Georgia,serif;letter-spacing:.08em;cursor:pointer;box-shadow:0 15px 30px rgba(176,80,58,.3);transition:.18s ease}.primary-button:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(176,80,58,.42)}.primary-button span{float:right;margin-right:10px}.prototype-note{display:block;margin-top:10px;text-align:center;color:#9c8a74;font-size:10px;letter-spacing:.04em}
.result-modal{text-align:center;width:min(480px,92vw)}.result-modal h2{margin:10px 0 6px;font:800 clamp(28px,5vw,45px)/1 Bitter,Georgia,serif}.result-modal>p{margin:0;color:var(--muted);font-size:12px}.result-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}.result-metrics div{padding:11px 5px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.03)}.result-metrics b{display:block;color:var(--cream);font:800 20px Bitter,Georgia,serif}.result-metrics span{display:block;margin-top:3px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.08em}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.secondary-button{min-height:48px;border-radius:14px;color:var(--cream);font:900 10px Bitter,Georgia,serif}.result-modal>.text-button{margin-top:10px;background:transparent}
.portrait-warning{display:none;position:fixed;z-index:300;inset:0;padding:40px;background:#2e2542;color:var(--cream);font:800 18px/1.45 Bitter,Georgia,serif;text-align:center;place-items:center}
@media (pointer:coarse){.joystick{display:grid}.controls-hint,.playtest-tools{display:none}.mission-card{bottom:16px}.roster{top:75px;width:140px}.chip{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media (max-width:850px){.topbar{padding:7px 10px;height:60px}.brand small{display:none}.brand-mark{width:32px;height:32px}.brand b{font-size:10px}.roster{width:132px;top:66px;padding:7px}.unit-name{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-actions{gap:4px}.chip{padding:0 8px;font-size:10px}.icon-button{width:32px;height:32px}.mission-card{width:40vw}.controls-hint{display:none}.event-banner{top:66px}.modal{padding:24px}.rule-grid{margin:16px 0}.intro-modal h1{font-size:38px}}
@media (max-width:650px){.brand b{display:none}.roster{width:126px;background:rgba(38,28,22,.58)}.roster-title{font-size:10px}.unit-charge{font-size:10px}.mission-card{width:36vw;padding:7px}.mission-card strong{font-size:10px}.top-actions .icon-button:nth-of-type(2){display:none}.scoreboard{gap:5px}.score{width:31px;height:31px}.match-clock strong{font-size:14px}.rule-grid{grid-template-columns:1fr}.rule-grid>div{padding:8px}.intro-modal>p{font-size:11px}.intro-modal h1{font-size:31px}.prototype-note{display:none}}
@media (orientation:portrait) and (max-width:700px){.portrait-warning{display:grid}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── Area sentuh 44x44 ────────────────────────────────────────
   Acuan: Apple HIG 44x44 pt, WCAG 2.2 SC 2.5.5 Target Size (Enhanced).
   SC 2.5.8 (AA) hanya menuntut 24x24 dan itu sudah lolos; 44 dipakai
   karena ini game sentuh, bukan halaman baca.

   Kotak yang TERLIHAT sengaja tidak dibesarkan — layoutnya sudah pas.
   Yang dilebarkan cuma area tangkap klik lewat ::after, jadi jempol
   yang meleset beberapa piksel tetap kena. */
.icon-button, .chip, .text-button, .brand { position: relative; }
.icon-button::after, .chip::after, .text-button::after, .brand::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
/* Hilangkan jeda 300 ms tap-ganda tanpa mengunci zoom halaman. */
button, a, .chip, .icon-button { touch-action: manipulation; }

/* Progres gate Fase 0 pada layar hasil. Riwayat playtest bertahan di
   localStorage, jadi angka ini menghitung seluruh sesi, bukan satu match. */
.playtest-progress{margin:16px 0 4px;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03);text-align:left}
.playtest-progress .pp-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.1em}
.playtest-progress .pp-head b{color:var(--cream);font:800 12px Bitter,Georgia,serif;letter-spacing:0}
.playtest-progress .pp-bar{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin-bottom:6px;color:var(--muted);font-size:10px;font-weight:900}
.playtest-progress .pp-track{height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.playtest-progress .pp-fill{display:block;height:100%;border-radius:99px;transition:width .3s ease}
.playtest-progress .pp-note{margin-top:9px;color:var(--muted);font-size:10px;line-height:1.45}
.playtest-progress .pp-note b{color:var(--cream)}