/* ============================================================
   MTG Commander Tracker
   Copyright (c) 2026 Christian Munk. All rights reserved.
   Unauthorized copying, distribution, or modification
   of this code is strictly prohibited.

   MTG Commander Tracker — Dark Theme with Orange Accent

   Color System:
     --orange:      #f97316 / #ea580c  (primary accent)
     --bg-0:        #09090d            (page background)
     --bg-1:        #111116            (container)
     --bg-2:        #18181f            (cards / panels)
     --bg-3:        #21212a            (elevated)
     --bg-4:        #2a2a36            (hover)
     --border-0:    #1e1e28            (subtle)
     --border-1:    #2e2e3e            (default)
     --text-0:      #f0f0f6            (primary)
     --text-1:      #9898ae            (secondary)
     --text-2:      #5c5c72            (muted)
     --green:       #22c55e
     --red:         #ef4444
     --gold:        #f59e0b
   ============================================================ */

:root {
    --orange:           #f97316;
    --orange-light:     #fb923c;
    --orange-hover:     #ea580c;
    --orange-glow:      rgba(249, 115, 22, 0.22);
    --orange-subtle:    rgba(249, 115, 22, 0.08);
    --orange-border:    rgba(249, 115, 22, 0.3);

    --bg-0:  #09090d;
    --bg-1:  #111116;
    --bg-2:  #18181f;
    --bg-3:  #21212a;
    --bg-4:  #2a2a36;

    --border-0: #1a1a24;
    --border-1: #28283a;
    --border-2: #38384e;
    --border-focus: rgba(249, 115, 22, 0.5);

    --text-0: #f0f0f6;
    --text-1: #9898ae;
    --text-2: #5c5c72;

    --green:          #22c55e;
    --green-hover:    #16a34a;
    --green-light:    #4ade80;
    --green-subtle:   rgba(34, 197, 94, 0.1);
    --green-dark-bg:  #0d1f14;

    --red:            #ef4444;
    --red-hover:      #dc2626;
    --red-subtle:     rgba(239, 68, 68, 0.12);
    --red-dark-bg:    #1f0d0d;

    --gold:           #f59e0b;
    --gold-subtle:    rgba(245, 158, 11, 0.1);
    --blue:           #3b82f6;
    --blue-subtle:    rgba(59, 130, 246, 0.1);

    --shadow-sm:   0 2px 8px rgba(0,0,0,0.5);
    --shadow-md:   0 4px 20px rgba(0,0,0,0.55);
    --shadow-lg:   0 8px 40px rgba(0,0,0,0.65);
    --shadow-glow: 0 0 24px var(--orange-glow);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
html[data-theme="light"] {
    --orange:           #e86c0a;
    --orange-light:     #f97316;
    --orange-hover:     #c2570c;
    --orange-glow:      rgba(232, 108, 10, 0.18);
    --orange-subtle:    rgba(232, 108, 10, 0.08);
    --orange-border:    rgba(232, 108, 10, 0.3);

    --bg-0:  #f2f2f8;
    --bg-1:  #ffffff;
    --bg-2:  #f0f0f8;
    --bg-3:  #e6e6f4;
    --bg-4:  #dcdcee;

    --border-0: #e4e4f0;
    --border-1: #d4d4e8;
    --border-2: #c4c4dc;
    --border-focus: rgba(232, 108, 10, 0.4);

    --text-0: #1a1a2e;
    --text-1: #505078;
    --text-2: #8888aa;

    --green:          #16a34a;
    --green-hover:    #15803d;
    --green-light:    #22c55e;
    --green-subtle:   rgba(22, 163, 74, 0.12);
    --green-dark-bg:  #f0faf5;

    --red:            #dc2626;
    --red-hover:      #b91c1c;
    --red-subtle:     rgba(220, 38, 38, 0.1);
    --red-dark-bg:    #fef2f2;

    --gold:           #d97706;
    --gold-subtle:    rgba(217, 119, 6, 0.1);
    --blue:           #2563eb;
    --blue-subtle:    rgba(37, 99, 235, 0.1);

    --shadow-sm:   0 2px 8px rgba(0,0,0,0.08);
    --shadow-md:   0 4px 20px rgba(0,0,0,0.1);
    --shadow-lg:   0 8px 40px rgba(0,0,0,0.14);
    --shadow-glow: 0 0 24px var(--orange-glow);
}

html[data-theme="light"] body {
    background-image:
        radial-gradient(ellipse at 30% 0%, rgba(232,108,10,0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 100%, rgba(194,87,12,0.04) 0%, transparent 50%);
}

/* ============================================================
   COLORBLIND THEME (deuteranopia-friendly: blue replaces green, amber replaces red)
   ============================================================ */
html[data-theme="colorblind"] {
    --green:          #3b82f6;
    --green-hover:    #2563eb;
    --green-light:    #60a5fa;
    --green-subtle:   rgba(59, 130, 246, 0.1);
    --green-dark-bg:  #0d1525;

    --red:            #f59e0b;
    --red-hover:      #d97706;
    --red-subtle:     rgba(245, 158, 11, 0.12);
    --red-dark-bg:    #1f1a0a;
}

/* ============================================================
   NEON THEME
   ============================================================ */
html[data-theme="neon"] {
    --orange:           #00e5ff;
    --orange-light:     #4df0ff;
    --orange-hover:     #00b8cc;
    --orange-glow:      rgba(0, 229, 255, 0.25);
    --orange-subtle:    rgba(0, 229, 255, 0.08);
    --orange-border:    rgba(0, 229, 255, 0.3);

    --bg-0:  #050508;
    --bg-1:  #08081a;
    --bg-2:  #0c0c22;
    --bg-3:  #10102a;
    --bg-4:  #181835;

    --border-0: #1a1a38;
    --border-1: #22224a;
    --border-2: #2a2a5a;
    --border-focus: rgba(0, 229, 255, 0.5);

    --text-0: #e0f0ff;
    --text-1: #6080b0;
    --text-2: #354060;

    --green:          #00ff88;
    --green-hover:    #00cc6a;
    --green-light:    #4dffaa;
    --green-subtle:   rgba(0, 255, 136, 0.1);
    --green-dark-bg:  #001a0f;

    --red:            #ff2d78;
    --red-hover:      #cc1a58;
    --red-subtle:     rgba(255, 45, 120, 0.12);
    --red-dark-bg:    #1a0010;

    --gold:           #ffe600;
    --gold-subtle:    rgba(255, 230, 0, 0.1);
    --blue:           #a855f7;
    --blue-subtle:    rgba(168, 85, 247, 0.1);

    --shadow-sm:   0 2px 8px rgba(0,0,0,0.7);
    --shadow-md:   0 4px 20px rgba(0,0,0,0.75);
    --shadow-lg:   0 8px 40px rgba(0,0,0,0.85);
    --shadow-glow: 0 0 30px rgba(0, 229, 255, 0.2);
}

html[data-theme="neon"] body {
    background-image:
        radial-gradient(ellipse at 30% 0%, rgba(0,229,255,0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 100%, rgba(0,150,200,0.05) 0%, transparent 50%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Wider, easier-to-grab scrollbar on mobile touch screens */
@media (max-width: 768px), (pointer: coarse) {
    html::-webkit-scrollbar { width: 18px; }
    html::-webkit-scrollbar-track {
        background: var(--bg-2);
        border-radius: 9px;
    }
    html::-webkit-scrollbar-thumb {
        background: var(--orange);
        border-radius: 9px;
        border: 3px solid var(--bg-2);
        min-height: 48px;
    }
    html::-webkit-scrollbar-thumb:active {
        background: var(--orange-hover);
    }
}

body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg-0);
    background-image:
        radial-gradient(ellipse at 30% 0%, rgba(249,115,22,0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 100%, rgba(194,65,12,0.05) 0%, transparent 50%);
    min-height: 100vh;
    padding: 20px;
    color: var(--text-0);
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background: var(--bg-1);
    border-radius: var(--radius-xl);
    padding: 30px;
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.04);
    border: 1px solid var(--border-1);
    position: relative;
}

h1 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.5em;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--orange-light) 0%, var(--orange) 50%, var(--orange-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#logoHomeBtn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    background: inherit;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-image: linear-gradient(135deg, var(--orange-light) 0%, var(--orange) 50%, var(--orange-hover) 100%);
    transition: opacity 0.2s;
}

#logoHomeBtn:hover {
    opacity: 0.75;
}

@media (max-width: 1024px) {
    #logoHomeBtn { font-size: inherit; }
}

/* ============================================================
   SITE HEADER — logo + auth button row
   ============================================================ */
.site-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.site-header-spacer {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 100;
    display: flex;
    align-items: center;
}

@media (max-width: 1024px) {
    .site-header-spacer {
        top: 12px;
        left: 14px;
    }
}

.site-header-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    text-align: center;
}

.site-tagline {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-2);
}

.site-header h1 {
    text-align: center;
    margin-bottom: 2px;
}

.auth-area {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 1024px) {
    .auth-area {
        top: 12px;
        right: 14px;
    }
}

.user-display-name {
    color: var(--text-1);
    font-size: 0.85rem;
    white-space: nowrap;
    display: none;
}

.btn-google-login {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--orange-subtle);
    color: var(--orange-light);
    border: 1px solid var(--orange-border);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}

.btn-google-login:hover {
    background: rgba(249, 115, 22, 0.16);
    box-shadow: 0 0 10px var(--orange-glow);
    color: #fff;
}

.btn-google-login.btn-signed-in {
    background: transparent;
    color: var(--text-1);
    border-color: var(--border-1);
}

.btn-google-login.btn-signed-in:hover {
    background: var(--bg-3);
    box-shadow: none;
    color: var(--red);
    border-color: var(--red);
}

@media (max-width: 1024px) {
    .user-display-name { display: none !important; }
    .btn-google-login span { display: none; }
    .btn-google-login { padding: 5px 7px; font-size: 0.75rem; }
    .btn-google-login svg { width: 15px; height: 15px; }
}

/* ============================================================
   LOGIN MODAL
   ============================================================ */
.login-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.login-modal {
    position: relative;
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: 36px 32px 28px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.login-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: var(--text-2);
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
}
.login-modal-close:hover { color: var(--text-1); background: var(--bg-3); }

.login-modal-title {
    margin: 0 0 4px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-1);
    text-align: center;
}

.login-modal-google {
    width: 100%;
    justify-content: center;
    font-size: 0.9rem;
    padding: 10px 16px;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-2);
    font-size: 0.78rem;
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-1);
}

#emailAuthForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    font-size: 0.9rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.login-input:focus {
    outline: none;
    border-color: var(--orange);
}

.login-submit-btn {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, var(--orange), var(--orange-hover));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 2px 10px var(--orange-glow);
    transition: opacity 0.15s;
}
.login-submit-btn:hover { opacity: 0.88; }

.auth-error {
    color: var(--red, #e05252);
    font-size: 0.8rem;
    margin: 0;
    min-height: 1em;
    text-align: center;
}

.auth-toggle-row {
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-2);
    margin: 0;
}
.auth-toggle-link {
    color: var(--orange);
    text-decoration: none;
}
.auth-toggle-link:hover { text-decoration: underline; }

.auth-forgot-link {
    display: inline;
    font-size: 0.78rem;
    color: var(--orange);
    text-decoration: none;
    margin-top: 4px;
}
.auth-forgot-link:hover { text-decoration: underline; }

h2 {
    color: var(--text-1);
    margin-bottom: 25px;
    text-align: center;
    font-size: 1.8em;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Step visibility */
.step {
    display: none;
    animation: fadeIn 0.3s ease-out;
}

.step.active {
    display: block;
}


@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Player Count Carousel ── */
.pcc-carousel {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px calc(50% - 76px);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    margin: 28px 0 20px;
}

.pcc-carousel::-webkit-scrollbar { display: none; }

.pcc-carousel.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.pcc-card {
    flex-shrink: 0;
    scroll-snap-align: center;
    width: 152px;
    padding: 20px 12px 16px;
    background: var(--bg-2);
    border: 1.5px solid var(--border-1);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-1);
    transition:
        transform 0.08s ease-out,
        opacity 0.08s ease-out,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    transform-origin: center center;
}

.pcc-card.is-active {
    border-color: var(--orange-border);
    box-shadow: 0 0 0 1px var(--orange-border), 0 8px 28px var(--orange-glow);
    color: var(--orange);
}

.pcc-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-2);
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 4px;
    transition: opacity 0.4s ease;
    pointer-events: none;
    user-select: none;
}

.pcc-swipe-hint.hint-fade {
    opacity: 0;
}

.pcc-swipe-arrow {
    font-size: 1.1em;
    animation: pcc-hint-pulse 1.6s ease-in-out infinite;
}

.pcc-swipe-arrow:last-child {
    animation-delay: 0.8s;
}

@keyframes pcc-hint-pulse {
    0%, 100% { opacity: 0.4; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(2px); }
}

.pcc-swipe-arrow:first-child {
    animation-name: pcc-hint-pulse-left;
}

@keyframes pcc-hint-pulse-left {
    0%, 100% { opacity: 0.4; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(-2px); }
}

.pcb-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 4px;
    min-height: 60px;
}

.pcb-icons[data-count="4"] { max-width: 64px; }
.pcb-icons[data-count="5"] { max-width: 88px; }
.pcb-icons[data-count="6"] { max-width: 88px; }

.pcb-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.pcb-label {
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-2);
}

.pcc-card.is-active .pcb-label {
    color: var(--orange-light);
}

@media (hover: hover) and (min-width: 1025px) {
    .pcc-carousel {
        padding: 16px calc(50% - 76px);
        gap: 24px;
        cursor: grab;
    }
}

/* Buttons */
.btn-primary,
.btn-secondary,
.btn-danger {
    padding: 15px 30px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1.05em;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    margin: 10px 5px;
    letter-spacing: -0.01em;
}

.btn-primary {
    background: linear-gradient(135deg, var(--orange), var(--orange-hover));
    color: white;
    width: 100%;
    box-shadow: 0 4px 16px var(--orange-glow);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--orange-light), var(--orange));
    transform: translateY(-2px);
    box-shadow: 0 6px 24px var(--orange-glow);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: var(--green);
    color: white;
    box-shadow: 0 4px 14px rgba(34,197,94,0.3);
}

.btn-secondary:hover {
    background: var(--green-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34,197,94,0.35);
}

.btn-danger {
    background: var(--red);
    color: white;
    box-shadow: 0 4px 14px rgba(239,68,68,0.25);
}

.btn-danger:hover {
    background: var(--red-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239,68,68,0.3);
}

/* Player Selection */
/* ---- Select Players: portrait-card grid ---- */

.player-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0;
    justify-content: flex-start;
}

/* portrait (locked / empty) — width driven by data-portrait-cols */
.player-slot {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    min-width: 0;
}

/* 2-col: strictly 50% each — no max-width so 3 can't sneak onto one row */
.player-slots[data-portrait-cols="2"] .player-slot--portrait {
    flex: 0 0 calc(50% - 6px);
}

/* 3-col */
.player-slots[data-portrait-cols="3"] .player-slot--portrait {
    flex: 0 0 calc(33.333% - 8px);
}

/* editing slot — floats to top of the grid, full-width */
.player-slot--editing {
    order: -1;
    flex: 0 0 100%;
    background: var(--bg-2);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--orange);
    border-top: 1px solid var(--border-1);
    border-right: 1px solid var(--border-1);
    border-bottom: 1px solid var(--border-1);
    box-shadow: var(--shadow-sm);
    overflow: visible;
}

/* Hide portrait card entirely in editing mode — ps-player-row covers player identity */
.player-slot--editing .ps-portrait-card {
    display: none;
}

/* Portrait card */
.ps-portrait-card {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: visible; /* art clipped by ps-portrait-art-wrap; allow remove-btn ring to extend outside */
    cursor: pointer;
    width: 100%;
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    transition: border-color 0.15s;
}

.ps-portrait-card:hover {
    border-color: var(--orange);
}

.ps-portrait-card:has(.ps-portrait-art-empty) {
    border: 1.5px dashed rgba(255,255,255,0.15);
}

.ps-portrait-art-wrap {
    position: relative;
    width: 100%;
    padding-top: 100%;
    max-height: 200px;
    background: var(--bg-4);
    overflow: hidden;
}

.ps-portrait-art-single {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 20%;
    background-color: var(--bg-4);
    cursor: pointer;
}

.ps-portrait-art-split {
    position: absolute;
    inset: 0;
    display: flex;
}

.ps-portrait-art-split > div {
    flex: 1;
    background-size: cover;
    background-position: center 20%;
    background-color: var(--bg-4);
    cursor: pointer;
}

/* Placeholder states inside art wrap */
.ps-portrait-art-player {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: var(--text-2);
    background: var(--bg-3);
}

.ps-portrait-art-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    background: linear-gradient(175deg, var(--bg-3) 0%, var(--bg-4) 100%);
}

.ps-portrait-art-empty::before {
    content: '+';
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px dashed rgba(255,255,255,0.2);
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: 300;
    color: rgba(255,255,255,0.3);
}

.ps-portrait-footer {
    background: #0e0e14;
    padding: 6px 8px 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-height: 44px;
}

.ps-portrait-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.25);
}

.ps-portrait-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 2px;
}

.ps-portrait-name {
    display: block;
    color: rgba(255,255,255,0.92);
    font-size: 0.78em;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
}

/* sub line: "tap to select" / commander name */
.ps-portrait-sub {
    display: block;
    color: var(--text-1);
    font-size: 0.62em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
}

/* bracket badge inside sub line */
.ps-portrait-bracket {
    background: var(--gold-subtle);
    color: var(--gold);
    border-radius: 3px;
    padding: 0 3px;
    font-size: 0.95em;
    font-weight: 600;
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
}

.ps-portrait-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.75);
    font-size: 0.75em;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-family: inherit;
    transition: color 0.15s;
    user-select: none;
    overflow: visible;
}

.ps-portrait-remove-btn:hover {
    color: white;
}

/* Progress ring — extends 12px outside button so it's visible under a finger */
.ps-portrait-remove-btn::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: conic-gradient(var(--red) var(--prog, 0%), rgba(255,255,255,0.15) var(--prog, 0%));
    mask-image: radial-gradient(circle, transparent 50%, black 51%);
    -webkit-mask-image: radial-gradient(circle, transparent 50%, black 51%);
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.8));
}

.ps-portrait-remove-btn.holding::before {
    opacity: 1;
}

.ps-portrait-remove-btn.holding {
    color: var(--red);
}

/* Art change hint bubble — overlays top of commander portrait */
.art-hint-bubble {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 20px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    letter-spacing: 0.03em;
    animation: artHintFade 4.5s ease forwards;
}

@keyframes artHintFade {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-5px); }
    12%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    72%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Previous commanders header row */
.prev-cmds-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 5px 0 2px;
}

.prev-cmds-label {
    font-size: 0.8em;
    color: var(--text-1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cmd-show-all-btn {
    font-size: 0.72em;
    color: var(--orange);
    background: none;
    border: 1px solid var(--orange-border);
    border-radius: 10px;
    padding: 2px 9px;
    cursor: pointer;
    line-height: 1.5;
    transition: background 0.15s;
}

.cmd-show-all-btn:hover {
    background: var(--orange-glow);
}

/* Commander Browse Modal */
.cmd-browse-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    z-index: 3000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px 10px 24px;
    overflow-y: auto;
}

.cmd-browse-modal {
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 580px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: calc(100vh - 32px);
}

.cmd-browse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
}

.cmd-browse-title {
    margin: 0;
    font-size: 1em;
    font-weight: 700;
    color: var(--text-0);
}

.cmd-browse-close {
    background: none;
    border: none;
    color: var(--text-2);
    font-size: 1em;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    line-height: 1;
}

.cmd-browse-close:hover {
    color: var(--text-0);
    background: var(--bg-4);
}

.cmd-browse-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px;
    overflow-y: auto;
}

@media (min-width: 400px) {
    .cmd-browse-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 520px) {
    .cmd-browse-grid { grid-template-columns: repeat(5, 1fr); }
}

.cmd-browse-card {
    cursor: pointer;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    padding: 5px;
    text-align: center;
    position: relative;
    transition: border-color 0.15s, transform 0.15s;
}

.cmd-browse-card:hover {
    border-color: var(--orange-border);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px var(--orange-glow);
}

.cmd-browse-img {
    width: 100%;
    border-radius: 4px;
    display: block;
    margin-bottom: 4px;
}

.cmd-browse-name {
    font-size: 0.65em;
    color: var(--text-0);
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cmd-browse-last-played {
    font-size: 0.6em;
    color: var(--text-2);
    margin-top: 1px;
}

.cmd-browse-loading {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    font-size: 1em;
    letter-spacing: 3px;
}

/* ============================================================
   COMMANDER SELECT MODAL (Step 2)
   ============================================================ */
.csm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    align-items: flex-end;
    justify-content: center;
}

.csm-panel {
    background: var(--bg-2);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -6px 40px rgba(0, 0, 0, 0.55);
    animation: csmSlideUp 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 601px) {
    .csm-overlay { align-items: center; }
    .csm-panel {
        max-width: 500px;
        border-radius: var(--radius-xl);
        animation: csmFadeIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
    }
}

@keyframes csmSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes csmFadeIn {
    from { transform: scale(0.94) translateY(12px); opacity: 0; }
    to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

.csm-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-2);
    margin: 10px auto 0;
    flex-shrink: 0;
}

@media (min-width: 601px) { .csm-handle { display: none; } }

.csm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
    gap: 10px;
}

.csm-player-info {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.csm-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-4);
    border: 1px solid var(--border-1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.csm-avatar-initials {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
    text-transform: uppercase;
    user-select: none;
    line-height: 1;
    letter-spacing: 0.02em;
}

.csm-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.csm-player-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.csm-player-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-0);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csm-subtitle {
    font-size: 0.68rem;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.csm-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.csm-change-btn {
    font-size: 0.72rem;
    color: var(--orange);
    background: none;
    border: 1px solid var(--orange-border);
    border-radius: 12px;
    padding: 4px 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    line-height: 1.5;
}

.csm-change-btn:hover {
    background: var(--orange-glow);
}

.csm-close-btn {
    background: var(--bg-3);
    border: 1px solid var(--border-1);
    border-radius: 50%;
    color: var(--text-2);
    font-size: 0.85rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.csm-close-btn:hover {
    background: var(--bg-4);
    color: var(--text-0);
}

.csm-body {
    overflow-y: auto;
    flex: 1;
    padding: 16px 16px 4px;
    -webkit-overflow-scrolling: touch;
}

/* Strip inline styles from the commander-section when inside the modal */
.csm-body .commander-section {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.csm-body .ps-commander-section {
    padding: 0;
}

/* Hide the player-row inside modal — handled by modal header */
.csm-body .ps-player-row {
    display: none;
}

/* Make the Commander label look nicer in modal context */
.csm-body .commander-section > label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-2);
    margin-bottom: 8px;
    display: block;
}

.csm-footer {
    padding: 12px 16px 20px;
    flex-shrink: 0;
    border-top: 1px solid var(--border-1);
    background: var(--bg-2);
}

.csm-done-btn {
    width: 100%;
    padding: 13px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-md);
}

/* Editing state — commander section styles */
.ps-commander-section {
    padding: 10px 10px 12px;
}

.ps-player-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-1);
}

.ps-player-row-name {
    flex: 1;
    font-weight: 700;
    font-size: 0.95em;
    color: var(--green-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-change-btn {
    background: none;
    border: 1px solid var(--border-2);
    color: var(--text-1);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.8em;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s;
}

.ps-change-btn:hover {
    border-color: var(--orange);
    color: var(--orange);
}

.ps-clear-btn {
    background: none;
    border: 1px solid var(--border-1);
    color: var(--text-2);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: 0.8em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: inherit;
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s;
}

.ps-clear-btn:hover {
    border-color: var(--red);
    color: var(--red);
}

.player-slot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.player-slot-header h3 {
    margin: 0;
    color: var(--orange);
    font-size: 1.1em;
    font-weight: 700;
}

.player-slot h3 {
    margin: 0 0 15px 0;
    color: var(--orange);
    font-size: 1.1em;
    font-weight: 700;
}

.player-slot-remove-btn {
    background: none;
    border: none;
    color: var(--text-2);
    font-size: 1.1em;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}

.player-slot-remove-btn:hover {
    color: var(--red);
}

.btn-add-player {
    display: block;
    width: 100%;
    padding: 12px;
    background: none;
    border: 1px dashed var(--orange-border);
    color: var(--orange);
    border-radius: var(--radius-sm);
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    margin-top: 4px;
    margin-bottom: 4px;
}

.btn-add-player:hover {
    background: var(--orange-subtle);
    border-color: var(--orange);
}

.player-select,
.text-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    font-size: 16px;
    margin-bottom: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--bg-3);
    color: var(--text-0);
    font-family: inherit;
}

.player-select:focus,
.text-input:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orange-subtle);
}

.player-select::placeholder,
.text-input::placeholder {
    color: var(--text-2);
}

.new-player-form {
    margin-top: 15px;
    padding: 15px;
    background: var(--bg-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-1);
}

.commander-section {
    margin-top: 15px;
    padding: 15px;
    background: var(--bg-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-1);
}

.commander-section label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-1);
    font-weight: 600;
    font-size: 0.9em;
}

.commander-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.commander-input-wrapper:focus-within {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orange-subtle);
}
.commander-input-wrapper .text-input.commander-input-has-clear {
    flex: 1;
    padding-right: 32px;
    margin-bottom: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}
.commander-input-wrapper .text-input.commander-input-has-clear:focus {
    border-color: transparent;
    box-shadow: none;
}
.commander-input-clear-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: none;
    border: none;
    color: var(--text-2);
    cursor: pointer;
    font-size: 0.85em;
    padding: 0 8px;
    line-height: 1;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.commander-input-clear-btn:hover {
    color: var(--text-0);
    background: var(--bg-3);
}

.commander-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg-3);
    border: 1px solid var(--border-2);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-md);
    min-width: 0;
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}

.commander-suggestions::-webkit-scrollbar { width: 6px; }
.commander-suggestions::-webkit-scrollbar-track { background: transparent; }
.commander-suggestions::-webkit-scrollbar-thumb {
    background: var(--border-2);
    border-radius: 3px;
}

.commander-suggestions:empty {
    border: none;
    box-shadow: none;
}

/* Commander search hover tooltip */
#card-hover-tooltip {
    display: none;
    position: fixed;
    z-index: 9999;
    pointer-events: none;
}

#card-hover-tooltip img {
    width: 200px;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.8);
    display: block;
}

/* Mobile card gallery overlay */
#mobile-card-gallery {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: flex-end;
    justify-content: center;
}

#mobile-card-gallery-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.82);
}

#mobile-card-gallery-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    background: #111118;
    border-radius: 20px 20px 0 0;
    padding: 14px 0 28px;
    border-top: 1px solid var(--border-2);
}

#mobile-card-gallery-hint {
    text-align: center;
    color: #fff;
    font-size: 0.92em;
    font-weight: 600;
    margin: 0 0 2px;
    min-height: 1.2em;
    padding: 0 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#mobile-card-gallery-sub {
    text-align: center;
    color: var(--text-2);
    font-size: 0.72em;
    margin: 0 0 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#mobile-card-gallery-scroll {
    display: flex;
    flex-direction: row;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px calc(50% - 70px) 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#mobile-card-gallery-scroll::-webkit-scrollbar { display: none; }

.mobile-gallery-card {
    flex-shrink: 0;
    scroll-snap-align: center;
    width: 140px;
    cursor: pointer;
    text-align: center;
    transition: transform 0.08s ease-out, opacity 0.08s ease-out;
    transform-origin: center bottom;
    will-change: transform, opacity;
}

.mobile-gallery-card img {
    width: 140px;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.8);
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

.mobile-gallery-card-placeholder {
    width: 140px;
    height: 196px;
    background: var(--bg-3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: var(--text-2);
}

.mobile-gallery-card-name {
    color: var(--text-1);
    font-size: 0.72em;
    margin-top: 6px;
    line-height: 1.3;
    padding: 0 2px;
    word-break: break-word;
}

/* Desktop: bigger gallery panel & cards */
@media (hover: hover) and (min-width: 1025px) {
    #mobile-card-gallery-inner {
        max-width: 900px;
        margin: 0 auto;
        padding: 20px 0 40px;
        border-radius: 16px;
    }

    #mobile-card-gallery-scroll {
        padding: 12px calc(50% - 110px) 12px;
        gap: 20px;
        cursor: grab;
    }

    #mobile-card-gallery-scroll.gallery-dragging {
        cursor: grabbing;
        user-select: none;
    }

    .mobile-gallery-card { width: 220px; }
    .mobile-gallery-card img { width: 220px; }
    .mobile-gallery-card-placeholder { width: 220px; height: 308px; }
}

.commander-previous-section {
    margin-top: 4px;
}

/* Collapsed player slot summary */
.slot-summary {
    display: none;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 0 8px;
    cursor: default;
}

