/* Game Theme only. Palette: COMMON/roomplay-palettes.html / melody.
   bg #45218A, surface #2A1758 (white text), accent #A677EF (lavender, ink #17191F on it), secondary #EDC945 (small gold details).
   Lavender text on the page uses the #C9B8F0 tint (6.3:1); success/error stay stock and sit on the darker surface. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / melody (correct, wrong, male, female). */
  --rp-correct: #30c883;
  --rp-correct-ink: #17191f;
  --rp-wrong: #fe7b90;
  --rp-wrong-ink: #17191f;
  --rp-male: #63b0fc;
  --rp-female: #f77cb0;
  --bg-primary: #45218a;
  --bg-secondary: #2a1758;
  --bg-card: #2a1758;
  --text-primary: #ffffff;
  --text-secondary: #d9ccf5;
  --text-placeholder: #a996d6;
  --accent-purple: #a677ef;
  --accent-purple-dark: #a677ef;
  --accent-blue: #a677ef;
  --accent-pink: #a677ef;
  --accent-pink-dark: #a677ef;
  --accent-coral: #edc945;
  --mel-surface: #2a1758;
  --mel-accent: #a677ef;
  --mel-accent-text: #c9b8f0;
  --mel-gold: #edc945;
  --mel-ink: #17191f;
  --settings-accent: #a677ef;
  --settings-accent-dark: #a677ef;
  --onboarding-accent: #a677ef;
  --onboarding-accent-dark: #a677ef;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --packs-accent: #a677ef;
  --packs-feedback-rgb: 166, 119, 239;
  --ps-accent: #a677ef;
  --rp-countdown-accent: #a677ef;
  --rp-countdown-accent-ink: #17191f;
}
html, body[data-rp-game="melody"], .page-loader { background: var(--bg-primary); }
[data-rp-game="melody"] .loader-spinner { border-color: rgba(255, 255, 255, .18); border-top-color: var(--mel-accent); }

