/* Game Theme only. Palette: COMMON/roomplay-palettes.html / whatdoyoumeme (white Core Game box).
   bg #FFFFFF, surface #F1F0F6 (ink #17191F), accent #267C86 (teal, white text 4.9:1), secondary #7E3C9B (purple, white text 7:1).
   Teal as small text uses #1E6770 (6.5:1). Meme images keep their colours. Stock success/error sit on ink #17191F pills. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / whatdoyoumeme (correct, wrong, male, female). */
  --rp-correct: #107d4e;
  --rp-correct-ink: #ffffff;
  --rp-wrong: #b73d56;
  --rp-wrong-ink: #ffffff;
  --rp-male: #0271c2;
  --rp-female: #b03e73;
  --bg-primary: #ffffff;
  --bg-secondary: #f1f0f6;
  --bg-card: #f1f0f6;
  --text-primary: #17191f;
  --text-secondary: #4a4d57;
  --text-placeholder: #6b6e78;
  --accent-purple: #267c86;
  --accent-purple-dark: #267c86;
  --accent-blue: #267c86;
  --accent-pink: #267c86;
  --accent-pink-dark: #267c86;
  --accent-primary: #267c86;
  --accent-primary-dark: #267c86;
  --accent-secondary: #7e3c9b;
  --wd-teal: #267c86;
  --wd-teal-text: #1e6770;
  --wd-purple: #7e3c9b;
  --wd-surface: #f1f0f6;
  --wd-ink: #17191f;
  --wd-line: #dddbe6;
  --settings-accent: #267c86;
  --settings-accent-dark: #267c86;
  --onboarding-accent: #267c86;
  --onboarding-accent-dark: #267c86;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --packs-accent: #267c86;
  --packs-feedback-rgb: 38, 124, 134;
  --ps-accent: #267c86;
}
html, body[data-rp-game="whatdoyoumeme"], .page-loader { background: var(--bg-primary); }
body[data-rp-game="whatdoyoumeme"] { color: var(--wd-ink); }
[data-rp-game="whatdoyoumeme"] .loader-spinner { border-color: rgba(23, 25, 31, .12); border-top-color: var(--wd-teal); }

/* Actions: teal primary with white text, ink outline secondary. */
[data-rp-game="whatdoyoumeme"] .btn-play,
[data-rp-game="whatdoyoumeme"] .btn-next-slide,
[data-rp-game="whatdoyoumeme"] .btn-join.active { color: #fff; background: var(--wd-teal); border-color: transparent; box-shadow: none; }
[data-rp-game="whatdoyoumeme"] .btn-play:hover { box-shadow: none; }
[data-rp-game="whatdoyoumeme"] .btn-play:disabled { color: var(--text-secondary); background: var(--wd-surface); opacity: 1; }
[data-rp-game="whatdoyoumeme"] .btn-skip,
[data-rp-game="whatdoyoumeme"] .btn-play.outlined,
[data-rp-game="whatdoyoumeme"] .btn-join,
[data-rp-game="whatdoyoumeme"] .btn-additional-settings { color: var(--wd-ink); border-color: var(--wd-ink); background: transparent; }
[data-rp-game="whatdoyoumeme"] .btn-back { color: var(--wd-ink); }
[data-rp-game="whatdoyoumeme"] .btn-copy { color: var(--text-secondary); background: var(--wd-surface); border-color: var(--wd-line); }
[data-rp-game="whatdoyoumeme"] .btn-settings-link { color: var(--wd-ink); border-color: var(--wd-ink); }
[data-rp-game="whatdoyoumeme"] .btn-refresh-hand { color: #fff; background: var(--wd-purple); box-shadow: none; }
[data-rp-game="whatdoyoumeme"] .dot { background: rgba(23, 25, 31, .18); }
[data-rp-game="whatdoyoumeme"] .dot.active { background: var(--wd-teal); }
[data-rp-game="whatdoyoumeme"] .input { color: var(--wd-ink); background: var(--wd-surface); }
[data-rp-game="whatdoyoumeme"] .input:focus { border-color: var(--wd-teal); }

/* Packs (illustrated grid): art untouched, light frame. Names stay white on the artwork shade. */
[data-rp-game="whatdoyoumeme"] #packs-grid { --packs-accent: #267c86 !important; --packs-feedback-rgb: 38, 124, 134 !important; }
[data-rp-game="whatdoyoumeme"] .packs-illustrated-grid .pack-card { border-color: var(--wd-line); box-shadow: 0 8px 20px rgba(23, 25, 31, .12); }
[data-rp-game="whatdoyoumeme"] .packs-illustrated-grid .pack-card.selected { border-color: var(--wd-teal); }
[data-rp-game="whatdoyoumeme"] .packs-illustrated-actions { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--bg-primary) 14px); }
[data-rp-game="whatdoyoumeme"] .packs-summary { color: var(--text-secondary); background: var(--wd-surface); }
[data-rp-game="whatdoyoumeme"] .summary-text { color: var(--text-secondary); }
[data-rp-game="whatdoyoumeme"] .packs-summary strong,
[data-rp-game="whatdoyoumeme"] .summary-text strong { color: var(--wd-teal-text); }

