/*
Theme Name: PPC2 Velvet Vault
Author: PPC2
Description: Full redesign theme layer. Layout + game structure live in core-layout.css.
Version: 1.0
*/

@import url("core-layout.css");
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;800&family=Cormorant+Garamond:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;600&display=swap");

/* =========================
   TOKENS (VELVET VAULT)
========================= */
:root{
  --bg-0:#1a1310;
  --bg-1:#241a15;
  --bg-2:#2d2019;
  --bg-3:#17100d;
  --ink-0:#f7efe6;
  --ink-1:#e8d8c4;
  --ink-2:#c9b79f;
  --ink-3:#a6927d;
  --line:#3a2a22;
  --line-strong:#5a3f32;
  --accent:#b58a52;
  --accent-2:#7c4b35;
  --accent-3:#e2c28a;
  --velvet:#6a1f2a;
  --velvet-dark:#3f0f16;
  --velvet-glow:rgba(160,40,55,.35);
  --warning:#e9b84c;
  --success:#6fa372;
  --shadow:0 18px 36px rgba(0,0,0,.35);
  --shadow-tight:0 8px 18px rgba(0,0,0,.28);
  --radius:3px;
  --radius-lg:16px;
  --radius-xl:24px;
  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.6rem;
  --space-4:2.6rem;
  --space-5:3.8rem;
  --space-6:5rem;
  --font-ui:"Source Sans 3", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display:"Cinzel", "Times New Roman", serif;
  --font-serif:"Cormorant Garamond", Georgia, serif;
  --font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --glow:0 0 0 2px rgba(181,138,82,.35), 0 0 22px rgba(181,138,82,.25);
  --card-bg:linear-gradient(180deg, rgba(54,39,31,.82), rgba(30,22,18,.92));
  --rail-bg:linear-gradient(90deg, rgba(21,15,12,.7), rgba(44,31,25,.85), rgba(21,15,12,.7));
  --panel-bg:linear-gradient(180deg, rgba(36,26,21,.95), rgba(22,16,13,.98));
  --paper-bg:linear-gradient(180deg, #f8f2e7, #efe1cf);
}

/* =========================
   BASE
========================= */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color:var(--ink-0);
  font-family:var(--font-ui);
  line-height:1.7;
  background:var(--bg-0);
  letter-spacing:.01em;
}
img{ max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
p{ color:var(--ink-1); margin:.7rem 0; }

h1,h2,h3,h4{
  margin:0 0 .7rem;
  line-height:1.1;
  font-family:var(--font-display);
  letter-spacing:.03em;
}

:focus{ outline:none; }
:focus-visible{ box-shadow:0 0 0 3px rgba(226,194,138,.35); }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* =========================
   ACCESSIBILITY
========================= */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; padding:.6rem .9rem;
  background:#fff; color:#111; border:1px solid #222; box-shadow:var(--shadow); z-index:9999;
}

/* =========================
   BACKGROUND TEXTURE
========================= */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  z-index: -1;
  background:
    repeating-linear-gradient(90deg, rgba(84,56,38,.15) 0 2px, rgba(63,42,30,.12) 2px 6px, transparent 6px 18px),
    repeating-linear-gradient(0deg, rgba(25,18,14,.2) 0 1px, transparent 1px 24px),
    radial-gradient(1200px 800px at 20% -10%, rgba(181,138,82,.25), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(124,75,53,.35), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, rgba(30,22,18,.9), rgba(18,13,10,.95));
}
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    repeating-radial-gradient(circle at 30% 20%, rgba(255,255,255,.03) 0 2px, transparent 2px 6px),
    repeating-radial-gradient(circle at 70% 50%, rgba(0,0,0,.2) 0 3px, transparent 3px 8px);
  opacity:.25;
}

/* =========================
   GLOBAL ELEMENTS
========================= */
.container{
  position: relative;
}

header{
  border-bottom:1px solid var(--line-strong);
  background:linear-gradient(180deg, rgba(25,18,14,.92), rgba(14,10,8,.96));
  box-shadow:var(--shadow-tight);
}

