/* The duel replay modal's styling.
 *
 * Moved out of templates/_duel_replay_modal.html on 2026-08-31. It was inline in the
 * HTML, so no browser could cache a byte of it and it was re-sent on
 * every request. url_for('static', ...) stamps this URL with the
 * file's own CONTENT hash and serves it immutable for a year, so it
 * re-downloads when these rules change and never otherwise.
 *
 * Byte-for-byte the block that was there; only its address moved.
 */

/* ================================================================
   Replay modal — Marvel Snap meets a Pattaya back-room table.
   Scoped under .drm-root so nothing leaks into the rest of the app.
   ================================================================ */
.drm-root[hidden] { display: none !important; }
.drm-root {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    font-family: "Inter", -apple-system, system-ui, sans-serif;
    color: #f4f1e8;
}
.drm-backdrop {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 40%,
        rgba(120, 18, 18, 0.55) 0%,
        rgba(0, 0, 0, 0.92) 75%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: drmFadeIn 0.25s ease-out;
    cursor: pointer;
}
@keyframes drmFadeIn { from { opacity: 0; } to { opacity: 1; } }

.drm-shell {
    position: relative;
    width: min(820px, 96vw);
    max-height: 96vh;
    background: linear-gradient(160deg,
        #1a0e0e 0%,
        #2a0f0f 35%,
        #1a0a0a 70%,
        #0c0606 100%);
    border: 1px solid #4a1c1c;
    border-radius: 18px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 80px rgba(220, 38, 38, 0.18);
    overflow: hidden;
    display: flex; flex-direction: column;
    animation: drmModalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes drmModalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Top/bottom bars (bar names + scores) ---- */
.drm-bar {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px; align-items: center;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.drm-bar-bot {
    border-bottom: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.drm-bar-avatar {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    background: linear-gradient(135deg, var(--drm-c1, #3b82f6), var(--drm-c2, #60a5fa));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    color: #fff;
    overflow: hidden;
}
.drm-bar-avatar img {
    width: 100%; height: 100%; object-fit: cover;
}
.drm-bar-text { min-width: 0; }
.drm-bar-eyebrow {
    font-size: 9px; font-weight: 800; letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.drm-bar-name {
    font-size: 15px; font-weight: 800;
    color: #f4f1e8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drm-bar-top { --drm-c1: var(--drm-top-c1, #b91c1c); --drm-c2: var(--drm-top-c2, #dc2626); }
.drm-bar-bot { --drm-c1: var(--drm-bot-c1, #3b82f6); --drm-c2: var(--drm-bot-c2, #60a5fa); }

.drm-score-chip {
    min-width: 48px;
    text-align: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-weight: 800;
    font-size: 22px;
    line-height: 1;
    color: #f4f1e8;
    transition: transform 0.18s, color 0.18s, background 0.18s;
}
.drm-score-chip.drm-tick {
    transform: scale(1.25);
    background: #16a34a;
    color: #fff;
    box-shadow: 0 0 24px rgba(22, 163, 74, 0.6);
}
.drm-score-chip.drm-tick-loss {
    transform: scale(1.2);
    background: #4b1717;
    color: #f4f1e8;
}

/* ---- Centre stage ---- */
.drm-stage {
    position: relative;
    flex: 1; min-height: 540px;
    overflow: hidden;
    background: linear-gradient(180deg,
        rgba(80, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.7) 100%);
    display: grid;
    grid-template-rows: 52px 1fr 1fr 110px;
}
.drm-stage-bg {
    position: absolute; inset: 0;
    pointer-events: none;
}
.drm-bg-neon {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(220, 38, 38, 0.22), transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.18), transparent 45%),
        radial-gradient(circle at 50% 100%, rgba(245, 158, 11, 0.15), transparent 55%);
    animation: drmNeonPulse 6s ease-in-out infinite;
}
@keyframes drmNeonPulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.08); }
}
.drm-bg-grain {
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 2px,
            rgba(0, 0, 0, 0.12) 2px,
            rgba(0, 0, 0, 0.12) 3px);
    opacity: 0.35;
    mix-blend-mode: overlay;
}

.drm-round-label {
    /* Sits in the first row of the stage grid (56px tall). Inline,
       centred horizontally and vertically. No absolute positioning so
       it can't collide with the card slots below. */
    z-index: 2;
    justify-self: center;
    align-self: center;
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
}
.drm-round-num {
    font-weight: 900; font-size: 18px;
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.45);
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    letter-spacing: 0.06em;
}
.drm-round-of {
    font-size: 10px; letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 700;
}
.drm-round-label.drm-round-bloom {
    animation: drmRoundBloom 0.6s ease-out;
}
@keyframes drmRoundBloom {
    0%   { transform: scale(0.6); opacity: 0; }
    50%  { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ---- Card slots ---- */
.drm-slots {
    /* Spans the middle two rows of the stage grid (top card row +
       VS divider + bottom card row). Cards live inside drm-card-stack
       slots that are absolutely-positioned children but the slots
       themselves flow in the grid so the round label and flavour line
       can't overlap. */
    grid-row: 2 / span 2;
    display: grid;
    grid-template-rows: 1fr 36px 1fr;
    align-items: center; justify-items: center;
    z-index: 1;
    position: relative;
}
.drm-slot {
    position: relative;
    width: 100%;
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
}
.drm-slot-label {
    font-size: 9px; letter-spacing: 1.6px; font-weight: 800;
    color: rgba(255, 255, 255, 0.35);
}
.drm-card-stack {
    position: relative;
    width: 168px; height: 232px;
}
.drm-vs {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-weight: 900; font-size: 22px; letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.16);
    padding: 4px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.drm-vs.drm-vs-flare {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.4);
    animation: drmVsFlare 0.35s ease-out;
}
@keyframes drmVsFlare {
    0% { transform: scale(1); }
    50% { transform: scale(1.6); color: #fff; }
    100% { transform: scale(1); }
}

/* ---- The cards themselves ---- */
.drm-card {
    position: absolute;
    top: 0; left: 50%;
    width: 168px; height: 232px;
    margin-left: -84px;
    border-radius: 14px;
    background: #0f0808;
    border: 2px solid var(--card-frame, #5b1f1f);
    box-shadow:
        0 20px 36px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.4) inset,
        0 0 0 3px var(--card-edge, #b91c1c) inset;
    overflow: hidden;
    transform-origin: center 60%;
    opacity: 0;
    will-change: transform, opacity;
}
.drm-card.is-attack { --card-frame: #b91c1c; --card-edge: rgba(220,38,38,0.5); }
.drm-card.is-defence { --card-frame: #1e3a8a; --card-edge: rgba(59,130,246,0.5); }
.drm-card.slamming {
    animation: drmSlam 0.42s cubic-bezier(0.4, 0, 0.4, 1) forwards;
}
@keyframes drmSlam {
    0%   { opacity: 0; transform: translateY(-140px) rotate(-8deg) scale(1.25); }
    60%  { opacity: 1; transform: translateY(8px) rotate(2deg) scale(1.05); }
    78%  { transform: translateY(-3px) rotate(-1deg) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}
.drm-card.from-bot.slamming {
    animation: drmSlamBot 0.42s cubic-bezier(0.4, 0, 0.4, 1) forwards;
}
@keyframes drmSlamBot {
    0%   { opacity: 0; transform: translateY(140px) rotate(8deg) scale(1.25); }
    60%  { opacity: 1; transform: translateY(-8px) rotate(-2deg) scale(1.05); }
    78%  { transform: translateY(3px) rotate(1deg) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

.drm-card-art {
    position: absolute;
    inset: 8px 8px 70px;
    border-radius: 8px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 40%, rgba(220, 38, 38, 0.5), transparent 65%),
        #1a0707;
}
.drm-card-art img {
    width: 100%; height: 100%; object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
}
/* Burst overlay revealed at impact */
.drm-card-burst {
    position: absolute;
    inset: -10% -10%;
    pointer-events: none;
    opacity: 0;
    z-index: 4;
}
.drm-card-burst img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(255, 200, 80, 0.6));
}
.drm-card.slamming .drm-card-burst {
    animation: drmBurst 0.55s ease-out 0.25s forwards;
}
@keyframes drmBurst {
    0%   { opacity: 0; transform: scale(0.6) rotate(-8deg); }
    35%  { opacity: 1; transform: scale(1.15) rotate(0deg); }
    100% { opacity: 0; transform: scale(1.4) rotate(8deg); }
}

.drm-card-tag {
    position: absolute;
    top: 6px; right: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.65);
    font-size: 9px; font-weight: 800; letter-spacing: 1px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    z-index: 2;
}
.drm-card.is-attack .drm-card-tag { background: #b91c1c; }
.drm-card.is-defence .drm-card-tag { background: #1e40af; }

.drm-card-name {
    position: absolute;
    left: 8px; right: 8px; bottom: 30px;
    text-align: center;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: #fde68a;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    text-transform: uppercase;
    z-index: 2;
}
.drm-card-strap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 26px;
    padding: 0 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.04em;
    background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent);
    text-align: center;
    z-index: 2;
}

/* Win/loss glow after resolution. CRITICAL: every keyframe must
   explicitly carry opacity: 1. The base .drm-card rule sets opacity:
   0 (so the slam animation can run from 0 → 1 with `forwards`).
   When THIS animation replaces the slam animation on the same
   element, the slam's `forwards` opacity:1 stops applying, and any
   keyframe missing `opacity` falls back to the base rule's `opacity:
   0` — which made the cards vanish the moment a round resolved. */
.drm-card.won-round {
    animation: drmCardWin 0.5s ease-out forwards;
}
@keyframes drmCardWin {
    0%   { opacity: 1; box-shadow: 0 18px 32px rgba(0,0,0,0.55), 0 0 0 3px rgba(220,38,38,0.5) inset; }
    40%  { opacity: 1; box-shadow: 0 18px 32px rgba(0,0,0,0.55), 0 0 0 4px rgba(251,191,36,1) inset, 0 0 40px rgba(251,191,36,0.7); transform: scale(1.04); }
    100% { opacity: 1; box-shadow: 0 18px 32px rgba(0,0,0,0.55), 0 0 0 3px rgba(251,191,36,0.7) inset, 0 0 20px rgba(251,191,36,0.4); transform: scale(1.02); }
}
.drm-card.lost-round {
    animation: drmCardLose 0.5s ease-out forwards;
}
@keyframes drmCardLose {
    0%   { opacity: 1; filter: none; }
    100% { opacity: 0.85; filter: grayscale(0.85) brightness(0.55); transform: scale(0.92); }
}
.drm-card.tied-round {
    animation: drmCardTie 0.5s ease-out forwards;
}
@keyframes drmCardTie {
    0%   { opacity: 1; filter: none; }
    100% { opacity: 0.9; filter: brightness(0.7) saturate(0.4); transform: scale(0.96); }
}

/* Flying +1 indicator */
.drm-plusone {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 28px; font-weight: 900;
    color: #fbbf24;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.8);
    pointer-events: none;
    z-index: 5;
    animation: drmPlusOne 0.9s ease-out forwards;
}
@keyframes drmPlusOne {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    25%  { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
    100% { opacity: 0; transform: translate(-50%, -220%) scale(0.9); }
}

/* ---- Per-round result block ----
   Lives in row 4 of the stage grid (110px tall). Renders three
   stacked lines after a round resolves so a viewer (logged-in or
   public spectator) can read off the result at a glance:
     line 1: trophy emoji + winner bar name in gold (or "Round tied")
     line 2: the RPS rule + short "why" mnemonic
     line 3: italic Pattaya-tabloid story (the flavour line). */
.drm-flavour {
    grid-row: 4;
    align-self: center;
    justify-self: center;
    max-width: 94%;
    text-align: center;
    color: #fde68a;
    padding: 8px 16px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(251, 191, 36, 0.2);
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.drm-flavour.drm-fr-won { border-color: rgba(251, 191, 36, 0.55); background: linear-gradient(180deg, rgba(70, 30, 5, 0.85), rgba(0, 0, 0, 0.7)); }
.drm-flavour.drm-fr-tied { border-color: rgba(148, 163, 184, 0.35); background: rgba(0, 0, 0, 0.65); }
.drm-fr-headline {
    display: inline-flex; align-items: center;
    gap: 10px; flex-wrap: wrap; justify-content: center;
    font-size: 13px;
    font-weight: 800;
}
.drm-fr-trophy { font-size: 18px; line-height: 1; }
.drm-fr-winner {
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.45);
    letter-spacing: 0.01em;
    font-size: 15px;
}
.drm-fr-winner.drew { color: #cbd5e1; text-shadow: none; }
.drm-fr-rule {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.16);
    color: #fef3c7;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.02em;
    font-style: normal;
}
.drm-fr-tied .drm-fr-rule {
    background: rgba(148, 163, 184, 0.15);
    color: #e2e8f0;
}
.drm-fr-story {
    font-style: italic;
    color: #fde68a;
    font-size: 13px;
    opacity: 0.92;
}
.drm-fr-tied .drm-fr-story { color: #e2e8f0; }
.drm-flavour.drm-flavour-show {
    animation: drmFlavourIn 0.4s ease-out forwards;
}
@keyframes drmFlavourIn {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ---- End-of-replay banner ----
   The win/loss banner slides up from below the stage AFTER all
   three rounds have visibly resolved. It sits OUTSIDE the stage in
   the modal shell so the cards stay fully visible at the bottom of
   the play area — the player can read the cards while reviewing
   the final score, instead of having a curtain drop over them. */
.drm-endbar {
    display: flex; align-items: center;
    gap: 16px;
    padding: 16px 22px;
    background: linear-gradient(180deg, rgba(40, 8, 8, 0.95), rgba(20, 4, 4, 0.98));
    border-top: 1px solid rgba(251, 191, 36, 0.28);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.5);
    animation: drmEndbarSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.drm-endbar[hidden] { display: none; }
.drm-endbar::before {
    /* Subtle gold pinstripe pattern across the banner. */
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(60deg,
        transparent 0px,
        transparent 18px,
        rgba(251, 191, 36, 0.05) 18px,
        rgba(251, 191, 36, 0.05) 19px);
    pointer-events: none;
}
@keyframes drmEndbarSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.drm-endbar-result {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
    z-index: 1;
}
.drm-endbar-headline {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 800;
}
.drm-endbar-text {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.15;
}
.drm-endbar-text.won  { color: #fbbf24; text-shadow: 0 0 16px rgba(251, 191, 36, 0.4); }
.drm-endbar-text.lost { color: #ef4444; }
.drm-endbar-text.drew { color: #94a3b8; }
.drm-endbar-pot {
    margin-top: 4px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 18px;
    font-weight: 800;
    color: #fbbf24;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.35);
    animation: drmPotDrop 0.6s 0.2s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.drm-endbar-text.lost ~ .drm-endbar-pot,
.drm-endbar-pot.lost { color: #ef4444; text-shadow: none; }
@keyframes drmPotDrop {
    from { opacity: 0; transform: translateY(-12px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0)     scale(1); }
}
.drm-endbar-actions {
    display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap;
    justify-content: flex-end;
    z-index: 1;
}
.drm-btn {
    appearance: none;
    border: 0;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
}
.drm-btn-primary {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a0e0e;
    box-shadow: 0 4px 14px rgba(251, 191, 36, 0.4);
}
.drm-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(251, 191, 36, 0.55); }
.drm-btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #f4f1e8;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.drm-btn-ghost:hover { background: rgba(255, 255, 255, 0.14); }

/* Coin shower — sits behind the cards at low z-index so it never
   blocks the action even when an endgame win drops a flurry of
   coins. The shower is mounted in the stage, not in the endbar,
   so the cards remain visible. */
.drm-coinshower {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.drm-coin {
    position: absolute; top: -28px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fef3c7, #fbbf24 60%, #b45309 100%);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.65);
    animation: drmCoinFall linear forwards;
}
@keyframes drmCoinFall {
    0%   { transform: translateY(-30px) rotate(0deg); opacity: 0; }
    8%   { opacity: 1; }
    100% { transform: translateY(560px) rotate(720deg); opacity: 0.5; }
}

/* ---- "Tap to continue" affordance ----
   Lives inside the bottom bar (between name and score) so a round
   resolution doesn't add a dedicated row of vertical chrome below
   the stage. The bottom bar uses flex to give: avatar | name |
   continue-CTA (centered, flex:1) | score. When the CTA is hidden
   the flex:1 collapses to flex:0 and the score sits flush right
   against the name. */
.drm-bar-bot {
    /* Override the grid columns from .drm-bar so we can host the
       continue button in the middle of the row. */
    display: flex !important;
    align-items: center;
    gap: 12px;
}
.drm-bar-bot .drm-bar-avatar { flex: 0 0 44px; }
.drm-bar-bot .drm-bar-text { flex: 0 1 auto; min-width: 0; }
.drm-bar-bot .drm-score-col { flex: 0 0 auto; margin-left: auto; }
.drm-bar-bot .drm-continue {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}
.drm-bar-bot .drm-continue[hidden] {
    /* When the CTA isn't showing, collapse the slot entirely so the
       bar reverts to avatar + name + score with the score flush right
       (via margin-left: auto). The button reappearing pushes name
       slightly left and score slightly right — minor reflow, no
       layout jank. */
    display: none !important;
}
.drm-continue-btn {
    appearance: none;
    cursor: pointer;
    border: 0;
    padding: 9px 22px;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: 0.02em;
    color: #1a0e0e;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 4px 14px rgba(251, 191, 36, 0.4);
    animation: drmContinuePulse 1.5s ease-in-out infinite;
    transition: transform 0.12s, box-shadow 0.12s;
    white-space: nowrap;
}
.drm-continue-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(251, 191, 36, 0.55);
}
@keyframes drmContinuePulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(251, 191, 36, 0.4); }
    50%      { box-shadow: 0 4px 22px rgba(251, 191, 36, 0.7); }
}

/* ---- RPS cycle reference strip ----
   Always-visible reminder of what beats what. Sits between the
   stage and the toolbar. Pills tint up when the current round's
   matchup matches that rule. */
.drm-cycle {
    display: flex; align-items: center;
    gap: 8px; flex-wrap: wrap;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.42);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.65);
}
.drm-cycle-label {
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    margin-right: 4px;
}
.drm-cycle-pill {
    display: inline-flex; align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 700;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.drm-cycle-em { font-size: 14px; line-height: 1; }
.drm-cycle-pill.is-active {
    background: rgba(251, 191, 36, 0.18);
    border-color: rgba(251, 191, 36, 0.55);
    color: #fef3c7;
}

/* ---- Per-round outcome dots ----
   Three small marks below each bar's score chip showing the per-
   round outcome from that bar's perspective: ✓ won that round, ✗
   lost, – tied, ○ not played yet. Lets a viewer read off "I won
   R1, lost R2, tied R3" without parsing the cards. */
.drm-round-dots {
    display: inline-flex; gap: 4px; margin-top: 4px;
    justify-content: center;
}
.drm-round-dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.4);
    line-height: 1;
}
.drm-round-dot.won  { background: #16a34a; border-color: #16a34a; color: #fff; }
.drm-round-dot.lost { background: rgba(220, 38, 38, 0.85); border-color: #b91c1c; color: #fff; }
.drm-round-dot.tied { background: rgba(148, 163, 184, 0.35); border-color: #94a3b8; color: #f4f1e8; }

/* Score column: chip on top, three round dots below. The dots
   fill in (won/lost/tied) as each round resolves, so the player
   can see at a glance "I won R1, lost R2, tied R3" without
   re-watching the cards. */
.drm-score-col {
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
}

/* ---- Toolbar ---- */
.drm-toolbar {
    display: flex; align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.55);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.drm-tool {
    appearance: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f4f1e8;
    width: 32px; height: 32px;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s, transform 0.1s;
}
.drm-tool:hover { background: rgba(255, 255, 255, 0.14); }
.drm-tool:active { transform: scale(0.94); }
.drm-tool-sep {
    width: 1px; height: 20px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 4px;
}
.drm-tool-spacer { flex: 1; }
.drm-tool-close { background: rgba(220, 38, 38, 0.18); border-color: rgba(220, 38, 38, 0.3); }
.drm-tool-close:hover { background: rgba(220, 38, 38, 0.3); }

@media (max-width: 720px) {
    .drm-shell { width: 100vw; max-height: 100vh; border-radius: 0; }
    .drm-stage { min-height: 540px; grid-template-rows: 44px 1fr 1fr 120px; }
    .drm-card-stack { width: 140px; height: 196px; }
    .drm-card { width: 140px; height: 196px; margin-left: -70px; }
    .drm-card-name { font-size: 12px; }
    .drm-endbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
    .drm-endbar-actions { justify-content: stretch; }
    .drm-endbar-actions .drm-btn { flex: 1; justify-content: center; }
    .drm-endbar-text { font-size: 18px; }
    .drm-endbar-pot { font-size: 16px; }
    /* "Tap for next round" CTA on mobile: avatar+name+score won't fit
       with a centred pill between them, so wrap the button onto its
       own row spanning the full bar. */
    .drm-bar-bot { flex-wrap: wrap; row-gap: 10px; }
    .drm-bar-bot .drm-continue {
        order: 5;
        flex: 0 0 100%;
        justify-content: stretch;
    }
    .drm-bar-bot .drm-continue-btn {
        width: 100%;
        padding: 12px 14px;
        font-size: 14px;
    }
}