/* Game Theme only. Palette: COMMON/roomplay-palettes.html / drawful (Drawful 2 adaptation).
   bg #F0EEEB paper with the blue preview grid, surface #FFFFFF (border #E4E1DD), accent #C61D76 (white text),
   ink #252525 / text #17191F. Light palette: page and cards are light, so text is dark everywhere except on
   the ink cards (#252525) used for success/error/score chips, which keep the stock green/red tokens readable. */
:root {
  /* Answer and gender tones: COMMON/roomplay-palettes.html / drawful (correct, wrong, male, female). */
  --rp-correct: #30c883;
  --rp-correct-ink: #17191f;
  --rp-wrong: #bb3f58;
  --rp-wrong-ink: #ffffff;
  --rp-male: #0274c7;
  --rp-female: #c61d76;
  --bg-primary: #f0eeeb;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --text-primary: #17191f;
  --text-secondary: #5a5650;
  --text-placeholder: #6b6760;
  --accent-purple: #c61d76;
  --accent-purple-dark: #a3175f;
  --accent-blue: #c61d76;
  --accent-pink: #c61d76;
  --accent-pink-dark: #a3175f;
  --df-ink: #252525;
  --df-text: #17191f;
  --df-line: #e4e1dd;
  --df-grid: rgba(139, 169, 198, .3);
  --df-pink-tint: #fbe6f0;
  --df-on-ink-muted: #d6d3cc;
  --onboarding-accent: #c61d76;
  --onboarding-accent-dark: #c61d76;
  --onboarding-shadow: transparent;
  --onboarding-shadow-hover: transparent;
  --settings-accent: #c61d76;
  --settings-accent-dark: #a3175f;
  --packs-accent: #c61d76;
  --packs-feedback-rgb: 198, 29, 118;
  --ps-accent: #c61d76;
  --game-accent: #c61d76;
}
html, body[data-rp-game="drawful"], .page-loader { background: var(--bg-primary); }
body[data-rp-game="drawful"] {
  color: var(--df-text);
  background-color: var(--bg-primary);
  background-image: linear-gradient(var(--df-grid) 1px, transparent 1px), linear-gradient(90deg, var(--df-grid) 1px, transparent 1px);
  background-size: 20px 20px;
}
[data-rp-game="drawful"] .loader-spinner,
[data-rp-game="drawful"] .connection-spinner,
[data-rp-game="drawful"] .rp-waiting-spinner { border-color: rgba(37, 37, 37, .15); border-top-color: var(--accent-pink); }