.header-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding:1.2rem 0;
}

.logo{
  font-family:var(--font-display);
  font-size:1.4rem;
  text-transform:uppercase;
  letter-spacing:.24em;
  position:relative;
  padding:.4rem .8rem;
  border:1px solid var(--line-strong);
  background:var(--rail-bg);
  box-shadow:inset 0 0 0 1px rgba(226,194,138,.15);
}
.logo::before,
.logo::after{
  content:"";
  position:absolute;
  top:50%;
  width:30px;
  height:1px;
  background:var(--accent-3);
  opacity:.6;
}
.logo::before{ left:-34px; }
.logo::after{ right:-34px; }

.user-menu{
  display:flex;
  align-items:center;
  gap:var(--space-2);
}

.auth-buttons{
  display:flex;
  gap:.9rem;
  align-items:center;
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.08em;
}
.auth-buttons a{
  padding:.4rem .9rem;
  border:1px solid var(--line-strong);
  text-transform:uppercase;
  background:rgba(22,16,13,.8);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.auth-buttons a:hover{ transform:translateY(-1px); box-shadow:var(--glow); background:rgba(36,26,21,.9); }

.user-info{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  font-family:var(--font-serif);
  font-size:.95rem;
  color:var(--ink-2);
}
.user-info .mark{ color:var(--accent-3); font-weight:600; margin:0 .3rem; }
.points{
  padding:.2rem .6rem;
  border:1px solid var(--line-strong);
  background:rgba(20,14,11,.9);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.78rem;
}
.nav-link{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.75rem;
  padding:.3rem .6rem;
  border-bottom:1px solid transparent;
}
.nav-link:hover{ border-bottom-color:var(--accent-3); }
.logout-form .btn{
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg, rgba(181,138,82,.95), rgba(118,83,49,.95));
  color:#1b120e;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:.4rem .9rem;
}

/* =========================
   HERO + BROADCAST
========================= */
.broadcast{
  padding:var(--space-5) 0 var(--space-6);
  position:relative;
}
.broadcast::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:6px;
  background:linear-gradient(90deg, transparent, rgba(226,194,138,.6), transparent);
  opacity:.7;
}
.vault-rail{
  position:relative;
  padding:1.2rem 0 2.4rem;
}
.vault-rail::before,
.vault-rail::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(226,194,138,.45), transparent);
}
.vault-rail::before{ top:0; }
.vault-rail::after{ bottom:0; }

.hero{
  position:relative;
  padding:var(--space-5) var(--space-4);
  background:var(--panel-bg);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow);
}
.hero::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(226,194,138,.25);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 -28px 0;
  height:28px;
  background:var(--rail-bg);
  border-top:1px solid var(--line-strong);
}
.hero::marker{ content:none; }
.hero .hero-title__name{
  text-shadow:0 6px 22px rgba(0,0,0,.35);
}

.kicker{
  font-family:var(--font-serif);
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:.8rem;
  color:var(--accent-3);
  margin-bottom:.8rem;
}

.hero-title{
  font-size:clamp(2.2rem, 3.8vw, 4.2rem);
  text-transform:uppercase;
}
.hero-title__name{
  display:inline-block;
  padding:.15rem .6rem;
  background:linear-gradient(180deg, rgba(226,194,138,.22), rgba(226,194,138,.05));
  border:1px solid rgba(226,194,138,.25);
}

.hero-disclaimer{
  margin:.6rem 0 1rem;
  font-size:.9rem;
  color:#1a120d;
  background:var(--warning);
  display:inline-block;
  padding:.25rem .6rem;
  border:1px solid #2a1b10;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hero-lead{
  max-width:60ch;
  font-family:var(--font-serif);
  font-size:1.1rem;
  color:var(--ink-1);
}

.hero-actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1.6rem;
}

.play-btn,
.submit-btn,
.btn--primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1.4rem;
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg, rgba(181,138,82,.95), rgba(115,79,45,.95));
  color:#1b120e;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  box-shadow:var(--shadow-tight);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.play-btn:hover,