/* Actions: lavender primary with ink text, lavender outline secondary. */
[data-rp-game="melody"] .btn-play,
[data-rp-game="melody"] .btn-next-slide,
[data-rp-game="melody"] .btn-join.active { color: var(--mel-ink); background: var(--mel-accent); border-color: transparent; box-shadow: none; }
[data-rp-game="melody"] .btn-play:hover { box-shadow: none; }
[data-rp-game="melody"] .btn-play:disabled { color: var(--text-secondary); background: rgba(255, 255, 255, .12); opacity: 1; }
[data-rp-game="melody"] .btn-join,
[data-rp-game="melody"] .btn-play.outlined { color: #fff; border-color: var(--mel-accent); background: transparent; }
[data-rp-game="melody"] .btn-skip { color: var(--text-secondary); border-color: var(--text-secondary); }
[data-rp-game="melody"] .btn-additional-settings { color: #fff; border-color: var(--mel-accent); }
[data-rp-game="melody"] .btn-copy { color: var(--text-secondary); background: var(--mel-surface); border-color: rgba(255, 255, 255, .16); }
[data-rp-game="melody"] .dot { background: rgba(255, 255, 255, .3); }
[data-rp-game="melody"] .dot.active { background: var(--mel-accent); }
[data-rp-game="melody"] .input:focus { border-color: var(--mel-accent); }

/* Packs (illustrated grid): art untouched, frame and footer in the palette. */
[data-rp-game="melody"] #melody-packs-grid { --packs-accent: #a677ef !important; --packs-feedback-rgb: 166, 119, 239 !important; }
[data-rp-game="melody"] .packs-illustrated-grid .pack-card { border-color: rgba(217, 204, 245, .45); box-shadow: 0 10px 24px rgba(20, 8, 48, .35); }
[data-rp-game="melody"] .packs-illustrated-grid .pack-card.selected { border-color: var(--mel-accent); }
/* Flat blob-scene covers: fade into the melody purple instead of the shared near-black shade. */
[data-rp-game="melody"] .packs-illustrated-grid .pack-card--flat-art .pack-art-shade { background: linear-gradient(180deg, rgba(69, 33, 138, 0) 50%, rgba(42, 23, 88, .88) 100%); }
[data-rp-game="melody"] .packs-illustrated-actions { background: linear-gradient(180deg, rgba(69, 33, 138, 0) 0%, var(--bg-primary) 14px); }
[data-rp-game="melody"] .packs-summary { background: var(--mel-surface); }
[data-rp-game="melody"] .summary-text { color: var(--text-secondary); }
[data-rp-game="melody"] .summary-text strong { color: var(--mel-gold); }

/* Lobby. */
[data-rp-game="melody"] .room-code-display { color: var(--mel-gold); background: var(--mel-surface); }
[data-rp-game="melody"] .player-item { background: var(--mel-surface); }
[data-rp-game="melody"] .player-avatar { color: var(--mel-ink); background: var(--mel-accent); }
[data-rp-game="melody"] .player-avatar.has-photo { background: none; }
[data-rp-game="melody"] .player-host { color: var(--mel-accent-text); }
[data-rp-game="melody"] .lobby-hint,
[data-rp-game="melody"] .lobby-status { color: var(--text-secondary); }

/* Round: badges, record player, answer options. Album covers and the record art are not recoloured. */
[data-rp-game="melody"] .round-badge { color: var(--text-secondary); background: var(--mel-surface); }
[data-rp-game="melody"] .timer-badge { color: var(--mel-ink); background: var(--mel-accent); }
[data-rp-game="melody"] .timer-badge.warning { color: var(--mel-ink); background: var(--error); }
[data-rp-game="melody"] .vinyl-base { box-shadow: 0 0 0 6px rgba(166, 119, 239, .28); }
[data-rp-game="melody"] .audio-player-bar { background: var(--mel-surface); }
[data-rp-game="melody"] .audio-progress-bar { background: rgba(255, 255, 255, .16); }
[data-rp-game="melody"] .audio-progress-fill { background: linear-gradient(90deg, var(--mel-accent), var(--mel-gold)); }
[data-rp-game="melody"] .quiz-option { color: #fff; background: var(--mel-surface); }
[data-rp-game="melody"] .option-letter { color: var(--mel-ink); background: var(--mel-accent); }
[data-rp-game="melody"] .quiz-option.selected { border-color: var(--mel-gold); background: var(--mel-surface); }
[data-rp-game="melody"] .quiz-option.selected .option-letter { background: var(--mel-gold); }
[data-rp-game="melody"] .quiz-option.correct { border-color: var(--rp-correct); background: linear-gradient(color-mix(in srgb, var(--rp-correct) 14%, transparent), color-mix(in srgb, var(--rp-correct) 14%, transparent)), var(--mel-surface); }
[data-rp-game="melody"] .quiz-option.wrong { border-color: var(--rp-wrong); background: linear-gradient(color-mix(in srgb, var(--rp-wrong) 12%, transparent), color-mix(in srgb, var(--rp-wrong) 12%, transparent)), var(--mel-surface); }
[data-rp-game="melody"] .quiz-option.correct .option-letter { color: var(--mel-ink); background: var(--rp-correct); }
[data-rp-game="melody"] .quiz-option.wrong .option-letter { color: var(--mel-ink); background: var(--rp-wrong); }
[data-rp-game="melody"] .answer-feedback { width: fit-content; max-width: 100%; min-height: 34px; margin-inline: auto; padding: 5px 14px; border-radius: 999px; }
[data-rp-game="melody"] .answer-feedback:not(:empty) { background: var(--mel-surface); }
[data-rp-game="melody"] .mini-score-item { background: var(--mel-surface); }
[data-rp-game="melody"] .mini-score-value { color: var(--mel-gold); }
[data-rp-game="melody"] .mini-score-avatar-letter { color: var(--mel-ink); background: var(--mel-accent); }

/* Round reveal (shared RevealResults): surface cards so secondary text keeps contrast on the violet page. */
[data-rp-game="melody"] .rr-context-subtext { color: var(--text-secondary); }
[data-rp-game="melody"] .rr-option { background: var(--mel-surface); border-color: rgba(255, 255, 255, .1); }
[data-rp-game="melody"] .rr-option.rr-type-correct { border-color: color-mix(in srgb, var(--rp-correct) 55%, transparent); background: linear-gradient(color-mix(in srgb, var(--rp-correct) 12%, transparent), color-mix(in srgb, var(--rp-correct) 12%, transparent)), var(--mel-surface); }
[data-rp-game="melody"] .rr-option.rr-type-wrong { border-color: color-mix(in srgb, var(--rp-wrong) 30%, transparent); background: var(--mel-surface); }
[data-rp-game="melody"] .rr-voters-label,
[data-rp-game="melody"] .rr-author-label,
[data-rp-game="melody"] .rr-vote-count { color: var(--text-secondary); }
[data-rp-game="melody"] .rr-voter { color: #fff; background: rgba(255, 255, 255, .12); }
[data-rp-game="melody"] .rr-leaderboard-title { color: var(--text-secondary); }
[data-rp-game="melody"] .rr-lb-row { background: var(--mel-surface); border-color: rgba(255, 255, 255, .1); }
[data-rp-game="melody"] .rr-lb-row.rr-leading { border-color: var(--mel-gold); background: var(--mel-surface); }
[data-rp-game="melody"] .rr-lb-pos { color: var(--text-secondary); background: rgba(255, 255, 255, .12); }
[data-rp-game="melody"] .rr-lb-pos.rr-gold,
[data-rp-game="melody"] .rr-lb-pos.rr-silver,
[data-rp-game="melody"] .rr-lb-pos.rr-bronze { color: #fff; }
[data-rp-game="melody"] .rr-lb-delta.rr-zero { color: var(--text-placeholder); }

/* Final results and party finale. */
[data-rp-game="melody"] .winner-name { color: var(--mel-gold); }
[data-rp-game="melody"] .score-item { background: var(--mel-surface); }
[data-rp-game="melody"] .score-item.leading { border: 1px solid var(--mel-gold); background: var(--mel-surface); }
[data-rp-game="melody"] .score-value { color: var(--mel-gold); }
[data-rp-game="melody"] .score-position:not(.gold):not(.silver):not(.bronze) { color: #fff; background: rgba(255, 255, 255, .12); }
[data-rp-game="melody"] #roomplay-party-finale { border-color: rgba(166, 119, 239, .5); background: var(--mel-surface); }
[data-rp-game="melody"] #roomplay-party-finale p { color: var(--text-secondary); }
[data-rp-game="melody"] #roomplay-party-finale .rpf-kicker { color: var(--mel-gold); }
[data-rp-game="melody"] #roomplay-party-finale :is(.rpf-share, .rpf-premium) { color: var(--mel-ink); background: var(--mel-accent); }
[data-rp-game="melody"] #roomplay-party-finale .rpf-next { color: #fff; background: rgba(255, 255, 255, .12); }

/* Overlays and popups. */
[data-rp-game="melody"] .connection-overlay { background: rgba(42, 23, 88, .95); }
[data-rp-game="melody"] .connection-text { color: var(--text-secondary); }
[data-rp-game="melody"] .connection-spinner { border-color: rgba(255, 255, 255, .18); border-top-color: var(--mel-accent); }
/* Exit confirmation and settings popups: colours go through the shared --rp-dialog-* tokens
   (assets/css/confirm-dialog.css); the toggle text keeps its stock colour. */
[data-rp-game="melody"] {
  --rp-dialog-overlay: rgba(26, 12, 58, .82);
  --rp-dialog-bg: var(--mel-surface);
  --rp-dialog-border: 1px solid rgba(166, 119, 239, .35);
  --rp-dialog-text: var(--text-secondary);
  --rp-dialog-primary-bg: var(--mel-accent);
  --rp-dialog-primary-text: var(--mel-ink);
  --rp-dialog-secondary-border: rgba(255, 255, 255, .7);
  --rp-dialog-secondary-text: #fff;
  --rp-dialog-control-bg: rgba(255, 255, 255, .08);
  --rp-dialog-control-btn-bg: rgba(255, 255, 255, .14);
  --rp-dialog-control-btn-active: rgba(255, 255, 255, .14);
}

/* Onboarding: animated flat SVG characters (static copies via <picture> for reduced motion). */
[data-rp-game="melody"] #onboarding-screen .slide-icon { width: min(240px, 55vw); margin-bottom: 18px; font-size: 0; line-height: 0; }
[data-rp-game="melody"] #onboarding-screen .slide-icon picture,
[data-rp-game="melody"] #onboarding-screen .slide-icon img { display: block; width: 100%; height: auto; }
[data-rp-game="melody"] .slide-text { color: var(--text-secondary); }
@media (max-height: 600px) {
  [data-rp-game="melody"] #onboarding-screen .slide-icon { width: 120px; margin-bottom: 8px; }
}

/* Light motion, same rhythm as «Я никогда не» (cutout-theme.css): spring press/settle, 260–440 ms one-shots.
   Decorative only: never delays answers, timer or scoring; fully off under prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  [data-rp-game="melody"] {
    --mel-press: 100ms;
    --mel-settle: 240ms;
    --mel-spring: cubic-bezier(.2, .9, .3, 1.25);
  }
  [data-rp-game="melody"] button:not(:disabled) {
    transition: scale var(--mel-settle) var(--mel-spring), translate var(--mel-settle) var(--mel-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  [data-rp-game="melody"] button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--mel-press); }
  [data-rp-game="melody"] .btn-back:active { scale: .88; }
  [data-rp-game="melody"] .dot { transition: background-color 180ms ease, width 240ms var(--mel-spring), scale 180ms var(--mel-spring); }
  [data-rp-game="melody"] .dot.active { scale: 1.12; }

  [data-rp-game="melody"] .onboarding-slide.active .slide-icon { animation: mel-character-arrive 380ms var(--mel-spring) both; }

  [data-rp-game="melody"] .pack-card { transition: transform var(--mel-settle) var(--mel-spring), border-color 150ms ease; }
  [data-rp-game="melody"] .pack-card.packs-touch-press:not(.locked) { transform: scale(.965); transition-duration: var(--mel-press); }
  [data-rp-game="melody"] .pack-card.packs-touch-pop:not(.locked) { animation: mel-pop 320ms var(--mel-spring); }
  [data-rp-game="melody"] .pack-card.packs-touch-pop:not(.locked) .pack-art { animation: mel-nod 360ms ease-out; }

  [data-rp-game="melody"] #lobby-screen.active .room-code-display { animation: mel-stamp-in 360ms var(--mel-spring) both; }

  /* Round: the record drops in, answers deal in from the top with a short stagger. */
  [data-rp-game="melody"] #game-screen.active .vinyl-container { animation: mel-stamp-in 360ms var(--mel-spring) both; }
  [data-rp-game="melody"] #game-screen.active .quiz-option { animation: mel-paper-arrive 280ms var(--mel-spring) both; }
  [data-rp-game="melody"] #game-screen.active .quiz-option:nth-child(2) { animation-delay: 40ms; }
  [data-rp-game="melody"] #game-screen.active .quiz-option:nth-child(3) { animation-delay: 80ms; }
  [data-rp-game="melody"] #game-screen.active .quiz-option:nth-child(4) { animation-delay: 120ms; }
  [data-rp-game="melody"] #game-screen.active .quiz-option.selected { animation: mel-answer-stamp 260ms var(--mel-spring); }
  [data-rp-game="melody"] #game-screen.active .quiz-option.correct { animation: mel-answer-stamp 320ms var(--mel-spring); }
  [data-rp-game="melody"] #game-screen.active .quiz-option.wrong { animation: mel-shake 360ms ease-out; }
  [data-rp-game="melody"] .answer-feedback.success,
  [data-rp-game="melody"] .answer-feedback.fail { animation: mel-stamp-in 360ms var(--mel-spring); }

  [data-rp-game="melody"] #results-screen.active .winner-icon { animation: mel-nod 420ms ease-out 200ms both; }
  [data-rp-game="melody"] #results-screen.active .score-item { animation: mel-paper-arrive 280ms var(--mel-spring) both; }
  [data-rp-game="melody"] #results-screen.active .score-item:nth-child(2) { animation-delay: 60ms; }
  [data-rp-game="melody"] #results-screen.active .score-item:nth-child(3) { animation-delay: 120ms; }
  [data-rp-game="melody"] #results-screen.active .score-item:nth-child(n+4) { animation-delay: 160ms; }
  [data-rp-game="melody"] .confirm-dialog-overlay.active .confirm-dialog-modal,
  [data-rp-game="melody"] .settings-popup-overlay.active .settings-popup-modal { animation: mel-paper-arrive 280ms var(--mel-spring); }
}
@keyframes mel-character-arrive {
  from { opacity: 0; scale: .82; rotate: -10deg; }
  to { opacity: 1; scale: 1; rotate: 0deg; }
}
@keyframes mel-pop { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes mel-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes mel-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes mel-stamp-in { from { opacity: 0; scale: 1.45; } to { opacity: 1; scale: 1; } }
@keyframes mel-answer-stamp { 0% { scale: .94; } 65% { scale: 1.025; } 100% { scale: 1; } }
@keyframes mel-shake { 0%, 100% { translate: 0 0; } 25% { translate: -6px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } }

/* Pack choice arrow: COMMON/roomplay-palettes.html / melody accent #A677EF. */
:root {
    --packs-cue-color: #A677EF;
}

/* Like / dislike on the revealed track (shared content-report.css). */
:root {
    --rp-report-text: #fff;
    --rp-report-muted: var(--text-secondary);
    --rp-report-accent: var(--mel-gold);
    --rp-report-accent-ink: var(--mel-ink);
}
/* The row sits inside the reveal's track block (main.ts placeTrackVotes moves it into .rr-context),
   under the cover and the title. Fallback when the block is missing: the old fixed row at the
   bottom (RevealResults covers the screen, absolute, z-index 5). */
#reveal-container .rr-context .mel-card-vote { margin: 8px auto 0; }
#round-results-screen > .mel-card-vote {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
    padding: 6px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to bottom, transparent, var(--bg-primary) 40%);
}
#round-results-screen:has(> .mel-card-vote:not([hidden])) .rr-screen1,
#round-results-screen:has(> .mel-card-vote:not([hidden])) .rr-screen2 { padding-bottom: 76px; }
.mel-card-vote .rp-card-vote__btn { color: rgb(217 204 245 / 75%); }
.mel-card-vote .rp-card-vote__btn[aria-pressed="true"] { color: var(--mel-gold); }

/* «Сообщить об ошибке» sheet (shared content-report.css) in this game's palette (roomplay-palettes.html). */
:root {
  --rp-report-surface: #2a1758;
  --rp-report-text: #ffffff;
  --rp-report-muted: #d9ccf5;
  --rp-report-line: rgb(255 255 255 / 16%);
  --rp-report-chip: rgb(255 255 255 / 8%);
  --rp-report-accent: #a677ef;
  --rp-report-accent-ink: #17191f;
}

/* Own music (artist pick): search field, dropdown and chips on the dark surface, lavender accents. */
[data-rp-game="melody"] .artist-search .artist-search-input { background: var(--mel-surface); border-color: rgba(217, 204, 245, .28); }
[data-rp-game="melody"] .artist-search .artist-search-input:focus { border-color: var(--mel-accent); }
[data-rp-game="melody"] .artist-search-icon { color: var(--mel-accent-text); }
[data-rp-game="melody"] .artist-suggestions { background: var(--mel-surface); border: 1px solid rgba(217, 204, 245, .2); box-shadow: 0 12px 32px rgba(20, 8, 48, .5); }
[data-rp-game="melody"] .artist-option:is(:hover, :focus-visible, .is-active) { background: rgba(166, 119, 239, .2); }
[data-rp-game="melody"] .artist-option:focus-visible,
[data-rp-game="melody"] .artist-chip-remove:focus-visible { outline-color: var(--mel-accent); }
[data-rp-game="melody"] .artist-chip { background: var(--mel-surface); border: 1px solid rgba(166, 119, 239, .55); }
[data-rp-game="melody"] .artist-chip-remove { color: var(--mel-accent-text); }
[data-rp-game="melody"] .artists-loading .loader-spinner { border-top-color: var(--mel-accent); }
[data-rp-game="melody"] #artists-screen .lobby-status { color: var(--text-secondary); }
[data-rp-game="melody"] #artists-screen .lobby-status strong { color: var(--mel-gold); }