:root{
  --bg1:#fff7e6;
  --bg2:#ffe8f3;
  --bg3:#e6f7ff;
  --panel:#ffffff;
  --accent:#ff3e9e;
  --accent2:#00d4ff;
  --text:#243B53;
  --muted:#627D98;
  --win:#16c79a;
  --lose:#ff5a5f;
  --shadow:0 8px 24px rgba(0,0,0,0.15);
  --radius:16px;
  --radius-sm:12px;
  --gap:14px;
  --btnH:56px;
  --bigBtnH:64px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 0% 0%,var(--bg3),transparent 60%),
              radial-gradient(800px 600px at 100% 0%,var(--bg2),transparent 60%),
              radial-gradient(1000px 700px at 50% 100%,var(--bg1),transparent 60%),
              linear-gradient(160deg,#fff,#fff6f8 40%, #f1fbff 100%);
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}

.bg-decor{
  position:fixed; inset:0; pointer-events:none; opacity:.35;
  background:
    radial-gradient(48px 48px at 20% 25%, #ffd16655, transparent 60%),
    radial-gradient(64px 64px at 80% 30%, #00d4ff55, transparent 60%),
    radial-gradient(56px 56px at 40% 75%, #ff3e9e44, transparent 60%);
  filter:saturate(1.4) blur(0.5px);
  z-index:0;
}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:rgba(255,255,255,.75); backdrop-filter: blur(8px);
  border-bottom:1px solid #ffffff66;
}
.brand{display:flex; align-items:center; gap:10px}
.brand-logo{font-size:28px}
.brand-title{font-size:18px; margin:0; font-weight:800; letter-spacing:.3px}
.top-actions{display:flex; gap:10px}

.game-wrap{
  display:flex; flex-direction:column; gap:var(--gap);
  padding:16px; max-width:1000px; margin:0 auto;
}

.info-bar{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);
}
.info-chip{
  background:linear-gradient(180deg,#fff, #f4faff);
  border:1px solid #eef3ff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px 14px; font-weight:600; color:var(--muted);
  display:flex; align-items:center; justify-content:space-between;
}

.slot{
  display:flex; flex-direction:column; gap:16px; align-items:center;
}

.reels{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:12px; width:100%;
  background:linear-gradient(180deg,#fff,#fff);
  padding:12px; border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:2px solid #ffe3f2;
}
.reel{
  position:relative; background: #f8fbff; border:2px solid #dff3ff;
  border-radius:var(--radius-sm); overflow:hidden;
  height:300px; /* Mobile first height */
  box-shadow: inset 0 0 0 8px #ffffff, inset 0 -24px 48px #f0fbff;
}
.strip{
  position:absolute; width:100%; left:0; top:0; will-change: transform;
}
.cell{
  height:100px; display:flex; align-items:center; justify-content:center;
}
.symbol{
  width:72px; height:72px; display:block;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.08));
}
.row-highlight{
  position:absolute; left:0; right:0; height:100px; border:2px dashed #ffd166aa;
}
.row-highlight.mid{ top:100px; border-color:#00d4ffaa }
.row-highlight.top{ top:0 }
.row-highlight.bot{ bottom:0 }

.controls{
  display:flex; gap:12px; align-items:center; justify-content:center; width:100%;
  flex-wrap:wrap;
}
.bet-control{
  display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #eef3ff;
  padding:8px 10px; border-radius:999px; box-shadow:var(--shadow);
}
.bet-display{
  min-width:84px; text-align:center; font-weight:800; color:#1f2937;
}

.btn{
  height:var(--btnH); padding:0 16px; border-radius:14px; font-weight:800; font-size:16px;
  border:0; background:linear-gradient(180deg,#ff86c9,#ff3e9e); color:#fff; cursor:pointer;
  box-shadow:0 6px 0 #e11d74, 0 10px 18px rgba(255,62,158,.35);
  transition: transform .05s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:active{ transform:translateY(2px); box-shadow:0 4px 0 #e11d74, 0 8px 16px rgba(255,62,158,.35) }
.btn:disabled{ filter:grayscale(0.5) brightness(.9); opacity:.7; cursor:not-allowed; }
.btn-big{
  height:var(--bigBtnH); padding:0 28px; font-size:18px; letter-spacing:.6px;
  background:linear-gradient(180deg,#00e6ff,#00a6ff);
  box-shadow:0 6px 0 #0074cc, 0 12px 20px rgba(0,166,255,.35);
  border-radius:18px;
}
.btn-round{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#ffe066,#ffca3a);
  box-shadow:0 4px 0 #e0a800, 0 10px 18px rgba(255,202,58,.35);
}
.btn-ghost{
  background:#ffffff; color:#1f2937; border:1px solid #e8eef9;
  box-shadow:var(--shadow);
}

.disclaimer{
  margin:6px 0 0; color:#5c677d; font-size:14px; text-align:center;
  background:#fff; border:1px solid #eef3ff; padding:8px 12px; border-radius:12px; display:inline-block;
}

.footer{
  padding:18px; text-align:center; color:#546a7b;
}
.footer-links{
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:10px;
}
.footer a{ color:#2962ff; text-decoration:none; font-weight:700 }
.footer a:hover{text-decoration:underline}
.engine-note{ font-size:12px; opacity:.8 }

.cookie-bar{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:20;
  display:none; gap:12px; align-items:center; justify-content:space-between;
  background:#ffffff; border:1px solid #e9eef8; padding:12px; border-radius:14px; box-shadow:var(--shadow);
}
.cookie-bar.show{ display:flex }
.cookie-actions{ display:flex; gap:8px }

.win-overlay{
  position:fixed; inset:0; pointer-events:none; display:none;
}
.win-overlay.show{ display:block; animation:winGlow .9s ease-out }
@keyframes winGlow{
  0%{ background: radial-gradient(circle at 50% 50%, rgba(22,199,154,.35), transparent 55%) }
  100%{ background: transparent }
}

.win-cell{ animation:pop .5s ease both }
@keyframes pop{
  0%{ transform:scale(1); filter:brightness(1) }
  50%{ transform:scale(1.12); filter:brightness(1.35) }
  100%{ transform:scale(1); filter:brightness(1) }
}

.confetti{
  position:fixed; top:-10px; width:8px; height:14px; opacity:.9; will-change:transform;
  animation:fall 1.8s linear forwards;
  border-radius:2px;
}
@keyframes fall{
  0%{ transform:translateY(-10px) rotate(0deg) }
  100%{ transform:translateY(120vh) rotate(540deg) }
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Responsive tweaks */
@media (min-width:600px){
  .reel{ height:330px }
  .cell{ height:110px }
  .symbol{ width:80px; height:80px }
}
@media (min-width:900px){
  .reel{ height:360px }
  .cell{ height:120px }
  .symbol{ width:88px; height:88px }
}