:root{
  --bg-grad: linear-gradient(135deg,#fff9db 0%,#ffd8a8 40%,#ffc9c9 100%);
  --panel: #ffffffcc;
  --text: #3c2a00;
  --accent: #ff922b;
  --accent-2: #845ef7;
  --ok: #2f9e44;
  --warn: #e8590c;
  --danger: #d6336c;
  --muted: #6c757d;
  --shadow: 0 10px 30px rgba(0,0,0,.15);
  --radius: 16px;
  --cell-size: clamp(72px, 17vh, 120px);
  --gap: 10px;
}

* { box-sizing: border-box; }
html,body { height:100%; }
body{
  margin:0;
  background: var(--bg-grad);
  color: var(--text);
  font: 16px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

.app{
  display:flex;
  flex-direction:column;
  min-height:100%;
  gap: 12px;
  padding: 12px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand__logo{ font-size: 28px; }
.brand__title{ margin:0; font-size: 22px; letter-spacing:.5px; }
.topbar__actions{ display:flex; gap:8px; }

.panel{
  background: var(--panel);
  backdrop-filter: blur(4px);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  display:grid;
  grid-template-columns: 1fr 1fr 2fr;
  align-items:center;
  gap:10px;
}
.panel--disclaimer { grid-template-columns: 1fr; }
.disclaimer {
  margin: 0;
  text-align: center;
  font-weight: 600;
}

.stat{ display:flex; align-items:center; gap:10px; }
.stat__label{ font-weight:600; color:var(--muted); }
.stat__value{ font-size:22px; font-weight:800; color:var(--accent); text-shadow: 0 1px 0 #fff; }

.bet{ display:flex; align-items:center; gap:10px; justify-self:center; }
.bet__label{ font-weight:600; color:var(--muted); }
.bet__controls{ display:flex; align-items:center; gap:8px; }
.bet__value{ min-width:60px; text-align:center; font-size:20px; font-weight:700; }

.msg{ text-align:right; min-height: 1.2em; color: var(--muted); font-weight:600; }

.game{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 12px;
}

.reels{
  position:relative;
  display:grid;
  grid-template-columns: repeat(3, var(--cell-size));
  gap: var(--gap);
  padding: 12px;
  border-radius: calc(var(--radius) * 1.2);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg,#fff 0%, #fff9db 100%);
}
.reel{
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg,#fff9f0, #fff);
  box-shadow: inset 0 0 0 3px rgba(255, 165, 0, .2), inset 0 8px 30px rgba(255,165,0,.15);
}
.reel-viewport{
  width: var(--cell-size);
  height: calc(var(--cell-size) * 3);
  overflow: hidden;
  position: relative;
}
.reel-strip{
  position:absolute;
  top:0; left:0; right:0;
  will-change: transform;
}
.cell{
  width: var(--cell-size);
  height: var(--cell-size);
  display:grid;
  place-items:center;
  position:relative;
}
.cell__inner{
  width: calc(var(--cell-size) - 16px);
  height: calc(var(--cell-size) - 16px);
  border-radius: 14px;
  background: radial-gradient(100% 100% at 50% 0%, #fff 0%, #ffe8cc 100%);
  border: 2px solid rgba(255, 145, 0, .25);
  display:grid;
  place-items:center;
  transform: scale(1);
  transition: transform .2s ease;
}
.cell svg{
  width: 68%;
  height: 68%;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.1));
}
.cell--win .cell__inner{
  animation: pulse .9s ease-in-out 2;
  border-color: #94d82d;
  background: radial-gradient(100% 100% at 50% 0%, #fff 0%, #e9fac8 100%);
}
@keyframes pulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}

.reels__overlay{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 15%, rgba(255,255,255,0) 85%, rgba(255,255,255,.9)),
    radial-gradient(150% 60% at 50% -20%, rgba(255, 202, 40, .35), transparent 60%);
  border-radius: calc(var(--radius) * 1.2);
}

.controls{
  display:flex; align-items:center; gap:10px;
}

.btn{
  appearance:none; border:0; margin:0; padding:10px 16px;
  border-radius: 999px; cursor:pointer; font-weight:800; letter-spacing:.5px;
  color:#fff; background: linear-gradient(180deg, #ff922b, #f76707);
  box-shadow: 0 6px 16px rgba(247,103,7,.35);
  transition: transform .05s ease, filter .2s ease, background .2s ease;
  user-select:none;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn[disabled]{ filter: grayscale(.5) brightness(.9); cursor: not-allowed; }

.btn--spin{
  font-size: 20px; padding:14px 28px;
  background: linear-gradient(180deg,#51cf66,#2f9e44);
  box-shadow: 0 10px 20px rgba(47,158,68,.35);
}
.btn--pill{
  background: linear-gradient(180deg,#748ffc,#5c7cfa);
  box-shadow: 0 8px 16px rgba(92,124,250,.32);
  color: #fff;
}
.btn--ghost{
  background: linear-gradient(180deg,#e9ecef,#dee2e6);
  color:#495057;
  box-shadow: 0 6px 12px rgba(0,0,0,.08);
}
.btn--round{
  width:40px; height:40px; padding:0; border-radius:50%;
  display:grid; place-items:center;
  background: linear-gradient(180deg,#ffd43b,#fab005);
  color:#7c4d00;
}

.win-overlay{
  position:relative; width:100%; height:0; pointer-events:none;
}
.win-overlay__burst{
  position:absolute; inset:0;
  display:block;
  background:
    radial-gradient(60% 80% at 50% 50%, rgba(255,255,255,.8), transparent 60%),
    conic-gradient(from 0deg, #ffd43b, #fcc419, #fab005, #fff3bf, #ffd43b);
  mix-blend-mode: screen;
  animation: pop .8s ease-out forwards;
  border-radius: 24px;
  filter: blur(6px) saturate(1.2);
  opacity:.8;
  z-index: 2;
}
@keyframes pop{
  from{ transform: scale(.6); opacity:.0; }
  to{ transform: scale(1.02); opacity:.85; }
}

.coin-float{
  position:absolute; font-size: 18px; font-weight:900; color:#2f9e44;
  text-shadow: 0 2px 0 #fff;
  animation: floatUp 1.4s ease-out forwards;
  z-index: 3;
}
@keyframes floatUp{
  0%{ transform: translateY(0) scale(1); opacity:0; }
  15%{ opacity:1; }
  100%{ transform: translateY(-80px) scale(1.1); opacity:0; }
}

.footer{
  display:flex; align-items:center; justify-content:space-between;
  padding: 6px 2px;
}
.footer__links{ display:flex; gap:10px; flex-wrap:wrap; }
.footer__links a{ color:#364fc7; text-decoration:none; font-weight:600; }
.footer__links a:hover{ text-decoration:underline; }
.geo{ color: #868e96; }

.cookiebar{
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  background: #fff;
  color: #343a40;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 12px;
  display:none;
}
.cookiebar__content{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.cookiebar__text{ max-width: 520px; font-weight:600; }
.cookiebar__actions{ display:flex; gap:8px; }

@media (min-width: 920px){
  .panel{ grid-template-columns: 1fr 1fr 1fr; }
  .brand__title{ font-size:26px; }
}