:root{
  --bg-a: #ffefd5;
  --bg-b: #fff7df;
  --accent: #ff5e5b;
  --accent-2: #ffb100;
  --accent-3: #00b7ff;
  --accent-4: #38d39f;
  --text: #3a2d2d;
  --muted: #7a6d6d;
  --panel: #ffffff;
  --panel-2: #fff3e0;
  --shadow: rgba(0,0,0,0.12);
  --cell-size: 96px;
  --radius: 16px;
  --gap: 12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Color Emoji";
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% 20%, #fff6e8 0, transparent 60%), linear-gradient(135deg, var(--bg-a), var(--bg-b));
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  background:linear-gradient(90deg,#ffe7a7,#ffd0e3,#bffcff);
  box-shadow:0 2px 8px var(--shadow);
}
.brand{display:flex;align-items:center;gap:8px}
.logo-emoji{font-size:28px}
.game-title{
  margin:0;
  font-size:22px;
  letter-spacing:1px;
  background: linear-gradient(90deg, #ff5e5b, #ffb100, #00b7ff, #38d39f);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation: hue 8s linear infinite;
}
@keyframes hue{
  0%{filter:hue-rotate(0deg)}
  100%{filter:hue-rotate(360deg)}
}
.disclaimer{
  margin:0;
  font-size:12px;
  color:#5a4d4d;
  background:#fffbe6;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #ffe8a0;
}

.game{
  max-width:980px;
  margin:0 auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.hud{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media(min-width:640px){
  .hud{grid-template-columns: 1fr 1fr auto}
}

.balance,.bet-controls{
  background:var(--panel);
  border:1px solid #ffe0b5;
  border-radius:var(--radius);
  padding:12px;
  box-shadow:0 6px 16px var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.balance .label,.bet-controls .label{font-weight:600;color:#6b4b33}
.balance .value,.bet-controls .value{font-weight:800;color:#3b2c25}

.bet-box{display:flex;align-items:center;gap:8px}
.btn{
  appearance:none;border:0;cursor:pointer;
  background:linear-gradient(180deg,#fff,#ffeaca);
  color:#3b2c25;
  padding:10px 14px;border-radius:12px;
  font-weight:700; box-shadow:0 3px 0 #e7c99a, 0 8px 16px var(--shadow);
  transition:transform .07s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5; cursor:not-allowed; filter:grayscale(.2)}
.btn.primary{
  background:linear-gradient(180deg,#ffdd87,#ffb100);
  box-shadow:0 3px 0 #e39b00, 0 8px 16px rgba(255,177,0,.35);
}
.btn.danger{
  background:linear-gradient(180deg,#ffd6d6,#ff8a8a);
  box-shadow:0 3px 0 #eb6a6a, 0 8px 16px rgba(255,106,106,.35);
}
.btn.round{border-radius:999px; width:40px; height:40px; display:inline-grid; place-items:center; padding:0}
.btn.big{font-size:20px; padding:16px 26px; border-radius:18px}
.btn.toggle[aria-pressed="false"]{filter:grayscale(.6); opacity:.75}

.toggles{display:flex;justify-content:flex-end;gap:8px}

.slot{
  background:linear-gradient(180deg, #fffdf7, #fff7eb);
  border:2px solid #ffdba7;
  border-radius:20px;
  padding:16px;
  box-shadow:0 10px 24px var(--shadow), inset 0 0 0 6px #ffffff;
}

.reels{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  align-items:center;
  justify-items:center;
  padding:6px;
}
.reel{
  width:100%;
  height:calc(var(--cell-size) * 3 + 18px);
  background:linear-gradient(180deg,#ffffff,#fff6e6);
  border-radius:16px;
  border:1px solid #ffd9b5;
  position:relative;
  overflow:hidden;
  box-shadow: inset 0 3px 10px rgba(255,182,73,.35), 0 8px 18px rgba(0,0,0,.08);
}
.reel::before, .reel::after{
  content:""; position:absolute; left:0; right:0; height:32px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,247,231,.95), rgba(255,247,231,0));
  z-index:2;
}
.reel::after{top:auto; bottom:0; transform:rotate(180deg)}
.reel-inner{
  position:absolute; left:0; right:0; top:0;
  will-change: transform;
}
.cell{
  height:var(--cell-size);
  display:grid; place-items:center;
  border-bottom:1px dashed #ffe0b8;
}
.cell svg{
  width:80%; height:80%;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.05));
}

.payline{
  position:relative;
  height:0;
}
.payline::after{
  content:"";
  position:absolute; left:6px; right:6px; top: calc(var(--cell-size) + 9px);
  height:4px; border-radius:4px;
  background: repeating-linear-gradient(90deg, #ff5e5b 0 12px, #ffb100 12px 24px, #00b7ff 24px 36px, #38d39f 36px 48px);
  opacity:.6;
}

.controls{
  display:flex; justify-content:center; align-items:center; gap:8px; padding-top:8px;
}

.result-banner{
  text-align:center;
  font-weight:900;
  font-size:20px;
  min-height:28px;
  color:#6b4b33;
}
.result-banner.win{
  animation: pop .4s ease;
  color:#1f7a52;
  text-shadow:0 1px 0 #fff, 0 0 16px rgba(56,211,159,.45);
}
.result-banner.lose{color:#9a5a5a}
@keyframes pop{0%{transform:scale(.9)}100%{transform:scale(1)}}

.glow-win{
  animation: glow 1.2s ease-in-out infinite alternate;
}
@keyframes glow{
  from{ box-shadow: 0 0 0 rgba(56,211,159,0), 0 0 0 rgba(255,255,255,0) }
  to{ box-shadow: 0 0 0 rgba(56,211,159,0), 0 0 32px rgba(56,211,159,.6) }
}

/* Confetti */
#confetti{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:40}
.confetti{
  position:absolute; width:10px; height:16px; opacity:.95;
  transform: translate3d(0,-20px,0) rotate(0deg);
  animation: fall 1200ms ease-in forwards, spin 1200ms linear infinite;
  border-radius:2px;
}
@keyframes fall{
  to{ transform: translate3d(var(--dx, 0px), 110vh, 0) rotate(var(--rot, 180deg)); opacity:0.8 }
}
@keyframes spin{
  50%{ transform: translate3d(var(--dx, 0px), 50vh, 0) rotate(180deg) }
  100%{ transform: translate3d(var(--dx, 0px), 110vh, 0) rotate(360deg) }
}

/* Footer */
.footer{
  padding:16px;
  text-align:center;
}
.footer .links{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
}
.footer a{
  color:#006bb3; text-decoration:none; font-weight:700;
  background:#e8f6ff; padding:6px 10px; border-radius:10px; border:1px solid #cfefff;
}

/* Cookie banner */
.cookie-banner{
  position:fixed; left:12px; right:12px; bottom:12px;
  background:#ffffff; border:1px solid #ffdba7; border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.18);
  padding:12px; display:none; z-index:50;
}
.cookie-banner.show{display:block}
.cookie-content{display:flex; flex-direction:column; gap:8px}
.cookie-actions{display:flex; gap:8px; justify-content:flex-end}

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

/* Feedback */
.shake{
  animation: shake .25s ease;
}
@keyframes shake{
  0%{transform:translateX(0)} 25%{transform:translateX(-4px)} 50%{transform:translateX(4px)} 75%{transform:translateX(-2px)} 100%{transform:translateX(0)}
}