/* ============================================================
   Joker Poker — Casino Noir
   ============================================================ */

:root {
  --bg-0:        #0a0708;
  --bg-1:        #0f0a0b;
  --bg-2:        #16100f;
  --bg-3:        #1f1715;
  --panel:       #1a1311;
  --panel-2:     #211816;
  --line:        #2a201d;
  --line-2:      #3a2a25;

  --bordeaux:    #4a0e1a;
  --bordeaux-2:  #5a131f;
  --crimson:     #8b1929;
  --crimson-2:   #b5253a;
  --crimson-glow:#d6334d;

  --gold:        #c89a2a;
  --gold-2:      #e8c156;
  --gold-3:      #f7df8a;
  --gold-dim:    #8a6a1c;

  --ink:         #f4ead8;
  --ink-2:       #d8c9a8;
  --ink-3:       #a89878;
  --ink-4:       #786850;
  --ink-dim:     #5a4d3a;

  --felt-1:      #aa1f33;
  --felt-2:      #6e0e1d;
  --felt-3:      #2a050d;
  --felt-rail-1: #3a2a14;
  --felt-rail-2: #1a1208;

  --shadow-1:    0 4px 14px rgba(0,0,0,0.5);
  --shadow-2:    0 12px 32px rgba(0,0,0,0.65);
  --shadow-3:    0 24px 64px rgba(0,0,0,0.8);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  --serif:  "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --sans:   "Inter", -apple-system, "Segoe UI", sans-serif;
  --mono:   "JetBrains Mono", "Consolas", monospace;
}

/* Light theme variant — applied when [data-theme="light"] */
[data-theme="light"] {
  --bg-0:        #f3ebda;
  --bg-1:        #ece2cb;
  --bg-2:        #e2d6ba;
  --bg-3:        #d8caa8;
  --panel:       #faf3df;
  --panel-2:     #f5ecd2;
  --line:        #d6c79f;
  --line-2:      #bca878;
  --ink:         #1a1108;
  --ink-2:       #3a2c14;
  --ink-3:       #6a5630;
  --ink-4:       #8a7448;
  --ink-dim:     #b09a68;
  --bordeaux:    #5a1320;
  --bordeaux-2:  #7a1a2a;
  --crimson:     #a51e30;
  --gold:        #9a7a1a;
  --gold-2:      #c89a2a;
  --gold-3:      #d6ad3a;
  --shadow-1:    0 4px 14px rgba(80,40,10,0.18);
  --shadow-2:    0 12px 32px rgba(80,40,10,0.22);
  --shadow-3:    0 24px 64px rgba(80,40,10,0.3);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--ink); font-family: var(--sans); }
body { min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* ===== Type ===== */
.serif { font-family: var(--serif); font-weight: 500; letter-spacing: 0.01em; }
.mono  { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.gold-text {
  background: linear-gradient(180deg, var(--gold-3) 0%, var(--gold-2) 38%, var(--gold) 58%, #8a6a1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4));
}

/* ===== Ambient backdrop (NOT on tables) ===== */
.noir-stage {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(139,25,41,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 88%, rgba(200,154,42,0.10) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, #1a1110 0%, var(--bg-0) 70%);
  overflow: hidden;
  color: var(--ink);
}
.noir-stage::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, transparent 60%, rgba(0,0,0,0.6) 100%),
    radial-gradient(ellipse at 50% 100%, transparent 60%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Drifting suit glyphs */
.noir-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.noir-deco .gl {
  position: absolute;
  font-family: var(--serif);
  user-select: none;
  color: var(--gold);
  opacity: 0.05;
  font-size: 220px;
  line-height: 1;
}
.noir-deco .gl.red { color: var(--crimson); opacity: 0.06; }
.noir-deco .gl.g1 { top: -30px;  left: -40px;  animation: drift-a 28s ease-in-out infinite; }
.noir-deco .gl.g2 { bottom: -60px; right: -20px; animation: drift-b 34s ease-in-out infinite; font-size: 280px; }
.noir-deco .gl.g3 { top: 40%; left: 45%; font-size: 320px; opacity: 0.035; animation: drift-c 40s ease-in-out infinite; }
.noir-deco .gl.g4 { top: 18%; right: 22%; font-size: 140px; animation: drift-b 24s ease-in-out infinite; }
@keyframes drift-a { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(40px,30px) rotate(8deg); } }
@keyframes drift-b { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-50px,-30px) rotate(-6deg); } }
@keyframes drift-c { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(30px,-40px) rotate(10deg); } }