.slot-summary-art {
    width: clamp(72px, 18vw, 110px);
    height: clamp(100px, 25vw, 154px);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-4);
}

.slot-summary-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.slot-summary-art--partner {
    display: flex;
    gap: 3px;
    width: clamp(138px, 34vw, 210px);
    height: clamp(100px, 25vw, 154px);
}

.slot-summary-art--partner img {
    width: 50%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.slot-summary-art--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6em;
}

.slot-summary-info {
    flex: 1;
    min-width: 0;
}

.slot-summary-player {
    font-weight: 700;
    color: var(--green-light);
    font-size: 0.95em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slot-summary-commander {
    font-size: 0.8em;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.slot-expand-btn {
    background: none;
    border: 1px solid var(--orange-border);
    color: var(--orange);
    border-radius: 6px;
    padding: 5px 11px;
    font-size: 0.85em;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}

.slot-expand-btn:hover {
    background: var(--orange-subtle);
    border-color: var(--orange);
}

@media (max-width: 1024px) {
    .slot-summary {
        position: relative;
        padding-right: 72px;
    }
    .slot-expand-btn {
        position: absolute;
        top: 8px;
        right: 0;
    }
}

/* Player Picker Button */
.player-picker-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.player-picker-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-3);
    border: 1px solid var(--border-1);
    border-radius: 10px;
    cursor: pointer;
    font-size: 1em;
    text-align: left;
    transition: border-color 0.2s, background 0.2s;
    min-height: 52px;
    color: var(--text-0);
    font-family: inherit;
}

.player-picker-btn:hover {
    border-color: var(--orange-border);
    background: var(--bg-4);
}

.player-picker-btn.selected {
    border-color: rgba(34,197,94,0.4);
    background: var(--green-dark-bg);
}

.picker-icon {
    font-size: 1.1em;
    line-height: 1;
    color: var(--orange);
    flex-shrink: 0;
}

.player-picker-btn.selected .picker-icon {
    color: var(--green);
}

.picker-text {
    flex: 1;
    color: var(--text-2);
    font-size: 0.95em;
}

.player-picker-btn.selected .picker-text {
    color: var(--green-light);
    font-weight: 600;
}

.picker-chevron {
    color: var(--text-2);
    font-size: 1.3em;
    flex-shrink: 0;
    line-height: 1;
}

.player-picker-btn.selected .picker-chevron {
    color: var(--green);
}

.player-picker-clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: var(--red-subtle);
    color: var(--red);
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.85em;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.player-picker-clear:hover {
    background: var(--red);
    color: white;
}

/* Guest tag */
.guest-tag {
    opacity: 0.65;
    font-size: 0.85em;
}

/* ==============================
   PLAYER SELECT SHEET / MODAL
   ============================== */

.player-sheet-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 500;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.player-sheet-overlay.open {
    display: block;
    opacity: 1;
}

/* Mobile: slide-up bottom sheet */
.player-sheet {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-height: 78vh;
    background: var(--bg-2);
    border-radius: var(--radius-xl);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.6);
    border: 1px solid var(--border-2);
    z-index: 501;
    display: flex;
    flex-direction: column;
    transform: translateY(calc(100% + 12px));
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
}

.player-sheet.open {
    transform: translateY(0);
    pointer-events: auto;
}

/* Desktop: centered modal */
@media (min-width: 1025px) {
    .player-sheet {
        top: 50%;
        bottom: auto;
        left: 50%;
        right: auto;
        width: 420px;
        max-height: 560px;
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-2);
        transform: translate(-50%, -48%) scale(0.96);
        opacity: 0;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .player-sheet.open {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.sheet-drag-handle {
    width: 40px;
    height: 4px;
    background: var(--border-2);
    border-radius: 2px;
    margin: 12px auto 0;
    flex-shrink: 0;
}

@media (min-width: 1025px) {
    .sheet-drag-handle { display: none; }
}

.sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
    flex-shrink: 0;
}

.sheet-title {
    font-size: 1.05em;
    font-weight: 700;
    color: var(--text-0);
}

.sheet-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--bg-4);
    color: var(--text-1);
    cursor: pointer;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}

.sheet-close:hover {
    background: var(--border-2);
    color: var(--text-0);
}

.sheet-search-row {
    padding: 0 14px 10px;
    flex-shrink: 0;
}

.sheet-search {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-1);
    border-radius: 10px;
    font-size: 16px;
    outline: none;
    background: var(--bg-3);
    color: var(--text-0);
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.sheet-search::placeholder { color: var(--text-2); }

.sheet-search:focus {
    border-color: var(--orange);
    background: var(--bg-4);
    box-shadow: 0 0 0 3px var(--orange-subtle);
}

.sheet-list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.sheet-player-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-0);
    transition: background 0.12s;
    min-height: 44px;
    color: var(--text-0);
}

.sheet-player-item:hover,
.sheet-player-item.highlighted {
    background: var(--orange);
    color: white;
}

.sheet-player-item:hover .guest-tag,
.sheet-player-item.highlighted .guest-tag {
    opacity: 0.8;
}

.sheet-player-name {
    flex: 1;
    font-size: 0.97em;
    font-weight: 500;
}

.sheet-delete-btn {
    background: none;
    border: none;
    color: transparent;
    font-size: 0.75em;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}

.sheet-player-item:hover .sheet-delete-btn,
.sheet-player-item.highlighted .sheet-delete-btn {
    color: rgba(255,255,255,0.6);
}

.sheet-delete-btn:hover {
    color: white !important;
    background: rgba(239,68,68,0.5);
}

.sheet-divider {
    height: 1px;
    background: var(--border-1);
    margin: 4px 0;
}

.sheet-action-item {
    display: flex;
    align-items: center;
    padding: 9px 18px;
    cursor: pointer;
    color: var(--orange);
    font-weight: 600;
    font-size: 0.95em;
    border-bottom: 1px solid var(--border-0);
    min-height: 44px;
    transition: background 0.12s;
}

.sheet-action-item:hover,
.sheet-action-item.highlighted {
    background: var(--orange);
    color: white;
}

.sheet-create-form {
    padding: 16px;
}

.sheet-create-confirm {
    flex: 1;
    padding: 12px;
    background: var(--green);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

.sheet-create-confirm:hover {
    background: var(--green-hover);
}

.sheet-create-cancel {
    padding: 12px 16px;
    background: var(--bg-4);
    color: var(--text-1);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.95em;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

.sheet-create-cancel:hover {
    background: var(--border-2);
    color: var(--text-0);
}

/* Commander Cards Scroll (horizontal) */
.commander-cards-scroll {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
    overscroll-behavior-x: contain;
}

.commander-cards-scroll.dragging {
    cursor: grabbing;
}

/* Suppress hover repaints while scrolling — this is the main source of scroll jank */
.commander-cards-scroll.dragging .commander-card-option,
.commander-cards-scroll.scrolling .commander-card-option {
    pointer-events: none;
    transform: none !important;
    transition: none !important;
}

.commander-cards-scroll::-webkit-scrollbar { height: 6px; }
.commander-cards-scroll::-webkit-scrollbar-track {
    background: var(--bg-4);
    border-radius: 3px;
}
.commander-cards-scroll::-webkit-scrollbar-thumb {
    background: var(--orange);
    border-radius: 3px;
}

.commander-card-option {
    cursor: pointer;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    padding: 7px;
    background: var(--bg-3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    text-align: center;
    position: relative;
    flex: 0 0 168px;
    align-self: flex-start;
}

.commander-card-option:hover {
    border-color: var(--orange-border);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px var(--orange-glow);
    background: var(--bg-4);
}

.commander-card-option.selected {
    border-color: rgba(34,197,94,0.5);
    background: var(--green-dark-bg);
    box-shadow: 0 0 0 2px rgba(34,197,94,0.2), 0 4px 14px rgba(34,197,94,0.15);
}

.commander-card-option.selected .commander-card-name {
    color: var(--green-light);
    font-weight: 700;
}

/* Remove button on commander card */
.commander-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.65);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    z-index: 2;
}

.commander-card-option:hover .commander-remove-btn { opacity: 1; }
.commander-remove-btn:hover { background: var(--red); }

.commander-card-img {
    width: 100%;
    border-radius: 6px;
    margin-bottom: 8px;
}

.commander-card-placeholder {
    font-size: 4em;
    padding: 20px;
    color: var(--border-2);
}

.commander-card-name {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--text-0);
    margin-top: 4px;
}

/* Bracket widget on commander history cards */
.bracket-widget {
    width: 100%;
    margin-top: 5px;
    padding-top: 4px;
    border-top: 1px solid var(--border-1);
}

.bracket-label {
    font-size: 0.65em;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    margin-bottom: 1px;
}

.bracket-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    touch-action: none;
}

.bracket-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-2);
    font-size: 0.6em;
    padding: 3px 5px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.bracket-btn:hover,
.bracket-btn:active {
    color: var(--orange);
    background: var(--orange-subtle);
}

.bracket-num {
    font-size: 1.05em;
    font-weight: 700;
    color: var(--orange);
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
}

/* Lock In button on commander history cards */
.commander-lock-btn {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 4px 0;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 5px;
    color: var(--green-light);
    font-size: 0.75em;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.commander-lock-btn:hover,
.commander-lock-btn:active {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.6);
}

.commander-card-decklist-btn {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 3px 0;
    background: rgba(251, 146, 60, 0.10);
    border: 1px solid rgba(251, 146, 60, 0.35);
    border-radius: 5px;
    color: var(--orange-light);
    font-size: 0.72em;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.commander-card-decklist-btn:hover,
.commander-card-decklist-btn:active {
    background: rgba(251, 146, 60, 0.22);
    border-color: rgba(251, 146, 60, 0.65);
}

/* Bracket badge on collapsed slot summary */
.slot-summary-bracket {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 5px;
    background: rgba(251, 146, 60, 0.18);
    border: 1px solid var(--orange-border);
    border-radius: 4px;
    color: var(--orange);
    font-size: 0.78em;
    font-weight: 700;
    vertical-align: middle;
    line-height: 1.5;
}

.loading {
    padding: 20px;
    color: var(--text-2);
    font-style: italic;
}

/* Autocomplete */
.autocomplete-item {
    padding: 8px 10px;
    background: var(--bg-3);
    border-bottom: 1px solid var(--border-0);
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
    -webkit-user-select: none;
    color: var(--text-0);
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.autocomplete-item:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.autocomplete-item:last-child  { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.autocomplete-item:only-child  { border-radius: var(--radius-sm); }

.autocomplete-item:hover,
.autocomplete-item.highlighted {
    background: var(--orange);
    color: white;
}

.autocomplete-thumb {
    width: 36px;
    height: auto;
    border-radius: 3px;
    flex-shrink: 0;
    display: block;
}

.autocomplete-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.autocomplete-mana {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.mana-sym {
    width: 16px;
    height: 16px;
    display: block;
}

/* Partner Cards */
.partner-card-container {
    display: flex;
    overflow: hidden;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.partner-card-half {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.partner-half-img {
    width: 200%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.partner-card-half:first-child .partner-half-img {
    margin-left: 0;
    object-position: 0% center;
}

.partner-card-half:last-child .partner-half-img {
    margin-left: -100%;
    object-position: 100% center;
}

.partner-section {
    margin-top: 15px;
    padding: 15px;
    background: var(--orange-subtle);
    border: 1px dashed var(--orange-border);
    border-radius: var(--radius-sm);
}

/* Turn Order */
.turn-order-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 20px;
    font-weight: 700;
    color: var(--orange);
    font-size: 1.1em;
}

.turn-order-container {
    margin: 20px 0;
}

.turn-order-players {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 15px;
    padding: 20px;
    background: var(--bg-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-1);
    min-height: 200px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}

.turn-order-card {
    background: var(--bg-3);
    border: 2px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: 15px;
    cursor: grab;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 160px;
    color: var(--text-0);
}

.turn-order-card:active {
    cursor: grabbing;
}

.turn-order-card:hover {
    border-color: var(--orange-border);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px var(--orange-glow);
}

.turn-order-card.dragging {
    opacity: 0.65;
    transform: rotate(3deg) scale(1.05);
    box-shadow: 0 12px 36px rgba(0,0,0,0.5);
    cursor: grabbing;
    border-color: var(--orange);
}

/* Prevent children from interfering with drag */
.turn-order-card * { pointer-events: none; }
.turn-order-card  { pointer-events: all; }

/* Re-enable pointer events for mulligan controls */
.turn-order-card .mulligan-counter,
.turn-order-card .mulligan-counter * { pointer-events: all; }

/* Art crop: in-flow flex item inside the card column (desktop + intermediate) */
.turn-order-art-bg {
    display: flex;
    position: relative;
    flex: 1;
    min-height: 80px;
    margin-top: 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-1);
    overflow: hidden;
    background-size: cover;
    background-position: center 20%;
}
.turn-order-art-bg > div {
    flex: 1;
    background-size: cover;
    background-position: center 20%;
}

/* Commander name bar: mobile-only bottom strip */
.turn-order-commander-bar { display: none; }

/* Inner content wrapper — transparent on desktop, clipping flex container on mobile */
.turn-order-inner { display: contents; }
/* Header wrapper groups player name + commander name; transparent on desktop */
.turn-order-header { display: contents; }

/* Touch drag ghost */
.turn-order-drag-ghost {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.92;
    transform: rotate(1.5deg) scale(1.04);
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    border: 2px solid var(--orange) !important;
    border-radius: var(--radius-md);
    background: var(--bg-3);
}

/* Drag placeholder */
.turn-order-drag-placeholder {
    opacity: 0.2;
    border: 2px dashed var(--border-2) !important;
    background: var(--bg-2) !important;
}

.turn-order-number {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 35px;
    height: 35px;
    background: var(--orange);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2em;
    box-shadow: 0 2px 10px var(--orange-glow);
    transition: background 0.2s ease;
}

.turn-order-card.dragging .turn-order-number {
    background: var(--orange-hover);
}

.turn-order-player-info h4 {
    margin: 0 0 5px 0;
    color: var(--text-0);
    font-size: 1em;
    font-weight: 600;
    text-align: center;
}

.turn-order-player-info p {
    margin: 0;
    color: var(--text-1);
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    max-height: 2.6em;
    text-align: center;
}

/* Full card image element — hidden; art crop is shown via .turn-order-art-bg instead */
.turn-order-image { display: none; }

.turn-order-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    border-radius: 6px;
    transition: border-color 0.2s ease;
    pointer-events: none;
}

/* Partner split inside turn order */
.turn-order-partner-split {
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
}

.turn-order-partner-left,
.turn-order-partner-right {
    flex: 1;
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 100%;
}

.turn-order-partner-left  { background-position: left center; }
.turn-order-partner-right { background-position: right center; }

/* Rotation slider — step 2.5 */

/* Desktop: horizontal slider sits below the card list */
.turn-order-player-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.turn-order-rotate-side {
    width: 100%;
    padding: 2px 0;
}

.turn-order-rotate-rail-wrap {
    width: 100%;
}

.turn-order-rotate-slider {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--border-1);
    outline: none;
    cursor: pointer;
    opacity: 0.8;
}

.turn-order-rotate-slider:hover,
.turn-order-rotate-slider:focus { opacity: 1; }

.turn-order-rotate-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: var(--border-1);
}

.turn-order-rotate-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 2px var(--bg-1), 0 0 6px var(--orange-glow);
    margin-top: -6px;
    cursor: grab;
    transition: box-shadow 0.15s, transform 0.15s;
}

.turn-order-rotate-slider:active::-webkit-slider-thumb {
    cursor: grabbing;
    box-shadow: 0 0 0 2px var(--bg-1), 0 0 12px var(--orange-glow);
    transform: scale(1.2);
}

.turn-order-rotate-slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--border-1);
}

.turn-order-rotate-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 2px var(--bg-1), 0 0 6px var(--orange-glow);
    cursor: grab;
}

.loading-small {
    padding: 10px;
    color: var(--text-2);
    font-size: 0.85em;
}

/* Timer — lives in the top bar timer-row */
#timer {
    font-size: 2em;
    font-weight: 800;
    text-align: center;
    color: var(--orange);
    font-family: 'Inter', 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    text-shadow: 0 0 30px var(--orange-glow);
}


.timer-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.timer-row.tracking-list-header {
    position: relative;
    padding: 6px 10px 8px;
    border-bottom: 1px solid var(--border-1);
    margin-bottom: 4px;
}

/* Current turn player name display in top bar */
.current-turn-name-display {
    text-align: center;
    min-width: 80px;
    max-width: 140px;
}

.current-turn-name-label {
    font-size: 0.62em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-2);
    line-height: 1.2;
}

.current-turn-name {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--orange-light);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-notes-timer {
    background: var(--bg-3);
    border: 1.5px solid var(--border-2);
    border-radius: 2px;
    color: var(--text-1);
    font-size: 0.8em;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.btn-notes-timer:hover {
    background: var(--bg-2);
    border-color: var(--text-2);
}

.current-round-display {
    text-align: center;
    min-width: 52px;
}

.timer-display {
    text-align: center;
}

.round-label {
    font-size: 0.62em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-2);
    line-height: 1.2;
}

.round-number {
    font-size: 2em;
    font-weight: 800;
    color: var(--orange);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}


/* Lap tracking */
.lap-tracking-section {
    margin: 10px 0;
    padding: 6px 6px 0 6px;
    background: var(--bg-2);
    border-radius: 2px;
    border: 1px solid var(--border-1);
}

/* Unified Tracking */
.unified-tracking-list {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 6px;
    scrollbar-width: none;
}

.unified-tracking-list::-webkit-scrollbar { display: none; }

/* Step 3 bottom bar */
.step3-bottom-bar {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 12px;
    padding-bottom: 6px;
}

.btn-add-note {
    flex: 1;
    padding: 11px 14px;
    background: var(--bg-3);
    border: 1.5px solid var(--border-2);
    border-radius: var(--radius-sm);
    color: var(--text-0);
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    letter-spacing: -0.01em;
}

.btn-add-note:hover {
    background: var(--bg-2);
    border-color: var(--text-2);
}

/* Tracking note display */
.tracking-item-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.tracking-note-text {
    font-size: 0.78em;
    color: var(--text-2);
    font-style: italic;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.3;
}

/* Note modal */
.note-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}

.note-modal-content {
    background: var(--bg-1);
    border-radius: 14px;
    padding: 22px 20px 18px;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0,0,0,0.55);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.note-quick-label {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-2);
    margin-bottom: 6px;
}

.note-quick-btns {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.btn-quick-note {
    flex: 1;
    padding: 8px 10px;
    background: var(--bg-3);
    border: 1.5px solid var(--border-2);
    border-radius: 8px;
    color: var(--text-0);
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn-quick-note:hover, .btn-quick-note:active {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

.note-modal-title {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--text-0);
    margin-bottom: 14px;
}

.note-modal-textarea {
    width: 100%;
    min-height: 110px;
    background: var(--bg-3);
    border: 1.5px solid var(--border-2);
    border-radius: 8px;
    color: var(--text-0);
    font-size: 0.97em;
    padding: 10px 12px;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.5;
}

.note-modal-textarea:focus {
    outline: none;
    border-color: var(--orange);
}

.note-modal-footer {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-shrink: 0;
}

/* Damage Log modal */
.dmg-log-content {
    max-height: 80vh;
}

.dmg-log-body {
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.dmg-log-round-header {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-2);
    margin-top: 12px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-1);
}

.dmg-log-turn-group {
    background: var(--bg-3);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    user-select: none;
}
.dmg-log-turn-group:hover {
    background: var(--bg-4, #2a2a2a);
}

.dmg-log-turn-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 2px;
}

.dmg-log-chevron {
    font-size: 0.85em;
    color: var(--text-3, #666);
}

/* Shared grid layout for header + player rows — guarantees column alignment */
.dmg-log-col-header,
.dmg-log-player-row {
    display: grid;
    grid-template-columns: 1fr 40px 44px 42px 46px 40px;
    gap: 4px;
    align-items: center;
}

@media (max-width: 480px) {
    /* Tighten modal padding so the grid gets more horizontal room */
    .dmg-log-content { padding: 16px 10px 14px; }
    .dmg-log-body { gap: 8px; }
    .dmg-log-col-header { padding: 7px 10px 9px; }
    .dmg-log-turn-group { padding: 9px 10px; gap: 6px; }
    .dmg-log-col-header,
    .dmg-log-player-row {
        grid-template-columns: 1fr 38px 38px 36px 38px 38px;
        gap: 4px;
    }
    .dmg-log-player-row { font-size: 0.88em; }
    .dmg-log-col-header { font-size: 0.68em; }
    .dmg-log-turn-label { font-size: 0.8em; margin-bottom: 5px; }
}

@media (max-width: 390px) {
    .dmg-log-content { padding: 14px 8px 12px; }
    .dmg-log-body { gap: 7px; }
    .dmg-log-col-header { padding: 6px 8px 8px; }
    .dmg-log-turn-group { padding: 8px 8px; gap: 5px; }
    .dmg-log-col-header,
    .dmg-log-player-row {
        grid-template-columns: 1fr 34px 34px 32px 34px 34px;
        gap: 3px;
    }
    .dmg-log-player-row { font-size: 0.83em; }
    .dmg-log-col-header { font-size: 0.64em; }
    .dmg-log-turn-label { font-size: 0.76em; margin-bottom: 4px; }
}

@media (max-width: 340px) {
    .dmg-log-content { padding: 12px 6px 10px; }
    .dmg-log-body { gap: 6px; }
    .dmg-log-col-header { padding: 5px 6px 7px; }
    .dmg-log-turn-group { padding: 7px 6px; gap: 5px; }
    .dmg-log-col-header,
    .dmg-log-player-row {
        grid-template-columns: 1fr 30px 30px 28px 30px 30px;
        gap: 2px;
    }
    .dmg-log-player-row { font-size: 0.78em; }
    .dmg-log-col-header { font-size: 0.6em; }
    .dmg-log-turn-label { font-size: 0.72em; margin-bottom: 4px; }
}

/* Column header — sticky so it stays visible while scrolling */
.dmg-log-col-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-1);
    padding: 6px 10px 8px;
    border-bottom: 1px solid var(--border-1);
    margin-bottom: 2px;
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}
.dmg-log-ch-name  { color: var(--text-3, #555); overflow: hidden; white-space: nowrap; }
.dmg-log-ch-start,
.dmg-log-ch-end   { text-align: right; color: var(--text-3, #555); overflow: hidden; white-space: nowrap; }
.dmg-log-ch-cmd   { text-align: right; color: #fbbf24; overflow: hidden; white-space: nowrap; }
.dmg-log-ch-reg   { text-align: right; color: #f87171; overflow: hidden; white-space: nowrap; }
.dmg-log-ch-heal  { text-align: right; color: #4ade80; overflow: hidden; white-space: nowrap; }

/* Turn group — colored left bar + tinted bg via inline style */
.dmg-log-turn-group {
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    user-select: none;
}
.dmg-log-turn-group:hover { filter: brightness(1.15); }

.dmg-log-turn-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8em;
    font-weight: 700;
    margin-bottom: 3px;
}
.dmg-log-turn-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
    flex-shrink: 0;
}
.dmg-log-chevron {
    font-size: 0.82em;
    color: var(--text-3, #555);
    flex-shrink: 0;
}

/* Summary player rows — grid defined in shared rule above */
.dmg-log-player-row {
    font-size: 0.93em;
}
.dmg-log-player-name {
    color: var(--text-0);
    font-weight: 500;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}
.dmg-log-col-start {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-2); font-size: 0.88em;
    overflow: hidden; white-space: nowrap;
}
.dmg-log-col-cmd {
    text-align: right;
    font-weight: 700; font-variant-numeric: tabular-nums;
    color: #fbbf24;
    overflow: hidden; white-space: nowrap;
}
.dmg-log-col-reg {
    text-align: right;
    font-weight: 700; font-variant-numeric: tabular-nums;
    color: #f87171;
    overflow: hidden; white-space: nowrap;
}
.dmg-log-col-heal {
    text-align: right;
    font-weight: 700; font-variant-numeric: tabular-nums;
    color: #4ade80;
    overflow: hidden; white-space: nowrap;
}
.dmg-log-col-end {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600; font-size: 0.88em;
    overflow: hidden; white-space: nowrap;
}
.dmg-log-died-badge {
    font-size: 0.75em;
    font-weight: 700;
    color: #f87171;
    background: rgba(248, 113, 113, 0.15);
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
    flex-shrink: 0;
}
.dmg-log-end-loss { color: #f87171; }
.dmg-log-end-gain { color: #4ade80; }

/* Expand detail: individual chronological events */
.dmg-log-expand-detail {
    display: none;
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.dmg-log-expand-detail.dmg-log-expanded { display: flex; }
.dmg-log-event-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.86em;
    padding: 2px 0 2px 8px;
    border-left: 2px solid rgba(255,255,255,0.1);
}
.dmg-log-event-player {
    flex: 1;
    color: var(--text-1);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dmg-log-cmd-badge {
    font-size: 0.78em; font-weight: 600;
    color: #fbbf24;
    background: rgba(251,191,36,0.12);
    border: 1px solid rgba(251,191,36,0.3);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap; flex-shrink: 0;
}
.dmg-log-delta {
    font-weight: 700; font-variant-numeric: tabular-nums;
    min-width: 34px; text-align: right; flex-shrink: 0;
}
.dmg-log-event-total {
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
    min-width: 34px; text-align: right; flex-shrink: 0;
}
.dmg-log-gain { color: #4ade80; }
.dmg-log-loss { color: #f87171; }

.note-history-section {
    margin-top: 20px;
    border-top: 1px solid var(--border-1);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.note-history-heading {
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-2);
}

.note-history-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    background: var(--bg-3);
    border-radius: 8px;
    border-left: 3px solid var(--border-2);
}

.note-history-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.note-history-label {
    font-size: 0.72em;
    font-weight: 600;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 1;
}

.note-history-delete-btn {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.7em;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    transition: color 0.1s;
    overflow: visible;
    position: relative;
}

/* Progress ring — extends 11px outside button so it's visible under a finger */
.note-history-delete-btn::before {
    content: '';
    position: absolute;
    inset: -11px;
    border-radius: 50%;
    background: conic-gradient(var(--red) var(--prog, 0%), rgba(255,255,255,0.15) var(--prog, 0%));
    mask-image: radial-gradient(circle, transparent 50%, black 51%);
    -webkit-mask-image: radial-gradient(circle, transparent 50%, black 51%);
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.8));
}

.note-history-delete-btn.holding::before {
    opacity: 1;
}

.note-history-delete-btn.holding {
    color: var(--red);
}

.note-history-text {
    font-size: 0.9em;
    color: var(--text-0);
    line-height: 1.45;
    word-break: break-word;
    white-space: pre-wrap;
}

.note-player-mention {
    font-weight: 700;
    font-style: normal;
    color: var(--orange);
}

.tracking-round-header {
    background: var(--orange);
    color: white;
    padding: 8px 15px;
    font-weight: 700;
    border-radius: 0;
    margin: 10px 0 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.round-total-time {
    font-variant-numeric: tabular-nums;
    font-size: 0.9em;
    background: rgba(0,0,0,0.25);
    padding: 3px 10px;
    border-radius: 0;
}

.round-end-marker {
    background: var(--green);
    color: white;
    padding: 6px 15px;
    font-weight: 700;
    border-radius: 0;
    margin: 4px 0 0 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tracking-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 12px;
    background: var(--bg-3);
    border-radius: 0;
    margin-bottom: 3px;
}

.tracking-round {
    border-left: 3px solid var(--orange);
    font-weight: 600;
}

.tracking-turn {
    border-left: 3px solid var(--green);
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    cursor: pointer;
    gap: 8px;
    position: relative;
}

.tracking-turn .tracking-portrait,
.tracking-turn .tracking-portrait-split {
    align-self: stretch;
    height: auto;
    width: 52px;
    border-radius: 0;
    flex-shrink: 0;
}

.tracking-turn .tracking-portrait-split > div {
    height: auto;
}

.tracking-turn .tracking-item-left {
    padding: 7px 0;
}

.tracking-item-live-turn {
    background: rgba(34,197,94,0.08);
    cursor: default;
}
.tracking-item-live-turn-clickable {
    cursor: pointer;
}
.tracking-item-live-turn-clickable:hover {
    background: rgba(34,197,94,0.16);
}
.tracking-item-live-turn .tracking-label,
.tracking-item-live-turn .tracking-time {
    color: var(--green);
}

.tracking-portrait {
    width: 30px;
    height: 38px;
    flex-shrink: 0;
    background: var(--bg-4);
    border-radius: 2px;
    overflow: hidden;
    background-size: cover;
    background-position: top center;
}

.tracking-portrait-split {
    display: flex;
    flex-direction: row;
}

.tracking-portrait-split > div {
    flex: 1;
    height: 38px;
    background-size: cover;
    background-position: top center;
}

.tracking-portrait-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    color: var(--text-2);
}

.tracking-label {
    font-weight: 600;
    color: var(--text-0);
}

.tracking-time {
    font-variant-numeric: tabular-nums;
    font-size: 1.1em;
    color: var(--text-1);
}

/* Commander player tiles strip — step 3 */
.cmd-players-strip {
    display: flex;
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    padding: 0;
    margin: 10px 0 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.cmd-players-strip::-webkit-scrollbar { display: none; }

.cmd-player-tile {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    transition: transform 0.12s, box-shadow 0.12s;
    border: none;
    position: relative;
}

.cmd-player-tile:first-child { border-radius: 10px 0 0 10px; }
.cmd-player-tile:last-child  { border-radius: 0 10px 10px 0; }

.cmd-player-tile + .cmd-player-tile {
    border-left: 2px solid rgba(0,0,0,0.2);
}

.cmd-player-tile:active {
    transform: scale(0.93);
}

.cmd-tile-image-wrap {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background: #1a1a24;
}

.cmd-tile-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    pointer-events: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

.cmd-tile-img-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    background: linear-gradient(135deg, #1a1a26, #141420);
    pointer-events: none;
}

.cmd-tile-eliminated-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4em;
    background: rgba(0,0,0,0.45);
    pointer-events: none;
}

.kill-hold-skull {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8em;
    pointer-events: none;
    opacity: 0;
    transition: none;
    z-index: 5;
}

.kill-hold-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    z-index: 6;
    overflow: visible;
}

.kill-hold-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 4;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.kill-hold-ring-fill {
    fill: none;
    stroke: #ef4444;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 295.31;
    stroke-dashoffset: 295.31;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.8));
}

.revive-hold-halo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4em;
    background: rgba(34, 197, 94, 0.15);
    pointer-events: none;
    opacity: 0;
    z-index: 5;
}

.revive-hold-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    z-index: 6;
    overflow: visible;
}

.revive-hold-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 4;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.revive-hold-ring-fill {
    fill: none;
    stroke: #22c55e;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 295.31;
    stroke-dashoffset: 295.31;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.8));
}