.submit-btn:hover,
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:var(--glow);
  background:linear-gradient(180deg, rgba(226,194,138,.95), rgba(125,89,56,.95));
}
.play-btn.alt{
  background:transparent;
  color:var(--ink-0);
  border:1px solid var(--line-strong);
}
.play-btn.alt:hover{ background:rgba(181,138,82,.12); }

/* =========================
   DISCLAIMER + CONTENT SECTIONS
========================= */
.disclaimer-banner{
  margin:var(--space-5) 0;
  padding:var(--space-3) var(--space-4);
  background:linear-gradient(180deg, rgba(34,24,19,.98), rgba(20,14,11,.98));
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow);
  position:relative;
}
.disclaimer-banner::before{
  content:"";
  position:absolute;
  left:-10px;
  top:16px;
  width:6px;
  height:calc(100% - 32px);
  background:var(--accent);
}
.disclaimer-banner h2{
  margin-bottom:.6rem;
  font-size:1.1rem;
  color:var(--accent-3);
}
.badge{
  display:inline-block;
  padding:.2rem .6rem;
  border:1px solid var(--line-strong);
  background:rgba(181,138,82,.2);
  text-transform:uppercase;
  letter-spacing:.14em;
}

.content-section{
  margin:var(--space-5) 0;
}

.content-section h2{
  font-size:clamp(1.4rem, 2.4vw, 2.4rem);
  text-transform:uppercase;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:.6rem;
  margin-bottom:1.4rem;
}

.section-lead{
  font-family:var(--font-serif);
  font-size:1.05rem;
  color:var(--ink-1);
}

.panel{
  position:relative;
  padding:var(--space-3) var(--space-4);
  background:var(--panel-bg);
  border:1px solid rgba(106,31,42,.55);
  box-shadow:var(--shadow-tight), 0 0 18px rgba(106,31,42,.22);
}
.panel::after{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(226,194,138,.18);
  pointer-events:none;
}
.panel--marble{
  background:
    linear-gradient(180deg, rgba(36,26,21,.95), rgba(18,13,10,.98)),
    radial-gradient(120px 120px at 20% 20%, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(140px 140px at 80% 60%, rgba(0,0,0,.2), transparent 70%);
}
.panel--glass{
  background:
    linear-gradient(180deg, rgba(28,20,16,.88), rgba(16,12,9,.92)),
    radial-gradient(160px 140px at 15% 10%, rgba(226,194,138,.08), transparent 70%),
    radial-gradient(160px 160px at 85% 60%, rgba(0,0,0,.25), transparent 70%);
  border-color:rgba(106,31,42,.55);
  box-shadow:var(--shadow-tight), 0 0 20px rgba(106,31,42,.26);
}
.panel--velvet{
  background:
    radial-gradient(180px 140px at 20% 20%, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(220px 160px at 80% 60%, rgba(0,0,0,.35), transparent 70%),
    linear-gradient(180deg, rgba(106,31,42,.88), rgba(51,14,20,.95));
  border-color:rgba(106,31,42,.75);
  box-shadow:var(--shadow-tight), 0 0 26px rgba(106,31,42,.35);
}

/* =========================
   GAMES GRID
========================= */
.games-section{
  margin-top:var(--space-6);
}

.games-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1.6rem;
}

.game-card{
  position:relative;
  padding:1.6rem 1.4rem 1.8rem;
  background:var(--card-bg);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-tight);
  overflow:hidden;
}
.game-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(226,194,138,.15), transparent 55%);
  pointer-events:none;
}
.game-card::after{
  content:"";
  position:absolute;
  bottom:-1px;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg, transparent, rgba(226,194,138,.7), transparent);
}

.game-card h3{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:1.15rem;
  margin-bottom:.6rem;
}

.game-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid var(--line-strong);
  background:rgba(181,138,82,.2);
  font-size:1rem;
}

.game-title{
  text-transform:uppercase;
  letter-spacing:.14em;
}

.game-desc{
  color:var(--ink-2);
  font-family:var(--font-serif);
}

