:root{
  --panel:rgba(11,19,15,.88);
  --text:#eff8ef;
  --muted:#9aada0;
  --gold:#f2d386;
  --green:#7de1a1;
  --red:#ff7e95;
}
*{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% 15%, rgba(70,185,116,.18), transparent 24%),
    radial-gradient(circle at 82% 20%, rgba(242,211,134,.10), transparent 25%),
    radial-gradient(circle at 50% 100%, rgba(55,120,85,.16), transparent 35%),
    linear-gradient(180deg, #0a130e 0%, #050907 68%, #040605 100%);
  overflow-x:hidden;
}
.mist{
  position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.06), transparent 28%),
    radial-gradient(circle at 80% 45%, rgba(255,255,255,.05), transparent 24%),
    radial-gradient(circle at 55% 85%, rgba(255,255,255,.04), transparent 20%);
  filter:blur(30px); opacity:.75;
}
.shell{ width:min(1020px, calc(100% - 28px)); margin:0 auto; padding:28px 0 34px; }
.topbar{ display:flex; justify-content:space-between; gap:18px; align-items:flex-end; margin-bottom:18px; }
.kicker{ color:var(--green); font-size:11px; font-weight:800; letter-spacing:.22em; }
h1{ margin:6px 0 0; font-size:clamp(34px, 6vw, 66px); line-height:.92; letter-spacing:-.055em; text-shadow:0 0 30px rgba(125,225,161,.12); }
.subtitle{ margin:.55rem 0 0; color:var(--muted); max-width:640px; font-size:14px; }
.top-stats{ display:grid; grid-template-columns:repeat(2, minmax(120px, 160px)); gap:10px; }
.pill{ padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); text-align:right; backdrop-filter:blur(10px); }
.pill span, .hud-card span, .bet-info span{ display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; }
.pill strong{ display:block; margin-top:4px; font-size:24px; }
.special-pill strong{ color:var(--gold); }
.machine{
  position:relative; padding:18px; border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)), var(--panel);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 80px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
}
.frame-glow{ position:absolute; inset:-1px; z-index:-1; border-radius:inherit; background:linear-gradient(90deg, rgba(125,225,161,.45), rgba(242,211,134,.18), rgba(122,214,200,.35)); filter:blur(28px); opacity:.25; }
.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-wrap{ padding:10px; border-radius:24px; background:radial-gradient(circle at 50% 5%, rgba(255,255,255,.04), transparent 20%), linear-gradient(180deg, #0a120d, #060a08); border:1px solid rgba(255,255,255,.1); box-shadow:inset 0 0 34px rgba(0,0,0,.7); }
.reels{ display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; }
.reel{ display:grid; grid-template-rows:repeat(3, minmax(100px, 1fr)); gap:8px; padding:2px; border-radius:18px; transition:box-shadow .2s ease, background .2s ease; }
.reel.expanded{ background:linear-gradient(180deg, rgba(242,211,134,.16), rgba(125,225,161,.08)); box-shadow:0 0 0 1px rgba(242,211,134,.24), 0 0 24px rgba(242,211,134,.12); }
.symbol{
  position:relative; min-height:116px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:clamp(34px, 6vw, 56px); background:radial-gradient(circle at 50% 18%, rgba(255,255,255,.06), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.07); user-select:none; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.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(125,225,161,.95); box-shadow:0 0 0 2px rgba(125,225,161,.14), 0 0 22px rgba(125,225,161,.22); animation:winPulse .72s ease-in-out infinite alternate; }
.symbol.special{ color:var(--gold)!important; text-shadow:0 0 16px rgba(242,211,134,.5); }
.symbol.scatter{ color:var(--gold)!important; text-shadow:0 0 20px rgba(242,211,134,.55); }
.symbol.expanded-cell{ background:radial-gradient(circle at 50% 18%, rgba(242,211,134,.17), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); }
@keyframes spinBlur{ 0%{ transform:translateY(-3px); filter:blur(1px); opacity:.76; } 50%{ transform:translateY(4px); filter:blur(2px); opacity:.44; } 100%{ transform:translateY(-3px); filter:blur(1px); opacity:.76; } }
@keyframes winPulse{ from{ filter:brightness(1); } to{ filter:brightness(1.32); } }
.message{ min-height:50px; display:flex; justify-content:center; align-items:center; text-align: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-box{ display:flex; align-items:center; gap:8px; justify-self:start; }
.bet-box button, .sound-btn{
  width:42px; height:42px; border:0; border-radius:12px; color:#fff; cursor:pointer; font:inherit;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08);
}
.bet-box button:hover, .sound-btn:hover{ background:rgba(255,255,255,.12); }
.bet-info{ min-width:80px; text-align:center; }
.bet-info strong{ font-size:21px; }
.spin-btn{
  width:158px; height:84px; border:0; border-radius:28px; color:#fff; cursor:pointer; font:inherit;
  background:radial-gradient(circle at 50% 10%, rgba(255,255,255,.32), transparent 34%), linear-gradient(135deg, #2c6d4a, #a57a32);
  box-shadow:0 15px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
  font-weight:900; letter-spacing:.08em; transition:transform .15s ease, filter .15s 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(.6); cursor:not-allowed; transform:none; }
.spin-btn span{ display:block; font-size:25px; }
.spin-btn small{ opacity:.62; font-size:9px; }
.sound-btn{ justify-self:end; }
.rules{ display:flex; flex-wrap:wrap; gap:16px 24px; margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.07); color:var(--muted); font-size:12px; }
.rules strong{ color:var(--text); }
.icon{ display:inline-block; width:24px; text-align:center; vertical-align:-3px; font-size:18px; }
.icon.book{ color:var(--gold); }
.icon.expand{ color:var(--green); }
.pop-overlay{ position:fixed; left:50%; top:34%; transform:translate(-50%, -50%) scale(.75); z-index:40; pointer-events:none; opacity:0; font-size:clamp(36px, 8vw, 82px); font-weight:1000; letter-spacing:-.04em; text-shadow:0 0 28px rgba(125,225,161,.42); }
.pop-overlay.show{ animation:popIn 1.15s cubic-bezier(.2,.8,.2,1); }
@keyframes popIn{ 0%{ opacity:0; transform:translate(-50%, -50%) scale(.55); } 16%{ 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); } }
footer{ text-align:center; color:#718374; font-size:11px; margin-top:16px; }
@media (max-width: 760px){
  .shell{ width:min(100% - 14px, 1020px); padding-top:14px; }
  .topbar{ align-items:flex-start; flex-direction:column; }
  .top-stats{ width:100%; grid-template-columns:1fr 1fr; }
  .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; border-radius:12px; font-size:34px; }
  .controls{ grid-template-columns:1fr auto 1fr; gap:8px; }
  .spin-btn{ width:114px; height:70px; border-radius:22px; }
  .spin-btn span{ font-size:20px; }
  .bet-box{ gap:4px; }
  .bet-box button, .sound-btn{ width:36px; height:36px; }
  .bet-info{ min-width:54px; }
  .rules{ font-size:10px; }
}