:root{
  --bg-1:#fff8d6;
  --bg-2:#ffe6f7;
  --bg-3:#e6f9ff;
  --panel:#ffffffcc;
  --ink:#3b2b00;
  --accent:#ff7a59;
  --accent-2:#ffbd2e;
  --green:#2ecc71;
  --red:#ff4655;
  --purple:#a26bfa;
  --shadow:0 10px 30px rgba(0,0,0,.15);
  --glass:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.15));
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font:16px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 700px at 10% -10%, var(--bg-2), transparent),
              radial-gradient(900px 700px at 110% 10%, var(--bg-3), transparent),
              radial-gradient(1200px 900px at 90% 120%, var(--bg-1), transparent),
              linear-gradient(135deg, #fff1a8, #ffe1ff 40%, #d6f7ff 80%);
  overflow-x:hidden;
}

.top{
  text-align:center;
  padding:16px 12px 0;
}
.top h1{
  margin:0;
  font-size:clamp(1.4rem, 4vw, 2.2rem);
  letter-spacing:.5px;
  text-shadow:0 2px 0 rgba(255,255,255,.8);
}
.disclaimer{
  margin:.35rem auto 1rem;
  padding:.4rem .75rem;
  background: #fff9;
  border:1px dashed #ffc766;
  border-radius:999px;
  width:fit-content;
  font-size:.9rem;
}

.game{
  max-width:980px;
  margin:0 auto;
  padding:12px;
  display:grid;
  gap:12px;
}

.hud{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:center;
}
.hud .toggles{
  grid-column:1 / -1;
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}
@media(min-width:720px){
  .hud{
    grid-template-columns:1fr 1fr 1fr;
  }
  .hud .toggles{grid-column:auto}
}

.stat{
  background:var(--panel);
  box-shadow:var(--shadow);
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:56px;
  backdrop-filter:saturate(160%) blur(4px);
}
.stat .label{opacity:.8; font-weight:600}
.stat .value{font-weight:800; font-size:1.2rem}

