/* Native slot frame — fixed viewport, no internal scroll */
.game-frame-wrap--native{
  aspect-ratio:16/10;
  max-height:min(520px,72dvh);
  min-height:280px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(45,212,191,.12),transparent 55%),
    linear-gradient(180deg,#0a1422 0%,#050a12 100%);
  overflow:hidden
}
.game-frame-wrap--native .world-reels{
  position:absolute;inset:0;
  margin:0;
  padding:0;
  overflow:hidden;
  box-sizing:border-box;
  pointer-events:none
}
.game-frame-wrap--native .world-reels .wsr-scaler{
  pointer-events:auto
}
.game-frame-wrap--native:not(.is-loaded) .world-reels{display:none}
.game-frame-wrap--native.is-loaded .game-frame-load{display:none}

.wsr-scaler{
  position:absolute;
  left:50%;
  top:50%;
  width:min(520px,calc(100% - 24px));
  transform:translate(-50%,-50%);
  transform-origin:center center;
  will-change:transform
}

.game-section-note{
  margin-top:12px;font-size:.82rem;color:var(--text-muted);
  text-align:center
}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

.wsr-machine{
  width:100%;
  margin:0;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(6px,1.5vh,10px);
  flex-shrink:0
}
.wsr-top{
  width:100%;text-align:center;line-height:1.2
}
.wsr-brand{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:800;font-size:clamp(.85rem,2.8vw,1rem);
  color:var(--white);letter-spacing:-.02em
}
.wsr-logo{border-radius:8px;border:1px solid var(--teal)}
.wsr-tagline{margin:4px 0 0;font-size:clamp(.62rem,2vw,.72rem);color:var(--text-muted)}

/* Playfield with animated deep-space backdrop */
.wsr-screen{
  position:relative;
  width:100%;
  border:2px solid rgba(45,212,191,.45);
  border-radius:14px;
  padding:clamp(8px,1.4vw,12px);
  overflow:hidden;
  box-shadow:
    inset 0 0 48px rgba(0,0,0,.55),
    0 0 28px rgba(45,212,191,.18);
  background:#050a14
}
.wsr-screen-bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
  background:
    radial-gradient(ellipse 90% 70% at 50% 110%,rgba(45,212,191,.18),transparent 55%),
    radial-gradient(circle at 20% 20%,rgba(99,102,241,.22),transparent 42%),
    radial-gradient(circle at 82% 28%,rgba(244,63,94,.16),transparent 38%),
    linear-gradient(165deg,#050c18 0%,#0a1428 45%,#060d16 100%)
}
.wsr-aurora{
  position:absolute;inset:-20% -10%;
  background:
    conic-gradient(from 120deg at 30% 40%,transparent,rgba(45,212,191,.14),transparent 40%),
    conic-gradient(from 220deg at 72% 55%,transparent,rgba(251,113,133,.12),transparent 45%);
  filter:blur(28px);
  opacity:.85;
  animation:wsr-aurora 14s ease-in-out infinite alternate;
  mix-blend-mode:screen
}
@keyframes wsr-aurora{
  0%{transform:translate3d(-4%,0,0) scale(1) rotate(0deg)}
  100%{transform:translate3d(5%,2%,0) scale(1.08) rotate(8deg)}
}
.wsr-starfield{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;opacity:.95
}

