:root{
  --panel:rgba(34,8,12,.88);
  --text:#fff5f7;
  --muted:#d2b5bf;
  --pink:#ff4c88;
  --orange:#ff8b2f;
  --yellow:#ffd964;
  --line:rgba(255,255,255,.10);
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,123,54,.22), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255,76,136,.18), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(255,217,100,.11), transparent 32%),
    linear-gradient(180deg, #22070c 0%, #120307 72%, #0d0205 100%);
  overflow-x:hidden;
}
.bg-fruit{
  position:fixed;
  width:220px;
  height:220px;
  border-radius:50%;
  filter:blur(60px);
  opacity:.18;
  pointer-events:none;
  z-index:0;
}
.bg-fruit.left{ left:-40px; top:120px; background:#ff8b2f; }
.bg-fruit.right{ right:-30px; bottom:80px; background:#ff4c88; }
.shell{
  position:relative;
  z-index:1;
  width:min(980px, calc(100% - 28px));
  margin:0 auto;
  padding:28px 0 36px;
}
.topbar{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-end;
  margin-bottom:18px;
}
.eyebrow{
  color:var(--yellow);
  font-size:11px;
  font-weight:800;
  letter-spacing:.22em;
}
h1{
  margin:6px 0 0;
  font-size:clamp(36px, 6vw, 68px);
  line-height:.92;
  letter-spacing:-.055em;
  text-shadow:0 0 30px rgba(255,76,136,.16);
}
.subtitle{
  margin:.55rem 0 0;
  color:var(--muted);
  font-size:14px;
}
.bonus-pill{
  min-width:130px;
  padding:12px 16px;
  text-align:right;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.bonus-pill span, .hud-card span, .bet-control span{
  display:block;
  color:var(--muted);
  font-size:11px;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.bonus-pill strong{ font-size:26px; }
.machine{
  position:relative;
  padding:18px;
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    var(--panel);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
}
.machine-glow{
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(255,76,136,.45), rgba(255,217,100,.28), rgba(255,139,47,.42));
  filter:blur(26px);
  opacity:.28;
}
.hud{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:12px;
}
.hud-card{
  min-height:70px;
  padding:12px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hud-card.center{text-align:center}
.hud-card strong{ font-size:24px; margin-top:3px; }
.reels-frame{
  padding:10px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.04), transparent 28%),
    linear-gradient(180deg, #2b0810, #140308);
  box-shadow:inset 0 0 34px rgba(0,0,0,.72);
}
.reels{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:8px;
}
.reel{
  display:grid;
  grid-template-rows:repeat(3, minmax(96px, 1fr));
  gap:8px;
}
.symbol{
  position:relative;
  min-height:112px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(34px, 6vw, 58px);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.07), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  user-select:none;
  overflow:hidden;
}
.symbol::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.03);
}
.symbol.spinning{ animation:spinBlur .11s linear infinite; }
.symbol.win{
  transform:translateY(-2px) scale(1.04);
  border-color:rgba(143,255,142,.95);
  box-shadow:0 0 0 2px rgba(143,255,142,.15), 0 0 24px rgba(143,255,142,.24);
  animation:winPulse .72s ease-in-out infinite alternate;
}
.symbol.scatter{
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.scatter-photo{
  width:78%;
  height:78%;
  border-radius:14px;
  background-image:url('assets/scatter.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  box-shadow:0 0 0 2px rgba(255,255,255,.08);
  position:relative;
  z-index:2;
}
.scatter-badge{
  position:absolute;
  left:8px;
  bottom:8px;
  z-index:3;
  padding:4px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  color:#201018;
  background:linear-gradient(135deg, var(--yellow), #fff2ba);
}
.message{
  min-height:48px;
  display:flex;
  justify-content:center;
  align-items:center;
  color:var(--muted);
  font-weight:800;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.controls{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:14px;
}
.bet-control{
  display:flex;
  align-items:center;
  gap:8px;
}
.bet-control > div{
  min-width:78px;
  text-align:center;
}
.bet-control strong{ font-size:20px; }
button{
  border:0;
  color:white;
  cursor:pointer;
  font:inherit;
}
.bet-control button, .sound-btn{
  width:42px;
  height:42px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.09);
}
.bet-control button:hover, .sound-btn:hover{ background:rgba(255,255,255,.13); }
.spin-btn{
  width:150px;
  height:82px;
  border-radius:26px;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.34), transparent 34%),
    linear-gradient(135deg, var(--pink), var(--orange));
  box-shadow:0 14px 38px rgba(255,76,136,.22), inset 0 1px 0 rgba(255,255,255,.38);
  font-weight:900;
  letter-spacing:.08em;
  transition:transform .14s ease, filter .14s ease;
}
.spin-btn:hover{ transform:translateY(-2px); filter:brightness(1.07); }
.spin-btn:active{ transform:translateY(1px) scale(.98); }
.spin-btn:disabled{ filter:grayscale(.8) brightness(.58); cursor:not-allowed; transform:none; }
.spin-btn span{ display:block; font-size:25px; }
.spin-btn small{ opacity:.6; font-size:9px; }
.sound-btn{ justify-self:end; }
.legend{
  display:flex;
  flex-wrap:wrap;
  gap:14px 22px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.07);
  color:var(--muted);
  font-size:12px;
}
.legend-icon{
  display:inline-block;
  width:22px;
  text-align:center;
  font-size:18px;
  vertical-align:-3px;
}
.legend-photo{
  display:inline-block;
  width:22px;
  height:22px;
  border-radius:50%;
  vertical-align:-6px;
  background-image:url('assets/scatter.png');
  background-position:center;
  background-size:cover;
  border:1px solid rgba(255,255,255,.18);
}
footer{
  text-align:center;
  margin-top:16px;
  color:#a27f8c;
  font-size:11px;
}
.win-pop{
  position:fixed;
  left:50%;
  top:35%;
  transform:translate(-50%, -50%) scale(.75);
  z-index:40;
  pointer-events:none;
  opacity:0;
  font-size:clamp(40px, 9vw, 84px);
  font-weight:1000;
  letter-spacing:-.04em;
  text-shadow:0 0 30px rgba(143,255,142,.38);
}
.win-pop.show{ animation:popWin 1s cubic-bezier(.2,.8,.2,1); }
@keyframes spinBlur{
  0%{ transform:translateY(-3px); filter:blur(1px); opacity:.75; }
  50%{ transform:translateY(4px); filter:blur(2px); opacity:.44; }
  100%{ transform:translateY(-3px); filter:blur(1px); opacity:.75; }
}
@keyframes winPulse{
  from{ filter:brightness(1); }
  to{ filter:brightness(1.34); }
}
@keyframes popWin{
  0%{ opacity:0; transform:translate(-50%, -50%) scale(.56); }
  18%{ opacity:1; transform:translate(-50%, -50%) scale(1.08); }
  70%{ opacity:1; transform:translate(-50%, -52%) scale(1); }
  100%{ opacity:0; transform:translate(-50%, -64%) scale(.98); }
}
@media (max-width: 760px){
  .shell{ width:min(100% - 14px, 980px); padding-top:14px; }
  .topbar{ align-items:flex-start; flex-direction:column; }
  .machine{ padding:10px; border-radius:20px; }
  .hud-card{ min-height:60px; padding:10px; }
  .hud-card strong{ font-size:18px; }
  .reels{ gap:4px; }
  .reel{ gap:4px; grid-template-rows:repeat(3, minmax(68px, 1fr)); }
  .symbol{ min-height:74px; font-size:34px; border-radius:12px; }
  .scatter-photo{ border-radius:10px; }
  .controls{ grid-template-columns:1fr auto 1fr; gap:8px; }
  .spin-btn{ width:112px; height:70px; border-radius:22px; }
  .spin-btn span{ font-size:20px; }
  .bet-control{ gap:4px; }
  .bet-control button, .sound-btn{ width:36px; height:36px; }
  .bet-control > div{ min-width:54px; }
  .legend{ font-size:10px; }
}