/* /game-motion.css */
/*
 * Shared RoomPlay game motion layer (docs/NEW_GAME_GUIDELINES.md, «Анимации»).
 * The same light motion the older games carry in their own theme files (fs-, td-, wm-, hk-…):
 * springy button press/settle, active dot, onboarding character arrive, pack pop/nod, dialogs
 * arriving, plus utility classes for game blocks. Blocks that the game re-renders on every state
 * update get the classes from shared/client/motion-once.ts, so they play once per round, not on
 * every vote. Everything sits inside prefers-reduced-motion: no-preference.
 * Non-game screens (room, join by code, payment) set body[data-rp-press] instead: they get only the
 * button press and the dialog arrival, not the game screen/onboarding/pack rules.
 *
 * Utility classes (added by motionOnce() or written in the markup of a block shown once):
 *   .rp-m-arrive   card/panel slides up into place («paper arrive»)
 *   .rp-m-stagger  its children pop in one after another (answers, options, board rows)
 *   .rp-m-stamp    lands like a stamp (verdicts, room code, «верно/неверно»)
 *   .rp-m-nod      a short nod (winner art, an icon that just changed)
 *   .rp-m-answer   a chosen answer button gives a small bounce
 */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --rp-m-press: 100ms;
    --rp-m-settle: 240ms;
    --rp-m-spring: cubic-bezier(.2, .9, .3, 1.25);
  }

  /* Buttons: press in, spring back. */
  :is(body[data-rp-game], body[data-rp-press]) button:not(:disabled) {
    transition: scale var(--rp-m-settle) var(--rp-m-spring), translate var(--rp-m-settle) var(--rp-m-spring), transform var(--rp-m-settle) var(--rp-m-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
  }
  :is(body[data-rp-game], body[data-rp-press]) button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--rp-m-press); }
  :is(body[data-rp-game], body[data-rp-press]) .btn-back:not(:disabled):active { scale: .88; translate: none; }
  body[data-rp-game] .dot { transition: background-color 180ms ease, width 300ms ease, scale 180ms var(--rp-m-spring); }
  body[data-rp-game] .dot.active { scale: 1.12; }

  /* Onboarding: the scene arrives on every slide change. */
  body[data-rp-game] .onboarding-slide.active .slide-icon { animation: rp-m-character-arrive 380ms var(--rp-m-spring) both; }

  /* Packs: the touch classes from packs.js. */
  body[data-rp-game] .pack-card { transition: transform var(--rp-m-settle) var(--rp-m-spring), border-color 150ms ease; }
  body[data-rp-game] .pack-card.packs-touch-press:not(.locked) { transform: scale(.965); transition-duration: var(--rp-m-press); }
  body[data-rp-game] .pack-card.packs-touch-pop:not(.locked) { animation: rp-m-pop 320ms var(--rp-m-spring); }
  body[data-rp-game] .pack-card.packs-touch-pop:not(.locked) .pack-art { animation: rp-m-nod 360ms ease-out; }

  /* Screens and dialogs. */
  body[data-rp-game] .screen.active { animation: rp-m-fade 220ms ease-out both; }
  :is(body[data-rp-game], body[data-rp-press]) .confirm-dialog-overlay.active .confirm-dialog-modal,
  :is(body[data-rp-game], body[data-rp-press]) .settings-popup-overlay.active .settings-popup-modal { animation: rp-m-paper-arrive 280ms var(--rp-m-spring); }

  /* Utility classes. */
  .rp-m-arrive { animation: rp-m-paper-arrive 300ms var(--rp-m-spring) both; }
  .rp-m-stamp { animation: rp-m-stamp-in 360ms var(--rp-m-spring) both; }
  .rp-m-nod { animation: rp-m-nod 420ms ease-out both; }
  .rp-m-answer { animation: rp-m-answer-stamp 260ms var(--rp-m-spring); }
  .rp-m-stagger > * { animation: rp-m-pop-in 280ms var(--rp-m-spring) both; }
  .rp-m-stagger > :nth-child(2) { animation-delay: 50ms; }
  .rp-m-stagger > :nth-child(3) { animation-delay: 100ms; }
  .rp-m-stagger > :nth-child(4) { animation-delay: 150ms; }
  .rp-m-stagger > :nth-child(5) { animation-delay: 200ms; }
  .rp-m-stagger > :nth-child(n+6) { animation-delay: 250ms; }
}

