/* ============================================================
   ROARBIT — gaya dasar (dipakai landing & game)
   Palet "arena senja": langit peach → koral → ungu plum.
   ============================================================ */
@font-face { font-family: 'Bungee'; src: url('../assets/fonts/bungee.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../assets/fonts/outfit.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #24102f;
  --plum: #3b1a4e;
  --plum-2: #57276d;
  --plum-3: #7b3d84;
  --coral: #ff6a4d;
  --coral-d: #c63f2c;
  --peach: #ffc49b;
  --sand: #ffe3c4;
  --cream: #fff5e8;
  --sun: #ffd166;
  --sun-d: #d9a326;
  --cyan: #3fe0ff;
  --mint: #52e8a0;
  --rare: #48b8ff;
  --epic: #c77dff;
  --display: 'Bungee', 'Arial Black', system-ui, sans-serif;
  --body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 18px;
  --shadow: 0 10px 30px rgba(36, 16, 47, .25);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: #ff9e7a; }
img, svg { display: block; max-width: 100%; }
svg { width: 1em; height: 1em; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* langit senja */
.sky { position: fixed; inset: 0; z-index: -2;
  background: linear-gradient(180deg, #ffe0b0 0%, #ffb487 26%, #ff8a72 48%, #c9537a 72%, #4a1f5c 100%); }
.sky::after { content: ''; position: absolute; inset: 0; background:
  radial-gradient(60% 40% at 50% 62%, rgba(255, 214, 150, .55), transparent 70%); pointer-events: none; }

/* tombol chunky ala game mobile */
.btn { --bg: var(--coral); --bd: var(--coral-d); --fg: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--display); font-size: 15px; letter-spacing: .04em; line-height: 1;
  padding: 14px 20px 12px; border: 0; border-radius: 14px; cursor: pointer; text-decoration: none;
  color: var(--fg); background: var(--bg); box-shadow: 0 5px 0 var(--bd), 0 10px 18px rgba(36, 16, 47, .28);
  transition: transform .08s, box-shadow .08s, filter .15s; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.btn:hover { filter: brightness(1.06); }
.btn:active, .btn.pressed { transform: translateY(4px); box-shadow: 0 1px 0 var(--bd), 0 4px 10px rgba(36, 16, 47, .25); }
.btn:disabled, .btn.off { filter: saturate(.35) brightness(.95); cursor: not-allowed; }
.btn svg { width: 1.15em; height: 1.15em; }
.btn.sun { --bg: var(--sun); --bd: var(--sun-d); --fg: var(--ink); }
.btn.plum { --bg: var(--plum-2); --bd: #2c1039; }
.btn.cream { --bg: var(--cream); --bd: #d6b99c; --fg: var(--ink); }
.btn.ghost { --bg: rgba(255, 245, 232, .14); --bd: rgba(0, 0, 0, .25); --fg: var(--cream); box-shadow: 0 4px 0 var(--bd); backdrop-filter: blur(6px); }
.btn.sm { font-size: 12px; padding: 10px 13px 8px; border-radius: 11px; }
.btn.icon { padding: 10px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 4px; border-radius: 999px;
  font: 700 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; background: rgba(36, 16, 47, .08); }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.chip.common { color: #6d5a74; background: rgba(109, 90, 116, .14); }
.chip.rare { color: #1675b8; background: rgba(72, 184, 255, .18); }
.chip.epic { color: #8a35c9; background: rgba(199, 125, 255, .2); }
.chip.prime { color: #a87600; background: rgba(255, 209, 102, .3); }
.chip.rustback { color: #9b4a1c; background: rgba(190, 100, 40, .18); }

.panel { background: var(--cream); border-radius: var(--r); box-shadow: var(--shadow), inset 0 -4px 0 rgba(36, 16, 47, .08); }

.toast { position: fixed; left: 50%; top: 84px; transform: translate(-50%, -20px); opacity: 0; z-index: 90;
  background: var(--ink); color: var(--cream); padding: 12px 18px; border-radius: 14px; font-weight: 600;
  box-shadow: var(--shadow); transition: .25s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: #7a1f2b; }

.wordmark { font-family: var(--display); letter-spacing: .02em; line-height: .9; }
.wordmark .o { color: var(--coral); }