*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;min-height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:#0a0810 url("/assets/images/slot-bg.webp") center/cover no-repeat fixed;
  color:#f5e6c8;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.slot-app{
  width:100%;max-width:none;
  min-height:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  margin:0 auto;
  padding:clamp(.5rem,.9vw,.85rem) clamp(.55rem,2vw,.85rem) clamp(.6rem,1.5vw,.85rem);
}

.slot-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:.65rem;
}
.slot-brand{display:flex;align-items:center;gap:.55rem}
.slot-logo{
  width:2.1rem;height:2.1rem;border-radius:50%;
  background:linear-gradient(145deg,#f0c040,#b8860b);
  display:grid;place-items:center;font-size:1.1rem;color:#2a1200;
  box-shadow:0 2px 8px #0008;
}
.slot-brand strong{display:block;font-size:.92rem;letter-spacing:.02em}
.slot-brand small{font-size:.62rem;color:#c9b48a;text-transform:uppercase;letter-spacing:.06em}

.slot-hud{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
.hud-pill{
  background:#1a1228cc;
  border:1px solid #e8c46844;
  border-radius:999px;
  padding:.28rem .65rem;
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#a89878;
}
.hud-pill strong{
  display:block;font-size:.78rem;color:#f5e6c8;
  font-variant-numeric:tabular-nums;
}
.win-pill{border-color:#7ee8f766;background:#0d2830cc}
.win-pill strong{color:#7ee8f7}

.slot-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.slot-frame{
  width:100%;height:100%;
  max-height:100%;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#3d1520 0%,#1a0a12 100%);
  border:3px solid #c9a227;
  border-radius:1.1rem;
  padding:.55rem .5rem .65rem;
  box-shadow:
    0 0 0 1px #000 inset,
    0 12px 40px #000a,
    0 0 60px #e8c46815;
  position:relative;
}
.slot-title{
  text-align:center;
  font-size:clamp(.72rem,2.8vw,.88rem);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#e8c468;
  margin-bottom:.45rem;
  text-shadow:0 1px 4px #000;
}

.reels-wrap{
  flex:1;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(3px,.8vw,6px);
  background:#0d060a;
  border-radius:.55rem;
  padding:clamp(4px,1vw,8px);
  border:2px solid #5c3018;
  min-height:0;
  overflow:hidden;
}

.reel{
  display:flex;
  flex-direction:column;
  gap:clamp(3px,.8vw,6px);
  overflow:hidden;
  border-radius:.35rem;
}
.reel.spinning .sym{
  animation:reelBlur .08s linear infinite;
}

.sym{
  flex:1;
  min-height:0;
  border-radius:.3rem;
  display:grid;
  place-items:center;
  padding:clamp(2px,.5vw,6px);
  background:linear-gradient(180deg,#2a1830 0%,#120a18 100%);
  border:1px solid #ffffff0a;
  transition:transform .15s,box-shadow .15s;
  user-select:none;
  overflow:hidden;
}
.sym-icon{
  width:clamp(28px,72%,44px);
  height:clamp(28px,72%,44px);
  display:block;
  filter:drop-shadow(0 2px 4px #00000080);
}
.sym-icon--label{
  width:clamp(32px,80%,48px);
  height:clamp(32px,80%,48px);
}
.sym.win{
  animation:symPulse .45s ease-in-out 3;
  box-shadow:0 0 12px #e8c46888,inset 0 0 20px #e8c46822;
  border-color:#e8c46866;
}
.sym.win .sym-icon{filter:drop-shadow(0 0 8px #e8c468cc) drop-shadow(0 2px 4px #00000080)}
.sym[data-s="hat"]{background:linear-gradient(180deg,#4a2818 0%,#2a1408 100%)}
.sym[data-s="star"]{background:linear-gradient(180deg,#3a3010 0%,#1a1808 100%)}
.sym[data-s="coin"]{background:linear-gradient(180deg,#3a2a08 0%,#1a1400 100%)}
.sym[data-s="boot"]{background:linear-gradient(180deg,#2a2030 0%,#120818 100%)}
.sym[data-s="wild"]{background:linear-gradient(180deg,#1a3040 0%,#081820 100%)}
.sym[data-s="scatter"]{background:linear-gradient(180deg,#401828 0%,#200810 100%)}

.payline-glow{
  position:absolute;left:8%;right:8%;top:42%;height:18%;
  border-top:1px solid #e8c46833;
  border-bottom:1px solid #e8c46833;
  pointer-events:none;
  opacity:.6;
}

.slot-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  margin-top:.75rem;
}
.ctrl-btn{
  width:2.6rem;height:2.6rem;border-radius:50%;
  border:2px solid #e8c46855;
  background:#1a1228;
  color:#e8c468;
  font-size:1.3rem;
  cursor:pointer;
  line-height:1;
}
.ctrl-btn:active{transform:scale(.94)}
.spin-btn{
  flex:1;max-width:200px;
  height:3.2rem;border:none;border-radius:999px;
  background:linear-gradient(180deg,#f0c040 0%,#c9a020 50%,#a07810 100%);
  color:#2a1200;
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:.12em;
  cursor:pointer;
  box-shadow:0 4px 16px #0008,0 0 20px #e8c46833;
  transition:transform .12s,opacity .12s;
}
.spin-btn:active:not(:disabled){transform:scale(.96)}
.spin-btn:disabled{opacity:.55;cursor:not-allowed}
.spin-btn.spinning .spin-label{opacity:.6}

.slot-disclaimer{
  text-align:center;
  font-size:.58rem;
  color:#887868;
  margin-top:.55rem;
  letter-spacing:.03em;
}

@keyframes reelBlur{
  0%{filter:blur(0)}
  50%{filter:blur(1.5px)}
  100%{filter:blur(0)}
}
@keyframes symPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}

@media(max-width:600px){
  .slot-app{padding:.45rem .5rem .55rem}
  .slot-header{gap:.35rem}
  .slot-brand small{font-size:.55rem}
  .hud-pill{padding:.22rem .5rem;font-size:.58rem}
  .hud-pill strong{font-size:.72rem}
  .slot-title{font-size:.68rem;margin-bottom:.35rem}
  .slot-controls{gap:.5rem;margin-top:.55rem}
  .spin-btn{max-width:none;flex:1;height:2.85rem;font-size:.95rem}
  .ctrl-btn{width:2.35rem;height:2.35rem;font-size:1.15rem}
  .slot-disclaimer{font-size:.52rem}
}

@media(max-width:360px){
  .slot-hud{width:100%;justify-content:space-between}
  .hud-pill{flex:1;text-align:center;padding:.2rem .35rem}
}