/* Lobby. */
[data-rp-game="whatdoyoumeme"] .room-code-display { color: var(--wd-teal-text); background: var(--wd-surface); }
[data-rp-game="whatdoyoumeme"] .player-item { color: var(--wd-ink); background: var(--wd-surface); }
[data-rp-game="whatdoyoumeme"] .player-avatar { color: #fff; background: var(--wd-teal); }
[data-rp-game="whatdoyoumeme"] .player-avatar.has-photo { background: none; }
[data-rp-game="whatdoyoumeme"] .player-avatar.clickable::after { border-color: rgba(23, 25, 31, .45); }
[data-rp-game="whatdoyoumeme"] .player-host { color: var(--wd-teal-text); }
[data-rp-game="whatdoyoumeme"] .rp-waiting-spinner { border-color: var(--wd-line); border-top-color: var(--wd-teal); }

/* Round: prompt card, hand and table. */
[data-rp-game="whatdoyoumeme"] .round-badge { color: var(--text-secondary); background: var(--wd-surface); }
[data-rp-game="whatdoyoumeme"] .timer-badge { color: #fff; background: var(--wd-purple); }
[data-rp-game="whatdoyoumeme"] .timer-badge.warning { color: var(--wd-ink); background: var(--error); }
[data-rp-game="whatdoyoumeme"] .prompt-card { background: var(--wd-surface); border-color: var(--wd-teal); }
[data-rp-game="whatdoyoumeme"] .prompt-card.image-prompt { background: var(--wd-ink); }
[data-rp-game="whatdoyoumeme"] .prompt-text { color: var(--wd-purple); }
[data-rp-game="whatdoyoumeme"] .card,
[data-rp-game="whatdoyoumeme"] .table-card { background: var(--wd-surface); border-color: #fff; }
[data-rp-game="whatdoyoumeme"] .card.text-card,
[data-rp-game="whatdoyoumeme"] .table-card.text-card { color: var(--wd-ink); border-color: #fff; }
[data-rp-game="whatdoyoumeme"] .card.selected { border-color: var(--wd-teal); box-shadow: 0 0 0 2px rgba(38, 124, 134, .25); }
[data-rp-game="whatdoyoumeme"] .card-check { color: #fff; background: var(--wd-teal); }
[data-rp-game="whatdoyoumeme"] .table-card.voted { border-color: var(--wd-purple); box-shadow: 0 0 0 2px rgba(126, 60, 155, .25); }
[data-rp-game="whatdoyoumeme"] .table-card.own-card { border-color: var(--wd-line); }
[data-rp-game="whatdoyoumeme"] .table-card-letter { color: #fff; background: var(--wd-ink); }
[data-rp-game="whatdoyoumeme"] .table-card-label { color: #fff; background: rgba(23, 25, 31, .82); }
[data-rp-game="whatdoyoumeme"] .choosing-subtitle,
[data-rp-game="whatdoyoumeme"] .voting-subtitle { color: var(--text-secondary); }
[data-rp-game="whatdoyoumeme"] .submitted-overlay { background: rgba(255, 255, 255, .9); }
[data-rp-game="whatdoyoumeme"] .submitted-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; background: var(--wd-teal); font-size: 36px; }
[data-rp-game="whatdoyoumeme"] .submitted-text { padding: 5px 14px; border-radius: 999px; background: var(--wd-ink); }
[data-rp-game="whatdoyoumeme"] .submitted-hint { color: var(--text-secondary); }

/* Card preview: dark viewer so memes keep their own colours. */
[data-rp-game="whatdoyoumeme"] .card-preview-overlay { background: rgba(23, 25, 31, .94); }
[data-rp-game="whatdoyoumeme"] .card-preview-close { color: #fff; background: rgba(255, 255, 255, .14); }
[data-rp-game="whatdoyoumeme"] .card-preview-image.text-preview { color: var(--wd-ink); background: #fff; }

/* Reveal (game-built, inline styles): white text inside the dark name strip, stock green deltas on ink pills. */
[data-rp-game="whatdoyoumeme"] #reveal-container > div:nth-child(2) > div > div:last-child { --text-primary: #fff; }
[data-rp-game="whatdoyoumeme"] #reveal-container .score-item > span:not(.score-name):not(.score-value):not(:empty) { padding: 2px 8px; border-radius: 999px; background: var(--wd-ink); }

/* Final results and party finale. */
[data-rp-game="whatdoyoumeme"] .winner-name { color: var(--wd-teal-text); }
[data-rp-game="whatdoyoumeme"] .score-item { color: var(--wd-ink); background: var(--wd-surface); }
[data-rp-game="whatdoyoumeme"] .score-item.leading { border: 1px solid var(--wd-teal); background: rgba(38, 124, 134, .1); }
[data-rp-game="whatdoyoumeme"] .score-value { color: var(--wd-teal-text); }
[data-rp-game="whatdoyoumeme"] .score-position:not(.gold):not(.silver):not(.bronze) { color: var(--wd-ink); background: rgba(23, 25, 31, .08); }
[data-rp-game="whatdoyoumeme"] #roomplay-party-finale { border-color: var(--wd-line); background: var(--wd-surface); }
[data-rp-game="whatdoyoumeme"] #roomplay-party-finale p { color: var(--text-secondary); }
[data-rp-game="whatdoyoumeme"] #roomplay-party-finale .rpf-kicker { color: var(--wd-purple); }
[data-rp-game="whatdoyoumeme"] #roomplay-party-finale :is(.rpf-share, .rpf-premium) { color: #fff; background: var(--wd-teal); }
[data-rp-game="whatdoyoumeme"] #roomplay-party-finale .rpf-next { color: var(--wd-ink); background: rgba(23, 25, 31, .08); }

/* Overlays and popups: white sheets with ink text. */
[data-rp-game="whatdoyoumeme"] .connection-overlay { background: rgba(255, 255, 255, .95); }
[data-rp-game="whatdoyoumeme"] .connection-text { color: var(--text-secondary); }
[data-rp-game="whatdoyoumeme"] .connection-spinner { border-color: var(--wd-line); border-top-color: var(--wd-teal); }
/* Exit confirmation and settings popups: colours go through the shared --rp-dialog-* tokens
   (assets/css/confirm-dialog.css). */
[data-rp-game="whatdoyoumeme"] {
  --rp-dialog-overlay: rgba(23, 25, 31, .55);
  --rp-dialog-bg: #fff;
  --rp-dialog-border: 1px solid var(--wd-line);
  --rp-dialog-shadow: 0 18px 40px rgba(23, 25, 31, .18);
  --rp-dialog-title: var(--wd-ink);
  --rp-dialog-text: var(--text-secondary);
  --rp-dialog-primary-bg: var(--wd-teal);
  --rp-dialog-secondary-border: var(--wd-ink);
  --rp-dialog-secondary-text: var(--wd-ink);
  --rp-dialog-control-bg: var(--wd-surface);
  --rp-dialog-control-btn-bg: rgba(23, 25, 31, .08);
  --rp-dialog-control-btn-active: rgba(23, 25, 31, .16);
  --rp-dialog-toggle-bg: rgba(23, 25, 31, .12);
}
[data-rp-game="whatdoyoumeme"] .settings-popup-done:focus-visible,
[data-rp-game="whatdoyoumeme"] .settings-popup-toggle:focus-visible { outline-color: var(--wd-ink); }

/* Onboarding: animated flat SVG characters (static copies via <picture> for reduced motion). */
[data-rp-game="whatdoyoumeme"] #onboarding-screen .slide-icon { width: min(240px, 55vw); margin-bottom: 18px; font-size: 0; line-height: 0; }
[data-rp-game="whatdoyoumeme"] #onboarding-screen .slide-icon picture,
[data-rp-game="whatdoyoumeme"] #onboarding-screen .slide-icon img { display: block; width: 100%; height: auto; }
[data-rp-game="whatdoyoumeme"] .slide-title { color: var(--wd-ink); }
[data-rp-game="whatdoyoumeme"] .slide-text { color: var(--text-secondary); }
@media (max-height: 600px) {
  [data-rp-game="whatdoyoumeme"] #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="whatdoyoumeme"] {
    --wd-press: 100ms;
    --wd-settle: 240ms;
    --wd-spring: cubic-bezier(.2, .9, .3, 1.25);
  }
  [data-rp-game="whatdoyoumeme"] button:not(:disabled) {
    transition: scale var(--wd-settle) var(--wd-spring), translate var(--wd-settle) var(--wd-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  [data-rp-game="whatdoyoumeme"] button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--wd-press); }
  [data-rp-game="whatdoyoumeme"] .btn-back:active { scale: .88; }
  [data-rp-game="whatdoyoumeme"] .dot { transition: background-color 180ms ease, width 240ms var(--wd-spring), scale 180ms var(--wd-spring); }
  [data-rp-game="whatdoyoumeme"] .dot.active { scale: 1.12; }

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

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

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

  /* Round: prompt card lands, the hand and table deal in with a short stagger, picks stamp. */
  [data-rp-game="whatdoyoumeme"] .screen.active .prompt-card { animation: wd-paper-arrive 280ms var(--wd-spring) both; }
  [data-rp-game="whatdoyoumeme"] .screen.active :is(.card, .table-card) { animation: wd-pop-in 260ms var(--wd-spring) both; }
  [data-rp-game="whatdoyoumeme"] .screen.active :is(.card, .table-card):nth-child(2) { animation-delay: 40ms; }
  [data-rp-game="whatdoyoumeme"] .screen.active :is(.card, .table-card):nth-child(3) { animation-delay: 80ms; }
  [data-rp-game="whatdoyoumeme"] .screen.active :is(.card, .table-card):nth-child(4) { animation-delay: 120ms; }
  [data-rp-game="whatdoyoumeme"] .screen.active :is(.card, .table-card):nth-child(n+5) { animation-delay: 160ms; }
  [data-rp-game="whatdoyoumeme"] .screen.active .card.selected { animation: wd-answer-stamp 260ms var(--wd-spring); }
  [data-rp-game="whatdoyoumeme"] .submitted-overlay.visible .submitted-icon { animation: wd-stamp-in 360ms var(--wd-spring) both; }
  [data-rp-game="whatdoyoumeme"] .card-preview-overlay.visible .card-preview-image { animation: wd-paper-arrive 280ms var(--wd-spring) both; }
  [data-rp-game="whatdoyoumeme"] #reveal-screen.active #reveal-container > div:nth-child(2) > div { animation: wd-pop-in 260ms var(--wd-spring) both; }
  [data-rp-game="whatdoyoumeme"] #reveal-screen.active #reveal-container > div:nth-child(2) > div:nth-child(2) { animation-delay: 60ms; }
  [data-rp-game="whatdoyoumeme"] #reveal-screen.active #reveal-container > div:nth-child(2) > div:nth-child(n+3) { animation-delay: 120ms; }
  [data-rp-game="whatdoyoumeme"] #reveal-screen.active .score-item { animation: wd-paper-arrive 280ms var(--wd-spring) 160ms both; }

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

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

/* Refresh-hand button: the shared refresh icon (ui-icons.css) instead of the 🔄 emoji. */
.btn-refresh-hand { --rp-icon-before: var(--rp-icon-refresh); }

/* Like / dislike / report under the round's prompt on the reveal (shared content-report.css):
   light sheet and dark idle icons, since this game sits on white. */
:root {
  --rp-report-surface: #ffffff;
  --rp-report-text: var(--wd-ink);
  --rp-report-muted: var(--text-secondary);
  --rp-report-line: var(--wd-line);
  --rp-report-chip: var(--wd-surface);
  --rp-report-flag: rgb(23 25 31 / 55%);
  --rp-report-accent: var(--wd-teal);
  --rp-report-accent-ink: #ffffff;
}
/* Inside the reveal's prompt card: thumbs centred on its bottom edge, flag in its bottom-right
   corner. On a meme prompt they sit on a dark strip under the picture. */
[data-rp-game="whatdoyoumeme"] .prompt-card:has(> .wdym-card-vote:not([hidden])) { position: relative; padding-bottom: 52px; }
[data-rp-game="whatdoyoumeme"] .prompt-card.image-prompt:has(> .wdym-card-vote:not([hidden])) { max-height: none; }
.wdym-card-vote { position: absolute; left: 50%; bottom: 4px; z-index: 2; margin: 0; transform: translateX(-50%); }
.wdym-report-flag { position: absolute; right: 4px; bottom: 4px; z-index: 2; }
.wdym-card-vote[hidden], .wdym-report-flag[hidden] { display: none; }
:is(.wdym-card-vote .rp-card-vote__btn, .wdym-report-flag) { color: rgb(23 25 31 / 55%); }
.wdym-card-vote .rp-card-vote__btn[aria-pressed="true"] { color: var(--wd-teal); }
.image-prompt :is(.wdym-card-vote .rp-card-vote__btn, .wdym-report-flag) { color: rgb(241 240 246 / 62%); }
.image-prompt .wdym-card-vote .rp-card-vote__btn[aria-pressed="true"] { color: var(--wd-surface); }
@media (hover: hover) {
  :is(.wdym-card-vote .rp-card-vote__btn:not([aria-pressed="true"]), .wdym-report-flag):hover { color: var(--wd-ink); }
  .image-prompt :is(.wdym-card-vote .rp-card-vote__btn:not([aria-pressed="true"]), .wdym-report-flag):hover { color: var(--wd-surface); }
}