/**
 * Slot player shell + Kissik/bonus presentation polish (presentation only).
 * Loaded last — overrides prior layout without touching slot math.
 */

:root {
  --slot-control-dock-h: clamp(76px, 11vh, 96px);
  --slot-sidebar-rail-w: 52px;
  --slot-player-chrome-h: calc(var(--showcase-topbar-h, 40px) + 0.35rem);
  --slot-meter-band-h: clamp(56px, 8.5vh, 82px);
  --slot-reel-hero-h: calc(
    100dvh - var(--showcase-topbar-h, 40px) - var(--slot-control-dock-h) - var(--slot-meter-band-h) - 0.65rem
  );
}

.playground--slot-active.playground--player-view .game-slot-view {
  max-height: calc(100dvh - var(--slot-player-chrome-h));
  min-height: 0;
}

@media (max-height: 1100px) {
  :root {
    --slot-control-dock-h: 84px;
  }
}

/* ═══ PHASE 1 · Slot focus mode (compact companion rail) ═══ */
.showcase-shell--slot-focus .showcase-sidebar {
  width: var(--slot-sidebar-rail-w);
  min-width: var(--slot-sidebar-rail-w);
  max-width: var(--slot-sidebar-rail-w);
  padding: 0.55rem 0.3rem;
  overflow: visible;
}

.showcase-shell--slot-focus .showcase-sidebar-brand > div,
.showcase-shell--slot-focus .showcase-sidebar-brand span,
.showcase-shell--slot-focus .showcase-sidebar-brand strong,
.showcase-shell--slot-focus .showcase-nav,
.showcase-shell--slot-focus .beta-ui-btn--farm,
.showcase-shell--slot-focus .cat-room-panel,
.showcase-shell--slot-focus .showcase-sidebar-section,
.showcase-shell--slot-focus .showcase-companion-teaser {
  display: none !important;
}

.showcase-shell--slot-focus .showcase-sidebar-brand {
  margin-bottom: 0.45rem;
  justify-content: center;
}

.showcase-shell--slot-focus .showcase-logo-mark {
  margin: 0 auto;
}

.showcase-shell--slot-focus .showcase-sidebar-toggle {
  display: grid !important;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin: 0.35rem auto 0;
  padding: 0;
}

.showcase-shell--slot-focus .showcase-center--player {
  flex: 1;
  min-width: 0;
}

.showcase-shell--slot-focus.playground--slot-active .game-stage-card--v2 {
  width: min(100%, 1480px);
  max-width: none;
}

/* ═══ PHASE 2 · Permanent control dock ═══ */
.playground--slot-active.playground--player-view .slot-control-dock {
  flex: 0 0 var(--slot-control-dock-h);
  min-height: var(--slot-control-dock-h);
  max-height: var(--slot-control-dock-h);
  width: 100%;
  position: relative;
  z-index: 28;
  display: flex;
  align-items: stretch;
  padding-bottom: max(0.2rem, env(safe-area-inset-bottom, 0px));
  pointer-events: auto;
  isolation: isolate;
}

.playground--slot-active.playground--player-view .slot-control-dock .slot-hud-v2 {
  flex: 1;
  width: 100%;
  margin: 0;
  border-radius: 0 0 12px 12px;
}

.playground--slot-active.playground--player-view .game-stage-v2 {
  --stage-bottom: var(--slot-control-dock-h);
}

/* Bonus overlays must not cover the dock */
.playground--player-view .bonus-scene-overlay--player.bonus-scene-overlay--reels-visible .bonus-scene-hud {
  bottom: calc(var(--slot-control-dock-h) + 0.15rem);
  max-height: calc(var(--slot-control-dock-h) - 0.25rem);
}

