* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: #030308;
  color: #eee;
}

.playground {
  min-height: 100vh;
  padding: 1rem;
}

.top-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.top-bar h1 {
  margin: 0;
  font-size: 1.25rem;
}

.mode-badge {
  background: #16213e;
  border: 2px solid #0f3460;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.app-nav {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.panel-section {
  background: #16213e;
  border: 1px solid #0f3460;
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.player-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.admin-row {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.status-line {
  min-height: 1.25rem;
  color: #a8dadc;
  font-size: 0.9rem;
}

.history-item {
  border-bottom: 1px solid #0f3460;
  padding: 0.35rem 0;
  font-size: 0.85rem;
}

.replay-view pre {
  max-height: 70vh;
  overflow: auto;
}

.stats-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.stats-column {
  font-size: 0.85rem;
}

.stats-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0.5rem 0;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.35rem 0 0.75rem;
  font-size: 0.8rem;
}

.stats-table th,
.stats-table td {
  border: 1px solid #0f3460;
  padding: 0.2rem 0.35rem;
  text-align: left;
}

.stats-actions {
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.pixi-root {
  position: relative;
  width: 100%;
  min-height: 420px;
  max-height: 480px;
  margin-bottom: 1rem;
  border-radius: 12px;
  overflow: hidden;
  background: #0b1220;
  border: 2px solid #334155;
}

.pixi-root canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.camera-director-host {
  transform-origin: center center;
  will-change: transform;
}

.camera-director-host.camera-breathing {
  animation: camera-breathing var(--camera-breathing-period, 8200ms) ease-in-out infinite;
}

@keyframes camera-breathing {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, calc(var(--camera-breathing-amplitude, 0.007) * -100%), 0)
      scale(calc(1 + var(--camera-breathing-amplitude, 0.007)));
  }
}

.camera-director-vfx,
.camera-director-focus {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 4;
}

.camera-director-vfx {
  overflow: hidden;
}

.camera-director-focus {
  backdrop-filter: blur(5px);
  background: radial-gradient(circle at 50% 42%, transparent 26%, rgba(8, 12, 24, 0.55) 72%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.camera-director-focus.hidden {
  display: none;
}

.camera-director-host.camera-follow-focus .camera-director-focus:not(.hidden) {
  display: block;
  opacity: 1;
}

.camera-director-host.camera-slow-motion {
  filter: saturate(1.05);
}

.camera-director-host.camera-shake-active {
  filter: contrast(var(--camera-shake-contrast, 1.1)) brightness(calc(1 + var(--camera-shake-bloom, 0.08)));
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, calc(var(--camera-shake-darkness, 0.12))),
    0 0 18px rgba(56, 189, 248, calc(var(--camera-shake-neon, 0.25)));
}

.camera-shake-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(250, 204, 21, 0.85);
  animation: camera-shake-particle 0.55s ease-out forwards;
}

@keyframes camera-shake-particle {
  from {
    opacity: 0.9;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.4) translateY(-16px);
  }
}

.camera-director-host.camera-chaos {
  filter: contrast(calc(1.08 + var(--camera-chaos-neon, 0.2)))
    saturate(calc(1.1 + var(--camera-chaos-neon, 0.2)));
}

.camera-chaos-vfx {
  mix-blend-mode: screen;
}

.camera-chaos-vfx--epic,
.camera-chaos-vfx--legendary {
  box-shadow: inset 0 0 40px rgba(249, 115, 22, calc(var(--camera-chaos-neon, 0.5)));
}

.camera-chaos-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.45), transparent 70%);
  animation: camera-chaos-flash 0.18s ease-out forwards;
}

@keyframes camera-chaos-flash {
  from {
    opacity: 0.85;
  }
  to {
    opacity: 0;
  }
}

.camera-director-host.camera-chaos--legendary .camera-director-vfx {
  backdrop-filter: hue-rotate(8deg);
}

.camera-director-host.camera-chaos {
  outline: 1px solid rgba(56, 189, 248, calc(var(--camera-chaos-neon, 0.35)));
  outline-offset: -2px;
}

.near-miss-director-host.near-bonus-mode {
  box-shadow: inset 0 0 0 999px rgba(4, 8, 18, var(--near-bonus-dim, 0.42));
}

.near-miss-dim {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(circle at 50% 44%, transparent 18%, rgba(4, 8, 18, 0.55) 72%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.near-miss-dim.hidden {
  display: none;
}

.near-miss-director-host.near-bonus-mode .near-miss-dim:not(.hidden) {
  display: block;
  opacity: 1;
}

.near-miss-disappointment {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  z-index: 8;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.45);
  color: #f8fafc;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
}

.near-miss-disappointment.hidden {
  display: none;
}

.replay-pixi {
  min-height: 360px;
}

.visual-hud {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  pointer-events: none;
}

.visual-hud-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.15rem 0;
}

.visual-hud-row span {
  color: #94a3b8;
}

.win-overlay,
.event-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(11, 18, 32, 0.72);
  pointer-events: none;
}

.win-overlay.hidden,
.event-overlay.hidden {
  display: none;
}

.win-overlay-title,
.event-overlay-label {
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #ffd700;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.win-overlay-amount {
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0.5rem 0;
}

.win-overlay-mult {
  font-size: 1.1rem;
  color: #94a3b8;
}

.big-win-overlay,
.big-win-root {
  position: absolute;
  inset: 0;
  z-index: 48;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 24, 0.82);
  cursor: pointer;
  overflow: hidden;
  pointer-events: auto;
}

[data-overlay-host] > .big-win-overlay,
[data-overlay-host] > .big-win-root {
  position: fixed;
  inset: 0;
  z-index: 12000;
}

.game-stage-aspect > .big-win-overlay,
.game-stage-v2 > .big-win-overlay {
  z-index: 48;
}

.big-win-overlay.hidden {
  display: none;
}

.big-win-overlay[data-tier='final'],
.big-win-overlay[data-tier='legendary'] {
  background: radial-gradient(circle at center, rgba(251, 191, 36, 0.18), rgba(8, 12, 24, 0.9));
}

.big-win-overlay.big-win-has-space-bg {
  background-image: var(--big-win-space-bg);
  background-size: cover;
  background-position: center;
  background-color: rgba(8, 12, 24, 0.72);
}

.big-win-coins {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.big-win-coin {
  position: absolute;
  bottom: -12%;
  width: clamp(10px, 1.4vw, 18px);
  height: clamp(10px, 1.4vw, 18px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff7cc, #fbbf24 55%, #b45309);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.65);
  animation: big-win-coin-rise 1.4s ease-out infinite;
}

.big-win-root[data-tier="mega"] .big-win-coin,
.big-win-overlay[data-tier="mega"] .big-win-coin,
.big-win-root[data-tier="epic"] .big-win-coin,
.big-win-overlay[data-tier="epic"] .big-win-coin {
  width: clamp(12px, 1.8vw, 22px);
  height: clamp(12px, 1.8vw, 22px);
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.75);
}

.big-win-root[data-tier="legendary"] .big-win-coin,
.big-win-root[data-tier="final"] .big-win-coin,
.big-win-overlay[data-tier="legendary"] .big-win-coin,
.big-win-overlay[data-tier="final"] .big-win-coin {
  width: clamp(14px, 2vw, 26px);
  height: clamp(14px, 2vw, 26px);
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.85);
}

.big-win-root::after,
.big-win-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(255, 215, 0, 0.12), transparent 55%);
  animation: big-win-flash-pulse 1.2s ease-in-out infinite;
}

@keyframes big-win-flash-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.75; }
}

.big-win-title,
.big-win-title-image,
.big-win-amount,
.big-win-mult {
  position: relative;
  z-index: 2;
}

.big-win-title {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--big-win-accent, #ffd700);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}

.big-win-title.hidden {
  display: none;
}

.big-win-title-image {
  width: min(72vw, 420px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55));
}

.big-win-title-image.hidden {
  display: none;
}

.big-win-amount {
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 800;
  color: #fff;
  margin: 0.65rem 0 0.35rem;
}

.big-win-mult {
  font-size: 1.15rem;
  color: #cbd5e1;
}

@keyframes big-win-coin-rise {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(-120vh) scale(1);
    opacity: 0;
  }
}

.replay-meta {
  margin: 1rem 0;
}

.tease-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(11, 18, 32, 0.4);
}

.tease-overlay.hidden {
  display: none;
}

.tease-overlay-label {
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #ffd700;
  text-shadow: 0 0 24px rgba(255, 215, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.8);
}

.tease-overlay-sub {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: #94a3b8;
  letter-spacing: 0.06em;
}

.tease-overlay.tease-friends .tease-overlay-label {
  color: #ff6b9d;
  animation: tease-neon-pulse 0.9s ease-in-out infinite;
}

.tease-overlay.tease-frien .tease-overlay-label {
  animation: tease-neon-soft 1.2s ease-in-out infinite;
  text-shadow: 0 0 16px rgba(255, 215, 0, 0.45), 0 0 32px rgba(168, 85, 247, 0.35);
}

.tease-overlay.tease-friend .tease-overlay-label {
  animation: tease-neon-strong 0.85s ease-in-out infinite;
  color: #ffe066;
  text-shadow: 0 0 24px rgba(255, 224, 102, 0.75), 0 0 40px rgba(255, 107, 157, 0.45);
}

.tease-overlay.tease-friend {
  background: rgba(4, 8, 18, 0.55) !important;
}

.tease-overlay.tease-friends-trigger .tease-overlay-label {
  font-size: 2.75rem;
  color: #ffd700;
  animation: tease-neon-violent 0.45s ease-in-out infinite;
  text-shadow: 0 0 32px rgba(255, 255, 255, 0.8), 0 0 48px rgba(255, 215, 0, 0.5);
}

@keyframes tease-neon-soft {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes tease-neon-strong {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes tease-neon-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

@keyframes tease-neon-violent {
  0%, 100% { transform: scale(1); filter: brightness(1.2); }
  50% { transform: scale(1.12); filter: brightness(1.6); }
}

.replay-event-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  background: rgba(231, 76, 60, 0.92);
  color: #fff;
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  pointer-events: none;
}

.replay-meta-badge {
  position: static;
  display: inline-block;
  margin: 0.5rem 0 1rem;
  background: rgba(142, 68, 173, 0.92);
}

.layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1rem;
}

.admin-studio-layout {
  display: grid;
  grid-template-columns: 1fr min(420px, 38%);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 1100px) {
  .admin-studio-layout {
    grid-template-columns: 1fr;
  }
}

.studio-admin-panel {
  position: relative;
  background: #16213e;
  border: 1px solid #0f3460;
  border-radius: 8px;
  padding: 0;
  max-height: calc(100vh - 6rem);
  overflow: auto;
  min-width: 320px;
  max-width: 900px;
  width: min(42vw, 900px);
  flex: 0 0 auto;
}

.studio-admin-panel-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: rgba(13, 18, 32, 0.96);
  border-bottom: 1px solid #0f3460;
  backdrop-filter: blur(6px);
}

.studio-admin-panel-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: #e2e8f0;
}

.studio-admin-panel-tools {
  display: flex;
  gap: 0.35rem;
}

.studio-admin-panel--collapsed {
  width: 52px !important;
  min-width: 52px;
  overflow: hidden;
}

.studio-admin-panel--collapsed .admin-tab-nav,
.studio-admin-panel--collapsed .admin-tab-panel {
  display: none;
}

.studio-admin-panel--fullscreen {
  position: fixed;
  inset: 0.75rem 0.75rem 0.75rem auto;
  z-index: 80;
  width: min(900px, 92vw) !important;
  max-height: none;
  height: calc(100vh - 1.5rem);
}

.studio-admin-panel-resize {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 6;
}

.studio-admin-panel .admin-tab-nav {
  padding: 0.75rem 0.75rem 0;
}

.studio-admin-panel .admin-tab-panel {
  padding: 0 0.75rem 0.75rem;
}

.ujn-qa-panel {
  margin-top: 0.75rem;
  padding: 0.5rem 0.65rem;
  border: 1px dashed #9b59b6;
  border-radius: 6px;
  background: rgba(26, 10, 46, 0.35);
}

.bonus-showcase-panel {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.bonus-showcase-preview-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.bonus-showcase-scenario-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}

.bonus-showcase-scenario-label select {
  width: 100%;
}

.bonus-showcase-asset-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  max-height: 280px;
  overflow: auto;
}

.bonus-showcase-asset-row {
  display: grid;
  gap: 0.15rem;
  padding: 0.45rem 0.5rem;
  margin-bottom: 0.35rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 6px;
  font-size: 0.8rem;
}

.bonus-showcase-asset-badge {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.bonus-showcase-asset-meta {
  color: #94a3b8;
  word-break: break-all;
}

.bonus-showcase-asset-row--real {
  border-color: rgba(46, 204, 113, 0.35);
}

.bonus-showcase-asset-row--missing,
.bonus-showcase-asset-row--empty {
  border-color: rgba(239, 68, 68, 0.35);
}

.bonus-showcase-asset-row--placeholder,
.bonus-showcase-asset-row--fallback {
  border-color: rgba(234, 179, 8, 0.35);
}

.ujn-qa-summary {
  cursor: pointer;
  font-weight: 700;
  color: #d7b3ff;
  margin-bottom: 0.35rem;
}

.ujn-qa-buttons {
  margin-top: 0.35rem;
}

.admin-tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.admin-tab-nav .btn.active {
  background: #0f3460;
  border-color: #e94560;
}

.playground--admin-view {
  overflow-y: auto;
  min-height: 100vh;
}

.playground--admin-view .legacy-debug-section[hidden] {
  display: none !important;
}

.asset-audit-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.asset-audit-summary .label {
  display: block;
  font-size: 0.75rem;
  color: #94a3b8;
}

.asset-audit-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.asset-audit-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.asset-audit-table-wrap {
  max-height: 420px;
  overflow: auto;
  border: 1px solid #334155;
  border-radius: 8px;
}

.asset-audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.asset-audit-table th,
.asset-audit-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid #1e293b;
  text-align: left;
  vertical-align: top;
}

.asset-audit-table th {
  position: sticky;
  top: 0;
  background: #16213e;
}

.asset-audit-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.asset-audit-badge--present {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

.asset-audit-badge--missing_manifest,
.asset-audit-badge--missing_file {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}

.asset-audit-badge--unused_manifest {
  background: rgba(234, 179, 8, 0.18);
  color: #fde047;
}

.asset-audit-empty {
  color: #94a3b8;
  font-size: 0.9rem;
}

.sound-settings-panel {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.55);
}

.sound-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.sound-settings-header h2 {
  margin: 0;
  font-size: 0.95rem;
}

.sound-settings-row {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.45rem;
  font-size: 0.85rem;
}

.sound-settings-mute {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
}

.sound-audit-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}

.sound-audit-summary .label {
  display: block;
  font-size: 0.75rem;
  color: #94a3b8;
}

.sound-audit-table-wrap {
  overflow: auto;
  max-height: 240px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 6px;
}

.sound-audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.sound-audit-table th,
.sound-audit-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  text-align: left;
}

.audio-audit-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}

.audio-audit-summary .label {
  display: block;
  font-size: 0.75rem;
  color: #94a3b8;
}

.audio-audit-toolbar {
  margin-bottom: 0.75rem;
}

.audio-audit-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.audio-audit-table-wrap {
  overflow: auto;
  max-height: 360px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 6px;
}

.audio-audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.audio-audit-table th,
.audio-audit-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  text-align: left;
}

.audio-audit-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  text-transform: capitalize;
}

.audio-audit-badge--present {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

.audio-audit-badge--missing_file,
.audio-audit-badge--missing_manifest {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}

.audio-audit-badge--unused_manifest {
  background: rgba(234, 179, 8, 0.18);
  color: #fde047;
}

.audio-audit-empty {
  color: #94a3b8;
  font-size: 0.9rem;
}

.comic-bubble-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
}

.comic-bubble {
  position: absolute;
  max-width: min(320px, 90%);
  padding: 0.85rem 1rem;
  border: 3px solid #111;
  border-radius: 18px;
  background: #fff;
  color: #111;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
  animation: comic-bubble-pop 0.25s ease-out;
}

.comic-bubble-text {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
  text-align: center;
}

.comic-bubble-tail {
  position: absolute;
  bottom: -14px;
  left: 50%;
  width: 18px;
  height: 18px;
  background: #fff;
  border-right: 3px solid #111;
  border-bottom: 3px solid #111;
  transform: translateX(-50%) rotate(45deg);
}

.comic-bubble--anchor-left { align-self: flex-start; margin-right: auto; }
.comic-bubble--anchor-right { align-self: flex-start; margin-left: auto; }
.comic-bubble--anchor-character-meter { margin-top: 4.5rem; }
.comic-bubble--anchor-chill-dude { margin-top: 35%; }
.comic-bubble--anchor-jackpot { margin-top: 2rem; }

.comic-bubble--hansolo { border-color: #2563eb; }
.comic-bubble--kissik { border-color: #db2777; }
.comic-bubble--viking { border-color: #059669; }
.comic-bubble--ujn { border-color: #7c3aed; }
.comic-bubble--profitrolya { border-color: #ca8a04; }

.audio-preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  margin-bottom: 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.35);
}

.audio-preview-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.audio-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  white-space: nowrap;
}

.audio-row-loop {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
}

.audio-debug-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.35);
  font-size: 0.85rem;
}

.audio-debug-panel .label {
  display: block;
  font-size: 0.72rem;
  opacity: 0.75;
}

.audio-row--playing {
  background: rgba(34, 197, 94, 0.08);
}

.audio-playing-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
  font-size: 0.72rem;
  font-weight: 600;
}

.audio-row-error {
  display: block;
  margin-top: 0.25rem;
  color: #fca5a5;
  font-size: 0.72rem;
}

.audio-enable-btn {
  margin-top: 0.5rem;
}

.asset-studio-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.asset-studio-section h3 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.asset-studio-table-wrap {
  overflow-x: auto;
}

.asset-studio-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.asset-studio-table th,
.asset-studio-table td {
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  padding: 0.4rem 0.35rem;
  vertical-align: top;
}

.asset-studio-status {
  display: inline-block;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}