.cmd-tile-placement-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--green);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.68em;
    line-height: 1.4;
    pointer-events: none;
    box-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

.cmd-tile-footer {
    background: #0e0e14;
    padding: 5px 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    container-type: inline-size;
}

.cmd-tile-name {
    color: rgba(255,255,255,0.88);
    font-size: 0.78em;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* Partner split inside tile */
.cmd-tile-partner-split {
    position: absolute;
    inset: 0;
    display: flex;
}

.cmd-tile-partner-split > div {
    flex: 1;
    background-size: cover;
    background-position: center 20%;
}

/* Tile states */
.cmd-player-tile.is-current-turn {
    z-index: 1;
    box-shadow: 0 0 18px rgba(249,115,22,0.25);
}

.cmd-player-tile.is-current-turn::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px solid var(--orange);
    border-radius: inherit;
    pointer-events: none;
    z-index: 10;
}

.cmd-player-tile.is-current-turn .cmd-tile-image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(249,115,22,0.22));
    pointer-events: none;
}

.cmd-player-tile.is-current-turn .cmd-tile-footer {
    background: #1c1005;
}

.cmd-player-tile.is-current-turn .cmd-tile-name {
    color: var(--orange-light);
}

/* Keyboard-focus highlight (number keys 1-9) */
.cmd-player-tile.kb-focus {
    z-index: 1;
    box-shadow: 0 0 18px rgba(99, 179, 237, 0.28);
}
.cmd-player-tile.kb-focus::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid rgba(99, 179, 237, 0.7);
    border-radius: inherit;
    pointer-events: none;
    z-index: 10;
}
.cmd-player-tile.kb-focus .cmd-tile-footer {
    background: #0a1220;
}
.cmd-player-tile.kb-focus .cmd-tile-name {
    color: #90cdf4;
}

/* ── Damage Mode (swipe portrait to switch type) — DISABLED ── */
/*
.mode-bubble-layer {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 200;
}

.mode-bubble {
    position: absolute;
    transform: translate(-50%, calc(-100% - 5px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 4px 10px 5px;
    border-radius: 40px;
    font-size: 0.7em;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: mode-bubble-in 0.18s ease-out both;
}

@keyframes mode-bubble-in {
    from { opacity: 0; transform: translate(-50%, calc(-100% - 14px)) scale(0.82); }
    to   { opacity: 1; transform: translate(-50%, calc(-100% - 5px))  scale(1); }
}

.mode-bubble-sub {
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.8;
}

.mode-bubble-commander {
    background: rgba(160, 35, 10, 0.9);
    color: #ffe0c0;
    border: 1.5px solid rgba(255, 120, 60, 0.55);
    box-shadow: 0 3px 14px rgba(200, 60, 20, 0.45);
}

.mode-bubble-infect {
    background: rgba(10, 80, 35, 0.9);
    color: #b8ffd6;
    border: 1.5px solid rgba(60, 220, 110, 0.55);
    box-shadow: 0 3px 14px rgba(20, 160, 70, 0.45);
}

.cmd-player-tile.damage-mode-commander {
    z-index: 1;
    box-shadow: 0 0 0 2.5px rgba(210,60,20,0.85), 0 0 14px rgba(210,60,20,0.3);
}

.cmd-player-tile.damage-mode-commander::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid rgba(220,80,30,0.75);
    border-radius: inherit;
    pointer-events: none;
    z-index: 11;
}

.cmd-player-tile.damage-mode-commander .cmd-tile-footer {
    background: #1a0a06;
}

.cmd-player-tile.damage-mode-infect {
    z-index: 1;
    box-shadow: 0 0 0 2.5px rgba(20,160,70,0.85), 0 0 14px rgba(20,160,70,0.3);
}

.cmd-player-tile.damage-mode-infect::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid rgba(30,180,80,0.75);
    border-radius: inherit;
    pointer-events: none;
    z-index: 11;
}

.cmd-player-tile.damage-mode-infect .cmd-tile-footer {
    background: #061408;
}
*/

.cmd-tile-turn-timer {
    display: flex;
    visibility: hidden;
    font-size: 0.72em;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--green);
    letter-spacing: 0.04em;
    line-height: 1;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    position: relative;
}

.is-current-turn .cmd-tile-turn-timer { visibility: visible; }

.turn-timer-time {
    font-variant-numeric: tabular-nums;
}


.cmd-tile-combat-btn {
    display: block;
    visibility: hidden;
    pointer-events: none;
    font-size: 0.66em;
    font-weight: 700;
    padding: 2px 7px;
    border: 1px solid rgba(249,115,22,0.45);
    border-radius: 4px;
    background: rgba(249,115,22,0.1);
    color: var(--orange-light);
    cursor: pointer;
    letter-spacing: 0.03em;
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    touch-action: manipulation;
    transition: background 0.12s, border-color 0.12s;
    width: 100%;
    box-sizing: border-box;
}
.is-current-turn .cmd-tile-combat-btn { visibility: visible; pointer-events: auto; }
.cmd-tile-combat-btn:active {
    background: rgba(249,115,22,0.28);
    border-color: var(--orange);
}

/* Combat button scales with tile width via container query */
/* Hide emoji on tiles narrower than 90px so "Combat" text always fits in full */
/* Scale tile name down on narrow tiles so it's not cut off */
@container (max-width: 120px) {
    .cmd-tile-name { font-size: 0.72em; }
}
@container (max-width: 90px) {
    .cmd-tile-name {
        font-size: 0.65em;
        white-space: normal;
        overflow-wrap: break-word;
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
@container (max-width: 70px) {
    .cmd-tile-name {
        font-size: 0.58em;
    }
}

@container (max-width: 89px) {
    .combat-btn-icon { display: none; }
}
@container (min-width: 90px) {
    .cmd-tile-combat-btn {
        font-size: 0.76em;
        padding: 3px 8px;
    }
}
@container (min-width: 130px) {
    .cmd-tile-combat-btn {
        font-size: 0.88em;
        padding: 5px 10px;
        border-radius: 6px;
    }
    .cmd-tile-turn-timer { font-size: 0.82em; }
    .cmd-tile-name { font-size: 0.86em; }
}
@container (min-width: 180px) {
    .cmd-tile-combat-btn {
        font-size: 1em;
        padding: 7px 12px;
        border-radius: 7px;
        border-width: 1.5px;
    }
    .cmd-tile-turn-timer { font-size: 0.92em; }
    .cmd-tile-name { font-size: 0.95em; }
}
@container (min-width: 240px) {
    .cmd-tile-combat-btn {
        font-size: 1.05em;
        padding: 9px 14px;
        border-radius: 8px;
    }
    .cmd-tile-turn-timer { font-size: 1em; }
    .cmd-tile-name { font-size: 1em; }
}

/* Life counter wheel */
/* Always-visible life total + +/- buttons */
.life-display {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 10px 7% 5px;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
    z-index: 4;
    cursor: ns-resize;
    user-select: none;
    touch-action: none;
}

.life-display-num {
    /* Flex child — never overlaps the +/- buttons */
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.82em;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.95), 0 0 12px rgba(0,0,0,0.7);
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    transition: font-size 0.1s ease;
    overflow: hidden;
}
/* Scale life number down when digit count grows — keeps it visible and centered */
.life-display-num[data-digits="2"] { font-size: 1.5em; }
.life-display-num[data-digits="3"] { font-size: 1.45em; }
.life-display-num[data-digits="4"] { font-size: 1.1em; }
.life-display-num[data-digits="5"] { font-size: 0.88em; }

/* Drum wheel overlay — hidden by default, slides in during drag */
.life-wheel {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 2px 5px;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 65%, transparent 100%);
    cursor: ns-resize;
    user-select: none;
    touch-action: none;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.life-wheel.is-dragging {
    opacity: 1;
}

.life-wheel-icon {
    font-size: 0.65em;
    color: #fc8181;
    line-height: 1;
    pointer-events: none;
    flex-shrink: 0;
}

.life-wheel-viewport {
    overflow: hidden;
    /* font-size establishes the shared em context for height, drum translate, and slot height */
    font-size: 1.35em;
    height: 1.9em;
    flex: 1 1 auto;
    position: relative;
}

.life-wheel-viewport.is-dragging {
    overflow: visible;
}

.life-drum {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* -1.9em here uses viewport's 1.35em font-size context, matching slot height exactly */
    transform: translateY(-1.9em);
    will-change: transform;
}

.life-drum-num {
    height: 1.9em;
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-size inherited from viewport (1.35em) — keeps em context consistent */
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.95), 0 0 12px rgba(0,0,0,0.7);
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    will-change: transform, opacity;
    padding: 0 2px;
}

.life-drum-above, .life-drum-below {
    opacity: 0.38;
    color: #ccc;
    /* scale instead of font-size so slot height stays consistent */
    transform: scale(0.84);
    text-shadow: none;
}

/* Life change flash + floating delta */
@keyframes lifeFlashGain {
    0%   { color: #68d391; text-shadow: 0 0 16px rgba(104,211,145,0.9), 0 1px 6px rgba(0,0,0,0.95); }
    100% { color: #fff;    text-shadow: 0 1px 6px rgba(0,0,0,0.95), 0 0 12px rgba(0,0,0,0.7); }
}
@keyframes lifeFlashLoss {
    0%   { color: #fc8181; text-shadow: 0 0 16px rgba(252,129,129,0.9), 0 1px 6px rgba(0,0,0,0.95); }
    100% { color: #fff;    text-shadow: 0 1px 6px rgba(0,0,0,0.95), 0 0 12px rgba(0,0,0,0.7); }
}
.life-number-flash-gain { animation: lifeFlashGain 0.7s ease-out forwards; }
.life-number-flash-loss { animation: lifeFlashLoss 0.7s ease-out forwards; }

@keyframes lifeDeltaFloat {
    0%   { opacity: 1; transform: translate(-50%, 0) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -2.6em) scale(0.75); }
}
.life-delta-float {
    position: absolute;
    left: 50%;
    bottom: 28%;
    transform: translateX(-50%);
    font-size: 1.1em;
    font-weight: 900;
    pointer-events: none;
    z-index: 30;
    text-shadow: 0 1px 8px rgba(0,0,0,0.95), 0 0 4px rgba(0,0,0,0.8);
    animation: lifeDeltaFloat 1s ease-out forwards;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.life-delta-float.gain { color: #68d391; }
.life-delta-float.loss { color: #fc8181; }

/* Drag total indicator — persistent badge showing cumulative life change during drag */
.drag-total-indicator {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.15em;
    font-weight: 900;
    pointer-events: none;
    z-index: 40;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(0,0,0,0.65);
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(4px);
    min-width: 2.5em;
    text-align: center;
    transition: color 0.1s;
}
.drag-total-indicator.gain { color: #68d391; }
.drag-total-indicator.loss { color: #fc8181; }

/* Life adjust +/- buttons */
.life-adj-btn {
    background: transparent;
    border: none;
    color: #fff;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.75), 1px -1px 0 rgba(0,0,0,0.75), -1px 1px 0 rgba(0,0,0,0.75), 1px 1px 0 rgba(0,0,0,0.75), 0 2px 6px rgba(0,0,0,0.9);
    font-size: 1.15em;
    font-weight: 800;
    /* vertical padding for touch accuracy; horizontal kept proportional */
    padding: 10px 2%;
    margin: 0;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
    /* no min-width — let padding & content set the size so narrow tiles never overflow */
    min-width: 0;
    text-align: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    transition: opacity 0.15s, transform 0.15s;
    font-family: inherit;
}
.life-adj-btn:hover { opacity: 0.75; }
.life-adj-btn:active {
    opacity: 1;
    transform: scale(0.78);
    transition: opacity 0s, transform 0s;
}
.life-adj-btn:focus { outline: none; }
@media (hover: none), (pointer: coarse) {
    .life-adj-btn:hover { opacity: 1; }
    /* narrower horizontal padding on touch — preserves space for the life number */
    .life-adj-btn { padding: 10px 1%; }
}
@media (hover: hover) and (pointer: fine) {
    .life-adj-btn {
        font-size: 1.25em;
        padding: 10px 3%;
    }
    .life-display, .life-wheel { gap: 6px; }
}

/* Life display + wheel scaling by player count — fewer players = larger font context */
.cmd-players-strip[data-players="2"] .life-display,
.cmd-players-strip[data-players="2"] .life-wheel { font-size: 1.6em; padding: 14px 7% 8px; }
.cmd-players-strip[data-players="3"] .life-display,
.cmd-players-strip[data-players="3"] .life-wheel { font-size: 1.3em; padding: 12px 7% 6px; }
.cmd-players-strip[data-players="4"] .life-display,
.cmd-players-strip[data-players="4"] .life-wheel { font-size: 1.1em; padding: 10px 7% 5px; }
.cmd-players-strip[data-players="5"] .life-display,
.cmd-players-strip[data-players="5"] .life-wheel,
.cmd-players-strip[data-players="6"] .life-display,
.cmd-players-strip[data-players="6"] .life-wheel { font-size: 1.05em; padding: 10px 7% 5px; }

/* ---- 5-player: 3+2 two-row grid (equal tile sizes) ---- */
.cmd-players-strip[data-players="5"] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    overflow-x: unset;
    flex-direction: unset;
    /* fills the empty ⅙-column gaps at each side of the bottom row */
    background: #1a1a24;
    border-radius: 10px;
}
.cmd-players-strip[data-players="5"] .cmd-player-tile {
    grid-column: span 2;
    border-radius: 0;
}
/*
 * Tiles 4 and 5 each span 2 of 6 cols (same as top row = 33.33% width).
 * Columns 2-3 and 4-5 are used so they sit centered, with col 1 and col 6 empty.
 * The strip background (#1a1a24) fills those empty cells seamlessly.
 */
.cmd-players-strip[data-players="5"] .cmd-player-tile:nth-child(4) {
    grid-column: 2 / 4;
    border-top: 2px solid rgba(0,0,0,0.25);
    border-left: none;
}
.cmd-players-strip[data-players="5"] .cmd-player-tile:nth-child(5) {
    grid-column: 4 / 6;
    border-top: 2px solid rgba(0,0,0,0.25);
}
/* Corner radii for 5-player grid */
.cmd-players-strip[data-players="5"] .cmd-player-tile:nth-child(1) { border-radius: 10px 0 0 0; }
.cmd-players-strip[data-players="5"] .cmd-player-tile:nth-child(3) { border-radius: 0 10px 0 0; }
.cmd-players-strip[data-players="5"] .cmd-player-tile:nth-child(4) { border-radius: 0 0 0 10px; }
.cmd-players-strip[data-players="5"] .cmd-player-tile:nth-child(5) { border-radius: 0 0 10px 0; }

/* ---- 6-player: 3+3 two-row grid ---- */
.cmd-players-strip[data-players="6"] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: unset;
    flex-direction: unset;
}
.cmd-players-strip[data-players="6"] .cmd-player-tile {
    border-radius: 0;
}
/* Bottom-row tiles get a top separator */
.cmd-players-strip[data-players="6"] .cmd-player-tile:nth-child(n+4) {
    border-top: 2px solid rgba(0,0,0,0.25);
}
/* 4th tile starts new row — remove the sibling border-left */
.cmd-players-strip[data-players="6"] .cmd-player-tile:nth-child(4) {
    border-left: none;
}
/* Corner radii for 6-player grid */
.cmd-players-strip[data-players="6"] .cmd-player-tile:nth-child(1) { border-radius: 10px 0 0 0; }
.cmd-players-strip[data-players="6"] .cmd-player-tile:nth-child(3) { border-radius: 0 10px 0 0; }
.cmd-players-strip[data-players="6"] .cmd-player-tile:nth-child(4) { border-radius: 0 0 0 10px; }
.cmd-players-strip[data-players="6"] .cmd-player-tile:nth-child(6) { border-radius: 0 0 10px 0; }

/* ---- 4-player: single row on desktop, 2×2 grid on mobile ---- */
/* (mobile override is in the @media (max-width: 480px) block below) */

/* Prevent card scale when interacting with life display */
.cmd-player-tile:has(.life-display:active) {
    transform: none !important;
}

.cmd-player-tile.eliminated {
    opacity: 0.4;
    filter: grayscale(80%);
}

.cmd-player-tile.selected-for-elimination {
    box-shadow: inset 0 0 0 3px var(--red) !important;
}

.cmd-tile-elim-placement {
    color: var(--green);
    font-weight: 700;
    font-size: 0.82em;
    text-align: center;
    letter-spacing: 0.03em;
    padding: 1px 0;
}

/* Multi-select */
.multi-select-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--orange);
    color: white;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    font-weight: 600;
}

.multi-select-cancel {
    background: rgba(0,0,0,0.25);
    border: none;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
}

.multi-select-cancel:hover {
    background: rgba(0,0,0,0.35);
}

.multi-select-prompt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(239,68,68,0.4);
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    gap: 10px;
    flex-wrap: wrap;
}

.multi-select-prompt span {
    color: var(--text-0);
    font-size: 0.95em;
}

/* Elimination Modal */
.elimination-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.elimination-modal-content {
    background: var(--bg-2);
    padding: 20px;
    border-radius: var(--radius-lg);
    max-width: 500px;
    width: 92%;
    max-height: 92vh;
    overflow-y: auto;
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-lg);
}

/* Compact elimination header */
.elim-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-1);
}

.elim-skull {
    font-size: 1.6em;
    line-height: 1;
}

.elim-player-name {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--orange);
    text-align: center;
}

.elim-title {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--orange);
    text-align: center;
    line-height: 1.2;
}

/* "Also eliminate" chips section */
.elim-also-section {
    border-top: 1px solid var(--border-1);
    padding-top: 10px;
}

.also-eliminate-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.also-elim-chip {
    padding: 4px 12px;
    background: var(--bg-3);
    border: 1px solid var(--border-2);
    border-radius: 999px;
    color: var(--text-0);
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.also-elim-chip:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: white;
}

/* Self-destruct killer button */
.killer-btn.killer-btn-self-destruct {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.06);
}

.killer-btn.killer-btn-self-destruct .killer-btn-footer {
    background: #1a0c0c;
}

.killer-btn.killer-btn-self-destruct:hover .killer-btn-footer {
    background: var(--red);
}

.self-destruct-art {
    filter: grayscale(60%) brightness(0.75);
}

.killer-self-destruct-tag {
    display: inline-block;
    background: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    font-size: 0.7em;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 3px;
    font-weight: 600;
    vertical-align: middle;
}

/* =============================================
   ELIMINATION DIALOG REDESIGN
   ============================================= */

.elimination-modal-content.elim-redesign {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    overscroll-behavior: contain;
}

/* ── Deaths zone (top) ── */
.elim-deaths-zone {
    background: linear-gradient(160deg, #180808 0%, #2a0f0f 100%);
    padding: 14px 14px 10px;
    flex-shrink: 0;
    transition: background 0.2s, box-shadow 0.2s;
}

.elim-deaths-zone.elim-dz-active {
    background: linear-gradient(160deg, #200a0a 0%, #3d1212 100%);
}

.elim-deaths-zone.elim-dz-hover {
    background: linear-gradient(160deg, #2e0b0b 0%, #5c1616 100%);
    box-shadow: inset 0 0 0 2px rgba(255, 80, 80, 0.55);
}

.elim-zone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 4px;
}

.elim-zone-title {
    font-size: 1em;
    font-weight: 700;
    color: #ff6b6b;
    letter-spacing: 0.03em;
}

.elim-drag-hint {
    font-size: 0.71em;
    color: rgba(255, 255, 255, 0.32);
    font-style: italic;
}

.elim-deaths-roster {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    min-height: 88px;
    align-items: center;
}

/* Dead player card */
.elim-dead-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 70px;
    animation: elimDeadCardIn 0.22s ease forwards;
}

.elim-dead-card.elim-dead-removable {
    cursor: pointer;
}

.elim-dead-card.elim-dead-removable:hover .elim-dead-art {
    box-shadow: 0 0 0 2px rgba(255, 80, 80, 0.65);
}

@keyframes elimDeadCardIn {
    from { opacity: 0; transform: scale(0.55) translateY(-12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.elim-dead-art {
    width: 70px;
    height: 80px;
    border-radius: 8px;
    background: #1a1a24;
    position: relative;
    overflow: hidden;
    filter: grayscale(1) brightness(0.48);
    transition: box-shadow 0.15s;
    flex-shrink: 0;
}

.elim-dead-art-inner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 20%;
    background-color: #1a1a24;
}

.elim-dead-art-split {
    display: flex;
    position: absolute;
    inset: 0;
}

.elim-dead-art-split > div {
    flex: 1;
    background-size: cover;
    background-position: center 20%;
    background-color: #1a1a24;
}

.elim-dead-skull {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7em;
    background: rgba(0, 0, 0, 0.22);
}

.elim-dead-remove-x {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    background: rgba(255, 55, 55, 0.88);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62em;
    color: white;
    font-weight: 700;
    line-height: 1;
}

.elim-dead-name {
    font-size: 0.68em;
    color: rgba(255, 255, 255, 0.48);
    text-align: center;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.elim-dead-life {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}
.elim-dead-life--zero {
    color: rgba(255, 80, 80, 0.85);
    font-weight: 600;
}

.elim-set-zero-btn {
    font-size: 0.6em;
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 80, 80, 0.45);
    background: rgba(255, 80, 80, 0.12);
    color: rgba(255, 120, 120, 0.85);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.3;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.elim-set-zero-btn:hover {
    background: rgba(255, 80, 80, 0.28);
    border-color: rgba(255, 80, 80, 0.75);
    color: #fff;
}
.elim-set-zero-btn--active {
    background: rgba(255, 80, 80, 0.35);
    border-color: rgba(255, 80, 80, 0.85);
    color: #fff;
}

.elim-meta-row {
    font-size: 0.74em;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    margin-top: 8px;
}

/* ── Zone divider ── */
.elim-zone-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    flex-shrink: 0;
}

.elim-divider-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, #667eea 35%, #764ba2 65%, transparent);
}

.elim-divider-label {
    font-size: 0.78em;
    font-weight: 700;
    color: #9b8aef;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

/* ── Killers zone (bottom) ── */
.elim-killers-zone {
    display: grid;
    gap: 8px;
    padding: 8px 14px;
    overflow: hidden;
    flex: 1;
    min-height: 90px;
}

/* Drag-up hint badge on killer buttons */
.killer-btn-drag-up {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.6em;
    color: rgba(255, 255, 255, 0.28);
    padding: 3px 0 2px;
    background: rgba(0, 0, 0, 0.28);
    letter-spacing: 0.04em;
    pointer-events: none;
    z-index: 1;
}

/* Ensure killer-btn-img is the positioning parent */
.elim-redesign .killer-btn-img {
    position: relative;
}

/* Current Player Turn label under name */
.killer-current-turn-label {
    font-size: 0.6em;
    color: #fbbf24;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
    text-align: center;
    display: block;
}

/* Commander damage dealt — portrait overlay badge */
.cmd-dmg-dealt-badge {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.80);
    color: #ff6b6b;
    font-size: 1.25em;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 6px;
    line-height: 1.5;
    pointer-events: none;
    z-index: 2;
    border: 1px solid rgba(239, 68, 68, 0.45);
    letter-spacing: 0.02em;
}

/* "Attacker" sublabel — orange, for selected non-current-turn player */
.cmd-dmg-attacker-label {
    color: var(--orange) !important;
}

.elim-no-killers {
    color: rgba(255, 255, 255, 0.38);
    text-align: center;
    padding: 18px;
    font-size: 0.9em;
}

/* ── Cause row ── */
.elim-cause-row {
    padding: 8px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.elim-cause-row .elim-label {
    margin-bottom: 5px;
    font-size: 0.84em;
}

/* ── Footer buttons ── */
.elim-modal-footer {
    display: flex;
    gap: 8px;
    padding: 8px 14px 14px;
    flex-shrink: 0;
}

.elim-modal-footer button {
    flex: 1;
}

.elim-modal-footer button:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

/* Loading placeholder */
.elim-loading-hint {
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    padding: 22px;
    font-size: 0.85em;
}

/* Selected killer button */
.killer-btn.killer-btn-selected {
    border-color: var(--orange) !important;
    background: rgba(235, 128, 42, 0.1);
}

.killer-btn-img.killer-btn-selected .killer-btn-footer {
    background: rgba(235, 128, 42, 0.25);
}

/* Multi-victim notice badge */
.elim-multi-notice {
    display: inline-block;
    background: rgba(102, 126, 234, 0.15);
    color: #667eea;
    font-size: 0.78em;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    margin-top: 2px;
}

/* Small hint text next to label */
.elim-label-hint {
    color: var(--text-2);
    font-weight: normal;
    font-size: 0.82em;
}

.elim-meta {
    font-size: 0.85em;
    color: var(--text-2);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.elim-section {
    margin: 10px 0;
}

.elim-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9em;
    color: var(--text-1);
}

.elim-label-optional {
    color: var(--text-2);
    font-weight: normal;
}

/* Keep for mutual-elimination dialog */
.elimination-time {
    text-align: center;
    font-size: 1.3em;
    font-variant-numeric: tabular-nums;
    color: var(--orange);
    font-weight: 700;
    margin: 6px 0;
}

.elimination-round {
    text-align: center;
    font-size: 1em;
    color: var(--text-1);
    margin: 4px 0 10px 0;
}

.elimination-context {
    text-align: center;
    font-style: italic;
    color: var(--text-2);
    margin: 6px 0;
}

.killer-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.killer-btn {
    padding: 10px 8px;
    background: var(--bg-3);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
    text-align: center;
    color: var(--text-0);
    font-family: inherit;
}

.killer-btn:hover {
    background: var(--orange);
    color: white;
    border-color: var(--orange);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px var(--orange-glow);
}

.winner-btn-name {
    display: block;
    font-weight: 700;
    font-size: 1em;
}

.winner-btn-commander {
    display: block;
    font-weight: 400;
    font-size: 0.8em;
    color: var(--orange);
    margin-top: 3px;
}

.killer-btn:hover .winner-btn-commander {
    color: rgba(255,255,255,0.85);
}

/* ==============================
   RESULTS PAGE
   ============================== */

.results-header {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(135deg, var(--orange-hover), #7c2d12);
    border-radius: var(--radius-md);
    color: white;
    margin-bottom: 25px;
    box-shadow: 0 6px 24px var(--orange-glow);
    position: relative;
    overflow: hidden;
}

.results-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(249,115,22,0.3) 0%, transparent 60%);
    pointer-events: none;
}

.results-trophy {
    font-size: 4em;
    margin-bottom: 10px;
    position: relative;
}

.results-winner-name {
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
    position: relative;
}

.results-winner-commander {
    font-size: 1.1em;
    opacity: 0.85;
    margin: 8px 0 0 0;
    position: relative;
}

.results-stats-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 25px;
}

.results-stat {
    background: var(--bg-2);
    border-radius: var(--radius-md);
    padding: 15px;
    text-align: center;
    border-left: 3px solid var(--orange);
    border-top: 1px solid var(--border-1);
    border-right: 1px solid var(--border-1);
    border-bottom: 1px solid var(--border-1);
}

.results-stat-value {
    display: block;
    font-size: 1.5em;
    font-weight: 800;
    color: var(--orange);
    font-variant-numeric: tabular-nums;
}

.results-stat-label {
    display: block;
    font-size: 0.8em;
    color: var(--text-2);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.results-section {
    margin-bottom: 25px;
}

.results-section-title {
    font-size: 1.2em;
    color: var(--text-1);
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-1);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Standings */
.results-standings {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.standing-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--bg-2);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--border-2);
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border-1);
    border-right: 1px solid var(--border-1);
    border-bottom: 1px solid var(--border-1);
}

