/**
 * Sprint Beta P0 ΓÇö slot HUD visibility + bonus photo layering + companion readability.
 */

/* ΓöÇΓöÇ Issue 2: keep SPIN cluster visible in active slot surface ΓöÇΓöÇ */
.playground--slot-active.playground--player-view .game-stage-card--v2,
.playground--slot-active.playground--player-view .game-stage-frame,
.playground--slot-active.playground--player-view .game-stage-zoom-wrap {
  overflow: visible;
}

.playground--slot-active.playground--player-view .game-stage-v2 {
  --stage-bottom: max(17%, 72px);
  min-height: 0;
}

.playground--slot-active.playground--player-view .game-stage-v2--playable .slot-hud-v2,
.playground--slot-active.playground--player-view .slot-hud-v2 {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  flex-shrink: 0;
  overflow: visible;
  position: relative;
  z-index: 12;
}

.playground--slot-active.playground--player-view .slot-hud-spin-cluster {
  position: relative;
  z-index: 13;
  flex-shrink: 0;
}

.playground--slot-active.playground--player-view .slot-hud-spin--premium .slot-hud-spin-icon,
.playground--slot-active.playground--player-view .slot-hud-spin--premium .slot-hud-spin-label,
.playground--slot-active.playground--player-view [data-spin] .slot-hud-spin-icon,
.playground--slot-active.playground--player-view [data-spin] .slot-hud-spin-label {
  pointer-events: none;
}

/* ΓöÇΓöÇ Issue 4: slot layout at 100% browser zoom (flex, no clip) ΓöÇΓöÇ */
.playground--slot-active.playground--player-view .game-stage-card--v2 {
  width: min(100%, 1280px);
  max-height: none;
  overflow: visible;
}