.asset-studio-status--real { background: rgba(34,197,94,0.2); color: #86efac; }
.asset-studio-status--placeholder { background: rgba(234,179,8,0.2); color: #fde047; }
.asset-studio-status--missing { background: rgba(239,68,68,0.2); color: #fca5a5; }
.asset-studio-status--empty { background: rgba(239,68,68,0.28); color: #fecaca; font-weight: 700; }
.asset-studio-status--fallback { background: rgba(148,163,184,0.2); color: #cbd5e1; }

.asset-studio-thumb {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 4px;
}

.asset-studio-upload-btn {
  cursor: pointer;
}

.asset-studio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.asset-library-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.asset-library-dashboard {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.35);
}

.asset-library-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 0.5rem;
}

.asset-library-stats div {
  text-align: center;
  padding: 0.35rem;
  border-radius: 6px;
  background: rgba(30, 41, 59, 0.5);
}

.asset-library-stats strong {
  display: block;
  font-size: 1.1rem;
}

.asset-library-stats span {
  font-size: 0.68rem;
  opacity: 0.8;
}

.asset-library-stat--real strong { color: #86efac; }
.asset-library-stat--placeholder strong { color: #fde047; }
.asset-library-stat--missing strong { color: #fca5a5; }
.asset-library-stat--empty strong { color: #fecaca; }
.asset-library-stat--invalid strong { color: #fdba74; }

.asset-library-progress-row {
  display: grid;
  grid-template-columns: 140px 1fr 80px;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.72rem;
}

.asset-library-progress-track {
  height: 8px;
  background: rgba(51, 65, 85, 0.6);
  border-radius: 999px;
  overflow: hidden;
}

.asset-library-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.asset-library-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.asset-library-filters,
.asset-library-bulk {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.asset-library-filter.is-active {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(96, 165, 250, 0.5);
}

.asset-library-hint {
  font-size: 0.72rem;
  opacity: 0.75;
  margin: 0;
}

.asset-library-toast {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: rgba(34, 197, 94, 0.2);
  color: #bbf7d0;
  font-size: 0.8rem;
}

.asset-library-toast--error {
  background: rgba(239, 68, 68, 0.25);
  color: #fecaca;
}

.asset-library-section h3 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.asset-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
}

.asset-library-card {
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  padding: 0.65rem;
  background: rgba(15, 23, 42, 0.4);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.asset-library-card header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.asset-library-card h4 {
  margin: 0;
  font-size: 0.85rem;
  flex: 1 1 100%;
}

.asset-library-desc {
  margin: 0;
  font-size: 0.72rem;
  opacity: 0.85;
}

.asset-library-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.5rem;
  font-size: 0.68rem;
  margin: 0;
}

.asset-library-meta dt {
  opacity: 0.65;
}

.asset-library-meta dd {
  margin: 0;
  word-break: break-all;
}

.asset-library-badge {
  font-size: 0.62rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: rgba(51, 65, 85, 0.6);
}

.asset-library-badge--prio {
  text-transform: uppercase;
}

.asset-library-status {
  display: inline-block;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
}

.asset-library-status--real { background: rgba(34,197,94,0.2); color: #86efac; }
.asset-library-status--generated { background: rgba(59,130,246,0.22); color: #93c5fd; }
.asset-library-status--placeholder { background: rgba(234,179,8,0.2); color: #fde047; }
.asset-library-status--missing { background: rgba(239,68,68,0.2); color: #fca5a5; }
.asset-library-status--empty { background: rgba(239,68,68,0.28); color: #fecaca; }
.asset-library-status--invalid { background: rgba(249,115,22,0.25); color: #fdba74; }
.asset-library-status--optional { background: rgba(148,163,184,0.2); color: #cbd5e1; }
.asset-library-status--fallback { background: rgba(148,163,184,0.2); color: #cbd5e1; }

.asset-library-thumb {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 4px;
}

.asset-library-texture-preview,
.asset-library-audio-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.asset-library-audio-bar {
  flex: 1 1 100%;
  height: 4px;
  background: rgba(51, 65, 85, 0.6);
  border-radius: 999px;
  overflow: hidden;
}

.asset-library-audio-bar div {
  height: 100%;
  width: 0%;
  background: #60a5fa;
}

.asset-library-warn {
  margin: 0;
  padding-left: 1rem;
  color: #fdba74;
  font-size: 0.68rem;
}

.asset-library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.asset-library-upload-btn {
  cursor: pointer;
}

.asset-library-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.asset-library-modal[hidden] {
  display: none;
}

.asset-library-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.asset-library-modal-body {
  position: relative;
  z-index: 1;
  max-width: min(90vw, 900px);
  max-height: 90vh;
  padding: 1rem;
  background: #0f172a;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.asset-library-modal-body img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

.asset-library-empty,
.asset-library-loading {
  opacity: 0.75;
  font-size: 0.85rem;
}

.audio-audit-badge--real {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

.audio-audit-badge--placeholder {
  background: rgba(234, 179, 8, 0.18);
  color: #fde047;
}

.audio-audit-badge--missing,
.audio-audit-badge--fallback {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}

.audio-audit-badge--empty {
  background: rgba(239, 68, 68, 0.28);
  color: #fecaca;
  font-weight: 700;
}

.btn.is-spin-locked,
button:disabled.is-spin-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

@keyframes comic-bubble-pop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.admin-tab-panel h2 {
  margin-top: 0;
  font-size: 1rem;
}

.playground-player .player-main,
.replay-main {
  max-width: 960px;
  margin: 0 auto;
}

.player-slot-panel {
  background: #16213e;
  border-radius: 8px;
  padding: 1rem;
}

.replay-top-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.replay-top-bar h1 {
  margin: 0;
}

.replay-tool-item {
  border-bottom: 1px solid #0f3460;
  padding: 0.35rem 0;
  font-size: 0.85rem;
}

.legacy-grid-toggle {
  display: block;
  margin-top: 1rem;
  font-size: 0.85rem;
}

.playground--player-view .legacy-debug-section {
  display: none !important;
}

@media (max-width: 1100px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

.slot-panel {
  background: #16213e;
  border-radius: 8px;
  padding: 1rem;
}

.hud {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.hud .label {
  color: #888;
  margin-right: 0.25rem;
}

.reel-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
  font-size: 0.65rem;
  color: #aaa;
}

.reel-header {
  background: #0f3460;
  padding: 4px;
  border-radius: 3px;
  text-align: center;
  min-height: 2rem;
}

.reel-header.happy {
  border: 1px solid #f1c40f;
}

.reel-header.curtain {
  border: 1px solid #3498db;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 1rem;
}

.cell {
  aspect-ratio: 1;
  border-radius: 6px;
  border: 2px solid rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  font-weight: 800;
  font-size: 0.75rem;
  color: #111;
  min-height: 56px;
}

.cell.giant-wild {
  outline: 3px solid #e74c3c;
  outline-offset: -2px;
}

.cell.sticky {
  box-shadow: inset 0 0 0 3px #f39c12;
}

.cell.curtain {
  box-shadow: inset 0 0 0 3px #3498db;
}

.cell.curtain-guaranteed {
  background-image: linear-gradient(135deg, transparent 80%, rgba(52, 152, 219, 0.4) 80%);
}

.cell.curtain-natural {
  background-image: linear-gradient(225deg, transparent 80%, rgba(155, 89, 182, 0.4) 80%);
}

.cell-label {
  font-size: 0.85rem;
}

.cell-badge {
  position: absolute;
  font-size: 0.55rem;
  padding: 1px 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  white-space: nowrap;
}

.cell-badge.gw {
  top: 2px;
  left: 2px;
}

.cell-badge.sticky {
  bottom: 2px;
  left: 2px;
  background: #e67e22;
}

.cell-badge.curtain {
  bottom: 2px;
  right: 2px;
  background: #2980b9;
}

.feature-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
}

.feature-panel {
  background: #0f3460;
  border-radius: 6px;
  padding: 0.5rem;
}

.feature-panel h3 {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: #aaa;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  background: #34495e;
  color: #fff;
}

.btn.primary {
  background: #27ae60;
  font-size: 1rem;
}

.btn.debug {
  background: #8e44ad;
  font-size: 0.75rem;
  padding: 0.4rem 0.6rem;
}

.btn.subtle {
  background: #555;
}

.btn.disabled,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cell-badge.hidden-progress {
  top: 2px;
  left: 2px;
  background: #e17055;
  font-size: 0.45rem;
}

.cell-badge.raw {
  top: 2px;
  right: 2px;
  background: #636e72;
  font-size: 0.5rem;
}

.spin-meta {
  margin-top: 0.75rem;
  font-size: 0.72rem;
  color: #aaa;
  line-height: 1.4;
  word-break: break-word;
}

.side-panel section {
  background: #16213e;
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.side-panel h2 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.debug-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.debug-hint {
  font-size: 0.75rem;
  color: #888;
  margin: 0.35rem 0 0;
}

.stats-panel dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1rem;
  margin: 0;
  font-size: 0.85rem;
}

.stats-panel dt {
  color: #888;
}

.stats-panel dd {
  margin: 0;
  text-align: right;
}

.inspector-toggle {
  background: none;
  border: none;
  color: #eee;
  cursor: pointer;
  padding: 0;
  margin-right: 0.25rem;
}

.inspector-body {
  background: #0d1117;
  border-radius: 4px;
  padding: 0.5rem;
  font-size: 0.65rem;
  max-height: 400px;
  overflow: auto;
  margin: 0;
}

.inspector-body.collapsed {
  display: none;
}

.overlay-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}

/* Beta/auth modals live here — re-enable hits when any shell modal is open */
.overlay-host:has([data-auth-portal]:not([hidden])),
.overlay-host:has(.slot-modal:not([hidden])) {
  pointer-events: auto;
  z-index: 14000;
}

.overlay.visible {
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-panel {
  background: #16213e;
  border: 2px solid #0f3460;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 520px;
  width: 90%;
  text-align: center;
}

.wheel-segments {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin: 1rem 0;
}

.wheel-segment {
  background: #0f3460;
  padding: 0.75rem;
  border-radius: 6px;
  border: 2px solid transparent;
}

.wheel-segment.selected {
  border-color: #27ae60;
  background: #1e4620;
}

.wheel-segment-name {
  font-weight: 700;
}

.wheel-segment-weight {
  font-size: 0.85rem;
  color: #888;
}

.bonus-type {
  font-size: 1.5rem;
  font-weight: 800;
  color: #27ae60;
}

.summary-stats {
  list-style: none;
  padding: 0;
  text-align: left;
}

.overlay-info {
  margin-bottom: 0.25rem;
}

.slot-dimmed canvas,
.slot-dimmed .visual-hud {
  filter: brightness(0.45);
}

.profitrolya-chest-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 24, 0.88);
  pointer-events: auto;
}

.profitrolya-chest-overlay--fullstage {
  position: absolute;
  inset: 0;
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.jackpot-chest-active .game-stage-bg {
  filter: blur(3px) brightness(0.45);
}

.profitrolya-chest-panel {
  width: min(920px, 96%);
  max-height: 96%;
  overflow: auto;
  background: linear-gradient(180deg, #1a2744 0%, #0f172a 100%);
  border: 2px solid #475569;
  border-radius: 16px;
  padding: 1rem 1.25rem 1.25rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.profitrolya-title {
  margin: 0;
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: #f1c40f;
}

.profitrolya-subtitle {
  margin: 0.35rem 0 0.75rem;
  text-align: center;
  color: #94a3b8;
  font-size: 0.95rem;
}

.jackpot-tier-counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.jackpot-tier-counter {
  background: rgba(15, 23, 42, 0.9);
  border: 2px solid var(--tier-color, #64748b);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 800;
}

.jackpot-tier-counter.winner {
  box-shadow: 0 0 16px var(--tier-color);
  transform: scale(1.04);
}

.jackpot-tier-counter.dimmed {
  opacity: 0.35;
}

.jackpot-tier-name {
  display: block;
  color: var(--tier-color);
}

.profitrolya-stage {
  position: relative;
  min-height: 280px;
  padding-top: 2.5rem;
}

.profitrolya-side-stage {
  position: relative;
  min-height: 180px;
  margin: 0.5rem 0 1rem;
  padding: 2.75rem 0.5rem 0.5rem;
  background: linear-gradient(180deg, #243447 0%, #1a2332 55%, #3d2914 100%);
  border-radius: 12px;
  border: 2px solid #475569;
  overflow: visible;
}

.profitrolya-character--host {
  position: absolute;
  bottom: 0.25rem;
  left: 4%;
  z-index: 5;
}

.profitrolya-speech--comic {
  position: relative;
  background: #fffef5;
  color: #111827;
  border: 2px solid #111;
  border-radius: 14px;
  padding: 0.45rem 0.65rem;
  font-weight: 700;
  font-size: 0.82rem;
  max-width: min(240px, 42vw);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
}

.profitrolya-speech--comic::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 18px;
  border: 8px solid transparent;
  border-top-color: #111;
}

.treasure-chest.interactive.treasure-chest--hover-glow,
.treasure-chest.interactive:hover {
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.65), 0 0 32px rgba(255, 140, 0, 0.35);
  transform: translateY(-3px);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.treasure-chest--tier-mini { --tier-glow: #94a3b8; }
.treasure-chest--tier-minor { --tier-glow: #22c55e; }
.treasure-chest--tier-major { --tier-glow: #3b82f6; }
.treasure-chest--tier-grand { --tier-glow: #f59e0b; }

.treasure-chest.jackpot-chest-opening {
  box-shadow: 0 0 24px var(--tier-glow, var(--tier-color, #ffd700));
}

.chest-coin-burst {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}

.profitrolya-chest-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 0.5rem 0.5rem;
  min-height: 90px;
}

.profitrolya-chest-row .treasure-chest {
  flex: 1;
  max-width: 72px;
  min-height: 64px;
  padding: 0.25rem;
}

.profitrolya-pick-hint {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #f1c40f;
  margin: 0.25rem 0;
}

.treasure-chest:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.profitrolya-chest-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  gap: 0.5rem;
  padding: 0.5rem;
  align-items: end;
}

.jackpot-chest-grid .treasure-chest {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: 0;
  max-height: 92px;
  aspect-ratio: 1 / 1.08;
  padding: 0.2rem 0.15rem 0.35rem;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.55);
}

.jackpot-chest-grid .treasure-chest .chest-image-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-height: 100%;
}

.jackpot-chest-grid .treasure-chest .chest-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
}

.jackpot-chest-grid .treasure-chest .chest-tier {
  position: relative;
  flex: 0 0 auto;
  margin-top: 0.1rem;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.jackpot-chest-grid .treasure-chest.revealed .chest-image,
.jackpot-chest-grid .treasure-chest.opened .chest-image {
  max-height: 68px;
  filter: drop-shadow(0 0 8px var(--tier-color, rgba(255, 215, 0, 0.45)));
}

.profitrolya-avatar:has(.profitrolya-avatar-img) {
  background: transparent;
  border: none;
  padding: 0;
}

.profitrolya-avatar-img {
  display: block;
  width: auto;
  height: 72px;
  max-width: 118px;
  object-fit: contain;
  object-position: center bottom;
}

.jackpot-chest-panel {
  width: min(980px, 98%);
}

.jackpot-hud-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin: 0.5rem 0;
}

.jackpot-hud-stat {
  font-size: 0.85rem;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(241, 196, 15, 0.35);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}

.treasure-chest.jackpot-chest-fallback {
  background: linear-gradient(180deg, #fcd34d 0%, #b45309 100%);
  border-color: #fbbf24;
  box-shadow: inset 0 -6px 0 rgba(120, 53, 15, 0.35), 0 4px 12px rgba(0, 0, 0, 0.35);
}

.treasure-chest.jackpot-chest-fallback .chest-body {
  display: block;
  width: 70%;
  height: 42%;
  margin: 28% auto 0;
  border-radius: 6px;
  background: linear-gradient(180deg, #fde68a, #d97706);
  border: 2px solid #92400e;
}

.treasure-chest.jackpot-chest-fallback .chest-lid {
  display: block;
  width: 78%;
  height: 28%;
  margin: 8% auto 0;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #fff3bf, #f59e0b);
  border: 2px solid #b45309;
  box-shadow: 0 2px 0 rgba(146, 64, 14, 0.5);
}

.treasure-chest.interactive:hover {
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.55);
  transform: translateY(-2px);
}

.profitrolya-character[data-whisker-level='1'] .profitrolya-avatar::after,
.profitrolya-character[data-whisker-level='2'] .profitrolya-avatar::after,
.profitrolya-character[data-whisker-level='3'] .profitrolya-avatar::after,
.profitrolya-character[data-whisker-level='4'] .profitrolya-avatar::after {
  content: '';
  position: absolute;
  inset: auto 0 -4px 0;
  height: 8px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
}

.profitrolya-character.profitrolya-has-tail .profitrolya-avatar::before {
  content: '';
  position: absolute;
  right: -10px;
  bottom: 4px;
  width: 18px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  transform: rotate(-18deg);
}

.profitrolya-avatar {
  position: relative;
}

.profitrolya-whiskers-img,
.profitrolya-tail-img {
  position: absolute;
  pointer-events: none;
}

.profitrolya-whiskers-img {
  left: 50%;
  bottom: 18%;
  width: 88%;
  transform: translateX(-50%);
  animation: profitrolya-whisker-twitch 2.4s ease-in-out infinite;
}

.profitrolya-tail-img {
  right: -8%;
  bottom: 8%;
  width: 42%;
  transform-origin: left center;
  animation: profitrolya-tail-sway 2.8s ease-in-out infinite;
}

.profitrolya-character--animated .profitrolya-avatar-img {
  animation: profitrolya-breathe 3.2s ease-in-out infinite;
}

.treasure-chest.jackpot-chest-opening {
  animation: jackpot-chest-punch 0.35s ease-out;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.65);
}

.treasure-chest.jackpot-chest-flash::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 12px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.75), transparent 70%);
  animation: jackpot-chest-flash 0.45s ease-out forwards;
  pointer-events: none;
}

.tease-overlay-art {
  width: min(52vw, 280px);
  height: auto;
  object-fit: contain;
  margin: 0 auto 0.5rem;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}

.tease-overlay--has-art .tease-overlay-label {
  font-size: 0.95rem;
  opacity: 0.85;
}

.character-meter-stage-transition {
  transition: filter 0.2s ease;
}

@keyframes profitrolya-tail-sway {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(10deg); }
}

@keyframes profitrolya-whisker-twitch {
  0%, 90%, 100% { transform: translateX(-50%) scaleX(1); }
  92% { transform: translateX(-50%) scaleX(1.06); }
  94% { transform: translateX(-50%) scaleX(0.98); }
}

@keyframes profitrolya-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes jackpot-chest-punch {
  0% { transform: scale(1); }
  45% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@keyframes jackpot-chest-flash {
  from { opacity: 0.9; }
  to { opacity: 0; }
}

.game-stage-bg--jackpot {
  background: radial-gradient(circle at 50% 20%, rgba(255, 215, 0, 0.18), transparent 55%),
    linear-gradient(180deg, #1a1030 0%, #0f172a 100%);
}

.jackpot-intro-active .game-stage-bg {
  filter: blur(3px) brightness(0.45);
}

.jackpot-intro-overlay .jackpot-intro-glow {
  background: radial-gradient(circle, rgba(255, 215, 0, 0.35), rgba(255, 107, 157, 0.15), transparent 70%);
}

.jackpot-intro-overlay.bonus-intro-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.jackpot-intro-fallback-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: #ffd700;
  text-shadow: 0 0 24px rgba(255, 215, 0, 0.5);
}

.jackpot-intro-start {
  animation: jackpot-start-pulse 1.6s ease-in-out infinite;
}

@keyframes jackpot-start-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 215, 0, 0.35); }
  50% { box-shadow: 0 0 28px rgba(255, 107, 157, 0.55); }
}

.treasure-chest {
  position: relative;
  min-height: 72px;
  border: 2px solid #64748b;
  border-radius: 10px;
  background: #334155;
  cursor: default;
  color: #fff;
  font-weight: 800;
}

.treasure-chest.interactive {
  cursor: pointer;
  border-color: #f1c40f;
}

.treasure-chest.interactive:hover {
  filter: brightness(1.08);
}

.treasure-chest.opened,
.treasure-chest.revealed {
  background: #1e293b;
  border-color: var(--tier-color, #94a3b8);
}

.treasure-chest .chest-lid {
  font-size: 1.6rem;
}

.treasure-chest .chest-tier {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
}

.treasure-chest .chest-tier.hidden {
  display: none;
}

.chest-coin-burst {
  position: absolute;
  left: 50%;
  top: 40%;
  pointer-events: none;
  font-size: 1rem;
}

.profitrolya-character {
  position: absolute;
  left: 12px;
  bottom: 8px;
  z-index: 2;
  width: 130px;
  pointer-events: none;
}

.profitrolya-avatar:not(:has(.profitrolya-avatar-img)) {
  background: #e74c3c;
  border: 2px solid #c0392b;
  border-radius: 12px;
  padding: 0.35rem 0.5rem;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.profitrolya-speech {
  margin-top: 0.35rem;
  background: #fff;
  color: #111;
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  font-size: 0.7rem;
  line-height: 1.25;
}

.profitrolya-speech.hidden {
  display: none;
}

.profitrolya-speech-line {
  min-height: 1.5rem;
  text-align: center;
  color: #e2e8f0;
  font-size: 0.9rem;
  margin: 0.5rem 0;
}

.profitrolya-controls {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.profitrolya-final {
  margin-top: 1rem;
  text-align: center;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.85);
  border: 2px solid #f1c40f;
}

.profitrolya-final.hidden {
  display: none;
}

.profitrolya-final-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: #f1c40f;
  letter-spacing: 0.08em;
}

.profitrolya-final-mult {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  margin: 0.35rem 0;
}

.profitrolya-final-win {
  font-size: 1.5rem;
  color: #2ecc71;
  font-weight: 700;
}

.profitrolya-final-quote {
  margin: 0.5rem 0 0.75rem;
  color: #94a3b8;
  font-style: italic;
}

.replay-chest-summary {
  font-size: 0.85rem;
  line-height: 1.5;
}

.replay-chest-actions {
  margin: 0.75rem 0 1rem;
}

.character-meter-panel {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  pointer-events: none;
}

.character-meter-portrait {
  background: rgba(15, 23, 42, 0.92);
  border: 2px solid var(--accent, #64748b);
  border-radius: 10px;
  padding: 0.35rem;
  text-align: center;
  position: relative;
  min-height: 92px;
}

.character-meter-portrait.active-glow {
  box-shadow: 0 0 14px var(--accent);
}

.character-meter-letter {
  width: 34px;
  height: 34px;
  margin: 0 auto 0.2rem;
  border-radius: 50%;
  background: var(--accent);
  color: #111;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.character-meter-name {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.character-meter-hint {
  font-size: 0.52rem;
  color: #94a3b8;
  min-height: 1.5em;
  line-height: 1.2;
}

.character-meter-track-host {
  margin-top: 0.25rem;
}

.character-meter-fill {
  height: 4px;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  margin-bottom: 0.2rem;
}

.character-meter-pips {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.character-meter-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #334155;
  border: 1px solid #64748b;
}

.character-meter-pip.active {
  background: var(--accent);
}

.character-meter-up-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #f1c40f;
  color: #111;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 0.1rem 0.25rem;
  border-radius: 4px;
}

.character-meter-reset-badge {
  position: absolute;
  top: 0;
  left: 0;
  background: #e74c3c;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 900;
  padding: 0.1rem 0.25rem;
  border-radius: 4px;
}

.bonus-entry-overlay,
.bonus-wheel-overlay,
.scatter-save-overlay {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 24, 0.88);
}

.bonus-intro-overlay {
  z-index: 12;
  background: transparent;
  pointer-events: auto;
}

.bonus-intro-active .game-stage-bg {
  filter: blur(6px) brightness(0.55);
  transform: scale(1.02);
  transition: filter 0.35s ease, transform 0.35s ease;
}

.bonus-intro-active [data-game-stage-reels],
.bonus-intro-active [data-character-meter-host]:not(:has(.viking-cm-scale)),
.bonus-intro-active [data-friends-logo],
.bonus-intro-active [data-buy-bonus-panel],
.bonus-intro-active [data-slot-hud],
.bonus-intro-active .game-stage-side-decor,
.bonus-intro-active .game-stage-frame::before,
.bonus-intro-active .game-stage-frame::after {
  visibility: hidden !important;
  pointer-events: none !important;
}

.bonus-intro-active .pixi-root,
.bonus-intro-active .pixi-root canvas {
  visibility: hidden !important;
  pointer-events: none !important;
}

.bonus-intro-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(8, 12, 24, 0.35), rgba(4, 6, 14, 0.82));
  backdrop-filter: blur(2px);
}

.bonus-intro-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bonus-intro-glow {
  position: absolute;
  inset: 15% 20%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent, rgba(168, 85, 247, 0.45)), transparent 70%);
  filter: blur(28px);
  animation: bonus-intro-glow-pulse 4s ease-in-out infinite;
}

.bonus-intro-smoke {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(148, 163, 184, 0.18), transparent 70%),
    radial-gradient(ellipse 60% 30% at 20% 80%, rgba(148, 163, 184, 0.12), transparent 65%);
  animation: bonus-intro-smoke-drift 8s ease-in-out infinite alternate;
}

.bonus-intro-particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255, 215, 0, 0.45) 1px, transparent 1px),
    radial-gradient(circle, rgba(244, 114, 182, 0.35) 1px, transparent 1px);
  background-size: 140px 140px, 200px 200px;
  opacity: 0.35;
  animation: bonus-intro-particles 14s linear infinite;
}

.bonus-intro-panel {
  position: relative;
  z-index: 2;
  width: min(640px, 92%);
  padding: 1.5rem 1.75rem 1.75rem;
  border-radius: 18px;
  border: 2px solid color-mix(in srgb, var(--accent, #a855f7) 55%, #475569);
  background: linear-gradient(180deg, rgba(26, 39, 68, 0.96) 0%, rgba(10, 15, 28, 0.98) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 48px color-mix(in srgb, var(--accent, #a855f7) 25%, transparent);
  text-align: center;
}

.bonus-intro-image {
  display: block;
  width: min(100%, 520px);
  max-height: min(42vh, 320px);
  margin: 0 auto 1rem;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.bonus-intro-fallback-portrait {
  width: 96px;
  height: 96px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--accent, #a855f7);
  color: #111;
  font-size: 2.5rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bonus-intro-character {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94a3b8;
}

.bonus-intro-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: #f8fafc;
}

.bonus-intro-subtitle,
.bonus-intro-description,
.bonus-intro-cost {
  margin: 0.35rem 0 0;
  color: #cbd5e1;
}

.bonus-intro-start {
  margin-top: 1.25rem;
  min-width: min(100%, 280px);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.bonus-intro-start.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.bonus-intro-flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(255, 255, 255, 0.92);
  opacity: 0;
  pointer-events: none;
}

.bonus-intro-flash[hidden] {
  display: none;
}

@keyframes bonus-intro-glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.06); }
}

@keyframes bonus-intro-smoke-drift {
  0% { transform: translateY(0); opacity: 0.7; }
  100% { transform: translateY(-12px); opacity: 0.95; }
}

@keyframes bonus-intro-particles {
  0% { transform: translateY(0); }
  100% { transform: translateY(-80px); }
}

.game-stage-bg--bonus {
  transition: background-image 0.45s ease, filter 0.45s ease;
}

.game-stage-bg--bonus:not(.game-stage-bg--photo)[data-active-bonus='HANSOLO'] {
  background:
    radial-gradient(circle at 22% 28%, rgba(56, 189, 248, 0.28), transparent 48%),
    radial-gradient(circle at 78% 72%, rgba(14, 165, 233, 0.18), transparent 42%),
    linear-gradient(160deg, #071018 0%, #0c1a2e 45%, #050810 100%);
}

.game-stage-bg--bonus:not(.game-stage-bg--photo)[data-active-bonus='KISSIK'] {
  background:
    radial-gradient(circle at 24% 30%, rgba(244, 114, 182, 0.32), transparent 48%),
    radial-gradient(circle at 76% 68%, rgba(219, 39, 119, 0.2), transparent 42%),
    linear-gradient(160deg, #180818 0%, #2a0f22 45%, #0a060c 100%);
}

.game-stage-bg--bonus:not(.game-stage-bg--photo)[data-active-bonus='VIKING'] {
  background:
    radial-gradient(circle at 20% 26%, rgba(251, 191, 36, 0.26), transparent 48%),
    radial-gradient(circle at 80% 70%, rgba(180, 83, 9, 0.2), transparent 42%),
    linear-gradient(160deg, #141008 0%, #241a08 45%, #0a0804 100%);
}

.game-stage-bg--bonus:not(.game-stage-bg--photo)[data-active-bonus='UJN'] {
  background:
    radial-gradient(circle at 26% 32%, rgba(74, 222, 128, 0.24), transparent 48%),
    radial-gradient(circle at 74% 66%, rgba(124, 58, 237, 0.22), transparent 42%),
    linear-gradient(160deg, #0a1210 0%, #121828 45%, #060810 100%);
}

.game-stage-bg--bonus .game-stage-bg-grid {
  opacity: 0.25;
}

.scatter-save-panel {
  text-align: center;
  padding: 1.5rem 2rem;
  border-radius: 16px;
  border: 3px solid #fbbf24;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  box-shadow: 0 0 40px rgba(251, 191, 36, 0.35);
}

.scatter-save-panel--shake {
  animation: scatter-save-pop 0.45s ease-out;
}

.scatter-save-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: #94a3b8;
  text-transform: uppercase;
}

.scatter-save-title {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 4px 0 #92400e;
}

@keyframes scatter-save-pop {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.bonus-entry-panel,
.bonus-wheel-panel {
  background: #1a2744;
  border: 2px solid #475569;
  border-radius: 14px;
  padding: 1.25rem;
  text-align: center;
  width: min(520px, 92%);
}

.bonus-entry-portrait {
  width: 72px;
  height: 72px;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  background: var(--accent);
  color: #111;
  font-size: 2rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bonus-entry-title {
  margin: 0;
  color: #f1c40f;
  letter-spacing: 0.08em;
}

.bonus-entry-subtitle {
  color: #e2e8f0;
  font-weight: 700;
}

.bonus-entry-description,
.bonus-entry-cost {
  color: #94a3b8;
  font-size: 0.9rem;
}

.bonus-wheel-title {
  margin: 0;
  color: #f1c40f;
}

.bonus-wheel-subtitle {
  color: #94a3b8;
}

.bonus-wheel-overlay--fullstage {
  position: absolute;
  inset: 0;
  z-index: 23;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 18, 0.92);
}

.bonus-wheel-overlay--fullstage .bonus-wheel-panel {
  width: min(78vw, 920px);
  max-height: 78vh;
  padding: 1.75rem 2rem 2rem;
  border: 2px solid rgba(255, 215, 0, 0.45);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.bonus-wheel-overlay--fullstage .bonus-wheel-stage {
  width: min(72vw, 760px);
  height: min(72vw, 760px);
  margin: 1.25rem auto;
}

.bonus-wheel-spin-btn {
  margin-top: 1rem;
  min-width: 220px;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}

.bonus-wheel-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255, 215, 0, 0.12), transparent 65%);
  pointer-events: none;
  transition: filter 0.35s ease;
}

.bonus-wheel-backdrop--spin-blur {
  filter: blur(3px) brightness(0.72);
}

.bonus-wheel-pointer-wrap {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  transform-origin: 50% 0%;
}

.bonus-wheel-pointer-glow {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 140, 0, 0.55), transparent 70%);
  filter: blur(6px);
  opacity: 0.65;
  pointer-events: none;
}

.bonus-wheel-pointer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 4px 12px rgba(255, 120, 0, 0.55));
}

.bonus-wheel-rim-img {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: contain;
  pointer-events: none;
  opacity: 0.92;
  filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.45));
}

.bonus-wheel-lights-ring {
  position: absolute;
  inset: -4%;
  pointer-events: none;
}

.bonus-wheel-light-bulb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8dc 0%, #ffd700 45%, #ff8c00 100%);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.85);
  transform: rotate(var(--bulb-angle)) translateY(-min(34vw, 260px));
  transform-origin: center center;
}

.bonus-wheel-overlay--spinning .bonus-wheel-light-bulb {
  animation: bonus-wheel-bulb-blink 0.45s ease-in-out infinite alternate;
}

.bonus-wheel-overlay--spinning .bonus-wheel-light-bulb:nth-child(even) {
  animation-delay: 0.22s;
}

@keyframes bonus-wheel-bulb-blink {
  from { opacity: 0.35; transform: rotate(var(--bulb-angle)) translateY(-min(34vw, 260px)) scale(0.85); }
  to { opacity: 1; transform: rotate(var(--bulb-angle)) translateY(-min(34vw, 260px)) scale(1.15); }
}

.bonus-wheel-segment--flash {
  z-index: 2;
}

.bonus-wheel-segment {
  text-align: center;
  min-width: 3.2rem;
}

.bonus-wheel-segment strong {
  display: block;
  font-size: clamp(0.58rem, 1.1vw, 0.78rem);
  letter-spacing: 0.06em;
}

.bonus-wheel-pointer-img {
  display: block;
  width: clamp(36px, 5vw, 52px);
  height: auto;
  pointer-events: none;
  user-select: none;
}

.bonus-wheel-rim {
  position: absolute;
  inset: -3%;
  border-radius: 50%;
  border: 3px solid rgba(255, 215, 0, 0.55);
  box-shadow:
    0 0 24px rgba(255, 215, 0, 0.35),
    inset 0 0 18px rgba(255, 255, 255, 0.12);
  pointer-events: none;
  z-index: 2;
}

.bonus-wheel-disc-chrome {
  position: absolute;
  inset: -8%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.22;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

.bonus-wheel-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 80%, rgba(255, 120, 0, 0.08), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.1), transparent 45%);
  animation: bonus-wheel-spark-drift 6s ease-in-out infinite;
}

@keyframes bonus-wheel-spark-drift {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}

.bonus-wheel-overlay--spinning .bonus-wheel-rim {
  animation: bonus-wheel-rim-pulse 0.8s ease-in-out infinite;
}

@keyframes bonus-wheel-rim-pulse {
  0%, 100% { box-shadow: 0 0 24px rgba(255, 215, 0, 0.35), inset 0 0 18px rgba(255, 255, 255, 0.12); }
  50% { box-shadow: 0 0 42px rgba(255, 215, 0, 0.55), inset 0 0 28px rgba(255, 200, 80, 0.2); }
}

.bonus-wheel-pointer-cap {
  width: 22px;
  height: 14px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #ffe066, #f1c40f);
  border: 2px solid #fff8dc;
}

.bonus-wheel-pointer-tip {
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 22px solid #f1c40f;
  margin-top: -2px;
}

.bonus-wheel-disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #f1c40f;
  overflow: hidden;
  position: relative;
  background: conic-gradient(#2ecc71 0 187deg, #fd79a8 187deg 288deg, #3498db 288deg 342deg, #9b59b6 342deg 360deg);
  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.45),
    0 0 32px rgba(255, 215, 0, 0.22);
}

.bonus-wheel-disc-inner {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

.bonus-wheel-segment {
  position: absolute;
  font-size: 0.55rem;
  color: #fff;
  text-shadow: 0 1px 3px #000;
  transition: filter 0.12s ease, transform 0.12s ease;
}

.bonus-wheel-segment.is-lit {
  filter: brightness(1.35) drop-shadow(0 0 8px rgba(255, 215, 0, 0.75));
  transform: scale(1.04);
}

.bonus-wheel-segment.selected {
  outline: 2px solid #f1c40f;
  border-radius: 4px;
  padding: 2px;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.65);
}

.bonus-wheel-disc > .bonus-wheel-segment:nth-child(2),
.bonus-wheel-disc > .bonus-wheel-segment:nth-child(3),
.bonus-wheel-disc > .bonus-wheel-segment:nth-child(4),
.bonus-wheel-disc > .bonus-wheel-segment:nth-child(5) {
  /* Position set inline from wheelSegmentLayout — weight-accurate labels */
}

.bonus-wheel-overlay--spinning .bonus-wheel-lights {
  box-shadow:
    0 0 36px rgba(255, 215, 0, 0.45),
    inset 0 0 24px rgba(255, 215, 0, 0.2);
}

.bonus-wheel-overlay--stopped .bonus-wheel-disc {
  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.45),
    0 0 48px rgba(255, 215, 0, 0.45);
}

.bonus-wheel-result-banner--visible {
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.65rem 1.4rem;
  box-shadow: 0 8px 28px rgba(255, 215, 0, 0.35);
}

.bonus-wheel-result-banner[data-bonus="HANSOLO"] { border-color: #2ecc71; color: #2ecc71; }
.bonus-wheel-result-banner[data-bonus="KISSIK"] { border-color: #fd79a8; color: #fd79a8; }
.bonus-wheel-result-banner[data-bonus="VIKING"] { border-color: #3498db; color: #3498db; }
.bonus-wheel-result-banner[data-bonus="UJN"] { border-color: #9b59b6; color: #c084fc; }

.bonus-wheel-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, transparent 35%, rgba(4, 8, 18, 0.72) 100%);
  z-index: 0;
}

.replay-bonus-panel {
  margin: 0.75rem 0;
}

.replay-bonus-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0;
}

.replay-bonus-badge {
  background: #0f3460;
  border: 1px solid #3498db;
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.hidden-event-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hidden-event-dim {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 20, 0.88);
}

.hidden-event-panel {
  position: relative;
  z-index: 1;
  width: min(560px, 94%);
  background: #141f36;
  border: 2px solid var(--accent, #64748b);
  border-radius: 14px;
  padding: 1.25rem;
  text-align: center;
}

.hidden-event-title {
  margin: 0 0 0.75rem;
  color: var(--accent, #f1c40f);
  letter-spacing: 0.1em;
}

.hidden-event-stage {
  position: relative;
  min-height: 120px;
  margin: 0.5rem 0 1rem;
  overflow: hidden;
}

.hidden-event-character {
  font-size: 1.4rem;
  font-weight: 900;
  color: #f8fafc;
  margin-bottom: 0.5rem;
}

.hidden-event-asset-flow .hidden-event-title {
  display: none;
}

.hidden-event-character-art,
.hidden-event-event-art {
  max-width: min(92%, 360px);
  max-height: 220px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
}

.hidden-event-event-art {
  margin-top: 0.75rem;
}

.hidden-event-character-fallback {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--accent, #f1c40f);
}

.hidden-event-multiplier {
  font-size: 2.4rem;
  font-weight: 900;
  color: #f1c40f;
  margin: 0.35rem 0;
}

.hidden-event-win {
  font-size: 1.35rem;
  font-weight: 700;
  color: #2ecc71;
}

.hidden-event-final {
  color: #e2e8f0;
  font-weight: 700;
  margin: 0.75rem 0;
}

.hidden-event-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.75rem;
}

.hidden-event-hidden {
  display: none !important;
}

.hidden-event-dog {
  position: absolute;
  left: 0;
  bottom: 12px;
  font-weight: 900;
  font-size: 1.1rem;
}

.hidden-event-bone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: 900;
}

.hidden-event-roar {
  font-size: 1.8rem;
  font-weight: 900;
  color: #f39c12;
  margin-top: 0.5rem;
}

.hidden-event-crack {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  color: #e74c3c;
  opacity: 0;
  pointer-events: none;
}

.hidden-event-crack-visible {
  opacity: 1;
}

.hidden-event-terminal {
  font-family: monospace;
  text-align: left;
  background: #0a0f1a;
  border: 1px solid #2ecc71;
  border-radius: 8px;
  padding: 0.75rem;
  min-height: 72px;
  color: #2ecc71;
  white-space: pre-wrap;
}

.hidden-event-stamp {
  margin-top: 0.75rem;
  font-size: 1.4rem;
  font-weight: 900;
  color: #2ecc71;
  letter-spacing: 0.08em;
}

.hidden-event-access-stamp {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-weight: 900;
  letter-spacing: 0.2em;
  color: #2ecc71;
  text-shadow: 0 0 18px rgba(46, 204, 113, 0.85);
  pointer-events: none;
}

.hidden-event-code-rain {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  pointer-events: none;
}

.hidden-event-glitch-on {
  filter: hue-rotate(90deg) contrast(1.4);
  transform: translateX(2px);
}

.replay-hidden-panel {
  margin: 0.75rem 0;
}

.replay-hidden-summary p {
  margin: 0.25rem 0;
}

.replay-hidden-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0;
}

.replay-hidden-badge {
  background: #1a2744;
  border: 1px solid var(--accent, #e67e22);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.replay-hidden-actions {
  margin-top: 0.5rem;
}

.bonus-scene-overlay {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.bonus-scene-overlay--fullstage {
  display: block;
}

.bonus-scene-dim {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 20, 0.9);
}

.bonus-scene-dim--light {
  background: rgba(6, 10, 20, 0.35);
  pointer-events: none;
}

.bonus-scene-panel {
  position: relative;
  z-index: 1;
  width: min(620px, 94%);
  max-height: 92%;
  overflow: auto;
  background: #141f36;
  border: 2px solid #475569;
  border-radius: 14px;
  padding: 1rem 1.25rem;
  text-align: center;
}

.bonus-scene-character-portrait {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #3498db;
  color: #111;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  pointer-events: none;
}

.bonus-scene-feature-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: flex-start;
  padding-top: 5.5rem;
}

.bonus-scene-hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(10, 16, 30, 0) 0%, rgba(10, 16, 30, 0.92) 35%, rgba(10, 16, 30, 0.98) 100%);
  pointer-events: auto;
}

