/* Game Theme only. Palette: COMMON/roomplay-palettes.html / geoguessr (Steam edition cover adaptation).
   bg #302778 indigo, surface #211C54 (white text everywhere), accent #D63037 red for actions (white text 4.8:1),
   secondary #9BCB31 globe green for timers, scores and highlights (ink text 9.2:1). Map tiles are untouched;
   only the frame and controls around them follow the palette. Success/error tokens are unchanged. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / geoguessr (correct, wrong, male, female). */
  --rp-correct: #9bcb31;
  --rp-correct-ink: #17191f;
  --rp-wrong: #fe726d;
  --rp-wrong-ink: #17191f;
  --rp-male: #63b0fc;
  --rp-female: #f77cb0;
  --bg-primary: #302778;
  --bg-secondary: #211c54;
  --bg-card: #211c54;
  --text-primary: #ffffff;
  --text-secondary: #c9c4f0;
  --text-placeholder: #a9a3e3;
  --accent-purple: #d63037;
  --accent-purple-dark: #b0252b;
  --accent-blue: #d63037;
  --accent-pink: #d63037;
  --accent-pink-dark: #b0252b;
  --accent-green: #d63037;
  --accent-green-dark: #b0252b;
  --geo-red: #d63037;
  --geo-red-dark: #b0252b;
  --geo-green: #9bcb31;
  --geo-surface: #211c54;
  --geo-ink: #17191f;
  --geo-line: rgba(255, 255, 255, .14);
  --onboarding-accent: #d63037;
  --onboarding-accent-dark: #d63037;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #d63037;
  --settings-accent-dark: #b0252b;
  --packs-accent: #9bcb31;
  --packs-feedback-rgb: 155, 203, 49;
  --ps-accent: #d63037;
  --game-accent: #d63037;
}
html, body[data-rp-game="geoguessr"], .page-loader { background: var(--bg-primary); }
body[data-rp-game="geoguessr"] { color: #fff; }
[data-rp-game="geoguessr"] .loader-spinner,
[data-rp-game="geoguessr"] .connection-spinner,
[data-rp-game="geoguessr"] .rp-waiting-spinner { border-color: rgba(255, 255, 255, .15); border-top-color: var(--geo-green); }

/* Actions: red primary, white outline secondary. */
[data-rp-game="geoguessr"] .btn-play,
[data-rp-game="geoguessr"] .btn-next-slide,
[data-rp-game="geoguessr"] .btn-join.active,
[data-rp-game="geoguessr"] .geo-map-error { background: var(--geo-surface); }
[data-rp-game="geoguessr"] .geo-map-retry { color: #fff; background: var(--geo-red); }
[data-rp-game="geoguessr"] .btn-confirm-guess { color: #fff; background: var(--geo-red); border-color: transparent; box-shadow: none; }
[data-rp-game="geoguessr"] .btn-play:disabled,
[data-rp-game="geoguessr"] .btn-confirm-guess:disabled { color: var(--text-secondary); background: var(--geo-surface); opacity: 1; }
[data-rp-game="geoguessr"] .btn-join,
[data-rp-game="geoguessr"] .btn-play.outlined,
[data-rp-game="geoguessr"] .btn-skip { color: #fff; border-color: #fff; background: transparent; box-shadow: none; }
[data-rp-game="geoguessr"] .btn-copy { color: #fff; background: var(--geo-surface); border-color: var(--geo-line); }
[data-rp-game="geoguessr"] .dot { background: rgba(255, 255, 255, .3); }
[data-rp-game="geoguessr"] .dot.active { background: #fff; }
[data-rp-game="geoguessr"] .input { color: #fff; background: var(--geo-surface); }
[data-rp-game="geoguessr"] .subtitle,
[data-rp-game="geoguessr"] .lobby-hint,
[data-rp-game="geoguessr"] .lobby-status,
[data-rp-game="geoguessr"] .map-hint { color: var(--text-secondary); }

/* Lobby and mode toggle. */
[data-rp-game="geoguessr"] .room-code-display { color: var(--geo-green); background: var(--geo-surface); }
[data-rp-game="geoguessr"] .player-item { color: #fff; background: var(--geo-surface); }
[data-rp-game="geoguessr"] .player-avatar:not(.has-photo),
[data-rp-game="geoguessr"] .mini-score-avatar-letter { color: var(--geo-ink); background: var(--geo-green); }
[data-rp-game="geoguessr"] .player-host { color: var(--geo-green); }
[data-rp-game="geoguessr"] .mode-toggle { background: var(--geo-surface); }
[data-rp-game="geoguessr"] .mode-btn { color: var(--text-secondary); }
[data-rp-game="geoguessr"] .mode-btn.active { color: #fff; background: var(--geo-red); }

/* Round: white photo frame, green timer, red letters. */
[data-rp-game="geoguessr"] .round-badge { color: var(--text-secondary); background: var(--geo-surface); }
[data-rp-game="geoguessr"] .timer-badge { color: var(--geo-ink); background: var(--geo-green); }
[data-rp-game="geoguessr"] .timer-badge.warning { color: var(--geo-ink); background: var(--error); }
[data-rp-game="geoguessr"] .street-photo-container { background: var(--geo-surface); box-shadow: 0 0 0 4px #fff; }
[data-rp-game="geoguessr"] .photo-loading { background: var(--geo-surface); }
[data-rp-game="geoguessr"] .quiz-option { color: #fff; }
[data-rp-game="geoguessr"] .option-letter { color: #fff; background: var(--geo-red); }
[data-rp-game="geoguessr"] .quiz-option.selected:not(.correct):not(.wrong) { border-color: #fff; background: rgba(255, 255, 255, .12); }
@media (hover: hover) {
  [data-rp-game="geoguessr"] .quiz-option:hover:not(:disabled):not(.selected) { border-color: #fff; }
}
[data-rp-game="geoguessr"] .answer-feedback:not(:empty) { width: fit-content; margin-inline: auto; padding: 6px 14px; border-radius: 999px; background: var(--geo-surface); }
[data-rp-game="geoguessr"] .guess-map,
[data-rp-game="geoguessr"] .results-map { box-shadow: 0 0 0 3px var(--geo-surface); }
[data-rp-game="geoguessr"] .leaflet-bar { border-color: var(--geo-line); }
[data-rp-game="geoguessr"] .leaflet-bar a,
[data-rp-game="geoguessr"] .leaflet-bar a:hover { color: #fff; background: var(--geo-surface); border-bottom-color: var(--geo-line); }
[data-rp-game="geoguessr"] .correct-location-info { color: var(--geo-green); }
[data-rp-game="geoguessr"] .mini-score-item { color: #fff; background: var(--geo-surface); }
[data-rp-game="geoguessr"] .mini-score-value { color: var(--geo-green); }

/* Round reveal (shared RevealResults) on surface cards; stock green/red keep their meaning. */
[data-rp-game="geoguessr"] .rr-context-subtext,
[data-rp-game="geoguessr"] .rr-leaderboard-title { color: var(--text-secondary); }
[data-rp-game="geoguessr"] .rr-context-image { box-shadow: 0 0 0 4px #fff; }
[data-rp-game="geoguessr"] .rr-option { background: var(--geo-surface); border-color: var(--geo-line); }
[data-rp-game="geoguessr"] .rr-option.rr-type-wrong { border-color: color-mix(in srgb, var(--rp-wrong) 35%, transparent); }
[data-rp-game="geoguessr"] .rr-voter { background: rgba(255, 255, 255, .12); color: #fff; }
[data-rp-game="geoguessr"] .rr-voters-label,
[data-rp-game="geoguessr"] .rr-vote-count { color: var(--text-secondary); }
[data-rp-game="geoguessr"] .rr-lb-row { background: var(--geo-surface); border-color: var(--geo-line); }
[data-rp-game="geoguessr"] .rr-lb-row.rr-leading { border-color: var(--geo-green); background: var(--geo-surface); }
[data-rp-game="geoguessr"] .rr-lb-pos { color: var(--text-secondary); background: rgba(255, 255, 255, .1); }

/* Final results. */
[data-rp-game="geoguessr"] .winner-name { color: var(--geo-green); }
[data-rp-game="geoguessr"] .score-item { color: #fff; background: var(--geo-surface); border: 2px solid transparent; }
[data-rp-game="geoguessr"] .score-item.leading { border-color: var(--geo-green); background: var(--geo-surface); }
[data-rp-game="geoguessr"] .score-value { color: var(--geo-green); }
[data-rp-game="geoguessr"] .score-position:not(.gold):not(.silver):not(.bronze) { color: #fff; background: rgba(255, 255, 255, .12); }
[data-rp-game="geoguessr"] #roomplay-party-finale { border: 1px solid var(--geo-line); background: var(--geo-surface); }
[data-rp-game="geoguessr"] #roomplay-party-finale p { color: var(--text-secondary); }
[data-rp-game="geoguessr"] #roomplay-party-finale .rpf-kicker { color: var(--geo-green); }
[data-rp-game="geoguessr"] #roomplay-party-finale :is(.rpf-share, .rpf-premium) { color: #fff; background: var(--geo-red); }
[data-rp-game="geoguessr"] #roomplay-party-finale .rpf-next { color: #fff; background: rgba(255, 255, 255, .12); }

/* Overlays and popups. */
[data-rp-game="geoguessr"] .connection-overlay { background: rgba(48, 39, 120, .96); }
[data-rp-game="geoguessr"] .connection-text { color: var(--text-secondary); }
/* Exit confirmation and settings popups: violet sheet, red primary, white outline secondary.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
[data-rp-game="geoguessr"] {
  --rp-dialog-overlay: rgba(20, 16, 52, .82);
  --rp-dialog-bg: var(--geo-surface);
  --rp-dialog-border: 1px solid var(--geo-line);
  --rp-dialog-text: var(--text-secondary);
  --rp-dialog-primary-bg: var(--geo-red);
  --rp-dialog-secondary-border: #fff;
  --rp-dialog-secondary-text: #fff;
}

/* Onboarding: animated flat SVG characters (static copies via <picture> for reduced motion). */
[data-rp-game="geoguessr"] #onboarding-screen .slide-icon { width: min(240px, 55vw); margin-bottom: 18px; font-size: 0; line-height: 0; }
[data-rp-game="geoguessr"] #onboarding-screen .slide-icon picture,
[data-rp-game="geoguessr"] #onboarding-screen .slide-icon img { display: block; width: 100%; height: auto; }
[data-rp-game="geoguessr"] .slide-title { color: #fff; }
[data-rp-game="geoguessr"] .slide-text { color: var(--text-secondary); }
@media (max-height: 600px) {
  [data-rp-game="geoguessr"] #onboarding-screen .slide-icon { width: 120px; margin-bottom: 8px; }
}
/* Short landscape phones: character beside the copy so the text never runs under the dots/buttons. */
@media (max-height: 500px) and (min-width: 560px) {
  [data-rp-game="geoguessr"] #onboarding-screen .onboarding-slide.active { display: grid; grid-template-columns: auto minmax(0, 340px); grid-template-rows: auto auto; column-gap: 24px; align-items: center; padding-top: 0; text-align: left; }
  [data-rp-game="geoguessr"] #onboarding-screen .slide-icon { grid-row: 1 / span 2; width: 120px; margin: 0; }
  [data-rp-game="geoguessr"] #onboarding-screen .slide-title { align-self: end; margin-bottom: 6px; }
  [data-rp-game="geoguessr"] #onboarding-screen .slide-text { align-self: start; max-width: none; }
}

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

  [data-rp-game="geoguessr"] .onboarding-slide.active .slide-icon { animation: geo-character-arrive 380ms var(--geo-spring) both; }
  [data-rp-game="geoguessr"] #lobby-screen.active .room-code-display { animation: geo-stamp-in 360ms var(--geo-spring) both; }

  /* Round: the photo lands like a postcard, options deal in, the map card slides up. */
  [data-rp-game="geoguessr"] #game-screen.active .street-photo-container { animation: geo-postcard 320ms var(--geo-spring) both; }
  [data-rp-game="geoguessr"] #game-screen.active .quiz-option:not(.correct):not(.wrong) { animation: geo-paper-arrive 280ms var(--geo-spring) both; }
  [data-rp-game="geoguessr"] #game-screen.active .quiz-option:not(.correct):not(.wrong):nth-child(2) { animation-delay: 40ms; }
  [data-rp-game="geoguessr"] #game-screen.active .quiz-option:not(.correct):not(.wrong):nth-child(3) { animation-delay: 80ms; }
  [data-rp-game="geoguessr"] #game-screen.active .quiz-option:not(.correct):not(.wrong):nth-child(4) { animation-delay: 120ms; }
  [data-rp-game="geoguessr"] #game-screen.active .map-guess-container { animation: geo-paper-arrive 280ms var(--geo-spring) both; }
  [data-rp-game="geoguessr"] #game-screen.active .quiz-option:not(.correct):not(.wrong).selected { animation: geo-answer-stamp 260ms var(--geo-spring); }
  [data-rp-game="geoguessr"] .answer-feedback.success,
  [data-rp-game="geoguessr"] .answer-feedback.fail { animation: geo-stamp-in 360ms var(--geo-spring); }
  [data-rp-game="geoguessr"] .leaflet-marker-icon:not(.leaflet-div-icon) { animation: geo-pin-drop 360ms var(--geo-spring); }
  [data-rp-game="geoguessr"] #round-results-screen.active .correct-location-info { animation: geo-stamp-in 360ms var(--geo-spring) both; }

  /* Final standings and popups. */
  [data-rp-game="geoguessr"] #results-screen.active .winner-icon { animation: geo-nod 420ms ease-out 200ms both; }
  [data-rp-game="geoguessr"] #results-screen.active .score-item { animation: geo-paper-arrive 280ms var(--geo-spring) both; }
  [data-rp-game="geoguessr"] #results-screen.active .score-item:nth-child(2) { animation-delay: 60ms; }
  [data-rp-game="geoguessr"] #results-screen.active .score-item:nth-child(3) { animation-delay: 120ms; }
  [data-rp-game="geoguessr"] #results-screen.active .score-item:nth-child(n+4) { animation-delay: 160ms; }
  [data-rp-game="geoguessr"] .confirm-dialog-overlay.active .confirm-dialog-modal { animation: geo-paper-arrive 280ms var(--geo-spring); }
}
@keyframes geo-character-arrive { from { opacity: 0; scale: .82; rotate: -10deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes geo-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes geo-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes geo-postcard { from { opacity: 0; translate: 0 12px; rotate: -2deg; scale: .96; } to { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } }
@keyframes geo-stamp-in { from { opacity: 0; scale: 1.45; } to { opacity: 1; scale: 1; } }
@keyframes geo-answer-stamp { 0% { scale: .94; } 65% { scale: 1.025; } 100% { scale: 1; } }
@keyframes geo-pin-drop { from { translate: 0 -18px; } to { translate: 0 0; } }

/* Classic results: the correct-location label was centred full-width at the very top, so longer names
   («Рио-де-Жанейро, Бразилия») ran under the absolute back arrow (left 16px, 44×44) and the map's top
   edge sat under the arrow too. Keep the label in the arrow's row but clear of it on both sides. */
[data-rp-game="geoguessr"] #round-results-screen .correct-location-info {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; margin-bottom: 8px; padding: 0 64px;
  line-height: 1.2; overflow-wrap: anywhere;
}

/* Like / dislike / report on the location (shared content-report.css), on the round's photo while guessing. */
:root {
  --rp-report-surface: var(--geo-surface);
  --rp-report-text: #ffffff;
  --rp-report-muted: var(--text-secondary);
  --rp-report-accent: var(--geo-green);
  --rp-report-accent-ink: var(--geo-ink);
}
/* On the round's photo (it is the card): thumbs in a pill at the bottom centre, the flag in a round
   badge top-right, both on the dark surface so they read over any picture. */
[data-rp-game="geoguessr"] .street-photo-container .geo-card-vote {
  position: absolute; left: 50%; bottom: 8px; z-index: 3; transform: translateX(-50%);
  margin: 0; padding: 2px 6px; border-radius: 999px;
  background: rgb(33 28 84 / 82%); /* --geo-surface */
  box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
}
[data-rp-game="geoguessr"] .geo-report-flag {
  position: absolute; top: 8px; right: 8px; z-index: 3; width: 36px; height: 36px; font-size: 16px;
  background: rgb(33 28 84 / 82%); color: rgb(201 196 240 / 85%);
  box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
}
[data-rp-game="geoguessr"] .geo-report-flag[hidden] { display: none; }
[data-rp-game="geoguessr"] .geo-card-vote .rp-card-vote__btn { color: rgb(201 196 240 / 75%); }
[data-rp-game="geoguessr"] .geo-card-vote .rp-card-vote__btn[aria-pressed="true"] { color: var(--geo-green); }