.playground--slot-active.playground--player-view .game-stage-frame {
  overflow: visible;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.playground--slot-active.playground--player-view .game-stage-zoom-wrap {
  flex: 1;
  min-height: 0;
  overflow: visible;
  align-items: stretch;
}

.playground--slot-active.playground--player-view .game-stage-aspect.game-stage-v2 {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  max-height: none;
}

.playground--slot-active.playground--player-view .game-stage-v2 {
  display: flex;
  flex-direction: column;
  grid-template-rows: none;
  grid-template-areas: none;
  --stage-top: auto;
  --stage-center: 1fr;
  --stage-bottom: auto;
  min-height: 0;
  height: 100%;
}

.playground--slot-active.playground--player-view .game-stage-top {
  flex: 0 0 auto;
  padding: 0.18rem 0.35rem 0.08rem;
  min-height: 82px;
  max-height: none;
  overflow: visible;
}

.playground--slot-active.playground--player-view .character-meter-host {
  width: min(100%, 560px);
  transform: none;
  transform-origin: center top;
  margin-top: 0;
  overflow: visible;
}

.playground--slot-active.playground--player-view .character-meter-panel--v2 {
  padding: 0.12rem 0;
  gap: 0.3rem;
}

.playground--slot-active.playground--player-view .character-meter-portrait--v2 {
  min-height: 64px;
  padding: 0.3rem 0.2rem 0.2rem;
  overflow: visible;
}

.playground--slot-active.playground--player-view .character-meter-portrait--v2 .character-meter-portrait-image {
  max-height: 42px;
  object-fit: contain;
  object-position: center top;
}

.playground--slot-active.playground--player-view .friends-stage-logo {
  top: 0.2rem;
  left: 0.4rem;
}

.playground--slot-active.playground--player-view .friends-stage-logo-title {
  font-size: clamp(0.52rem, 1vw, 0.68rem) !important;
  line-height: 1.1;
}

.playground--slot-active.playground--player-view .friends-stage-logo-tagline {
  font-size: 0.48rem;
}

.playground--slot-active.playground--player-view .character-meter-silhouette {
  width: 30px;
  height: 30px;
}

.playground--slot-active.playground--player-view .showcase-topbar {
  min-height: 28px;
  max-height: 32px;
  padding: 0.15rem 0.55rem;
  gap: 0.45rem;
}

.playground--slot-active.playground--player-view .showcase-topbar-title {
  font-size: 0.78rem;
}

.playground--slot-active.playground--player-view .showcase-topbar-pill,
.playground--slot-active.playground--player-view .showcase-balance-chip {
  font-size: 0.62rem;
  padding: 0.1rem 0.4rem;
}

.playground--slot-active.playground--player-view .game-stage-center {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 0.3rem;
}

.playground--slot-active.playground--player-view .game-stage-reels {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.playground--slot-active.playground--player-view .slot-hud-v2 {
  flex: 0 0 auto;
  grid-area: unset;
  min-height: 0;
  padding: 0.1rem 0.32rem 0.12rem;
  margin-top: auto;
  z-index: 24;
  gap: 0.12rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
}

.playground--slot-active.playground--player-view .slot-hud-left {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem 0.5rem;
}

.playground--slot-active.playground--player-view .slot-hud-stat {
  display: flex;
  align-items: baseline;
  gap: 0.18rem;
}

.playground--slot-active.playground--player-view .slot-hud-stat .label {
  font-size: 0.48rem;
  margin: 0;
}

.playground--slot-active.playground--player-view .slot-hud-stat strong {
  font-size: 0.68rem;
  line-height: 1;
}

.playground--slot-active.playground--player-view .slot-hud-bet-chip {
  padding: 0.05rem 0.28rem;
  border-radius: 6px;
}

.playground--slot-active.playground--player-view .slot-hud-message {
  font-size: 0.48rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
}

.playground--slot-active.playground--player-view .slot-hud-controls {
  gap: 0.2rem;
}

.playground--slot-active.playground--player-view .slot-hud-util {
  gap: 0.12rem;
}

.playground--slot-active.playground--player-view .slot-hud-icon-btn {
  width: 1.45rem;
  height: 1.45rem;
  min-width: 1.45rem;
  min-height: 1.45rem;
  padding: 0;
}

.playground--slot-active.playground--player-view .slot-hud-spin-cluster {
  gap: 0.2rem;
}

.playground--slot-active.playground--player-view .slot-hud-step {
  width: 1.55rem;
  height: 1.55rem;
  min-width: 1.55rem;
  min-height: 1.55rem;
  font-size: 0.72rem;
  padding: 0;
}

.playground--slot-active.playground--player-view .slot-hud-pill {
  font-size: 0.52rem;
  padding: 0.1rem 0.34rem;
  min-height: 0;
}

.playground--slot-active.playground--player-view .showcase-center--player {
  padding: 0.3rem 0.65rem 0.55rem;
}

/* Wheel / random-buy overlay must fit without clipping spin CTA */
.playground--player-view .bonus-wheel-overlay--fullstage {
  overflow-y: auto;
  overflow-x: hidden;
  align-items: flex-start;
  padding: 0.35rem 0 0.5rem;
  max-height: min(92dvh, calc(100dvh - 6.5rem));
  -webkit-overflow-scrolling: touch;
}

.playground--player-view .bonus-wheel-overlay--fullstage .bonus-wheel-panel {
  width: min(94%, 520px);
  max-height: none;
  margin: 0 auto;
  padding: 0.85rem 1rem 1rem;
}

.playground--player-view .bonus-wheel-overlay--fullstage .bonus-wheel-stage {
  width: min(64vmin, 400px);
  height: min(64vmin, 400px);
  margin: 0.65rem auto 0.35rem;
}

.playground--player-view .bonus-wheel-spin-btn {
  margin-top: 0.55rem;
  min-width: 200px;
  position: relative;
  z-index: 30;
  pointer-events: auto;
}

/* SPIN hit target ΓÇö compact but fully clickable */
.playground--slot-active.playground--player-view .slot-hud-spin--premium,
.playground--slot-active.playground--player-view [data-spin] {
  min-width: 2.7rem;
  min-height: 2.7rem;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 26;
  cursor: pointer;
  touch-action: manipulation;
}

.playground--slot-active.playground--player-view .slot-hud-spin-label {
  font-size: 0.42rem;
  margin-top: -0.08rem;
}

.playground--slot-active.playground--player-view .slot-hud-spin-icon {
  font-size: 0.95rem;
  line-height: 1;
}

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

.playground--slot-active.playground--player-view .slot-hud-controls {
  position: relative;
  z-index: 25;
  pointer-events: auto;
}

.playground--slot-active.playground--player-view .slot-hud-message {
  pointer-events: none;
}

/* Full-bleed stage photo (slot-active ΓÇö works with or without player-view class) */
.playground--slot-active [data-game-slot-view].game-slot-view--stage-photo,
.playground--slot-active [data-game-stage].game-stage-card--stage-photo {
  position: relative;
  overflow: visible;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.playground--slot-active [data-game-slot-view].game-slot-view--stage-photo::before,
.playground--slot-active [data-game-stage].game-stage-card--stage-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 18px;
  background-image: var(--stage-bg-photo);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.playground--slot-active [data-game-slot-view].game-slot-view--stage-photo > *,
.playground--slot-active [data-game-stage].game-stage-card--stage-photo > * {
  position: relative;
  z-index: 1;
}

.playground--slot-active .game-stage-card--stage-photo .game-stage-v2,
.playground--slot-active .game-stage-card--stage-photo .game-stage-aspect,
.playground--slot-active .game-stage-card--stage-photo .game-stage-frame,
.playground--slot-active .game-stage-card--stage-photo .game-stage-zoom-wrap,
.playground--slot-active .game-stage-card--stage-photo .slot-hud-v2,
.playground--slot-active .game-stage-card--photo .game-stage-v2,
.playground--slot-active .game-stage-frame:has(.game-stage-bg--photo) .game-stage-v2,
.playground--slot-active .game-stage-frame:has(.game-stage-bg--photo) .game-stage-aspect,
.playground--slot-active.playground--player-view .game-stage-card--stage-photo .game-stage-v2,
.playground--slot-active.playground--player-view .game-stage-card--photo .game-stage-v2,
.playground--slot-active.playground--player-view .game-stage-frame:has(.game-stage-bg--photo) .game-stage-v2,
.playground--slot-active.playground--player-view .game-stage-frame:has(.game-stage-bg--photo) .game-stage-aspect {
  background: transparent !important;
}

.playground--slot-active .game-stage-card--stage-photo .game-stage-frame,
.playground--slot-active .game-stage-frame:has(.game-stage-bg--photo),
.playground--slot-active.playground--player-view .game-stage-frame:has(.game-stage-bg--photo),
.playground--slot-active.playground--player-view .game-stage-frame--photo,
.playground--slot-active.playground--player-view .game-stage-card--photo .game-stage-frame {
  background: transparent !important;
  box-shadow:
    0 0 0 2px rgba(255, 215, 0, 0.45),
    0 0 20px rgba(168, 85, 247, 0.35);
}

.playground--slot-active .game-stage-card--v2,
.playground--slot-active [data-game-stage].game-stage-card--stage-photo {
  overflow: visible !important;
}
.playground--slot-active.playground--player-view .game-stage-frame--photo,
.playground--slot-active.playground--player-view .game-stage-card--photo .game-stage-frame {
  background: transparent !important;
  box-shadow:
    0 0 0 2px rgba(255, 215, 0, 0.45),
    0 0 20px rgba(168, 85, 247, 0.35);
}

.playground--slot-active.playground--player-view .game-stage-frame:has(.game-stage-bg--photo) .game-stage-v2,
.playground--slot-active.playground--player-view .game-stage-frame:has(.game-stage-bg--photo) .game-stage-aspect,
.playground--slot-active.playground--player-view .game-stage-frame--photo .game-stage-v2,
.playground--slot-active.playground--player-view .game-stage-frame--photo .game-stage-aspect,
.playground--slot-active.playground--player-view .game-stage-card--photo .game-stage-v2 {
  background: transparent !important;
}

.playground--slot-active.playground--player-view .game-stage-bg--photo {
  background-image: var(--stage-bg-photo) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.playground--slot-active.playground--player-view .game-stage-bg--photo::before {
  opacity: 1 !important;
  z-index: 0;
}

.playground--slot-active.playground--player-view .game-stage-aspect--bonus-photo [data-game-stage-reels]::before,
.playground--slot-active.playground--player-view .game-stage-bg--bonus.game-stage-bg--photo::before,
.playground--slot-active.playground--player-view .game-stage-bg--jackpot.game-stage-bg--photo::before {
  display: block !important;
  opacity: 0.94 !important;
}

/* Backgrounds must show through transparent stage chrome */
.playground--slot-active.playground--player-view .game-stage-frame--photo .game-stage-v2,
.playground--slot-active.playground--player-view .game-stage-card--photo .game-stage-v2 {
  background: transparent !important;
}

.playground--slot-active.playground--player-view .game-stage-bg--photo::before {
  opacity: 1 !important;
}

.playground--slot-active.playground--player-view .game-stage-card--v2,
.playground--slot-active.playground--player-view .game-stage-frame,
.playground--slot-active.playground--player-view .game-stage-zoom-wrap {
  overflow: visible;
}

.playground--slot-active.playground--player-view .game-stage-v2 {
  --stage-bottom: auto;
  min-height: 0;
}

/* ΓöÇΓöÇ Issue 3: photo backgrounds above decorative layers ΓöÇΓöÇ */
.game-stage-bg--photo .game-stage-bg-smoke,
.game-stage-bg--photo .game-stage-bg-dust,
.game-stage-bg--photo .game-stage-bg-neon,
.game-stage-bg--photo .game-stage-bg-beams,
.game-stage-bg--photo .game-stage-bg-reflections,
.game-stage-bg--photo .game-stage-bg-sparks,
.game-stage-bg--photo .game-stage-bg-floor-sweep,
.game-stage-bg--photo .game-stage-bg-windows,
.game-stage-bg--photo .game-stage-bg-fog,
.game-stage-bg--photo .game-stage-bg-rain {
  opacity: 0;
  visibility: hidden;
}

.game-stage-bg--photo::before {
  z-index: 1;
}

/* ΓöÇΓöÇ Issue 5: companion / hub text readability ΓöÇΓöÇ */
.cat-room-bubble--speech,
.cat-room-bubble--thought {
  max-width: min(280px, 92vw);
  min-width: 120px;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.cat-room-speech-bubble {
  max-width: min(300px, 92vw);
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.companion-hub-chat-bubble {
  max-width: min(520px, 92%);
}

.companion-hub-chat-bubble p {
  font-size: 0.84rem;
  line-height: 1.5;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.hub-quest-card p,
.hub-quest-progress-label,
.hub-quest-reward {
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.hub-quest-reward {
  display: block;
  font-weight: 700;
  color: #fde68a;
}

.hub-quest-progress-label {
  display: block;
  font-size: 0.72rem;
  color: rgba(226, 232, 240, 0.9);
}