.bonus-scene-hud-head {
  text-align: center;
  margin-bottom: 0.35rem;
}

.bonus-scene-hud-stats {
  display: flex;
  gap: 0.65rem 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 0.85rem;
}

.bonus-scene-hud-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.45rem;
}

.bonus-scene-skip {
  position: absolute;
  right: 0.65rem;
  bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  pointer-events: auto;
  font-size: 0.75rem;
  padding: 0.35rem 0.65rem;
  opacity: 0.85;
}

.slot-bonus-active #friends-pixi-root {
  z-index: 8;
}

.game-stage-v2:not(.game-stage-v2--playable) .game-stage-top,
.game-stage-v2:not(.game-stage-v2--playable) .game-stage-center,
.game-stage-v2:not(.game-stage-v2--playable) .slot-hud-v2 {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.game-stage-v2:not(.game-stage-v2--playable) #friends-pixi-root {
  visibility: hidden !important;
  opacity: 0 !important;
}

.slot-bonus-active .slot-hud-v2 {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  height: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: none;
}

.playground--player-view.slot-bonus-active .slot-hud-v2,
.playground--player-view .slot-bonus-active .slot-hud-v2 {
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 48px !important;
  padding: 0.25rem 0.5rem 0.32rem !important;
  margin: 0 !important;
  overflow: visible !important;
  border-top: 1px solid rgba(255, 215, 0, 0.25) !important;
  position: relative;
  z-index: 30;
}