/* Actions: pink primary (white text 5.5:1), ink outline secondary. */
[data-rp-game="drawful"] .btn-play,
[data-rp-game="drawful"] .btn-next-slide,
[data-rp-game="drawful"] .btn-join.active { color: #fff; background: var(--accent-pink); border-color: transparent; box-shadow: none; }
[data-rp-game="drawful"] .btn-play:disabled { color: var(--text-secondary); background: var(--df-line); opacity: 1; }
[data-rp-game="drawful"] .btn-join { color: var(--accent-pink); border-color: var(--accent-pink); background: #fff; }
[data-rp-game="drawful"] .btn-join:disabled { color: var(--text-secondary); border-color: var(--df-line); }
[data-rp-game="drawful"] .btn-skip,
[data-rp-game="drawful"] .btn-play.outlined { color: var(--df-text); border: 2px solid var(--df-ink); background: transparent; box-shadow: none; }
[data-rp-game="drawful"] .btn-back { color: var(--df-text); }
[data-rp-game="drawful"] .btn-copy { color: var(--df-text); background: #fff; border: 2px solid var(--df-line); }
[data-rp-game="drawful"] .dot { background: rgba(37, 37, 37, .22); }
[data-rp-game="drawful"] .dot.active { background: var(--accent-pink); }
[data-rp-game="drawful"] .input { color: var(--df-text); background: #fff; border-color: var(--df-line); }
[data-rp-game="drawful"] .input:focus { border-color: var(--accent-pink); }
[data-rp-game="drawful"] .input:disabled { background: #f7f6f4; }

/* Paper cards: white with the stage border from the palette preview. */
[data-rp-game="drawful"] .player-item,
[data-rp-game="drawful"] .round-badge,
[data-rp-game="drawful"] .drawing-prompt,
[data-rp-game="drawful"] .artist-notice,
[data-rp-game="drawful"] .room-code-display,
[data-rp-game="drawful"] .score-item,
[data-rp-game="drawful"] .mini-score-item { color: var(--df-text); background: #fff; border: 2px solid var(--df-line); }
[data-rp-game="drawful"] .round-badge,
[data-rp-game="drawful"] .artist-notice,
[data-rp-game="drawful"] .drawing-prompt-label { color: var(--text-secondary); }
[data-rp-game="drawful"] .drawing-prompt-word,
[data-rp-game="drawful"] .room-code-display { color: var(--accent-pink); }
[data-rp-game="drawful"] .lobby-hint,
[data-rp-game="drawful"] .lobby-status,
[data-rp-game="drawful"] .subtitle { color: var(--text-secondary); }
[data-rp-game="drawful"] .player-avatar:not(.has-photo),
[data-rp-game="drawful"] .mini-score-avatar-letter { color: #fff; background: var(--df-ink); }
[data-rp-game="drawful"] .player-name { color: var(--df-text); }
[data-rp-game="drawful"] .player-host { color: var(--accent-pink); }
[data-rp-game="drawful"] .timer-badge { color: #fff; background: var(--accent-pink); }
[data-rp-game="drawful"] .timer-badge.warning { color: var(--df-text); background: var(--error); }

/* Drawing tools: the canvas is a sheet on the gridded desk; swatches get an ink ring so white stays visible. */
[data-rp-game="drawful"] .canvas-container { background: #fff; box-shadow: 0 0 0 2px var(--df-line), 0 6px 0 rgba(37, 37, 37, .08); }
[data-rp-game="drawful"] .color-btn { border-color: rgba(37, 37, 37, .2) !important; }
[data-rp-game="drawful"] .color-btn.active { border-color: var(--df-ink) !important; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--df-ink); }
[data-rp-game="drawful"] .toolbar-divider { background: rgba(37, 37, 37, .2); }
[data-rp-game="drawful"] .brush-size-btn { background: #fff; border-color: var(--df-line); }
[data-rp-game="drawful"] .brush-size-btn.active { border-color: var(--accent-pink); }
[data-rp-game="drawful"] .brush-dot { background: var(--df-ink); }
[data-rp-game="drawful"] .tool-btn { color: var(--text-secondary); background: #fff; border-color: var(--df-line); }
[data-rp-game="drawful"] .tool-btn.active { color: #fff; background: var(--df-ink); border-color: var(--df-ink); }
[data-rp-game="drawful"] .submitted-overlay { background: rgba(37, 37, 37, .9); }
[data-rp-game="drawful"] .submitted-icon { color: var(--success); }
[data-rp-game="drawful"] .submitted-hint { color: var(--df-on-ink-muted); }
/* Stock success/error text sits on an ink pill so it stays readable on paper. */
[data-rp-game="drawful"] #presenting-status:not(:empty) { align-self: center; padding: 6px 14px; border-radius: 999px; background: var(--df-ink); }

/* Presenting and voting. */
[data-rp-game="drawful"] .drawing-display { background: #fff; box-shadow: 0 0 0 2px var(--df-line), 0 8px 0 rgba(37, 37, 37, .08); }
[data-rp-game="drawful"] .vote-option { color: var(--df-text); background: #fff; border-color: var(--df-line); }
[data-rp-game="drawful"] .vote-option.selected { border-color: var(--accent-pink); background: var(--df-pink-tint); }
[data-rp-game="drawful"] .option-letter { color: #fff; background: var(--df-ink); }
[data-rp-game="drawful"] .vote-option.selected .option-letter { background: var(--accent-pink); }
[data-rp-game="drawful"] .vote-option.excluded { border-color: var(--accent-pink); background: var(--df-pink-tint); }
[data-rp-game="drawful"] .option-own { color: #fff; background: var(--accent-pink); }
@media (hover: hover) {
  [data-rp-game="drawful"] .vote-option:hover:not(.selected):not(.disabled):not(.excluded) { border-color: var(--accent-pink); }
}

/* Round reveal (shared RevealResults): white sheets, the real answer on an ink card with the stock green. */
[data-rp-game="drawful"] .rr-context-text { color: var(--df-text); }
[data-rp-game="drawful"] .rr-context-subtext,
[data-rp-game="drawful"] .rr-leaderboard-title { color: var(--text-secondary); }
[data-rp-game="drawful"] .rr-context-drawing { box-shadow: 0 0 0 2px var(--df-line); }
[data-rp-game="drawful"] .rr-option { background: #fff; border: 2px solid var(--df-line); }
[data-rp-game="drawful"] .rr-option.rr-type-wrong { border-color: rgba(198, 29, 118, .35); }
[data-rp-game="drawful"] .rr-option-text { color: var(--df-text); }
[data-rp-game="drawful"] .rr-vote-count,
[data-rp-game="drawful"] .rr-voters-label,
[data-rp-game="drawful"] .rr-author,
[data-rp-game="drawful"] .rr-author-label { color: var(--text-secondary); }
[data-rp-game="drawful"] .rr-author-name { color: var(--accent-pink); }
[data-rp-game="drawful"] .rr-voter { color: var(--df-text); background: rgba(37, 37, 37, .08); }
[data-rp-game="drawful"] .rr-voter-points,
[data-rp-game="drawful"] .rr-author-points,
[data-rp-game="drawful"] .rr-lb-delta:not(.rr-zero) { padding: 1px 6px; border-radius: 6px; background: var(--df-ink); }
[data-rp-game="drawful"] .rr-option.rr-type-correct { background: var(--df-ink); border-color: var(--rp-correct); }
[data-rp-game="drawful"] .rr-option.rr-type-correct .rr-vote-count,
[data-rp-game="drawful"] .rr-option.rr-type-correct .rr-voters-label { color: var(--df-on-ink-muted); }
[data-rp-game="drawful"] .rr-option.rr-type-correct .rr-voter { color: #fff; background: rgba(255, 255, 255, .14); }
[data-rp-game="drawful"] .rr-option.rr-type-correct .rr-voter-points { padding: 0; background: none; }
[data-rp-game="drawful"] .rr-lb-row { background: #fff; border: 2px solid var(--df-line); }
[data-rp-game="drawful"] .rr-lb-row.rr-leading { border-color: var(--accent-pink); background: #fff; }
[data-rp-game="drawful"] .rr-lb-name,
[data-rp-game="drawful"] .rr-lb-score { color: var(--df-text); }
[data-rp-game="drawful"] .rr-lb-pos { color: var(--text-secondary); background: rgba(37, 37, 37, .08); }
[data-rp-game="drawful"] .rr-lb-delta.rr-zero { color: var(--text-secondary); }

/* Final results. */
[data-rp-game="drawful"] .winner-name { color: var(--accent-pink); }
[data-rp-game="drawful"] .score-item.leading { border-color: var(--accent-pink); background: #fff; }
[data-rp-game="drawful"] .score-name { color: var(--df-text); }
[data-rp-game="drawful"] .score-value,
[data-rp-game="drawful"] .mini-score-value { color: var(--accent-pink); }
[data-rp-game="drawful"] .score-position:not(.gold):not(.silver):not(.bronze) { color: var(--df-text); background: rgba(37, 37, 37, .08); }
/* Shared party finale card (#roomplay-party-finale): a white sheet, pink share, ink outline "next". */
[data-rp-game="drawful"] #roomplay-party-finale { color: var(--df-text); border: 2px solid var(--df-line); background: #fff; }
[data-rp-game="drawful"] #roomplay-party-finale p { color: var(--text-secondary); }
[data-rp-game="drawful"] #roomplay-party-finale .rpf-kicker { color: var(--accent-pink); }
[data-rp-game="drawful"] #roomplay-party-finale :is(.rpf-share, .rpf-premium) { color: #fff; background: var(--accent-pink); }
[data-rp-game="drawful"] #roomplay-party-finale .rpf-next { color: var(--df-text); background: transparent; box-shadow: inset 0 0 0 2px var(--df-ink); }

/* Overlays and popups. */
[data-rp-game="drawful"] .connection-overlay { background: rgba(240, 238, 235, .96); }
[data-rp-game="drawful"] .connection-text { color: var(--df-text); }
/* Exit confirmation and settings popups: white sheet, pink primary, ink outline cancel.
   Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
[data-rp-game="drawful"] {
  --rp-dialog-overlay: rgba(37, 37, 37, .6);
  --rp-dialog-bg: #fff;
  --rp-dialog-border: 2px solid var(--df-line);
  --rp-dialog-shadow: 0 10px 0 rgba(37, 37, 37, .12);
  --rp-dialog-title: var(--df-text);
  --rp-dialog-text: var(--text-secondary);
  --rp-dialog-primary-bg: var(--accent-pink);
  --rp-dialog-secondary-border: var(--df-ink);
  --rp-dialog-secondary-text: var(--df-text);
}

/* Onboarding: animated flat SVG characters (static copies via <picture> for reduced motion). */
[data-rp-game="drawful"] #onboarding-screen .slide-icon { width: min(240px, 55vw); margin-bottom: 18px; font-size: 0; line-height: 0; }
[data-rp-game="drawful"] #onboarding-screen .slide-icon picture,
[data-rp-game="drawful"] #onboarding-screen .slide-icon img { display: block; width: 100%; height: auto; }
[data-rp-game="drawful"] .slide-title { color: var(--df-text); }
[data-rp-game="drawful"] .slide-text { color: var(--text-secondary); }
@media (max-height: 600px) {
  [data-rp-game="drawful"] #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="drawful"] #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="drawful"] #onboarding-screen .slide-icon { grid-row: 1 / span 2; width: 120px; margin: 0; }
  [data-rp-game="drawful"] #onboarding-screen .slide-title { align-self: end; margin-bottom: 6px; }
  [data-rp-game="drawful"] #onboarding-screen .slide-text { align-self: start; max-width: none; }
}

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

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

  /* Drawing: the secret word is stamped, the sheet slides onto the desk. */
  [data-rp-game="drawful"] #drawing-screen.active .drawing-prompt-word { animation: df-stamp-in 360ms var(--df-spring) both; }
  [data-rp-game="drawful"] #drawing-screen.active .canvas-container { animation: df-paper-arrive 280ms var(--df-spring) both; }
  [data-rp-game="drawful"] .submitted-overlay.visible .submitted-icon { animation: df-stamp-in 360ms var(--df-spring) both; }

  /* Presenting and voting: the drawing lands, answers pop in one after another. */
  [data-rp-game="drawful"] #presenting-screen.active .drawing-display,
  [data-rp-game="drawful"] #voting-screen.active .drawing-display { animation: df-paper-arrive 280ms var(--df-spring) both; }
  [data-rp-game="drawful"] #voting-screen.active .vote-option { animation: df-paper-arrive 280ms var(--df-spring) both; }
  [data-rp-game="drawful"] #voting-screen.active .vote-option:nth-child(2) { animation-delay: 40ms; }
  [data-rp-game="drawful"] #voting-screen.active .vote-option:nth-child(3) { animation-delay: 80ms; }
  [data-rp-game="drawful"] #voting-screen.active .vote-option:nth-child(4) { animation-delay: 120ms; }
  [data-rp-game="drawful"] #voting-screen.active .vote-option:nth-child(n+5) { animation-delay: 160ms; }
  [data-rp-game="drawful"] #voting-screen.active .vote-option.selected { animation: df-answer-stamp 260ms var(--df-spring); }
  [data-rp-game="drawful"] .vote-option.selected .option-letter { animation: df-nod 360ms ease-out; }
  [data-rp-game="drawful"] #presenting-status:not(:empty) { animation: df-stamp-in 360ms var(--df-spring); }

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

/* The absolute 44px back arrow (left:16px) sat on top of the round badge («Рисуй!», «2/4»):
   the header only reserved 40px. Reserve the arrow's full footprint (16 + 44 + 4px gap). */
[data-rp-game="drawful"] .screen > .btn-back-exit ~ .game-header,
[data-rp-game="drawful"] .screen > .btn-back-exit ~ .screen-content > .game-header { padding-left: 64px; }

/* Like / dislike / report on the drawing prompt (shared content-report.css): on the ink
   «Рисунок отправлен» card after this phone sends its drawing, and on paper under each reveal.
   The report sheet follows the light paper palette. */
:root {
  --rp-report-surface: #ffffff;
  --rp-report-text: var(--df-text);
  --rp-report-muted: var(--text-secondary);
  --rp-report-line: var(--df-line);
  --rp-report-chip: #f0eeeb;
  --rp-report-accent: #c61d76;
  --rp-report-accent-ink: #ffffff;
  --rp-report-error: #bb3f58;
  --rp-report-flag: rgb(37 37 37 / 55%);
}
/* Inside the prompt card: thumbs centred on its bottom edge, flag in its bottom-right corner. On the
   reveal the drawing + «Правильный ответ» block becomes a paper card while it holds them. */
[data-rp-game="drawful"] .drawing-prompt { position: relative; }
[data-rp-game="drawful"] .drawing-prompt:has(> .df-card-vote:not([hidden])) { padding-bottom: 50px; }
[data-rp-game="drawful"] #reveal-container .rr-context.df-reveal-prompt {
  position: relative; padding: 16px 16px 56px; border: 2px solid var(--df-line); border-radius: 16px; background: #fff;
}
[data-rp-game="drawful"] .df-card-vote { position: absolute; left: 50%; bottom: 4px; z-index: 2; margin: 0; transform: translateX(-50%); }
[data-rp-game="drawful"] .df-report-flag { position: absolute; right: 4px; bottom: 4px; z-index: 2; }
[data-rp-game="drawful"] :is(.df-card-vote, .df-report-flag)[hidden] { display: none; }
[data-rp-game="drawful"] :is(.df-card-vote--paper .rp-card-vote__btn, .df-report-flag) { color: rgb(37 37 37 / 60%); }
[data-rp-game="drawful"] .df-card-vote--paper .rp-card-vote__btn[aria-pressed="true"] { color: var(--accent-pink); }
@media (hover: hover) {
  [data-rp-game="drawful"] :is(.df-card-vote--paper .rp-card-vote__btn:not([aria-pressed="true"]), .df-report-flag):hover { color: var(--df-text); }
}
[data-rp-game="drawful"] :is(.df-card-vote--paper .rp-card-vote__btn, .df-report-flag):active { background: rgb(37 37 37 / 8%); }