:root{
  --bg-1:#fffcf2;
  --bg-2:#f8ffd2;
  --bg-3:#e7f6ff;
  --accent:#165ef0;
  --accent-2:#f01e86;
  --ok:#1abc9c;
  --warn:#ff9f1c;
  --danger:#ff3b3b;
  --ink:#102a43;
  --muted:#5c6b73;
  --panel:#ffffffd9;
  --ring:#2dd4bf;
  --shadow: 0 10px 25px rgba(0,0,0,0.08);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, Noto Sans, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';
  line-height:1.3;
  background:
    radial-gradient(1200px 600px at 20% -10%, var(--bg-2), transparent 60%),
    radial-gradient(1200px 600px at 100% 20%, var(--bg-3), transparent 60%),
    radial-gradient(800px 500px at 40% 120%, #ffe2f7, transparent 60%),
    linear-gradient(120deg, #eef9ff, #fff7f0 45%, #f6fff0 100%);
  background-attachment: fixed;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  position:sticky;
  top:0;
  background:linear-gradient(180deg, #ffffffcc, #ffffff88);
  backdrop-filter: blur(8px);
  border-bottom:1px solid #00000010;
  z-index:10;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-size:18px;
}
.brand-mark{
  width:28px;height:28px;display:inline-grid;place-items:center;
  background:conic-gradient(from 45deg, #28c5ff, #ee3aff, #ffc83d, #28c5ff);
  color:#fff;border-radius:10px;font-weight:900;box-shadow: var(--shadow);
}
.disclaimer{
  font-size:12px;color:var(--muted);text-align:center;flex:1;
}
.controls-right{display:flex;gap:8px;align-items:center;}

.btn{
  -webkit-tap-highlight-color: transparent;
  appearance:none;border:0;cursor:pointer;
  padding:10px 14px;border-radius:12px;font-weight:700;
  transition:.2s transform ease, .2s filter ease, .2s background-color ease;
  background:#fff;color:var(--ink);box-shadow: var(--shadow);
}
.btn:active{transform:translateY(1px) scale(0.99)}
.btn[disabled]{opacity:.5;pointer-events:none;filter:grayscale(0.5)}
.btn-primary{
  background:linear-gradient(180deg, #6edaff, #2ea8ff);
  color:#002244; text-shadow:0 1px 0 #ffffff40;
  box-shadow: 0 6px 18px rgba(46,168,255,.35);
}
.btn-outline{
  background:#ffffffcc;border:2px solid #00000010;
}
.btn-toggle{
  background:linear-gradient(180deg, #ffeff6, #ffdff0);
  color:#7a1551;
  border:2px solid #00000008;
}
.btn-round{
  width:44px;height:44px;border-radius:50%;
  font-size:22px;line-height:1;display:grid;place-items:center;
  background:linear-gradient(180deg, #fff, #f3f4f6);
}

.game{
  max-width:1100px;margin:24px auto;padding:0 16px;
  display:grid;gap:16px;
}
.hud{
  display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center;
}
.stat{display:grid;gap:6px}
.stat-label{font-size:12px;color:var(--muted)}
.stat-value{font-size:22px;font-weight:800}
.bet-ctrl{display:flex;gap:10px;align-items:center}
.actions{display:flex;justify-content:flex-end}
.btn-spin{
  min-width:140px;height:56px;border-radius:16px;font-size:18px;letter-spacing:.5px;
  background: radial-gradient(120% 120% at 20% 10%, #7CFFCB, #74D1FF 55%, #7B61FF 100%);
  color:white; box-shadow: 0 10px 30px rgba(123,97,255,.35);
}

.slot .frame{
  position:relative;
  padding:14px;
  border-radius:var(--radius);
  background:linear-gradient(180deg, #fff, #f6fbff);
  box-shadow: var(--shadow);
  border:1px solid #0000000f;
}
.reels{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  padding:8px;
  border-radius:12px;
  background: linear-gradient(180deg, #ebf8ff, #fff);
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.06);
}
.reel{
  height:280px; /* mobile-first; grows on larger screens */
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(180deg, #ffffff, #fafcff);
  border:2px solid #eaf3ff;
  position:relative;
}
@media (min-width:540px){
  .reel{ height:320px; }
}
@media (min-width:920px){
  .reel{ height:360px; }
}
.track{
  position:absolute;left:0;top:0;right:0;
  will-change: transform;
}
.cell{
  height: calc(100% / 3);
  display:grid;place-items:center;
}
.symbol{
  width:80%;max-width:120px;aspect-ratio:1/1;display:block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));
  transition: transform .25s ease;
}
.symbol.win{
  animation: bling .5s ease-out 0s 4 alternate;
}
@keyframes bling{
  from{ transform: scale(1) rotate(0deg) }
  to{ transform: scale(1.08) rotate(2deg) }
}

.payline{
  position:absolute;left:6px;right:6px;top:50%;height:0;
  border-top:4px dashed #ff4d9d;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.1));
  transform: translateY(-50%);
  pointer-events:none;
}

.message{
  margin-top:10px;min-height:28px;
  font-weight:700;color:var(--muted);
}
.message.win{ color: var(--ok); }
.message.lose{ color: var(--danger); }

.footer{
  margin:24px auto 40px;
  padding:8px 16px;
  max-width:1100px;
  display:grid;gap:8px;justify-items:center;color:var(--muted)
}
.links{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.links a{color:var(--accent-2);text-decoration:none;font-weight:700}
.links a:hover{text-decoration:underline}

.cookie-banner{
  position:fixed;inset:0;display:grid;place-items:end center;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.15));
  padding:16px;z-index:50;
}
.cookie-card{
  width:100%;max-width:560px;background:var(--panel);
  border-radius:16px;box-shadow: var(--shadow);
  border:1px solid #0000000f;
  padding:16px;display:grid;gap:10px;
}
.cookie-icon{
  font-size:28px;filter: drop-shadow(0 4px 8px rgba(0,0,0,.18));
}
.cookie-actions{display:flex;gap:8px;justify-content:flex-end}

.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;
}

/* Reel glow when spinning */
.reel.spinning{
  box-shadow: inset 0 0 0 2px #c6e3ff, 0 10px 24px rgba(46,168,255,.25);
}
.reel-stop{
  animation: stopFlash .25s ease-out;
}
@keyframes stopFlash{
  0%{ box-shadow: inset 0 0 0 2px #fff4a8, 0 0 0 rgba(0,0,0,0) }
  100%{ box-shadow: inset 0 0 0 2px #eaf3ff, 0 6px 16px rgba(0,0,0,.06) }
}

/* Big screen enhancements */
@media (min-width:900px){
  .hud{ grid-template-columns: 1fr 1fr auto; }
  .stat-value{ font-size:26px }
  .btn-spin{ min-width:200px;height:64px;font-size:20px }
}

/* Fancy focus ring */
:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Brand pulse */
.brand-mark{
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform: scale(1)}
  50%{ transform: scale(1.06)}
}