/* JokerHouse — base */
:root {
  --bg0: #07070d;
  --bg1: #0b0b12;
  --bg2: #101020;
  --card: #101022cc;
  --card2: #0d0d18cc;
  --text: #f4f3ff;
  --muted: #b8b6d6;
  --muted2: #8d8aa8;
  --gold: #f7c965;
  --gold2: #f3b93a;
  --emerald: #16f3b3;
  --red: #ff3d6e;
  --line: rgba(255, 255, 255, 0.10);
  --line2: rgba(255, 255, 255, 0.06);
  --shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
  --radius: 22px;
  --radius2: 30px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 20% 20%, rgba(22, 243, 179, 0.10), transparent 60%),
    radial-gradient(1000px 800px at 80% 30%, rgba(247, 201, 101, 0.12), transparent 55%),
    radial-gradient(1000px 900px at 50% 90%, rgba(255, 61, 110, 0.10), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
strong { color: var(--text); }

.container {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
}

.bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

/* Subtle SVG suit pattern */
.bg::before {
  content: "";
  position: absolute;
  inset: -30%;
  opacity: .22;
  transform: rotate(-10deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.10)' stroke-width='2'%3E%3Cpath d='M70 20c-10 0-18 8-18 18 0 14 18 26 18 26s18-12 18-26c0-10-8-18-18-18z'/%3E%3Cpath d='M70 120c12-10 18-20 18-28 0-10-8-18-18-18s-18 8-18 18c0 8 6 18 18 28z'/%3E%3Cpath d='M20 70c0-10 8-18 18-18 14 0 26 18 26 18S52 88 38 88c-10 0-18-8-18-18z'/%3E%3Cpath d='M120 70c0 10-8 18-18 18-14 0-26-18-26-18s12-18 26-18c10 0 18 8 18 18z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 160px;
  background-repeat: repeat;
}

.FX-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  mix-blend-mode: overlay;
}

/* shared small helpers */
.sep { color: rgba(255, 255, 255, 0.25); margin: 0 8px; }
.muted { color: var(--muted); }

.link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 201, 101, 0.35);
}
.link:hover { border-bottom-color: rgba(247, 201, 101, 0.75); }

.kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.30);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  font-weight: 700;
  letter-spacing: .2px;
}
.btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}
.btn--primary {
  background: linear-gradient(180deg, rgba(247, 201, 101, 0.95), rgba(243, 185, 58, 0.92));
  border-color: rgba(255, 255, 255, 0.18);
  color: #15121a;
  box-shadow: 0 18px 50px rgba(243, 185, 58, 0.18), 0 18px 60px rgba(0, 0, 0, 0.35);
}
.btn--primary:hover { box-shadow: 0 22px 70px rgba(243, 185, 58, 0.22), 0 18px 60px rgba(0, 0, 0, 0.35); }
.btn--ghost { background: rgba(255, 255, 255, 0.04); }
.btn--tiny { padding: 10px 12px; border-radius: 12px; font-weight: 800; min-width: 44px; }