.standing-winner {
    background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(245,158,11,0.04));
    border-left-color: var(--gold);
}

.standing-eliminated {
    opacity: 0.6;
}

.standing-row-body {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    min-width: 0;
}

.standing-placement {
    font-weight: 700;
    font-size: 0.88em;
    color: var(--orange);
    min-width: 46px;
    padding-top: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}

.standing-winner .standing-placement {
    color: var(--gold);
}

.standing-profile-winner .standing-placement {
    color: var(--green);
}

.standing-profile-winner .standing-name {
    color: var(--green);
}

.standing-info {
    flex: 1;
    min-width: 0;
}

.standing-name {
    font-weight: 700;
    font-size: 1.02em;
    color: var(--text-0);
    word-break: break-word;
    overflow-wrap: break-word;
}

.standing-name-link {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--accent, #7c5cbf);
}

.standing-name-link:hover {
    color: var(--accent, #7c5cbf);
}

.standing-commander-line {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin: 1px 0 3px 0;
}

.standing-commander {
    font-size: 0.88em;
    color: var(--orange);
    word-break: break-word;
    overflow-wrap: break-word;
}

.standing-bracket-badge {
    display: inline-block;
    background: var(--orange);
    color: white;
    font-size: 0.68em;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.standing-death {
    font-size: 0.8em;
    color: #fbbf24;
    background: rgba(245,158,11,0.1);
    padding: 2px 7px;
    border-radius: 4px;
    margin-top: 2px;
    border-left: 2px solid var(--red);
}

.standing-avg-turn {
    font-size: 0.8em;
    color: var(--text-2);
    margin-top: 2px;
}

.standing-crown { display: none; }

/* Turn Stats — compact table */
.results-turn-compact {
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    overflow: hidden;
    font-size: 0.82em;
}

.results-turn-compact-header {
    display: grid;
    grid-template-columns: 1fr 58px 58px 70px 52px;
    gap: 0 14px;
    padding: 6px 12px;
    background: var(--bg-3);
    font-weight: 700;
    color: var(--orange);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.results-turn-compact-header span:not(:first-child) {
    text-align: right;
}

.results-turn-compact-row {
    display: grid;
    grid-template-columns: 1fr 58px 58px 70px 52px;
    gap: 0 14px;
    padding: 7px 12px;
    border-top: 1px solid var(--border-0);
    color: var(--text-1);
    align-items: center;
}

.results-turn-compact-row span:not(:first-child) {
    text-align: right;
}

.results-turn-compact-row:nth-child(even) {
    background: var(--bg-2);
}

.results-turn-player-name {
    font-weight: 600;
    color: var(--text-0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Legacy turn stats */
.results-turn-stats { display: flex; flex-direction: column; gap: 10px; }
.results-turn-stat-row { background: var(--bg-2); padding: 12px 15px; border-radius: var(--radius-sm); border-left: 3px solid var(--green); }
.results-turn-stat-name { font-weight: 700; color: var(--text-0); margin-bottom: 6px; }
.results-turn-stat-values { display: flex; gap: 15px; flex-wrap: wrap; font-size: 0.85em; color: var(--text-1); }


/* Action Buttons */
.results-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 25px 0;
}

@keyframes noticeFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.game-not-recorded-notice {
    margin: 12px 0;
    padding: 11px 16px;
    background: rgba(255,180,0,0.15);
    border: 1.5px solid rgba(255,180,0,0.5);
    border-radius: 8px;
    text-align: center;
    color: #ffc933;
    font-size: 0.95em;
    font-weight: 700;
    letter-spacing: 0.01em;
    animation: noticeFlash 2s ease-in-out infinite;
}

.results-btn {
    padding: 15px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
    font-family: inherit;
}

.results-btn-primary {
    background: linear-gradient(135deg, var(--orange), var(--orange-hover));
    color: white;
    grid-column: span 2;
    box-shadow: 0 4px 16px var(--orange-glow);
}

.results-btn-primary:hover {
    background: linear-gradient(135deg, var(--orange-light), var(--orange));
    transform: translateY(-2px);
    box-shadow: 0 6px 24px var(--orange-glow);
}

.results-btn-secondary {
    background: var(--bg-3);
    color: var(--text-1);
    border: 1px solid var(--border-1);
}

.results-btn-secondary:hover {
    background: var(--orange);
    color: white;
    border-color: var(--orange);
    transform: translateY(-1px);
}

/* Screenshot Share Card */
.results-share-card {
    margin-top: 20px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.share-card-inner {
    background: linear-gradient(135deg, #0a0a0e, #141418);
    color: white;
    padding: 25px;
    text-align: center;
    border-top: 2px solid var(--orange);
}

.share-card-title {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.5;
    margin-bottom: 15px;
}

.share-card-winner {
    font-size: 1.8em;
    font-weight: 800;
    margin-bottom: 5px;
    letter-spacing: -0.02em;
}

.share-card-commander {
    color: var(--orange-light);
    margin-bottom: 10px;
    font-size: 1em;
}

.share-card-stats {
    font-size: 0.85em;
    opacity: 0.5;
    margin-bottom: 20px;
    font-variant-numeric: tabular-nums;
}

.share-card-standings {
    text-align: left;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 15px;
}

.share-card-player {
    display: grid;
    grid-template-columns: 80px 1fr 1fr;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.9em;
    align-items: center;
}

.share-card-cmd {
    opacity: 0.5;
    font-size: 0.85em;
}

.btn-toggle-history {
    background: none;
    border: 1px solid var(--orange-border);
    color: var(--orange);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    font-family: inherit;
}

.btn-toggle-history:hover {
    background: var(--orange);
    color: white;
}

.game-card {
    background: var(--bg-2);
    padding: 10px 14px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-left-color 0.15s ease, transform 0.15s ease;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--orange);
    border-top: 1px solid var(--border-1);
    border-right: 1px solid var(--border-1);
    border-bottom: 1px solid var(--border-1);
}

.game-card:hover {
    box-shadow: 0 4px 16px var(--orange-glow);
    transform: translateX(2px);
}

.game-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.game-card-header h3 {
    margin: 0;
    color: var(--orange);
    font-weight: 700;
    font-size: 0.95em;
}

.game-card-date {
    font-size: 0.85em;
    color: var(--text-2);
}

.game-card-winner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.0em;
    font-weight: 700;
    color: var(--text-0);
    margin-bottom: 4px;
}

.game-card-winner-portrait {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background-size: cover;
    background-position: center 15%;
    background-color: var(--bg-3);
    flex-shrink: 0;
}

.game-card-winner-info {
    display: flex;
    flex-direction: column;
}

.game-card-winner-cmd {
    font-weight: 400;
    font-size: 0.85em;
    color: var(--orange);
}

.game-info {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
    font-size: 0.8em;
    color: var(--text-2);
}

.game-card-standings {
    border-top: 1px solid var(--border-1);
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.game-card-actions {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-1);
}

.game-card-rematch-btn {
    background: none;
    border: 1px solid var(--green);
    color: var(--green);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}

.game-card-rematch-btn:hover {
    background: var(--green);
    color: #fff;
}

.game-card-player {
    display: grid;
    grid-template-columns: 60px 1fr 1fr;
    gap: 4px;
    font-size: 0.8em;
    color: var(--text-1);
    align-items: center;
}

.game-card-placement {
    font-weight: 700;
    color: var(--orange);
}

.game-card-pname {
    font-weight: 600;
    color: var(--text-0);
}

.game-card-pcmd {
    color: var(--text-2);
    font-size: 0.9em;
}

.winner-highlight {
    color: var(--green);
    font-weight: bold;
}

/* Mobile */
@media (max-width: 1024px) {
    body { padding: 10px; }
    .container { padding: 15px; border-radius: var(--radius-lg); }
    h1 { font-size: 1.6em; margin-bottom: 20px; }
    h2 { font-size: 1.3em; margin-bottom: 15px; }

    .pcc-carousel { height: 190px; margin: 18px 0 14px; }
    .pcc-card { width: 128px; padding: 16px 10px 13px; gap: 8px; }
    .pcc-card.is-active { transform: translate(calc(-50% + var(--drag-x)), -50%) scale(1.25); }
    .pcc-card.is-prev  { transform: translate(calc(-50% - 136px + var(--drag-x)), -50%) scale(0.72); }
    .pcc-card.is-next  { transform: translate(calc(-50% + 136px + var(--drag-x)), -50%) scale(0.72); }
    .pcc-card.is-far-prev { transform: translate(calc(-50% - 260px + var(--drag-x)), -50%) scale(0.52); }
    .pcc-card.is-far-next { transform: translate(calc(-50% + 260px + var(--drag-x)), -50%) scale(0.52); }
    .pcb-icons { min-height: 46px; }
    .pcb-icon { width: 21px; height: 21px; }

    .btn-primary, .btn-secondary, .btn-danger {
        padding: 14px 16px;
        margin: 6px 2px;
        min-height: 48px;
        font-size: 1em;
    }

    .player-slot { padding: 0; }
    .autocomplete-item { padding: 10px; min-height: 44px; }

    .commander-section { padding: 12px; margin-top: 10px; }

    /* Turn order: compact single-row cards */
    .turn-order-labels { display: none; }
    #turnOrderBtnRow { margin-top: 8px !important; }
    /* Rotate slider: switch to vertical sidebar on mobile */
    .turn-order-player-row { flex-direction: row; align-items: stretch; }
    .turn-order-rotate-side { width: 22px; flex-shrink: 0; overflow: hidden; padding: 0; }
    .turn-order-rotate-rail-wrap { height: 100%; overflow: hidden; }
    .turn-order-rotate-slider {
        writing-mode: vertical-lr;
        -webkit-appearance: slider-vertical;
        appearance: slider-vertical;
        -moz-orient: vertical;
        width: 18px;
        height: 100%;
        display: block;
    }
    .turn-order-rotate-slider::-webkit-slider-runnable-track { height: auto; width: 4px; }
    .turn-order-rotate-slider::-moz-range-track { height: auto; width: 4px; }
    .turn-order-rotate-slider::-webkit-slider-thumb { margin-top: 0; margin-left: -6px; }
    .turn-order-players {
        flex-direction: column;
        overflow: hidden;
        min-height: unset;
        /* top/left padding gives the badge on the first card room to stick out */
        padding: 16px 4px 0 18px;
        gap: 5px;
    }
    .turn-order-card {
        flex: 1;
        min-height: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 0 0 0 100px; /* leave room for the art strip; inner handles the rest */
        cursor: default;
        overflow: visible; /* badge must be able to stick outside */
    }
    .turn-order-inner {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        overflow: hidden; /* hard clip — content never bleeds into adjacent cards */
        padding: calc(1px * var(--to-scale, 1)) 4px calc(1px * var(--to-scale, 1)) 4px;
        gap: calc(6px * var(--to-scale, 1));
    }
    .turn-order-art-bg {
        display: flex;
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 100px;
        flex: unset;
        min-height: unset;
        margin-top: 0;
        background-size: cover;
        background-position: center 20%;
        border-radius: 7px 0 0 7px;
        border: none;
        overflow: hidden;
    }
    .turn-order-art-bg > div {
        flex: 1;
        background-size: cover;
        background-position: center 20%;
    }
    /* Badge centered on the top-left corner of the portrait — half inside, half outside */
    .turn-order-card .turn-order-number {
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(-50%, -50%);
        width: calc(28px * var(--to-scale, 1));
        height: calc(28px * var(--to-scale, 1));
        font-size: calc(0.85em * var(--to-scale, 1));
    }
    /* Header wrapper: flex column so name sits directly above commander */
    #turnOrderPlayers .turn-order-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        flex-shrink: 0;
        gap: calc(1px * var(--to-scale, 1));
    }
    .turn-order-player-info {
        min-width: 0;
        overflow: hidden;
        text-align: center;
        flex-shrink: 0;
    }
    .turn-order-player-info h4 {
        white-space: nowrap;
        overflow: hidden;
        margin: 0;
        line-height: 1.15;
    }
    .turn-order-player-info p { display: none; }
    .turn-order-commander-bar {
        display: block;
        width: 100%;
        overflow: hidden;
        padding: 0;
        text-align: center;
        flex-shrink: 0;
    }
    .turn-order-commander-bar span {
        display: block;
        white-space: nowrap;
        color: var(--text-2);
        font-style: italic;
        line-height: 1.15;
    }
    .turn-order-image { display: none; }
    /* Use #turnOrderPlayers prefix for higher specificity than the global .mulligan-counter
       rule at line ~5263, which comes later in the file and would otherwise override
       margin-top:0, padding:0, border:none, and flex-direction:row on mobile. */
    #turnOrderPlayers .mulligan-counter {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: none;
        border-top: 1px solid var(--border-1);
        margin-top: 0;
        padding-top: calc(3px * var(--to-scale, 1));
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
        flex-shrink: 0;
        gap: calc(3px * var(--to-scale, 1));
    }
    #turnOrderPlayers .mulligan-label { display: block; margin: 0; line-height: 1; }
    #turnOrderPlayers .mulligan-controls { gap: calc(6px * var(--to-scale, 1)); }
    #turnOrderPlayers .mulligan-controls button { box-sizing: border-box; width: calc(22px * var(--to-scale, 1)); height: calc(22px * var(--to-scale, 1)); min-width: 0; padding: 0; line-height: 1; }
    #turnOrderPlayers .mulligan-controls span { min-width: calc(8px * var(--to-scale, 1)); line-height: 1; }

    /* Timer screen — compact for mobile */
#timer { font-size: 1.1em; }
    .current-turn-name-display { max-width: 110px; }
    .current-turn-name { font-size: 0.95em; }
    .timer-row { gap: 14px; }
    .round-number { font-size: 1.1em; }
    .round-label { font-size: 0.52em; }
    .lap-tracking-section { padding: 4px 4px 0 4px; margin: 4px 0; }
    .timer-row.tracking-list-header { padding: 2px 8px 3px; margin-bottom: 2px; }
    /* Keep the tracking list small on mobile — player cards + damage bubbles must
       stay visible without page-scrolling. Scroll WITHIN this list for lap history.
       160px = 4 compact turn rows + round header(s) with safe margin. */
    .unified-tracking-list { max-height: 160px; }
    /* Compact tracking rows — use #unifiedTracking for specificity to beat base rules */
    #unifiedTracking .tracking-item { padding: 2px 8px; margin-bottom: 1px; }
    #unifiedTracking .tracking-portrait { width: 18px; height: 22px; }
    #unifiedTracking .tracking-portrait-split > div { height: 22px; }
    /* Turn rows: portrait stretches full height, flush to left edge */
    #unifiedTracking .tracking-turn { padding-left: 0; padding-top: 0; padding-bottom: 0; }
    #unifiedTracking .tracking-turn .tracking-portrait,
    #unifiedTracking .tracking-turn .tracking-portrait-split { width: 36px; height: auto; align-self: stretch; border-radius: 0; }
    #unifiedTracking .tracking-turn .tracking-portrait-split > div { height: auto; }
    #unifiedTracking .tracking-turn .tracking-item-left { padding: 2px 0; }
    #unifiedTracking .tracking-label { font-size: 0.8em; }
    #unifiedTracking .tracking-time { font-size: 0.82em; }
    /* Compact round headers so they don't eat into turn rows */
    #unifiedTracking .tracking-round-header { padding: 2px 8px; margin: 2px 0 1px; font-size: 0.75em; }
    .cmd-tile-turn-timer { font-size: 0.68em; }
    /* Compact footer on mobile so the combat button isn't squeezed out */
    .cmd-tile-footer { padding: 3px 3px 4px; gap: 2px; }
    .cmd-tile-combat-btn { font-size: 0.6em; padding: 2px 5px; }

    .multi-select-cancel { padding: 10px 16px; font-size: 1em; min-width: 80px; }

    .elimination-modal-content { padding: 14px; width: 95%; }
    .elim-header { margin-bottom: 10px; padding-bottom: 10px; }
    .killer-selection { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; }
    .killer-btn { padding: 8px 6px; }
    .killer-btn-name { font-size: 0.9em; }
    .killer-btn-commander { font-size: 0.7em; }
    .elim-section { margin: 8px 0; }
    .text-input { padding: 8px 10px; font-size: 0.95em; }

    /* Results */
    .results-actions { grid-template-columns: 1fr; }
    .results-btn-primary { grid-column: span 1; }
    .results-stats-bar { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .results-stat { padding: 8px 5px; }
    .results-stat-value { font-size: 1.1em; }
    .share-card-player { grid-template-columns: 60px 1fr; }
    .share-card-cmd { display: none; }
    .game-card-player { grid-template-columns: 60px 1fr; }
    .game-card-pcmd { display: none; }

    .standing-art-panel { width: 68px; }
    .results-turn-compact-header, .results-turn-compact-row { grid-template-columns: 1fr 46px 46px 56px 36px; gap: 0 7px; padding: 5px 8px; font-size: 0.76em; }

    .kbd-hint { display: none; }

    /* 4-player mobile: 2×2 grid */
    .cmd-players-strip[data-players="4"] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        overflow-x: unset;
        flex-direction: unset;
    }
    .cmd-players-strip[data-players="4"] .cmd-player-tile { border-radius: 0; }
    .cmd-players-strip[data-players="4"] .cmd-player-tile:nth-child(n+3) {
        border-top: 2px solid rgba(0,0,0,0.25);
    }
    .cmd-players-strip[data-players="4"] .cmd-player-tile:nth-child(3) { border-left: none; }
    .cmd-players-strip[data-players="4"] .cmd-player-tile:nth-child(1) { border-radius: 10px 0 0 0; }
    .cmd-players-strip[data-players="4"] .cmd-player-tile:nth-child(2) { border-radius: 0 10px 0 0; }
    .cmd-players-strip[data-players="4"] .cmd-player-tile:nth-child(3) { border-radius: 0 0 0 10px; }
    .cmd-players-strip[data-players="4"] .cmd-player-tile:nth-child(4) { border-radius: 0 0 10px 0; }
    .cmd-players-strip[data-players="4"] .life-display,
    .cmd-players-strip[data-players="4"] .life-wheel { font-size: 1.3em; padding: 12px 7% 6px; }
    /* Shorter portraits so life, combat btn, and bottom bar all fit without scrolling */
    .cmd-players-strip[data-players="4"] .cmd-tile-image-wrap {
        padding-top: 65%;
    }
}

/* Narrow screen (≤400px): prevent +/- buttons from squeezing the life total */
@media (max-width: 400px) {
    .life-adj-btn {
        font-size: 0.9em;
        padding: 10px 4px;
    }
    /* Slightly smaller life-display context for 5-6 players so the number has room */
    /* 4-player is now 2-col grid — tiles are wider, no reduction needed */
    .cmd-players-strip[data-players="5"] .life-display,
    .cmd-players-strip[data-players="5"] .life-wheel,
    .cmd-players-strip[data-players="6"] .life-display,
    .cmd-players-strip[data-players="6"] .life-wheel { font-size: 0.92em; }
}

/* Turn order: add a little breathing room at the top on short-height phones */
@media (max-width: 1024px) and (max-height: 700px) {
    .turn-order-container {
        margin-top: 10px;
    }
}

/* Turn order: horizontal layout for mid-width screens (tablet landscape, browser windows ~600-1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
    /* Restore horizontal label row */
    .turn-order-labels { display: flex; }
    #turnOrderBtnRow { margin-top: 30px !important; }

    /* Slider goes back to horizontal strip below cards */
    .turn-order-player-row { flex-direction: column; align-items: unset; gap: 8px; }
    .turn-order-rotate-side { width: 100%; padding: 2px 0; flex-shrink: unset; overflow: visible; }
    .turn-order-rotate-rail-wrap { width: 100%; height: auto; overflow: visible; }
    .turn-order-rotate-slider {
        writing-mode: horizontal-tb;
        -webkit-appearance: none;
        appearance: none;
        -moz-orient: horizontal;
        width: 100%;
        height: 4px;
        display: block;
    }
    .turn-order-rotate-slider::-webkit-slider-runnable-track { height: 4px; width: auto; }
    .turn-order-rotate-slider::-moz-range-track { height: 4px; width: auto; }
    .turn-order-rotate-slider::-webkit-slider-thumb { margin-top: -6px; margin-left: 0; }

    /* Cards in a scrollable horizontal row, each growing to fill available width */
    .turn-order-players {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: visible;
        min-height: 200px;
        padding: 20px;
        gap: 15px;
    }
    .turn-order-card {
        flex: 1;
        min-width: 120px;
        width: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: unset;
        padding: 15px;
        cursor: grab;
        overflow: visible;
    }

    /* Restore transparent wrappers */
    .turn-order-inner { display: contents; }
    .turn-order-header { display: contents; }
    #turnOrderPlayers .turn-order-header { display: contents; }

    /* Art crop: undo mobile absolute positioning, restore as in-flow flex item */
    .turn-order-art-bg {
        display: flex;
        position: relative;
        left: unset; top: unset; bottom: unset;
        width: 100%;
        flex: 1;
        min-height: 80px;
        margin-top: 10px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-1);
    }
    .turn-order-commander-bar { display: none; }

    /* Badge: desktop top-left corner position */
    .turn-order-card .turn-order-number {
        position: absolute;
        top: -10px;
        left: -10px;
        transform: none;
        width: 35px;
        height: 35px;
        font-size: 1.2em;
    }

    /* Player info text */
    .turn-order-player-info { min-width: 0; overflow: hidden; text-align: center; flex-shrink: 1; }
    .turn-order-player-info h4 { white-space: nowrap; overflow: hidden; margin: 0 0 5px; line-height: unset; }
    .turn-order-player-info p { display: block; }

    /* Mulligan: reset to desktop layout */
    #turnOrderPlayers .mulligan-counter {
        flex-direction: column;
        align-items: center;
        justify-content: unset;
        border: none;
        border-top: 1px solid var(--border-1);
        margin-top: 8px;
        padding: 0;
        flex-shrink: 1;
        gap: 4px;
    }
    #turnOrderPlayers .mulligan-label { display: block; margin-bottom: 4px; line-height: unset; }
    #turnOrderPlayers .mulligan-controls { gap: 8px; }
    #turnOrderPlayers .mulligan-controls button {
        box-sizing: content-box;
        width: 28px;
        height: 28px;
        min-width: unset;
        padding: unset;
        line-height: unset;
    }
    #turnOrderPlayers .mulligan-controls span { min-width: 22px; line-height: unset; }
}

/* Touch devices */
@media (hover: none), (pointer: coarse) {
    .pcc-card:not(.is-active):hover { transform: none; }
    .commander-card-option:hover { transform: none; box-shadow: none; }
    .cmd-player-tile:hover { transform: none; }
    .standing-interactive:hover { transform: none; }
    .turn-order-card:hover { transform: none; box-shadow: none; border-color: var(--border-1); }
    .commander-remove-btn { opacity: 1; }
    .sheet-delete-btn { color: rgba(255,255,255,0.25); }
    .kbd-hint { display: none; }
}

/* Turn order reorder hint (shown only on touch) */
.turn-order-hint {
    display: none;
    text-align: center;
    font-size: 0.8em;
    color: var(--text-2);
    margin: 0 0 8px;
    font-style: italic;
}

@media (hover: none), (pointer: coarse) {
    .turn-order-hint { display: block; }
    .turn-order-card { -webkit-touch-callout: none; }
}

/* Long-press visual feedback: progress ring sweeps while user holds to drag */
.turn-order-card.turn-order-pressing {
    background:
        linear-gradient(var(--bg-3), var(--bg-3)) padding-box,
        conic-gradient(var(--orange) var(--prog, 0%), var(--border-1) var(--prog, 0%)) border-box !important;
    border: 2px solid transparent !important;
    filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.45));
}

/* ==============================
   MANA PIPS
   ============================== */

.mana-pip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid;
    font-size: 0.75em;
    font-weight: 700;
    margin: 0 2px;
}

.killer-btn-name {
    display: block;
    font-weight: 700;
    font-size: 1em;
}

.killer-btn-commander {
    display: block;
    font-size: 0.75em;
    color: var(--orange);
    font-weight: 400;
    margin: 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.killer-btn:hover .killer-btn-commander {
    color: rgba(255,255,255,0.85);
}

.killer-btn-mana {
    display: block;
    margin-top: 4px;
}

/* Portrait scaling — transition for all killer buttons */
.elim-killer-btn {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    will-change: transform;
    position: relative;
    z-index: 0;
}

/* Desktop hover: grow slightly to show it's clickable */
@media (hover: hover) {
    .elim-killer-btn:not(.killer-btn-selected):hover {
        transform: scale(1.08);
        z-index: 1;
    }
}

/* Selected portrait grows */
.elim-killer-btn.killer-btn-selected {
    transform: scale(1.13);
    z-index: 2;
}

/* Non-selected portraits shrink when something is selected */
.elim-killers-zone.has-selection .elim-killer-btn:not(.killer-btn-selected) {
    transform: scale(0.88);
}

/* Health counter inside elimination killer buttons */
.elim-life-counter {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    margin-top: 2px;
    touch-action: none;
}

.elim-life-btn {
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
    user-select: none;
    color: rgba(255,255,255,0.8);
    transition: background 0.12s;
}

.elim-life-btn:hover {
    background: rgba(255,255,255,0.22);
}

.elim-life-num {
    min-width: 26px;
    text-align: center;
    font-size: 0.82em;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    font-variant-numeric: tabular-nums;
    cursor: ns-resize;
}

/* Image-style killer buttons */
.killer-btn-img {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: transparent;
}

.killer-btn-art-wrap {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background: #1a1a24;
    overflow: hidden;
    flex-shrink: 0;
}

.killer-btn-art-single {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 20%;
    background-color: #1a1a24;
}

.killer-btn-art-split {
    position: absolute;
    inset: 0;
    display: flex;
}

.killer-btn-art-split > div {
    flex: 1;
    background-size: cover;
    background-position: center 20%;
    background-color: #1a1a24;
}

.killer-btn-footer {
    background: #0e0e14;
    padding: 5px 4px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.killer-btn-img .killer-btn-name {
    color: rgba(255,255,255,0.9);
    font-size: 0.75em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
    display: block;
}

.killer-btn-img .killer-btn-commander {
    color: rgba(255,255,255,0.5);
    font-size: 0.68em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
    display: block;
}

.killer-btn-img:hover .killer-btn-commander {
    color: rgba(255,255,255,0.8);
}

.killer-btn-img:not(.elim-killer-btn):hover .killer-btn-footer {
    background: var(--orange-hover);
}


/* ==============================
   RESULTS - STANDING IMAGES
   ============================== */

.standing-img-wrap {
    flex-shrink: 0;
    width: 50px;
}

.standing-card-img {
    width: 50px;
    border-radius: 5px;
    border: 1px solid var(--border-2);
}

.standing-img-placeholder {
    width: 50px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-3);
    border-radius: 5px;
    font-size: 1.5em;
}

.standing-partner-imgs {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.standing-partner-imgs img {
    width: 50px;
    border-radius: 4px;
    border: 1px solid var(--border-2);
}

.standing-interactive {
    transition: transform 0.2s, border-left-color 0.2s, background 0.2s;
}

.standing-interactive:hover {
    border-left-color: var(--orange);
    background: rgba(249,115,22,0.04);
    transform: translateX(3px);
}

/* Long-press drag feedback: progress ring sweeps along border while user holds */
.standing-interactive.pressing {
    background:
        var(--bg-2) padding-box,
        conic-gradient(var(--orange) var(--prog, 0%), var(--border-1) var(--prog, 0%)) border-box;
    border: 2px solid transparent !important;
    filter: drop-shadow(0 0 5px rgba(249, 115, 22, 0.4));
}

.standing-click-hint {
    font-size: 0.75em;
    color: var(--text-2);
    font-style: italic;
    margin-top: 4px;
}

/* ==============================
   RESULTS - ART CROP PANELS
   ============================== */

.standing-art-panel {
    flex-shrink: 0;
    width: 88px;
    align-self: stretch;
    background: var(--bg-3) center 20% / cover no-repeat;
    overflow: hidden;
    position: relative;
    min-height: 82px;
}

.standing-art-panel-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6em;
    color: var(--text-2);
}

.standing-life-badge {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.7);
    color: white;
    font-size: 0.82em;
    font-weight: 700;
    text-align: center;
    padding: 3px 0;
    letter-spacing: 0.03em;
}

.standing-partner-art {
    display: flex;
    height: 100%;
}

.standing-partner-art > div {
    flex: 1;
    background: var(--bg-3) center top / cover no-repeat;
}

/* Draw results header */
.results-header-draw {
    background: linear-gradient(135deg, #2d2d3a, #1a1a26);
    border-top: 2px solid var(--border-2);
    box-shadow: none;
}

/* Mulligan counter on turn order cards */
.mulligan-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-1);
}

