:root{
  --bg0:#07110f;
  --bg1:#0b1a16;
  --card:#0b1418cc;
  --card2:#0a1317f2;
  --line:#17302a;
  --txt:#eaf5f1;
  --muted:#a9c1b9;
  --emerald:#2ee6b5;
  --emerald2:#10c79a;
  --gold:#f6d36c;
  --gold2:#e8b84a;
  --glow: rgba(46,230,181,.35);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 26px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--txt);
  background: radial-gradient(1200px 700px at 20% 0%, rgba(46,230,181,.18), transparent 55%),
              radial-gradient(900px 700px at 90% 30%, rgba(246,211,108,.14), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

body.bg-idle{ }
body.bg-spin{
  background: radial-gradient(1200px 700px at 20% 0%, rgba(46,230,181,.28), transparent 55%),
              radial-gradient(900px 700px at 90% 30%, rgba(246,211,108,.24), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
}
body.bg-win{
  background: radial-gradient(1200px 700px at 20% 0%, rgba(246,211,108,.28), transparent 55%),
              radial-gradient(900px 700px at 90% 30%, rgba(46,230,181,.22), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{color:inherit}
.container{
  width:min(1100px, calc(100% - 32px));
  margin:0 auto;
}

.topbar{
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(3,8,7,.72), rgba(3,8,7,.35));
  border-bottom:1px solid rgba(23,48,42,.8);
}
.topbar__inner{
  width:min(1100px, calc(100% - 32px));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
}
.brandlock{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  min-width: 220px;
}
.logoMark{
  width:44px;height:44px;border-radius:14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(46,230,181,.95), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(246,211,108,.75), transparent 55%),
    linear-gradient(135deg, rgba(46,230,181,.22), rgba(246,211,108,.14));
  box-shadow: 0 0 0 1px rgba(23,48,42,.9), 0 16px 50px rgba(46,230,181,.18);
}
.brandName{font-weight:800; letter-spacing:.2px}
.brandTag{display:block; color:var(--muted); font-size:12px; margin-top:2px}
.topbar__right{
  display:flex; align-items:center; gap:10px;
  justify-content:flex-end;
  max-width: 740px;
}
.agePill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  background: linear-gradient(180deg, rgba(46,230,181,.25), rgba(246,211,108,.18));
  border:1px solid rgba(23,48,42,.95);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.agePill--sm{padding:4px 8px; font-size:12px}
.disclaimerText{
  color:rgba(234,245,241,.85);
  font-size:13px;
  line-height:1.2;
}

.hero{
  padding:34px 0 18px;
}
.heroCard{
  position:relative;
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(8,16,15,.72), rgba(8,16,15,.35));
  border:1px solid rgba(23,48,42,.9);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.heroCard__inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  padding: 22px;
}
@media (max-width: 880px){
  .heroCard__inner{grid-template-columns:1fr; }
  .topbar__right{display:none}
}

.glowRing{
  position:absolute;
  inset:-140px -220px auto auto;
  width:520px;height:520px;border-radius:999px;
  background: radial-gradient(circle at 30% 35%, rgba(46,230,181,.35), transparent 55%),
              radial-gradient(circle at 65% 65%, rgba(246,211,108,.26), transparent 55%);
  filter: blur(0px);
  animation: drift 8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes drift{
  0%,100%{ transform: translate(0,0) rotate(0deg); opacity:.95 }
  50%{ transform: translate(-18px, 16px) rotate(10deg); opacity:.75 }
}
@media (prefers-reduced-motion: reduce){
  .glowRing{animation:none}
  .shimmerFrame::before{animation:none}
  .pulse{animation:none}
}

.heroTitle{
  margin:0 0 6px;
  font-size: 34px;
  line-height:1.05;
  letter-spacing: -.3px;
}
.heroTitle .accent{
  background: linear-gradient(90deg, var(--emerald), var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.heroDesc{
  margin:0 0 14px;
  color: var(--muted);
  font-size: 15px;
  max-width: 52ch;
}
.btnRow{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.btn{
  appearance:none;
  border:1px solid rgba(23,48,42,.95);
  background: linear-gradient(180deg, rgba(46,230,181,.18), rgba(246,211,108,.12));
  color: var(--txt);
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 800;
  cursor:pointer;
  min-height:44px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(46,230,181,.18) inset;
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05) }
.btn:active{ transform: translateY(0px) scale(.99) }
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none}
.btn--ghost{
  background: transparent;
  box-shadow:none;
}
.btn--wide{width:100%}

:focus-visible{
  outline: 3px solid rgba(46,230,181,.55);
  outline-offset: 2px;
  border-radius: 12px;
}

.featureWrap{
  display:flex; align-items:center; justify-content:center;
}
.shimmerFrame{
  position:relative;
  width:min(360px, 100%);
  aspect-ratio:1/1;
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(23,48,42,.95);
  background: linear-gradient(135deg, rgba(46,230,181,.08), rgba(246,211,108,.06));
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.shimmerFrame::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(90deg, transparent, rgba(246,211,108,.24), transparent);
  transform: translateX(-40%) rotate(20deg);
  animation: shimmer 3.8s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ transform: translateX(-60%) rotate(18deg); opacity:.0 }
  20%{ opacity:.75 }
  50%{ opacity:.25 }
  100%{ transform: translateX(65%) rotate(18deg); opacity:0 }
}
.featureImg{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  border-radius: 22px;
}

.section{
  padding: 14px 0 28px;
}
.subgrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.benefits{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 880px){ .benefits{grid-template-columns:1fr} }

.card{
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(8,16,15,.72), rgba(8,16,15,.35));
  border:1px solid rgba(23,48,42,.9);
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
}
.cardPad{padding:16px}
.cardTitle{font-weight:900; margin:0 0 6px}
.cardText{margin:0; color:var(--muted); line-height:1.5}

.demoShell{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap: 18px;
}
@media (max-width: 980px){ .demoShell{grid-template-columns:1fr} }

.panel{
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(7,14,13,.78), rgba(7,14,13,.36));
  border:1px solid rgba(23,48,42,.9);
  box-shadow: var(--shadow);
}
.panelPad{padding:18px}
.miniRow{
  display:grid;
  gap:12px;
}
.statLine{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(23,48,42,.85);
  background: rgba(8,16,15,.42);
}
.statLabel{color:var(--muted); font-weight:700}
.statValue{font-size:26px; font-weight:950; letter-spacing:.2px}