.playground--player-view.slot-bonus-active .slot-control-dock {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ═══ PHASE 3 · SPIN hitbox — full circle clickable ═══ */
.playground--slot-active.playground--player-view .slot-hud-spin--premium,
.playground--slot-active.playground--player-view [data-spin] {
  min-width: 2.85rem;
  min-height: 2.85rem;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 50%;
  overflow: visible !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 30;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.playground--slot-active.playground--player-view .slot-hud-spin--premium > *,
.playground--slot-active.playground--player-view [data-spin] > * {
  pointer-events: none !important;
}

.playground--slot-active.playground--player-view .slot-hud-spin-cluster::before,
.playground--slot-active.playground--player-view .slot-hud-spin-cluster::after,
.playground--slot-active.playground--player-view .game-stage-bg,
.playground--slot-active.playground--player-view .game-stage-bg * {
  pointer-events: none;
}

.playground--slot-active.playground--player-view .game-stage-center::before,
.playground--slot-active.playground--player-view .game-stage-center::after,
.playground--slot-active.playground--player-view .pf95-reel-vignette,
.playground--slot-active.playground--player-view .pf95-reel-particles,
.playground--slot-active.playground--player-view .pf95-reel-glass-highlight {
  pointer-events: none !important;
}

/* ═══ Golden Master · reels 70–80% of viewport ═══ */
.playground--slot-active.playground--player-view .game-stage-aspect.game-stage-v2 {
  aspect-ratio: auto !important;
  height: 100%;
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.playground--slot-active.playground--player-view .game-stage-top {
  flex: 0 0 auto;
  min-height: 0 !important;
  max-height: var(--slot-meter-band-h);
  padding: 0.1rem 0.35rem 0.05rem;
  overflow: visible;
}

.playground--slot-active.playground--player-view .game-stage-center {
  flex: 1 1 auto;
  min-height: 72%;
  max-height: none;
  display: grid;
  grid-template-columns: minmax(48px, 7%) minmax(0, 1fr) minmax(36px, 5%);
  grid-template-rows: 1fr;
  align-items: center;
  align-content: center;
  gap: 0.3rem;
  padding: 0.12rem 0.28rem 0.18rem;
}

.playground--slot-active.playground--player-view .buy-bonus-panel {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  width: auto;
  max-width: 72px;
  flex-direction: column;
}

.playground--slot-active.playground--player-view .game-stage-reels {
  grid-column: 2;
  grid-row: 1;
  flex: none;
  width: min(100%, 96%);
  height: min(var(--slot-reel-hero-h), 80dvh);
  min-height: min(72%, var(--slot-reel-hero-h));
  max-height: 80dvh;
  margin: 0 auto;
  align-self: center;
  justify-self: center;
  transform: none;
  transform-origin: center center;
}

.playground--slot-active.playground--player-view .game-stage-reels .pixi-root,
.playground--slot-active.playground--player-view .game-stage-reels .pixi-root--showcase,
.playground--slot-active.playground--player-view .game-stage-reels #friends-pixi-root {
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: none;
}

.playground--slot-active.playground--player-view .game-stage-side-decor {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
}

.showcase-shell--slot-focus.playground--slot-active.playground--player-view .friends-stage-logo {
  display: none;
}

.showcase-shell--slot-focus.playground--slot-active.playground--player-view .game-stage-top {
  min-height: 0;
  max-height: var(--slot-meter-band-h);
}

.showcase-shell--slot-focus.playground--slot-active.playground--player-view [data-character-meter-host] {
  max-height: none;
  overflow: visible;
  transform: none;
  margin-top: 0;
}

.showcase-shell--slot-focus.playground--slot-active.playground--player-view .character-meter-panel--v2 {
  padding: 0.08rem 0.12rem;
  gap: 0.2rem;
}

.showcase-shell--slot-focus.playground--slot-active.playground--player-view .character-meter-portrait--v2 {
  min-height: clamp(52px, 7.5vh, 76px) !important;
  max-width: clamp(80px, 7.5vw, 112px) !important;
  padding: 0.1rem 0.12rem !important;
}

.showcase-shell--slot-focus.playground--slot-active.playground--player-view .character-meter-portrait--v2 .character-meter-portrait-image {
  width: 94% !important;
  height: 90% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: auto !important;
}

.showcase-shell--slot-focus.playground--slot-active.playground--player-view .character-meter-fill {
  height: 6px;
}

/* ═══ PHASE 4 · Bonus intro viewport fit (all bonuses) ═══ */
.bonus-intro-active .game-stage-aspect,
.bonus-intro-active [data-game-stage-aspect] {
  overflow: hidden !important;
  max-height: 100%;
}

.bonus-intro-active .bonus-intro-overlay--fullstage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-height: 100%;
  padding: 0.45rem 0.65rem calc(var(--slot-control-dock-h, 88px) + 0.35rem);
  box-sizing: border-box;
}

.bonus-intro-active .bonus-intro-panel {
  width: min(100%, 680px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  margin: 0 auto;
}

.bonus-intro-active .bonus-intro-image {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(62vh, calc(100% - 4.25rem));
  width: 100%;
  object-fit: contain;
  object-position: center center;
}

.bonus-intro-active .bonus-intro-start,
.bonus-intro-active .bonus-intro-start--hotspot {
  flex-shrink: 0;
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  margin: 0.35rem auto 0.15rem;
  min-width: min(72%, 280px);
  z-index: 6;
}

.bonus-intro-active .bonus-intro-fx,
.bonus-intro-active .bonus-intro-backdrop,
.bonus-intro-active .bonus-intro-flash {
  pointer-events: none;
}

/* ═══ PHASE 5 · Bonus HUD — 4 stable Russian zones ═══ */
.playground--player-view .bonus-scene-overlay--player .bonus-scene-top-bar {
  display: none;
}

.playground--player-view .bonus-scene-overlay--player.bonus-scene-overlay--reels-visible .bonus-scene-hud {
  position: fixed;
  left: calc(var(--slot-sidebar-rail-w, 52px) + 0.5rem);
  right: 0.5rem;
  bottom: calc(var(--slot-control-dock-h, 88px) + 0.2rem);
  width: auto;
  margin: 0;
  padding: 0.35rem 0.55rem;
  z-index: 27;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 10, 20, 0.08), rgba(6, 10, 20, 0.82));
  border-radius: 12px;
  border: 1px solid rgba(255, 215, 0, 0.22);
  backdrop-filter: blur(6px);
}