.playground--player-view.slot-bonus-active .slot-hud-spin-cluster,
.playground--player-view .slot-bonus-active .slot-hud-spin-cluster {
  position: relative;
  z-index: 31;
  pointer-events: auto;
}

.slot-bonus-active .game-stage-center {
  grid-column: 1 / -1;
}

.slot-bonus-active .buy-bonus-panel {
  opacity: 0.35;
  pointer-events: none;
}

.bonus-scene-title {
  margin: 0;
  color: #f1c40f;
  letter-spacing: 0.08em;
}

.bonus-scene-subtitle,
.bonus-scene-trigger {
  color: #94a3b8;
  margin: 0.25rem 0;
}

.bonus-scene-character {
  margin: 0.75rem auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #3498db;
  color: #111;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.bonus-scene-stage {
  min-height: 120px;
  margin: 0.75rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

.bonus-scene-stats {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 700;
}

.bonus-scene-total-win {
  color: #2ecc71;
}

.bonus-scene-multiplier {
  color: #f1c40f;
}

.bonus-scene-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.75rem;
}

.bonus-scene-continue.hidden {
  display: none;
}

.bonus-result-summary {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px dashed #64748b;
  border-radius: 10px;
}

.bonus-result-title {
  margin: 0;
  color: #f1c40f;
}

.bonus-result-subtitle {
  color: #e2e8f0;
}

.bonus-result-total-win {
  font-size: 1.6rem;
  font-weight: 900;
  color: #2ecc71;
}

.bonus-result-multiplier {
  font-size: 1.2rem;
  font-weight: 800;
  color: #f1c40f;
}

.hansolo-giant-wild-block,
.hansolo-summary-giant-wild {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  color: #111;
  font-weight: 900;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(243, 156, 18, 0.45);
}

.kissik-sticky-wild-chip {
  background: #fd79a8;
  color: #111;
  font-weight: 800;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
}

.kissik-reel-multiplier-chip {
  background: #9b59b6;
  color: #fff;
  font-weight: 900;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
}

.kissik-sticky-miss {
  color: #94a3b8;
  font-weight: 700;
  font-style: italic;
}

.replay-bonus-presentation-panel {
  margin: 0.75rem 0;
}

.replay-bonus-presentation-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0;
}

.replay-bonus-presentation-badge {
  background: #1a2744;
  border: 1px solid #3498db;
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.replay-bonus-presentation-actions {
  margin-top: 0.5rem;
}

.viking-bonus-scene {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 55%, #0c4a6e 100%);
  border-color: #475569;
}

.ujn-bonus-scene {
  background: linear-gradient(180deg, #1a0a2e 0%, #2d1b4e 50%, #4a1942 100%);
  border-color: #9b59b6;
}

.ujn-character-slot {
  position: relative;
  width: auto !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
}

.ujn-character {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

.ujn-character-body {
  font-size: 1.4rem;
  font-weight: 900;
  color: #f1c40f;
  letter-spacing: 0.06em;
}

.ujn-posture-greedy .ujn-character-body {
  transform: scale(1);
}

.ujn-posture-skeletal .ujn-character-body {
  transform: scaleY(1.15) scaleX(0.85);
  color: #e67e22;
}

.ujn-posture-insane .ujn-character-body {
  transform: scaleY(1.25) scaleX(0.75);
  color: #e74c3c;
  text-shadow: 0 0 12px rgba(231, 76, 60, 0.8);
}

.ujn-crown {
  position: absolute;
  top: -1.2rem;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.ujn-crown-stage-0 { font-size: 0.75rem; }
.ujn-crown-stage-1 { font-size: 1rem; }
.ujn-crown-stage-2 { font-size: 1.35rem; }
.ujn-crown-stage-3 { font-size: 1.75rem; filter: drop-shadow(0 0 8px gold); }

.ujn-eyes-glow {
  position: absolute;
  top: 0.35rem;
  font-size: 0.55rem;
  opacity: calc(0.3 + var(--ujn-eye-intensity, 0.25) * 0.7);
  filter: drop-shadow(0 0 calc(4px + var(--ujn-eye-intensity, 0.25) * 12px) #ff6b6b);
}

.ujn-puppet-row {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin: 0.5rem 0;
  flex-wrap: wrap;
}

.ujn-puppet-row--player {
  position: absolute;
  top: 2.75rem;
  left: 0;
  right: 0;
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0;
  padding: 0 0.75rem;
  pointer-events: none;
  z-index: 6;
}

/* Player live bonus — puppets hang above the reel stage, not the bottom HUD strip */
.playground--player-view [data-game-stage-aspect] > .ujn-puppet-row--player.ujn-puppet-row--stage {
  top: clamp(0.35rem, 2.5vh, 1rem);
  bottom: auto;
  align-items: flex-start;
  padding: 0 clamp(0.25rem, 2vw, 0.75rem);
  z-index: 12;
}

.playground--player-view [data-game-stage-aspect] > .ujn-puppet-row--stage .ujn-puppet--hansolo {
  align-self: flex-start;
  margin-right: auto;
}

.playground--player-view [data-game-stage-aspect] > .ujn-puppet-row--stage .ujn-puppet--kissik {
  align-self: flex-start;
  margin-left: auto;
  margin-right: auto;
}

.playground--player-view [data-game-stage-aspect] > .ujn-puppet-row--stage .ujn-puppet--viking {
  align-self: flex-start;
  margin-left: auto;
}

.playground--player-view [data-game-stage-aspect] > .ujn-puppet-row--stage .ujn-puppet-image {
  width: clamp(52px, 11vw, 72px);
  height: clamp(52px, 11vw, 72px);
}

.playground--player-view [data-game-stage-aspect] > .ujn-package-activated-toast {
  top: clamp(0.2rem, 1.5vh, 0.65rem);
}

.ujn-puppet--hansolo {
  align-self: flex-end;
}

.ujn-puppet--kissik {
  align-self: flex-end;
  margin: 0 auto;
}

.ujn-puppet--viking {
  align-self: flex-end;
  margin-left: auto;
}

.ujn-puppet--active.ujn-puppet-spawned {
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.55));
}

.ujn-puppet--slot-empty {
  visibility: hidden;
  pointer-events: none;
  min-width: 64px;
  min-height: 64px;
}

.ujn-package-activated-toast {
  position: absolute;
  top: -3.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fff8dc;
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.95), rgba(255, 215, 0, 0.85));
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.55);
  pointer-events: none;
  white-space: nowrap;
}

.playground--player-view .bonus-scene-overlay .ujn-package-activated-toast {
  top: 0.15rem;
}

.ujn-puppet {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ujn-puppet-string {
  display: block;
  width: 2px;
  height: 1rem;
  background: linear-gradient(180deg, #9b59b6, transparent);
}

.ujn-puppet-body {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid #9b59b6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #f1c40f;
  background: rgba(26, 10, 46, 0.9);
}

.ujn-puppet-image {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.45));
}

.ujn-puppet--has-art.ujn-puppet-spawned {
  animation: ujn-puppet-spawn-glow 0.55s ease-out;
}

.ujn-puppet--has-art .ujn-puppet-image {
  animation: ujn-puppet-bounce 0.45s ease-out;
}

@keyframes ujn-puppet-spawn-glow {
  0% { filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0)); }
  60% { filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.85)); }
  100% { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.35)); }
}

.ujn-puppet-celebrate {
  animation: ujn-puppet-bounce 0.4s ease infinite alternate;
}

@keyframes ujn-puppet-bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}

.ujn-voice-line {
  font-weight: 800;
  text-align: center;
  color: #f1c40f;
  margin: 0.35rem 0;
  letter-spacing: 0.04em;
}

.ujn-voice-package3,
.ujn-voice-bigWin1000 {
  color: #e74c3c;
  font-size: 1.05rem;
}

.ujn-voice-deadSpinFrustration {
  color: #e67e22;
}

.ujn-laugh-burst,
.ujn-package-burst {
  text-align: center;
  font-weight: 900;
  color: #9b59b6;
  margin: 0.25rem 0;
}

.ujn-package-burst {
  color: #f1c40f;
  font-size: 0.95rem;
}

.ujn-metadata-unavailable {
  text-align: center;
  color: #94a3b8;
  font-style: italic;
  font-size: 0.85rem;
  margin: 0.5rem 0;
}

.ujn-gold-rain {
  position: relative;
  height: 4rem;
  overflow: hidden;
  margin: 0.35rem 0;
}

.ujn-gold-coin {
  position: absolute;
  top: 0;
  font-size: 1rem;
}

.ujn-big-win-1000 .ujn-voice-line {
  animation: ujn-insanity-pulse 0.3s ease infinite alternate;
}

@keyframes ujn-insanity-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

.viking-stage-tracker {
  margin-bottom: 0.75rem;
}

.viking-stage-dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.viking-stage-dot {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 2px solid #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #94a3b8;
  background: #1e293b;
}

.viking-stage-dot.active {
  border-color: #38bdf8;
  color: #e0f2fe;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.55);
}

.viking-stage-dot.completed {
  border-color: #22c55e;
  color: #bbf7d0;
  background: #14532d;
}

.viking-stage-dot.danger {
  border-color: #ef4444;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.65);
  animation: viking-danger-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes viking-danger-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

.viking-stage-pulse-label {
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #38bdf8;
  min-height: 1.5rem;
  margin-top: 0.35rem;
}

.viking-curtain-row {
  display: flex;
  gap: 0.35rem;
  align-items: flex-end;
  min-height: 120px;
  margin: 0.5rem 0;
}

.viking-curtain-reel {
  position: relative;
  text-align: center;
}

.viking-curtain-reel-header {
  font-size: 0.65rem;
  color: #94a3b8;
  margin-bottom: 0.25rem;
}

.viking-curtain-drop {
  height: 72px;
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border: 2px solid #334155;
  border-radius: 6px;
}

.viking-curtain-wild {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7c2d12;
  border: 2px solid #ea580c;
  border-radius: 6px;
  font-weight: 900;
  color: #fed7aa;
  font-size: 0.75rem;
}

.viking-curtain-wild.hidden,
.viking-multiplier-badge.hidden {
  display: none;
}

.viking-multiplier-badge {
  margin-top: 0.35rem;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  font-weight: 900;
  font-size: 0.8rem;
  display: inline-block;
}

.viking-multiplier-badge.participating {
  background: #854d0e;
  border: 2px solid #facc15;
  color: #fef9c3;
}

.viking-multiplier-badge.non-participating {
  background: #1e3a5f;
  border: 2px solid #64748b;
  color: #cbd5e1;
}

.viking-mult-x25.participating,
.viking-mult-x25.non-participating {
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.45);
}

.viking-mult-x50 {
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.55);
}

.viking-mult-x100 {
  font-size: 0.95rem;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.75);
}

.viking-curtain-reel.winning-span .viking-curtain-wild {
  border-color: #facc15;
}

.viking-near-miss-label {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin: 0.5rem 0;
}

.viking-unavailable-label {
  text-align: center;
  color: #94a3b8;
  font-style: italic;
}

.viking-thunder-flash {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  border-radius: inherit;
}