.mulligan-label {
    font-size: 0.72em;
    color: var(--text-2);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mulligan-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mulligan-controls button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--orange-border);
    background: var(--bg-4);
    color: var(--orange);
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

.mulligan-controls button:hover {
    background: var(--orange);
    color: white;
    border-color: var(--orange);
}

.mulligan-controls span {
    font-size: 1.1em;
    font-weight: bold;
    min-width: 22px;
    text-align: center;
    color: var(--text-0);
}

/* Standings mulligan display */
.standing-mulligan {
    font-size: 0.82em;
    color: var(--red);
    margin-top: 2px;
}

/* Standings kill summary */
.standing-kills {
    margin-top: 6px;
}

.standing-kills-label {
    font-size: 0.68em;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
    display: block;
}

.standing-kills-victim {
    display: block;
    font-size: 0.78em;
    color: var(--red);
    line-height: 1.5;
}

/* Inline time-adjust slider */
.inline-time-adjust {
    background: rgba(245,158,11,0.06);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 6px;
    padding: 7px 12px 9px;
    margin: -2px 0 3px 0;
}

.inline-adjust-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.inline-adjust-name {
    font-size: 0.78em;
    font-weight: 700;
    color: var(--gold);
    max-width: 38%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inline-adjust-hint {
    font-size: 0.72em;
    color: #d97706;
    text-align: center;
    flex: 1;
    padding: 0 4px;
}

.inline-adjust-slider {
    width: 100%;
    accent-color: var(--gold);
    cursor: pointer;
    margin: 2px 0;
}

.inline-adjust-times {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8em;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #d97706;
}

.inline-adjust-done-btn {
    font-size: 0.75em;
    padding: 2px 9px;
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.45);
    border-radius: 4px;
    color: #d97706;
    cursor: pointer;
    font-weight: 700;
    line-height: 1.6;
}
.inline-adjust-done-btn:hover {
    background: rgba(245,158,11,0.25);
}

/* ==============================
   HISTORY DETAIL MODAL
   ============================== */

.history-detail-modal {
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
}

.history-detail-content {
    max-width: 620px;
    width: 95%;
    max-height: 90vh;
    padding: 20px;
}

.history-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.history-detail-header h3 {
    margin: 0;
    color: var(--orange);
    font-size: 1.4em;
    text-align: left;
    font-weight: 700;
}

.history-detail-date {
    font-size: 0.85em;
    color: var(--text-2);
    margin-top: 3px;
}

.history-detail-close {
    background: var(--bg-4);
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-1);
    transition: background 0.15s;
}

.history-detail-close:hover {
    background: var(--border-2);
    color: var(--text-0);
}

/* Game Notes section inside history detail */
.history-game-notes-section {
    margin: 16px 0 4px;
    padding: 14px 16px;
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
}

.history-game-notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.history-game-notes-title {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--text-1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.history-game-notes-edit-btn {
    background: none;
    border: 1px solid var(--border-2);
    color: var(--text-1);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.82em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: inherit;
}

.history-game-notes-edit-btn:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

.history-final-notes {
    font-size: 0.92em;
    color: var(--text-0);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.history-detail-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-1);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.history-rematch-btn {
    background: none;
    border: 1px solid var(--green);
    color: var(--green);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}

.history-rematch-btn:hover {
    background: var(--green);
    color: #fff;
}

.history-delete-btn {
    background: none;
    border: 1px solid var(--red);
    color: var(--red);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}

.history-delete-btn:hover {
    background: var(--red);
    color: #fff;
}

.history-delete-confirm {
    flex-direction: column;
    gap: 12px;
}

.history-delete-confirm-text {
    margin: 0;
    font-size: 0.95em;
    color: var(--text-0);
    font-weight: 600;
}

.history-delete-confirm-actions {
    display: flex;
    gap: 10px;
}

.history-delete-confirm-yes {
    background: var(--red);
    border: none;
    color: #fff;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

.history-delete-confirm-yes:hover {
    background: var(--red-hover);
}

.history-delete-confirm-cancel {
    background: var(--bg-4);
    border: none;
    color: var(--text-1);
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

.history-delete-confirm-cancel:hover {
    background: var(--border-2);
    color: var(--text-0);
}

/* ==============================
   GAME HISTORY MODAL
   ============================== */

.game-history-modal {
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
}

.game-history-modal-content {
    max-width: 660px;
    width: 95%;
    max-height: 90vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.game-history-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
}

.game-history-modal-header h3 {
    margin: 0;
    font-size: 1.3em;
    font-weight: 700;
    color: var(--orange);
}

.game-history-modal-close {
    background: var(--bg-4);
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-1);
    transition: background 0.15s;
}

.game-history-modal-close:hover {
    background: var(--border-2);
    color: var(--text-0);
}

.game-history-modal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
    gap: 10px;
}

.game-history-modal-count {
    font-size: 0.9em;
    color: var(--text-2);
}

.game-history-modal-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}

.csv-import-section {
    border-top: 1px solid var(--border-1);
    padding: 16px 20px;
    flex-shrink: 0;
}

.csv-import-section h4 {
    margin: 0 0 6px 0;
    font-size: 0.95em;
    font-weight: 700;
    color: var(--text-0);
}

.csv-import-section p {
    margin: 0 0 12px 0;
    font-size: 0.82em;
    color: var(--text-2);
}

.csv-import-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.csv-file-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--border-2);
    color: var(--text-1);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    font-family: inherit;
}

.csv-file-label:hover {
    border-color: var(--orange);
    color: var(--orange);
}

.csv-file-label input[type="file"] {
    display: none;
}

.csv-import-status {
    font-size: 0.85em;
    padding: 4px 0;
    color: var(--text-2);
}

.csv-import-status.success { color: var(--green); }
.csv-import-status.error   { color: var(--red); }

/* ==============================
   SETTINGS MODAL
   ============================== */

.settings-modal {
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
}

.settings-modal-content {
    max-width: 480px;
    width: 95%;
    max-height: 90vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
}

.settings-modal-header h3 {
    margin: 0;
    font-size: 1.3em;
    font-weight: 700;
    color: var(--text-0);
}

.settings-modal-close {
    background: var(--bg-4);
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-1);
    transition: background 0.15s;
}

.settings-modal-close:hover {
    background: var(--border-2);
    color: var(--text-0);
}

.settings-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.settings-section {
    margin-bottom: 24px;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section-title {
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-2);
    margin: 0 0 12px 0;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-1);
    gap: 12px;
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-row-label {
    font-size: 0.92em;
    color: var(--text-0);
    font-weight: 500;
}

.settings-row-sub {
    font-size: 0.8em;
    color: var(--text-2);
    margin-top: 2px;
}

.settings-danger-btn {
    background: none;
    border: 1px solid var(--red);
    color: var(--red);
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
    flex-shrink: 0;
}

.settings-danger-btn:hover {
    background: var(--red);
    color: #fff;
}

.settings-endgame-section {
    padding-bottom: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-endgame-btn {
    width: 100%;
    padding: 12px;
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: var(--radius-sm);
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

#endGameBtn.holding {
    background:
        linear-gradient(var(--red), var(--red)) padding-box,
        conic-gradient(white var(--prog, 0%), rgba(255,255,255,0.3) var(--prog, 0%)) border-box;
    border: 5px solid transparent !important;
    outline: none;
    filter: drop-shadow(0 0 8px rgba(255, 100, 100, 0.55));
}

.settings-confirm-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.settings-theme-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.settings-theme-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-2);
    background: var(--bg-3);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
    text-align: left;
}

.settings-theme-btn:hover {
    border-color: var(--orange);
    background: var(--bg-4);
}

.settings-theme-btn.active {
    border-color: var(--orange);
    background: var(--orange-subtle);
}

.settings-theme-swatch {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.settings-theme-swatch span {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    display: block;
}

.settings-theme-label {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-0);
    line-height: 1.2;
}

.settings-theme-sublabel {
    font-size: 0.75em;
    color: var(--text-2);
    margin-top: 1px;
}

.settings-accordion {
    border: 1px solid var(--border-1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.settings-accordion:last-child {
    margin-bottom: 0;
}

.settings-accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--bg-3);
    border: none;
    cursor: pointer;
    font-size: 0.92em;
    font-weight: 600;
    color: var(--text-1);
    transition: background 0.15s;
    text-align: left;
}

.settings-accordion-header:hover {
    background: var(--bg-4);
    color: var(--text-0);
}

.settings-accordion-chevron {
    flex-shrink: 0;
    color: var(--text-2);
    transition: transform 0.2s ease;
}

.settings-accordion-header[aria-expanded="true"] .settings-accordion-chevron {
    transform: rotate(180deg);
}

.settings-accordion-body {
    padding: 16px;
    border-top: 1px solid var(--border-1);
    background: var(--bg-2);
}

.settings-accordion-body .settings-section:last-child {
    margin-bottom: 0;
}

/* ==============================
   STICKY NEXT TURN BAR (Step 3)
   ============================== */

#stickyNextTurnBar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    padding: 10px 15px 14px;
    background: rgba(9, 9, 13, 0.97);
    border-top: 1px solid var(--border-1);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sticky-turn-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--orange), var(--orange-hover));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: 15px 20px;
    font-size: 1.1em;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s;
    letter-spacing: 0.01em;
    user-select: none;
    -webkit-user-select: none;
    font-family: inherit;
    box-shadow: 0 4px 20px var(--orange-glow);
}

.sticky-turn-btn:active {
    transform: scale(0.97);
    box-shadow: 0 2px 12px var(--orange-glow);
}

.sticky-turn-hint {
    font-size: 0.72em;
    opacity: 0.6;
    font-weight: 400;
}

/* Bottom padding so content isn't hidden behind sticky button */
body.step3-active .container {
    padding-bottom: 90px;
}

/* Mobile step3 layout: keep everything compact so player profiles,
   lap tracker, and the sticky Next Turn button are all visible */
@media (max-width: 1024px) {
    body.step3-active .container {
        padding-bottom: 150px; /* room for sticky bar (button + turn damage overlay row + label) */
    }
    /* Sticky bar: flex column so the overlay row sits above the Next Turn button */
    #stickyNextTurnBar {
        gap: 6px;
        padding: 11px 15px 12px;
    }
}

/* ==============================
   TIME ADJUST HIGHLIGHT
   ============================== */

.tracking-item.adjust-pending {
    background: rgba(59,130,246,0.1);
    border-left-color: var(--blue);
    box-shadow: 0 0 0 1px rgba(59,130,246,0.2);
}
.tracking-item.adjust-pending .tracking-label { color: #93c5fd; }
.tracking-item.adjust-pending .tracking-time  { color: #93c5fd; }

.tracking-item.adjust-adjacent-item {
    background: rgba(245,158,11,0.08);
    border-left-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(245,158,11,0.25);
    animation: pulse-adjacent 1.4s ease-in-out infinite;
}
.tracking-item.adjust-adjacent-item .tracking-label { color: #fbbf24; }
.tracking-item.adjust-adjacent-item .tracking-time  { color: #d97706; }

@keyframes pulse-adjacent {
    0%, 100% { box-shadow: 0 0 0 1px rgba(245,158,11,0.25); }
    50%       { box-shadow: 0 0 0 3px rgba(245,158,11,0.45); }
}

.tracking-item.time-adjust-highlight {
    background: rgba(245,158,11,0.08);
    border-left-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(245,158,11,0.25);
    position: relative;
}

.tracking-item.time-adjust-highlight .tracking-time {
    color: #d97706;
}

/* Elim tracking item */
.tracking-elim {
    border-left: 3px solid #ef4444;
    background: rgba(239,68,68,0.07);
    cursor: default;
    gap: 8px;
}
.tracking-elim-clickable {
    cursor: pointer;
}
.tracking-elim-clickable:hover {
    background: rgba(239,68,68,0.14);
}
.tracking-elim-clickable:active {
    background: rgba(239,68,68,0.2);
}
.tracking-elim-label {
    color: #f87171;
}
.tracking-elim-killer {
    font-size: 0.78em;
    color: var(--text-2);
    font-style: italic;
}
.tracking-elim-time {
    color: #f87171;
    opacity: 0.8;
    flex-shrink: 0;
}

/* Turn item where the player died on their turn */
.tracking-turn-died {
    border-left-color: #ef4444;
    background: rgba(239,68,68,0.05);
}
.tracking-turn-died .tracking-label {
    color: #f87171;
}
.tracking-died-badge {
    font-size: 0.85em;
    margin-left: 4px;
}

/* Swipe affordance on all turn rows */
.tracking-turn {
    position: relative;
    overflow: hidden;
}

.tracking-swipe-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68em;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    letter-spacing: 0.03em;
    z-index: 10;
    transition: opacity 0.05s;
}

/* Inline action buttons when a turn item is tapped */
.tracking-action-btns {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.tracking-action-btn-row {
    display: flex;
    gap: 6px;
}

.tracking-action-btn-overlay {
    position: absolute;
    right: 52px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}
.tracking-action-btn {
    font-size: 0.78em;
    padding: 4px 9px;
    border-radius: 6px;
    border: 1.5px solid var(--border-2);
    background: var(--bg-4);
    color: var(--text-0);
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    font-weight: 600;
}
.tracking-action-btn:active {
    opacity: 0.75;
}
.tracking-action-adjust-btn {
    border-color: var(--blue);
    color: #93c5fd;
}

/* Last tracking item */
.tracking-item-last {
    overflow: hidden;
    animation: trackingLastFlash 0.7s ease-out;
}

@keyframes trackingLastFlash {
    0%   { background: rgba(249,115,22,0.3); border-left-color: var(--orange); }
    100% { background: var(--bg-3); }
}

.tracking-item-click-flash {
    animation: trackingClickFlash 0.5s ease-out;
}

@keyframes trackingClickFlash {
    0%   { background: rgba(99,179,237,0.3); }
    100% { background: var(--bg-3); }
}

.tracking-time-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.tracking-undo-hint {
    font-size: 0.6em;
    color: var(--text-1);
    opacity: 0.35;
    font-style: italic;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.tracking-adjust-hint {
    font-size: 0.72em;
    color: var(--gold);
    font-weight: 600;
    font-style: italic;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Tile glows during time-adjust interaction */
.cmd-player-tile.time-adjust-glow {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(245,158,11,0.4) !important;
    transition: box-shadow 0.2s, background 0.2s, border-color 0.2s;
}

.cmd-player-tile.time-adjust-adjacent {
    border-color: rgba(59,130,246,0.5) !important;
    box-shadow: 0 0 0 1px rgba(59,130,246,0.4), 0 0 10px rgba(59,130,246,0.2) !important;
    transition: box-shadow 0.2s, border-color 0.2s;
}

/* ==============================
   PLAYER PROFILES MODAL
   ============================== */

.btn-profiles-link {
    background: none;
    border: 1px solid var(--orange-border);
    color: var(--orange);
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    margin-top: 16px;
    width: 100%;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}

.btn-profiles-link:hover {
    background: var(--orange);
    color: white;
}

.btn-profiles-link-sm {
    width: auto;
    margin-top: 0;
    padding: 6px 14px;
    font-size: 0.85em;
}

/* Step 1 — float heading down near the carousel without pushing carousel down */
#step1 > h2 {
    position: relative;
    z-index: 2;
    transform: translateY(40px);
    margin-bottom: 0;
}

/* Step 1 — wrapper reserves space below carousel for the swipe hint */
.pcc-wrap {
    position: relative;
    margin-bottom: 28px;
}

.pcc-wrap > .pcc-carousel {
    margin-bottom: 0;
}

/* Swipe hint absolutely positioned at bottom of wrap — sits between carousel and action buttons */
.pcc-wrap .pcc-swipe-hint {
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    z-index: 2;
    margin: 0;
}

@media (max-width: 1024px) {
    #step1 > h2 {
        transform: translateY(28px);
    }
}

@media (hover: hover) and (min-width: 1025px) {
    #step1 > h2 {
        transform: translateY(10px);
    }
    .pcc-wrap {
        margin-bottom: 44px;
    }
    .pcc-wrap .pcc-swipe-hint {
        bottom: -22px;
    }
}

/* Step 1 action buttons row */
.step1-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.step1-action-btn {
    flex: 1;
    background: none;
    border: 1px solid var(--orange-border);
    color: var(--orange);
    padding: 10px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
    white-space: nowrap;
}

.step1-action-btn:hover {
    background: var(--orange);
    color: white;
}

.fan-content-notice {
    margin-top: 20px;
    font-size: 10px;
    color: var(--text-2, #5c5c72);
    text-align: center;
    line-height: 1.5;
    padding: 12px 8px 0;
    border-top: 1px solid var(--border-0, #1a1a24);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.profiles-modal {
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
}

.profiles-modal-content {
    max-width: 600px;
    width: 95%;
    max-height: 90vh;
    padding: 20px;
    position: relative;
    overflow: auto;
}

.profiles-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-1);
}

.profiles-modal-header h3 {
    margin: 0;
    color: var(--orange);
    font-size: 1.3em;
    font-weight: 700;
}

.profiles-section-header {
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
    padding: 14px 2px 6px;
    margin-top: 4px;
}
.profiles-section-header:first-child {
    margin-top: 0;
    padding-top: 4px;
}

.profile-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid var(--border-1);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    color: var(--text-0);
}

.profile-list-item:hover {
    border-color: var(--orange-border);
    background: var(--bg-3);
}

.profile-list-name {
    font-weight: 600;
    font-size: 1em;
    color: var(--text-0);
}

.profile-list-meta {
    font-size: 0.8em;
    color: var(--text-2);
    margin-top: 2px;
}

.profile-list-stats {
    color: var(--orange);
    font-weight: 600;
    font-size: 0.9em;
}

.profile-list-arrow {
    color: var(--text-2);
    font-size: 1.3em;
    line-height: 1;
}

.profile-list-delete-btn {
    background: none;
    border: none;
    color: var(--text-2);
    font-size: 1em;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}

.profile-list-delete-btn:hover {
    color: var(--red);
    background: var(--red-subtle);
}

.profile-detail-back {
    background: none;
    border: none;
    color: var(--orange);
    cursor: pointer;
    font-size: 0.9em;
    padding: 0 0 4px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
}

.profile-detail-back:hover { text-decoration: underline; }

.profile-detail-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.profile-detail-name {
    font-size: 1.4em;
    font-weight: 800;
    color: var(--text-0);
    letter-spacing: -0.02em;
}

.profile-name-edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9em;
    opacity: 0.45;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
    transition: opacity 0.15s;
}
.profile-name-edit-btn:hover { opacity: 1; }

.profile-rename-input {
    font-size: 1.3em;
    font-weight: 700;
    background: var(--bg-2, #1e1e2a);
    border: 1.5px solid var(--accent, #7c5cbf);
    border-radius: 6px;
    color: var(--text-0);
    padding: 4px 10px;
    width: 100%;
    max-width: 260px;
    outline: none;
}

.profile-rename-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.profile-main-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(246, 173, 85, 0.15);
    color: #f6ad55;
    border: 1px solid rgba(246, 173, 85, 0.35);
    border-radius: 6px;
    font-size: 0.72em;
    font-weight: 700;
    padding: 2px 8px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}


.profile-linked-row {
    margin: 6px 0 10px;
}

/* ── Profile Avatar ──────────────────────────────────────── */
.profile-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 4px 0 16px;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-4);
    border: 2px solid var(--border-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-initials {
    font-size: 2em;
    font-weight: 700;
    color: var(--text-1);
    text-transform: uppercase;
    user-select: none;
    line-height: 1;
}

.profile-avatar-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.profile-header-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 16px;
}

.profile-header-info {
    flex: 1;
    min-width: 0;
}

.profile-avatar-clickable {
    cursor: pointer;
    transition: border-color 0.15s;
}

.profile-avatar-clickable:hover {
    border-color: var(--orange-border);
}

.profile-avatar-camera-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.42);
    border-radius: 50%;
    font-size: 1.3em;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}

.profile-avatar-clickable:hover .profile-avatar-camera-overlay {
    opacity: 1;
}

.profile-avatar-upload-btn {
    font-size: 0.8em;
    padding: 5px 14px;
    border-radius: var(--radius-sm);
    background: var(--bg-4);
    color: var(--text-0);
    border: 1px solid var(--border-2);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.profile-avatar-upload-btn:hover {
    border-color: var(--orange-border);
    color: var(--orange);
}

.profile-avatar-remove-btn {
    font-size: 0.8em;
    padding: 5px 14px;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--red);
    border: 1px solid var(--red);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.profile-avatar-remove-btn:hover { opacity: 1; }

.profile-report-btn {
    font-size: 0.8em;
    padding: 5px 14px;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.profile-report-btn:hover { opacity: 1; }
.profile-report-btn:disabled { opacity: 0.35; cursor: default; }

/* ── Avatar Crop Modal ───────────────────────────────────── */
#avatarCropOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
}

.avatar-crop-modal {
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-lg);
    padding: 20px 20px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 320px;
    width: 100%;
}

.avatar-crop-title {
    font-weight: 700;
    font-size: 1em;
    color: var(--text-0);
    align-self: flex-start;
}

.avatar-crop-viewport {
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--orange);
    position: relative;
    cursor: grab;
    touch-action: none;
    flex-shrink: 0;
    background: var(--bg-4);
    user-select: none;
}

.avatar-crop-viewport:active { cursor: grabbing; }

.avatar-crop-hint {
    font-size: 0.75em;
    color: var(--text-2);
    text-align: center;
    line-height: 1.4;
}

.avatar-crop-zoom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.avatar-crop-zoom-icon {
    color: var(--text-2);
    font-size: 1.2em;
    line-height: 1;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.avatar-crop-zoom-row input[type="range"] {
    flex: 1;
    accent-color: var(--orange);
    cursor: pointer;
}

.avatar-crop-actions {
    display: flex;
    gap: 10px;
    width: 100%;
}

.avatar-crop-cancel-btn,
.avatar-crop-save-btn {
    flex: 1;
    padding: 9px 0;
    border-radius: var(--radius-sm);
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}

.avatar-crop-cancel-btn {
    background: transparent;
    color: var(--text-1);
    border: 1px solid var(--border-2);
}

.avatar-crop-cancel-btn:hover { border-color: var(--text-1); }

.avatar-crop-save-btn {
    background: var(--orange);
    color: #fff;
    border: 1px solid var(--orange);
}

.avatar-crop-save-btn:hover { opacity: 0.85; }

/* ── Profile list avatar thumbnail ──────────────────────── */
.profile-list-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-4);
    border: 1px solid var(--border-1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-list-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-list-avatar-initials {
    font-size: 0.95em;
    font-weight: 700;
    color: var(--text-1);
    text-transform: uppercase;
    user-select: none;
    line-height: 1;
}

.profile-link-account-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.78em;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.profile-link-account-btn:hover {
    border-color: var(--orange);
    color: var(--orange);
}

.profile-link-account-btn.btn-invite {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    font-weight: 600;
    padding: 7px 16px;
    font-size: 0.82em;
}

.profile-link-account-btn.btn-invite:hover {
    background: color-mix(in srgb, var(--orange) 85%, #fff);
    border-color: color-mix(in srgb, var(--orange) 85%, #fff);
    color: #fff;
}

.profile-linked-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78em;
    color: #22c55e;
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.3);
    border-radius: 6px;
    padding: 4px 10px;
}

.profile-linked-badge.profile-linked-other {
    color: var(--text-muted);
    background: none;
    border-color: var(--border);
}

.profile-list-friend-badge {
    font-size: 0.7em;
    padding: 2px 7px;
}

.profile-list-friend-icon {
    font-size: 0.85em;
    opacity: 0.75;
    margin-left: 4px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.profile-unlink-btn {
    background: none;
    border: none;
    color: #f87171;
    cursor: pointer;
    font-size: 0.9em;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
}

.profile-unlink-btn:hover {
    opacity: 1;
}

/* ── Invite code section ─────────────────────────────────────── */
.invite-code-section {
    background: var(--card-bg, #1a1a24);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.invite-code-section-title {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--text-secondary, #a0a0b8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.invite-code-section-sub {
    font-size: 0.78em;
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.4;
}

.invite-code-display {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.invite-code-value {
    font-family: 'Courier New', monospace;
    font-size: 1.6em;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--orange, #f97316);
    background: rgba(249,115,22,0.1);
    border: 1px dashed rgba(249,115,22,0.4);
    border-radius: 6px;
    padding: 6px 14px;
}

.invite-code-copy-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary, #a0a0b8);
    font-size: 0.8em;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.invite-code-copy-btn:hover {
    border-color: var(--orange);
    color: var(--orange);
}

.invite-code-hint {
    font-size: 0.75em;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 8px;
}

.invite-code-revoke-btn {
    background: none;
    border: none;
    color: #f87171;
    font-size: 0.75em;
    cursor: pointer;
    padding: 0;
    opacity: 0.7;
}

.invite-code-revoke-btn:hover { opacity: 1; }

.invite-code-error {
    font-size: 0.78em;
    color: #f87171;
    margin-top: 6px;
}

/* ── Add by Code modal ───────────────────────────────────────── */
.add-by-code-modal {
    max-width: 340px;
    width: 90vw;
}

.add-by-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.add-by-code-title {
    margin: 0;
    font-size: 1.05em;
}

/* Sheet player badges */
.sheet-player-star {
    color: var(--orange);
}

.sheet-player-badge {
    display: inline-block;
    font-size: 0.7em;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
    font-weight: 600;
}

.sheet-player-mine {
    background: rgba(249, 115, 22, 0.2);
    color: var(--orange);
}

.sheet-player-linked {
    background: rgba(100, 180, 255, 0.12);
    color: #7ec8e3;
    font-weight: 500;
}

.sheet-player-friend-icon {
    font-size: 0.85em;
    opacity: 0.75;
    margin-left: 4px;
    vertical-align: middle;
}

.sheet-player-item--mine {
    border-left: 2px solid var(--orange);
    padding-left: 10px;
}

.sheet-player-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-4);
    border: 1px solid var(--border-1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.sheet-player-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.sheet-player-avatar-initials {
    font-size: 0.88em;
    font-weight: 700;
    color: inherit;
    user-select: none;
    line-height: 1;
}

.sheet-player-item:hover .sheet-player-avatar,
.sheet-player-item.highlighted .sheet-player-avatar {
    border-color: rgba(255, 255, 255, 0.4);
}

.add-by-code-hint {
    font-size: 0.82em;
    color: var(--text-muted);
    margin: 0 0 14px;
    line-height: 1.4;
}

.add-by-code-input {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Courier New', monospace;
    font-size: 1.15em;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-align: center;
    text-transform: uppercase;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--input-bg, #1a1a24);
    color: var(--text-primary, #f0f0f6);
    outline: none;
}

.add-by-code-input:focus {
    border-color: var(--orange);
}

.add-by-code-error {
    min-height: 1.2em;
    font-size: 0.8em;
    color: #f87171;
    margin: 6px 0 0;
    text-align: center;
}

/* ── Profile list add-row ────────────────────────────────────── */
.profile-add-row {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.profile-add-by-code-btn {
    flex: 1;
    padding: 10px;
    background: none;
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.85em;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.profile-add-by-code-btn:hover {
    border-color: var(--orange);
    color: var(--orange);
}

.profile-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 8px 0;
}

.profile-stat-card {
    background: var(--bg-3);
    border: 1px solid var(--border-1);
    border-radius: 10px;
    padding: 8px 6px;
    text-align: center;
}

.profile-stat-value {
    font-size: 1.2em;
    font-weight: 800;
    color: var(--orange);
    line-height: 1;
}

.profile-stat-label {
    font-size: 0.65em;
    color: var(--text-2);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.profile-section-title {
    font-size: 0.8em;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 20px 0 8px;
}

/* ── Profile: Collapsible sections ─── */
.profile-section-collapsible {
    margin: 10px 0 0;
    border: none;
}

.profile-section-collapsible > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-1);
    user-select: none;
}

.profile-section-collapsible > summary::-webkit-details-marker { display: none; }
.profile-section-collapsible > summary::marker { display: none; }

.profile-section-summary-title {
    font-size: 0.8em;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex: 1;
}

.profile-section-chevron {
    font-size: 0.85em;
    color: var(--text-2);
    transition: transform 0.2s;
    display: inline-block;
    line-height: 1;
    flex-shrink: 0;
}

.profile-section-chevron::before { content: '›'; }

.profile-section-collapsible[open] > summary .profile-section-chevron {
    transform: rotate(90deg);
}

.profile-section-collapsible > summary .profile-add-commander-btn {
    margin-left: auto;
    flex-shrink: 0;
}

.profile-kills-row {
    display: flex;
    gap: 0;
    border: 1px solid var(--border-1);
    border-radius: 10px;
    overflow: hidden;
    margin: 4px 0;
    background: var(--bg-2);
}

.profile-kills-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border-right: 1px solid var(--border-1);
}

.profile-kills-item:last-child { border-right: none; }

.profile-kills-num {
    font-size: 1.1em;
    font-weight: 800;
    color: var(--green);
    line-height: 1;
}

.profile-kills-item.elim .profile-kills-num { color: var(--text-2); }

.profile-kills-label {
    font-size: 0.7em;
    color: var(--text-2);
    margin-top: 3px;
    text-align: center;
}

/* ── Clickable stat cards & kills items ─── */
.profile-stat-card-clickable {
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
}
.profile-stat-card-clickable:hover,
.profile-stat-card-clickable:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    border-color: var(--orange);
    outline: none;
}
.profile-stat-tap-hint {
    font-size: 0.6em;
    color: var(--text-2);
    margin-top: 4px;
    opacity: 0.7;
    letter-spacing: 0.02em;
}
.profile-kills-item-clickable {
    cursor: pointer;
    transition: background 0.12s;
}
.profile-kills-item-clickable:hover { background: var(--bg-3); }

/* ── Stat Detail Panel ─── */
.stat-detail-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 20;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.stat-detail-card {
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    animation: sdSlideIn 0.22s ease;
    box-shadow: var(--shadow-lg);
}

@keyframes sdSlideIn {
    from { transform: translateX(100%); opacity: 0.6; }
    to   { transform: translateX(0);    opacity: 1; }
}

.stat-detail-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
}

.stat-detail-back {
    background: none;
    border: none;
    color: var(--orange);
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    flex-shrink: 0;
}

.stat-detail-title {
    flex: 1;
    font-size: 1em;
    font-weight: 700;
    color: var(--text-1);
    text-align: center;
}

.stat-detail-share {
    background: var(--bg-3);
    border: 1px solid var(--border-1);
    color: var(--orange);
    font-size: 0.75em;
    font-weight: 600;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 20px;
    flex-shrink: 0;
    transition: background 0.12s;
}
.stat-detail-share:hover { background: var(--border-1); }

.stat-detail-body {
    overflow-y: auto;
    padding: 16px 20px 24px;
}

/* Date filter bar */
.sdd-filter-bar-wrap {
    flex-shrink: 0;
    padding: 8px 20px 0;
    border-bottom: 1px solid var(--border-1);
}
.sdd-filter-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 8px;
}
.sdd-chip {
    background: var(--bg-3);
    border: 1px solid var(--border-1);
    color: var(--text-2);
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: 600;
    padding: 4px 11px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
}
.sdd-chip:hover { background: var(--bg-2); color: var(--text-1); }
.sdd-chip.active {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}
.sdd-custom-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
}
.sdd-date-input {
    flex: 1;
    background: var(--bg-3);
    border: 1px solid var(--border-1);
    border-radius: 8px;
    color: var(--text-1);
    font-size: 0.8em;
    padding: 5px 8px;
    min-width: 0;
}
.sdd-date-input:focus { outline: none; border-color: var(--orange); }
.sdd-dash { color: var(--text-2); font-size: 0.9em; flex-shrink: 0; }

