.gd-play-ui {
  --gd-player-bg: #090b12;
}

.gd-play-ui .gd-arcade-dock {
  margin-block: 32px 40px;
  padding: 24px;
  border: 1px solid var(--gd-line);
  border-radius: var(--gd-radius-card);
  background: var(--gd-surface);
  scroll-margin-top: 100px;
}

.gd-play-ui .gd-dock-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 24px;
  align-items: start;
}

.gd-play-ui .gd-dock-progress {
  min-width: 0;
}

.gd-play-ui .gd-dock-progress .gd-section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
}

.gd-play-ui .gd-section-head .gd-dock-balance {
  margin: 0;
  color: var(--gd-gold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.gd-play-ui .hud {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.gd-play-ui .hud .hud-gems,
.gd-play-ui .hud .hud-locked,
.gd-play-ui .hud .hud-unlocked,
.gd-play-ui .hud .hud-toggle,
.gd-play-ui .hud .hud-label small {
  position: static;
  width: auto;
  min-width: 64px;
  margin: 0;
  border: 0;
  border-radius: var(--gd-radius-control);
  background: var(--gd-accent-soft);
  color: var(--gd-ink);
}

.gd-play-ui .hud .hud-label small {
  background: none;
}

.gd-play-ui .hud .row {
  margin: 0;
}

.gd-play-ui .hud .emoji {
  font-size: 1rem;
  box-shadow: none !important;
}

.gd-play-ui .hud h4,
.gd-play-ui .hud h5 {
  font: 750 1rem/1.5 var(--gd-font);
}

.gd-play-ui .hud-gems::after,
.gd-play-ui .hud-locked::after,
.gd-play-ui .hud-unlocked::after {
  display: block;
  text-align: center;
  padding: 0 8px 8px;
  color: var(--gd-muted);
  font: 500 .75rem/1.5 var(--gd-font);
}

.gd-play-ui .hud-gems::after { content: "Hidden gems"; }
.gd-play-ui .hud-locked::after { content: "Locked"; }
.gd-play-ui .hud-unlocked::after { content: "Unlocked"; }

.gd-play-ui .hud .switch {
  display: block;
}

.gd-play-ui .hud .switch:focus-within {
  outline: 3px solid var(--gd-focus);
  outline-offset: 4px;
}

.gd-play-ui .hud input:checked + .slider {
  background: var(--gd-accent);
}

.gd-play-ui .gd-hud-media {
  min-width: 0;
}

.gd-play-ui .gd-hud-media .hud-mini-player {
  display: block;
}

.gd-play-ui .gd-hud-media .hud-widget {
  display: flex;
}

/* The existing engine owns visibility and playback; only its layout is docked. */
.gd-play-ui .hud-mini-player,
.gd-play-ui .hud-widget {
  position: static !important;
  inset: auto !important;
  width: 100%;
  max-width: 100%;
  margin: 0 0 12px;
  z-index: auto;
}

.gd-play-ui .hud-widget {
  width: 48px;
  border: 1px solid var(--gd-secondary-line);
  background: var(--gd-accent-soft);
  color: var(--gd-accent);
  box-shadow: none;
}

.gd-play-ui .hud-shell,
.gd-play-ui .hud-header,
.gd-play-ui .hud-subbar,
.gd-play-ui .hud-controls {
  background: var(--gd-bg);
  color: var(--gd-ink);
  border-color: var(--gd-line);
}

.gd-play-ui .hud-btn,
.gd-play-ui .hud-select,
.gd-play-ui .hud-collapse {
  color: var(--gd-ink);
  background: var(--gd-accent-soft);
  border-color: var(--gd-secondary-line);
  min-height: 44px;
}

.gd-play-ui .modal .modal-content {
  background: var(--gd-surface) !important;
  color: var(--gd-ink);
  border: 1px solid var(--gd-line);
  border-radius: var(--gd-radius-card);
  box-shadow: var(--gd-shadow);
}

.gd-play-ui .modal-dialog {
  max-width: 620px;
}

.gd-play-ui .modal-body {
  padding: 24px;
}

.gd-play-ui .modal-footer {
  gap: 12px;
  border-color: var(--gd-line);
  padding: 20px 24px;
  flex-wrap: wrap;
}

.gd-play-ui .modal h3 {
  font: 750 clamp(1.25rem, 3vw, 1.75rem)/1.3 var(--gd-font);
  overflow-wrap: anywhere;
}

.gd-play-ui .modal p {
  color: var(--gd-muted);
}

.gd-play-ui #unlockModalImg,
.gd-play-ui #cantUnlockModalImg {
  width: 100% !important;
  max-width: 280px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--gd-radius-control) !important;
}

.gd-play-ui .modal .col-4,
.gd-play-ui .modal .col-8 {
  flex: 0 0 100%;
  max-width: 100%;
}

.gd-play-ui .modal .text-warning {
  color: var(--gd-gold) !important;
}

.gd-play-ui .modal .btn,
.gd-play-ui .gd-reward-notices .btn,
.gd-play-ui .gamify-popover .prize-link,
.gd-play-ui #fullscreen {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--gd-secondary-line);
  border-radius: var(--gd-radius-control) !important;
  background: var(--gd-accent-soft);
  color: var(--gd-accent);
  font: 700 1rem/1.5 var(--gd-font);
}

