:root{
  --bg-grad: linear-gradient(135deg,#ffecd2 0%,#fcb69f 45%,#ffafbd 60%,#ffc3a0 85%,#ffd9a7 100%);
  --primary: #ff4d6d;
  --primary-700:#e73a59;
  --accent: #00c2ff;
  --accent-2:#00e6a8;
  --gold: #ffcc33;
  --text: #42210b;
  --muted: #7c5b46;
  --card: rgba(255,255,255,0.8);
  --shadow: 0 10px 24px rgba(0,0,0,0.12);
  --radius: 16px;
  --gap: 12px;
  --reel-w: 116px;
  --symbol-h: 96px;
  --outline: 2px solid rgba(255,77,109,0.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg-grad) fixed;
  background-size: cover;
}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px;gap:12px;
}
.brand{display:flex;align-items:center;gap:12px;}
.logo{font-size:28px; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.08));}
.title h1{margin:0;font-size:18px;}
.subtitle{margin:2px 0 0 0;color:var(--muted);font-size:12px;}
.disclaimer{background: rgba(255,255,255,0.7); padding:8px 12px; border-radius:12px; box-shadow: var(--shadow); font-size:12px;}
.disclaimer-pl{display:block;color:#6d4c41;font-size:11px; margin-top:2px;}

.game{
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:16px;
  padding:12px;
}

.hud{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:12px;
}
.hud-group{
  background: var(--card);
  border-radius: var(--radius);
  padding:12px;
  box-shadow: var(--shadow);
  display:flex; align-items:center; justify-content:space-between;
}
.hud-group .label{font-size:12px; color:var(--muted);}
.hud-group .value{font-weight:800; font-size:20px; color: var(--primary-700);}
.hud-group.balance .value{color:#00a86b;}
.unit{font-size:12px;color:var(--muted);margin-left:4px;}

.bet-ctrl{display:flex; align-items:center; gap:8px;}
.btn{
  border:none;
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  color:white;
  background: var(--primary);
  cursor:pointer;
  box-shadow: var(--shadow);
  transition: transform .06s ease, filter .2s ease, background .2s ease;
}
.btn:active{transform: translateY(1px) scale(0.98);}
.btn.primary{background: linear-gradient(180deg,#ff6b8b,#ff3c64);}
.btn.warn{background: linear-gradient(180deg,#ffb703,#ff9800); color:#5b3d00;}
.btn.ghost{background: transparent; color: var(--primary-700); border:2px solid rgba(255,77,109,0.35);}
.btn.big{font-size:20px;padding:16px 28px;border-radius:18px;}
.btn:disabled{opacity:0.5; cursor:not-allowed; filter: grayscale(0.4);}

.switch{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
}
.switch input{display:none;}
.switch .slider{
  width:46px; height:28px; background:#ffd3df; border-radius:20px; position:relative; transition: background .2s ease;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.1);
}
.switch .slider::after{
  content:""; position:absolute; left:2px; top:2px; width:24px; height:24px; background:white; border-radius:50%;
  box-shadow: var(--shadow); transition: transform .2s ease;
}
.switch input:checked + .slider{ background:#ff8fb1;}
.switch input:checked + .slider::after{ transform: translateX(18px); }
.switch-label{font-weight:700; color:#883e57;}

.slot-area{
  display:grid; gap:12px; justify-items:center;
}
.reels{
  position:relative;
  display:grid;
  grid-template-columns: repeat(3, var(--reel-w));
  justify-content:center;
  gap:10px;
  background: rgba(255,255,255,0.7);
  padding:14px;
  border-radius: 18px;
  box-shadow: var(--shadow);
  outline: var(--outline);
}
.reel{
  width: var(--reel-w);
  height: calc(var(--symbol-h) * 3);
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.95), rgba(255,255,255,0.6));
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  outline: 2px dashed rgba(0,194,255,0.15);
}
.reel::after{
  content:"";
  position:absolute; left:0; right:0; top: calc(var(--symbol-h) - 1px); height:2px; background: rgba(255,29,87,0.2);
  box-shadow: 0 96px 0 0 rgba(255,29,87,0.2);
}
.reel-strip{
  position:absolute; left:0; top:0; width:100%;
  will-change: transform;
}
.symbol{
  width:100%; height: var(--symbol-h); display:flex; align-items:center; justify-content:center;
  user-select:none;
}
.symbol .tag{
  position:absolute; top:6px; right:6px; font-size:10px; background: rgba(255,255,255,0.6);
  padding:2px 6px; border-radius:8px; color:#7a4a00; font-weight:800;
}
.symbol svg{ width:72px; height:72px; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.15));}

.paylines-overlay{
  pointer-events:none;
  position:absolute; inset:14px;
}
.payline{
  position:absolute; left:0; right:0; height:4px; background: linear-gradient(90deg,#00e6a8,#00c2ff); opacity:0.0;
  border-radius:4px; mix-blend-mode: multiply;
}
.payline.mid{ top: calc(50% - 2px); }
.payline.diag-left{
  top: 25%; height:4px; transform: rotate(-12deg) translateY(-2px); transform-origin:left center;
}
.payline.diag-right{
  top: 25%; height:4px; transform: rotate(12deg) translateY(-2px); transform-origin:right center;
}

.controls{display:flex; gap:12px; justify-content:center; align-items:center;}
.message{
  min-height: 28px;
  font-weight:700; color:#5b3d00; text-align:center;
  padding:6px 10px; background: rgba(255,255,255,0.65); border-radius: 12px;
}

.footer-links{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.footer-links .link{color:#004aad; font-weight:700; text-decoration:none; background: rgba(255,255,255,0.7); padding:6px 10px; border-radius:10px;}
.footer-links .link:hover{background:white; box-shadow: var(--shadow);}

.win-glow{
  animation: glow 1s ease-in-out infinite alternate;
}
@keyframes glow{
  from{ box-shadow: 0 0 0 rgba(255,204,51,0.0), inset 0 0 0 rgba(255,204,51,0.0);}
  to{ box-shadow: 0 0 24px rgba(255,204,51,0.55), inset 0 0 22px rgba(255,204,51,0.35);}
}

.confetti{
  position:fixed; pointer-events:none; inset:0; overflow:hidden;
}
.confetti .piece{
  position:absolute; width:10px; height:16px; border-radius:2px; opacity:0.9;
  animation: fall 1400ms linear forwards;
}
@keyframes fall{
  from{ transform: translateY(-10vh) rotate(0deg); }
  to{ transform: translateY(110vh) rotate(720deg); }
}

.cookie-banner{
  position: fixed; left:0; right:0; bottom:0; padding: 12px;
  display:none; z-index: 50;
}
.cookie-card{
  max-width: 840px; margin: 0 auto; background: var(--card); border-radius: 18px; box-shadow: var(--shadow);
  display:flex; gap:12px; align-items:center; padding: 12px;
}
.cookie-emoji{font-size:28px;}
.cookie-text h2{margin:4px 0 0 0; font-size:16px;}
.cookie-text p{margin:6px 0 0 0; font-size:13px; color:var(--muted);}
.cookie-actions{margin-left:auto; display:flex; gap:8px;}

/* Focus & a11y */
button:focus-visible, .link:focus-visible{
  outline: 3px dashed var(--accent);
  outline-offset: 2px;
}

/* Larger screens */
@media (min-width: 720px){
  .title h1{font-size:22px;}
  .hud{grid-template-columns: 1fr 1fr 1fr;}
  :root{ --reel-w: 140px; --symbol-h: 112px; }
}