/* ===========================================================
   Winmoor Casino Hotel — design tokens & component styles
   A single committed dark "after-hours" palette: obsidian felt,
   aged brass, and jade — built for a casino hotel brand, not a
   generic SaaS dark mode.
   =========================================================== */

:root{
  --bg: #0b0f0e;
  --bg-2: #0e1513;
  --surface: #131c19;
  --surface-2: #182420;
  --surface-3: #1f2d27;
  --border: #26362f;
  --border-soft: #1c2823;

  --ink: #f3ecd9;
  --ink-dim: #cfc8b4;
  --muted: #93a49b;
  --muted-2: #6f8177;

  --gold: #d8ae67;
  --gold-bright: #ecc888;
  --gold-deep: #a97c3c;
  --jade: #3fa68b;
  --jade-deep: #256b58;
  --crimson: #9c3446;
  --crimson-bright: #c14a5f;

  --shadow-lg: 0 30px 60px -20px rgba(0,0,0,0.65);
  --shadow-sm: 0 8px 20px -10px rgba(0,0,0,0.55);

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  color-scheme: dark;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.font-display{
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
  text-wrap: balance;
}

h1,h2,h3,h4{ text-wrap: balance; }

.text-gold{ color: var(--gold); }
.text-jade{ color: var(--jade); }
.text-muted{ color: var(--muted); }
.text-ink-dim{ color: var(--ink-dim); }

.bg-surface{ background: var(--surface); }
.bg-surface-2{ background: var(--surface-2); }
.border-soft{ border-color: var(--border); }

.eyebrow{
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

.rule-gold{
  height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
}

.felt-divider{
  position: relative;
  height: 64px;
  background: var(--bg-2);
  clip-path: polygon(0 0, 100% 60%, 100% 100%, 0 100%);
}

.card-suit{
  position: absolute;
  opacity: 0.06;
  font-size: 9rem;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  font-family: Georgia, serif;
}

.btn-gold{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  color: #1a1206;
  font-weight: 700;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-gold:hover{ transform: translateY(-2px); filter: brightness(1.06); box-shadow: var(--shadow-lg); }

.btn-outline{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 0.82rem 1.7rem;
  border-radius: 999px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.btn-outline:hover{ border-color: var(--gold); background: rgba(216,174,103,0.06); }

.chip{
  width: 46px; height: 46px; border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight: 600;
  border: 2px dashed rgba(243,236,217,0.35);
  color: var(--ink);
  background: radial-gradient(circle at 35% 30%, var(--surface-3), var(--surface));
}

.nav-link{
  position: relative;
  color: var(--ink-dim);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  padding-bottom: 4px;
}
.nav-link::after{
  content:"";
  position:absolute; left:0; bottom:0;
  height:1px; width:0%;
  background: var(--gold);
  transition: width 0.25s ease;
}
.nav-link:hover{ color: var(--ink); }
.nav-link:hover::after{ width:100%; }
.nav-link.active{ color: var(--gold); }
.nav-link.active::after{ width:100%; }

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.card-tilt{
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.card-tilt:hover{
  transform: translateY(-6px);
  border-color: rgba(216,174,103,0.45);
  box-shadow: var(--shadow-lg);
}

.stat-mono{
  font-family: 'Fraunces', serif;
  font-variant-numeric: tabular-nums;
}

.diamond-badge{
  width: 34px; height: 34px;
  transform: rotate(45deg);
  border: 1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
}
.diamond-badge > span{ transform: rotate(-45deg); }

.marquee-track{
  display:flex;
  gap: 3rem;
  animation: marquee 32s linear infinite;
  width: max-content;
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.prose-legal h2{
  font-family:'Fraunces', serif;
  color: var(--gold);
  margin-top: 2.75rem;
  margin-bottom: 0.9rem;
  font-size: 1.5rem;
}
.prose-legal h3{
  color: var(--ink);
  margin-top: 1.6rem;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
}
.prose-legal p, .prose-legal li{
  color: var(--ink-dim);
  line-height: 1.85;
  font-size: 0.98rem;
}
.prose-legal ul{ list-style: none; padding-left: 0; margin: 0.75rem 0; display:flex; flex-direction:column; gap:0.6rem; }
.prose-legal li{ padding-left: 1.4rem; position: relative; }
.prose-legal li::before{
  content:"♠";
  position:absolute; left:0; top:0.05em;
  color: var(--gold);
  font-size: 0.85em;
}
.prose-legal a{ color: var(--jade); text-decoration: underline; text-underline-offset: 3px; }
.prose-legal strong{ color: var(--ink); }

[x-cloak]{ display:none !important; }

::selection{ background: var(--gold-deep); color: #1a1206; }

.scrollbar-thin::-webkit-scrollbar{ height:6px; width:6px; }
.scrollbar-thin::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 999px; }