@keyframes rp-m-character-arrive { from { opacity: 0; scale: .82; rotate: -10deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes rp-m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rp-m-pop { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes rp-m-pop-in { from { opacity: 0; scale: .8; translate: 0 6px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes rp-m-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes rp-m-paper-arrive { from { opacity: 0; translate: 0 14px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes rp-m-stamp-in { from { opacity: 0; scale: 1.45; } to { opacity: 1; scale: 1; } }
@keyframes rp-m-answer-stamp { 0% { scale: .94; } 65% { scale: 1.025; } 100% { scale: 1; } }
/* /game-header.css */
/*
 * «Шапка игры» (shared/client/game-header.ts, bundle /game-header.js): one top bar in every game.
 *   [menu]   [cube + roomplay]   [timer]
 * Fixed at the top; on its screens the game's own back arrow, pause button and «Ещё игры» cube are
 * hidden ([data-rp-gh-hidden]). A game theme sets only tokens, never the classes:
 *   --rp-gh-ink         icons, logo text, timer text (default: the page's --text-primary, else white)
 *   --rp-gh-chip        button and timer background (default: the ink at 14 %)
 *   --rp-gh-line        button border (default: the ink at 24 %)
 *   --rp-gh-timer-bg / --rp-gh-timer-ink   the timer chip (default: chip / ink)
 *   --rp-gh-low         the timer at 5 s and less (default: #ff4d5e)
 *   --rp-gh-space       where the header's screens start (padding-top), under the bar
 * The menu card and the actions it adds to a pause card use the pause screen's fixed dark palette
 * (pause-overlay.css).
 */
:root {
    --rp-gh-space: calc(80px + env(safe-area-inset-top, 0px));
}

.rp-game-header {
    --rp-gh-ink-v: var(--rp-gh-ink, var(--text-primary, #ffffff));
    position: fixed;
    z-index: 70;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 560px);
    box-sizing: border-box;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(44px, auto);
    align-items: center;
    gap: 8px;
    height: 48px;
    color: var(--rp-gh-ink-v);
    font-family: 'Manrope', var(--font-body, system-ui), sans-serif;
    pointer-events: none;
}
.rp-game-header[hidden] { display: none; }
.rp-game-header > * { pointer-events: auto; }

.rp-gh-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-color: var(--rp-gh-line, color-mix(in srgb, var(--rp-gh-ink-v) 24%, transparent));
    background: rgba(255, 255, 255, 0.14);
    background: var(--rp-gh-chip, color-mix(in srgb, var(--rp-gh-ink-v) 14%, transparent));
    color: inherit;
    display: grid;
    place-items: center;
    font-size: 22px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform 0.15s ease;
}
.rp-gh-btn:active { transform: scale(0.9); }

.rp-gh-brand {
    /* Centred on the screen whatever the timer's width. */
    position: absolute;
    left: 50%;
    top: 2px;
    transform: translateX(-50%);
    max-width: calc(100% - 2 * (16px + 44px + 12px));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 10px 0 4px;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
}
.rp-gh-brand:active { transform: translateX(-50%) scale(0.94); }
.rp-gh-cube {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}
.rp-gh-word {
    font-family: 'Unbounded', 'Manrope', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-gh-timer {
    grid-column: 3;
    justify-self: end;
    min-width: 44px;
    height: 44px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.14);
    background: var(--rp-gh-timer-bg, var(--rp-gh-chip, color-mix(in srgb, var(--rp-gh-ink-v) 14%, transparent)));
    color: var(--rp-gh-timer-ink, inherit);
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.rp-gh-timer[hidden] { display: none; }
.rp-gh-timer--low {
    background: var(--rp-gh-low, #ff4d5e);
    color: #ffffff;
    animation: rp-gh-low 1s ease-in-out infinite;
}
@keyframes rp-gh-low {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* The header's screens start under the bar, the same distance in every game (it replaces the room
   each game kept for its own back arrow). */
html.rp-has-game-header .screen.rp-gh-screen { padding-top: var(--rp-gh-space) !important; }
/* Online games pad their .screen-content instead; the round reveal (reveal-results.css) covers the
   screen absolutely. Both start under the bar too. */
html.rp-has-game-header .screen.rp-gh-screen > .screen-content { padding-top: 0 !important; }
html.rp-has-game-header .screen.rp-gh-screen .rr-container { top: var(--rp-gh-space); }
/* An in-flow reveal (.rr-flow) already sits under the bar with the content above it. */
html.rp-has-game-header .screen.rp-gh-screen .rr-flow > .rr-container { top: auto; }
/* The round row of the game template (.game-header: round badge, timer) kept room for the old back
   arrow on the left; the arrow is gone. */
html.rp-has-game-header .screen.rp-gh-screen .game-header { padding-left: 0 !important; }

/* What the header replaces on its screens. */
[data-rp-gh-hidden] { display: none !important; }

/* The menu card (guests, games without a pause) and the actions on every pause card. */
.rp-gh-menu-overlay.active { cursor: default; }
.rp-gh-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 2px;
}
.rp-gh-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 30px;
    border: 2px solid var(--rp-pause-line, rgba(255, 255, 255, 0.26));
    background: transparent;
    color: var(--rp-pause-ink, #ffffff);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.rp-gh-exit {
    border-color: transparent;
    color: var(--rp-pause-muted, rgba(255, 255, 255, 0.74));
}
/* «Сообщить об ошибке»: a quiet link under the card's actions, not a third big button. */
.rp-gh-report {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: center;
    min-height: 40px;
    padding: 6px 12px;
    background: none;
    border: none;
    color: var(--rp-pause-muted, rgba(255, 255, 255, 0.74));
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    opacity: 0.8;
    cursor: pointer;
}
.rp-gh-report .rp-icon { font-size: 16px; }

/* The bug report form over the pause card (shared/client/bug-report.ts): the pause palette, above it. */
.rp-bug-overlay {
    --rp-pause-ink: #ffffff;
    --rp-pause-muted: rgba(255, 255, 255, 0.74);
    --rp-pause-chip: rgba(255, 255, 255, 0.12);
    --rp-pause-line: rgba(255, 255, 255, 0.26);
    position: fixed;
    inset: 0;
    z-index: 990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    overflow-y: auto;
    background: rgba(9, 11, 20, 0.94);
    color: var(--rp-pause-ink);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: rp-pause-in 220ms ease-out;
}
.rp-bug-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    margin: auto;
    text-align: center;
}
.rp-bug-card [hidden] { display: none !important; }
.rp-bug-title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--rp-pause-ink); }
.rp-bug-text {
    width: 100%;
    box-sizing: border-box;
    min-height: 104px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--rp-pause-line);
    background: var(--rp-pause-chip);
    color: var(--rp-pause-ink);
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    resize: vertical;
}
.rp-bug-text::placeholder { color: var(--rp-pause-muted); opacity: 0.8; }
.rp-bug-text:focus { outline: 2px solid var(--rp-pause-ink); outline-offset: 1px; }
.rp-bug-attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 30px;
    border: 2px dashed var(--rp-pause-line);
    background: transparent;
    color: var(--rp-pause-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.rp-bug-preview { position: relative; align-self: center; }
.rp-bug-thumb {
    display: block;
    max-width: 160px;
    max-height: 160px;
    border-radius: 12px;
    border: 1px solid var(--rp-pause-line);
}
.rp-bug-remove {
    position: absolute;
    top: -10px;
    right: -10px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--rp-pause-line);
    background: #12131a;
    color: var(--rp-pause-ink);
    cursor: pointer;
}
.rp-bug-status { margin: 0; font-size: 14px; color: #ffb4b4; }
.rp-bug-overlay .rp-bug-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 4px;
    background: var(--rp-pause-ink);
    color: #12131a;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.rp-bug-overlay .rp-bug-send:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

/* The header's «Выйти из игры» replaces the online pause's own exit link. */
.rp-pause-card:has(> .rp-gh-actions) > .rp-pause-exit { display: none; }

@media (prefers-reduced-motion: reduce) {
    .rp-gh-timer--low { animation: none; }
}
/* /turn-progress.css */
/*
 * «Ход N из M» (shared/client/turn-progress.ts): the turn line + one bar per turn, or the target score +
 * score chips. Palette from the game: --rp-tp-accent (default --game-accent), --rp-tp-ink, --rp-tp-track,
 * --rp-tp-chip, --rp-tp-chip-line.
 */
.rp-turn-progress {
    --rp-tp-accent-c: var(--rp-tp-accent, var(--game-accent, var(--ps-accent, #ff3b6f)));
    --rp-tp-ink-c: var(--rp-tp-ink, var(--text-primary, currentColor));
    width: 100%;
    max-width: 340px;
    margin: 18px auto 14px;
    text-align: center;
    color: var(--rp-tp-ink-c);
}
.rp-turn-progress[hidden] { display: none; }

.rp-tp-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
}
.rp-tp-icon { width: 1.05em; height: 1.05em; color: var(--rp-tp-accent-c); }

.rp-tp-bar {
    display: flex;
    gap: 4px;
    height: 8px;
    margin-top: 10px;
}
.rp-tp-seg {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 99px;
    background: var(--rp-tp-track, color-mix(in srgb, var(--rp-tp-ink-c) 18%, transparent));
}
.rp-tp-seg--done { background: var(--rp-tp-accent-c); opacity: 0.55; }
.rp-tp-seg--now {
    background: var(--rp-tp-accent-c);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rp-tp-accent-c) 30%, transparent);
    animation: rp-tp-now 0.5s ease-out both;
}
.rp-tp-bar--line {
    display: flex;
    gap: 0;
    border-radius: 99px;
    overflow: hidden;
    background: var(--rp-tp-track, color-mix(in srgb, var(--rp-tp-ink-c) 18%, transparent));
}
.rp-tp-fill { height: 100%; background: var(--rp-tp-accent-c); opacity: 0.55; }
.rp-tp-fill--now { opacity: 1; }

/* The last turn: the line in the accent, so the group sees the end is next. */
.rp-turn-progress--last .rp-tp-line {
    padding: 6px 14px;
    border-radius: 99px;
    color: var(--rp-tp-last-ink, #fff);
    background: var(--rp-tp-accent-c);
    animation: rp-tp-now 0.5s ease-out both;
}
.rp-turn-progress--last .rp-tp-icon { color: inherit; }

.rp-tp-scores {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.rp-tp-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 36px;
    padding: 4px 6px 4px 12px;
    border-radius: 99px;
    border: 1.5px solid var(--rp-tp-chip-line, color-mix(in srgb, var(--rp-tp-ink-c) 22%, transparent));
    background: var(--rp-tp-chip, color-mix(in srgb, var(--rp-tp-ink-c) 8%, transparent));
    font-size: 14px;
    font-weight: 600;
}
.rp-tp-chip--current { border-color: var(--rp-tp-accent-c); }
.rp-tp-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; }
.rp-tp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-tp-name .rp-player { font-size: inherit; }
.rp-tp-score {
    min-width: 28px;
    padding: 3px 8px;
    border-radius: 99px;
    font-weight: 800;
    color: var(--rp-tp-last-ink, #fff);
    background: var(--rp-tp-accent-c);
    font-variant-numeric: tabular-nums;
}

.rp-tp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@keyframes rp-tp-now {
    from { transform: scale(0.92); opacity: 0.4; }
    to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .rp-tp-seg--now, .rp-turn-progress--last .rp-tp-line { animation: none; }
}