.playground--player-view .bonus-hud-grid--ru {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem 0.55rem;
  width: 100%;
}

.playground--player-view .bonus-hud-zone {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.playground--player-view .bonus-hud-zone-label {
  font-size: clamp(0.48rem, 1.1vw, 0.62rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(226, 232, 240, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playground--player-view .bonus-hud-zone-value {
  font-size: clamp(0.72rem, 1.6vw, 0.95rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1.1;
  min-height: 1.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transform-origin: left center;
}

.playground--player-view .bonus-hud-zone--total .bonus-hud-zone-value {
  color: rgba(255, 215, 0, 0.98);
}

@media (max-width: 900px) {
  .playground--player-view .bonus-hud-grid--ru {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ═══ PHASE 6 · Character meter integrated in reel header ═══ */
.playground--player-view.slot-bonus-active [data-character-meter-host] {
  visibility: visible !important;
  pointer-events: none;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: min(100%, 520px);
  margin: 0 auto;
  max-height: 72px;
  overflow: visible;
}

.playground--player-view.slot-bonus-active .game-stage-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 0;
  max-height: 12%;
}

.playground--player-view.slot-bonus-active [data-friends-logo] {
  display: none !important;
}

.playground--player-view.slot-bonus-active .character-meter-panel--v2 {
  padding: 0.08rem 0;
  gap: 0.2rem;
  transform: scale(0.92);
  transform-origin: center top;
}

.playground--player-view.slot-bonus-active .character-meter-portrait--v2 {
  min-height: 52px;
  padding: 0.2rem 0.15rem 0.1rem;
}

.playground--player-view.slot-bonus-active .character-meter-portrait--v2 .character-meter-portrait-image {
  max-height: 38px;
}

/* ═══ Companion speech in slot — atmospheric background, never over controls ═══ */
.playground--slot-active .companion-oracle--slot-mode {
  position: fixed;
  left: max(0.55rem, env(safe-area-inset-left, 0px));
  right: auto;
  /* Sit on the art plane above the control dock, well clear of spin / buy buttons */
  bottom: calc(var(--slot-control-dock-h, 96px) + 1.25rem);
  max-width: min(200px, 22vw);
  z-index: 8;
  pointer-events: none;
  gap: 0.35rem;
  align-items: flex-start;
}
.playground--slot-active .companion-oracle--slot-mode .companion-oracle-frame {
  pointer-events: none;
  padding: 0.4rem 0.55rem 0.45rem;
  background:
    linear-gradient(145deg, rgba(12, 14, 22, 0.72), rgba(20, 18, 32, 0.68));
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(4px);
}
.playground--slot-active .companion-oracle--slot-mode .companion-oracle-text {
  font-size: 0.74rem;
  line-height: 1.4;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.playground--slot-active .companion-oracle--slot-mode .companion-oracle-avatar {
  pointer-events: none;
  width: 2.35rem;
  height: 2.35rem;
  font-size: 1.2rem;
  opacity: 0.92;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 4px 14px rgba(0, 0, 0, 0.28);
  animation: none;
}

.playground--slot-active.playground--player-view .slot-hud-controls {
  position: relative;
  z-index: 32;
}

.playground--slot-active.playground--player-view .slot-hud-spin-cluster {
  z-index: 33;
}

/* Keep speech visible during bonus / big moments — companion must react. */
.playground--slot-active.slot-bonus-active .companion-oracle--slot-mode {
  opacity: 1;
  visibility: visible;
}

.cat-room-speech-bubble,
.cat-room-thought-bubble {
  pointer-events: none !important;
}

.playground--slot-active .cat-room-speech-bubble,
.playground--slot-active .cat-room-thought-bubble {
  max-width: min(200px, 24vw);
  z-index: 7;
}

/* ═══ PHASE 9 · Bonus result summary finish ═══ */
.bonus-result-summary-card--finish {
  border: 2px solid rgba(255, 215, 0, 0.45);
  box-shadow:
    0 0 48px rgba(168, 85, 247, 0.35),
    0 24px 64px rgba(0, 0, 0, 0.55);
}

.bonus-result-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: rgba(255, 215, 0, 0.92);
  text-transform: uppercase;
}

.bonus-result-total-label {
  margin: 0.65rem 0 0.15rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(226, 232, 240, 0.82);
  text-transform: uppercase;
}

.bonus-result-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.35rem 0;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.55);
}

.bonus-result-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(226, 232, 240, 0.78);
}

.bonus-result-stat-value {
  font-size: 1rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.bonus-result-continue {
  min-width: min(72%, 280px);
  margin-top: 0.85rem;
  position: relative;
  z-index: 4;
}

/* ═══ Viewport safeguards ═══ */
@media (max-height: 820px) {
  :root {
    --slot-control-dock-h: 72px;
  }

  .bonus-intro-active .bonus-intro-image {
    max-height: min(54vh, calc(100% - 3.75rem));
  }
}

@media (min-width: 1600px) {
  .showcase-shell--slot-focus .showcase-sidebar {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
  }
}

/* ═══ PROPORTIONS PASS · meter fill + single reel rim + late overrides ═══ */
.playground--slot-active.playground--player-view .game-stage-card--v2,
.playground--slot-active.playground--player-view [data-game-stage].game-stage-card--stage-photo {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  animation: none !important;
  filter: none !important;
}

.playground--slot-active.playground--player-view .game-stage-frame,
.playground--slot-active.playground--player-view .game-stage-frame--photo,
.playground--slot-active.playground--player-view .game-stage-frame:has(.game-stage-bg--photo),
.playground--slot-active.playground--player-view .game-stage-zoom-wrap {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.playground--slot-active.playground--player-view .game-stage-aspect,
.playground--slot-active.playground--player-view .game-stage-aspect.game-stage-v2,
.playground--slot-active.playground--player-view [data-game-stage-aspect] {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.playground--slot-active.playground--player-view .game-stage-reels {
  border: none !important;
  outline: none !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 215, 0, 0.58),
    inset 0 0 24px rgba(0, 0, 0, 0.35),
    0 6px 22px rgba(0, 0, 0, 0.38) !important;
}

.playground--slot-active.playground--player-view [data-character-meter-host] {
  width: min(100%, 680px) !important;
}

.playground--slot-active.playground--player-view .character-meter-panel--v2 {
  padding: 0.1rem 0.15rem !important;
  gap: clamp(0.25rem, 0.8vw, 0.45rem) !important;
}

.playground--slot-active.playground--player-view .character-meter-portrait--v2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: clamp(52px, 7.5vh, 76px) !important;
  max-width: clamp(80px, 7.5vw, 112px) !important;
  aspect-ratio: 1 !important;
  padding: 0.1rem 0.12rem !important;
  overflow: visible !important;
}

.playground--slot-active.playground--player-view .character-meter-portrait--v2 .character-meter-portrait-image {
  width: 94% !important;
  height: 90% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.playground--slot-active.playground--player-view .character-meter-silhouette {
  width: 88% !important;
  height: 88% !important;
  max-width: none !important;
  margin: auto !important;
}

.playground--slot-active.playground--player-view .buy-bonus-panel {
  align-self: center !important;
  transform: none !important;
}

/* ═══ REEL HERO · late overrides (beat rc7-1-hotfix + sprint-beta) ═══ */
.playground--slot-active.playground--player-view .game-stage-top {
  min-height: 0 !important;
}

.playground--slot-active.playground--player-view .character-meter-portrait--v2 .character-meter-portrait-image,
.playground--slot-active.playground--player-view .character-meter-portrait--v2[data-stage='0'] .character-meter-portrait-image,
.playground--slot-active.playground--player-view .character-meter-portrait--v2[data-stage='1'] .character-meter-portrait-image,
.playground--slot-active.playground--player-view .character-meter-portrait--v2[data-stage='2'] .character-meter-portrait-image,
.playground--slot-active.playground--player-view .character-meter-portrait--v2[data-stage='3'] .character-meter-portrait-image,
.playground--slot-active.playground--player-view .character-meter-portrait--v2[data-stage='4'] .character-meter-portrait-image,
.playground--slot-active.playground--player-view .character-meter-portrait--v2[data-stage='5'] .character-meter-portrait-image {
  object-position: center center !important;
}

@media (max-height: 820px) {
  :root {
    --slot-meter-band-h: clamp(48px, 7vh, 68px);
    --slot-reel-hero-h: calc(
      100dvh - var(--showcase-topbar-h, 36px) - var(--slot-control-dock-h) - var(--slot-meter-band-h) - 0.5rem
    );
  }

  .playground--slot-active.playground--player-view .game-stage-reels {
    height: min(var(--slot-reel-hero-h), 76dvh);
    min-height: min(68%, var(--slot-reel-hero-h));
  }
}

@media (min-width: 1600px) {
  .playground--slot-active.playground--player-view .game-stage-reels {
    width: min(100%, 1480px);
  }
}