@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;800&display=swap');

:root{
  --bg-a:#fff6f7;
  --bg-b:#fff;
  --accent:#ff3355;
  --accent-2:#ff8a00;
  --accent-3:#00c2ff;
  --text:#1d1d1f;
  --muted:#6b7280;
  --good:#12b886;
  --warn:#ef4444;
  --card:#ffffff;
  --reel-border:#ffd6dd;
  --cell:#fff;
  --cell-odd:#fff9fb;
  --cell-shadow:0 6px 20px rgba(255,51,85,0.15);
  --btn-shadow:0 8px 16px rgba(0,0,0,0.1);
  --radius:16px;
  --cell-size:92px;
  --gap:14px;
  --transition:200ms ease;
}

* { box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:Rubik,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  color:var(--text);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.95)),
    radial-gradient(circle at 10% 10%, #ffe1e7, transparent 40%),
    radial-gradient(circle at 90% 20%, #fff2cc, transparent 40%),
    radial-gradient(circle at 20% 90%, #dffff7, transparent 40%),
    radial-gradient(circle at 85% 85%, #e0f2ff, transparent 40%);
  background-color:var(--bg-a);
}

.site-header{
  padding:16px;
  background:
    linear-gradient(90deg, #ff3355, #ff6f3d, #ffb800);
  color:white;
  text-align:center;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:center;
}
.brand h1{ margin:0; font-weight:800; letter-spacing:0.5px; }
.subtitle{ opacity:0.95; font-size:14px; margin-top:6px; }

.flag-bh{
  width:36px; height:24px; border-radius:4px; background:white;
  position:relative; box-shadow:0 2px 8px rgba(0,0,0,0.2) inset;
}
.flag-bh:before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:18px;
  background:
    linear-gradient(90deg, #fff 0 60%, transparent 60%),
    conic-gradient(from -18deg at 60% 50%, #ff3347 0 10%, transparent 0 20%) 0/6px 100% repeat-y;
}
.flag-bh:after{
  content:""; position:absolute; left:16px; right:0; top:0; bottom:0; background:#ff3347; border-radius:0 4px 4px 0;
}

.disclaimer{
  text-align:center;
  padding:8px 12px;
  font-size:13px;
  background:#fff6f7;
  border-bottom:1px solid #ffe1e7;
}

.game-root{
  max-width:920px;
  margin:16px auto;
  padding:0 12px 120px;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

.hud{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
}
.hud-item{
  background:var(--card);
  border-radius:var(--radius);
  padding:12px;
  box-shadow:var(--cell-shadow);
  display:flex; align-items:center; justify-content:space-between;
}
.hud-item .label{ color:var(--muted); font-size:13px; }
.hud-item .value{ font-weight:800; font-size:20px; }

.bet-controls{ display:flex; align-items:center; gap:10px; }
.btn{
  appearance:none; border:none; background:#fff; color:var(--text);
  padding:12px 16px; border-radius:12px; box-shadow:var(--btn-shadow);
  font-weight:700; cursor:pointer; transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn:active{ transform:translateY(1px) scale(0.98); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn.primary{ background:linear-gradient(180deg, #ff5a7a, #ff3355); color:white; }
.btn.warn{ background:linear-gradient(180deg, #ffb3b3, #ff6464); color:#fff; }
.btn.round{ width:40px; height:40px; border-radius:50%; padding:0; display:grid; place-items:center; font-size:20px; }

.toggle{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.toggle input{ display:none; }
.toggle-ui{
  width:56px; height:32px; background:#ffd8df; border-radius:20px; position:relative; transition:all var(--transition);
  box-shadow:inset 0 2px 8px rgba(0,0,0,0.1);
}
.toggle-ui:after{
  content:""; width:24px; height:24px; background:white; border-radius:50%; position:absolute; top:4px; left:4px; transition:all var(--transition);
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
}
.toggle input:checked + .toggle-ui{ background:#2bd47d; }
.toggle input:checked + .toggle-ui:after{ left:28px; }
.toggle-label{ font-weight:600; }

.playfield{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:0 12px 40px rgba(255,51,85,0.18);
  padding:16px;
}
.reels{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--gap);
  padding:10px;
  background:linear-gradient(180deg, #fff, #fff6f7);
  border:2px solid var(--reel-border);
  border-radius:16px;
  position:relative;
  overflow:hidden;
}
.reel-wrap{
  background:linear-gradient(180deg, #ffffff, #fff9fb);
  border:1px solid #ffdfe6;
  border-radius:12px;
  box-shadow:var(--cell-shadow);
  position:relative;
  height:calc(var(--cell-size) * 3);
  overflow:hidden;
}
.reel{
  position:absolute; left:0; right:0; top:0;
  will-change:transform;
}
.cell{
  height:var(--cell-size);
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px dashed #ffe5ec;
  background:var(--cell);
}
.cell:nth-child(odd){ background:var(--cell-odd); }
.cell svg{ width:56px; height:56px; display:block; }
.cell .cap{ font-size:11px; color:var(--muted); margin-top:4px; text-align:center; }

.payline{
  position:absolute; left:10px; right:10px;
  top:calc(50% - var(--cell-size)/2);
  height:var(--cell-size);
  border-top:3px dashed rgba(255,51,85,.45);
  border-bottom:3px dashed rgba(255,51,85,.45);
  pointer-events:none;
}

.cta-row{
  display:flex; gap:12px; justify-content:center; align-items:center;
  margin-top:16px; flex-wrap:wrap;
}

.message{
  margin-top:10px; text-align:center; font-weight:700;
  color:var(--accent);
  min-height:24px;
}

.info details{
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  box-shadow:var(--cell-shadow);
}
.info summary{ cursor:pointer; font-weight:700; color:#c01b3a; }

.links{
  display:flex; gap:18px; justify-content:center; margin-top:4px; flex-wrap:wrap;
}
.links a{
  color:#c01b3a; font-weight:600; text-decoration:none; border-bottom:1px solid #ffc7d3;
}

.cookie-bar{
  position:fixed; left:12px; right:12px; bottom:12px;
  background:#ffffff;
  border:2px solid #ffd6dd;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
  padding:12px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  z-index:50;
}
.cookie-text{ font-size:14px; }
.cookie-actions{ display:flex; gap:8px; }

.fx-win{
  position:fixed; inset:0; pointer-events:none; z-index:40;
}
.fx-win .spark{
  position:absolute; width:8px; height:8px; border-radius:50%;
  background:var(--accent);
  animation:fly 900ms ease-out forwards;
  box-shadow:0 0 0 4px rgba(255,51,85,.1);
}
@keyframes fly{
  from{ transform:translate(var(--x0), var(--y0)) scale(1); opacity:1; }
  to{ transform:translate(var(--x1), var(--y1)) scale(0.6); opacity:0; }
}

.win-glow{
  box-shadow:0 0 0 4px rgba(18,184,134,.3), 0 0 0 12px rgba(18,184,134,.12);
  transition:box-shadow 600ms ease;
}
.win-row{
  position:absolute; left:10px; right:10px;
  top:calc(50% - var(--cell-size)/2);
  height:var(--cell-size);
  background:radial-gradient(ellipse at center, rgba(255,248,150,0.55), rgba(255,248,150,0) 55%);
  pointer-events:none; z-index:2;
}

@media (min-width: 800px){
  .game-root{ grid-template-columns:2fr 1fr; }
  .info{ align-self:start; position:sticky; top:12px; }
}

/* Accessibility focus */
button:focus-visible, .toggle-ui:focus-visible{
  outline:3px solid #00c2ff;
  outline-offset:2px;
}