/* Commander portrait in Most Played bar */
.sdb-row-cmd { gap: 6px; }
.sdb-cmd-portrait {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    background-size: cover;
    background-position: center 15%;
    background-color: var(--bg-3);
    border: 1.5px solid var(--border-1);
}

/* Player avatar in Most Played Against bar */
.sdb-row-player { gap: 6px; }
.sdb-player-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--bg-3);
    border: 1.5px solid var(--border-1);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sdb-player-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sdb-player-avatar-initials {
    font-size: 0.75em;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1;
}

/* Hero number */
.sd-hero {
    text-align: center;
    margin: 0 0 14px;
}
.sd-hero-val {
    font-size: 2.8em;
    font-weight: 900;
    color: var(--orange);
    line-height: 1;
}
.sd-hero-lbl {
    font-size: 0.72em;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}

/* Fact grid */
.sd-facts {
    display: flex;
    gap: 8px;
    margin: 0 0 14px;
    flex-wrap: wrap;
}
.sd-fact {
    flex: 1;
    min-width: 70px;
    background: var(--bg-3);
    border: 1px solid var(--border-1);
    border-radius: 10px;
    padding: 8px 6px;
    text-align: center;
}
.sd-fact-val {
    font-size: 1.1em;
    font-weight: 800;
    color: var(--text-1);
    line-height: 1;
}
.sd-fact-lbl {
    font-size: 0.65em;
    color: var(--text-2);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sd-fact-clickable {
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.sd-fact-clickable:hover {
    background: var(--bg-2);
    border-color: var(--orange);
}
.sd-fact-clickable:hover .sd-fact-lbl { color: var(--orange); }

/* ── Time-by-date chart (horizontal segmented rows) ─── */
.sdtc-list {
    display: flex;
    flex-direction: column;
}
.sdtc-row {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    gap: 0 12px;
    align-items: center;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border-1);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.12s;
    margin: 0 -4px;
}
.sdtc-row:hover { background: var(--bg-3); }
.sdtc-row:last-child { border-bottom: none; }
.sdtc-date {
    font-size: 0.8em;
    font-weight: 700;
    color: var(--text-0);
    text-align: right;
    white-space: nowrap;
    line-height: 1.2;
}
.sdtc-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.sdtc-bar-track {
    height: 20px;
    background: var(--bg-3);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.sdtc-bar-fill {
    height: 100%;
    display: flex;
    flex-direction: row;
    min-width: 4px;
    border-radius: 4px;
    overflow: hidden;
}
.sdtc-seg {
    background: var(--orange);
    height: 100%;
    flex-shrink: 0;
}
.sdtc-seg-alt {
    background: var(--orange-light);
}
.sdtc-sep {
    width: 2px;
    background: var(--bg-1);
    flex-shrink: 0;
}
.sdtc-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sdtc-game-count {
    font-size: 0.67em;
    color: var(--text-2);
    white-space: nowrap;
}
.sdtc-chevron {
    font-size: 0.6em;
    color: var(--text-2);
    margin-left: auto;
}
.sdtc-time {
    font-size: 0.82em;
    font-weight: 700;
    color: var(--orange);
    text-align: left;
    white-space: nowrap;
}

/* Section */
.sd-section {
    margin: 14px 0 0;
}
.sd-section-title {
    font-size: 0.72em;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

/* Bar chart */
.sdb-group { display: flex; flex-direction: column; gap: 6px; }
.sdb-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82em;
}
.sdb-label {
    width: 90px;
    flex-shrink: 0;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sdb-track {
    flex: 1;
    height: 10px;
    background: var(--bg-3);
    border-radius: 5px;
    overflow: hidden;
}
.sdb-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.35s ease;
    background: var(--orange);
}
.sdb-val {
    width: 32px;
    text-align: right;
    color: var(--text-2);
    font-size: 0.9em;
    flex-shrink: 0;
}

/* W/D/L stacked bar */
.sd-wdl-bar {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    margin: 8px 0 4px;
    gap: 2px;
    background: var(--bg-3);
}
.sd-wdl-seg { min-width: 4px; transition: flex 0.3s; }
.sd-wdl-win  { background: var(--green); }
.sd-wdl-draw { background: #f6ad55; }
.sd-wdl-loss { background: var(--text-2); opacity: 0.5; }
.sd-wdl-legend {
    display: flex;
    gap: 12px;
    font-size: 0.72em;
    margin-bottom: 10px;
}
.sd-wdl-leg {
    font-weight: 600;
    white-space: nowrap;
}
.sd-wdl-leg.win  { color: var(--green); }
.sd-wdl-leg.draw { color: #f6ad55; }
.sd-wdl-leg.loss { color: var(--text-2); }

/* Recent form dots */
.sd-form-dots {
    display: grid;
    grid-template-columns: repeat(5, 40px);
    gap: 10px 8px;
}

/* Portrait circles for Last 10 Games */
.sd-form-game {
    position: relative;
    cursor: pointer;
}
.sd-form-game-portrait {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    background-position: center 15%;
    background-color: var(--bg-3);
    border: 2px solid var(--border-1);
    transition: border-color 0.15s, transform 0.12s;
}
.sd-form-game:hover .sd-form-game-portrait {
    border-color: var(--orange);
    transform: scale(1.08);
}
.sd-form-game-badge {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
    font-size: 0.62em;
    font-weight: 900;
    line-height: 0;
    color: #fff;
    z-index: 1;
    border: 1.5px solid var(--bg-1);
}
.sd-form-game-badge.win  { background: var(--green); }
.sd-form-game-badge.draw { background: #f6ad55; color: #3d2c00; }
.sd-form-game-badge.loss { background: #4a5568; color: #e2e8f0; border-color: var(--bg-1); }

/* Empty state */
.sd-empty {
    color: var(--text-2);
    font-size: 0.9em;
    text-align: center;
    padding: 24px 0;
}

.profile-cmd-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-1);
    gap: 8px;
    font-size: 0.9em;
}

.profile-cmd-row:last-child { border-bottom: none; }

.profile-cmd-row:hover { background: var(--bg-2); border-radius: 6px; }

.profile-cmd-row-filtered {
    background: rgba(102, 126, 234, 0.12);
    border-radius: 6px;
    outline: 1px solid rgba(102, 126, 234, 0.4);
}

/* Filter toggle button */
.profile-history-filter-btn {
    background: var(--bg-3);
    border: 1px solid var(--border-1);
    border-radius: 20px;
    color: var(--text-1);
    cursor: pointer;
    font-size: 0.78em;
    font-weight: 600;
    padding: 4px 12px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.profile-history-filter-btn:hover { background: var(--bg-2); }
.profile-history-filter-btn.has-filters {
    background: rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.5);
    color: #a5b4fc;
}

/* Filter panel */
.profile-history-filter-panel {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 6px 0 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-group-label {
    font-size: 0.7em;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-chip {
    background: var(--bg-3);
    border: 1px solid var(--border-1);
    border-radius: 20px;
    color: var(--text-1);
    cursor: pointer;
    font-size: 0.82em;
    padding: 4px 12px;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    position: relative;
}
.filter-chip:hover { background: var(--bg-1); }
.filter-chip.active {
    background: rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.6);
    color: #a5b4fc;
    font-weight: 600;
    overflow: visible;
}
.filter-chip-clear {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 0.9375rem;
    height: 0.9375rem;
    background: rgba(102, 126, 234, 0.85);
    border-radius: 50%;
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
    transition: background 0.1s, transform 0.1s;
    pointer-events: auto;
}
.filter-chip-clear:hover {
    background: rgba(102, 126, 234, 1);
    transform: scale(1.15);
}

@media (max-width: 380px) {
    .filter-chip {
        padding: 3px 8px;
        font-size: 0.76em;
    }
    .filter-chips {
        gap: 4px;
    }
}

.filter-clear-all {
    align-self: flex-start;
    background: none;
    border: 1px solid var(--border-1);
    border-radius: 6px;
    color: var(--text-2);
    cursor: pointer;
    font-size: 0.8em;
    padding: 4px 10px;
    margin-top: 2px;
    transition: color 0.15s, border-color 0.15s;
}
.filter-clear-all:hover { color: var(--text-0); border-color: var(--text-2); }

.filter-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--bg-3);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    border: 1px solid var(--border-1);
    border-radius: 8px;
    color: var(--text-1);
    cursor: pointer;
    font-size: 0.82em;
    padding: 5px 30px 5px 10px;
    width: 100%;
    max-width: 260px;
    transition: border-color 0.12s;
}
.filter-select:focus { outline: none; border-color: rgba(102, 126, 234, 0.6); }
.filter-select:hover { border-color: var(--border-2, var(--border-1)); }
.filter-select.active {
    border-color: rgba(102, 126, 234, 0.6);
    background-color: rgba(102, 126, 234, 0.1);
    color: #a5b4fc;
}
.filter-select option { background: var(--bg-2); color: var(--text-0); }

/* Active filter chips bar (panel closed, filters active) */
.profile-active-filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 8px;
}

.profile-active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(102, 126, 234, 0.15);
    border: 1px solid rgba(102, 126, 234, 0.4);
    border-radius: 20px;
    padding: 3px 6px 3px 10px;
    font-size: 0.78em;
    color: #a5b4fc;
    font-weight: 600;
    max-width: 200px;
    min-width: 0;
}

.profile-active-filter-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.profile-active-filter-chip-clear {
    background: none;
    border: none;
    color: #a5b4fc;
    cursor: pointer;
    font-size: 0.9em;
    padding: 0 2px;
    flex-shrink: 0;
    opacity: 0.7;
    line-height: 1;
}
.profile-active-filter-chip-clear:hover { opacity: 1; }

.profile-cmd-name {
    font-weight: 600;
    color: var(--text-0);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-cmd-meta {
    color: var(--text-2);
    font-size: 0.85em;
    white-space: nowrap;
    flex-shrink: 0;
}

.profile-cmd-winrate {
    font-weight: 700;
    color: var(--green);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 36px;
    text-align: right;
}

.profile-history-row {
    display: grid;
    grid-template-columns: 38px 44px minmax(0, 1fr) auto;
    gap: 6px 4px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-1);
    align-items: start;
    font-size: 0.85em;
}

.profile-history-row:last-child { border-bottom: none; }

.profile-history-winner-art {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    background-position: center 15%;
    background-color: var(--bg-3);
    align-self: center;
}

.profile-history-placement {
    font-weight: 700;
    font-size: 1em;
    align-self: center;
    white-space: normal;
    text-align: center;
    width: 38px;
}

.profile-history-placement.win  { color: var(--green); }
.profile-history-placement.draw { color: var(--gold); }
.profile-history-placement.loss { color: var(--text-0); }

.profile-history-opponent-winner { color: var(--green); }

.profile-history-commander {
    color: var(--text-0);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-history-opponents {
    color: var(--text-2);
    font-size: 0.85em;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-history-meta {
    color: var(--text-1);
    font-size: 0.8em;
    margin-top: 2px;
}

.profile-history-date {
    color: var(--text-2);
    font-size: 0.8em;
    text-align: right;
    white-space: nowrap;
}

.profiles-empty {
    text-align: center;
    color: var(--text-2);
    padding: 28px 0;
    font-size: 0.95em;
    line-height: 1.6;
}

.profile-history-row-clickable {
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 4px;
}

.profile-history-row-clickable:hover {
    background: var(--bg-3);
}

/* Game history sessions */
.history-session {
    border: 1px solid var(--border-1);
    border-radius: 6px;
    margin-bottom: 6px;
    overflow: hidden;
}

.history-session > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    background: var(--bg-3);
    user-select: none;
}

.history-session > summary::-webkit-details-marker { display: none; }

.history-session > summary:hover {
    background: var(--bg-2);
}

.history-session-chevron {
    color: var(--text-2);
    font-size: 0.65em;
    transition: transform 0.2s;
    display: inline-block;
    flex-shrink: 0;
}

.history-session[open] .history-session-chevron {
    transform: rotate(90deg);
}

.history-session-date {
    font-weight: 600;
    font-size: 0.88em;
    color: var(--text-0);
    flex: 1;
}

.history-session-meta {
    font-size: 0.8em;
    color: var(--text-2);
    white-space: nowrap;
}

.session-record-w { color: var(--green); }
.session-record-d { color: var(--gold); }
.session-record-l { color: var(--text-2); }

.history-session-games {
    padding: 0 8px;
}

.history-session-games .profile-history-row:last-child {
    border-bottom: none;
}

.profile-rivalry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 8px 0 4px;
}

.profile-rivalry-card {
    background: var(--bg-3);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    text-align: center;
}

.profile-rivalry-label {
    font-size: 0.65em;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}

.profile-rivalry-name {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--text-0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-rivalry-none {
    color: var(--text-2);
    font-weight: 400;
}

.profile-rivalry-count {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--red);
    margin-top: 2px;
}

.profile-rivalry-count-death {
    color: var(--text-2);
}

/* ── Profile: Add Profile button ─── */
.profile-add-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 11px;
    background: none;
    border: 1px dashed var(--orange-border);
    border-radius: 10px;
    color: var(--orange);
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
}

.profile-add-btn:hover {
    background: var(--orange-subtle);
    border-color: var(--orange);
}

/* ── Profile: Create Profile form ─── */
.profile-create-form {
    padding: 8px 0 4px;
}

.profile-create-title {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--text-0);
    margin-bottom: 14px;
}

.profile-create-error {
    color: var(--red);
    font-size: 0.85em;
    margin-top: 6px;
}

.profile-create-submit {
    width: 100%;
    margin-top: 14px;
}

/* ── Profile: section header with inline button ─── */
.profile-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 6px;
}

/* ── Profile: Add Commander button (in detail) ─── */
.profile-add-commander-btn {
    background: none;
    border: 1px solid var(--orange-border);
    color: var(--orange);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    font-family: inherit;
}

.profile-add-commander-btn:hover {
    background: var(--orange);
    color: white;
}

/* Expandable bar group */
.sdb-overflow { display: flex; flex-direction: column; gap: 6px; }
.sd-expand-btn {
    margin-top: 4px;
    background: none;
    border: none;
    color: var(--orange);
    font-size: 0.78em;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    text-align: left;
    letter-spacing: 0.02em;
    opacity: 0.85;
    transition: opacity 0.15s;
}
.sd-expand-btn:hover { opacity: 1; }

/* ── Clickable stat bar rows ─── */
.sdb-row-clickable {
    cursor: pointer;
    border-radius: 6px;
    margin: 0 -4px;
    padding: 2px 4px;
    transition: background 0.12s;
}
.sdb-row-clickable:hover { background: var(--bg-4); }
.sdb-row-clickable:active { background: var(--border-1); }

/* ── Stat Drilldown Panel ─── */
.stat-drilldown-panel {
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: sdSlideIn 0.22s ease;
    box-shadow: var(--shadow-lg);
}

/* Hide the original stat card while a drilldown is open */
#statDetailPanel:has(> .stat-drilldown-panel) > .stat-detail-card { display: none; }
/* Hide level-1 drilldown while level-2 drilldown is open */
#statDetailPanel:has(> #statDrilldownPanel2) > #statDrilldownPanel { display: none; }

.sdd-game-count {
    font-size: 0.75em;
    color: var(--text-2);
    flex-shrink: 0;
}

.sdd-game-list {
    display: flex;
    flex-direction: column;
}

.sdd-game-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 6px 8px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border-1);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.12s;
    align-items: center;
}
.sdd-game-row:hover { background: var(--bg-3); }
.sdd-game-row:last-child { border-bottom: none; }

.sdd-game-portrait {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    background-position: center 20%;
    background-color: var(--bg-3);
    flex-shrink: 0;
    align-self: center;
}

.sdd-game-info { min-width: 0; }
.sdd-game-meta {
    font-size: 0.73em;
    color: var(--text-2);
    margin-bottom: 2px;
}
.sdd-game-cmd {
    font-size: 0.84em;
    font-weight: 600;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sdd-game-opponents {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 8px;
    margin-top: 3px;
}
.sdd-opponent-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72em;
    color: var(--text-2);
}
.sdd-opponent-portrait {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-size: cover;
    background-position: center 20%;
    background-color: var(--bg-3);
    flex-shrink: 0;
    display: inline-block;
}

.sdd-game-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 36px;
    flex-shrink: 0;
}
.sdd-game-placement {
    font-size: 0.9em;
    font-weight: 700;
}
.sdd-game-result-label {
    font-size: 0.65em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sdd-game-right.win  .sdd-game-placement,
.sdd-game-right.win  .sdd-game-result-label { color: var(--green); }
.sdd-game-right.draw .sdd-game-placement,
.sdd-game-right.draw .sdd-game-result-label { color: var(--orange); }
.sdd-game-right.loss .sdd-game-placement,
.sdd-game-right.loss .sdd-game-result-label { color: var(--text-2); }

/* ── Commander time distribution overlay ─── */
.cmd-td-top {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
}
.cmd-td-portrait {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: var(--bg-3) center 20% / cover no-repeat;
    flex-shrink: 0;
}
.cmd-td-meta { flex: 1; min-width: 0; }
.cmd-td-avg {
    font-size: 2em;
    font-weight: 900;
    color: var(--orange);
    line-height: 1;
}
.cmd-td-avg-lbl {
    font-size: 0.65em;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 3px;
}
.cmd-td-games {
    font-size: 0.8em;
    color: var(--text-1);
    margin-top: 6px;
}
.cmd-td-chart-wrap {
    background: var(--bg-3);
    border: 1px solid var(--border-1);
    border-radius: 10px;
    padding: 4px 6px;
    margin-bottom: 10px;
}
.cmd-td-svg { width: 100%; height: auto; display: block; }
.cmd-td-legend {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 0.72em;
    color: var(--text-2);
    margin-bottom: 14px;
}
.cmd-td-leg {
    display: flex;
    align-items: center;
    gap: 4px;
}
.cmd-dot-info {
    min-height: 32px;
    padding: 7px 12px;
    background: var(--bg-3);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.85em;
}
.cmd-dot-info-hint {
    color: var(--text-2);
    font-style: italic;
}
.cmd-dot-info-time {
    font-weight: 700;
    color: var(--text-1);
}
.cmd-dot-info-sep { color: var(--text-2); }
.cmd-dot-info-date { color: var(--text-2); }
.cmd-dot-info-result { margin-left: auto; font-weight: 600; }
.cmd-dot-info-win { color: var(--green); }
.cmd-dot-info-other { color: var(--text-2); }

/* ── Profile: Commander art cards ─── */
.profile-cmd-cards-container {
    min-height: 20px;
    margin: 4px 0 0;
}

.profile-cmd-cards-container .commander-cards-scroll {
    padding-bottom: 10px;
}

/* Always show remove button on profile commander cards */
.profile-cmd-cards-container .commander-remove-btn {
    opacity: 1;
}

/* Uniform card height: name area locked to two lines so bracket/decklist buttons align */
.profile-cmd-cards-container .commander-card-name {
    min-height: 2.4em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

/* Stats line under commander name on profile cards */
.profile-cmd-card-stats {
    font-size: 0.72em;
    color: var(--text-2);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Decklist button at bottom of profile commander card */
.profile-cmd-card-decklist-btn {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 3px 6px;
    background: var(--bg-4);
    border: 1px solid var(--border-1);
    border-radius: 4px;
    color: var(--text-1);
    font-size: 0.72em;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
    box-sizing: border-box;
}

.profile-cmd-card-decklist-btn:hover {
    background: var(--bg-2);
    border-color: var(--orange-border);
    color: var(--text-0);
}

/* Filtered/highlighted card state */
.commander-card-option.profile-cmd-card-filtered {
    border-color: rgba(102, 126, 234, 0.6);
    background: rgba(102, 126, 234, 0.10);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* "From game history" section label */
.profile-cmd-history-only-label {
    font-size: 0.72em;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 14px 0 4px;
}

/* ── Modals (elimination, history detail, profiles) share these styles ─── */
.elimination-modal-content,
.history-detail-content,
.profiles-modal-content {
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
}

/* ==============================================
   COMMANDER DAMAGE DRAG
   ============================================== */

/* Floating ghost that follows the finger/cursor */
.cmd-damage-ghost {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.7));
    animation: cmdGhostIn 0.12s ease-out;
}
@keyframes cmdGhostIn {
    from { transform: translate(-50%,-60%) scale(0.6); opacity: 0; }
    to   { transform: translate(-50%,-60%) scale(0.85); opacity: 1; }
}
.cmd-damage-ghost-portrait {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--orange);
    background: var(--bg-3);
}
.cmd-damage-ghost-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 20%;
}
.cmd-damage-ghost-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8em;
}
.cmd-damage-ghost-split {
    width: 100%;
    height: 100%;
    display: flex;
}
.cmd-damage-ghost-split > div {
    flex: 1;
    background-size: cover;
    background-position: center 20%;
}
.cmd-damage-ghost-name {
    font-size: 0.65em;
    font-weight: 600;
    color: var(--text-0);
    background: rgba(0,0,0,0.75);
    padding: 1px 6px;
    border-radius: 4px;
    max-width: 72px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cmd-damage-ghost-label {
    font-size: 0.6em;
    font-weight: 700;
    color: var(--orange);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: rgba(0,0,0,0.8);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Top banner shown while dragging */
.cmd-damage-banner {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0; right: 0;
    z-index: 9998;
    padding: 10px 16px;
    background: rgba(249, 115, 22, 0.92);
    color: #fff;
    font-size: 0.82em;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.01em;
    pointer-events: none;
    animation: slideBannerIn 0.15s ease-out;
}
@keyframes slideBannerIn {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* Card being dragged — slight fade */
.cmd-player-tile.cmd-damage-dragging {
    opacity: 0.5;
    transition: opacity 0.1s;
}

/* Valid drop targets — subtle orange ring */
.cmd-player-tile.cmd-damage-drop-target {
    box-shadow: inset 0 0 0 2px rgba(249, 115, 22, 0.45);
    transition: box-shadow 0.1s;
}

/* Hovered drop target — strong highlight */
.cmd-player-tile.cmd-damage-drop-hover {
    box-shadow: inset 0 0 0 3px var(--orange), 0 0 18px var(--orange-glow);
    transition: box-shadow 0.1s;
}
.cmd-player-tile.cmd-damage-drop-hover .cmd-tile-image-wrap::after {
    content: '⚔️';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2em;
    background: rgba(249,115,22,0.18);
    pointer-events: none;
    z-index: 5;
}

/* ==============================================
   COMMANDER DAMAGE DIALOG
   ============================================== */

.cmd-dmg-content {
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cmd-dmg-header {
    text-align: center;
}
.cmd-dmg-title {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--text-0);
    margin-bottom: 6px;
}
.cmd-dmg-players {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.9em;
}
.cmd-dmg-player-name {
    font-weight: 600;
    color: var(--orange);
}
.cmd-dmg-arrow {
    color: var(--text-2);
    font-size: 1.2em;
}

.cmd-dmg-wheel-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.cmd-dmg-wheel-label {
    font-size: 0.78em;
    color: var(--text-1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cmd-dmg-wheel {
    display: flex;
    align-items: center;
    gap: 16px;
    touch-action: none;
}
.cmd-dmg-adj {
    font-size: 1.6em !important;
    width: 40px;
    height: 40px;
}
.cmd-dmg-viewport {
    min-width: 80px;
    padding: 8px 4px;
    cursor: ns-resize;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 8px;
    background: var(--bg-3);
    border: 1px solid var(--border-1);
    transition: border-color 0.2s;
}
.cmd-dmg-viewport:hover {
    border-color: var(--orange);
}
.cmd-dmg-hint {
    font-size: 0.82em;
    min-height: 1.4em;
    text-align: center;
}
.cmd-dmg-lethal  { color: var(--red); font-weight: 700; }
.cmd-dmg-warning { color: var(--gold); }
.cmd-dmg-info    { color: var(--text-2); }

.cmd-dmg-tap-hint {
    font-size: 0.72em;
    color: var(--text-2);
}

.cmd-dmg-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 1.5em;
    font-weight: 700;
    background: var(--bg-3);
    border: 2px solid var(--orange);
    border-radius: 8px;
    color: var(--text-0);
    font-family: inherit;
    z-index: 10;
}
.cmd-dmg-input:focus { outline: none; }

.cmd-dmg-footer {
    display: flex;
    gap: 10px;
}
.cmd-dmg-footer button {
    flex: 1;
}

/* ==============================================
   COMMANDER DAMAGE DIALOG — PORTRAIT & CUMULATIVE
   ============================================== */

.cmd-dmg-portraits-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}

.cmd-dmg-portrait-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.cmd-dmg-dialog-portrait {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--orange-border);
    background: var(--bg-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6em;
    background-size: cover;
    background-position: center 20%;
    flex-shrink: 0;
}

.cmd-dmg-dialog-portrait-split {
    width: 100%;
    height: 100%;
    display: flex;
}
.cmd-dmg-dialog-portrait-split > div {
    flex: 1;
    background-size: cover;
    background-position: center 20%;
}

.cmd-dmg-portrait-label {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--orange);
    text-align: center;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmd-dmg-victim-label {
    color: var(--text-1);
}

.cmd-dmg-arrow-icon {
    font-size: 1.4em;
    color: var(--text-2);
    flex-shrink: 0;
}

.cmd-dmg-cumulative {
    margin-top: 10px;
    font-size: 0.82em;
    color: var(--gold);
    text-align: center;
    padding: 6px 10px;
    background: rgba(245, 158, 11, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* ==============================================
   COMMANDER DAMAGE MODAL — REDESIGN
   ============================================== */

.elimination-modal-content.cmd-dmg-redesign {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    overscroll-behavior: contain;
}

/* ── Victim zone (top) ── */
.cmd-dmg-rz-victim-zone {
    background: linear-gradient(160deg, #080f1a 0%, #0d1e30 100%);
    padding: 14px 14px 12px;
    flex-shrink: 0;
    transition: background 0.2s, box-shadow 0.2s;
}

.cmd-dmg-rz-victim-zone.cmd-dmg-vz-active {
    background: linear-gradient(160deg, #0a1628 0%, #122640 100%);
}

.cmd-dmg-rz-victim-zone.cmd-dmg-vz-hover {
    background: linear-gradient(160deg, #0d1f38 0%, #1a3a5c 100%);
    box-shadow: inset 0 0 0 2px rgba(80, 160, 255, 0.55);
}

.cmd-dmg-rz-zone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 4px;
}

.cmd-dmg-rz-zone-title {
    font-size: 1em;
    font-weight: 700;
    color: #6baaff;
    letter-spacing: 0.03em;
}

.cmd-dmg-rz-drag-hint {
    font-size: 0.71em;
    color: rgba(255, 255, 255, 0.32);
    font-style: italic;
}

.cmd-dmg-victim-slot {
    display: flex;
    justify-content: center;
    min-height: 100px;
    align-items: center;
}

.cmd-dmg-victim-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    animation: elimDeadCardIn 0.22s ease forwards;
}

.cmd-dmg-victim-art {
    width: 72px;
    height: 82px;
    border-radius: 8px;
    background: #1a2434;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(80, 160, 255, 0.45);
    flex-shrink: 0;
}

.cmd-dmg-victim-art-inner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 20%;
}

.cmd-dmg-victim-shield {
    position: absolute;
    bottom: 3px;
    right: 3px;
    font-size: 1em;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.9));
    line-height: 1;
}

.cmd-dmg-victim-name {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--text-0);
    text-align: center;
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Victim stat panels ── */
.cmd-dmg-victim-with-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.cmd-dmg-stat-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 54px;
    max-width: 66px;
}

.cmd-dmg-stat-label {
    font-size: 0.6em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.38);
}

.cmd-dmg-stat-life .cmd-dmg-stat-label {
    color: rgba(74, 222, 128, 0.75);
}

.cmd-dmg-stat-cmddmg .cmd-dmg-stat-label {
    color: rgba(251, 146, 60, 0.75);
}

.cmd-dmg-stat-values {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1.1;
}

.cmd-dmg-stat-current {
    font-size: 1.05em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
}

.cmd-dmg-stat-arrow {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1;
}

.cmd-dmg-stat-new {
    font-size: 1.35em;
    font-weight: 800;
    line-height: 1;
    transition: color 0.12s;
}

.cmd-dmg-stat-new-bad {
    color: #f87171;
}

.cmd-dmg-stat-new-good {
    color: #4ade80;
}

.cmd-dmg-stat-new-lethal {
    color: #ef4444;
    animation: cmdDmgLethalPulse 0.7s ease-in-out infinite;
}

@keyframes cmdDmgLethalPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* ── Divider ── */
.cmd-dmg-rz-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    flex-shrink: 0;
}

