:root{
  --bg:#060405;
  --bg-soft:#110b08;
  --panel:#120d09;
  --panel-2:#18110c;
  --text:#f7ecd2;
  --muted:#c9b690;
  --gold:#d2a63b;
  --gold-soft:#f0d08a;
  --gold-deep:#8f6318;
  --line:rgba(240,208,138,.18);
  --success:#f4d78f;
  --shadow:0 18px 48px rgba(0,0,0,.55);
  --radius:24px;
  --radius-sm:18px;
  --max:1180px;
}
*{box-sizing:border-box}
html{height:100%}
body{
  min-height:100%;
  margin:0;
  background:
    radial-gradient(circle at 20% 0%, rgba(210,166,59,.18), transparent 28%),
    radial-gradient(circle at 100% 10%, rgba(210,166,59,.12), transparent 25%),
    linear-gradient(180deg, #0a0705 0%, #050304 100%);
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display:flex;
  flex-direction:column;
}
main{flex:1}
img{max-width:100%; display:block}
a{color:var(--gold-soft); text-decoration:none}
a:hover{color:#fff}
.container{width:min(calc(100% - 32px), var(--max)); margin:0 auto}
.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(16px);
  background:rgba(8,5,4,.82);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  min-height:78px;
}
.brand-lockup{display:flex; align-items:center; gap:14px; min-width:0}
.brand-mark{
  width:48px; height:48px; border-radius:16px;
  background:linear-gradient(135deg,#2b1b06,#d8af4f 52%,#5c3b08);
  color:#140d03; font-weight:900; font-size:1.45rem;
  display:grid; place-items:center;
  box-shadow: 0 0 0 1px rgba(255,232,180,.28), 0 10px 24px rgba(210,166,59,.28);
}
.brand-mark.small{width:42px;height:42px;border-radius:14px;font-size:1.2rem}
.brand-stack{display:flex; flex-direction:column; min-width:0}
.brand-site{font-size:1rem; letter-spacing:.18em; font-weight:800}
.brand-company{font-size:.75rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px}
.header-badges{display:flex; align-items:center; gap:14px; justify-content:flex-end}
.age-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:56px; padding:10px 14px; border-radius:999px;
  background:linear-gradient(180deg,#f8dd9a,#b68222); color:#1b1105;
  font-weight:900; letter-spacing:.06em; box-shadow:0 8px 22px rgba(210,166,59,.25)
}
.header-disclaimer{margin:0; max-width:560px; font-size:.9rem; color:var(--muted)}
.hero{padding:44px 0 28px}
.hero-card{
  position:relative; overflow:hidden;
  background:
    linear-gradient(135deg, rgba(214,170,74,.12), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:32px;
  padding:clamp(28px,6vw,56px);
  box-shadow:var(--shadow);
}
.hero-card::before{
  content:""; position:absolute; inset:auto auto 18% -6%;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(248,221,154,.28), transparent 70%);
  filter:blur(8px);
}
.hero-card::after{
  content:""; position:absolute; inset:-12% -10% auto auto;
  width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(210,166,59,.18), transparent 68%);
}
.hero-grid{position:relative; z-index:1; display:grid; gap:22px}
.eyebrow{display:inline-flex; gap:10px; align-items:center; color:var(--gold-soft); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.75rem}
.eyebrow-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(210,166,59,.8)}
.hero h1{margin:0; font-size:clamp(2.1rem, 7vw, 4.7rem); line-height:.96}
.hero p{margin:0; color:var(--muted); max-width:680px; font-size:1.02rem}
.hero-cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.btn{
  border:none; border-radius:999px; cursor:pointer;
  padding:14px 22px; font-weight:800; letter-spacing:.02em;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{
  color:#1b1204;
  background:linear-gradient(180deg,#f8dd9a 0%, #d3a33b 100%);
  box-shadow:0 10px 28px rgba(210,166,59,.24), 0 0 0 1px rgba(255,228,153,.18);
}
.btn-primary.pulse{animation:pulse 2.5s infinite}
.btn-secondary{
  background:rgba(255,255,255,.04); color:var(--text); border:1px solid rgba(255,255,255,.09)
}
.hero-chip-row{display:flex; gap:12px; flex-wrap:wrap}
.chip{
  padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.03);
  border:1px solid var(--line); color:var(--muted); font-size:.92rem
}
.featured-art{padding:22px 0 18px}
.featured-frame{
  position:relative; width:min(100%,650px); margin:0 auto; aspect-ratio:1/1;
  border-radius:30px; overflow:hidden;
  padding:12px;
  background:
    linear-gradient(135deg, rgba(255,224,146,.9), rgba(130,88,16,.92)),
    linear-gradient(180deg,#201107,#100905);
  box-shadow: 0 0 0 1px rgba(255,220,121,.26), 0 0 40px rgba(210,166,59,.14), var(--shadow);
}
.featured-frame::before,
.featured-frame::after{
  content:""; position:absolute; inset:10px; border-radius:22px; pointer-events:none;
}
.featured-frame::before{
  border:1px solid rgba(255,231,173,.65);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
}
.featured-frame::after{
  inset:0; transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg, transparent 0%, rgba(255,240,198,.08) 45%, rgba(255,248,218,.32) 50%, rgba(255,241,198,.08) 55%, transparent 100%);
  animation:shimmer 6s linear infinite;
}
.featured-frame img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  border-radius:20px; border:1px solid rgba(255,234,187,.12)
}
.sparkles{position:absolute; inset:0; pointer-events:none}
.sparkles span{
  position:absolute; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,235,185,.95), rgba(255,235,185,0));
  animation:floatSparkle 4.2s ease-in-out infinite;
}
.sparkles span:nth-child(1){top:18%;left:14%;animation-delay:.4s}
.sparkles span:nth-child(2){top:70%;left:20%;animation-delay:1.2s}
.sparkles span:nth-child(3){top:32%;left:78%;animation-delay:2s}
.sparkles span:nth-child(4){top:80%;left:74%;animation-delay:2.7s}
.section{padding:22px 0}
.section-title{
  margin:0 0 18px; font-size:clamp(1.35rem, 3vw, 2rem)
}
.game-layout{display:grid; gap:20px}
.game-shell{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:30px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.game-top{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:18px 20px; border-bottom:1px solid var(--line);
}
.status-pill{
  display:inline-flex; align-items:center; gap:10px; border-radius:999px;
  padding:10px 14px; background:rgba(255,255,255,.03); border:1px solid var(--line); color:var(--muted)
}
.balance-value,.stat-value,.result-message strong{color:var(--gold-soft)}
.game-body{padding:18px 18px 24px}
.slot-machine{
  display:grid; gap:18px;
}
.reels{
  position:relative;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  padding:12px; border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.18));
  border:1px solid rgba(255,224,146,.12);
}
.cell{
  position:relative; aspect-ratio:1/1;
  display:grid; place-items:center;
  font-size:clamp(2rem, 7vw, 4rem);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.07);
  overflow:hidden;
  transition:transform .24s ease, box-shadow .24s ease, background .24s ease, opacity .24s ease;
}
.cell::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.12), transparent 45%, rgba(0,0,0,.08));
  opacity:.9;
}
.cell-content{position:relative; z-index:1; transition:transform .28s ease, opacity .28s ease}
.cell.spinning .cell-content{transform:translateY(16px) scale(.96); opacity:.14}
.cell.win{
  box-shadow:0 0 0 1px rgba(255,231,173,.5), 0 0 26px rgba(242,211,131,.32);
  background:linear-gradient(180deg, rgba(245,216,144,.16), rgba(255,255,255,.04));
  transform:translateY(-2px);
}
.win-line{
  position:absolute; left:18px; right:18px; height:6px; border-radius:999px;
  background:linear-gradient(90deg, rgba(255,231,173,0), rgba(255,231,173,.86), rgba(255,231,173,0));
  filter:drop-shadow(0 0 10px rgba(255,231,173,.4));
  opacity:0; transform:scaleX(.88);
  transition:opacity .3s ease, transform .3s ease;
}
.win-line.active{opacity:1; transform:scaleX(1)}
.result-message{
  min-height:56px; padding:15px 16px; border-radius:18px;
  background:rgba(255,255,255,.03); border:1px solid var(--line); color:var(--muted)
}
.game-controls{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.mini-note{font-size:.9rem; color:var(--muted)}
.stats-grid,.trust-grid,.info-grid,.responsible-grid{
  display:grid; gap:16px;
}
.stats-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
.trust-grid,.responsible-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
.info-grid{grid-template-columns:1fr}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:24px;
  padding:18px;
  box-shadow:var(--shadow);
}
.card h3{margin:0 0 10px; font-size:1.05rem}
.card p{margin:0; color:var(--muted); line-height:1.6}
.stat-value{font-size:1.75rem; font-weight:900; margin-top:10px}
.responsible-grid a.card{display:block}
.site-footer{
  margin-top:28px; border-top:1px solid var(--line); background:rgba(6,4,5,.9)
}
.footer-grid{
  padding:24px 0 34px;
  display:grid; gap:18px;
}
.footer-brand p,.footer-contact p{color:var(--muted); margin:.35rem 0}
.footer-links{display:grid; gap:10px}
.cookie-banner{
  position:fixed; z-index:40;
}
.cookie-banner{
  left:16px; right:16px; bottom:16px; display:none;
  border:1px solid var(--line);
  background:rgba(16,10,8,.96); border-radius:22px; padding:16px;
  box-shadow:var(--shadow);
  gap:14px; align-items:center; justify-content:space-between;
}
.cookie-banner.show{display:flex}
.cookie-copy p{margin:.3rem 0 0; color:var(--muted)}
.cookie-actions{display:flex; gap:10px; flex-shrink:0}