/* slow pulsing vignette glow */
.noir-deco .glow {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.18;
}
.noir-deco .glow.red { background: var(--crimson); top: -200px; left: -200px; animation: pulse-a 18s ease-in-out infinite; }
.noir-deco .glow.gold { background: var(--gold); bottom: -250px; right: -200px; animation: pulse-b 22s ease-in-out infinite; }
@keyframes pulse-a { 0%,100% { transform: translate(0,0) scale(1); opacity: 0.18; } 50% { transform: translate(60px,40px) scale(1.1); opacity: 0.26; } }
@keyframes pulse-b { 0%,100% { transform: translate(0,0) scale(1); opacity: 0.14; } 50% { transform: translate(-50px,-30px) scale(1.15); opacity: 0.22; } }

/* particle dust motes */
.noir-deco .mote {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--gold-3);
  border-radius: 50%;
  opacity: 0.4;
  box-shadow: 0 0 4px var(--gold-2);
}
@keyframes mote-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.6; }
  100% { transform: translateY(-100vh) translateX(40px); opacity: 0; }
}

/* ===== Top chrome (persistent across screens) ===== */
.topbar {
  display: flex; align-items: center;
  gap: 18px;
  padding: 16px 28px;
  background: linear-gradient(180deg, rgba(10,7,8,0.95), rgba(10,7,8,0.7));
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 10;
}
.brand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.08em;
  display: flex; align-items: center; gap: 10px;
}
.brand .pip {
  display: inline-block;
  width: 9px; height: 9px;
  background: var(--crimson-2);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--crimson-2);
}
.brand .dot-anim { animation: brand-pulse 2.6s ease-in-out infinite; }
@keyframes brand-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.78); } }

.nav-pills { display: flex; gap: 4px; margin-left: 18px; }
.nav-pills a {
  color: var(--ink-3);
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: var(--r-md);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
}
.nav-pills a:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
.nav-pills a.active { color: var(--gold-2); background: rgba(200,154,42,0.08); }

.top-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.streak-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px;
  background: linear-gradient(180deg, rgba(139,25,41,0.25), rgba(139,25,41,0.12));
  border: 1px solid rgba(213,51,77,0.35);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.streak-pill .flame {
  font-size: 16px;
  filter: drop-shadow(0 0 6px rgba(231,121,40,0.6));
  animation: flicker 1.6s ease-in-out infinite;
}
@keyframes flicker {
  0%,100% { transform: scale(1) rotate(-2deg); }
  25%     { transform: scale(1.08) rotate(2deg); }
  50%     { transform: scale(0.96) rotate(-1deg); }
  75%     { transform: scale(1.04) rotate(1deg); }
}
.streak-pill .num { color: var(--gold-2); font-family: var(--mono); }
.streak-pill .lbl { color: var(--ink-3); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }

.xp-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 13px;
}
.xp-pill .lvl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-3), var(--gold), #8a6a1c);
  color: #1a1108;
  font-weight: 800;
  font-size: 12px;
  font-family: var(--mono);
  box-shadow: 0 0 10px rgba(200,154,42,0.4), inset 0 1px 1px rgba(255,255,255,0.4);
}
.xp-pill .bar {
  width: 90px; height: 5px;
  background: rgba(255,255,255,0.05);
  border-radius: 4px; overflow: hidden;
}
.xp-pill .bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold-2), var(--gold-3));
  box-shadow: 0 0 6px rgba(232,193,86,0.5);
}
.xp-pill .xp-num { font-family: var(--mono); color: var(--ink-2); font-size: 11px; }

.icon-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.18s;
}
.icon-btn:hover { color: var(--gold-2); border-color: var(--gold-dim); background: rgba(200,154,42,0.08); }
.icon-btn.on    { color: var(--gold-2); border-color: var(--gold-dim); }

/* ===== Buttons ===== */
.btn-noir {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.04);
}
.btn-noir:hover { border-color: var(--gold-dim); color: var(--gold-2); transform: translateY(-1px); }
.btn-noir:active { transform: translateY(0); }

.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px;
  background: linear-gradient(180deg, var(--gold-3) 0%, var(--gold-2) 40%, var(--gold) 70%, var(--gold-dim) 100%);
  border: 1px solid #6a4e10;
  color: #1a0e02;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(200,154,42,0.3), inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn-gold:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(200,154,42,0.45), inset 0 1px 0 rgba(255,255,255,0.6); }
.btn-gold:active { transform: translateY(0); }