.cmd-dmg-rz-divider-line {
    flex: 1;
    height: 1px;
    background: var(--border-1);
}

.cmd-dmg-rz-divider-label {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-2);
    white-space: nowrap;
}

/* ── Attacker zone ── */
.cmd-dmg-attacker-zone {
    display: grid;
    gap: 6px;
    padding: 4px 10px 8px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.cmd-dmg-attacker-zone .elim-no-killers {
    padding: 12px 0;
    text-align: center;
}

/* Attacker buttons reuse .killer-btn .killer-btn-img .elim-killer-btn styles */
.cmd-dmg-attacker-btn {
    position: relative;
}

/* Scale non-selected attackers when one is selected */
.cmd-dmg-attacker-zone.has-selection .elim-killer-btn:not(.killer-btn-selected) {
    transform: scale(0.88);
}

/* ── Wheel & footer in redesign ── */
.cmd-dmg-rz-wheel {
    padding: 6px 16px 4px;
    flex-shrink: 0;
}

.cmd-dmg-rz-footer {
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 8px 12px 16px;
    flex-shrink: 0;
}

.cmd-dmg-rz-footer .btn-secondary,
.cmd-dmg-rz-footer .btn-primary {
    flex-shrink: 0;
}

.btn-each-dmg,
.btn-each-heal {
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.78em;
    font-weight: 700;
    cursor: pointer;
    padding: 5px 4px;
    line-height: 1.1;
    transition: background 0.15s ease;
}

.btn-each-dmg {
    background: #dc2626;
    color: #fff;
}

.btn-each-dmg:active {
    background: #b91c1c;
}

.btn-each-heal {
    background: #16a34a;
    color: #fff;
}

.btn-each-heal:active {
    background: #15803d;
}

.cmd-dmg-rz-loading {
    color: var(--text-2);
    font-size: 0.85em;
    padding: 12px 0;
    text-align: center;
}

/* ==============================================
   UNIFIED DAMAGE MODAL
   ============================================== */

/* ── Header bar ── */
.unified-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 8px;
    background: #0c0c16;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
    gap: 10px;
    min-height: 50px;
}

.unified-header-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

/* Attacker pill (right of header) */
.unified-attacker-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.25);
    border-radius: 10px;
    padding: 5px 10px 5px 5px;
    min-width: 0;
    max-width: 240px;
}

.unified-attacker-art-thumb {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    background: #1a2434;
}

.unified-attacker-art-thumb .utile-art-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 20%;
}

.unified-attacker-art-thumb .utile-art-partner {
    position: absolute;
    inset: 0;
    display: flex;
}

.unified-attacker-art-thumb .utile-art-partner > div {
    flex: 1;
    background-size: cover;
    background-position: center 20%;
}

.unified-attacker-details {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.unified-attacker-label {
    font-size: 0.58rem;
    color: var(--orange);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 2px;
}

.unified-attacker-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unified-attacker-life {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 0.72rem;
    margin-top: 3px;
    line-height: 1;
    padding-left: 12px;
}

.unified-attacker-life .utile-heart {
    position: absolute;
    left: 0;
}

.unified-attacker-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.unified-attacker-controls .unified-counter-btn {
    width: 20px;
    height: 20px;
    font-size: 0.85rem;
    padding: 0;
    line-height: 1;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unified-attacker-controls .unified-counter-btn:active {
    background: rgba(255,255,255,0.2);
}

.unified-attacker-controls .unified-counter-val {
    font-size: 0.8rem;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
    cursor: ns-resize;
    user-select: none;
}

/* ── Victims section (fills remaining space) ── */
.unified-victims-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 6px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.unified-victims-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    flex: 1;
    min-height: 0;
}

/* ── Victim tile — horizontal row layout ── */
.utile {
    display: flex;
    flex-direction: row;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.09);
    transition: border-color 0.18s, background 0.18s;
    min-height: 72px;
    flex: 1;
}

.utile-cmd-active {
    border-color: rgba(249, 115, 22, 0.7);
    background: rgba(249, 115, 22, 0.08);
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.18);
}

/* ── Commander counter (orange) ── */
.utile-controls-cmd .unified-counter-btn {
    background: rgba(249, 115, 22, 0.12);
    color: var(--orange-light);
}

.utile-controls-cmd .unified-counter-btn:active {
    background: rgba(249, 115, 22, 0.3);
}

.utile-controls-cmd .unified-counter-val {
    color: var(--orange);
}

/* ── Badge stack (top-left of portrait, all badges stacked vertically) ── */
.utile-badge-stack {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    pointer-events: none;
}

.utile-life-badge,
.utile-cmd-badge,
.utile-infect-badge {
    position: static;
    display: block;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 5px;
    white-space: nowrap;
    backdrop-filter: blur(3px);
}

.utile-life-badge {
    background: rgba(180, 30, 30, 0.88);
}

/* Heal badge — green instead of red */
.utile-heal-badge {
    background: rgba(34, 197, 94, 0.88) !important;
}

/* ── Row label color modifiers ── */
.utile-dmg-label-cmd {
    color: var(--orange-light);
}

.utile-dmg-label-infect {
    color: #4ade80;
}

/* ── Infect counter row (green) ── */
.utile-controls-infect .unified-counter-btn {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.utile-controls-infect .unified-counter-btn:active {
    background: rgba(34, 197, 94, 0.3);
}

.utile-controls-infect .unified-counter-val {
    color: #4ade80;
}

/* ── Existing cmd damage hint ── */
.utile-existing-cmd {
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(249, 115, 22, 0.95);
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.35);
    border-radius: 5px;
    padding: 1px 6px;
    text-align: left;
    letter-spacing: 0.02em;
    line-height: 1.4;
    align-self: flex-start;
}

/* ── Commander / infect running total (end of control row) ── */
.utile-cmd-total {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(249, 115, 22, 0.7);
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

.utile-cmd-total-infect {
    color: rgba(74, 222, 128, 0.7);
}

.utile-cmd-total-lethal {
    color: #f87171 !important;
}

/* ── Total damage badge (larger, top of badge stack) ── */
.utile-total-badge {
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
    backdrop-filter: blur(3px);
    letter-spacing: 0.02em;
}

/* Art area — fixed-width left portrait column */
.utile-art-wrap {
    position: relative;
    width: clamp(88px, 26vw, 120px);
    flex-shrink: 0;
    align-self: stretch;
    overflow: hidden;
    background: #15151f;
}

.utile-art-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 20%;
}

.utile-art-partner {
    position: absolute;
    inset: 0;
    display: flex;
}

.utile-art-partner > div {
    flex: 1;
    background-size: cover;
    background-position: center 20%;
}

/* Life total overlay (bottom of art) */
.utile-life-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.88) 55%);
    padding: 16px 3px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Static life display inside overlay */
.utile-life-static {
    display: flex;
    align-items: center;
    gap: 3px;
    transition: opacity 0.1s ease;
}

.utile-life-static.is-dragging {
    opacity: 0;
    pointer-events: none;
}

/* Drum wheel — hidden by default, fades in during drag */
.utile-life-drum-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.1s ease;
    pointer-events: none;
    padding-bottom: 6px;
}

.utile-life-drum-wrap.is-dragging {
    opacity: 1;
}

.utile-life-drum-viewport {
    overflow: hidden;
    font-size: 1.15rem;
    height: 1.9em;
    position: relative;
}

.utile-life-drum-viewport.is-dragging {
    overflow: visible;
}

.utile-life-drum {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(-1.9em);
    will-change: transform;
}

.utile-drum-num {
    height: 1.9em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

.utile-drum-above,
.utile-drum-below {
    opacity: 0.38;
    color: #ccc;
    transform: scale(0.84);
}

.utile-heart {
    font-size: 0.6rem;
    color: #fc8181;
    line-height: 1;
}

.utile-life-num {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.utile-life-arrow {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1;
}

.utile-life-new-bad {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fc8181;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.utile-life-new-good {
    font-size: 1.15rem;
    font-weight: 800;
    color: #68d391;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.utile-cmd-badge {
    background: rgba(249, 115, 22, 0.88);
}

.utile-cmd-lethal {
    background: rgba(220, 38, 38, 0.9);
}

/* Tile footer */
.utile-footer {
    flex: 1;
    min-width: 0;
    background: #0e0e14;
    padding: 6px 10px 6px 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    box-sizing: border-box;
}

.utile-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: left;
    line-height: 1.1;
    margin-bottom: 1px;
}

.utile-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    justify-content: flex-start;
}

.utile-dmg-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Counter buttons (reused by both victim and input) */
.unified-counter-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.1s;
}

.unified-counter-btn:active {
    background: rgba(255, 255, 255, 0.25);
}

.unified-counter-val {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    min-width: 32px;
    touch-action: none;
    text-align: center;
    cursor: ns-resize;
    position: relative;
    border-radius: 5px;
    padding: 2px 4px;
    transition: background 0.12s;
    user-select: none;
    -webkit-user-select: none;
}

.unified-counter-val:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Responsive counter scaling based on modal/screen width */
@media (max-width: 360px) {
    .unified-counter-btn {
        width: 26px;
        height: 26px;
        font-size: 0.9rem;
    }
    .unified-counter-val {
        min-width: 24px;
        font-size: 0.95rem;
    }
    .utile-footer {
        padding: 5px 6px 5px 6px;
        gap: 2px;
    }
}

/* Cmd damage toggle button */
.unified-cmd-toggle {
    font-size: 0.64rem;
    padding: 3px 10px 4px;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
    width: 100%;
    letter-spacing: 0.02em;
    font-family: inherit;
}

.unified-cmd-toggle-active {
    background: rgba(249, 115, 22, 0.16);
    color: var(--orange);
    font-weight: 600;
    border-top-color: rgba(249, 115, 22, 0.2);
}

/* Inline number input overlay */
.unified-dmg-input {
    width: 2.8em;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 3px;
    color: #fff;
    font-family: inherit;
    outline: none;
    padding: 1px 2px;
    -moz-appearance: textfield;
    appearance: textfield;
}
.unified-dmg-input::-webkit-inner-spin-button,
.unified-dmg-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.utile-controls-cmd .unified-dmg-input {
    border-bottom-color: var(--orange);
    color: var(--orange);
}

/* Would-die preview state */
.utile-would-die {
    opacity: 0.55;
}
.utile-would-die .utile-art-bg,
.utile-would-die .utile-art-partner > div {
    filter: grayscale(70%);
}
.utile-skull-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    z-index: 4;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.3);
}


/* ==============================================
   COMBAT DAMAGE MODE (multi-victim) — legacy, unused
   ============================================== */

.cmd-dmg-mode-toggle {
    display: flex;
    gap: 3px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 20px;
    padding: 3px;
    margin: 10px 14px 4px;
    flex-shrink: 0;
}

.cmd-dmg-mode-btn {
    flex: 1;
    padding: 6px 10px;
    border: none;
    border-radius: 16px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    letter-spacing: 0.01em;
}

.cmd-dmg-mode-btn-active {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.combat-victim-zone {
    background: rgba(220, 80, 80, 0.08);
    border-bottom: 1px solid rgba(220, 80, 80, 0.2);
}

.combat-victims-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 10px 10px;
    min-height: 110px;
    align-items: flex-start;
    align-content: flex-start;
}

.combat-victim-empty {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.82rem;
    text-align: center;
    padding: 24px 10px;
    width: 100%;
    font-style: italic;
}

.combat-victim-card {
    position: relative;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 7px 7px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 82px;
    flex: 1 1 82px;
    max-width: 120px;
}

.combat-victim-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    background: rgba(200, 40, 40, 0.75);
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 1.0625rem;
    height: 1.0625rem;
    font-size: 0.5625rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

.combat-victim-art {
    width: 58px;
    height: 42px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.combat-victim-art-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 25%;
    border-radius: 6px;
}

.combat-victim-art-bg.elim-dead-art-split {
    display: flex;
    border-radius: 6px;
    overflow: hidden;
}

.combat-victim-art-bg.elim-dead-art-split > div {
    flex: 1;
    background-size: cover;
    background-position: center 25%;
}

.combat-victim-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.combat-victim-life {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.combat-victim-life.combat-life-changing {
    color: #ff9999;
    font-weight: 600;
}

.combat-victim-counter {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 2px 4px;
    margin-top: 1px;
}

.combat-counter-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.05rem;
    cursor: pointer;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0;
    line-height: 1;
}

.combat-counter-btn:active {
    background: rgba(255, 255, 255, 0.15);
}

.combat-counter-val {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    min-width: 20px;
    text-align: center;
}

/* ==============================================
   COMMANDER DAMAGE SELECT MODE
   ============================================== */

.cmd-dmg-select-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(249, 115, 22, 0.15);
    border-bottom: 2px solid var(--orange-border);
    font-size: 0.88em;
    color: var(--text-0);
    text-align: center;
    flex-wrap: wrap;
}

.cmd-dmg-select-cancel {
    background: transparent;
    border: 1px solid var(--orange-border);
    border-radius: 6px;
    color: var(--orange);
    font-size: 0.82em;
    padding: 3px 10px;
    cursor: pointer;
    flex-shrink: 0;
}
.cmd-dmg-select-cancel:active { opacity: 0.7; }

/* Attacker tile — pulsing orange ring */
.cmd-player-tile.cmd-dmg-select-attacker {
    box-shadow: inset 0 0 0 3px var(--orange), 0 0 18px var(--orange-glow);
    animation: cmdDmgAttackerPulse 1.4s ease-in-out infinite;
}
@keyframes cmdDmgAttackerPulse {
    0%, 100% { box-shadow: inset 0 0 0 3px var(--orange), 0 0 18px var(--orange-glow); }
    50%       { box-shadow: inset 0 0 0 3px var(--orange), 0 0 32px rgba(249,115,22,0.45); }
}

/* Target tiles — orange ring highlight */
.cmd-player-tile.cmd-dmg-select-target {
    box-shadow: inset 0 0 0 2px rgba(249, 115, 22, 0.5);
    cursor: pointer;
}
.cmd-player-tile.cmd-dmg-select-target .cmd-tile-image-wrap::after {
    content: '⚔️';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8em;
    background: rgba(249, 115, 22, 0.12);
    pointer-events: none;
    z-index: 3;
}

/* ==============================================
   COMMANDER DAMAGE STATS OVERLAY
   ============================================== */

/* Overlay sits on the portrait square only — footer is used for the label */
.cmd-dmg-stats-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 16, 0.92);
    z-index: 5;
    border-radius: inherit;
    overflow: hidden;
    backdrop-filter: blur(2px);
}

/* Footer label — shared */
.cmd-tile-name.cmd-dmg-label-active {
    color: var(--orange-light);
    font-weight: 800;
    letter-spacing: normal;
}

/* Shared item / portrait / badge structure */
.cmd-dmg-stat-item {
    display: flex;
    align-items: center;
    min-width: 0;
}

.cmd-dmg-portrait-badge-wrap {
    position: relative;
    flex-shrink: 0;
    container-type: inline-size;
}

.cmd-dmg-stat-portrait {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 5px;
    background: #1a1a24;
    border: 1.5px solid var(--orange-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    background-size: cover;
    background-position: center 20%;
    overflow: hidden;
}

.cmd-dmg-stat-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 900;
    color: #fff;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 0 0 4px 4px;
    line-height: 1.2;
}

.cmd-dmg-stat-badge.lethal {
    color: var(--red);
}

.cmd-dmg-stat-split {
    width: 100%;
    height: 100%;
    display: flex;
}
.cmd-dmg-stat-split > div {
    flex: 1;
    background-size: cover;
    background-position: center 20%;
}

/* ---- MOBILE (≤600px): compact portrait grid, no names ---- */
@media (max-width: 1024px) {
    .cmd-dmg-stats-overlay {
        display: grid;
        gap: 3px;
        padding: 3px;
        grid-auto-rows: 1fr;
    }

    .cmd-dmg-stat-item {
        justify-content: center;
    }

    /* 1 attacker: keep portrait to ~half the overlay width */
    .cmd-dmg-stats-overlay .cmd-dmg-stat-item:only-child {
        max-width: 48%;
        justify-self: center;
    }

    /* Center the lone 3rd item in a 2-col layout */
    .cmd-dmg-stats-overlay .cmd-dmg-stat-item:nth-child(3):last-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 2px);
    }

    .cmd-dmg-portrait-badge-wrap {
        width: 100%;
        aspect-ratio: 1;
    }

    .cmd-dmg-stat-badge {
        font-size: clamp(0.6rem, 22cqw, 1.8rem);
        padding: 2px 0 3px;
    }

    .cmd-dmg-stat-name {
        display: none;
    }

    .cmd-tile-name.cmd-dmg-label-active {
        font-size: clamp(0.55rem, 12cqw, 0.85rem);
    }
}

/* ---- DESKTOP (≥601px): flex-column list with attacker name ---- */
@media (min-width: 1025px) {
    .cmd-dmg-stats-overlay {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 5px;
    }

    .cmd-dmg-stat-item {
        flex: 1;
        max-height: 44px;
        flex-direction: row;
        align-items: stretch;
        gap: 7px;
        padding: 3px 5px;
        background: rgba(255, 255, 255, 0.07);
        border-radius: 5px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Portrait auto-sizes to row height */
    .cmd-dmg-portrait-badge-wrap {
        height: 100%;
        width: auto;
        aspect-ratio: 1;
    }

    .cmd-dmg-stat-badge {
        font-size: clamp(0.5rem, 22cqw, 0.85rem);
        padding: 1px 0 2px;
    }

    .cmd-dmg-stat-name {
        display: block;
        flex: 1;
        min-width: 0;
        font-size: 0.65em;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.85);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        align-self: center;
    }

    .cmd-tile-name.cmd-dmg-label-active {
        font-size: 7cqw;
    }
}

/* ============================================================
   Help Tooltip Button & Modal
   ============================================================ */

.tooltip-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--text-2);
    background: transparent;
    color: var(--text-2);
    font-size: 0.72em;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s;
    line-height: 1;
    padding: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 9999;
}

.tooltip-btn:hover,
.tooltip-btn:active {
    border-color: var(--orange);
    color: var(--orange);
}

/* Player portraits section wrapper */
.active-players-wrap {
    position: relative;
    overflow: visible;
}

.active-players-help-btn {
    position: absolute;
    top: -11px;
    right: -11px;
    z-index: 10;
}

