/* ============================================================
   DESIGN TOKENS — Dark (default) & Light (Ivory + Crimson)
   ============================================================ */
:root, [data-theme="sakura"], [data-theme="dark"] {
  --bg: #0E0D12;
  --wash-a: rgba(214, 51, 89, 0.09);
  --wash-b: rgba(214, 51, 89, 0.04);
  --surface: #17161C;
  --surface-2: #1D1C24;
  --surface-deep: #121016;
  --elevated: #232129;
  --text: #F2EFF4;
  --text-muted: #9B95A6;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
  --input-bg: #1D1C24;
  --accent: #D63359;
  --accent-hover: #B82A4C;
  --accent-rgb: 214, 51, 89;
  --accent-b-rgb: 128, 38, 66;
  --accent-soft: rgba(214, 51, 89, 0.14);
  --on-accent: #FFFFFF;
  --gradient: linear-gradient(135deg, #D63359 0%, #8E2342 100%);
  --glow-accent: rgba(214, 51, 89, 0.30);
  --danger: #FF5C7A;
  --danger-rgb: 255, 92, 122;
  --danger-soft: rgba(255, 92, 122, 0.12);
  --success: #5BD6A0;
  --success-rgb: 91, 214, 160;
  --success-soft: rgba(91, 214, 160, 0.12);
  --gold: #FFD166;
  --gold-soft: rgba(255, 209, 102, 0.12);
  --gold-border: rgba(255, 209, 102, 0.26);
  --nav-bg: rgba(15, 14, 19, 0.92);
  --bar-line: rgba(255, 255, 255, 0.07);
  --overlay: rgba(8, 7, 12, 0.74);
  --scrim: rgba(11, 10, 20, 0.62);
  --skeleton-hi: rgba(255, 255, 255, 0.06);
  --chip-bg: rgba(127, 127, 127, 0.10);
  --hover-soft: rgba(127, 127, 127, 0.06);

  --card: var(--surface);
  --card-2: var(--surface-2);
  --glow-purple: var(--glow-accent);
  --grad-a: var(--accent);
  --grad-b: var(--accent-hover);

  /* legacy aliases */
  --stroke: var(--border);
  --stroke-strong: var(--border-strong);
  --muted: var(--text-muted);
  --cyan: var(--accent);

  --tabbar-h: 64px;
  --topbar-h: 56px;
  --shadow: 0 10px 28px rgba(0,0,0,.35);
  --shadow-soft: 0 6px 18px rgba(0,0,0,.20);
  --radius: 18px;
  --radius-sm: 12px;

  /* display face for headings + big numerals (loaded in index.html) */
  --font-display: 'Bricolage Grotesque', 'Manrope', -apple-system, sans-serif;

  /* game-poster stages are always dark rooms, in every theme */
  --stage-text: #F5F0FA;
  --stage-sub: rgba(235, 228, 248, 0.62);
  --stage-gold: #FFDF9E;

  /* rarity identity — identical in both themes */
  --r-common: #5B8DEF;
  --r-rare: #FF9E45;
  --r-legendary: #FFD166;
  --r-mythic: #5EE7F7;
  --r-astral: #B18CFF;
  --r-seraphic: #FF9ECF;
}

[data-theme="ivory"], [data-theme="light"] {
  --bg: #F6F1E7;
  --wash-a: rgba(179, 36, 75, 0.06);
  --wash-b: rgba(179, 36, 75, 0.02);
  --surface: #FDFBF5;
  --surface-2: #F3EDDF;
  --surface-deep: #EFE7D6;
  --elevated: #FFFFFF;
  --text: #26221C;
  --text-muted: #8A8172;
  --border: rgba(90, 70, 45, 0.14);
  --border-strong: rgba(90, 70, 45, 0.24);
  --input-bg: #FFFDF7;
  --accent: #B3244B;
  --accent-hover: #96203F;
  --accent-rgb: 179, 36, 75;
  --accent-b-rgb: 122, 26, 52;
  --accent-soft: rgba(179, 36, 75, 0.10);
  --on-accent: #FFFFFF;
  --gradient: linear-gradient(135deg, #C22B52 0%, #8E2342 100%);
  --glow-accent: rgba(179, 36, 75, 0.18);
  --danger: #C42B55;
  --danger-rgb: 196, 43, 85;
  --danger-soft: rgba(196, 43, 85, 0.10);
  --success: #2E9E6B;
  --success-rgb: 46, 158, 107;
  --success-soft: rgba(46, 158, 107, 0.10);
  --gold: #B8860B;
  --gold-soft: rgba(184, 134, 11, 0.10);
  --gold-border: rgba(184, 134, 11, 0.28);
  --nav-bg: rgba(250, 246, 238, 0.94);
  --bar-line: rgba(90, 70, 45, 0.12);
  --overlay: rgba(50, 40, 28, 0.45);
  --scrim: rgba(40, 32, 20, 0.55);
  --skeleton-hi: rgba(60, 50, 30, 0.06);

  --shadow: 0 8px 22px rgba(110,85,45,.12);
  --shadow-soft: 0 4px 14px rgba(110,85,45,.08);}

/* ============================================================ */
:root {
  font-size: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { height: 100%; }

body {
  background:
    radial-gradient(1100px 480px at 50% -220px, var(--wash-a), transparent 62%),
    radial-gradient(900px 400px at 108% 32%, var(--wash-b), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.45;
  min-height: 100%;
  overscroll-behavior-y: none;
}

#app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

img { display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; border: none; background: none; cursor: pointer; }

input, textarea, select {
  font-family: inherit;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
  width: 100%;
  transition: border-color .18s ease;
}
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
::selection { background: rgba(var(--accent-rgb), 0.32); }
input::placeholder, textarea::placeholder { color: var(--muted); }

::-webkit-scrollbar { width: 0; height: 0; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.2px; }

.muted { color: var(--muted); }
.gold { color: var(--gold); }
.success-text { color: var(--success); }
.danger-text { color: var(--danger); }
.cyan-text { color: var(--cyan); }

.page {
  flex: 1;
  padding: 12px 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 20px);
  animation: pageIn .22s ease both;
}
/* tabbar hidden (immersive game pages) — no dock offset needed */
body.immersive-page .page {
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   EXTRA THEMES — Oni Violet (dark), Soda Mint (light),
   Kitsune Gold (dark). Frontend-only; backend still uses
   light/dark mapping (see js/theme.js).
   ============================================================ */
[data-theme="oni"] {
  --bg: #0B0B18;
  --wash-a: rgba(139, 92, 246, 0.12);
  --wash-b: rgba(34, 211, 238, 0.06);
  --surface: #141428;
  --surface-2: #1A1A32;
  --surface-deep: #0D0D1C;
  --elevated: #20203A;
  --text: #EDEBFF;
  --text-muted: #9A94C7;
  --border: rgba(167, 139, 250, 0.14);
  --border-strong: rgba(167, 139, 250, 0.28);
  --input-bg: #1A1A32;
  --accent: #8B5CF6;
  --accent-hover: #7C4DFF;
  --accent-rgb: 139, 92, 246;
  --accent-b-rgb: 76, 42, 165;
  --accent-soft: rgba(139, 92, 246, 0.14);
  --on-accent: #FFFFFF;
  --gradient: linear-gradient(135deg, #8B5CF6 0%, #4C2AA5 100%);
  --glow-accent: rgba(139, 92, 246, 0.32);
  --gold: #FFD166;
  --gold-soft: rgba(255, 209, 102, 0.12);
  --gold-border: rgba(255, 209, 102, 0.26);
  --nav-bg: rgba(11, 11, 24, 0.92);
  --bar-line: rgba(167, 139, 250, 0.12);
  --overlay: rgba(6, 6, 16, 0.74);
  --scrim: rgba(8, 8, 22, 0.62);
  --skeleton-hi: rgba(167, 139, 250, 0.08);
  --shadow: 0 10px 28px rgba(0,0,0,.45);
  --shadow-soft: 0 6px 18px rgba(0,0,0,.28);
}

[data-theme="soda"] {
  --bg: #EAF6F1;
  --wash-a: rgba(13, 148, 136, 0.08);
  --wash-b: rgba(13, 148, 136, 0.03);
  --surface: #FDFEFB;
  --surface-2: #E4F0E9;
  --surface-deep: #D8E8DF;
  --elevated: #FFFFFF;
  --text: #17322B;
  --text-muted: #6E8A80;
  --border: rgba(23, 90, 78, 0.14);
  --border-strong: rgba(23, 90, 78, 0.26);
  --input-bg: #FFFFFF;
  --accent: #0D9488;
  --accent-hover: #0B7E75;
  --accent-rgb: 13, 148, 136;
  --accent-b-rgb: 9, 96, 89;
  --accent-soft: rgba(13, 148, 136, 0.10);
  --on-accent: #FFFFFF;
  --gradient: linear-gradient(135deg, #14B8A6 0%, #0B6E64 100%);
  --glow-accent: rgba(13, 148, 136, 0.20);
  --gold: #B8860B;
  --gold-soft: rgba(184, 134, 11, 0.10);
  --gold-border: rgba(184, 134, 11, 0.28);
  --nav-bg: rgba(240, 249, 245, 0.94);
  --bar-line: rgba(23, 90, 78, 0.12);
  --overlay: rgba(20, 45, 38, 0.45);
  --scrim: rgba(18, 40, 34, 0.55);
  --skeleton-hi: rgba(23, 90, 78, 0.06);
  --shadow: 0 8px 22px rgba(30, 90, 78, .12);
  --shadow-soft: 0 4px 14px rgba(30, 90, 78, .08);
}

/* light themes: deepen the palest rarity inks so badges stay legible on white */
[data-theme="ivory"], [data-theme="light"], [data-theme="soda"] {
  --r-legendary: #9A7208;
  --r-mythic: #0B8A9E;
  --r-seraphic: #C2437F;
  --r-astral: #7C5CD6;
}

[data-theme="kitsune"] {
  --bg: #100C08;
  --wash-a: rgba(245, 158, 11, 0.10);
  --wash-b: rgba(245, 158, 11, 0.04);
  --surface: #1A140D;
  --surface-2: #221A10;
  --surface-deep: #120D07;
  --elevated: #292015;
  --text: #F7EEDF;
  --text-muted: #A89880;
  --border: rgba(245, 180, 80, 0.14);
  --border-strong: rgba(245, 180, 80, 0.28);
  --input-bg: #221A10;
  --accent: #F59E0B;
  --accent-hover: #D98706;
  --accent-rgb: 245, 158, 11;
  --accent-b-rgb: 146, 90, 8;
  --accent-soft: rgba(245, 158, 11, 0.13);
  --on-accent: #2A1A00;
  --gradient: linear-gradient(135deg, #FBBF24 0%, #B45309 100%);
  --glow-accent: rgba(245, 158, 11, 0.30);
  --nav-bg: rgba(16, 12, 8, 0.92);
  --bar-line: rgba(245, 180, 80, 0.12);
  --overlay: rgba(10, 7, 4, 0.74);
  --scrim: rgba(14, 10, 5, 0.62);
  --skeleton-hi: rgba(245, 180, 80, 0.08);
  --shadow: 0 10px 28px rgba(0,0,0,.45);
  --shadow-soft: 0 6px 18px rgba(0,0,0,.28);
}