.rules{
  margin-top:14px;
}
.rules h3{margin:0 0 10px; font-size:18px}
.rules ul{margin:0; padding-left:18px; color:var(--muted); line-height:1.55}
.rules li{margin: 8px 0}
.rules strong{color:var(--txt)}

.gameWrap{
  display:flex;
  flex-direction:column;
  min-height: 560px;
}
.boardWrap{
  padding: 16px;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.board{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  gap: 16px;
  height:100%;
  min-height: 440px;
}
.cell{
  border-radius: 16px;
  border:1px solid rgba(23,48,42,.9);
  background: rgba(7,14,13,.34);
  display:flex; align-items:center; justify-content:center;
  font-size: 38px;
  height: 118px;
  box-shadow: 0 12px 38px rgba(0,0,0,.35);
  position:relative;
}
.cell::after{
  content:"";
  position:absolute; inset:0;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(46,230,181,.08) inset;
  pointer-events:none;
}
.gameWrap.is-spinning .cell{
  box-shadow: 0 16px 55px rgba(0,0,0,.42), 0 0 26px rgba(46,230,181,.25);
}
.pulse{
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform: translateY(0); filter: brightness(1) }
  50%{ transform: translateY(-1px); filter: brightness(1.05) }
}

.resultRow{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding: 12px 16px;
  border-top:1px solid rgba(23,48,42,.7);
}
.resultText{color:rgba(234,245,241,.9)}
.resultText strong{color:var(--txt)}
.spinBtn{min-width: 140px}

.statsPanel{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 980px){ .statsPanel{grid-template-columns:1fr 1fr} }
.statCard{
  border-radius: 16px;
  border:1px solid rgba(23,48,42,.9);
  background: rgba(7,14,13,.34);
  padding: 14px;
}
.statCard .k{color:var(--muted); font-weight:800; font-size:13px}
.statCard .v{font-weight:950; font-size:32px; margin-top:6px}