.game-card .play-btn{
  margin-top:1rem;
}
.game-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--glow);
}
.game-card{
  transition:transform .25s ease, box-shadow .25s ease;
}

/* =========================
   FAQ
========================= */
.faq-wrap{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.faq-item{
  flex:1 1 220px;
  padding:1.1rem 1.2rem;
  background:rgba(20,14,11,.9);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-tight);
}
.faq-item h3{
  font-size:1rem;
  margin-bottom:.4rem;
}

/* =========================
   STORY CARDS + TILES
========================= */
.card{
  position:relative;
  padding:var(--space-3) var(--space-4);
  border:1px solid rgba(106,31,42,.55);
  background:linear-gradient(180deg, rgba(26,19,15,.95), rgba(18,13,10,.98));
  box-shadow:var(--shadow-tight), 0 0 18px rgba(106,31,42,.22);
}
.card::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(226,194,138,.18);
  pointer-events:none;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, transparent 2px 10px),
    radial-gradient(200px 160px at 15% 20%, rgba(226,194,138,.08), transparent 70%);
  opacity:.6;
  pointer-events:none;
}
.tag{
  display:inline-block;
  padding:.2rem .6rem;
  border:1px solid var(--line-strong);
  background:rgba(181,138,82,.18);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.7rem;
  color:var(--accent-3);
}
.mini{
  color:var(--ink-3);
  font-family:var(--font-serif);
  font-size:.92rem;
}
.grid-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:1rem;
}
.tile{
  position:relative;
  padding:1rem 1.1rem;
  border:1px solid rgba(106,31,42,.55);
  background:rgba(18,13,10,.9);
  box-shadow:var(--shadow-tight), 0 0 14px rgba(106,31,42,.2);
}
.tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(180px 120px at 20% 20%, rgba(255,255,255,.06), transparent 70%);
  pointer-events:none;
}
.tile h3,
.tile h4{
  margin-bottom:.35rem;
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.1em;
}

/* =========================
   FORMS
========================= */
.contact-form{
  display:grid;
  gap:1.2rem;
  padding:var(--space-3) var(--space-4);
  background:var(--panel-bg);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-tight);
}
.form-group label{
  display:block;
  margin-bottom:.4rem;
  font-size:.8rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent-3);
}
.form-group input,
.form-group textarea,
.game-page input,
.game-page textarea,
.game-page .bet-input{
  width:100%;
  padding:.75rem 1rem;
  background:rgba(18,13,10,.85);
  color:var(--ink-0);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  font-family:var(--font-ui);
}
.form-group input:focus,
.form-group textarea:focus{
  box-shadow:var(--glow);
}
.form-group input::placeholder,
.form-group textarea::placeholder,
.game-page input::placeholder,
.game-page textarea::placeholder{
  color:var(--ink-3);
}

/* =========================
   SECTION ORNAMENTS
========================= */
.content-section{
  position:relative;
}
.content-section::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-12px;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(226,194,138,.35), transparent);
  opacity:.6;
}
.content-section:last-of-type::after{ display:none; }