.bonus-scene-board-host {
  min-height: 4.5rem;
  margin: 0.5rem 0;
}

.bonus-board-grid {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
  margin: 0.5rem auto;
}

.bonus-board-col {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.bonus-board-cell {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  font-weight: 800;
  border-radius: 0.25rem;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #e2e8f0;
}

.hansolo-no-giant-wild {
  text-align: center;
  color: #94a3b8;
  font-style: italic;
  margin: 0.5rem 0;
}

.player-history-panel {
  margin-top: 1rem;
  padding: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 0.5rem;
  background: rgba(15, 23, 42, 0.6);
}

.player-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.player-history-list .history-item {
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  font-size: 0.85rem;
}

.presentation-timeline-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.presentation-timeline-summary .label {
  display: block;
  font-size: 0.75rem;
  color: #94a3b8;
}

.presentation-timeline-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.presentation-timeline-filters,
.presentation-timeline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.presentation-timeline-table-wrap {
  max-height: 420px;
  overflow: auto;
  border: 1px solid #334155;
  border-radius: 8px;
}

.presentation-timeline-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.presentation-timeline-table th,
.presentation-timeline-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid #1e293b;
  text-align: left;
  vertical-align: top;
}

.presentation-timeline-table th {
  position: sticky;
  top: 0;
  background: #16213e;
}

.presentation-timeline-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.presentation-timeline-badge--camera {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}

.presentation-timeline-badge--voice {
  background: rgba(168, 85, 247, 0.18);
  color: #d8b4fe;
}

.presentation-timeline-badge--vfx {
  background: rgba(236, 72, 153, 0.18);
  color: #f9a8d4;
}

.presentation-timeline-badge--overlay,
.presentation-timeline-badge--other {
  background: rgba(148, 163, 184, 0.18);
  color: #cbd5e1;
}

.presentation-timeline-badge--big_win,
.presentation-timeline-badge--jackpot {
  background: rgba(234, 179, 8, 0.18);
  color: #fde047;
}

.presentation-timeline-badge--hidden_event,
.presentation-timeline-badge--chill_dude,
.presentation-timeline-badge--wheel,
.presentation-timeline-badge--character {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

.presentation-timeline-empty {
  color: #94a3b8;
  font-size: 0.9rem;
}

/* ── FRIENDS Showcase Shell ───────────────────────────────────────── */

.showcase-shell {
  --showcase-navy: #070b14;
  --showcase-panel: #0d1220;
  --showcase-purple: #a855f7;
  --showcase-gold: #ffd700;
  --showcase-green: #4ade80;
  --showcase-pink: #f472b6;
  min-height: 100vh;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(220px, 260px) 1fr;
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(168, 85, 247, 0.18), transparent 55%),
    radial-gradient(ellipse 80% 60% at 100% 50%, rgba(244, 114, 182, 0.08), transparent 50%),
    linear-gradient(180deg, #050810 0%, var(--showcase-navy) 40%, #030508 100%);
  color: #e2e8f0;
  overflow: hidden;
}

.showcase-shell--sidebar-collapsed {
  grid-template-columns: minmax(55px, 60px) 1fr;
}

.showcase-shell--sidebar-collapsed .showcase-center--player {
  width: min(100%, calc(100vw - 60px));
}

.showcase-shell--sidebar-collapsed .showcase-center--player .game-stage-card {
  max-width: min(96vw, 100%);
}

.showcase-shell--sidebar-collapsed .showcase-sidebar {
  transform: none;
  opacity: 1;
  pointer-events: auto;
  padding: 0.75rem 0.35rem;
}

.showcase-shell--sidebar-collapsed .showcase-sidebar-brand span,
.showcase-shell--sidebar-collapsed .showcase-nav-item {
  display: none;
}

.showcase-shell--sidebar-collapsed .showcase-sidebar-brand strong {
  display: none;
}

.showcase-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 1.25rem 1rem;
  background: linear-gradient(180deg, rgba(13, 18, 32, 0.98), rgba(7, 11, 20, 0.95));
  border-right: 1px solid rgba(168, 85, 247, 0.25);
  box-shadow: inset -1px 0 0 rgba(255, 215, 0, 0.08);
  transition: transform 0.25s ease, opacity 0.25s ease;
  z-index: 20;
  overflow: hidden;
}

.showcase-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.showcase-logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.25rem;
  color: #111;
  background: linear-gradient(135deg, var(--showcase-gold), var(--showcase-green));
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.45);
}

.showcase-sidebar-brand strong {
  display: block;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
}

.showcase-sidebar-brand span {
  display: block;
  font-size: 0.65rem;
  color: #94a3b8;
}

.showcase-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.showcase-nav-item {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 0.85rem;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.showcase-nav-item:hover,
.showcase-nav-item.active {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.35);
  color: #f8fafc;
}

.showcase-nav-item--link {
  text-decoration: none;
  display: block;
}

.showcase-sidebar-toggle {
  display: none;
  margin-top: 1rem;
  width: 100%;
}

.showcase-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.showcase-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  max-height: 50px;
  padding: 0.35rem 1rem;
  background: rgba(7, 11, 20, 0.85);
  border-bottom: 1px solid rgba(168, 85, 247, 0.2);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 15;
}

.showcase-topbar-left,
.showcase-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.showcase-topbar-title {
  letter-spacing: 0.14em;
  font-size: 1rem;
}

.showcase-topbar-pill {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #e9d5ff;
}

.showcase-mode-badge {
  font-size: 0.7rem;
}

.showcase-balance-chip {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 215, 0, 0.35);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.12);
}

.showcase-balance-chip .label {
  font-size: 0.65rem;
  color: #94a3b8;
  margin-right: 0.35rem;
}

.showcase-wallet-btn,
.showcase-icon-btn {
  min-width: 2.25rem;
}

.showcase-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 1.25rem 2rem;
}

.game-stage-card {
  position: relative;
  width: min(100%, 1280px);
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
}

.game-stage-bg {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, rgba(168, 85, 247, 0.22), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.12), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(74, 222, 128, 0.1), transparent 50%),
    linear-gradient(160deg, #0a0f1a 0%, #120a1e 45%, #080c14 100%);
  z-index: 0;
}

.game-stage-bg--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--stage-bg-photo);
  background-size: cover;
  background-position: center;
  opacity: 0.92;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.game-stage-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(168, 85, 247, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 100%);
}

.playground--player-view .game-stage-bg-grid {
  animation: none;
}

.playground--player-view .game-stage-bg-glow,
.playground--player-view .game-stage-bg-particles {
  animation: none;
}

@keyframes showcase-grid-drift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-48px, -48px, 0); }
}

.game-stage-bg-glow {
  position: absolute;
  inset: 10% 15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.25), transparent 70%);
  filter: blur(24px);
}

@keyframes showcase-glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.05); }
}

.game-stage-bg-particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255, 215, 0, 0.35) 1px, transparent 1px),
    radial-gradient(circle, rgba(244, 114, 182, 0.25) 1px, transparent 1px);
  background-size: 120px 120px, 180px 180px;
  background-position: 0 0, 60px 60px;
  opacity: 0.35;
}

@keyframes showcase-particles {
  0% { transform: translateY(0); }
  100% { transform: translateY(-60px); }
}

.game-stage-frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(145deg, #111827 0%, #050508 55%, #1a1030 100%);
  border: 3px solid #0a0a0f;
  box-shadow:
    0 0 0 2px rgba(255, 215, 0, 0.55),
    0 0 28px rgba(168, 85, 247, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 8px rgba(0, 0, 0, 0.65);
}

.game-stage-frame > .game-stage-bg {
  border-radius: inherit;
  z-index: 0;
}

.game-stage-frame > .game-stage-zoom-wrap {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
}

.game-stage-aspect {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
  border: 1px solid rgba(255, 215, 0, 0.15);
}

.pixi-root--showcase canvas {
  width: 100% !important;
  height: 100% !important;
}

.character-meter-panel--showcase {
  top: 10px;
  bottom: auto;
  left: 12px;
  right: 12px;
  gap: 0.5rem;
}

.character-meter-panel--showcase .character-meter-portrait {
  min-height: 72px;
  padding: 0.45rem 0.35rem 0.35rem;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(7, 11, 20, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.character-meter-panel--showcase .character-meter-letter {
  width: 40px;
  height: 40px;
  font-size: 0.95rem;
}

.character-meter-panel--showcase .character-meter-name {
  font-size: 0.68rem;
}

.character-meter-panel--showcase .character-meter-hint {
  display: none;
}

.character-meter-panel--showcase .character-meter-pip {
  width: 5px;
  height: 5px;
}

.character-meter-panel--showcase .character-meter-fill {
  height: 3px;
}

.slot-hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  gap: 0.35rem 0.75rem;
  padding: 0.55rem 0.75rem 0.65rem;
  background: linear-gradient(180deg, transparent, rgba(5, 8, 16, 0.92) 25%);
  border-top: 1px solid rgba(168, 85, 247, 0.25);
}

.slot-hud-left {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  justify-content: center;
}

.slot-hud-stat .label {
  display: block;
  font-size: 0.62rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.slot-hud-stat strong {
  font-size: 0.95rem;
  color: var(--showcase-green);
}

.slot-hud-stat--secondary strong {
  color: var(--showcase-gold);
  font-size: 0.82rem;
}

.slot-hud-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.slot-hud-step {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  border: 1px solid rgba(168, 85, 247, 0.45);
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.slot-hud-bet {
  font-size: 0.75rem;
  color: #cbd5e1;
}

.slot-hud-bet input {
  width: 3.5rem;
  margin-left: 0.25rem;
  padding: 0.2rem 0.35rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 215, 0, 0.35);
  background: rgba(7, 11, 20, 0.95);
  color: #f8fafc;
}

.slot-hud-bet-display {
  font-size: 0.85rem;
  color: var(--showcase-gold);
  min-width: 1.5rem;
}

.slot-hud-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.slot-hud-spin {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 215, 0, 0.65);
  background: radial-gradient(circle at 35% 30%, #4ade80, #15803d 55%, #1a1030 100%);
  box-shadow: 0 0 16px rgba(74, 222, 128, 0.45), 0 0 24px rgba(168, 85, 247, 0.25);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.12s ease;
}

.slot-hud-spin:hover {
  transform: scale(1.05);
}

.slot-hud-spin-icon {
  font-size: 1.45rem;
  font-weight: 900;
  color: #fefce8;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.slot-hud-tools {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
}

.slot-hud-tool {
  font-size: 0.72rem;
  padding: 0.25rem 0.55rem;
}

.slot-hud-buy {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(255, 215, 0, 0.2));
  border-color: rgba(168, 85, 247, 0.55);
  color: #fef3c7;
}

.slot-hud-buy-panel {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.35rem);
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.5rem;
  border-radius: 10px;
  background: rgba(13, 18, 32, 0.96);
  border: 1px solid rgba(168, 85, 247, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 6;
}

.game-stage-decor {
  display: none;
}

.showcase-status {
  width: min(100%, 1280px);
  margin: 0.65rem auto 0;
  text-align: center;
  font-size: 0.82rem;
}

.showcase-history {
  width: min(100%, 1280px);
  margin-top: 0.75rem;
}

.showcase-sound-settings-host {
  width: min(100%, 1280px);
  margin-top: 0.75rem;
}

/* Admin showcase layout */
.showcase-shell--admin .showcase-center,
.admin-showcase-body {
  flex: 1;
  min-height: 0;
}

.admin-showcase-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(420px, 34%);
  gap: 1rem;
  padding: 0.75rem 1rem 1.25rem;
  align-items: start;
}

.admin-showcase-stage {
  min-width: 0;
  overflow: hidden;
}

.showcase-shell--panels-collapsed .admin-showcase-body {
  grid-template-columns: 1fr;
}

.showcase-shell--panels-collapsed [data-admin-panels] {
  display: none;
}

.showcase-shell--admin .game-stage-card {
  width: 100%;
  max-width: none;
}

@media (max-width: 960px) {
  .showcase-shell {
    grid-template-columns: 1fr;
  }

  .showcase-sidebar {
    position: fixed;
    left: 0;
    width: min(260px, 85vw);
    z-index: 30;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.5);
  }

  .showcase-shell--sidebar-collapsed .showcase-sidebar {
    transform: translateX(-110%);
  }

  .showcase-sidebar-toggle {
    display: block;
  }

  .admin-showcase-body {
    grid-template-columns: 1fr;
  }

  .slot-hud {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }

  .slot-hud-right {
    grid-column: 2;
    grid-row: 1;
  }

  .slot-hud-center {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .slot-hud-tools {
    grid-row: 3;
  }
}

@media (max-width: 520px) {
  .pixi-root--showcase {
    inset: 0 0 112px;
  }

  .playground--player-view .pixi-root--showcase {
    inset: auto;
  }

  .slot-hud-spin {
    width: 2.85rem;
    height: 2.85rem;
  }
}


/* ===== FRIENDS Slot Layout V2 ===== */
.game-stage-v2 {
  --stage-top: 16%;
  --stage-center: 66%;
  --stage-bottom: 18%;
  display: grid;
  grid-template-rows: var(--stage-top) var(--stage-center) var(--stage-bottom);
  grid-template-areas:
    'top'
    'reels'
    'hud';
  background: radial-gradient(circle at 15% 20%, rgba(168, 85, 247, 0.12), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(255, 215, 0, 0.08), transparent 35%),
    linear-gradient(180deg, rgba(8, 10, 18, 0.95), rgba(5, 6, 12, 0.98));
}

.game-stage-top {
  grid-area: top;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(140px, 22%) 1fr;
  align-items: start;
  padding: 0.45rem 0.65rem 0.2rem;
  pointer-events: none;
}

.friends-stage-logo {
  pointer-events: none;
  padding: 0.15rem 0.35rem;
}

.friends-stage-logo-title {
  display: block;
  font-size: clamp(0.72rem, 1.6vw, 1.05rem);
  letter-spacing: 0.14em;
  background: linear-gradient(135deg, #f472b6, #c084fc 45%, #ffd700);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.85);
  text-shadow: 0 0 12px rgba(168, 85, 247, 0.45);
}

.friends-stage-logo-tagline {
  display: block;
  margin-top: 0.1rem;
  font-size: clamp(0.52rem, 1vw, 0.68rem);
  color: #fde68a;
  text-shadow: 0 0 6px rgba(168, 85, 247, 0.35);
}

.character-meter-host {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
}

.character-meter-panel--v2 {
  position: static;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  width: min(100%, 520px);
  pointer-events: auto;
}

.character-meter-portrait--v2 {
  min-height: 58px;
  padding: 0.35rem 0.25rem 0.25rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, #ffd700);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent);
}

.character-meter-portrait--v2 .character-meter-letter {
  width: 34px;
  height: 34px;
  font-size: 0.82rem;
}

.character-meter-portrait-image {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin: 0 auto 0.15rem;
}

.character-meter-portrait--v2 .character-meter-portrait-image {
  width: 40px;
  height: 40px;
}

.character-meter-portrait-image--needs-art,
.character-meter-portrait--needs-art .character-meter-portrait-image {
  opacity: 0.88;
  outline: 2px dashed color-mix(in srgb, var(--accent) 70%, #fbbf24);
  outline-offset: -2px;
}

.playground--player-view .character-meter-portrait-image--needs-art,
.playground--player-view .character-meter-portrait--needs-art .character-meter-portrait-image {
  outline: none;
}

.character-meter-portrait--needs-art {
  position: relative;
}

.character-meter-portrait--v2 .character-meter-name {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

.game-stage-center {
  grid-area: reels;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(72px, 10%) minmax(0, 1fr) minmax(48px, 8%);
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.45rem;
  min-height: 0;
}

.buy-bonus-panel {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  z-index: 4;
}

.buy-bonus-panel-btn {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border-radius: 10px;
  border: 2px solid rgba(255, 215, 0, 0.55);
  background: linear-gradient(180deg, rgba(234, 88, 12, 0.85), rgba(124, 58, 237, 0.75));
  color: #fff7ed;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.65rem 0.35rem;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
}

.buy-bonus-panel-btn--random {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.35), rgba(168, 85, 247, 0.65));
}

.game-stage-reels {
  position: relative;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  border-radius: 14px;
  overflow: hidden;
}

.game-stage-reels::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.08) 3.5%,
    rgba(0, 0, 0, 0) 7%,
    rgba(0, 0, 0, 0) 93%,
    rgba(0, 0, 0, 0.08) 96.5%,
    rgba(0, 0, 0, 0.55) 100%
  );
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.35),
    inset 0 8px 18px rgba(168, 85, 247, 0.08),
    inset 0 -8px 18px rgba(255, 215, 0, 0.06);
}

.pixi-root--showcase {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  z-index: 4;
  overflow: hidden;
}

.game-stage-side-decor {
  border-radius: 12px;
  min-height: 40%;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.08), transparent);
  opacity: 0.65;
}

.slot-hud-v2 {
  grid-area: hud;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem 0.32rem;
  min-height: 48px;
  background: linear-gradient(180deg, rgba(8, 10, 18, 0.35), rgba(5, 8, 16, 0.96));
  border-top: 1px solid rgba(255, 215, 0, 0.25);
  box-shadow: inset 0 1px 0 rgba(168, 85, 247, 0.2);
}

.slot-hud-message {
  text-align: center;
  font-size: clamp(0.58rem, 1.1vw, 0.72rem);
  color: #cbd5e1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.slot-hud-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.slot-hud-spin-cluster {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.slot-hud-spin {
  width: 4rem;
  height: 4rem;
}

.slot-hud-spin-label {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  margin-top: -0.15rem;
}

.slot-hud-bet-chip {
  border: 1px solid rgba(255, 215, 0, 0.45);
  background: rgba(15, 23, 42, 0.9);
  border-radius: 8px;
  padding: 0.15rem 0.45rem;
  cursor: pointer;
}

.slot-hud-util {
  display: flex;
  gap: 0.25rem;
}

.slot-hud-auto.is-active,
.slot-hud-turbo.is-active,
[data-turbo-toggle].is-active,
[data-auto-toggle].is-active {
  border-color: #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.45);
}