.socialBlock{
  margin-top: 18px;
}
.socialGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 980px){ .socialGrid{grid-template-columns:1fr} }
.socialItem{
  border-radius: 18px;
  border:1px solid rgba(23,48,42,.9);
  background: rgba(7,14,13,.34);
  padding: 16px;
}
.socialItem h3{margin:0 0 8px; font-size:18px}
.socialItem p{margin:0; color:var(--muted); line-height:1.55}

.resp{
  margin-top: 16px;
}
.resp h2{margin:0 0 6px; font-size:34px; letter-spacing:-.2px}
.resp p{margin:0 0 14px; color:var(--muted); font-size:16px}
.linkRow{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 980px){ .linkRow{grid-template-columns:1fr 1fr} }
.linkPill{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  text-decoration:none;
  padding: 14px 14px;
  border-radius: 16px;
  border:1px solid rgba(23,48,42,.9);
  background: rgba(7,14,13,.32);
}
.linkPill:hover{filter:brightness(1.05)}
.linkPill .arrow{opacity:.75}

.footer{
  border-top:1px solid rgba(23,48,42,.75);
  background: linear-gradient(180deg, rgba(3,8,7,.0), rgba(3,8,7,.65));
  padding: 22px 0 28px;
}
.footer__inner{ width:min(1100px, calc(100% - 32px)); margin:0 auto; }
.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr .6fr 1.2fr;
  gap: 16px;
}
@media (max-width: 980px){ .footer__grid{grid-template-columns:1fr; } }
.footer__brand{font-weight:950; font-size:18px}
.footer__note{color:var(--muted); margin-top:6px; line-height:1.5}
.footer__links{display:grid; gap:10px}
.footer__links a{text-decoration:none; color:rgba(234,245,241,.9)}
.footer__links a:hover{color:var(--txt)}
.footer__contact{color:rgba(234,245,241,.9); line-height:1.7}
.muted{color:var(--muted)}
.footer__fineprint{
  margin-top: 16px;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  color: rgba(234,245,241,.85);
  font-size: 13px;
}
.sep{opacity:.5}

.cookieBar{
  position: fixed;
  left: 0; right:0; bottom:0;
  z-index: 60;
  padding: 14px 14px;
}
.cookieBar__inner{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  display:flex; gap: 12px; align-items:center; justify-content:space-between;
  border-radius: 18px;
  border:1px solid rgba(23,48,42,.9);
  background: rgba(7,14,13,.88);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding: 14px;
}
.cookieBar__text{color: rgba(234,245,241,.85); font-size: 14px; line-height:1.3}
.cookieBar__actions{display:flex; gap:10px; flex-wrap:wrap}

.ageModal{
  position: fixed;
  inset:0;
  z-index: 70;
  display:grid;
  place-items:center;
  padding: 18px;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(8px);
}
.ageModal__card{
  width: min(520px, 100%);
  border-radius: 22px;
  border:1px solid rgba(23,48,42,.9);
  background: rgba(7,14,13,.92);
  box-shadow: var(--shadow);
  padding: 18px;
}
.ageModal__badge{display:flex; justify-content:flex-start; margin-bottom:10px}
.ageModal__title{margin:0 0 8px; font-size: 22px}
.ageModal__desc{margin:0 0 14px; color:var(--muted); line-height:1.5}
.checkRow{
  display:flex; gap:12px; align-items:center;
  border:1px solid rgba(23,48,42,.85);
  background: rgba(8,16,15,.42);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 12px;
}
.checkRow input{width:20px;height:20px}
.ageModal__fine{margin-top:10px; color: rgba(234,245,241,.78); font-size: 13px}

/* fix hidden override */
.ageModal[hidden], .cookieBar[hidden]{ display:none !important; }

.toasts{
  position: fixed;
  right: 14px;
  bottom: 86px;
  z-index: 80;
  display:grid;
  gap: 10px;
}
.toast{
  width: min(340px, calc(100vw - 28px));
  border-radius: 16px;
  border:1px solid rgba(23,48,42,.9);
  background: rgba(7,14,13,.92);
  box-shadow: var(--shadow);
  padding: 12px 12px;
  color: rgba(234,245,241,.92);
}
.toast strong{color:var(--txt)}