.btn-crimson {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px;
  background: linear-gradient(180deg, var(--crimson-2), var(--crimson) 50%, var(--bordeaux) 100%);
  border: 1px solid #5a0d18;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(139,25,41,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn-crimson:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ===== Cards (general info panels) ===== */
.panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

/* gold corner ornament for special panels */
.panel.gilded {
  position: relative;
  border-color: var(--gold-dim);
  background:
    linear-gradient(180deg, rgba(200,154,42,0.06), transparent 30%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
}
.panel.gilded::before, .panel.gilded::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--gold-2);
  pointer-events: none;
}
.panel.gilded::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.panel.gilded::after  { bottom: 8px; right: 8px; border-left: none; border-top: none; }

/* ===== Playing cards (decorative — not the actual table cards) ===== */
.pcard {
  position: relative;
  display: inline-block;
  width: 64px; height: 92px;
  border-radius: 7px;
  background: linear-gradient(170deg, #fbf4e4 0%, #ede1c4 100%);
  font-family: "Georgia", serif;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(0,0,0,0.05),
    inset 0 0 0 3px rgba(255,255,255,0.5);
  user-select: none;
  flex: 0 0 auto;
}
.pcard.red   { color: var(--crimson); }
.pcard.black { color: #1a1108; }
.pcard .ctl, .pcard .cbr {
  position: absolute; line-height: 1; font-weight: 700; font-size: 14px;
  text-align: center; letter-spacing: -0.04em;
}
.pcard .ctl { top: 6px; left: 7px; }
.pcard .cbr { bottom: 6px; right: 7px; transform: rotate(180deg); }
.pcard .ctl .r, .pcard .cbr .r { display: block; font-size: 14px; }
.pcard .ctl .s, .pcard .cbr .s { display: block; font-size: 11px; margin-top: 1px; }
.pcard .mid {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: 30px; line-height: 1;
}
.pcard.lg { width: 88px; height: 124px; }
.pcard.lg .ctl, .pcard.lg .cbr { font-size: 18px; }
.pcard.lg .ctl .r, .pcard.lg .cbr .r { font-size: 18px; }
.pcard.lg .ctl .s, .pcard.lg .cbr .s { font-size: 14px; }
.pcard.lg .mid { font-size: 42px; }
.pcard.sm { width: 44px; height: 64px; border-radius: 5px; }
.pcard.sm .ctl, .pcard.sm .cbr { font-size: 10px; top: 4px; left: 4px; }
.pcard.sm .cbr { bottom: 4px; right: 4px; top: auto; left: auto; }
.pcard.sm .ctl .r, .pcard.sm .cbr .r { font-size: 10px; }
.pcard.sm .ctl .s, .pcard.sm .cbr .s { font-size: 8px; }
.pcard.sm .mid { font-size: 18px; }
.pcard.back {
  background:
    repeating-linear-gradient(45deg, #4a0e1a 0 4px, #6b1424 4px 8px),
    #4a0e1a;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.55),
    inset 0 0 0 1px #000,
    inset 0 0 0 3px var(--gold-2),
    inset 0 0 0 5px #4a0e1a;
}
.pcard.back .ctl, .pcard.back .cbr, .pcard.back .mid { display: none; }
.pcard.back::after {
  content: "♠";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  color: var(--gold-2);
  font-size: 32px;
  text-shadow: 0 0 6px rgba(200,154,42,0.6);
}

/* Chip */
.chip {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  color: var(--ink);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.55),
    inset 0 1px 1px rgba(255,255,255,0.3),
    inset 0 -2px 3px rgba(0,0,0,0.4);
  border: 3px dashed rgba(255,255,255,0.3);
  background: var(--crimson);
}
.chip.gold  { background: linear-gradient(180deg, var(--gold-3), var(--gold), var(--gold-dim)); color: #1a0e02; border-color: rgba(255,255,255,0.4); }
.chip.black { background: linear-gradient(180deg, #2a2018, #0a0608); border-color: rgba(255,255,255,0.2); }
.chip.green { background: linear-gradient(180deg, #2f8a3d, #1a5a25); }
.chip.blue  { background: linear-gradient(180deg, #1f56b3, #0e3072); }

/* ===== Footer ===== */
.scrn-foot {
  margin-top: auto;
  display: flex; align-items: center; gap: 18px;
  padding: 14px 28px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ===== Screen frame (used inside artboards) ===== */
.screen {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  position: relative;
  background: var(--bg-0);
  color: var(--ink);
  overflow: hidden;
}

/* ===== Misc utility ===== */
.row { display: flex; gap: 12px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 12px; }
.spacer { flex: 1; }

.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--gold-dim) 50%, var(--line-2) 80%, transparent);
}

.divider-orn {
  display: flex; align-items: center; gap: 14px;
  color: var(--gold-2);
  font-size: 14px;
}
.divider-orn::before, .divider-orn::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim));
}
.divider-orn::after { background: linear-gradient(90deg, var(--gold-dim), transparent); }