body.gate-open{overflow:hidden}
.age-gate{
  position:fixed; inset:0; z-index:90; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(5,4,3,.84); backdrop-filter:blur(8px);
}
.age-gate.show{display:flex}
.age-gate.hidden{display:none}
.age-gate-panel{
  width:min(100%, 760px); padding:40px 56px; border-radius:34px;
  background:
    radial-gradient(circle at top right, rgba(210,166,59,.22), transparent 38%),
    linear-gradient(180deg, rgba(30,16,7,.98), rgba(7,4,3,.98));
  border:1px solid rgba(210,166,59,.32);
  box-shadow:0 0 0 1px rgba(255,223,145,.08), 0 24px 80px rgba(0,0,0,.55), 0 0 48px rgba(210,166,59,.16);
}
.age-gate-panel h2{margin:0 0 18px; font-size:clamp(2rem, 4vw, 3.2rem)}
.age-gate-panel p{margin:0 0 28px; color:var(--muted); font-size:clamp(1.05rem, 2.2vw, 1.35rem); max-width:560px}
.age-check-row{display:flex; align-items:center; gap:18px; margin:0 0 30px; font-size:clamp(1rem, 2vw, 1.15rem); font-weight:700}
.age-check-row input{width:26px; height:26px; accent-color:#d3a33b; flex:0 0 auto}
#confirmAgeBtn[disabled]{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}
#confirmAgeBtn:not([disabled]){min-width:190px}

.legal-hero{padding:40px 0 10px}
.legal-body{padding-bottom:30px}
.legal-stack{display:grid; gap:16px}
.legal-stack .card h2{margin:0 0 10px}
.legal-stack .card ul{margin:0; padding-left:18px; color:var(--muted); line-height:1.7}
.legal-stack .card li + li{margin-top:6px}
.center{display:flex;justify-content:center}
@keyframes shimmer{
  0%{transform:translateX(-120%) skewX(-18deg)}
  100%{transform:translateX(120%) skewX(-18deg)}
}
@keyframes pulse{
  0%,100%{box-shadow:0 10px 28px rgba(210,166,59,.24), 0 0 0 1px rgba(255,228,153,.18)}
  50%{box-shadow:0 12px 36px rgba(210,166,59,.38), 0 0 0 1px rgba(255,228,153,.28)}
}
@keyframes floatSparkle{
  0%,100%{transform:translateY(0) scale(.8); opacity:.25}
  50%{transform:translateY(-10px) scale(1.1); opacity:.85}
}
@media (min-width: 720px){
  .hero-grid{grid-template-columns:1.2fr .8fr; align-items:center}
  .game-layout{grid-template-columns:1.25fr .75fr}
  .info-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .trust-grid,.responsible-grid{grid-template-columns:repeat(4, minmax(0,1fr))}
  .footer-grid{grid-template-columns:1.2fr .8fr 1fr}
}
@media (max-width: 860px){
  .header-inner,.header-badges{flex-direction:column; align-items:flex-start}
  .header-disclaimer{max-width:none}
}
@media (max-width: 560px){
  .age-gate{padding:16px}
  .age-gate-panel{padding:28px 22px; border-radius:24px}
  .age-check-row{align-items:flex-start; gap:14px}
  .cookie-banner{flex-direction:column; align-items:flex-start}
  .cookie-actions{width:100%}
  .cookie-actions .btn{flex:1}
  .game-top{padding:16px}
  .game-body{padding:14px 14px 20px}
}

.sparkle-burst{
  position:absolute; width:10px; height:10px; border-radius:50%;
  pointer-events:none; background:radial-gradient(circle, rgba(255,238,194,1) 0%, rgba(255,238,194,.15) 55%, rgba(255,238,194,0) 70%);
  animation:sparkBurst 1.2s ease-out forwards;
}
@keyframes sparkBurst{
  0%{transform:translate(-50%,-50%) scale(.2); opacity:0}
  18%{opacity:1}
  100%{transform:translate(-50%,-170%) scale(2); opacity:0}
}