/* === Pirate Droid Design System === */

/* === Variables === */
:root {
  --font-sans:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --bg: #08080f;
  --surface: #10101a;
  --surface-2: #18182a;
  --border: #252540;
  --border-glow: #3a3a60;
  --text: #f0f0f8;
  --text-dim: #8888a8;
  --text-muted: #555570;
  --gold: #f0c040;
  --gold-dim: rgba(240, 192, 64, 0.12);
  --win: #3dd47a;
  --lose: #e04060;
  --zero: #40d0f0;
  --suit-red: #e83050;
  --card-bg: #f8f8ff;
  --card-text: #1a1a2a;
  --r0: #40d0f0;
  --r1: #e04060;
  --r2: #f0a030;
  --r3: #9060e0;
  --r4: #3dd47a;
  --r5: #e060a0;
  --r6: #6090f0;
  --radius: 8px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --card-w: 56px;
  --card-h: 80px;
  --table-bg: rgba(255, 255, 255, 0.03);
  --card-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 3px rgba(0, 0, 0, 0.4),
    inset 0 0 6px rgba(64, 208, 240, 0.03),
    inset 0 0 6px rgba(224, 96, 160, 0.02);
  --card-down-bg: #12122a;
  --card-down-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.4);
  --card-pattern-fg: #1a1a3a;
  --card-pattern-bg: #252550;
  --card-pattern-border: #3a3a60;
  --chip-border: rgba(255, 255, 255, 0.25);
  --chip-text: #fff;
  --res-pip-text: #fff;
  --modal-overlay: rgba(4, 4, 8, 0.85);
  --tut-overlay: rgba(4, 4, 8, 0.9);
  --pay-border: rgba(37, 37, 64, 0.5);
  --invert-color: #b080f0;
  --invert-bg: rgba(144, 96, 224, 0.08);
  --invert-border: rgba(144, 96, 224, 0.4);
  --invert-hover-bg: rgba(144, 96, 224, 0.15);
  --invert-active-bg: rgba(64, 208, 240, 0.1);
  --invert-active-shadow: 0 0 8px rgba(64, 208, 240, 0.2);
  --deal-bg: rgba(61, 212, 122, 0.1);
  --deal-border: rgba(61, 212, 122, 0.3);
  --deal-hover-bg: rgba(61, 212, 122, 0.18);
  --fold-border: rgba(224, 64, 96, 0.3);
  --fold-bg: rgba(224, 64, 96, 0.06);
  --balance-border: rgba(240, 192, 64, 0.15);
  --body-glow1: rgba(64, 208, 240, 0.03);
  --body-glow2: rgba(144, 96, 224, 0.025);
  --select-pulse-lo: rgba(64, 208, 240, 0.2);
  --select-pulse-hi: rgba(64, 208, 240, 0.45);
  --select-glow: rgba(64, 208, 240, 0.15);
  --focus-ring: rgba(64, 208, 240, 0.6);
}

/* === Reset === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(
      ellipse 90% 50% at 30% 10%,
      var(--body-glow1) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 70% 40% at 80% 90%,
      var(--body-glow2) 0%,
      transparent 50%
    );
  pointer-events: none;
  z-index: 0;
}

/* === Light Theme === */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f0eff5;
    --surface: #faf9ff;
    --surface-2: #e8e7f0;
    --border: #c5c3d4;
    --border-glow: #a8a6be;
    --text: #1b1a28;
    --text-dim: #4a4862;
    --text-muted: #706e88;
    --gold: #946b00;
    --gold-dim: rgba(148, 107, 0, 0.1);
    --win: #18794a;
    --lose: #c0203e;
    --zero: #0e7a93;
    --suit-red: #c02040;
    --card-bg: #ffffff;
    --card-text: #1b1a28;
    --r0: #0e7a93;
    --r1: #c0203e;
    --r2: #b87800;
    --r3: #6d40b8;
    --r4: #18794a;
    --r5: #b83878;
    --r6: #3868d0;
    --card-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.1),
      0 2px 8px rgba(0, 0, 0, 0.05);
    --card-down-bg: #d4d2e0;
    --card-down-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1);
    --card-pattern-fg: #b8b6cc;
    --card-pattern-bg: #cccade;
    --card-pattern-border: #a8a6be;
    --chip-border: rgba(0, 0, 0, 0.18);
    --chip-text: #fff;
    --res-pip-text: #fff;
    --modal-overlay: rgba(20, 18, 40, 0.6);
    --tut-overlay: rgba(20, 18, 40, 0.65);
    --pay-border: rgba(0, 0, 0, 0.08);
    --invert-color: #6d40b8;
    --invert-bg: rgba(109, 64, 184, 0.08);
    --invert-border: rgba(109, 64, 184, 0.3);
    --invert-hover-bg: rgba(109, 64, 184, 0.14);
    --invert-active-bg: rgba(14, 122, 147, 0.1);
    --invert-active-shadow: 0 0 8px rgba(14, 122, 147, 0.2);
    --deal-bg: rgba(24, 121, 74, 0.08);
    --deal-border: rgba(24, 121, 74, 0.3);
    --deal-hover-bg: rgba(24, 121, 74, 0.14);
    --fold-border: rgba(192, 32, 62, 0.25);
    --fold-bg: rgba(192, 32, 62, 0.05);
    --balance-border: rgba(148, 107, 0, 0.18);
    --body-glow1: rgba(64, 120, 240, 0.04);
    --body-glow2: rgba(144, 96, 224, 0.03);
    --table-bg: rgba(0, 0, 0, 0.025);
    --select-pulse-lo: rgba(14, 122, 147, 0.2);
    --select-pulse-hi: rgba(14, 122, 147, 0.4);
    --select-glow: rgba(14, 122, 147, 0.12);
    --focus-ring: rgba(14, 122, 147, 0.5);
  }
  .chip[data-val="5"] {
    background: #2850a8;
  }
  .chip[data-val="10"] {
    background: #18784a;
  }
  .chip[data-val="25"] {
    background: #a82840;
  }
  .chip[data-val="50"] {
    background: #603490;
  }
  .chip[data-val="100"] {
    background: #987020;
  }
  .win-flash {
    background: radial-gradient(
      ellipse at center,
      rgba(148, 107, 0, 0.15),
      transparent 70%
    );
  }
  .lose-flash {
    background: radial-gradient(
      ellipse at center,
      rgba(192, 32, 62, 0.12),
      transparent 70%
    );
  }
}

/* === Focus & Accessibility === */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.chip:focus-visible,
.side-btn:focus-visible,
.act-btn:focus-visible,
.icon-btn:focus-visible,
.tut-next:focus-visible,
.modal-close:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.card.selectable:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  transform: translateY(-4px);
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .flash-overlay {
    display: none !important;
  }
}