/* Game Night shared theme: color tokens, base type, buttons, panels, playing cards. */
:root {
  --bg: #0c1422;
  --surface: #15213a;
  --surface-2: #1d2c4a;
  --line: #2c3f63;
  --text: #f4efe6;
  --muted: #a3b1c7;
  --accent: #f08a4b;
  --accent-ink: #1b120c;
  --gold: #f4c95d;
  --good: #4fc58a;
  --bad: #ef6461;
  --felt: #12513d;
  --felt-2: #0d3d2e;
  --felt-line: rgba(255, 255, 255, 0.10);
  --card-face: #fdfbf6;
  --card-ink: #1c2433;
  --card-red: #c8323c;
  --card-back-1: #2a4a8c;
  --card-back-2: #1d3566;
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  --p0: #f4c95d;
  --p1: #4fd1c5;
  --p2: #b794f4;
  --p3: #f687b3;
  --p4: #90cdf4;
  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #eef1f5;
    --surface: #ffffff;
    --surface-2: #f2f4f8;
    --line: #d5dbe5;
    --text: #18202e;
    --muted: #5b6678;
    --accent: #d9662a;
    --accent-ink: #ffffff;
    --gold: #b8860b;
    --good: #1f8a57;
    --bad: #c23b38;
    --felt: #1b6b50;
    --felt-2: #145640;
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    --p0: #b8860b;
    --p1: #0f8a80;
    --p2: #7c4dcc;
    --p3: #c53d7d;
    --p4: #2b7cc4;
    color-scheme: light;
  }
}
/* Same light tokens when the viewer picks Light with the theme switch. */
:root[data-theme="light"] {
  --bg: #eef1f5;
  --surface: #ffffff;
  --surface-2: #f2f4f8;
  --line: #d5dbe5;
  --text: #18202e;
  --muted: #5b6678;
  --accent: #d9662a;
  --accent-ink: #ffffff;
  --gold: #b8860b;
  --good: #1f8a57;
  --bad: #c23b38;
  --felt: #1b6b50;
  --felt-2: #145640;
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  --p0: #b8860b;
  --p1: #0f8a80;
  --p2: #7c4dcc;
  --p3: #c53d7d;
  --p4: #2b7cc4;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* beats display rules on classes and inline styles */
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 16px/1.45 var(--font); -webkit-tap-highlight-color: transparent; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 8px; }
.muted { color: var(--muted); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }

.btn {
  font: inherit; font-weight: 650; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 14px; background: var(--surface-2); color: var(--text); cursor: pointer;
  transition: transform .08s, background .15s, opacity .15s;
}
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--surface-2) 80%, var(--text)); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 85%, white); }
.btn.ghost { background: transparent; }
.btn:focus-visible, .input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.input { font: inherit; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }

/* ---------- Playing cards ---------- */
.pcard {
  --w: var(--card-w, 64px);
  position: relative; flex: none; width: var(--w); height: calc(var(--w) * 1.4);
  border-radius: calc(var(--w) * 0.11); background: var(--card-face); color: var(--card-ink);
  box-shadow: var(--shadow); border: 1px solid rgba(0, 0, 0, .18);
  font-weight: 800; user-select: none; -webkit-user-select: none;
  transition: transform .15s ease, box-shadow .15s ease, outline-color .15s;
}
.pcard.red { color: var(--card-red); }
.pcard .corner { position: absolute; top: 4%; left: 7%; display: grid; justify-items: center; line-height: .95; font-size: calc(var(--w) * 0.26); }
.pcard .corner .s { font-size: calc(var(--w) * 0.22); }
.pcard .corner.br { top: auto; left: auto; bottom: 4%; right: 7%; transform: rotate(180deg); }
.pcard .pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--w) * 0.52); opacity: .9; }
.pcard.back {
  background: repeating-linear-gradient(45deg, var(--card-back-1) 0 6px, var(--card-back-2) 6px 12px);
  border: 3px solid var(--card-face);
}