.slot-hud-sound-popup {
  position: absolute;
  right: 0.75rem;
  bottom: calc(100% + 0.35rem);
  z-index: 8;
  min-width: 180px;
  padding: 0.55rem;
  border-radius: 10px;
  background: rgba(10, 14, 24, 0.96);
  border: 1px solid rgba(168, 85, 247, 0.45);
}

.slot-hud-sound-popup-inner label {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
}

.game-loading-screen {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: transparent;
  transition: opacity 1.5s ease;
}

.game-loading-screen[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.game-loading-screen--hidden {
  opacity: 0;
  pointer-events: none;
}

.game-loading-screen[data-auth-portal-blocked] {
  pointer-events: none !important;
}

[data-showcase-shell]:has([data-auth-portal]:not([hidden])) .game-loading-screen {
  pointer-events: none !important;
}

.game-loading-bg {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1;
}

.game-loading-content {
  position: relative;
  text-align: center;
  padding: 1rem;
}

.game-loading-title {
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  letter-spacing: 0.18em;
  background: linear-gradient(135deg, #f472b6, #c084fc, #ffd700);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0,0,0,0.85);
}

.game-loading-tagline,
.game-loading-exclusive,
.game-loading-ru {
  margin: 0.25rem 0;
  color: #fde68a;
  font-size: clamp(0.65rem, 1.4vw, 0.85rem);
}

.game-loading-bar-wrap {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  width: min(420px, 70%);
  text-align: center;
}

.game-loading-bar-frame {
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 215, 0, 0.55);
  background: rgba(0, 0, 0, 0.65);
  overflow: hidden;
}

.game-loading-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f472b6, #a855f7, #ffd700);
  box-shadow: 0 0 12px rgba(244, 114, 182, 0.65);
  transition: width 0.25s ease;
}

.game-loading-percent {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: #e2e8f0;
}

.game-loading-play-hotspot {
  position: absolute;
  left: 50%;
  bottom: 1.2%;
  transform: translateX(-50%);
  width: min(340px, 62%);
  height: min(112px, 18%);
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 3;
  border-radius: 8px;
  animation: loading-play-pulse 2.2s ease-in-out infinite;
}

.game-loading-play-hotspot::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 8%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.85), transparent);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.55);
  animation: loading-play-glow 2.2s ease-in-out infinite;
}

@keyframes loading-play-pulse {
  0%, 100% { box-shadow: inset 0 0 0 rgba(255, 215, 0, 0); }
  50% { box-shadow: inset 0 0 18px rgba(255, 215, 0, 0.22); }
}

@keyframes loading-play-glow {
  0%, 100% { opacity: 0.45; transform: scaleX(0.92); }
  50% { opacity: 1; transform: scaleX(1); }
}

.game-loading-play,
.game-loading-play[hidden] {
  display: none !important;
}

.buy-bonus-modal,
.slot-info-modal {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: none;
  place-items: center;
}

.buy-bonus-modal:not([hidden]),
.slot-info-modal:not([hidden]) {
  display: grid;
}

.buy-bonus-modal[hidden],
.slot-info-modal[hidden],
.buy-bonus-confirm-modal[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.slot-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.slot-modal-card {
  position: relative;
  z-index: 1;
  width: min(92%, 420px);
  max-height: 85%;
  overflow: auto;
  border-radius: 14px;
  border: 2px solid rgba(255, 215, 0, 0.45);
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.98), rgba(8, 10, 18, 0.98));
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.35);
}

.slot-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(168, 85, 247, 0.25);
}

.slot-modal-body {
  padding: 0.75rem 0.85rem 1rem;
}

.buy-bonus-modal-body {
  display: grid;
  gap: 0.45rem;
}

.buy-bonus-choice {
  text-align: left;
}

.slot-info-list {
  margin: 0.35rem 0 0.75rem;
  padding-left: 1.1rem;
  font-size: 0.82rem;
}

.slot-info-modal-card {
  width: min(94%, 720px);
}

.slot-info-modal-body {
  display: grid;
  gap: 0.75rem;
}

.slot-info-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.slot-info-nav-btn {
  border: 1px solid rgba(255, 215, 0, 0.35);
  background: rgba(15, 23, 42, 0.85);
  color: #e2e8f0;
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
  font-size: 0.72rem;
  cursor: pointer;
}

.slot-info-nav-btn.is-active {
  background: rgba(255, 215, 0, 0.2);
  border-color: #ffd700;
  color: #ffd700;
}

.slot-info-page-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.info-symbol-grid {
  list-style: none;
  padding: 0;
}

.info-symbol-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.45rem;
}

.info-symbol-row--detailed {
  align-items: flex-start;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.info-symbol-pays {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.info-symbol-pay-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.info-symbol-pay-grid span {
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.2);
  color: #fde68a;
}

.info-paytable-intro {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255, 230, 245, 0.82);
}

.info-page-subtitle {
  margin: 0.85rem 0 0.35rem;
  font-size: 0.88rem;
}

.info-detail-list {
  margin: 0.65rem 0 0;
  padding-left: 1.15rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(255, 235, 250, 0.85);
}

.info-scatter-tier-table {
  width: 100%;
  margin: 0.5rem 0;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.info-scatter-tier-table th,
.info-scatter-tier-table td {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.35rem 0.45rem;
  text-align: left;
}

.info-scatter-tier-table th {
  background: rgba(255, 255, 255, 0.06);
  font-weight: 800;
}

.info-wild-paytable {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.info-wild-paytable h4 {
  margin: 0 0 0.45rem;
  font-size: 0.9rem;
}

.info-symbol-pay-grid--wild span {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.25);
  color: #7dd3fc;
}

.info-symbol-thumb,
.info-page-asset {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
}

.info-page-asset--missing {
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  color: #94a3b8;
  border: 1px dashed rgba(148, 163, 184, 0.45);
}

.info-page-hero {
  display: grid;
  gap: 0.65rem;
}

.info-page-hero-art {
  width: min(100%, 280px);
  height: auto;
  max-height: 160px;
  object-fit: contain;
  margin: 0 auto;
}

.info-muted {
  color: #94a3b8;
  font-size: 0.78rem;
}

.info-rtp-block p {
  margin: 0.35rem 0;
  font-size: 0.85rem;
}

.payline-viewer-panel {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  z-index: 18;
  display: flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
  background: rgba(8, 10, 18, 0.88);
  border: 1px solid rgba(57, 255, 20, 0.45);
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.25);
}

.payline-viewer-label {
  min-width: 6.5rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffd700;
}

.bonus-result-banner {
  position: absolute;
  inset: 0;
  z-index: 22;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.bonus-result-banner__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.bonus-result-banner__content {
  position: relative;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  border: 2px solid var(--banner-accent, #ffd700);
  background: rgba(8, 10, 18, 0.92);
  text-align: center;
}

.bonus-result-banner__eyebrow {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: #94a3b8;
}

.bonus-result-banner__title {
  margin: 0.25rem 0 0;
  color: var(--banner-accent, #ffd700);
}

.bonus-wheel-lights {
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.25);
}

.bonus-wheel-result-banner {
  position: absolute;
  bottom: -18%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 60%;
  text-align: center;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  background: rgba(8, 10, 18, 0.9);
  border: 1px solid rgba(255, 215, 0, 0.45);
  color: #ffd700;
  font-weight: 700;
  z-index: 3;
}

.bonus-wheel-result-banner--visible {
  z-index: 6;
}

.hidden-event-light-sweep {
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 215, 0, 0.35), transparent);
  pointer-events: none;
  z-index: 2;
}

.hidden-event-asset-flow--begin .hidden-event-panel {
  transform: scale(0.96);
  opacity: 0.85;
}

.hidden-event-asset-flow--middle .hidden-event-panel {
  transform: scale(1);
  opacity: 1;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.hidden-event-asset-flow--end .hidden-event-final {
  animation: hidden-event-final-pop 0.45s ease;
}

@keyframes hidden-event-final-pop {
  0% { transform: scale(0.92); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}

.hidden-event-shnauzer .hidden-event-panel {
  border-color: #e67e22;
  box-shadow: 0 0 32px rgba(230, 126, 34, 0.25);
}

.hidden-event-leo .hidden-event-panel,
.hidden-event-leo-active .hidden-event-panel {
  border-color: #f1c40f;
  box-shadow: 0 0 36px rgba(241, 196, 15, 0.28);
}

.hidden-event-grulex .hidden-event-panel,
.hidden-event-grulex-active .hidden-event-panel {
  border-color: #2ecc71;
  box-shadow: 0 0 28px rgba(46, 204, 113, 0.22);
  font-family: ui-monospace, monospace;
}

.hidden-event-speech-bubble {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  max-width: min(88%, 340px);
  padding: 0.55rem 0.85rem;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.25;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.hidden-event-speech-bubble::after {
  content: '';
  position: absolute;
  left: 18%;
  bottom: -10px;
  border: 10px solid transparent;
  border-top-color: #fff;
}

.hidden-event-reward-stamp {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  padding: 0.35rem 0.75rem;
  border: 3px solid #e67e22;
  border-radius: 8px;
  color: #e67e22;
  font-weight: 900;
  letter-spacing: 0.12em;
  background: rgba(20, 31, 54, 0.92);
  pointer-events: none;
}

.hidden-event-slash-light {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 42%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 220, 120, 0.55) 52%,
    transparent 58%
  );
  mix-blend-mode: screen;
}

.hidden-event-crack-overlay--leo {
  background:
    linear-gradient(125deg, transparent 44%, rgba(255, 255, 255, 0.45) 49%, transparent 54%),
    linear-gradient(55deg, transparent 46%, rgba(231, 76, 60, 0.35) 50%, transparent 54%),
    radial-gradient(circle at 50% 50%, rgba(241, 196, 15, 0.15), transparent 62%);
}

.hidden-event-crt {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 255, 120, 0.04) 3px,
    rgba(0, 255, 120, 0.04) 4px
  );
  box-shadow: inset 0 0 80px rgba(46, 204, 113, 0.12);
}

.hidden-event-datamosh .hidden-event-panel {
  animation: hidden-event-datamosh 0.28s steps(3) 2;
}

@keyframes hidden-event-datamosh {
  0% { transform: translate(0, 0) skewX(0deg); filter: hue-rotate(0deg); }
  33% { transform: translate(-4px, 2px) skewX(-2deg); filter: hue-rotate(25deg); }
  66% { transform: translate(3px, -2px) skewX(2deg); filter: hue-rotate(-20deg); }
  100% { transform: translate(0, 0) skewX(0deg); filter: hue-rotate(0deg); }
}

.hidden-event-glitch-on {
  animation: hidden-event-glitch 0.12s steps(2) 3;
}

@keyframes hidden-event-glitch {
  0% { filter: none; transform: translate(0); }
  50% { filter: hue-rotate(90deg) contrast(1.2); transform: translate(2px, -1px); }
  100% { filter: none; transform: translate(0); }
}

.hidden-event-overlay.hidden-event-asset-flow--begin .hidden-event-dim {
  background: rgba(6, 10, 20, 0.92);
}

.hidden-event-overlay.hidden-event-asset-flow--end .hidden-event-dim {
  background: rgba(6, 10, 20, 0.78);
}

.playground-admin-workshop.asset-workshop--showcase-focus .asset-workshop-preview {
  overflow: visible;
}

.playground-admin-workshop.asset-workshop--showcase-focus .admin-dev-tools {
  max-height: 28vh;
  overflow: auto;
}

[data-wheel-layer="background"] {
  z-index: 0;
}

[data-wheel-layer="wheel"] {
  z-index: 1;
}

[data-wheel-layer="lights"] {
  z-index: 2;
}

[data-wheel-layer="arrow"] {
  z-index: 3;
}

[data-wheel-layer="result-banner"] {
  z-index: 4;
}

.visual-hud {
  display: none;
}

@media (max-width: 720px) {
  .game-stage-top {
    grid-template-columns: 1fr;
  }
  .friends-stage-logo {
    text-align: center;
  }
  .slot-hud-v2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .slot-hud-message { order: 3; }
}

/* --- FRIENDS Asset Workshop (admin) --- */
.playground-admin-workshop,
.asset-workshop {
  min-height: 100vh;
  background: #0a0c14;
  color: #e2e8f0;
}

.asset-workshop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  background: linear-gradient(180deg, #121826 0%, #0a0c14 100%);
}

.asset-workshop-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.asset-workshop-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.4rem;
  background: linear-gradient(145deg, #a855f7, #6366f1);
  color: #fff;
}

.asset-workshop-title {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
}

.asset-workshop-subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: #94a3b8;
}

.asset-workshop-body {
  display: grid;
  grid-template-columns: minmax(300px, 34vw) 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;
}

.playground-admin-workshop {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: auto;
  overflow: visible;
}

.playground-admin-workshop .asset-workshop-body {
  flex: 1 0 auto;
  min-height: 0;
  align-items: stretch;
}

.playground-admin-workshop .asset-workshop-preview {
  flex: 1 0 auto;
  min-height: 0;
  overflow: visible;
  padding: 0.5rem 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.playground-admin-workshop .asset-workshop-panel {
  height: auto;
  min-height: calc(100vh - 5.5rem);
}

.playground-admin-workshop .asset-workshop-stage-wrap {
  flex: 0 0 auto;
  min-height: min(72vh, 920px);
  max-width: none;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.playground-admin-workshop .asset-workshop-stage-wrap .game-stage-card {
  flex: 1;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
}

.playground-admin-workshop .asset-workshop-stage-wrap .game-stage-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.playground-admin-workshop .asset-workshop-stage-wrap .game-stage-zoom-wrap {
  flex: 1;
  min-height: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  transition: transform 0.18s ease;
  transform-origin: center center;
}

.playground-admin-workshop .asset-workshop-stage-wrap .game-stage-aspect {
  flex: 1;
  min-height: 0;
  height: 100%;
  width: 100%;
  max-width: none;
  aspect-ratio: auto !important;
}

.playground-admin-workshop .admin-dev-tools,
.playground-admin-workshop .asset-workshop-status,
.playground-admin-workshop .asset-workshop-preview-hint {
  flex-shrink: 0;
}

.playground-admin-workshop .asset-workshop-preview-hint {
  margin-bottom: 0;
}

.asset-workshop-panel {
  border-right: 1px solid rgba(148, 163, 184, 0.15);
  min-height: 0;
  max-height: none;
  height: 100%;
  overflow: auto;
}

.asset-workshop-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0f172a;
  padding: 0.5rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.asset-workshop-panel-section {
  padding: 0.75rem 1rem 1.5rem;
}

.asset-workshop-section-title {
  margin-top: 1.5rem;
}

.asset-workshop-preview {
  padding: 1rem 1.25rem 1.5rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

.asset-workshop-preview-hint {
  margin-bottom: 0.75rem;
}

.asset-workshop--showcase-focus .asset-workshop-body {
  grid-template-columns: minmax(280px, 30vw) 1fr;
}

.asset-workshop--showcase-focus .asset-workshop-preview {
  padding: 0.5rem;
  overflow: hidden;
}

.asset-workshop--showcase-focus .asset-workshop-preview-hint {
  display: none;
}

.asset-workshop--showcase-focus .asset-workshop-stage-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: calc(100vh - 88px);
  height: calc(100vh - 88px);
}

.asset-workshop--showcase-focus .asset-workshop-stage-wrap .game-stage-card {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
}

.asset-workshop--showcase-focus .asset-workshop-stage-wrap .slot-hud-v2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.asset-workshop--showcase-focus .asset-workshop-stage-wrap .slot-hud-left,
.asset-workshop--showcase-focus .asset-workshop-stage-wrap .slot-hud-message,
.asset-workshop--showcase-focus .asset-workshop-stage-wrap .slot-hud-tools {
  display: flex;
}

.asset-workshop-stage-wrap {
  width: 100%;
  max-width: min(1280px, 100%);
  margin: 0 auto;
  flex: 1;
  min-height: min(78vh, 900px);
}

.asset-workshop-stage-wrap .game-stage-card {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: min(72vh, 820px);
}

.asset-workshop-stage-wrap .game-stage-frame,
.asset-workshop-stage-wrap .game-stage-zoom-wrap,
.asset-workshop-stage-wrap .game-stage-aspect {
  height: 100%;
  min-height: 0;
}

.asset-workshop-stage-wrap .buy-bonus-panel,
.asset-workshop-stage-wrap .friends-stage-logo-tagline {
  display: none;
}

.asset-workshop-stage-wrap .slot-hud-left,
.asset-workshop-stage-wrap .slot-hud-message,
.asset-workshop-stage-wrap .slot-hud-tools {
  display: none;
}

.asset-workshop-stage-wrap .slot-hud-v2 {
  display: grid;
  justify-content: center;
}

.asset-workshop-stage-wrap .slot-hud-controls {
  justify-content: center;
}

[data-bonus-awaiting-spin] .slot-hud-spin,
.asset-workshop-stage-wrap .slot-hud-spin--awaiting-bonus {
  animation: slot-spin-await-pulse 1.1s ease-in-out infinite;
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.55), 0 0 18px rgba(255, 215, 0, 0.35);
}

@keyframes slot-spin-await-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

.base-thought-text {
  position: absolute;
  left: 0;
  right: auto;
  bottom: calc(100% + 0.35rem);
  z-index: 6;
  pointer-events: none;
  text-align: left;
  max-width: 11rem;
  font-size: clamp(0.62rem, 1.2vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff8dc;
  text-shadow:
    0 0 8px rgba(255, 235, 150, 0.75),
    0 0 16px rgba(255, 200, 80, 0.35);
  opacity: 0;
}

.buy-bonus-panel {
  position: relative;
}

.slot-bonus-active .base-thought-text {
  display: none !important;
}

.asset-workshop-status {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: #64748b;
}

/* --- Final player view polish --- */
#app.playground--player-view {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.playground--player-view .playground,
.playground--player-view .showcase-shell {
  height: 100%;
  min-height: 0;
  padding: 0;
}

.playground--player-view .showcase-main {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.playground--player-view .game-stage-v2 {
  --stage-top: 11%;
  --stage-center: 72%;
  --stage-bottom: 17%;
}

.playground--player-view .game-stage-frame {
  flex: 1;
  min-height: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
}

.playground--player-view .game-stage-reels {
  border-radius: 12px;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.28);
}

.playground--player-view .game-stage-reels::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.04) 4%,
    rgba(0, 0, 0, 0) 9%,
    rgba(0, 0, 0, 0) 91%,
    rgba(0, 0, 0, 0.04) 96%,
    rgba(0, 0, 0, 0.35) 100%
  );
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.22);
}