.wsr-reels-stage{
  position:relative;z-index:1;
  width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center
}
.wsr-reels{
  width:100%;
  max-width:440px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(5px,1.1vw,8px);
  justify-items:center
}
.wsr-reel{
  width:100%;
  max-width:84px;
  display:grid;grid-template-rows:repeat(3,minmax(0,1fr));
  gap:clamp(5px,1.1vw,8px);
  justify-items:center;
  transition:filter .3s,transform .3s
}
.wsr-reel--blur{filter:blur(2px) brightness(1.05);transform:translateY(-2px)}
.wsr-cell{
  position:relative;
  width:100%;
  max-width:76px;
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(165deg,rgba(28,40,64,.92) 0%,rgba(12,18,32,.96) 100%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  box-shadow:
    0 4px 14px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(2px)
}
.wsr-symbol{
  display:block;
  width:78%;
  height:78%;
  max-width:58px;
  max-height:58px;
  margin:0 auto;
  background-image:url('/images/wsr-symbols-sprite.jpg');
  background-repeat:no-repeat;
  background-size:300% 300%;
  border-radius:50%;
  box-shadow:0 2px 10px rgba(0,0,0,.35)
}
/* 3×3 sprite: row1 moon mars venus | row2 earth saturn sun | row3 seven wild scatter */
.wsr-symbol--moon{background-position:0% 0%}
.wsr-symbol--mars{background-position:50% 0%}
.wsr-symbol--venus{background-position:100% 0%}
.wsr-symbol--earth{background-position:0% 50%}
.wsr-symbol--saturn{background-position:50% 50%}
.wsr-symbol--sun{background-position:100% 50%}
.wsr-symbol--seven{background-position:0% 100%}
.wsr-symbol--wild{background-position:50% 100%}
.wsr-symbol--scatter{background-position:100% 100%}

.wsr-cell--wild{
  border-color:rgba(251,191,36,.75);
  box-shadow:0 0 18px rgba(251,191,36,.35),inset 0 0 14px rgba(251,191,36,.12)
}
.wsr-cell--scatter{
  border-color:rgba(251,113,133,.75);
  box-shadow:0 0 18px rgba(244,63,94,.28)
}

.wsr-win-banner{
  margin-top:8px;padding:6px 12px;text-align:center;
  width:100%;max-width:440px;
  background:rgba(8,15,26,.72);
  border:1px solid rgba(45,212,191,.35);
  border-radius:var(--radius-pill);
  font-size:clamp(.68rem,2vw,.78rem);
  font-weight:700;color:var(--teal);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

.wsr-hud{
  width:100%;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px
}
.wsr-stat{
  background:rgba(18,28,46,.9);
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px 8px;text-align:center;min-width:0
}
.wsr-label{
  display:block;font-size:clamp(.55rem,1.8vw,.65rem);
  text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)
}
.wsr-stat strong{
  display:block;font-size:clamp(.78rem,2.4vw,.95rem);
  color:var(--white);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

.wsr-controls{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;justify-content:center;gap:6px
}
.wsr-bet-group{display:flex;flex-wrap:nowrap;gap:4px;min-width:0;justify-content:center}
.wsr-bet{
  flex:1;min-width:0;padding:7px 4px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--text-muted);
  font-weight:700;font-size:clamp(.62rem,2vw,.75rem);
  cursor:pointer;font-family:var(--font);
  transition:background .2s,border-color .2s,color .2s
}
.wsr-bet:hover{border-color:var(--teal);color:var(--teal)}
.wsr-bet.is-active{
  background:linear-gradient(135deg,var(--teal-dim),var(--teal));
  color:var(--bg);border-color:transparent
}
.wsr-spin{
  padding:9px 18px;border:0;border-radius:var(--radius-pill);
  background:linear-gradient(135deg,var(--coral),var(--coral-dim));
  color:var(--white);font-weight:800;
  font-size:clamp(.75rem,2.2vw,.88rem);
  cursor:pointer;font-family:var(--font);
  box-shadow:0 3px 14px rgba(244,63,94,.35);
  transition:transform .15s,opacity .2s;
  white-space:nowrap
}
.wsr-spin:hover:not(:disabled){transform:scale(1.02)}
.wsr-spin:disabled{opacity:.55;cursor:not-allowed}
.wsr-reset{
  padding:7px 10px;border-radius:var(--radius-pill);
  border:1px dashed var(--border-strong);
  background:transparent;color:var(--text-muted);
  font-size:clamp(.62rem,2vw,.72rem);
  font-weight:600;cursor:pointer;font-family:var(--font);
  white-space:nowrap
}
.wsr-reset:hover{color:var(--teal);border-color:var(--teal)}

.wsr-disclaimer{
  width:100%;
  display:flex;align-items:flex-start;justify-content:center;gap:8px;
  padding:8px 10px;
  background:rgba(8,15,26,.78);
  border:1px solid rgba(251,113,133,.25);
  border-radius:10px;
  text-align:left
}
.wsr-disclaimer__badge{
  flex-shrink:0;
  font-size:.65rem;font-weight:800;
  padding:3px 7px;border-radius:6px;
  background:var(--coral);color:var(--white)
}
.wsr-disclaimer__text{
  margin:0;
  font-size:clamp(.58rem,1.85vw,.68rem);
  line-height:1.35;color:var(--text-muted)
}
.wsr-disclaimer__text strong{color:var(--text)}
.wsr-disclaimer__text a{color:var(--teal);font-weight:600}

.games-grid--single{
  display:grid;grid-template-columns:minmax(0,360px);
  justify-content:center;gap:16px
}

@media(max-width:640px){
  .game-frame-wrap--native{
    aspect-ratio:4/5;
    max-height:min(640px,85dvh)
  }
  .wsr-reel{max-width:72px}
  .wsr-cell{max-width:68px;border-radius:10px}
  .wsr-symbol{max-width:50px;max-height:50px}
  .wsr-controls{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "bets bets"
      "spin reset"
  }
  .wsr-bet-group{grid-area:bets}
  .wsr-spin{grid-area:spin;width:100%}
  .wsr-reset{grid-area:reset;width:100%}
}

@media(prefers-reduced-motion:reduce){
  .wsr-aurora{animation:none}
}