/* ── CMD peek tab — inline button inside game-action-bar ── */
.cmd-dmg-peek-tab {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    padding: 2px;
    background: linear-gradient(135deg, #4a4a7a 0%, #2d2d4e 100%);
    color: #b8b8e0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.6em;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    box-shadow: var(--shadow-sm);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.cmd-dmg-peek-tab:active,
.cmd-dmg-peek-tab.peeking {
    background: linear-gradient(135deg, #6060a0 0%, #40406e 100%);
    color: #fff;
}

/* ── player-area-row: position:relative so overlay's inset:0 covers the strip ── */
.player-area-row {
    position: relative;
}

/* ── Shared label above side tabs ── */
.life-tabs-label {
    font-size: 0.4375rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1;
    margin-bottom: 1px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    pointer-events: none;
    user-select: none;
}

/* ── Right-side +1 / −1 life tabs — absolute inside player-area-row ── */
.all-life-tabs {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    z-index: 500;
}

.all-life-tab {
    width: 22px;
    height: 40px;
    border: none;
    cursor: pointer;
    font-size: 0.7em;
    font-weight: 900;
    letter-spacing: -0.03em;
    border-radius: 0 5px 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 3px 2px 8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
    transition: opacity 0.1s, transform 0.1s;
    padding: 0;
    line-height: 1;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.all-life-tab:active {
    transform: scale(0.88);
    opacity: 0.85;
}

.all-life-tab--plus {
    background: linear-gradient(180deg, #2ecc71 0%, #1fa055 100%);
    color: #fff;
    border-left: 2px solid rgba(255,255,255,0.15);
}

.all-life-tab--minus {
    background: linear-gradient(180deg, #e74c3c 0%, #a93226 100%);
    color: #fff;
    border-left: 2px solid rgba(255,255,255,0.12);
}

/* ── Left-side opponent damage tabs — absolute inside player-area-row ── */
.opp-life-tabs {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    z-index: 500;
}

.opp-life-tab {
    width: 22px;
    height: 40px;
    border: none;
    cursor: pointer;
    font-size: 0.7em;
    font-weight: 900;
    letter-spacing: -0.03em;
    border-radius: 5px 0 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -3px 2px 8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
    transition: opacity 0.1s, transform 0.1s;
    padding: 0;
    line-height: 1;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.opp-life-tab:active {
    transform: scale(0.88);
    opacity: 0.85;
}

.opp-life-tab--dmg {
    background: linear-gradient(180deg, #e74c3c 0%, #a93226 100%);
    color: #fff;
    border-right: 2px solid rgba(255,255,255,0.12);
}

.opp-life-tab--drain {
    background: linear-gradient(180deg, #9b59b6 0%, #6c3483 100%);
    color: #fff;
    border-right: 2px solid rgba(255,255,255,0.12);
    font-size: 0.4375rem;
    font-weight: bold;
    line-height: 1.1;
    flex-direction: column;
}

/* ── Commander damage peek overlay ────────────────────────────────── */
.cmd-dmg-peek-overlay {
    display: none;
    position: fixed;
    z-index: 200;
    background: rgba(8, 8, 20, 0.93);
    border-radius: 10px;
    flex-direction: column;
    gap: 5px;
    padding: 8px 36px 10px 12px;
    pointer-events: none;
    backdrop-filter: blur(2px);
}

.cmd-dmg-peek-overlay.visible {
    display: flex;
    pointer-events: auto;
}

.cmd-dmg-peek-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding-bottom: 4px;
}

.cmd-dmg-peek-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cmd-dmg-peek-name {
    color: #e0e0ff;
    font-size: 0.82em;
    font-weight: bold;
    min-width: 68px;
    flex-shrink: 0;
}

.cmd-dmg-peek-entries {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.cmd-dmg-peek-entry {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 2px 7px;
    color: #ffd;
    font-size: 0.78em;
    white-space: nowrap;
}

.cmd-dmg-peek-entry.danger {
    background: rgba(255, 80, 80, 0.25);
    color: #ff8080;
    font-weight: bold;
}

.cmd-dmg-peek-none {
    color: #555;
    font-size: 0.78em;
}

/* ── Peek overlay close button (shared by cmd-dmg and cmd-zone) ── */
.peek-overlay-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: rgba(200, 40, 40, 0.85);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 0.7em;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    flex-shrink: 0;
}

.peek-overlay-close:hover {
    background: rgba(230, 60, 60, 1);
}

/* ── Command Zone tab — inline button inside game-action-bar ── */
.cmd-zone-tab {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex: 1;
    width: 100%;
    padding: 2px;
    background: linear-gradient(135deg, #2e2e2e 0%, #1a1a1a 100%);
    color: #d0d0d0;
    border: none;
    border-radius: 6px;
    cursor: grab;
    font-size: 0.6em;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    box-shadow: var(--shadow-sm);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.cmd-zone-tab-bg-icon {
    position: absolute;
    font-size: 3.8em;
    opacity: 0.75;
    color: var(--color-primary, #f5a623);
    pointer-events: none;
    line-height: 1;
}

.cmd-zone-tab-label {
    position: relative;
    z-index: 1;
    text-shadow:
        -1px -1px 0 rgba(0,0,0,0.85),
         1px -1px 0 rgba(0,0,0,0.85),
        -1px  1px 0 rgba(0,0,0,0.85),
         1px  1px 0 rgba(0,0,0,0.85);
}

.cmd-zone-tab:active,
.cmd-zone-tab.peeking {
    background: linear-gradient(135deg, #4e8c60 0%, #2a5c3a 100%);
    color: #fff;
}

.cmd-zone-tab.dragging {
    opacity: 0.4;
    cursor: grabbing;
}

/* ── Command Zone peek overlay ────────────────────────────────── */
.cmd-zone-peek-overlay {
    display: none;
    position: fixed;
    z-index: 200;
    background: rgba(8, 20, 10, 0.93);
    border-radius: 10px;
    flex-direction: column;
    gap: 5px;
    padding: 8px 36px 10px 12px;
    pointer-events: none;
    backdrop-filter: blur(2px);
}

.cmd-zone-peek-overlay.visible {
    display: flex;
    pointer-events: auto;
}

.cmd-zone-peek-hint {
    color: #7abd90;
    font-size: 0.72em;
    text-align: center;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-style: italic;
}

.cmd-zone-peek-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding-bottom: 6px;
    row-gap: 3px;
}

.cmd-zone-peek-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cmd-zone-peek-name {
    color: #e0ffe8;
    font-size: 0.82em;
    font-weight: bold;
    min-width: 68px;
    flex-shrink: 0;
}

.cmd-zone-peek-status {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 0.78em;
    white-space: nowrap;
}

.cmd-zone-peek-status.in-zone {
    color: #8888aa;
}

.cmd-zone-peek-status.on-field {
    background: rgba(60, 200, 100, 0.2);
    color: #7dffaa;
    font-weight: bold;
}

.cmd-zone-peek-cast-count {
    color: #aaa;
    font-size: 0.72em;
    margin-left: auto;
}

.cmd-zone-history {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 3px;
}

.cmd-zone-history-entry {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72em;
    padding: 1px 4px;
    background: rgba(255,255,255,0.04);
    border-radius: 3px;
}

.czh-cast {
    color: #7dffaa;
    white-space: nowrap;
}

.czh-return {
    color: #ff9a9a;
    white-space: nowrap;
}

.czh-active {
    color: #f0c040;
    font-style: italic;
    white-space: nowrap;
}

.czh-arrow {
    color: #556;
}

.czh-time {
    color: #778;
    font-size: 0.9em;
}

/* ── Drag ghost (cmd zone keyrune icon) ── */
.cmd-zone-drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-size: 4.4em;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7));
    transition: none;
    color: var(--color-primary, #f5a623);
}

/* ── Commander-out badge on player portrait (top-left) ── */
.cmd-out-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 1.6em;
    line-height: 1;
    cursor: grab;
    z-index: 15;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    padding: 3px 5px;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.9));
    transition: transform 0.1s;
    color: var(--color-primary, #f5a623);
}

.cmd-out-badge:active {
    cursor: grabbing;
    transform: scale(1.15);
}

.cmd-out-badge--selected {
    outline: 2px solid rgba(255,255,255,0.7);
    outline-offset: 1px;
}

/* ── Poison counter bubble on player portrait (top-right) ── */
.poison-bubble {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(10, 90, 30, 0.92);
    color: #fff;
    font-weight: 700;
    font-size: 0.78em;
    padding: 3px 6px;
    border-radius: 10px;
    z-index: 15;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    border: 1px solid rgba(60, 200, 80, 0.45);
    box-shadow: 0 1px 5px rgba(0,0,0,0.75);
    transition: transform 0.1s;
    touch-action: none;
    display: flex;
    align-items: center;
    gap: 3px;
}

.poison-bubble:active {
    transform: scale(1.12);
}

.poison-bubble-icon {
    font-size: 1em;
    line-height: 1;
    color: #fff;
}

.poison-controls {
    position: absolute;
    top: 28px;
    right: 4px;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    z-index: 16;
    background: rgba(18, 14, 22, 0.93);
    border-radius: 8px;
    padding: 6px 5px;
    border: 1px solid rgba(60, 180, 60, 0.45);
    box-shadow: 0 2px 10px rgba(0,0,0,0.85);
}

.poison-ctrl-btn {
    background: rgba(10, 110, 35, 0.85);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
}

.poison-ctrl-btn:active {
    background: rgba(20, 160, 50, 0.95);
}

/* ── Floating dismiss X (appended to body, overlaps badge top-right corner) ── */
.cmd-out-dismiss-float {
    position: absolute;
    z-index: 9999;
    width: 18px;
    height: 18px;
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 50%;
    padding: 0;
    font-size: 0.6em;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(0,0,0,0.7);
    touch-action: manipulation;
}

/* ── Lap tracker drag-expand popup ── */
.lap-tracker-popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1199;
    background: rgba(0,0,0,0.5);
    pointer-events: none;
    animation: fadeIn 0.18s ease-out;
}

#unifiedTracking.lap-tracker-popup {
    position: fixed;
    top: 28vh;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    background: var(--bg-1);
    border-top: 2px solid var(--border-2);
    border-radius: 14px 14px 0 0;
    padding: 10px 10px 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.6);
    animation: lapPopupExpand 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

#unifiedTracking.lap-tracker-popup .unified-tracking-list {
    max-height: none;
    flex: 1;
    overflow-y: auto;
}

.lap-popup-cancel-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1.5px dashed var(--border-2);
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.lap-popup-cancel-zone.cancel-zone-active {
    background: rgba(200, 50, 50, 0.18);
    border-color: #c83232;
    border-style: solid;
    color: #e05555;
}

.lap-popup-header {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 0 8px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    flex-shrink: 0;
}

@keyframes lapPopupExpand {
    from {
        top: var(--lap-popup-from-top);
        bottom: var(--lap-popup-from-bottom);
        border-radius: 8px 8px 0 0;
    }
    to {
        top: 28vh;
        bottom: 0;
        border-radius: 14px 14px 0 0;
    }
}

#unifiedTracking.lap-tracker-popup.lap-tracker-collapsing {
    animation: lapPopupCollapse 0.22s cubic-bezier(0.4, 0, 1, 1) forwards;
    pointer-events: none;
}

@keyframes lapPopupCollapse {
    from {
        top: 28vh;
        bottom: 0;
        border-radius: 14px 14px 0 0;
    }
    to {
        top: var(--lap-popup-from-top);
        bottom: var(--lap-popup-from-bottom);
        border-radius: 4px;
    }
}

/* ── Player portrait drop target highlight ── */
.cmd-zone-drop-target::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px solid #5dde80;
    border-radius: inherit;
    box-shadow: 0 0 20px rgba(93, 222, 128, 0.9), inset 0 0 18px rgba(93, 222, 128, 0.25);
    pointer-events: none;
    z-index: 15;
    animation: cmd-drop-pulse 0.7s ease-in-out infinite alternate;
}

@keyframes cmd-drop-pulse {
    from { box-shadow: 0 0 12px rgba(93, 222, 128, 0.6), inset 0 0 10px rgba(93, 222, 128, 0.15); opacity: 0.85; }
    to   { box-shadow: 0 0 32px rgba(93, 222, 128, 1.0), inset 0 0 22px rgba(93, 222, 128, 0.35); opacity: 1; }
}

/* ── Command Zone tab drop target highlight ── */
.cmd-zone-tab.drop-target {
    background: linear-gradient(135deg, #6dae40 0%, #3d6e22 100%);
    color: #fff;
    box-shadow: 0 -2px 10px rgba(80,200,80,0.5);
}

/* ── Action toast (confirms retroactive cast/return) ── */
.cmd-action-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: rgba(30, 38, 28, 0.95);
    color: #7ee89a;
    border: 1px solid rgba(93, 222, 128, 0.4);
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    box-shadow: 0 4px 18px rgba(0,0,0,0.5);
}
.cmd-action-toast--show {
    animation: cmdToastIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.cmd-action-toast--hide {
    animation: cmdToastOut 0.28s ease-in forwards;
}
@keyframes cmdToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes cmdToastOut {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to   { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* Lap tracking section — timer tooltip anchor */
.lap-tracking-section {
    position: relative;
}

.lap-tracking-help-btn {
    position: absolute;
    top: -11px;
    right: -11px;
    z-index: 50;
}

.undo-action-btn {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    font-size: 1.1em;
}

.redo-action-btn {
    position: absolute;
    left: 34px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    font-size: 1.1em;
}

@keyframes undo-flash {
    0%   { box-shadow: 0 0 24px rgba(249,115,22,0.75), var(--shadow-md); border-color: var(--orange-light); }
    55%  { box-shadow: 0 0 40px rgba(249,115,22,1),    var(--shadow-md); border-color: var(--orange-light); }
    100% { box-shadow: 0 0 14px var(--orange-glow),    var(--shadow-md); border-color: var(--orange); }
}

.undo-toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    z-index: 9000;
    background: var(--bg-1);
    border: 1.5px solid var(--orange);
    border-radius: 24px;
    padding: 9px 22px;
    font-size: 0.94em;
    font-weight: 600;
    color: var(--text-0);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.2s ease;
    pointer-events: none;
    box-shadow: 0 0 14px var(--orange-glow), var(--shadow-md);
}

.undo-toast.undo-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    animation: undo-flash 0.55s ease-out forwards;
}

.undo-action-btn.undo-btn-cooling {
    opacity: 0.4;
    pointer-events: none;
}

/* ── Game Action Bar — two-row bar between lap tracker and player portraits ── */
.game-action-bar {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 5px 8px;
    background: var(--bg-2);
    border-top: 1px solid var(--border-1);
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
}

.action-bar-cmd-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 48px;
    flex-shrink: 0;
    align-self: stretch;
}

.action-bar-sep {
    width: 1px;
    align-self: stretch;
    background: var(--border-2);
    flex-shrink: 0;
    margin: 2px 0;
}

.action-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.action-bar-group-label {
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
}

.action-bar-group-btns {
    display: flex;
    gap: 4px;
    flex: 1;
    width: 100%;
    align-items: stretch;
}

.action-bar-label {
    font-size: 0.5625rem;
    font-weight: 700;
    color: var(--text-1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 1px;
    user-select: none;
}

.action-bar-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 2px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.72em;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-align: center;
    white-space: normal;
    box-shadow: var(--shadow-sm);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.action-bar-btn:active {
    transform: scale(0.9);
    opacity: 0.85;
}

.action-bar-btn--red {
    background: linear-gradient(135deg, #e74c3c 0%, #a93226 100%);
    color: #fff;
}

.action-bar-btn--purple {
    background: linear-gradient(135deg, #9b59b6 0%, #6c3483 100%);
    color: #fff;
}

.action-bar-btn--green {
    background: linear-gradient(135deg, #2ecc71 0%, #1fa055 100%);
    color: #fff;
}

.action-bar-btn--neutral {
    background: var(--bg-3);
    color: var(--text-0);
    border: 1.5px solid var(--border-2);
}


/* Tooltip modal */
.tooltip-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tooltip-modal {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-lg);
    padding: 24px;
    max-width: 400px;
    width: 100%;
    box-shadow: var(--shadow-lg);
}

.tooltip-modal-title {
    font-size: 1.05em;
    font-weight: 700;
    color: var(--orange);
    margin-bottom: 16px;
}

.tooltip-modal ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.tooltip-modal li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--text-0);
    font-size: 0.88em;
    line-height: 1.45;
}

.tooltip-modal li .tip-icon {
    flex-shrink: 0;
    font-size: 1.1em;
    line-height: 1.3;
}

.tooltip-modal-close {
    display: block;
    margin: 20px auto 0;
    padding: 10px 32px;
    background: var(--bg-3);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    color: var(--text-0);
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.tooltip-modal-close:hover {
    background: var(--bg-4);
}

/* ============================================================
   PLAYER STATS BUTTON (triangle, top-left of portrait)
   ============================================================ */

.player-stats-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 42px;
    background: rgba(249, 115, 22, 0.75);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    border: none;
    cursor: pointer;
    z-index: 6;
    padding: 0;
    transition: background 0.12s, filter 0.12s;
    filter: drop-shadow(2px 2px 0px rgba(255,255,255,0.18)) drop-shadow(1px 3px 4px rgba(0,0,0,0.35));
    -webkit-tap-highlight-color: transparent;
}

.player-stats-btn:hover {
    background: rgba(255, 140, 50, 1);
    filter: drop-shadow(2px 2px 0px rgba(255,255,255,0.3)) drop-shadow(1px 3px 6px rgba(0,0,0,0.5));
}

/* Two diagonal black lines across the stats triangle */
.player-stats-btn::before,
.player-stats-btn::after {
    content: '';
    position: absolute;
    background: rgba(0, 0, 0, 0.55);
    height: 2px;
    transform: rotate(-45deg);
    transform-origin: center center;
    pointer-events: none;
}

/* Shorter line — closer to the corner */
.player-stats-btn::before {
    width: 8px;
    top: 7px;
    left: 4px;
}

/* Longer line — further from the corner */
.player-stats-btn::after {
    width: 16px;
    top: 13px;
    left: 6px;
}

@media (max-width: 1024px) {
    .player-stats-btn {
        width: 30px;
        height: 30px;
    }

    /* Rescale lines for the smaller 30×30 triangle */
    .player-stats-btn::before {
        width: 6px;
        top: 5px;
        left: 3px;
    }

    .player-stats-btn::after {
        width: 11px;
        top: 9px;
        left: 4px;
    }
}

.player-infect-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: rgba(34, 197, 94, 0.88);
    color: white;
    font-size: 0.62em;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 8px;
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* ============================================================
   INFECT BADGE IN COMBAT MODAL
   ============================================================ */

.utile-infect-badge {
    background: rgba(34, 197, 94, 0.88);
}

.utile-existing-infect {
    font-size: 0.7em;
    color: var(--green);
    text-align: center;
    margin-top: 2px;
}

.utile-infect-active .utile-art-wrap {
    outline: 2px solid var(--green);
    outline-offset: -2px;
}

/* ============================================================
   PLAYER STATS MODAL
   ============================================================ */

.player-stats-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    z-index: 1100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    animation: fadeIn 0.15s ease-out;
}

.player-stats-content {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.2s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.player-stats-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
}

.player-stats-name {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--text-0);
    flex: 1;
}

.player-stats-life {
    font-size: 1em;
    font-weight: 600;
    color: var(--red);
}

.player-stats-close {
    background: none;
    border: none;
    color: var(--text-2);
    font-size: 1.1em;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    line-height: 1;
    transition: color 0.12s;
}

.player-stats-close:hover { color: var(--text-0); }

.pstats-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
}

.pstats-tab {
    flex: 1;
    padding: 10px 8px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-1);
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}

.pstats-tab:hover { color: var(--text-0); }

.pstats-tab-active {
    color: var(--orange);
    border-bottom-color: var(--orange);
}

.pstats-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pstats-empty {
    color: var(--text-2);
    text-align: center;
    padding: 20px 0;
    font-size: 0.88em;
}

/* Commander damage rows */
.pstats-cmd-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: 10px;
}

.pstats-cmd-row.pstats-cmd-lethal {
    border-color: var(--red);
    background: var(--red-dark-bg);
}

.pstats-cmd-portrait {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4em;
    overflow: hidden;
}

.pstats-cmd-portrait-split {
    width: 100%;
    height: 100%;
    display: flex;
}

.pstats-cmd-portrait-split > div {
    flex: 1;
    background-size: cover;
    background-position: center 20%;
}

.pstats-cmd-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pstats-cmd-name {
    font-size: 0.88em;
    font-weight: 600;
    color: var(--text-0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pstats-cmd-bar-wrap {
    height: 6px;
    background: var(--bg-4);
    border-radius: 3px;
    overflow: hidden;
}

.pstats-cmd-bar {
    height: 100%;
    background: var(--orange);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.pstats-infect-bar {
    background: var(--green);
}

.pstats-cmd-val {
    font-size: 0.82em;
    color: var(--text-1);
    font-weight: 600;
}

.pstats-cmd-val-lethal { color: var(--red); }

.pstats-cmd-max {
    color: var(--text-2);
    font-weight: 400;
}

/* Infect row */
.pstats-infect-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--green-dark-bg);
    border: 1px solid rgba(34,197,94,0.3);
    border-radius: var(--radius-md);
    padding: 10px;
}

.pstats-infect-row.pstats-infect-lethal {
    border-color: var(--red);
    background: var(--red-dark-bg);
}

.pstats-infect-icon {
    font-size: 1.6em;
    flex-shrink: 0;
    width: 48px;
    text-align: center;
}

.pstats-infect-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pstats-infect-label {
    font-size: 0.88em;
    font-weight: 600;
    color: var(--green-light);
}

/* Health log */
.pstats-health-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pstats-health-row {
    display: grid;
    grid-template-columns: 2.5em 1fr auto auto;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: var(--bg-2);
    border-radius: var(--radius-sm);
    font-size: 0.83em;
    border: 1px solid var(--border-0);
}

.pstats-health-round {
    color: var(--text-2);
    font-weight: 600;
    font-size: 0.9em;
}

.pstats-health-turn {
    color: var(--text-1);
    font-size: 0.88em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pstats-health-gain {
    color: var(--green);
    font-weight: 700;
    text-align: right;
}

.pstats-health-loss {
    color: var(--red);
    font-weight: 700;
    text-align: right;
}

.pstats-health-total {
    color: var(--text-1);
    min-width: 4em;
    text-align: right;
}

.pstats-health-cmd {
    color: var(--orange);
    font-size: 0.85em;
}

/* Commander damage tab subtitle */
.pstats-dmg-subtitle {
    font-size: 0.78em;
    color: var(--text-2);
    text-align: center;
    margin: 0 0 4px;
    line-height: 1.4;
}

/* Overview stats grid */
.pstats-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.pstats-stat-tile {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.pstats-stat-value {
    font-size: 1.25em;
    font-weight: 800;
    color: var(--text-0);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pstats-stat-value.pstats-stat-green { color: var(--green); }
.pstats-stat-value.pstats-stat-red   { color: var(--red); }

.pstats-stat-label {
    font-size: 0.7em;
    color: var(--text-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

/* ============================================
   TURN DAMAGE OVERLAY
   ============================================ */

.turn-damage-overlay {
    position: absolute;
    left: calc(100% + 12px);
    right: auto;
    top: 40%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 5px;
    pointer-events: none;
    max-height: 60vh;
    overflow: hidden;
    width: 148px;
}

.turn-dmg-header {
    font-size: 0.6em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-2);
    text-align: right;
    padding-right: 4px;
    margin-bottom: 1px;
}

.turn-dmg-undo-btn {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 7px;
    border-radius: 20px;
    font-size: 0.52em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-2);
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    white-space: nowrap;
    outline: none;
    background:
        linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
        conic-gradient(var(--red) var(--prog, 0%), var(--border-1) var(--prog, 0%)) border-box;
    border: 3px solid transparent;
    overflow: visible;
}

.turn-dmg-undo-btn.holding {
    color: var(--red);
    filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.55));
}

.turn-dmg-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: 40px;
    padding: 4px 12px 4px 4px;
    animation: turn-dmg-in 0.18s ease-out both;
    min-width: 120px;
    opacity: 1;
}

@keyframes turn-dmg-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.turn-dmg-portrait {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background-color: var(--bg-3);
    background-size: 140%;
    background-position: center 15%;
    flex-shrink: 0;
    border: 1.5px solid var(--border-1);
}

.turn-dmg-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

/* On desktop the entries wrapper is transparent — entries remain direct flex children of the overlay */
.turn-dmg-entries {
    display: contents;
}

.turn-dmg-name {
    font-size: 0.65em;
    font-weight: 600;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
    line-height: 1.2;
}

.turn-dmg-delta {
    font-size: 1.15em;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.turn-dmg-gain { color: var(--green); }
.turn-dmg-loss { color: var(--red); }

@media (max-width: 1366px) {
    /* Overlay resets to static flow inside the sticky bar */
    .turn-damage-overlay {
        position: static;
        left: auto; right: auto; top: auto; bottom: auto;
        width: 100%;
        transform: none;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 3px;
        max-height: none;
        overflow: visible;
        padding: 2px 0 0;
        z-index: auto;
        pointer-events: auto;
        position: relative;
    }
    /* "This Turn" label — small and muted, top-left corner */
    .turn-dmg-header {
        display: block;
        width: auto;
        text-align: left;
        font-size: 0.58em;
        padding-right: 0;
        margin-bottom: 1px;
        margin-top: -6px;
    }
    .turn-dmg-undo-btn {
        top: -6px;
    }
    /* Bubble entries rendered as a single centered row */
    .turn-dmg-entries {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: hidden;
        overflow-y: hidden;
        gap: 8px;
        width: 100%;
        align-items: center;
        justify-content: center;
        margin-top: 2px;
    }
    /* Compact bubble entries */
    .turn-dmg-entry {
        min-width: 0;
        padding: 2px 8px 2px 2px;
        gap: 5px;
        animation: none;
        background: var(--bg-3);
        border-color: var(--border-2);
        opacity: 1;
        flex-shrink: 1;
    }
    .turn-dmg-portrait { width: 30px; height: 30px; flex-shrink: 0; }
    .turn-dmg-delta { font-size: 1em; }
    /* Hide player name by default — portrait art identifies the player */
    .turn-dmg-name { display: none; }
    /* Show name only when two players share the same commander art */
    .turn-dmg-entry.show-name .turn-dmg-name { display: block; }
    .turn-dmg-entry:not(.show-name) .turn-dmg-info { gap: 0; }
    /* Allow delta to compress — prevent overflow text pushing entry wider */
    .turn-dmg-delta { font-variant-numeric: tabular-nums; white-space: nowrap; }
    .turn-dmg-info { min-width: 0; overflow: hidden; }

    /* Portrait-only mode: delta overlaid on the portrait rectangle */
    .turn-damage-overlay.portrait-mode .turn-dmg-entry {
        padding: 0;
        gap: 0;
        position: relative;
        border-radius: 6px;
        flex-shrink: 1;
        overflow: hidden;
        min-width: 0;
    }
    .turn-damage-overlay.portrait-mode .turn-dmg-portrait {
        width: 44px;
        height: 44px;
        border-radius: 6px;
        flex-shrink: 1;
        min-width: 28px;
        min-height: 28px;
    }
    .turn-damage-overlay.portrait-mode .turn-dmg-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.6);
        padding: 2px 0;
        min-width: unset;
        overflow: visible;
    }
    .turn-damage-overlay.portrait-mode .turn-dmg-name { display: none; }
    .turn-damage-overlay.portrait-mode .turn-dmg-delta {
        font-size: 0.85em;
        font-weight: 900;
        line-height: 1;
        text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 1px 4px rgba(0,0,0,0.8);
    }
}

/* ============================================================
   LOCAL ROOM
   ============================================================ */

#localRoomBtn.local-room-active {
    background: var(--orange-subtle);
    border-color: var(--orange-border);
    color: var(--orange-light);
    font-weight: 600;
}

.local-room-modal-content {
    max-width: 360px;
    width: 100%;
}

.local-room-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.local-room-title {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-0);
}

.local-room-hint {
    font-size: 0.85rem;
    color: var(--text-1);
    margin: 0 0 10px;
    line-height: 1.5;
}

.local-room-hint strong {
    color: var(--text-0);
}

.local-room-code-display {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: 0.25em;
    text-align: center;
    color: var(--orange);
    background: var(--orange-subtle);
    border: 1px solid var(--orange-border);
    border-radius: 10px;
    padding: 14px 10px;
    margin: 12px 0 6px;
    font-family: monospace;
}

.local-room-sub {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-2);
    margin: 0 0 4px;
}

.local-room-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.local-room-divider {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-2);
    margin: 2px 0;
}

.local-room-expired-notice {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #ef4444;
    font-size: 0.82rem;
    padding: 8px 12px;
    margin: 0 0 10px;
    text-align: center;
}

/* Local room sheet section */
.sheet-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--orange);
    border-top: 1px solid var(--border-1);
    margin-top: 2px;
}

.sheet-section-toggle {
    cursor: pointer;
    user-select: none;
}

.sheet-section-toggle:hover {
    background: rgba(249, 115, 22, 0.07);
}

.sheet-section-chevron {
    font-size: 0.85rem;
    display: inline-block;
    transition: transform 0.18s ease;
    transform: rotate(0deg);
    opacity: 0.75;
}

.sheet-section-chevron.collapsed {
    transform: rotate(-90deg);
}

.sheet-section-body.collapsed {
    display: none;
}

.sheet-player-item--room {
    background: var(--orange-subtle);
}

.sheet-player-badge.sheet-player-room {
    background: var(--orange-subtle);
    border: 1px solid var(--orange-border);
    color: var(--orange-light);
    font-size: 0.68rem;
    padding: 1px 5px;
    border-radius: 4px;
    vertical-align: middle;
}

/* Profiles modal — room section */
.profiles-section-header--room {
    color: var(--orange);
    border-color: var(--orange-border);
}

.profiles-room-empty {
    padding: 10px 14px;
    font-size: 0.82rem;
    color: var(--text-2);
    font-style: italic;
}

.profile-list-item--room {
    cursor: default;
    opacity: 0.9;
}

.profile-room-badge {
    display: inline-block;
    background: var(--orange-subtle);
    border: 1px solid var(--orange-border);
    color: var(--orange-light);
    font-size: 0.68rem;
    padding: 1px 5px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 4px;
}

.profiles-room-sync-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-2);
    border-radius: 8px;
    margin: 2px 0;
}

.profiles-room-sync-name {
    font-weight: 600;
    color: var(--text-0);
    font-size: 0.9rem;
}

.profiles-room-sync-sub {
    font-size: 0.75rem;
    color: var(--text-2);
    margin-top: 2px;
}

.profiles-room-desync-btn {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--red, #ef4444);
    color: var(--red, #ef4444);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s;
}

.profiles-room-desync-btn:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* ============================================================
   PORTRAIT LOCK + NO-SCROLL FULL-SCREEN GAME VIEW (mobile)
   ============================================================ */


/* ── Mobile + tablet: lock game screen to full viewport, no outer scroll ── */
@media (max-width: 1366px) {
    body.step3-active {
        overflow: hidden;
        padding: 0;
        height: 100vh;
        height: 100dvh;
    }

    /* Fill screen edge-to-edge as a flex column. */
    body.step3-active .container {
        height: 100vh;
        height: 100dvh;
        border-radius: 0 !important;
        padding: 4px 8px 0 !important;
        padding-bottom: 0 !important;
        display: flex;
        flex-direction: column;
    }

    /* Keep site header visible and compact */
    body.step3-active .site-header {
        margin-bottom: 2px;
    }
    body.step3-active .site-header h1 {
        margin-bottom: 0 !important;
    }

    /* Hide game history section during active game */
    body.step3-active .stats-section {
        display: none;
    }

    /* step3 becomes a flex column filling all remaining container space.
       padding-bottom reserves space for the sticky Next Turn bar. */
    body.step3-active #step3 {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding-bottom: 50px;
    }

    /* Lap tracker: ~26% of the screen (was 33%; reduced 20% so the damage overlay
       doesn't block the bottom row of player portraits on mobile). */
    body.step3-active .lap-tracking-section {
        flex: 0 0 26dvh;
        min-height: 0;
        overflow: visible;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        padding: 4px;
    }

    /* #unifiedTracking wrapper stretches so the list fills the tracker section */
    body.step3-active #unifiedTracking {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    /* Scrollable turn list fills all tracker space; no min-height floor */
    body.step3-active .unified-tracking-list {
        flex: 1;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }

    /* Touch-friendly tracking rows — slimmer than before but still tappable */
    body.step3-active #unifiedTracking .tracking-item {
        padding: 7px 8px;
        margin-bottom: 2px;
    }
    /* Turn rows: zero padding so the portrait fills edge-to-edge */
    body.step3-active #unifiedTracking .tracking-turn {
        padding: 0;
    }
    body.step3-active #unifiedTracking .tracking-turn .tracking-item-left {
        padding: 7px 0;
    }
    /* Portrait fills full height of the turn row */
    body.step3-active #unifiedTracking .tracking-turn .tracking-portrait,
    body.step3-active #unifiedTracking .tracking-turn .tracking-portrait-split {
        width: 44px;
        height: auto;
        align-self: stretch;
        border-radius: 0;
    }
    body.step3-active #unifiedTracking .tracking-turn .tracking-portrait-split > div {
        height: auto;
    }
    body.step3-active #unifiedTracking .tracking-label { font-size: 0.88em; }
    body.step3-active #unifiedTracking .tracking-time  { font-size: 0.88em; }

    /* Active players: fills all remaining space between the action bar and the
       sticky-bar clearance. A flex column so the inner chain can fill it fully. */
    body.step3-active .active-players-wrap {
        flex: 1 0 0;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Propagate flex fill down through the DOM so tile images expand to fill
       available height instead of overflowing and getting clipped. */
    body.step3-active .player-area-row {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    body.step3-active #activePlayers {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    /* Strip fills the player area; align-content:stretch distributes space to
       grid rows (4/5/6-player grids) so every row fills its fair share. */
    body.step3-active .cmd-players-strip {
        flex: 1;
        min-height: 0;
        align-content: stretch;
    }

    /* Image-wrap grows to fill each tile's available height (tile = flex column).
       Uses .cmd-players-strip in the chain (specificity 0-3-1) to beat the
       ≤480px rule (.cmd-players-strip[data-players="4"] .cmd-tile-image-wrap = 0-3-0)
       that would otherwise restore padding-top:65% for 4-player grids. */
    body.step3-active .cmd-players-strip .cmd-tile-image-wrap {
        padding-top: 0;
        flex: 1;
        height: auto;
    }

    /* Prevent footer from shrinking even if tile height is minimal */
    body.step3-active .cmd-tile-footer {
        flex-shrink: 0;
    }

    /* Bottom action bar — compact */
    body.step3-active .step3-bottom-bar {
        flex-shrink: 0;
        margin-top: 5px;
        padding-bottom: 2px;
        gap: 5px;
    }

    /* Smaller Notes / Damage Log buttons */
    body.step3-active .btn-add-note {
        padding: 6px 8px;
        font-size: 0.75em;
    }

    /* Smaller End Game button */
    body.step3-active .btn-end-game-small {
        padding: 6px 8px !important;
        font-size: 0.7em !important;
    }
}

/* Mobile phone: the sticky bar on mobile is ~130px tall when the turn-damage-overlay
   row is visible (portrait entries row ~56px + 6px gap + Next Turn button ~55px +
   bar padding 23px). Reserve enough clearance so portraits are never hidden behind it.
   The base ≤1366px block only reserves 50px which is only enough for the button alone. */
@media (max-width: 600px) {
    body.step3-active #step3 {
        padding-bottom: 130px;
    }
}

/* Tablet / wide-phone game screen: portrait images use vh-based heights (not the
   width-percentage trick) so tiles scale with screen HEIGHT. The base ≤1366px block
   already sets proportional dvh sections; this block adds tablet-specific tweaks. */
@media (min-width: 601px) and (max-width: 1366px) {
    /* Sticky bar on tablet is still ~130px when the turn-damage-overlay row is visible
       (overlay entries are wider but still a single row, same height as mobile). */
    body.step3-active #step3 {
        padding-bottom: 130px;
    }

    /* Compact footer so name + combat button stay small on wider tiles.
       Container queries can inflate the combat button; this selector
       (0-2-1) beats container query specificity (0-1-0) and overrides it. */
    body.step3-active .cmd-tile-footer {
        padding: 3px 4px 4px;
        gap: 2px;
    }
    body.step3-active .cmd-tile-combat-btn {
        font-size: 0.82em;
        padding: 5px 9px;
        line-height: 1.4;
    }

    /* Switch 2/3/4-player strips from flex-row to CSS grid so that
       align-content:stretch (already set in the ≤1366px block) properly
       distributes the strip's flex-derived height down into the tile rows.
       A flex-row cross-axis doesn't propagate height to nested flex children
       reliably at this viewport range; a grid row does. 5/6-player strips
       are already grids and work correctly without this override. */
    body.step3-active .cmd-players-strip[data-players="2"] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        overflow-x: unset;
        flex-direction: unset;
    }
    body.step3-active .cmd-players-strip[data-players="3"] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow-x: unset;
        flex-direction: unset;
    }
    body.step3-active .cmd-players-strip[data-players="4"] {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        overflow-x: unset;
        flex-direction: unset;
    }
}