/* =========================
   FOOTER
========================= */
footer{
  margin-top:var(--space-6);
  border-top:1px solid var(--line-strong);
  background:linear-gradient(180deg, rgba(16,11,9,.98), rgba(12,9,7,.98));
}
.footer-content{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:2rem;
  padding:var(--space-4) 0;
}
.footer-section h4{
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--accent-3);
  margin-bottom:.6rem;
}
.footer-section p,
.footer-section a{
  color:var(--ink-2);
  font-family:var(--font-serif);
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.footer-bottom{
  border-top:1px solid var(--line-strong);
  padding:1.4rem 0 2rem;
  color:var(--ink-3);
  font-size:.9rem;
}

/* =========================
   AGE NOTICE (HOME)
========================= */
.hero-disclaimer strong{ color:#111; }

.age-popup{
  position:fixed;
  inset:0;
  background:rgba(10,8,6,.7);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.age-popup--open{ display:flex; }
.age-popup__panel{
  width:min(560px, 92vw);
  background:var(--panel-bg);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow);
  padding:var(--space-4);
  text-align:center;
  position:relative;
}
.age-popup__panel::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(226,194,138,.2);
  pointer-events:none;
}
.age-popup__text{
  font-family:var(--font-serif);
  font-size:1.05rem;
  color:var(--ink-1);
}
.age-popup__btn{
  margin-top:1rem;
  padding:.7rem 1.4rem;
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg, rgba(226,194,138,.95), rgba(125,89,56,.95));
  color:#1b120e;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* =========================
   BULLET LISTS (EMOJI)
========================= */
:root{ --bullet-emoji: "🗝️"; }
.notice-list,
.list,
.quick-rules__list,
.game-coming__list{
  list-style: none;
  padding-left: 0;
}
.notice-list li,
.list li,
.quick-rules__list li,
.game-coming__list li{
  position: relative;
  padding-left: 1.6rem;
  margin: .35rem 0;
}
.notice-list li::before,
.list li::before,
.quick-rules__list li::before,
.game-coming__list li::before{
  content: var(--bullet-emoji);
  position: absolute;
  left: 0;
  top: 0;
}
.notice-list li::after,
.list li::after,
.quick-rules__list li::after,
.game-coming__list li::after{
  content:"";
  position:absolute;
  left:.1rem;
  top:.25rem;
  width:8px;
  height:8px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(226,194,138,.9), rgba(106,31,42,.6));
  box-shadow:0 0 10px rgba(106,31,42,.35);
  opacity:.65;
}

/* Velvet accents */
.badge,
.tag{
  box-shadow:0 0 14px var(--velvet-glow);
}
.hero-disclaimer{
  background:linear-gradient(180deg, #efc062, #d18c3a);
  box-shadow:0 0 16px rgba(239,192,98,.35);
}
.disclaimer-banner::before{
  background:linear-gradient(180deg, var(--velvet), var(--accent));
}

/* =========================
   FAQ / QUICK QUESTIONS
========================= */
.faq-wrap{ display:flex; gap:1rem; flex-wrap:wrap; }
.faq-item{ flex:1 1 220px; }

/* =========================
   GAME THEME SAFETY
========================= */
.game-page button,
.game-page .bet-btn,
.game-page .bet-btn-mobile,
.game-page .bet-set-btn,
.game-page #predict-low,
.game-page #predict-high,
.game-page #predict-red,
.game-page #predict-blue,
.game-page #spin-btn,
.game-page #deal-btn,
.game-page #deal-btn-mobile,
.game-page #hit-btn,
.game-page #stand-btn,
.game-page #hit-btn-mobile,
.game-page #stand-btn-mobile{
  background: linear-gradient(180deg, rgba(181,138,82,.95), rgba(115,79,45,.95));
  color: #1b120e;
  border: 1px solid var(--line-strong);
  box-shadow:var(--shadow-tight);
}

.game-page button:hover,
.game-page .bet-btn:hover,
.game-page .bet-btn-mobile:hover,
.game-page .bet-set-btn:hover,
.game-page #predict-low:hover,
.game-page #predict-high:hover,
.game-page #predict-red:hover,
.game-page #predict-blue:hover,
.game-page #spin-btn:hover,
.game-page #deal-btn:hover,
.game-page #deal-btn-mobile:hover,
.game-page #hit-btn:hover,
.game-page #stand-btn:hover,
.game-page #hit-btn-mobile:hover,
.game-page #stand-btn-mobile:hover{
  box-shadow:var(--glow);
}

.game-page input,
.game-page textarea,
.game-page .bet-input{
  background: rgba(18,13,10,.85);
  color: var(--ink-0);
  border: 1px solid var(--line-strong);
}
.game-page input::placeholder,
.game-page textarea::placeholder{
  color: var(--ink-3);
}

/* =========================
   GAME AREA DECOR
========================= */
.game-page .game-area,
#game-area,
#game-result,
#slot-result,
#dice-game-result,
#predictor-result{
  border:1px solid var(--line-strong);
  background:var(--panel-bg);
  box-shadow:var(--shadow-tight);
}

