/* Design token terpusat (§7). Tidak ada angka acak di CSS lain. */

@font-face {
  font-family: "Anton";
  src: url("../assets/fonts/anton-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/spacegrotesk-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  /* palet — D9 DECISIONS */
  --bg-deep: #08090b;
  --bg-panel: #101318;
  --bg-raise: #171b22;
  --paper: #edefea;
  --acid: #c7ff3d;
  --acid-dim: #8fb52c;
  --redline: #ff3b2f;
  --muted: #7a8290;
  --line: #22262e;

  /* spacing 4/8 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --r1: 2px; --r2: 6px; --r3: 12px; --r4: 20px;

  --sh1: 0 1px 2px rgba(0,0,0,.4);
  --sh2: 0 8px 24px rgba(0,0,0,.45);
  --sh3: 0 24px 64px rgba(0,0,0,.55);
  --glow: 0 0 24px rgba(199,255,61,.28);

  --t-fast: .16s;
  --t-med: .28s;
  --t-slow: .5s;
  --ease: cubic-bezier(.2,.7,.3,1);

  /* z-index satu skala (§7) */
  --z-world: 0;
  --z-fx: 20;
  --z-nametag: 25;
  --z-hud: 30;
  --z-panel: 40;
  --z-modal: 50;
  --z-toast: 60;

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* [hidden] HARUS benar-benar hilang.
   `display: none` dari atribut hidden datang dari stylesheet browser, jadi
   aturan display apa pun yang kita tulis sendiri mengalahkannya. Akibatnya
   `.panel { display: grid }` membuat panel ber-atribut hidden tetap ter-render
   menutupi seluruh layar — tak terlihat karena opacity 0, tapi tetap menelan
   setiap klik. Persis itu yang membuat tombol DRIVE tidak bisa diklik.
   Aturan ini menutup seluruh kelas bug tersebut, bukan satu kasusnya saja. */
[hidden] { display: none !important; }
body {
  background: var(--bg-deep);
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: .92;
  text-transform: uppercase;
  margin: 0;
}

.mono-num { font-variant-numeric: tabular-nums; }

/* Tombol: 5 state wajib (§7), hit area >=44px, disabled selalu beralasan. */
.btn {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bg-deep);
  background: var(--acid);
  border: 2px solid var(--acid);
  border-radius: var(--r2);
  padding: 0 var(--s5);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  text-decoration: none;
  position: relative;
}
.btn:hover { background: #d6ff6b; transform: translateY(-2px); box-shadow: var(--glow); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: transparent; color: var(--muted); border-color: var(--line);
  cursor: not-allowed; transform: none; box-shadow: none;
}
.btn--ghost {
  background: transparent; color: var(--paper); border-color: var(--line);
}
.btn--ghost:hover { background: var(--bg-raise); border-color: var(--acid); color: var(--acid); box-shadow: none; }
.btn--danger { background: var(--redline); border-color: var(--redline); color: var(--paper); }
.btn--danger:hover { background: #ff5a50; }

/* Alasan kenapa tombol mati — ditampilkan, bukan mati diam-diam. */
.btn__reason {
  position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
  font-family: var(--font-body); font-size: 11px; letter-spacing: .02em;
  color: var(--muted); white-space: nowrap; text-transform: none; pointer-events: none;
}

.icon { width: 22px; height: 22px; display: block; image-rendering: auto; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 34px; height: 34px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}