.bet .bet-ctrl{
  display:flex; align-items:center; gap:8px;
}
.btn{
  border:0;
  background:linear-gradient(180deg, #fff, #ffe7c9);
  color:var(--ink);
  border-radius:12px;
  box-shadow:0 4px 0 #f5c56b, 0 8px 18px rgba(0,0,0,.12);
  padding:.7rem 1rem;
  font-weight:800;
  cursor:pointer;
  transition:transform .06s ease, filter .2s ease, box-shadow .2s ease;
  user-select:none;
  touch-action:manipulation;
}
.btn:active{ transform:translateY(2px) }
.btn[disabled]{ opacity:.5; cursor:not-allowed; filter:grayscale(.2) }

.btn.circle{
  width:44px; height:44px; padding:0; border-radius:50%;
  display:inline-grid; place-items:center; font-size:1.2rem;
}

.btn.big{
  width:min(360px, 100%);
  margin:auto;
  background:linear-gradient(180deg, #fff, #ffd59d);
  border-radius:20px;
  font-size:1.3rem;
}

.btn.toggle[aria-pressed="true"]{
  background:linear-gradient(180deg, #fff, #d7ffd6);
  box-shadow:0 4px 0 #7ed957, 0 8px 18px rgba(0,0,0,.12);
}
.btn.toggle[aria-pressed="false"]{
  background:linear-gradient(180deg, #fff, #ffd7d7);
  box-shadow:0 4px 0 #ff8b8b, 0 8px 18px rgba(0,0,0,.12);
}
.btn.ghost{
  background:linear-gradient(180deg, #fff, #eae8ff);
  box-shadow:0 4px 0 #c9b7ff, 0 8px 18px rgba(0,0,0,.12);
}

.reels{
  position:relative;
  background:linear-gradient(180deg, #fff, #fff7dd);
  border-radius:18px;
  padding:12px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.reels .glass{
  pointer-events:none;
  position:absolute;
  inset:0;
  background:radial-gradient(70% 60% at 50% 0%, rgba(255,255,255,.9), transparent 60%),
             radial-gradient(50% 40% at 0% 0%, rgba(255,255,255,.7), transparent 55%),
             radial-gradient(50% 40% at 100% 0%, rgba(255,255,255,.7), transparent 55%),
             linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 30%, rgba(0,0,0,.04) 60%, rgba(255,255,255,.3) 95%);
  mix-blend-mode:overlay;
}
.reels::after{
  content:"";
  position:absolute; left:0; right:0; top:33.33%; height:1px;
  background:linear-gradient(90deg, transparent, #ffd38b, transparent);
  box-shadow:0 42px 0 0 rgba(255,211,139,.8), 0 -42px 0 0 rgba(255,211,139,.8);
  opacity:.7;
}
.reel{
  height:min(52vh, 360px);
  min-height:260px;
  display:grid;
  grid-template-rows:repeat(3, 1fr);
  overflow:hidden;
  position:relative;
  border-radius:12px;
}
.reels{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:10px;
}
.strip{
  position:absolute; left:0; right:0; top:0;
  will-change:transform;
}
.cell{
  height:calc((min(52vh, 360px) - 24px) / 3);
  min-height:calc((260px - 24px) / 3);
  display:grid; place-items:center;
  padding:2px;
}
.symbol{
  width:min(12vh, 84px); height:min(12vh, 84px);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.12));
  transition:transform .2s ease;
}
.cell.win .symbol{
  animation:pop 900ms ease both, glow 1.2s ease-in-out infinite;
}
@keyframes pop{
  0%{ transform:scale(.9) }
  38%{ transform:scale(1.15) }
  62%{ transform:scale(.98) }
  100%{ transform:scale(1.02) }
}
@keyframes glow{
  0%{ filter:drop-shadow(0 4px 6px rgba(255,180,0,.25)) }
  50%{ filter:drop-shadow(0 6px 12px rgba(255,120,0,.55)) }
  100%{ filter:drop-shadow(0 4px 6px rgba(255,180,0,.25)) }
}

/* Speed streaks during spin */
.reel.spinning .cell svg{ opacity:.95 }
.reel.spinning::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.25), transparent);
  opacity:.7;
  animation:shine 600ms linear infinite;
  pointer-events:none;
}
@keyframes shine{
  0%{ transform:translateY(-100%) }
  100%{ transform:translateY(100%) }
}

.controls{
  display:grid;
  place-items:center;
  gap:8px;
}
.lastwin{
  background:var(--panel);
  border-radius:999px;
  padding:.4rem .8rem;
  box-shadow:var(--shadow);
}

.footer{
  max-width:980px; margin:12px auto 30px; padding:0 12px;
  display:grid; gap:8px; place-items:center;
}
.links{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center }
.links a{
  color:#7a45ff; font-weight:700; text-decoration:none; background:#fff8;
  padding:.4rem .7rem; border-radius:999px; border:1px solid #e9dfff;
}
.links a:hover{ background:#fff }

.tiny{ opacity:.7; font-size:.85rem }

.cookiebar{
  position:fixed; left:0; right:0; bottom:0; padding:12px;
  display:none; z-index:50;
}
.cookiebar.show{ display:block }
.cookiecard{
  max-width:980px; margin:0 auto;
  background:#ffffffee; border:1px solid #ffd089; border-radius:14px;
  box-shadow:var(--shadow); display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:10px 12px;
}
.cookieactions{ display:flex; gap:8px }

.noscript{
  margin:0; background:#fff3cd; color:#533f03; padding:10px; text-align:center; font-weight:700
}

.bg-bubbles{
  position:fixed; inset:0; width:100%; height:100%; z-index:-1;
}

/* Focus visible */
button:focus-visible, a:focus-visible{
  outline:3px solid #7bdcff; outline-offset:2px; border-radius:12px;
}

/* SR only for polite announcements */
.sr-only{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}