.game-page .game-header,
.game-page .game-title,
.game-page .game-subtitle{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.14em;
}

.game-page .game-panel,
.game-page .game-card,
.game-page .game-controls{
  border:1px solid var(--line-strong);
  background:var(--card-bg);
}

/* =========================
   TABLES + STATS
========================= */
.stats,
.stats-grid,
.scoreboard{
  border:1px solid var(--line-strong);
  background:rgba(20,14,11,.9);
  box-shadow:var(--shadow-tight);
}
.stats-item,
.score-item{
  border-bottom:1px solid var(--line);
  padding:.6rem 1rem;
  color:var(--ink-2);
}

/* =========================
   PAGE SECTIONS
========================= */
.page-header{
  margin:var(--space-5) 0 var(--space-3);
  padding:var(--space-4);
  border:1px solid var(--line-strong);
  background:var(--panel-bg);
  box-shadow:var(--shadow);
}
.page-header h1{
  text-transform:uppercase;
}

.page-content{
  background:var(--panel-bg);
  padding:var(--space-4);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-tight);
}

/* =========================
   LINKS + DECOR
========================= */
a{
  transition:color .2s ease, border-color .2s ease;
}
a:hover{ color:var(--accent-3); }

hr{
  border:none;
  border-top:1px solid var(--line-strong);
  margin:var(--space-4) 0;
}

blockquote{
  border-left:3px solid var(--accent);
  padding-left:1rem;
  color:var(--ink-2);
  font-family:var(--font-serif);
}

/* =========================
   TABLES
========================= */
table{
  width:100%;
  border-collapse:collapse;
  background:rgba(20,14,11,.9);
  border:1px solid var(--line-strong);
}
th, td{
  padding:.7rem;
  border-bottom:1px solid var(--line);
  color:var(--ink-2);
}
th{
  text-transform:uppercase;
  font-size:.75rem;
  letter-spacing:.12em;
  color:var(--accent-3);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  .header-content{ flex-direction:column; align-items:flex-start; }
  .logo::before,
  .logo::after{ display:none; }
  .hero{ padding:var(--space-4); }
  .hero-actions{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 720px){
  .auth-buttons{ flex-wrap:wrap; }
  .hero-title{ font-size:clamp(2rem, 7vw, 3rem); }
  .panel{ padding:var(--space-3); }
  .page-header{ padding:var(--space-3); }
  .page-content{ padding:var(--space-3); }
}

@media (max-width: 520px){
  .user-info{ font-size:.85rem; }
  .game-card{ padding:1.2rem; }
  .footer-content{ gap:1.2rem; }
  .footer-bottom{ font-size:.8rem; }
}

/* =========================
   GAME BUTTON SIZE (REM/CALC)
========================= */
.game-page button,
.game-page .bet-btn,
.game-page .bet-btn-mobile,
.game-page .bet-set-btn,
.game-page #predict-low,
.game-page #predict-high,
.game-page #predict-red,
.game-page #predict-blue,
.game-page #spin-btn,
.game-page #deal-btn,
.game-page #deal-btn-mobile,
.game-page #hit-btn,
.game-page #stand-btn,
.game-page #hit-btn-mobile,
.game-page #stand-btn-mobile{
  padding: calc(0.6rem + 0.2rem) calc(1rem + 0.2rem);
  font-size: calc(0.9rem + 0.05rem);
}

/* =========================
   UTILITIES
========================= */
.text-gold{ color:var(--accent-3); }
.text-muted{ color:var(--ink-3); }
.frame{
  border:1px solid var(--line-strong);
  padding:var(--space-3);
  background:var(--panel-bg);
}

/* =========================
   SAFETY: KEEP SCROLLBARS DARK
========================= */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(226,194,138,.5) rgba(18,13,10,.8);
}
*::-webkit-scrollbar{ width:10px; }
*::-webkit-scrollbar-track{ background:rgba(18,13,10,.8); }
*::-webkit-scrollbar-thumb{
  background:rgba(226,194,138,.5);
  border:2px solid rgba(18,13,10,.8);
}