.playground--player-view .game-loading-screen {
  z-index: 100;
}

.playground--player-view .showcase-status,
.playground--player-view .status-line,
.playground--player-view .spin-meta,
.playground--player-view .showcase-sound-settings-host {
  display: none !important;
}

.playground--player-view .showcase-center--player {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.35rem 0.75rem 0.5rem;
  max-width: none;
  width: 100%;
}

.playground--player-view .game-stage-card--v2 {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  max-height: none;
  display: flex;
  flex-direction: column;
}

.playground--player-view .game-stage-zoom-wrap {
  flex: 1;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.playground--player-view .game-stage-aspect.game-stage-v2 {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
  height: 100%;
  background: transparent;
}

.playground--player-view .showcase-center {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.bet-picker-popup {
  position: absolute;
  inset: 0;
  z-index: 15;
  place-items: end center;
  padding-bottom: 5.5rem;
}

.bet-picker-popup[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.bet-picker-popup:not([hidden]) {
  display: grid;
  pointer-events: auto;
}

.bet-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 14, 0.55);
}

.bet-picker-panel {
  position: relative;
  z-index: 1;
  width: min(420px, 92%);
  max-height: 50vh;
  overflow: auto;
  border-radius: 14px;
  border: 2px solid rgba(255, 215, 0, 0.4);
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.98), rgba(8, 10, 18, 0.98));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.bet-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.bet-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  padding: 0.65rem;
}

.bet-picker-option {
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  padding: 0.45rem;
  background: rgba(15, 23, 42, 0.8);
  color: #f8fafc;
  font-weight: 700;
  cursor: pointer;
}

.bet-picker-option.is-active,
.bet-picker-option:hover {
  border-color: rgba(255, 215, 0, 0.65);
  background: rgba(168, 85, 247, 0.25);
}

.player-settings-modal-card {
  width: min(480px, 94vw);
}

.player-coming-soon-modal .slot-modal-body {
  text-align: center;
}

.slot-hud-stat--bonus strong {
  color: #fbbf24;
}

@media (max-width: 960px) {
  .asset-workshop-body {
    grid-template-columns: 1fr;
  }
  .asset-workshop-panel {
    max-height: none;
    border-right: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  }
}

/* ===== FRIENDS Player Visual Fix Pass V2 ===== */
.playground--player-view .showcase-mode-badge {
  display: none !important;
}

.game-stage-card:has(.game-stage-bg--photo) .game-stage-v2,
.game-stage-frame--photo .game-stage-v2 {
  background: transparent;
}

.game-stage-card:has(.game-stage-bg--photo) .game-stage-frame,
.game-stage-frame--photo {
  background: linear-gradient(145deg, rgba(17, 24, 39, 0.55) 0%, rgba(5, 5, 8, 0.45) 55%, rgba(26, 16, 48, 0.5) 100%);
}

.playground--player-view .game-stage-frame--photo {
  background: transparent;
}

.game-stage-card:has(.game-stage-bg--photo) .game-stage-aspect,
.game-stage-frame--photo .game-stage-aspect {
  background: transparent;
}

.game-stage-frame--photo .slot-hud-v2 {
  background: linear-gradient(180deg, rgba(8, 10, 18, 0.12), rgba(5, 8, 16, 0.72));
}

.game-stage-bg--photo .game-stage-bg-grid,
.game-stage-bg--photo .game-stage-bg-glow,
.game-stage-bg--photo .game-stage-bg-particles {
  opacity: 0.18;
}

.game-stage-aspect--bonus-photo [data-game-stage-reels]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--stage-bg-photo);
  background-size: cover;
  background-position: center;
  opacity: 0.88;
}

.game-stage-aspect--bonus-photo [data-game-stage-reels] .pixi-root,
.game-stage-aspect--bonus-photo [data-game-stage-reels] .pixi-root canvas {
  position: relative;
  z-index: 1;
}

.playground--player-view [data-game-stage-reels] {
  transform-origin: center center;
  transition: transform 0.18s ease;
}

.game-stage-zoom-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-stage-zoom-wrap[data-zoom-mode='custom'] .game-stage-aspect,
.game-stage-zoom-wrap[data-zoom-mode='fit-width'] .game-stage-aspect,
.game-stage-zoom-wrap[data-zoom-mode='fit-height'] .game-stage-aspect {
  transition: transform 0.18s ease;
}

.stage-zoom-controls {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  z-index: 6;
  display: flex;
  gap: 0.25rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: rgba(8, 10, 18, 0.72);
  border: 1px solid rgba(255, 215, 0, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.stage-zoom-btn {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  color: #f8fafc;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}

.stage-zoom-btn:hover {
  border-color: rgba(255, 215, 0, 0.55);
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.35);
}

.game-stage-v2 .game-stage-top {
  grid-template-columns: 1fr;
  justify-items: center;
}

.game-stage-v2 .friends-stage-logo {
  position: absolute;
  left: 0.65rem;
  top: 0.45rem;
}

.game-stage-v2 .character-meter-host {
  width: min(100%, 640px);
  margin: 0 auto;
  justify-content: center;
}

.character-meter-panel--v2 {
  width: min(100%, 640px);
  margin: 0 auto;
  justify-items: center;
}

.character-meter-panel--v2 .character-meter-letter,
.character-meter-panel--v2 .character-meter-name,
.character-meter-panel--v2 .character-meter-hint,
.character-meter-panel--v2 .character-meter-track-host,
.character-meter-panel--v2 .character-meter-up-badge,
.character-meter-panel--v2 .character-meter-reset-badge {
  display: none !important;
}

.character-meter-silhouette {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 35%, rgba(148, 163, 184, 0.35), transparent 55%),
    linear-gradient(160deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.55),
    0 0 10px rgba(168, 85, 247, 0.25);
}

.character-meter-portrait--v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 130px;
  aspect-ratio: 1;
  min-height: unset;
  padding: 0.25rem;
}

.character-meter-portrait--v2[data-stage='1'] {
  max-width: 138px;
}

.character-meter-portrait--v2[data-stage='2'] {
  max-width: 146px;
}

.character-meter-portrait--v2[data-stage='3'] {
  max-width: 154px;
}

.character-meter-portrait--v2[data-stage='4'] {
  max-width: 162px;
}

.character-meter-portrait--v2[data-stage='5'] {
  max-width: 170px;
}

.character-meter-portrait--v2[data-stage='0'] {
  max-width: 130px;
}

.character-meter-portrait--v2 .character-meter-portrait-image {
  width: 82%;
  height: 82%;
  max-width: 100px;
  max-height: 100px;
  margin: 0;
  object-fit: cover;
}

.character-meter-portrait--v2[data-stage='0'] .character-meter-portrait-image {
  max-width: 100px;
  max-height: 100px;
}

.character-meter-portrait--v2[data-stage='1'] .character-meter-portrait-image {
  max-width: 106px;
  max-height: 106px;
}

.character-meter-portrait--v2[data-stage='2'] .character-meter-portrait-image {
  max-width: 112px;
  max-height: 112px;
}

.character-meter-portrait--v2[data-stage='3'] .character-meter-portrait-image {
  max-width: 118px;
  max-height: 118px;
}

.character-meter-portrait--v2[data-stage='4'] .character-meter-portrait-image {
  max-width: 124px;
  max-height: 124px;
}

.character-meter-portrait--v2[data-stage='5'] .character-meter-portrait-image {
  max-width: 130px;
  max-height: 130px;
}

.reel-zoom-controls {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  z-index: 12;
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: rgba(7, 11, 20, 0.82);
  border: 1px solid rgba(255, 215, 0, 0.25);
}

.reel-zoom-btn {
  min-width: 2rem;
  height: 1.65rem;
  border-radius: 999px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: rgba(15, 23, 42, 0.95);
  color: #fde68a;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

.reel-zoom-btn:hover {
  border-color: rgba(255, 215, 0, 0.55);
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.35);
}

.reel-zoom-controls--admin .reel-zoom-btn.is-active {
  border-color: rgba(255, 215, 0, 0.85);
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.55), rgba(99, 102, 241, 0.45));
  color: #fff;
}

.game-stage-reels {
  transition: transform 0.2s ease;
}

.showcase-sidebar-section {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(168, 85, 247, 0.18);
}

.showcase-sidebar-heading {
  margin: 0 0 0.45rem;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}

.showcase-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.showcase-sidebar-placeholder {
  font-size: 0.72rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px dashed rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}

.showcase-shell--sidebar-collapsed .showcase-sidebar-section,
.showcase-shell--sidebar-collapsed .showcase-sidebar-account {
  display: none;
}

.showcase-sidebar-account {
  margin-top: auto;
  width: 100%;
}

.showcase-balance-plus {
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border-radius: 999px;
  line-height: 1;
  font-weight: 900;
}

.showcase-topbar {
  min-height: 44px;
  max-height: 48px;
}

.showcase-center--player {
  padding-bottom: 6px;
}

.slot-hud-stat--win:not([hidden]) {
  display: grid;
}

.player-account-field {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 0.65rem;
  font-size: 0.78rem;
}

.player-account-field input {
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.85);
  color: #e2e8f0;
  padding: 0.45rem 0.55rem;
}

.player-account-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.slot-hud-icon-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 215, 0, 0.35);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  color: #fde68a;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.slot-hud-icon-btn--text {
  width: auto;
  padding: 0 0.55rem;
  border-radius: 999px;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

.slot-hud-pill {
  border-radius: 999px;
  border: 1px solid rgba(255, 215, 0, 0.35);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.98));
  color: #e2e8f0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
}

.slot-hud-step--gloss {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 215, 0, 0.4);
  background: linear-gradient(180deg, rgba(51, 65, 85, 0.95), rgba(15, 23, 42, 0.98));
  color: #fde68a;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}

.slot-hud-spin--premium {
  border-radius: 999px;
  border: 2px solid rgba(255, 215, 0, 0.75);
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.25), transparent 45%),
    linear-gradient(180deg, #f59e0b 0%, #ea580c 45%, #7c3aed 100%);
  color: #fff7ed;
  box-shadow:
    0 0 18px rgba(234, 88, 12, 0.45),
    0 0 28px rgba(124, 58, 237, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.25);
}

.buy-bonus-panel-btn {
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 14px rgba(168, 85, 247, 0.35);
}

.slot-hud-bet-chip {
  border: 1px solid rgba(255, 215, 0, 0.55);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.slot-hud-v2 {
  background: linear-gradient(180deg, rgba(8, 10, 18, 0.25), rgba(5, 8, 16, 0.88));
}

/* ===== Final Playable Alpha Polish ===== */
.admin-dev-tools {
  margin-top: 0.65rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
  background: rgba(8, 10, 18, 0.72);
}

.admin-dev-tools-summary {
  cursor: pointer;
  padding: 0.55rem 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  list-style: none;
}

.admin-dev-tools-summary::-webkit-details-marker {
  display: none;
}

.admin-dev-tools-summary::before {
  content: '▶ ';
  display: inline-block;
  transition: transform 0.15s ease;
}

.admin-dev-tools[open] .admin-dev-tools-summary::before {
  transform: rotate(90deg);
}

.admin-dev-tools-body {
  padding: 0.65rem 0.75rem 0.85rem;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  max-height: min(52vh, 520px);
  overflow: auto;
}

.admin-dev-section + .admin-dev-section {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px dashed rgba(148, 163, 184, 0.18);
}

.admin-dev-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.admin-dev-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 0.45rem;
}

.admin-dev-spin-meta {
  font-size: 0.72rem;
  color: #cbd5e1;
  margin: 0.35rem 0 0.55rem;
  word-break: break-word;
}

.admin-dev-inspector {
  max-height: 220px;
  overflow: auto;
  font-size: 0.68rem;
}

.bonus-intro-overlay--fullstage {
  position: absolute;
  inset: 0;
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(6px, 1.2vh, 14px);
}

.bonus-intro-overlay--fullstage .bonus-intro-panel {
  max-height: min(94%, 720px);
  overflow: visible;
}

.bonus-intro-overlay--artwork .bonus-intro-panel {
  position: relative;
  width: min(92vw, 1360px);
  height: min(90vh, 900px);
  max-height: 90vh;
  padding: clamp(6px, 0.8vh, 12px) clamp(8px, 1vw, 16px) clamp(8px, 1vh, 14px);
  border: none;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(6px, 0.8vh, 10px);
  overflow: visible;
}

.bonus-intro-overlay--artwork .bonus-intro-image {
  display: block;
  width: auto;
  max-width: min(100%, 1280px);
  max-height: min(82vh, 820px);
  height: auto;
  flex: 1 1 auto;
  margin: 0 auto;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

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

.bonus-intro-start--hotspot {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  align-self: center;
  flex-shrink: 0;
  margin-top: clamp(4px, 0.6vh, 8px);
  min-width: min(52%, 280px);
  padding: 0.85rem 1.75rem;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  letter-spacing: 0.06em;
  z-index: 3;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.95) 0%, rgba(234, 179, 8, 0.92) 100%);
  color: #111827;
  border: 2px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.bonus-scene-overlay--fullstage {
  position: absolute;
  inset: 0;
  z-index: 22;
  overflow: hidden;
}

.playground--player-view .bonus-scene-skip,
.bonus-scene-skip--hidden {
  display: none !important;
}

.playground--player-view .spin-meta,
.playground--player-view .admin-dev-tools,
.playground--player-view [data-spin-meta],
.playground--player-view [data-inspector] {
  display: none !important;
}

.slot-modal[hidden],
.buy-bonus-modal[hidden],
.buy-bonus-confirm-modal[hidden],
.bet-picker-popup[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.comic-bubble-layer {
  z-index: 26;
  pointer-events: none;
}

/* ===== Bonus reels-visible + summary modal (RC polish) ===== */
.bonus-scene-overlay--reels-visible {
  inset: auto 0 0;
  top: auto;
  height: auto;
  min-height: 0;
  pointer-events: none;
  background: none;
}

.bonus-scene-overlay--reels-visible .bonus-scene-dim {
  display: none;
}

.bonus-scene-overlay--reels-visible .bonus-scene-character-portrait {
  display: none;
}

.bonus-scene-overlay--reels-visible .bonus-scene-feature-stage {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 0.25rem);
  top: auto;
  height: auto;
  max-height: 18%;
  padding: 0 0.5rem;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.bonus-scene-overlay--reels-visible .bonus-scene-hud {
  position: relative;
  pointer-events: none;
  padding: 0.45rem 0.75rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(10, 16, 30, 0.55) 0%, rgba(10, 16, 30, 0.96) 28%, rgba(8, 12, 22, 0.98) 100%);
  border-top: 1px solid rgba(255, 215, 0, 0.35);
}

.bonus-scene-overlay--reels-visible .bonus-scene-hud-stats,
.bonus-scene-overlay--reels-visible .bonus-scene-hud-actions,
.bonus-scene-overlay--reels-visible .bonus-scene-continue {
  pointer-events: auto;
}

.bonus-scene-overlay--summary {
  inset: 0;
  pointer-events: none;
}

.bonus-scene-overlay--summary .bonus-scene-dim {
  display: block;
  background: rgba(6, 10, 20, 0.55);
}

.bonus-scene-overlay--summary .bonus-scene-hud {
  pointer-events: auto;
}

.bonus-result-summary--modal {
  position: fixed;
  inset: 0;
  z-index: 13050;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.bonus-result-summary-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 18, 0.55);
  cursor: pointer;
}

.bonus-result-summary-card {
  position: relative;
  z-index: 1;
  width: min(420px, 92%);
  padding: 1rem 1.15rem 1.1rem;
  border-radius: 14px;
  border: 2px solid rgba(255, 215, 0, 0.55);
  background: linear-gradient(180deg, rgba(20, 31, 54, 0.98), rgba(10, 16, 30, 0.98));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  text-align: center;
  pointer-events: auto;
}

.bonus-result-summary--modal .bonus-result-continue {
  margin-top: 0.85rem;
  min-width: 9rem;
  cursor: pointer;
  pointer-events: auto;
}

.pixi-root--showcase canvas {
  background: transparent !important;
}

.slot-hud-spin--premium {
  min-width: 4.6rem;
  min-height: 4.6rem;
}

.slot-hud-message {
  font-size: 0.72rem;
}

/* ===== Living slot idle motion ===== */
/* Living slot idle motion — background breathe on layer, not whole stage grid */
.slot-idle-motion-rich .game-stage-bg {
  animation: slot-bg-breathe 9s ease-in-out infinite;
}

.slot-idle-motion-rich .game-stage-reels {
  box-shadow:
    inset 0 0 24px rgba(168, 85, 247, 0.18),
    inset 0 0 48px rgba(255, 215, 0, 0.08);
  animation: slot-reel-frame-glow 6s ease-in-out infinite;
}

.slot-idle-motion-active .game-stage-reels .pixi-root {
  animation: slot-stage-parallax 22s ease-in-out infinite;
}

.slot-meter-idle-breathe .character-meter-portrait--v2 {
  animation: slot-meter-breathe 5.5s ease-in-out infinite;
}

.slot-meter-idle-breathe .character-meter-portrait--v2:nth-child(2) {
  animation-delay: -1.2s;
}

.slot-meter-idle-breathe .character-meter-portrait--v2:nth-child(3) {
  animation-delay: -2.4s;
}

.slot-meter-idle-breathe .character-meter-portrait--v2:nth-child(4) {
  animation-delay: -3.6s;
}

.slot-spin-idle-pulse.slot-hud-spin--premium {
  animation: slot-spin-pulse 2.4s ease-in-out infinite;
}