.gd-play-ui #fullscreen {
  letter-spacing: normal;
  text-transform: none;
}

.gd-play-ui .modal .btn-primary,
.gd-play-ui .gd-reward-notices .btn-primary,
.gd-play-ui #fullscreen {
  background: var(--gd-accent);
  color: var(--gd-button-ink);
}

.gd-play-ui .gd-reward-notices .modal-strip {
  position: static;
  display: none;
  transform: none;
  transition: none;
  width: 100%;
  margin: 16px 0 0;
  padding: 20px;
  border: 1px solid var(--gd-secondary-line);
  border-radius: var(--gd-radius-card);
  background: var(--gd-accent-soft);
  color: var(--gd-ink);
}

.gd-play-ui .gd-reward-notices .modal-active {
  display: block;
}

.gd-play-ui .gd-reward-notices .container {
  padding: 0;
}

.gd-play-ui .gd-reward-notices .one-minute-text {
  display: block;
  margin: 0 0 12px !important;
}

.gd-play-ui .gd-reward-notices .btn {
  margin: 4px;
}

.gd-play-ui .gamify-popover {
  height: auto;
  min-height: 0;
  z-index: auto;
  background: var(--gd-bg) !important;
  border-radius: var(--gd-radius-card);
  color: var(--gd-ink);
  margin-top: 16px;
  padding: 16px;
}

.gd-play-ui .gamify-popover .gamify-popover {
  margin: 0;
  padding: 0;
}

.gd-play-ui .gamify-popover .container {
  width: 100%;
  padding: 0;
}

.gd-play-ui .gamify-popover .game-pop-inner-container {
  margin: 0 !important;
  min-width: 0;
}

.gd-play-ui .gamify-popover h1 {
  font: 800 clamp(1.5rem, 4vw, 2rem)/1.3 var(--gd-font) !important;
}

.gd-play-ui .gamify-popover h2,
.gd-play-ui .gamify-popover h4 {
  font: 700 1.25rem/1.5 var(--gd-font);
}

.gd-play-ui .gamify-popover .surprise,
.gd-play-ui .gamify-popover .text-white {
  color: var(--gd-ink) !important;
}

.gd-play-ui .bg-text-surprise {
  background: var(--gd-accent-soft);
  border-radius: var(--gd-radius-card);
}

.gd-play-ui .gamify-popover .prize-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  max-width: 100%;
}

.gd-play-ui .gamify-popover .prize-link img {
  max-height: 120px;
  object-fit: contain;
}

.gd-play-ui #check-in .gamify-popover .col-2 {
  padding-inline: 4px;
}

.gd-play-ui .gd-rewards-jump {
  color: var(--gd-gold) !important;
}

.gd-player {
  background: var(--gd-bg) !important;
}

.gd-player .feature-section {
  width: min(var(--gd-content-width), calc(100% - 40px));
  max-width: none;
  padding: 0;
  background: none;
}

.gd-player .gd-player-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block: 24px;
}

.gd-player .gd-player-breadcrumbs a {
  padding: 8px 0;
  color: var(--gd-accent);
}

.gd-player .feature-section .cartoon-title {
  font: 800 clamp(1.75rem, 4vw, 2.75rem)/1.2 var(--gd-font) !important;
  letter-spacing: -.035em;
  text-shadow: none;
  color: var(--gd-ink);
  overflow-wrap: anywhere;
}

.gd-player .feature-section h5.text-muted {
  color: var(--gd-muted) !important;
  font: 400 1rem/1.6 var(--gd-font);
}

.gd-player .gd-player-device {
  color: var(--gd-muted);
  font: 400 .875rem/1.5 var(--gd-font);
}

.gd-player .feature-section .popular-text {
  margin: 12px auto !important;
  border-radius: var(--gd-radius-control);
  padding: 4px 12px;
  background: var(--gd-gold-surface);
  color: var(--gd-gold);
  font: 700 .875rem/1.5 var(--gd-font);
  box-shadow: none;
}

.gd-player #game-container {
  max-width: none;
  padding: 16px;
  border: 1px solid var(--gd-line);
  border-radius: var(--gd-radius-card);
  background: var(--gd-player-bg);
}

.gd-player #game-container iframe {
  padding: 0 !important;
  border: 0;
  background: var(--gd-player-bg);
}

.gd-player #game-container .text-center {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.gd-player .gd-related {
  margin-block: 40px;
}

.gd-player #category {
  color: var(--gd-ink) !important;
  text-shadow: none !important;
}

.gd-player #all-games {
  display: grid !important;
}

.gd-player #all-games .game > .p-3 {
  background: none !important;
  border-radius: var(--gd-radius-card) var(--gd-radius-card) 0 0 !important;
}

.gd-player .error {
  color: var(--gd-gold);
}

@media (max-width: 1024px) {
  .gd-play-ui .gd-dock-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .gd-play-ui .gd-arcade-dock {
    padding: 16px;
  }
  .gd-play-ui .modal-footer > .mr-auto {
    width: 100%;
  }
  .gd-play-ui .gamify-popover [class*="col-"]:not(.col-2):not(.col-3) {
    max-width: 100%;
    flex-basis: 100%;
  }
  .gd-player .feature-section {
    width: calc(100% - 28px);
  }
  .gd-player #game-container {
    padding: 8px;
  }
}