.slot-reduced-motion.game-stage-v2,
.slot-reduced-motion .game-stage-reels,
.slot-reduced-motion .game-stage-reels .pixi-root,
.slot-reduced-motion .character-meter-portrait--v2,
.slot-reduced-motion .slot-hud-spin--premium,
.slot-reduced-motion .game-stage-frame,
.slot-reduced-motion .friends-stage-logo-title,
.slot-reduced-motion .friends-stage-logo-tagline {
  animation: none !important;
}

@keyframes slot-bg-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}

@keyframes slot-reel-frame-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

@keyframes slot-stage-parallax {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(2px, -2px, 0); }
}

@keyframes slot-meter-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.02); }
}

@keyframes slot-spin-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(168, 85, 247, 0.35); transform: scale(1); }
  50% { box-shadow: 0 0 22px rgba(255, 215, 0, 0.55); transform: scale(1.04); }
}

/* Living slot V2 — background, frame, logo, meter stage glow */
.slot-idle-motion-active.playground--player-view .game-stage-bg-grid {
  animation: showcase-grid-drift 24s linear infinite;
}

.slot-idle-motion-active.playground--player-view .game-stage-bg-glow {
  animation: showcase-glow-pulse 6s ease-in-out infinite;
}

.slot-idle-motion-active.playground--player-view .game-stage-bg-particles {
  animation: showcase-particles 18s linear infinite;
}

.slot-idle-motion-active .friends-stage-logo-title {
  animation: slot-neon-flicker 5.2s ease-in-out infinite;
}

.slot-idle-motion-active .friends-stage-logo-tagline {
  animation: slot-neon-flicker-soft 6.8s ease-in-out infinite;
}

.slot-idle-motion-rich .game-stage-frame {
  animation: slot-frame-border-pulse 7s ease-in-out infinite;
}

.slot-idle-motion-active .game-stage-frame::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 18px;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.14) 48%,
    transparent 58%
  );
  opacity: 0;
  animation: slot-frame-reflection-sweep 11s ease-in-out infinite;
}

.slot-idle-motion-active .game-stage-reels::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: 6;
  border-radius: 12px;
  pointer-events: none;
  border: 1px solid transparent;
  background:
    linear-gradient(90deg, rgba(168, 85, 247, 0.85), rgba(255, 215, 0, 0.9), rgba(168, 85, 247, 0.85))
    border-box;
  mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.35;
  animation: slot-reel-frame-lights 3.5s linear infinite;
}

.slot-idle-motion-active .game-stage-side-decor::after {
  content: '';
  position: absolute;
  bottom: 8%;
  left: 10%;
  width: 35%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%, rgba(168, 85, 247, 0.22), transparent 72%);
  filter: blur(8px);
  opacity: 0.45;
  animation: slot-ambient-steam 7s ease-in-out infinite;
  pointer-events: none;
}

.slot-meter-idle-breathe [data-stage='2'] .character-meter-portrait--v2 {
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.35));
}

.slot-meter-idle-breathe [data-stage='3'] .character-meter-portrait--v2 {
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.45));
}

.slot-meter-idle-breathe [data-stage='4'] .character-meter-portrait--v2,
.slot-meter-idle-breathe [data-stage='5'] .character-meter-portrait--v2 {
  filter: drop-shadow(0 0 14px rgba(244, 114, 182, 0.55));
}

.slot-spin-idle-pulse.slot-hud-spin--premium:hover:not(:disabled) {
  animation: none;
  box-shadow:
    0 0 20px rgba(168, 85, 247, 0.65),
    0 0 28px rgba(255, 215, 0, 0.45);
  transform: scale(1.06);
}

.slot-hud-spin--premium:active:not(:disabled) {
  transform: scale(0.94);
  transition: transform 0.08s ease;
}

.slot-idle-motion-paused .game-stage-bg,
.slot-idle-motion-paused .game-stage-bg-grid,
.slot-idle-motion-paused .game-stage-bg-glow,
.slot-idle-motion-paused .game-stage-bg-particles,
.slot-idle-motion-paused .friends-stage-logo-title,
.slot-idle-motion-paused .friends-stage-logo-tagline,
.slot-idle-motion-paused .game-stage-frame,
.slot-idle-motion-paused .game-stage-frame::before,
.slot-idle-motion-paused .game-stage-reels::before,
.slot-idle-motion-paused .game-stage-side-decor::after {
  animation-play-state: paused !important;
}

.slot-reduced-motion .game-stage-bg,
.slot-reduced-motion .game-stage-bg-particles,
.slot-reduced-motion .game-stage-side-decor::after,
.slot-reduced-motion .game-stage-frame::before,
.slot-reduced-motion .game-stage-reels::before {
  display: none !important;
}

.slot-reduced-motion.game-stage-v2 {
  animation: none !important;
}

.slot-reduced-motion .game-stage-reels .pixi-root {
  animation: none !important;
}

.slot-reduced-motion .character-meter-portrait--v2 {
  animation: none !important;
  filter: none !important;
}

.slot-reduced-motion .camera-director-host.camera-breathing {
  animation: none !important;
}

@keyframes slot-neon-flicker {
  0%, 100% { filter: brightness(1); text-shadow: 0 0 12px rgba(168, 85, 247, 0.45); }
  48% { filter: brightness(1.08); text-shadow: 0 0 16px rgba(255, 215, 0, 0.55); }
  50% { filter: brightness(0.92); text-shadow: 0 0 8px rgba(168, 85, 247, 0.3); }
  52% { filter: brightness(1.1); text-shadow: 0 0 18px rgba(244, 114, 182, 0.5); }
}

@keyframes slot-neon-flicker-soft {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

@keyframes slot-frame-border-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(255, 215, 0, 0.55),
      0 0 28px rgba(168, 85, 247, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(255, 215, 0, 0.75),
      0 0 36px rgba(168, 85, 247, 0.62),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
}

@keyframes slot-frame-reflection-sweep {
  0%, 72% { opacity: 0; transform: translateX(-120%); }
  82% { opacity: 0.85; }
  100% { opacity: 0; transform: translateX(120%); }
}

@keyframes slot-reel-frame-lights {
  0% { opacity: 0.2; filter: hue-rotate(0deg); }
  50% { opacity: 0.5; filter: hue-rotate(25deg); }
  100% { opacity: 0.2; filter: hue-rotate(0deg); }
}

@keyframes slot-ambient-steam {
  0%, 100% { opacity: 0.25; transform: translateY(0) scale(1); }
  50% { opacity: 0.55; transform: translateY(-6px) scale(1.06); }
}

/* ===== Buy bonus confirmation ===== */
.buy-bonus-confirm-modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  place-items: center;
}

.buy-bonus-confirm-modal:not([hidden]) {
  display: grid;
  pointer-events: auto;
}

.buy-bonus-confirm-card {
  position: relative;
  z-index: 1;
  max-width: 420px;
  width: min(420px, 92%);
  border: 1px solid rgba(255, 215, 0, 0.45);
  box-shadow: 0 0 32px rgba(168, 85, 247, 0.35);
}

.buy-bonus-confirm-name {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 0.75rem;
  color: #fde68a;
}

.buy-bonus-confirm-stats {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 1rem;
}

.buy-bonus-confirm-stats div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.buy-bonus-confirm-stats dt {
  color: #94a3b8;
  font-size: 0.85rem;
}

.buy-bonus-confirm-stats dd {
  margin: 0;
  font-weight: 700;
  color: #f8fafc;
}

.buy-bonus-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.buy-bonus-confirm-yes {
  font-weight: 800;
  letter-spacing: 0.04em;
}

.playground--player-view .game-stage-card--v2 {
  flex: 1;
  min-height: 0;
  max-height: none;
}

.playground--player-view .showcase-center {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.playground--player-view .pixi-root.pixi-root--showcase,
.playground--player-view #friends-pixi-root {
  min-height: 0 !important;
  max-height: none !important;
  margin-bottom: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* ===== V3 player bonus + admin login polish ===== */
.playground--player-view.slot-bonus-active [data-character-meter-host]:not(:has(.viking-cm-scale)),
.playground--player-view.slot-bonus-active [data-friends-logo],
.slot-bonus-active [data-character-meter-host]:not(:has(.viking-cm-scale)),
.character-meter-panel--hidden {
  visibility: hidden;
  pointer-events: none;
}

.character-meter-panel--hidden {
  display: none !important;
}

.bonus-scene-overlay--player .bonus-scene-top-bar {
  position: absolute;
  top: 0.05rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  pointer-events: none;
}

.bonus-scene-spins-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.bonus-scene-spin-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.bonus-scene-spin-counter-label,
.bonus-scene-spins-left-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: rgba(255, 215, 0, 0.92);
}

.bonus-scene-spin-counter-value,
.bonus-scene-spins-left-value {
  font-size: 2rem;
  line-height: 1;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
  margin-top: -0.12rem;
}

.playground--player-view.slot-bonus-active .slot-hud-spin-label {
  display: none !important;
}

[data-presentation-owner='viking'] .bonus-scene-top-bar .bonus-scene-spin-counter {
  display: none !important;
}

[data-presentation-owner='viking'] .bonus-scene-top-bar .bonus-scene-top-meta {
  display: flex !important;
}

.viking-spin-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
  margin-bottom: 0.25rem;
}

.viking-spin-counter-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: rgba(255, 215, 0, 0.92);
}

.viking-spin-counter-value {
  font-size: 1.85rem;
  line-height: 1;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

.viking-progress-tier-row {
  display: none !important;
}

.viking-cm-scale-label-row {
  position: relative;
  height: 1.1rem;
  margin-top: 0.28rem;
}

.viking-cm-scale-segment-label {
  position: absolute;
  transform: translateX(0);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(255, 235, 180, 0.82);
  white-space: nowrap;
}

.viking-cm-scale-segment-label--reached {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.55);
}

.viking-cm-scale-segment-label--flash {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

.viking-cm-segment-tick {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 12px;
  margin-left: -1.5px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(255, 215, 0, 0.55);
  box-shadow: 0 0 4px rgba(255, 215, 0, 0.35);
}

.viking-cm-segment-tick:first-child,
.viking-cm-segment-tick:last-child {
  width: 4px;
  height: 14px;
  margin-left: -2px;
  background: rgba(255, 215, 0, 0.85);
}

.viking-cm-segment-tick--reached {
  background: #ffd700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.75);
}

.viking-progress-marker-label {
  display: none !important;
}

.viking-progress-tier-chip {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: rgba(255, 235, 200, 0.72);
  white-space: nowrap;
}

.viking-progress-tier-chip--reached {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.55);
}

.bonus-scene-top-meta {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}

.playground--player-view .bonus-scene-overlay--player.bonus-scene-overlay--reels-visible .bonus-scene-hud {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(8, 10, 16, 0.88) 40%, rgba(8, 10, 16, 0.96) 100%);
  border-top: 1px solid rgba(255, 215, 0, 0.28);
}

.playground--player-view .bonus-scene-hud-head--compact .bonus-scene-title {
  font-size: 0.95rem;
  margin: 0;
}

.playground--player-view .bonus-scene-hud-stats--player {
  font-size: 0.92rem;
  gap: 0.5rem 1rem;
}

.playground--player-view .bonus-scene-hud-stats--player .bonus-scene-spin-label,
.playground--player-view .bonus-scene-hud-stats--player .bonus-scene-remaining {
  display: none !important;
}

.game-loading-content:empty {
  display: none;
}

.slot-hud-spin--busy {
  filter: brightness(1.08);
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.45);
}

.slot-hud-spin--unavailable-flash {
  background: rgba(220, 38, 38, 0.88) !important;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.95) !important;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.admin-login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 20%, #1a1030 0%, #080810 70%);
}

.admin-login-card {
  width: min(360px, 92vw);
  padding: 1.5rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 215, 0, 0.35);
  background: rgba(12, 16, 28, 0.94);
  display: grid;
  gap: 0.75rem;
}

.admin-login-card label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.85rem;
}

.admin-login-error {
  color: #f87171;
  font-size: 0.85rem;
}

.playground--admin-login {
  padding: 0;
}

/* ===== Bonus Visual Truth V4 ===== */
.viking-cm-scale {
  width: min(100%, 720px);
  margin: 0 auto;
  padding: 0.35rem 0.5rem 0.5rem;
  pointer-events: none;
}

.viking-cm-scale-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.viking-cm-scale-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255, 215, 0, 0.88);
}

.viking-cm-scale-value {
  font-size: 0.95rem;
  font-weight: 900;
  color: #fff;
}

.viking-cm-scale-track {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.35);
  overflow: visible;
}

.viking-cm-scale-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #c0392b 0%, #e74c3c 45%, #ffd700 100%);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.45);
  transition: width 0.4s ease;
}

.viking-progress-scale--pulse .viking-cm-scale-fill {
  filter: brightness(1.15);
}

.viking-progress-marker-label {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(255, 235, 180, 0.9);
  white-space: nowrap;
}

.viking-progress-marker--flash .viking-progress-marker-label {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

.viking-progress-toast--flash {
  animation: viking-milestone-flash 0.6s ease-in-out 2;
}

@keyframes viking-milestone-flash {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
  50% { box-shadow: 0 0 24px rgba(255, 215, 0, 0.65); }
}

.viking-cm-scale-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.viking-cm-scale-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.viking-cm-scale-marker-line {
  display: block;
  width: 2px;
  height: 18px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.55);
}

.viking-cm-scale-marker-label {
  display: none !important;
  margin-top: 2px;
  font-size: 0.58rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  transform: translateX(-50%);
}

.viking-cm-scale-marker--reached .viking-cm-scale-marker-line {
  background: #ffd700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.65);
}

.viking-cm-scale-marker--reached .viking-cm-scale-marker-label {
  color: #ffd700;
}

.viking-cm-scale-toast {
  margin-top: 0.45rem;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 215, 0, 0.45);
  background: rgba(8, 12, 24, 0.92);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  white-space: pre-line;
}

.bonus-scene-hud-head--title-hidden .bonus-scene-title,
.bonus-scene-hud-head--title-hidden .bonus-scene-subtitle {
  display: none !important;
}

.playground--player-view .bonus-scene-overlay--player.bonus-scene-overlay--reels-visible .bonus-scene-hud {
  padding-top: 0.35rem;
}

.playground--player-view .bonus-scene-overlay--player .bonus-scene-hud-stats--player {
  justify-content: center;
  flex-wrap: wrap;
}

.slot-bonus-active .viking-cm-scale {
  visibility: visible !important;
  pointer-events: none;
  position: relative;
  z-index: 6;
}

.playground--player-view.slot-bonus-active .viking-progress-scale-head {
  display: none;
}

.slot-bonus-active [data-character-meter-host]:has(.viking-cm-scale) {
  visibility: visible !important;
  pointer-events: none;
  position: relative;
  z-index: 12;
  min-height: clamp(72px, 12vh, 120px);
}

.slot-bonus-active .game-stage-top:has(.viking-cm-scale) {
  z-index: 14;
  visibility: visible !important;
  pointer-events: none;
}

.viking-progress-scale,
.viking-cm-scale {
  width: min(100%, 920px);
  margin: 0 auto;
}

/* ===== RC2 commercial bonus HUD + summary ===== */
.bonus-scene-hud-stats--commercial {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem 0.75rem;
  width: min(100%, 640px);
  margin: 0 auto;
  padding: 0.35rem 0.5rem 0.45rem;
}

.playground--player-view .bonus-scene-overlay--player.bonus-scene-overlay--reels-visible .bonus-scene-hud {
  max-height: min(22vh, 7.5rem);
  overflow: hidden;
}

.playground--player-view .bonus-scene-overlay--player .bonus-scene-hud-stats--commercial {
  grid-template-columns: repeat(3, minmax(4.5rem, 1fr));
}

.playground--player-view .bonus-hud-stat-label {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.playground--player-view .bonus-hud-stat-value {
  font-size: 0.95rem;
}

.bonus-hud-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.bonus-hud-stat-label {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  font-weight: 800;
  color: rgba(255, 215, 0, 0.88);
}

.bonus-hud-stat-value {
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.bonus-hud-stat--total .bonus-hud-stat-value {
  color: #ffd700;
}

.bonus-scene-progression-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.45rem;
  max-width: min(96vw, 680px);
  text-align: center;
}

.bonus-progress-chip {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
}

.bonus-progress-chip--active {
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.55);
  background: rgba(255, 215, 0, 0.12);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
}

.bonus-progress-chip--current {
  color: #fff;
  border-color: rgba(255, 215, 0, 0.85);
  background: rgba(255, 215, 0, 0.22);
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.55);
  transform: scale(1.06);
}

.bonus-progress-stage-label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 215, 0, 0.92);
}

.bonus-progress-next {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.78);
}

.bonus-result-summary--commercial {
  align-items: flex-start;
  padding-top: clamp(8vh, 12%, 18vh);
}

.bonus-result-summary--commercial .bonus-result-summary-card {
  width: min(460px, 92%);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.55),
    0 0 32px rgba(255, 215, 0, 0.18);
}

.bonus-result-summary-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bonus-result-summary-glow {
  position: absolute;
  top: 18%;
  left: 50%;
  width: min(70vw, 420px);
  height: min(40vw, 240px);
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 215, 0, 0.22) 0%, rgba(255, 215, 0, 0) 70%);
}

.bonus-result-summary-coins {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 24%, rgba(255, 215, 0, 0.14) 0 2px, transparent 3px),
    radial-gradient(circle at 44% 18%, rgba(255, 215, 0, 0.12) 0 1px, transparent 2px);
  opacity: 0.85;
}

.bonus-scene-overlay--player .bonus-scene-dim--light {
  display: none !important;
}

.ujn-puppet--dimmed {
  opacity: 0.38;
  filter: grayscale(0.45) brightness(0.72);
}

.ujn-puppet--highlighted {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.45));
}

/* ===== Site release label (deploy marker) ===== */
.site-release-label {
  position: fixed;
  left: 50%;
  bottom: 0.45rem;
  transform: translateX(-50%);
  z-index: 50000;
  margin: 0;
  padding: 0.15rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: none;
  color: rgba(226, 232, 240, 0.82);
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.playground--player-view .site-release-label {
  font-family: ui-sans-serif, system-ui, sans-serif;
}

@media (max-width: 720px) {
  .playground--player-view .site-release-label {
    bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
    font-size: 0.58rem;
  }
}