/* ==========================================================================
   FERN -- Competition UI
   Landscape-first layout with cinematic header + bottom HUD bar
   ========================================================================== */

/* ==========================================================================
   FULL-SCREEN COMPETITION MODE
   When competition is active, the entire viewport is owned by .competition-view.
   We hide the app chrome and let .competition-view position itself via fixed.
   ========================================================================== */

body.competition-active #top-bar,
body.competition-active #bottom-nav {
    display: none !important;
}

body.competition-active #app {
    max-width: none;
    padding: 0;
}

body.competition-active #screen-container {
    padding: 0;
    overflow: visible;
}

/* ==========================================================================
   MATCHMAKING -- Arena Lobby
   Game-first UI: no visible borders, atmospheric depth, pixel-art sensibility
   ========================================================================== */

.mm {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-darkest);
    gap: 2px;
    margin: 0 -12px;
    width: calc(100% + 24px);
    position: relative;
}

/* ---------- Broadcast ticker ---------- */

.mm-ticker {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(168,72,56,0.08);
    padding: 6px 10px;
    position: relative;
    overflow: hidden;
}

.mm-ticker::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168,72,56,0.3), transparent);
}

.mm-ticker-live {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--bg-darkest);
    background: var(--red);
    padding: 2px 5px;
    margin-right: 8px;
    letter-spacing: 1px;
    animation: mm-blink 2s steps(2) infinite;
}

@keyframes mm-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.mm-ticker-text {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: rgba(216,104,120,0.7);
    letter-spacing: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Contestant Card ---------- */

.mm-card {
    display: flex;
    flex-direction: column;
    margin: 4px 10px 0;
    position: relative;
    background:
        radial-gradient(ellipse at 0% 20%, rgba(208,160,48,0.05) 0%, transparent 50%),
        linear-gradient(180deg, rgba(48,40,30,0.95) 0%, rgba(28,22,16,0.98) 100%);
    box-shadow:
        0 0 0 1px rgba(208,160,48,0.08),
        0 6px 20px rgba(0,0,0,0.4);
}

.mm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 12px;
    background: rgba(208,160,48,0.06);
    border-bottom: 1px solid rgba(208,160,48,0.08);
}

.mm-card-header-label {
    font-family: var(--font-pixel);
    font-size: 6px;
    color: rgba(208,160,48,0.5);
    letter-spacing: 3px;
}

.mm-card-header-id {
    font-family: var(--font-pixel);
    font-size: 6px;
    color: rgba(208,160,48,0.3);
    letter-spacing: 2px;
}

.mm-card-body {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 8px;
}

.mm-card-left {
    flex-shrink: 0;
}

.mm-player-badge {
    position: relative;
    flex-shrink: 0;
}

.mm-avatar {
    width: 52px;
    height: 52px;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    image-rendering: pixelated;
    overflow: hidden;
    box-shadow:
        0 0 0 2px rgba(0,0,0,0.5),
        0 0 0 3px rgba(208,160,48,0.12),
        0 4px 12px rgba(0,0,0,0.4);
}

.mm-avatar img,
.mm-avatar svg {
    width: 44px;
    height: 44px;
    image-rendering: pixelated;
}

.mm-rank-pip {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 12px;
    height: 12px;
    box-shadow: 0 0 0 2px var(--bg-darkest), 0 0 6px rgba(0,0,0,0.5);
}

.mm-rank-pip.rank-bronze { background: #a08060; }
.mm-rank-pip.rank-silver { background: #b0b0b0; }
.mm-rank-pip.rank-gold { background: var(--gold); }
.mm-rank-pip.rank-plat { background: #80c0d0; }
.mm-rank-pip.rank-diamond { background: #a0d0ff; }
.mm-rank-pip.rank-master { background: #c080e0; }
.mm-rank-pip.rank-gm { background: var(--gold-light); box-shadow: 0 0 0 2px var(--bg-darkest), 0 0 8px rgba(208,160,48,0.5); }

.mm-card-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mm-player-name {
    font-family: var(--font-pixel);
    font-size: 13px;
    color: var(--text-bright);
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm-player-rank {
    font-family: var(--font-pixel);
    font-size: 7px;
    letter-spacing: 2px;
}

.mm-player-rank.rank-bronze { color: #a08060; }
.mm-player-rank.rank-silver { color: #b0b0b0; }
.mm-player-rank.rank-gold { color: var(--gold); }
.mm-player-rank.rank-plat { color: #80c0d0; }
.mm-player-rank.rank-diamond { color: #a0d0ff; }
.mm-player-rank.rank-master { color: #c080e0; }
.mm-player-rank.rank-gm { color: var(--gold-light); text-shadow: 0 0 8px rgba(208,160,48,0.4); }

.mm-card-record-inline {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--font-pixel);
    font-size: 10px;
    margin-top: 2px;
}

.mm-rec-w { color: var(--green); }
.mm-rec-dash { color: var(--text-muted); font-size: 8px; }
.mm-rec-l { color: var(--red-light); }

.mm-card-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.mm-elo-num {
    font-family: var(--font-pixel);
    font-size: 22px;
    color: var(--gold-light);
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    line-height: 1;
    text-shadow: 0 0 12px rgba(208,160,48,0.2);
}

.mm-elo-label {
    font-family: var(--font-pixel);
    font-size: 6px;
    color: var(--text-muted);
    letter-spacing: 3px;
}

/* Stats bar at bottom of card */

.mm-card-stats {
    display: flex;
    background: rgba(0,0,0,0.25);
    border-top: 1px solid rgba(255,255,255,0.03);
}

.mm-stat-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 4px;
    position: relative;
}

.mm-stat-cell + .mm-stat-cell::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: rgba(255,255,255,0.04);
}

.mm-stat-val {
    font-family: var(--font-pixel);
    font-size: 12px;
    color: var(--text-bright);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.mm-val-w { color: var(--green); }
.mm-val-l { color: var(--red-light); }

.mm-stat-key {
    font-family: var(--font-pixel);
    font-size: 6px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

/* Card footer -- subtle branding */

.mm-card-footer {
    display: flex;
    justify-content: space-between;
    padding: 4px 12px;
    font-family: var(--font-pixel);
    font-size: 5px;
    color: rgba(208,160,48,0.18);
    letter-spacing: 2px;
    border-top: 1px solid rgba(208,160,48,0.04);
}

/* ---------- Enter arena button ---------- */

.mm-arena-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    cursor: pointer;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(120,90,28,0.45) 0%, rgba(80,58,16,0.4) 100%);
    box-shadow:
        inset 0 1px 0 rgba(208,160,48,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.25),
        0 3px 10px rgba(0,0,0,0.35);
    border: none;
    transition: box-shadow 0.2s, transform 0.1s, background 0.2s;
}

.mm-arena-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid rgba(208,160,48,0.25);
    pointer-events: none;
}

.mm-arena-btn::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(208,160,48,0.06);
    pointer-events: none;
}

.mm-arena-btn:hover {
    background:
        linear-gradient(180deg, rgba(130,98,30,0.5) 0%, rgba(90,66,20,0.45) 100%);
    box-shadow:
        inset 0 1px 0 rgba(208,160,48,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.25),
        0 3px 14px rgba(0,0,0,0.4),
        0 0 20px rgba(208,160,48,0.06);
}

.mm-arena-btn:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.3),
        0 1px 4px rgba(0,0,0,0.3);
}

.mm-arena-btn-shine {
    display: none;
}

.mm-arena-btn-content {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.mm-arena-icon {
    color: var(--gold-light);
    filter: drop-shadow(0 0 4px rgba(208,160,48,0.4));
}

.mm-arena-label {
    font-family: var(--font-pixel);
    font-size: 13px;
    color: var(--gold-light);
    letter-spacing: 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 0 10px rgba(208,160,48,0.15);
}

.mm-history-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(40,32,24,0.5);
    border: none;
    cursor: pointer;
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-dim);
    letter-spacing: 1px;
    transition: color 0.15s, background 0.15s;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        inset 0 -1px 0 rgba(0,0,0,0.2);
}

.mm-history-link:hover {
    color: var(--text-main);
    background: rgba(50,40,30,0.6);
}

/* ---------- Roster strip ---------- */

.mm-roster {
    padding: 6px 12px 6px;
}

.mm-roster-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--text-muted);
    letter-spacing: 2px;
}

.mm-roster-total {
    color: var(--text-muted);
    letter-spacing: 1px;
    font-size: 7px;
}

.mm-roster-strip {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.mm-roster-slot {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 40%, rgba(255,255,255,0.03) 0%, transparent 60%),
        rgba(0,0,0,0.3);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 2px 6px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}

.mm-roster-slot::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
}

.mm-rslot-common::after { background: var(--rarity-common); opacity: 0.4; }
.mm-rslot-uncommon::after { background: var(--rarity-uncommon); opacity: 0.5; }
.mm-rslot-rare::after { background: var(--rarity-rare); opacity: 0.6; }
.mm-rslot-epic::after { background: var(--rarity-epic); opacity: 0.7; }
.mm-rslot-legendary::after { background: var(--rarity-legendary); opacity: 0.8; }

.mm-rslot-legendary {
    box-shadow:
        inset 0 1px 0 rgba(208,160,48,0.1),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 2px 6px rgba(0,0,0,0.3),
        0 0 10px rgba(208,160,48,0.08);
}

.mm-rslot-epic {
    box-shadow:
        inset 0 1px 0 rgba(112,80,160,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 2px 6px rgba(0,0,0,0.3),
        0 0 8px rgba(112,80,160,0.06);
}

.mm-roster-sprite {
    image-rendering: pixelated;
}

.mm-roster-sprite canvas,
.mm-roster-sprite svg {
    image-rendering: pixelated;
}

/* ---------- Battle log ---------- */

.mm-log {
    padding: 0 12px;
}

.mm-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0 4px;
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--text-muted);
    letter-spacing: 2px;
}

.mm-log-all {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--text-muted);
    letter-spacing: 1px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 0;
}

.mm-log-all:hover { color: var(--gold-dark); }

.mm-log-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mm-log-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: rgba(30,24,18,0.6);
    position: relative;
    font-family: var(--font-pixel);
    font-size: 8px;
}

.mm-log-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
}

.mm-log-win::before { background: var(--green); }
.mm-log-loss::before { background: var(--red); }
.mm-log-draw::before { background: var(--text-muted); }

.mm-log-tag {
    font-size: 7px;
    letter-spacing: 1px;
    min-width: 28px;
}

.mm-log-win .mm-log-tag { color: var(--green); }
.mm-log-loss .mm-log-tag { color: var(--red-light); }
.mm-log-draw .mm-log-tag { color: var(--text-muted); }

.mm-log-opp {
    flex: 1;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm-log-elo {
    font-variant-numeric: tabular-nums;
}

.mm-log-win .mm-log-elo { color: var(--green); }
.mm-log-loss .mm-log-elo { color: var(--red-light); }

.mm-log-time {
    color: var(--text-muted);
    font-size: 7px;
}

/* ---------- Incoming Challenges ---------- */

.mm-invites {
    padding: 0 12px;
    margin-top: 4px;
}

.mm-invites-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--red-light);
    letter-spacing: 2px;
    padding: 4px 0;
}

.mm-invites-header svg {
    width: 14px;
    height: 14px;
}

.mm-invites-count {
    font-size: 7px;
    color: var(--bg-darkest);
    background: var(--red-light);
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.mm-invite-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 10px 12px;
    margin-top: 4px;
    background:
        linear-gradient(135deg, rgba(200, 60, 60, 0.06) 0%, transparent 50%),
        var(--bg-surface);
    border: 2px solid var(--red-dark);
    box-shadow:
        inset 0 1px 0 rgba(255, 100, 100, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.15);
}

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

.mm-invite-name {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm-invite-label {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--text-dim);
    margin-top: 2px;
}

.mm-invite-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.mm-invite-accept {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--bg-darkest);
    background: var(--green);
    border: 2px solid var(--green-dark);
    padding: 6px 14px;
    cursor: pointer;
    letter-spacing: 1px;
    min-height: 32px;
    transition: background 0.15s;
}

.mm-invite-accept:hover {
    background: var(--green-light);
}

.mm-invite-accept:active {
    transform: translate(1px, 1px);
}

.mm-invite-accept:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.mm-invite-decline {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-dim);
    background: none;
    border: 2px solid var(--border-dark);
    padding: 6px 8px;
    cursor: pointer;
    min-height: 32px;
    transition: color 0.15s, border-color 0.15s;
}

.mm-invite-decline:hover {
    color: var(--red-light);
    border-color: var(--red-dark);
}

.mm-invite-decline:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ---------- Invite Lobby ---------- */

.mm-lobby-vis {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 120px;
    margin: var(--spacing-md) 0;
}

.mm-lobby-icon {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    border: 2px solid var(--border-highlight);
    color: var(--gold);
    box-shadow: 0 0 20px rgba(208, 160, 48, 0.15);
}

.mm-lobby-status {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: var(--text-bright);
    text-align: center;
    padding: 0 var(--spacing-md);
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

.mm-lobby-sent {
    padding: 0 12px;
    margin-bottom: var(--spacing-md);
}

.mm-lobby-sent-label {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--text-muted);
    letter-spacing: 2px;
    padding: 4px 0;
}

.mm-lobby-sent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin-top: 4px;
    background: var(--bg-surface);
    border: 2px solid var(--border-dark);
}

.mm-lobby-sent-name {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--text-bright);
}

.mm-lobby-sent-status {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--gold);
    letter-spacing: 1px;
}

.mm-lobby-invite-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 24px);
    margin: 0 12px var(--spacing-sm);
    padding: 12px;
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-dim);
    background: none;
    border: 2px dashed var(--border-mid);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.15s, border-color 0.15s;
}

.mm-lobby-invite-btn:hover {
    color: var(--text-bright);
    border-color: var(--border-highlight);
}

.mm-lobby-invite-btn svg {
    width: 14px;
    height: 14px;
}

.mm-lobby-loading {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-dim);
    text-align: center;
    padding: var(--spacing-md);
}

/* --- Friend Picker Overlay --- */

.mm-friend-picker {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 60%;
    background: var(--bg-darkest);
    border-top: 2px solid var(--border-highlight);
    z-index: 10;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
}

.mm-friend-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-dim);
    letter-spacing: 1px;
    border-bottom: 2px solid var(--border-dark);
    flex-shrink: 0;
}

.mm-friend-picker-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
}

.mm-friend-picker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-dark);
}

.mm-friend-picker-row.sent {
    opacity: 0.5;
}

.mm-friend-picker-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mm-friend-picker-name {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--text-bright);
}

.mm-friend-picker-rating {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--text-muted);
}

.mm-friend-picker-sent {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--green);
    letter-spacing: 1px;
}

/* ---------- CRT Broadcast TV ---------- */

.mm-crt-block {
    margin-top: 0;
    padding-top: 12px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.mm-crt {
    margin: 0 14px;
    position: relative;
}

/* Corner notches -- pixel-art rounded corners via stair-step cuts */
.mm-crt-notch {
    position: absolute;
    width: 5px;
    height: 5px;
    background: var(--bg-darkest);
    z-index: 10;
}

.mm-crt-notch-tl { top: 0; left: 0; }
.mm-crt-notch-tr { top: 0; right: 0; }
.mm-crt-notch-bl { bottom: 0; left: 0; }
.mm-crt-notch-br { bottom: 0; right: 0; }

.mm-crt-notch::before,
.mm-crt-notch::after {
    content: '';
    position: absolute;
    background: var(--bg-darkest);
}

.mm-crt-notch-tl::before { width: 2px; height: 2px; top: 5px; left: 0; }
.mm-crt-notch-tl::after  { width: 2px; height: 2px; top: 0; left: 5px; }
.mm-crt-notch-tr::before { width: 2px; height: 2px; top: 5px; right: 0; }
.mm-crt-notch-tr::after  { width: 2px; height: 2px; top: 0; right: 5px; }
.mm-crt-notch-bl::before { width: 2px; height: 2px; bottom: 5px; left: 0; }
.mm-crt-notch-bl::after  { width: 2px; height: 2px; bottom: 0; left: 5px; }
.mm-crt-notch-br::before { width: 2px; height: 2px; bottom: 5px; right: 0; }
.mm-crt-notch-br::after  { width: 2px; height: 2px; bottom: 0; right: 5px; }

/* Bezel -- chunky TV casing with top bevel and depth */
.mm-crt-bezel {
    position: relative;
    background:
        linear-gradient(180deg, #342c26 0%, #241e18 30%, #1a1612 60%, #141210 100%);
    padding: 8px 8px 10px;
    box-shadow:
        inset 0 1px 0 rgba(90,72,54,0.35),
        inset 0 -1px 0 rgba(0,0,0,0.7),
        inset 1px 0 0 rgba(70,56,42,0.15),
        inset -1px 0 0 rgba(70,56,42,0.15),
        0 6px 20px rgba(0,0,0,0.5);
}

/* Inner bezel -- recessed screen surround */
.mm-crt-inner-bezel {
    background: #0a0806;
    padding: 3px;
    box-shadow:
        inset 0 2px 3px rgba(0,0,0,0.9),
        inset 0 -1px 0 rgba(40,32,24,0.15),
        inset 2px 0 2px rgba(0,0,0,0.5),
        inset -2px 0 2px rgba(0,0,0,0.5);
}

/* Screen -- the phosphor glass */
.mm-crt-screen {
    position: relative;
    background: #060a02;
    overflow: hidden;
}

/* Animated canvas -- fills the screen, shows the broadcast scene */
.mm-crt-canvas {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    filter: saturate(0.5) sepia(0.15) hue-rotate(50deg) brightness(0.75);
    animation: mm-crt-flicker 8s steps(3) infinite;
}

@keyframes mm-crt-flicker {
    0%, 96% { opacity: 1; }
    97% { opacity: 0.85; }
    98% { opacity: 1; }
    99% { opacity: 0.92; }
    100% { opacity: 1; }
}

/* HUD overlays on top of canvas */
.mm-crt-hud {
    position: absolute;
    top: 5px;
    left: 7px;
    right: 7px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
    pointer-events: none;
}

.mm-crt-hud-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mm-crt-live-pip {
    width: 4px;
    height: 4px;
    background: #c04030;
    box-shadow: 0 0 3px rgba(192,64,48,0.5);
    animation: mm-blink 1.5s steps(2) infinite;
}

.mm-crt-hud-text {
    font-family: var(--font-pixel);
    font-size: 5px;
    color: rgba(200,70,60,0.7);
    letter-spacing: 2px;
    text-shadow: 0 0 4px rgba(200,70,60,0.3);
}

.mm-crt-hud-right {
    font-family: var(--font-pixel);
    font-size: 5px;
    color: rgba(100,140,70,0.35);
    letter-spacing: 2px;
}

/* Ticker crawl at bottom of screen */
.mm-crt-ticker {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3px 7px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.7));
    z-index: 5;
    pointer-events: none;
}

.mm-crt-ticker-text {
    font-family: var(--font-pixel);
    font-size: 5px;
    color: rgba(130,170,85,0.55);
    letter-spacing: 1px;
    text-shadow: 0 0 3px rgba(100,140,60,0.25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Scanlines -- tight 2px period for authentic feel */
.mm-crt-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        180deg,
        transparent 0px,
        transparent 1px,
        rgba(0,0,0,0.18) 1px,
        rgba(0,0,0,0.18) 2px
    );
    pointer-events: none;
    z-index: 6;
}

/* Vignette -- CRT tube curvature + phosphor bloom */
.mm-crt-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(0,4,0,0.3) 65%, rgba(0,0,0,0.65) 100%);
    pointer-events: none;
    z-index: 7;
}

/* LED power light on bezel */
.mm-crt-led {
    position: absolute;
    bottom: 5px;
    right: 12px;
    width: 3px;
    height: 3px;
    background: #a03020;
    box-shadow: 0 0 4px rgba(160,48,32,0.5);
    animation: mm-blink 3s steps(2) infinite;
}

/* Fade overlay -- covers most of the TV, only top edge peeks through */
.mm-crt-fade {
    height: 140px;
    margin-top: -140px;
    position: relative;
    z-index: 9;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(12,10,8,0.65) 10%,
        rgba(12,10,8,0.92) 25%,
        var(--bg-darkest) 42%
    );
}

/* ---------- Bottom actions (inside CRT block, over fade) ---------- */

.mm-bottom-actions {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 12px 12px;
    margin-top: auto;
}

/* ---------- Lore quote (overlaps into CRT fade transition) ---------- */

.mm-quote {
    margin-top: -80px;
    padding: 0 20px 24px;
    text-align: center;
    position: relative;
    z-index: 10;
}

.mm-quote-text {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: rgba(168,128,80,0.3);
    line-height: 2.2;
}

.mm-quote-src {
    font-family: var(--font-pixel);
    font-size: 6px;
    color: rgba(138,120,96,0.2);
    margin-top: 4px;
    letter-spacing: 1px;
}

/* ---------- Not-ready gate ---------- */

.mm-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    text-align: center;
    gap: 12px;
    padding: 24px;
}

.mm-gate-emblem {
    color: var(--text-muted);
    opacity: 0.5;
}

.mm-gate-title {
    font-family: var(--font-pixel);
    font-size: 13px;
    color: var(--text-dim);
    letter-spacing: 4px;
}

.mm-gate-divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-mid), transparent);
    margin: 4px 0;
}

.mm-gate-req {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--text-muted);
    line-height: 2;
    max-width: 260px;
}

.mm-gate-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.mm-gate-bar {
    width: 120px;
    height: 6px;
    background: rgba(0,0,0,0.4);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}

.mm-gate-bar-fill {
    height: 100%;
    background: var(--green);
    box-shadow: 0 0 6px rgba(104,168,88,0.3);
    transition: width 0.3s ease;
}

.mm-gate-count {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.mm-gate-btn {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--green);
    background: none;
    border: none;
    cursor: pointer;
    letter-spacing: 1px;
    padding: 8px 16px;
    margin-top: 8px;
    transition: color 0.15s;
}

.mm-gate-btn:hover { color: var(--green-light); }

/* ---------- Searching state ---------- */

.mm-searching {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 60vh;
    gap: 24px;
    text-align: center;
    padding: 24px;
}

.mm-search-vis {
    width: 100px;
    height: 100px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mm-search-pulse {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(208,160,48,0.15);
    animation: mm-pulse-ring 2.5s ease-out infinite;
}

.mm-search-pulse-2 {
    animation-delay: 1.25s;
}

@keyframes mm-pulse-ring {
    0% { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

.mm-search-center {
    color: var(--gold);
    animation: mm-search-breathe 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes mm-search-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.mm-search-label {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 2px;
}

.mm-search-cancel {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--text-muted);
    letter-spacing: 1px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 12px;
}

.mm-search-cancel:hover { color: var(--text-dim); }

/* ---------- Responsive ---------- */

@media (min-width: 640px) {
    .mm {
        max-width: 720px;
        margin: 0 auto;
    }

    .mm-player {
        padding: 18px 20px;
    }

    .mm-arena-label {
        font-size: 15px;
        letter-spacing: 5px;
    }

    .mm-player-name {
        font-size: 15px;
    }

    .mm-elo-num {
        font-size: 24px;
    }

    .mm-roster-slot {
        width: 64px;
        height: 64px;
    }
}

@keyframes retro-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ==========================================================================
   COMPETITION VIEW
   Fixed to the viewport. CSS Grid: header (auto) | content (1fr) | hud (auto).
   ========================================================================== */

.competition-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    background: var(--bg-darkest);
    color: var(--text-main);
}

/* The middle section: stretches to fill between header and hud */
#competition-content {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-darkest);
}

/* Screens that need scrolling get their own scroll container */
.roster-selection,
.round-selection,
.round-summary,
.waiting-opponent,
.judging-wait-screen,
.post-animation-wait,
.results-screen {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.roster-selection::-webkit-scrollbar,
.round-selection::-webkit-scrollbar,
.round-summary::-webkit-scrollbar,
.results-screen::-webkit-scrollbar {
    width: 6px;
}

.roster-selection::-webkit-scrollbar-track,
.round-selection::-webkit-scrollbar-track,
.round-summary::-webkit-scrollbar-track,
.results-screen::-webkit-scrollbar-track {
    background: var(--bg-darkest);
}

.roster-selection::-webkit-scrollbar-thumb,
.round-selection::-webkit-scrollbar-thumb,
.round-summary::-webkit-scrollbar-thumb,
.results-screen::-webkit-scrollbar-thumb {
    background: var(--border-mid);
}

/* ==========================================================================
   ROSTER PHASE -- Simplified chrome: hide scores, round dots, HUD bar
   During roster selection the player hasn't started yet, so strip clutter.
   ========================================================================== */

.phase-roster .competition-scores,
.phase-roster .round-dots,
.phase-roster .competition-header-right {
    display: none;
}

.phase-roster .competition-header {
    justify-content: center;
    padding: 10px 16px 6px;
}

.phase-roster .competition-header-left {
    align-items: center;
}

.phase-roster .competition-title {
    text-align: center;
}

.phase-roster .competition-hud {
    display: none;
}

/* ==========================================================================
   COMPETITION HEADER -- cinematic top bar
   ========================================================================== */

.competition-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 16px 8px;
    background: linear-gradient(180deg, rgba(12,10,8,0.95) 0%, rgba(12,10,8,0.8) 80%, transparent 100%);
    position: relative;
    z-index: 10;
}

.competition-header.hidden-during-playback {
    display: none;
}

.competition-header-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.competition-title {
    font-family: var(--font-pixel);
    font-size: 14px;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

@media (min-width: 600px) {
    .competition-title {
        font-size: 16px;
    }
}

.competition-scores {
    display: flex;
    gap: 6px;
}

.score-box {
    font-family: var(--font-pixel);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    padding: 4px 14px;
    min-width: 64px;
    text-align: center;
    border: 2px solid;
    background: rgba(0,0,0,0.6);
}

.score-box-you {
    color: var(--green);
    border-color: var(--green-dark);
    text-shadow: 0 0 8px rgba(104,168,88,0.4);
}

.score-box-opp {
    color: var(--red);
    border-color: #5a2828;
    text-shadow: 0 0 8px rgba(168,72,56,0.4);
}

.competition-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.round-info-btn {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid var(--border-dark);
    padding: 6px 12px;
    background: rgba(0,0,0,0.5);
    cursor: pointer;
}

.round-info-btn:hover {
    color: var(--text-bright);
    border-color: var(--border-mid);
}

.menu-btn {
    font-family: var(--font-pixel);
    font-size: 14px;
    color: var(--text-dim);
    border: 2px solid var(--border-dark);
    padding: 4px 8px;
    background: rgba(0,0,0,0.5);
    cursor: pointer;
    line-height: 1;
}

.menu-btn:hover {
    color: var(--text-bright);
    border-color: var(--border-mid);
}

/* Round indicator dots in header */
.round-dots {
    display: flex;
    gap: 4px;
    margin-top: 2px;
}

.round-dot {
    width: 8px;
    height: 8px;
    background: var(--border-dark);
    border: 1px solid var(--border-mid);
}

.round-dot.active {
    background: var(--green);
    border-color: var(--green-light);
    box-shadow: 0 0 4px rgba(104,168,88,0.5);
}

.round-dot.completed {
    background: var(--green-dark);
    border-color: var(--green);
}

/* ==========================================================================
   BOTTOM HUD BAR -- player info, plant thumbnails, action buttons
   ========================================================================== */

.competition-hud {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: linear-gradient(0deg, rgba(12,10,8,0.95) 0%, rgba(12,10,8,0.85) 80%, transparent 100%);
    position: relative;
    z-index: 10;
}

.hud-player {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hud-avatar {
    width: 40px;
    height: 40px;
    background: var(--bg-surface);
    border: 2px solid var(--border-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.hud-avatar svg {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

.hud-player-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hud-player-name {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.hud-player-elo {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hud-plants {
    display: flex;
    gap: 6px;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
}

.hud-plants::-webkit-scrollbar {
    display: none;
}

.hud-plant-thumb {
    width: 44px;
    height: 44px;
    background: rgba(0,0,0,0.5);
    border: 2px solid var(--border-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    image-rendering: pixelated;
}

.hud-plant-thumb svg {
    width: 36px;
    height: 36px;
    image-rendering: pixelated;
}

.hud-plant-thumb.empty {
    border-style: dashed;
    opacity: 0.4;
}

.hud-actions {
    display: flex;
    gap: 6px;
}

.hud-action-btn {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 12px;
    border: 2px solid var(--border-mid);
    background: rgba(30,24,18,0.8);
    cursor: pointer;
    white-space: nowrap;
}

.hud-action-btn:hover {
    border-color: var(--border-light);
    color: var(--text-bright);
}

.hud-action-btn.btn-accent {
    background: rgba(168,72,56,0.3);
    border-color: var(--red);
    color: var(--red-light);
}

.hud-action-btn.btn-accent:hover {
    background: rgba(168,72,56,0.5);
}

/* ==========================================================================
   JUDGE PANEL -- modal overlay triggered by ROUND INFO
   ========================================================================== */

.judge-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.judge-modal {
    background: var(--bg-surface);
    border: 2px solid var(--border-mid);
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 16px;
}

.judge-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.judge-modal-title {
    font-family: var(--font-pixel);
    font-size: 12px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.judge-modal-close {
    font-family: var(--font-pixel);
    font-size: 14px;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
}

.judge-modal-close:hover {
    color: var(--text-bright);
}

.judge-card {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: var(--bg-dark);
    border: 2px solid var(--border-dark);
    margin-bottom: 8px;
}

.judge-card:last-child {
    margin-bottom: 0;
}

.judge-card-left {
    flex-shrink: 0;
}

.judge-card-portrait {
    width: 48px;
    height: 48px;
    background: var(--bg-darkest);
    border: 2px solid var(--border-dark);
    image-rendering: pixelated;
    display: flex;
    align-items: center;
    justify-content: center;
}

.judge-card-portrait svg {
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
}

.judge-card-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.judge-card-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.judge-card-name {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.judge-card-style {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    border: 1px solid var(--border-dark);
    padding: 1px 4px;
}

.judge-card-dir {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.judge-card-prefs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
}

.pref-tag {
    font-family: var(--font-pixel);
    font-size: 9px;
    padding: 2px 5px;
    text-transform: uppercase;
    border: 1px solid;
}

.pref-like {
    background: rgba(104,168,88,0.15);
    border-color: var(--green);
    color: var(--green-light);
}

.pref-dislike {
    background: rgba(168,72,56,0.1);
    border-color: var(--red);
    color: var(--red-light);
}

.judge-card-quote {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 2px;
    padding-left: 6px;
    border-left: 2px solid var(--border-dark);
}

/* ==========================================================================
   PLANT SELECTION GRID (legacy)
   ========================================================================== */

.plant-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 10px 0;
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.plant-selection-grid::-webkit-scrollbar {
    width: 6px;
}

.plant-selection-grid::-webkit-scrollbar-track {
    background: var(--bg-darkest);
}

.plant-selection-grid::-webkit-scrollbar-thumb {
    background: var(--border-mid);
}

/* ==========================================================================
   ROSTER SELECTION -- Judge panel, plant grid, selection flow
   ========================================================================== */

/* ==========================================================================
   ROSTER DRAFT BOARD -- Full rework: draft strips, judge drawer, mobile-first
   ========================================================================== */

.roster-selection {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* ---------- Header ---------- */
.roster-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    flex-shrink: 0;
    border-bottom: 2px solid var(--border-dark);
    background: linear-gradient(180deg, var(--bg-darkest) 60%, rgba(12,10,8,0.7));
    gap: 6px 10px;
}

.roster-header-player {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.roster-player-avatar {
    width: 28px;
    height: 28px;
    background: var(--bg-surface);
    border: 2px solid var(--border-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.roster-player-avatar img {
    image-rendering: pixelated;
}

.roster-header-player-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.roster-header-player-name {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.roster-header-player-elo {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.roster-header-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
}

.roster-title {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(208,160,48,0.3);
}

.roster-counter {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

.roster-counter-text {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: var(--text-bright);
    letter-spacing: 1px;
    white-space: nowrap;
}

.roster-counter-slots {
    display: flex;
    gap: 2px;
}

.roster-slot {
    width: 10px;
    height: 10px;
    background: var(--bg-darkest);
    border: 2px solid var(--border-dark);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.roster-slot.slot-filled {
    background: var(--green);
    border-color: var(--green);
    box-shadow: 0 0 4px rgba(104,168,88,0.5);
}

/* ---------- Draft list (vertical scroll only) ---------- */
.roster-draft-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0;
}

.roster-draft-list::-webkit-scrollbar {
    width: 4px;
}

.roster-draft-list::-webkit-scrollbar-thumb {
    background: var(--border-mid);
}

/* Section dividers for match quality grouping */
.roster-section-label {
    font-family: var(--font-pixel);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 12px 16px 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.roster-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-dark);
}

.roster-section-label.section-strong {
    color: var(--green);
}

.roster-section-label.section-good {
    color: var(--gold);
}

.roster-section-label.section-neutral {
    color: var(--text-dim);
}

.roster-section-label.section-weak {
    color: var(--red);
}

/* ---------- Draft Strip -- each plant is a full-width row ---------- */
.draft-strip {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0 10px;
    padding: 10px 12px;
    margin: 3px 6px;
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    background: var(--bg-surface);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, opacity 0.2s;
    overflow: visible;
}

.draft-strip:active {
    transform: scale(0.98);
}

/* Color accent bar on left edge based on match quality */
.draft-strip::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    transition: width 0.15s, box-shadow 0.15s;
}

.draft-strip.match-strong::before {
    background: var(--green);
    box-shadow: 0 0 8px rgba(104,168,88,0.4);
}

.draft-strip.match-good::before {
    background: var(--gold);
    box-shadow: 0 0 8px rgba(208,160,48,0.3);
}

.draft-strip.match-weak::before {
    background: var(--red);
    box-shadow: 0 0 6px rgba(168,72,56,0.3);
}

/* Large animated plant sprite -- the hero */
.draft-strip-sprite {
    grid-row: 1 / -1;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    image-rendering: pixelated;
    position: relative;
    align-self: center;
}

.draft-strip-sprite canvas {
    image-rendering: pixelated;
}

/* Top row: name + match badge inline */
.draft-strip-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.draft-strip-name-wrap {
    min-width: 0;
    flex: 1;
}

.draft-strip-name {
    font-family: var(--font-pixel);
    font-size: 12px;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.draft-strip-type {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 1px;
}

/* Match quality badge -- inline with name */
.draft-strip-match {
    flex-shrink: 0;
    font-family: var(--font-pixel);
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 6px;
    border: 1px solid;
    white-space: nowrap;
    line-height: 1.3;
    align-self: flex-start;
    margin-top: 2px;
    overflow: visible;
}

.draft-strip.match-strong .draft-strip-match {
    color: var(--green);
    border-color: rgba(104,168,88,0.5);
    background: rgba(104,168,88,0.15);
}

.draft-strip.match-good .draft-strip-match {
    color: var(--gold);
    border-color: rgba(208,160,48,0.4);
    background: rgba(208,160,48,0.1);
}

.draft-strip.match-weak .draft-strip-match {
    color: var(--red);
    border-color: rgba(168,72,56,0.4);
    background: rgba(168,72,56,0.1);
}

.draft-strip.match-neutral .draft-strip-match {
    display: none;
}

/* Bottom details area */
.draft-strip-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding-top: 4px;
}

/* Stats row */
.draft-strip-stats {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}

.draft-stat {
    font-family: var(--font-pixel);
    font-size: 8px;
    padding: 2px 5px;
    border: 1px solid var(--border-dark);
    background: rgba(0,0,0,0.3);
    white-space: nowrap;
}

.draft-stat-va {
    color: var(--gold-light);
    border-color: rgba(208,160,48,0.3);
}

.draft-stat-ar {
    color: var(--green);
    border-color: rgba(104,168,88,0.3);
}

.draft-stat-rarity {
    text-transform: uppercase;
    letter-spacing: 1px;
}

.draft-stat-rarity.rarity-common { color: var(--text-muted); border-color: var(--border-dark); }
.draft-stat-rarity.rarity-uncommon { color: #68a858; border-color: rgba(104,168,88,0.4); }
.draft-stat-rarity.rarity-rare { color: #4070a0; border-color: rgba(64,112,160,0.4); }
.draft-stat-rarity.rarity-epic { color: #7050a0; border-color: rgba(112,80,160,0.4); }
.draft-stat-rarity.rarity-legendary { color: var(--gold); border-color: rgba(208,160,48,0.5); }

/* Per-judge opinion indicators */
.draft-strip-judges {
    display: flex;
    gap: 4px;
    align-items: center;
}

.draft-judge-dot {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 5px;
    border: 1px solid;
    font-family: var(--font-pixel);
    font-size: 7px;
    text-transform: uppercase;
    white-space: nowrap;
}

.draft-judge-dot.judge-loves {
    color: var(--green);
    border-color: rgba(104,168,88,0.4);
    background: rgba(104,168,88,0.1);
}

.draft-judge-dot.judge-likes {
    color: var(--gold-light);
    border-color: rgba(208,160,48,0.3);
    background: rgba(208,160,48,0.05);
}

.draft-judge-dot.judge-neutral {
    color: var(--text-dim);
    border-color: var(--border-dark);
}

.draft-judge-dot.judge-dislikes {
    color: var(--red);
    border-color: rgba(168,72,56,0.4);
    background: rgba(168,72,56,0.1);
}

.draft-judge-swatch {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
}

/* Effects pills */
.draft-strip-effects {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.draft-effect-pill {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 1px 5px;
    border: 1px solid var(--border-dark);
    background: rgba(0,0,0,0.2);
}

/* Stars */
.draft-strip-stars {
    display: flex;
    gap: 1px;
}

.draft-strip-stars .star-icon {
    width: 10px;
    height: 10px;
    display: inline-flex;
}

/* ---------- Selected state ---------- */
.draft-strip.selected {
    border-color: var(--green);
    background: rgba(104,168,88,0.12);
    box-shadow: inset 0 0 0 1px rgba(104,168,88,0.3), 0 0 20px rgba(104,168,88,0.2);
}

.draft-strip.selected::before {
    width: 6px;
    background: var(--green) !important;
    box-shadow: 0 0 16px rgba(104,168,88,0.7) !important;
}

.draft-strip.selected .draft-strip-name {
    color: var(--green);
}

.draft-strip-check {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    background: var(--green);
    border: 2px solid rgba(255,255,255,0.4);
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(104,168,88,0.6);
    z-index: 2;
}

.draft-strip.selected .draft-strip-check {
    display: flex;
}

.draft-strip-check svg {
    color: var(--bg-darkest);
}

.draft-strip-check svg {
    width: 12px;
    height: 12px;
    fill: var(--bg-darkest);
}

@keyframes draft-select-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.draft-strip.select-pulse {
    animation: draft-select-pulse 0.2s ease-out;
}

/* Roster full — dim unselected */
.roster-full .draft-strip:not(.selected) {
    opacity: 0.25;
    pointer-events: none;
}

/* ---------- Bottom action bar ---------- */
.roster-bottom-bar {
    flex-shrink: 0;
    display: flex;
    gap: 0;
    border-top: 2px solid var(--border-dark);
    background: var(--bg-darkest);
}

.roster-bar-btn {
    font-family: var(--font-pixel);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px 12px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.roster-judges-toggle {
    color: var(--gold);
    background: rgba(208,160,48,0.08);
    border-right: 2px solid var(--border-dark);
}

.roster-judges-toggle:active {
    background: rgba(208,160,48,0.2);
}

.roster-strategy-btn {
    color: var(--red-light, #c86048);
    background: rgba(168,72,56,0.08);
    border-left: 2px solid var(--border-dark);
}

.roster-strategy-btn:active {
    background: rgba(168,72,56,0.2);
}

.roster-submit-btn {
    flex: 1;
    font-family: var(--font-pixel);
    font-size: 11px;
    min-height: 48px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: background 0.15s, color 0.15s;
}

.roster-submit-btn:disabled {
    background: var(--bg-dark);
    color: var(--text-dim);
    cursor: default;
}

.roster-submit-btn:not(:disabled) {
    background: var(--green);
    color: var(--bg-darkest);
}

.roster-submit-btn:not(:disabled):active {
    background: #7cc868;
}

/* ---------- Judge drawer (slides up from bottom) ---------- */
.roster-judge-drawer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--bg-darkest);
    border-top: 2px solid var(--gold-dark);
    transform: translateY(100%);
    transition: transform 0.25s ease-out;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
}

.roster-judge-drawer.drawer-visible {
    transform: translateY(0);
}

.roster-judge-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    flex-shrink: 0;
}

.roster-judge-drawer-title {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(208,160,48,0.3);
}

.roster-judge-drawer-close {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-dim);
    text-transform: uppercase;
    padding: 6px 10px;
    border: 2px solid var(--border-dark);
    background: var(--bg-surface);
    cursor: pointer;
}

.roster-judge-drawer-close:active {
    border-color: var(--border-mid);
}

.roster-judge-drawer-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Judge cards inside drawer */
.roster-judge-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg-surface);
    border: 2px solid var(--border-dark);
    border-left: 4px solid;
}

.roster-judge-portrait {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    border: 2px solid var(--border-dark);
}

.roster-judge-portrait img {
    image-rendering: pixelated;
}

.roster-judge-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.roster-judge-name {
    font-family: var(--font-pixel);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.roster-judge-style {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.roster-judge-focus {
    display: flex;
    gap: 6px;
    align-items: center;
}

.roster-judge-focus-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-pixel);
    font-size: 7px;
    text-transform: uppercase;
}

.roster-judge-focus-label {
    color: var(--text-dim);
    min-width: 28px;
}

.roster-judge-focus-track {
    width: 60px;
    height: 6px;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--border-dark);
    position: relative;
    overflow: hidden;
}

.roster-judge-focus-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    transition: width 0.4s ease-out;
}

.roster-judge-focus-fill.focus-visual {
    background: var(--gold);
}

.roster-judge-focus-fill.focus-aroma {
    background: var(--green);
}

.roster-judge-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.roster-pref-like {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--green);
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid rgba(104,168,88,0.4);
    background: rgba(104,168,88,0.1);
}

.roster-pref-dislike {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--red);
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid rgba(168,72,56,0.4);
    background: rgba(168,72,56,0.1);
}

/* Judge drawer backdrop */
.roster-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

.roster-drawer-backdrop.backdrop-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ---------- Desktop (900px+) ---------- */
@media (min-width: 900px) {
    .roster-header {
        padding: 12px 20px;
    }

    .roster-title {
        font-size: 14px;
        letter-spacing: 3px;
    }

    .roster-counter-text {
        font-size: 14px;
    }

    .roster-slot {
        width: 14px;
        height: 14px;
    }

    .draft-strip {
        grid-template-columns: 120px 1fr;
        margin: 3px 16px;
        padding: 12px 16px;
        gap: 0 16px;
    }

    .draft-strip-sprite {
        width: 120px;
        height: 120px;
    }

    .draft-strip-name {
        font-size: 15px;
    }

    .draft-strip-type {
        font-size: 9px;
    }

    .draft-stat {
        font-size: 10px;
        padding: 3px 8px;
    }

    .draft-judge-dot {
        font-size: 8px;
        padding: 2px 6px;
    }

    .draft-strip-match {
        font-size: 9px;
        padding: 3px 10px;
    }

    .roster-submit-btn {
        font-size: 14px;
    }

    .roster-judge-drawer {
        max-height: 60vh;
    }

    .roster-judge-drawer-body {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0 16px 16px;
    }

    .roster-judge-card {
        flex: 1 1 280px;
        max-width: 400px;
    }

    .roster-judge-portrait {
        width: 88px;
        height: 88px;
    }

    .roster-judge-name {
        font-size: 14px;
    }

    .roster-judge-focus-track {
        width: 80px;
    }

    .roster-pref-like,
    .roster-pref-dislike {
        font-size: 9px;
        padding: 2px 8px;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .draft-strip,
    .roster-judge-drawer,
    .roster-drawer-backdrop,
    .roster-slot,
    .roster-judges-toggle-arrow {
        transition-duration: 0.01s !important;
    }

    .draft-strip.select-pulse {
        animation: none;
    }
}

/* ==========================================================================
   SELECTION SCREEN V2 -- Judge bar, selection cards, score estimation
   ========================================================================== */

/* --- Header layout --- */
.selection-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- Judge quick-reference bar --- */
.judge-bar {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.judge-bar::-webkit-scrollbar {
    display: none;
}

.judge-bar-item {
    flex: 1;
    min-width: 120px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.4);
    border: 2px solid var(--border-dark);
    border-top: 3px solid;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.judge-bar-name {
    font-family: var(--font-pixel);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.judge-bar-dir {
    font-size: 12px;
    opacity: 0.6;
}

.judge-bar-weights {
    display: flex;
    gap: 8px;
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.jw-visual {
    color: var(--gold);
}

.jw-aroma {
    color: #a8d8a8;
}

.judge-bar-prefs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.jp-like {
    font-family: var(--font-pixel);
    font-size: 8px;
    text-transform: uppercase;
    padding: 1px 4px;
    background: rgba(104,168,88,0.15);
    border: 1px solid var(--green);
    color: var(--green-light);
}

.jp-dislike {
    font-family: var(--font-pixel);
    font-size: 8px;
    text-transform: uppercase;
    padding: 1px 4px;
    background: rgba(168,72,56,0.1);
    border: 1px solid var(--red);
    color: var(--red-light);
}

/* --- Estimated score panel --- */
.est-score-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 14px;
    background: rgba(0,0,0,0.5);
    border: 2px solid var(--border-dark);
}

.est-label {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.est-value {
    font-family: var(--font-pixel);
    font-size: 16px;
    color: var(--text-bright);
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

.est-value.est-good {
    color: var(--green-light);
    text-shadow: 0 0 6px rgba(104,168,88,0.4);
}

/* --- Shelf top row (label + walk hint) --- */
.shelf-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.shelf-walk-hint {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Slot score estimate --- */
.slot-score-est {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--green-light);
    text-align: center;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    min-height: 12px;
}

/* --- Selection plant grid (v2) --- */
.sel-plant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
    padding: 8px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sel-plant-grid::-webkit-scrollbar {
    width: 6px;
}

.sel-plant-grid::-webkit-scrollbar-track {
    background: var(--bg-darkest);
}

.sel-plant-grid::-webkit-scrollbar-thumb {
    background: var(--border-mid);
}

/* --- Selection card --- */
.sel-card {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 10px;
    background: rgba(40,30,20,0.6);
    border: 2px solid var(--border-dark);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    overflow: visible;
}

.sel-card:hover {
    border-color: var(--border-mid);
    background: rgba(50,38,26,0.7);
}

.sel-card.selected {
    border-color: var(--green);
    background: rgba(104,168,88,0.08);
}

.sel-card.used {
    opacity: 0.4;
    pointer-events: none;
}

.sel-card-sprite {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    border: 2px solid var(--border-dark);
    image-rendering: pixelated;
}

.sel-card-sprite svg {
    width: 72px;
    height: 72px;
    image-rendering: pixelated;
}

.sel-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sel-card-top {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.sel-card-name {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sel-card-rarity {
    font-family: var(--font-pixel);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.sel-card-stats {
    display: flex;
    gap: 8px;
    font-family: var(--font-pixel);
    font-size: 10px;
    flex-wrap: wrap;
}

.stat-visual {
    color: var(--gold);
}

.stat-aroma {
    color: #a8d8a8;
}

.stat-est {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* --- Judge preference dots --- */
.sel-card-judges {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.jdots-label {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 2px;
}

.judge-dot {
    width: 10px;
    height: 10px;
    border: 2px solid;
    flex-shrink: 0;
}

.jdot-great {
    background: var(--green);
}

.jdot-good {
    background: rgba(104,168,88,0.5);
}

.jdot-neutral {
    background: rgba(255,255,255,0.1);
}

.jdot-weak {
    background: rgba(168,72,56,0.4);
}

.jdot-bad {
    background: var(--red);
}

/* --- Match tag (Strong/Good/Weak pick) --- */
.sel-match-tag {
    font-family: var(--font-pixel);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border: 1px solid;
    margin-left: 4px;
    white-space: nowrap;
}

.sel-match-tag.match-strong {
    color: var(--green-light);
    border-color: var(--green);
    background: rgba(104,168,88,0.15);
}

.sel-match-tag.match-good {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(200,176,80,0.1);
}

.sel-match-tag.match-weak {
    color: var(--red-light);
    border-color: var(--red);
    background: rgba(168,72,56,0.1);
}

/* --- Effect pills on selection cards --- */
.sel-card-effects {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.sel-effect-pill {
    font-family: var(--font-pixel);
    font-size: 8px;
    padding: 2px 5px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-dark);
    color: var(--text-muted);
    text-transform: uppercase;
    cursor: help;
}

.sel-effect-pill:hover {
    border-color: var(--border-mid);
    color: var(--text-main);
}

/* --- Slot badge on selected cards --- */
.selection-slot-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--bg-darkest);
    background: var(--green);
    padding: 3px 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 1;
    border: 2px solid var(--bg-darkest);
}

.plant-card {
    background: rgba(40,30,20,0.6);
    border: 2px solid var(--border-dark);
    padding: 10px;
    cursor: pointer;
    position: relative;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    transition: border-color 0.15s;
}

.plant-card:hover {
    border-color: var(--border-mid);
}

.plant-card.selected {
    border-color: var(--green);
    background: rgba(104,168,88,0.08);
}

.plant-card.used {
    opacity: 0.4;
    pointer-events: none;
}

.plant-card.used .plant-used-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-pixel);
    font-size: 12px;
    color: var(--red);
    letter-spacing: 3px;
    text-transform: uppercase;
    background: rgba(12,10,8,0.7);
}

.plant-card.used .plant-used-overlay span {
    background: rgba(12,10,8,0.9);
    padding: 2px 8px;
    border: 1px solid var(--red);
}

/* Rarity border colors */
.rarity-border-common { border-color: var(--rarity-common); }
.rarity-border-uncommon { border-color: var(--rarity-uncommon); }
.rarity-border-rare { border-color: var(--rarity-rare); }
.rarity-border-epic { border-color: var(--rarity-epic); }
.rarity-border-legendary { border-color: var(--rarity-legendary); }

.selection-order-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green);
    color: var(--bg-darkest);
    font-family: var(--font-pixel);
    font-size: 9px;
    font-weight: bold;
    border: 2px solid var(--bg-darkest);
    z-index: 1;
}

.plant-card-sprite {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    border: 2px solid var(--border-dark);
}

.plant-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.plant-icon-wrapper svg {
    display: block;
    image-rendering: pixelated;
}

.plant-card-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.plant-card-name {
    font-family: var(--font-pixel);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.plant-card-stats {
    display: flex;
    gap: 6px;
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.rarity-tag {
    font-family: var(--font-pixel);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 4px;
    border: 1px solid;
}

.rarity-tag.rarity-common { color: var(--rarity-common); border-color: var(--rarity-common); }
.rarity-tag.rarity-uncommon { color: var(--rarity-uncommon); border-color: var(--rarity-uncommon); }
.rarity-tag.rarity-rare { color: var(--rarity-rare); border-color: var(--rarity-rare); }
.rarity-tag.rarity-epic { color: var(--rarity-epic); border-color: var(--rarity-epic); }
.rarity-tag.rarity-legendary { color: var(--rarity-legendary); border-color: var(--rarity-legendary); }

.va-tag {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--gold);
}

.aroma-tag {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: #a8d8a8;
}

.strategy-plant-aroma {
    font-size: 11px;
    color: #a8d8a8;
    margin-left: 4px;
}

.plant-card-effects {
    display: flex;
    gap: 4px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.effect-pill {
    font-family: var(--font-pixel);
    font-size: 9px;
    padding: 2px 5px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-dark);
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Rarity color classes */
.rarity-common { color: var(--rarity-common); }
.rarity-uncommon { color: var(--rarity-uncommon); }
.rarity-rare { color: var(--rarity-rare); }
.rarity-epic { color: var(--rarity-epic); }
.rarity-legendary { color: var(--rarity-legendary); }

.plant-va {
    font-variant-numeric: tabular-nums;
}

.plant-stars {
    display: inline-flex;
    gap: 1px;
}

.star-icon {
    color: var(--border-mid);
}

.star-icon.filled {
    color: var(--gold);
}

/* ==========================================================================
   ROSTER / ROUND SELECTION
   ========================================================================== */

.roster-selection,
.round-selection {
    padding: 12px 16px;
}

.round-selection-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.round-title {
    display: flex;
    flex-direction: column;
}

.round-title-label {
    font-family: var(--font-pixel);
    font-size: 14px;
    color: var(--gold);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.round-title-sub {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

.shelf-preview-section {
    margin-bottom: 12px;
}

.shelf-label {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 6px;
    text-align: center;
}

.shelf-slot .slot-label {
    font-family: var(--font-pixel);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shelf-slot .slot-num {
    font-family: var(--font-pixel);
    font-size: 10px;
    display: block;
    opacity: 0.5;
}

.selection-actions {
    padding: 16px 0;
    display: flex;
    justify-content: center;
}

.btn-lock-in {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 36px;
    font-family: var(--font-pixel);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    background: rgba(30,24,18,0.8);
    border: 2px solid var(--border-mid);
    cursor: pointer;
}

.btn-lock-in:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-lock-in.ready {
    color: var(--bg-darkest);
    background: var(--green);
    border-color: var(--green-light);
}

.btn-lock-in:active {
    transform: translate(1px, 1px);
}

.lock-count {
    font-family: var(--font-pixel);
    font-size: 11px;
    opacity: 0.7;
}

/* ==========================================================================
   SHELF PREVIEW -- slots
   ========================================================================== */

.shelf-preview-wrapper {
    margin-bottom: 8px;
}

.shelf-preview {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.shelf-slot {
    position: relative;
    width: 56px;
    height: 56px;
    border: 2px solid var(--border-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--text-muted);
    background: rgba(0,0,0,0.3);
}

.shelf-slot.your-slot {
    border-color: var(--green);
    color: var(--green);
}

.shelf-slot.opp-slot {
    border-color: var(--red);
    color: var(--red);
}

.shelf-slot.empty-slot {
    animation: slot-blink 2s steps(2) infinite;
}

.shelf-slot .slot-plant-preview {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.shelf-slot .slot-plant-preview svg {
    image-rendering: pixelated;
    width: 36px;
    height: 36px;
}

.shelf-slot.slot-filled .slot-label,
.shelf-slot.slot-filled .slot-num {
    opacity: 0;
}

.shelf-slot.slot-filled {
    background: rgba(0,0,0,0.5);
}

@keyframes slot-blink {
    0%, 100% { border-color: var(--border-dark); }
    50% { border-color: var(--border-mid); }
}

/* ==========================================================================
   CANVAS CONTAINER -- fills available space
   ========================================================================== */

.round-playback {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-darkest);
}

.round-playback-title {
    text-align: center;
    padding: 8px 0 4px;
}

.round-playback-label {
    font-family: var(--font-pixel);
    font-size: 14px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.round-playback-sub {
    display: block;
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 2px;
}

.canvas-container {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-darkest);
    position: relative;
}

.competition-canvas {
    display: block;
    image-rendering: pixelated;
}

/* ==========================================================================
   PLAYBACK CONTROLS
   ========================================================================== */

.playback-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.playback-controls button,
.playback-controls .btn {
    font-family: var(--font-pixel);
    border: 2px solid var(--border-dark);
    background: rgba(30,24,18,0.8);
    color: var(--text-main);
    padding: 10px 18px;
    font-size: 11px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-height: 44px;
    min-width: 44px;
}

.playback-controls button:hover,
.playback-controls .btn:hover {
    border-color: var(--border-mid);
    color: var(--text-bright);
}

.playback-controls button:active,
.playback-controls .btn:active {
    background: rgba(60,48,36,0.9);
    border-color: var(--gold);
}

.speed-label {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: var(--gold);
    min-width: 36px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: 8px 10px;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--border-dark);
    text-transform: uppercase;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 480px) {
    .round-playback-label {
        font-size: 11px;
        letter-spacing: 1px;
    }
    .round-playback-sub {
        font-size: 7px;
        letter-spacing: 2px;
    }
    .round-playback-title {
        padding: 4px 0 2px;
    }
    .playback-controls {
        padding: 6px 0;
        gap: 6px;
    }
}

/* ==========================================================================
   SELECTION TIMER
   ========================================================================== */

.selection-timer {
    font-family: var(--font-pixel);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    color: var(--text-bright);
    padding: 6px 16px;
    background: rgba(0,0,0,0.5);
    border: 2px solid var(--border-dark);
    min-width: 64px;
    text-align: center;
    letter-spacing: 2px;
}

.selection-timer.timer-urgent {
    color: var(--red);
    border-color: var(--red);
    font-size: 20px;
    animation: timer-urgent-blink 0.5s steps(2) infinite;
}

@keyframes timer-urgent-blink {
    0%, 100% { color: var(--red); }
    50% { color: var(--red-light); }
}

/* ==========================================================================
   WAITING SCREENS
   ========================================================================== */

.waiting-opponent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    gap: 16px;
}

.waiting-opponent::after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background: var(--green);
    animation: retro-spin 1s steps(8) infinite;
}

.waiting-opponent-anim {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
}

.waiting-opponent-anim::after {
    content: '...';
    font-family: var(--font-pixel);
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--green);
    animation: retro-dots 1.5s steps(4) infinite;
}

@keyframes retro-dots {
    0% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
}

.judging-wait-screen,
.post-animation-wait {
    padding: 16px;
    text-align: center;
    color: var(--text-main);
    font-family: var(--font-pixel);
    font-size: 11px;
}

.judging-wait-header {
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-pixel);
    font-size: 12px;
}

.judging-grace-timer {
    font-family: var(--font-pixel);
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    margin-top: 6px;
    letter-spacing: 2px;
}

.judging-wait-roster {
    margin-top: 16px;
    text-align: center;
}

.judging-wait-roster h4 {
    font-family: var(--font-pixel);
    font-size: 11px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

/* ==========================================================================
   ROUND SUMMARY
   ========================================================================== */

.round-summary {
    text-align: center;
    padding: 20px;
    background: rgba(30,24,18,0.5);
}

.round-score-summary {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin: 16px 0;
    padding: 12px;
    background: rgba(0,0,0,0.4);
    border: 2px solid var(--border-dark);
}

.round-score {
    text-align: center;
}

.round-score.winning .score-big {
    color: var(--green-light);
}

.score-big {
    font-family: var(--font-pixel);
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    color: var(--text-bright);
    letter-spacing: 2px;
}

.round-score-mini {
    margin-bottom: 16px;
}

.mini-scores {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-pixel);
    font-variant-numeric: tabular-nums;
    padding: 6px 16px;
    background: rgba(0,0,0,0.4);
    border: 2px solid var(--border-dark);
}

.mini-you {
    color: var(--green);
    font-size: 12px;
}

.mini-vs {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mini-opp {
    color: var(--red);
    font-size: 12px;
}

/* ==========================================================================
   ROUND PLANT BREAKDOWN
   ========================================================================== */

.round-plant-breakdown {
    margin-top: 12px;
    text-align: left;
}

.round-plant-breakdown h4 {
    font-family: var(--font-pixel);
    font-size: 10px;
    margin-bottom: 6px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.breakdown-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.breakdown-col {
    background: rgba(40,30,20,0.5);
    border: 2px solid var(--border-dark);
    padding: 6px 8px;
}

.breakdown-label {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-dark);
}

.plant-perf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
    font-family: var(--font-pixel);
    font-size: 10px;
    border-bottom: 1px solid rgba(74,56,40,0.3);
}

.plant-perf:last-child {
    border-bottom: none;
}

.plant-perf.perf-good .perf-score {
    color: var(--green);
}

.perf-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
    color: var(--text-main);
}

.perf-score {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

/* ==========================================================================
   EFFECTS RECAP
   ========================================================================== */

.round-effects-recap {
    margin-top: 12px;
    text-align: left;
}

.round-effects-recap h4 {
    font-family: var(--font-pixel);
    font-size: 10px;
    margin-bottom: 6px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.effect-recap-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: rgba(40,30,20,0.5);
    border: 1px solid var(--border-dark);
    margin-bottom: 3px;
    font-family: var(--font-pixel);
    font-size: 10px;
}

.effect-recap-name {
    color: var(--text-main);
}

.effect-recap-impact {
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    padding: 1px 6px;
    border: 1px solid;
}

.effect-recap-impact.effect-buff {
    color: var(--green);
    background: rgba(104,168,88,0.15);
    border-color: var(--green);
}

.effect-recap-impact.effect-debuff {
    color: var(--red);
    background: rgba(168,72,56,0.1);
    border-color: var(--red);
}

.round-effects-summary {
    margin-top: 4px;
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--text-muted);
}

/* ==========================================================================
   REMAINING ROSTER
   ========================================================================== */

.round-remaining {
    margin-top: 12px;
}

.round-remaining h4 {
    font-family: var(--font-pixel);
    font-size: 10px;
    margin-bottom: 6px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.remaining-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.remaining-chip {
    font-family: var(--font-pixel);
    font-size: 10px;
    padding: 3px 8px;
    background: rgba(40,30,20,0.5);
    border: 2px solid var(--border-dark);
    white-space: nowrap;
    color: var(--text-main);
}

.remaining-chip.rarity-uncommon { border-color: var(--rarity-uncommon); }
.remaining-chip.rarity-rare { border-color: var(--rarity-rare); }
.remaining-chip.rarity-epic { border-color: var(--rarity-epic); }
.remaining-chip.rarity-legendary { border-color: var(--rarity-legendary); }

/* ==========================================================================
   RESULTS SCREEN
   ========================================================================== */

.results-screen {
    padding: 16px;
    background: var(--bg-darkest);
}

.results-banner {
    text-align: center;
    padding: 20px 0;
}

.results-banner h1 {
    font-family: var(--font-pixel);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 18px;
}

.results-banner.win h1 {
    color: var(--green-light);
}

.results-banner.loss h1 {
    color: var(--red);
}

.results-total-scores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px;
    background: rgba(0,0,0,0.4);
    border: 2px solid var(--border-dark);
    margin-bottom: 16px;
}

.score-column {
    text-align: center;
    flex: 1;
}

.score-column.you .score-big {
    color: var(--green);
}

.score-column.opponent .score-big {
    color: var(--red);
}

.score-divider {
    color: var(--text-muted);
    font-family: var(--font-pixel);
    font-size: 12px;
}

.score-label {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==========================================================================
   ROUND RESULT CARDS
   ========================================================================== */

.results-rounds {
    margin: 16px 0;
}

.results-rounds h3 {
    font-family: var(--font-pixel);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
    color: var(--text-muted);
}

.round-result-card {
    background: rgba(40,30,20,0.5);
    border: 2px solid var(--border-dark);
    border-left: 4px solid var(--border-dark);
    padding: 8px 12px;
    margin-bottom: 8px;
}

.round-result-card.won {
    border-left-color: var(--green);
}

.round-result-card.lost {
    border-left-color: var(--red);
}

.round-result-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.round-num {
    font-family: var(--font-pixel);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-bright);
}

.round-score-inline {
    font-family: var(--font-pixel);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
}

.round-result-badge {
    width: 22px;
    height: 22px;
    font-family: var(--font-pixel);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-dark);
}

.round-result-card.won .round-result-badge {
    background: rgba(104,168,88,0.2);
    color: var(--green-light);
    border-color: var(--green);
}

.round-result-card.lost .round-result-badge {
    background: rgba(168,72,56,0.1);
    color: var(--red);
    border-color: var(--red);
}

.round-detail-scores {
    margin-top: 6px;
    font-family: var(--font-pixel);
    font-size: 10px;
}

.plant-score-row {
    display: flex;
    gap: 8px;
    padding: 2px 0;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(74,56,40,0.3);
}

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

.plant-score-name {
    flex: 1;
    color: var(--text-main);
}

.plant-score-value {
    font-variant-numeric: tabular-nums;
}

.plant-score-mods {
    font-size: 9px;
    color: var(--text-muted);
}

/* ==========================================================================
   SCORE REVEAL
   ========================================================================== */

.results-score-reveal {
    margin: 12px 0 16px;
}

.score-matchup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 12px;
    background: rgba(0,0,0,0.4);
    border: 2px solid var(--border-dark);
}

.score-side {
    text-align: center;
    flex: 1;
}

.score-side-label {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.score-side-value {
    font-family: var(--font-pixel);
    font-size: 24px;
    font-variant-numeric: tabular-nums;
    color: var(--text-bright);
}

.score-side.winner .score-side-value { color: var(--green-light); }
.score-side.winner .score-side-label { color: var(--green); }
.score-side.loser .score-side-value { color: var(--text-muted); }

.score-vs {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--text-dim);
    padding: 0 4px;
}

/* ==========================================================================
   ROUND CARDS (new compact style)
   ========================================================================== */

.round-cards {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.round-card {
    flex: 1 1 80px;
    min-width: 70px;
    text-align: center;
    padding: 8px 6px;
    border: 2px solid var(--border-dark);
    border-left: 3px solid var(--border-dark);
    background: rgba(30,24,18,0.6);
}

.round-card.won { border-left-color: var(--green); }
.round-card.lost { border-left-color: var(--red); }

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

.round-card-num {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-muted);
}

.round-card-result {
    font-family: var(--font-pixel);
    font-size: 8px;
    padding: 1px 4px;
    border: 1px solid var(--border-dark);
}

.round-card.won .round-card-result {
    color: var(--green-light);
    border-color: var(--green);
    background: rgba(104,168,88,0.15);
}

.round-card.lost .round-card-result {
    color: var(--red);
    border-color: var(--red);
    background: rgba(168,72,56,0.1);
}

.round-card-scores {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: var(--text-main);
    display: flex;
    justify-content: center;
    gap: 4px;
}

.round-card-you { color: var(--green); }
.round-card-opp { color: var(--red); }
.round-card-dash { color: var(--text-dim); }

/* ==========================================================================
   REWARDS — celebration cards
   ========================================================================== */

.results-rewards {
    margin: 16px 0;
}

.section-title {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.reward-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reward-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(40,30,20,0.5);
    border: 2px solid var(--border-mid);
    border-left: 4px solid var(--gold);
}

.reward-card.bonus {
    border-color: var(--gold);
    background: rgba(60,45,20,0.5);
}

.reward-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
}

.reward-card-icon.pack-icon { color: var(--text-bright); }
.reward-card-icon.pack-icon.common { color: var(--text-muted); }
.reward-card-icon.pack-icon.uncommon { color: var(--green); }
.reward-card-icon.pack-icon.rare { color: var(--blue, #4090d0); }
.reward-card-icon.pack-icon.epic { color: var(--purple, #7050a0); }
.reward-card-icon.pack-icon.legendary { color: var(--gold); }

.reward-card-info {
    flex: 1;
}

.reward-card-amount {
    font-family: var(--font-pixel);
    font-size: 14px;
    color: var(--gold);
    letter-spacing: 1px;
}

.reward-card.bonus .reward-card-amount {
    color: var(--green-light);
}

.reward-card-label {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

/* ==========================================================================
   RESULTS ACTIONS
   ========================================================================== */

/* -- Rating Change --------------------------------------------------------- */

.results-rating {
    text-align: center;
    margin: var(--spacing-md) 0;
}

.results-rating-change {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-pixel);
    font-size: 16px;
    padding: 8px 16px;
    border: 2px solid;
}

.results-rating-change.rating-up {
    color: var(--green-light);
    border-color: rgba(104, 168, 88, 0.4);
    background: rgba(104, 168, 88, 0.1);
}

.results-rating-change.rating-down {
    color: var(--red-light);
    border-color: rgba(168, 72, 56, 0.4);
    background: rgba(168, 72, 56, 0.1);
}

.results-rating-change svg {
    width: 18px;
    height: 18px;
}

.results-rating-total {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-dim);
    margin-top: 6px;
}

/* -- Action Buttons -------------------------------------------------------- */

.results-actions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    padding-bottom: 20px;
}

.results-actions .btn {
    flex: 1;
    font-family: var(--font-pixel);
    font-size: 11px;
    border: 2px solid var(--border-mid);
    background: rgba(30,24,18,0.8);
    color: var(--text-main);
    padding: 12px 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    min-height: 44px;
}

.results-actions .btn-lg {
    font-size: 12px;
    padding: 14px 20px;
}

.results-actions .btn:hover {
    border-color: var(--border-light);
    color: var(--text-bright);
}

.results-actions .btn-primary,
.results-actions .btn.btn-primary {
    background: rgba(58,104,48,0.5);
    border-color: var(--green);
    color: var(--text-bright);
}

/* ==========================================================================
   COMPACT GRID
   ========================================================================== */

.compact-grid {
    max-height: 30vh;
}

/* ==========================================================================
   UTILITY
   ========================================================================== */

@keyframes pixel-load {
    0%   { box-shadow: 0 0 var(--green), 10px 0 var(--border-mid), 20px 0 var(--border-mid); }
    33%  { box-shadow: 0 0 var(--border-mid), 10px 0 var(--green), 20px 0 var(--border-mid); }
    66%  { box-shadow: 0 0 var(--border-mid), 10px 0 var(--border-mid), 20px 0 var(--green); }
    100% { box-shadow: 0 0 var(--green), 10px 0 var(--border-mid), 20px 0 var(--border-mid); }
}

/* ==========================================================================
   RESPONSIVE -- landscape-first, portrait fallback
   ========================================================================== */

@media (min-width: 600px) {
    .plant-selection-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 12px;
    }

    .plant-card-sprite {
        width: 96px;
        height: 96px;
    }

    .plant-card-name {
        font-size: 12px;
    }

    .plant-card-stats {
        font-size: 11px;
    }

    .shelf-slot {
        width: 64px;
        height: 64px;
    }

    .shelf-slot .slot-plant-preview svg {
        width: 44px;
        height: 44px;
    }

    .btn-lock-in {
        padding: 16px 44px;
        font-size: 14px;
    }

    .selection-timer {
        font-size: 22px;
    }

    .selection-timer.timer-urgent {
        font-size: 24px;
    }

    /* Selection v2 responsive */
    .sel-plant-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 10px;
    }

    .sel-card-sprite {
        width: 96px;
        height: 96px;
    }

    .sel-card-sprite svg {
        width: 80px;
        height: 80px;
    }

    .sel-card-name {
        font-size: 12px;
    }

    .sel-card-stats {
        font-size: 11px;
    }

    .est-value {
        font-size: 18px;
    }

    .shelf-slot {
        width: 72px;
        height: 72px;
    }
}

@media (min-width: 900px) {
    .round-selection {
        display: flex;
        flex-direction: column;
        padding: 16px;
        gap: 12px;
    }

    .round-selection-header {
        flex-shrink: 0;
    }

    .shelf-preview-section {
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .judge-bar {
        flex-shrink: 0;
    }

    .plant-selection-grid,
    .sel-plant-grid {
        flex: 1 1 0;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }

    .sel-plant-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }

    .plant-selection-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

    .selection-actions {
        flex-shrink: 0;
    }
}

/* ==========================================================================
   BETWEEN-ROUND SCREEN
   ========================================================================== */

.between-round-screen {
    padding: var(--spacing-md);
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    overflow-y: auto;
    max-height: calc(100vh - 140px);
}

.between-round-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.between-round-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary, #e8e0d0);
}

.between-round-result {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: 4px;
}

.result-win {
    background: rgba(104, 168, 88, 0.2);
    color: #98d870;
    border: 1px solid rgba(104, 168, 88, 0.3);
}

.result-loss {
    background: rgba(216, 104, 120, 0.2);
    color: #d86878;
    border: 1px solid rgba(216, 104, 120, 0.3);
}

.between-round-scores .mini-scores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: 1.1rem;
    font-weight: 700;
}

.between-round-breakdown {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: var(--spacing-sm);
}

.between-round-effects {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: var(--spacing-sm);
}

.between-round-effects h4 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 0.8rem;
    color: var(--text-secondary, #a09888);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.between-round-strategy {
    background: rgba(30, 64, 24, 0.15);
    border: 1px solid rgba(104, 168, 88, 0.15);
    border-radius: 6px;
    padding: var(--spacing-sm);
}

.between-round-strategy h4 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 0.85rem;
    color: #c8b080;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.strategy-label {
    font-size: 0.75rem;
    color: var(--text-secondary, #a09888);
    margin-bottom: var(--spacing-xs);
}

.strategy-hints {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--spacing-xs);
}

.strategy-hint {
    font-size: 0.75rem;
    color: #a0c890;
    padding: 4px 8px;
    background: rgba(104, 168, 88, 0.08);
    border-radius: 4px;
    border-left: 2px solid rgba(104, 168, 88, 0.3);
}

.judge-match-indicator {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}

.match-strong {
    background: rgba(104, 168, 88, 0.2);
    color: #98d870;
}

.match-good {
    background: rgba(200, 176, 80, 0.15);
    color: #c8b080;
}

.match-weak {
    background: rgba(216, 104, 120, 0.15);
    color: #d86878;
}

.between-round-actions {
    display: flex;
    justify-content: center;
    padding: var(--spacing-sm) 0;
}

.btn-lg {
    padding: 12px 32px;
    font-size: 1rem;
}

.compact-grid {
    gap: var(--spacing-xs);
}

.compact-grid .plant-card {
    padding: var(--spacing-xs);
}

/* ==========================================================================
   STRATEGY MODAL
   ========================================================================== */

/* ==========================================================================
   STRATEGY SLIDE-OVER PANEL
   ========================================================================== */

.strategy-panel-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

.strategy-panel-overlay.panel-visible {
    opacity: 1;
    pointer-events: auto;
}

.strategy-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 85%;
    max-width: 400px;
    z-index: 70;
    background: var(--bg-darkest);
    border-left: 2px solid var(--gold-dark, rgba(208,160,48,0.4));
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease-out;
}

.strategy-panel.panel-visible {
    transform: translateX(0);
}

.strategy-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px;
    border-bottom: 2px solid var(--border-dark);
    flex-shrink: 0;
}

.strategy-panel-title {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(208,160,48,0.3);
}

.strategy-panel-close {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-dim);
    text-transform: uppercase;
    padding: 6px 10px;
    border: 2px solid var(--border-dark);
    background: var(--bg-surface);
    cursor: pointer;
}

.strategy-panel-close:active {
    border-color: var(--border-mid);
}

.strategy-panel-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px 16px;
}

.strategy-panel-body::-webkit-scrollbar {
    width: 4px;
}

.strategy-panel-body::-webkit-scrollbar-thumb {
    background: var(--border-mid);
}

/* Section labels */
.strat-section {
    margin-bottom: 16px;
}

.strat-section-label {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0 0 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-dark);
}

/* Judge cards in strategy */
.strat-judge-card {
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: var(--bg-surface);
    border: 2px solid var(--border-dark);
    border-left: 4px solid;
}

.strat-judge-portrait {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.strat-judge-portrait img {
    image-rendering: pixelated;
}

.strat-judge-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.strat-judge-name {
    font-family: var(--font-pixel);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.strat-judge-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.strat-pref-like {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--green);
    text-transform: uppercase;
    padding: 1px 5px;
    border: 1px solid rgba(104,168,88,0.4);
    background: rgba(104,168,88,0.1);
}

.strat-pref-dislike {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--red);
    text-transform: uppercase;
    padding: 1px 5px;
    border: 1px solid rgba(168,72,56,0.4);
    background: rgba(168,72,56,0.1);
}

/* Plant rows in strategy */
.strat-plant-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 10px;
    margin-bottom: 3px;
    background: var(--bg-surface);
    border: 1px solid var(--border-dark);
    border-left: 3px solid transparent;
}

.strat-plant-row.match-strong { border-left-color: var(--green); }
.strat-plant-row.match-good { border-left-color: var(--gold); }
.strat-plant-row.match-weak { border-left-color: var(--red); }

.strat-plant-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.strat-plant-name {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.strat-plant-meta {
    display: flex;
    gap: 4px;
    align-items: center;
}

.strat-plant-rarity {
    font-family: var(--font-pixel);
    font-size: 7px;
    text-transform: uppercase;
    padding: 1px 4px;
    border: 1px solid var(--border-dark);
}

.strat-plant-stat {
    font-family: var(--font-pixel);
    font-size: 7px;
    padding: 1px 4px;
    border: 1px solid var(--border-dark);
    white-space: nowrap;
}

.strat-stat-va {
    color: var(--gold-light);
    border-color: rgba(208,160,48,0.3);
}

.strat-stat-ar {
    color: var(--green);
    border-color: rgba(104,168,88,0.3);
}

/* Per-judge dots in plant row */
.strat-plant-judges {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.strat-judge-dot {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 1px 4px;
    border: 1px solid;
    font-family: var(--font-pixel);
    font-size: 7px;
    white-space: nowrap;
}

.strat-judge-dot.judge-loves {
    color: var(--green);
    border-color: rgba(104,168,88,0.4);
    background: rgba(104,168,88,0.1);
}

.strat-judge-dot.judge-likes {
    color: var(--gold-light);
    border-color: rgba(208,160,48,0.3);
}

.strat-judge-dot.judge-neutral {
    color: var(--text-dim);
    border-color: var(--border-dark);
}

.strat-judge-dot.judge-dislikes {
    color: var(--red);
    border-color: rgba(168,72,56,0.4);
    background: rgba(168,72,56,0.1);
}

.strat-judge-swatch {
    width: 5px;
    height: 5px;
    flex-shrink: 0;
}

/* Match badge */
.strat-plant-match {
    font-family: var(--font-pixel);
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 5px;
    border: 1px solid;
    white-space: nowrap;
    flex-shrink: 0;
}

.strat-plant-match.match-strong {
    color: var(--green);
    border-color: rgba(104,168,88,0.5);
    background: rgba(104,168,88,0.15);
}

.strat-plant-match.match-good {
    color: var(--gold);
    border-color: rgba(208,160,48,0.4);
    background: rgba(208,160,48,0.1);
}

.strat-plant-match.match-weak {
    color: var(--red);
    border-color: rgba(168,72,56,0.4);
    background: rgba(168,72,56,0.1);
}

/* Desktop: wider panel */
@media (min-width: 900px) {
    .strategy-panel {
        max-width: 480px;
    }

    .strat-judge-name {
        font-size: 11px;
    }

    .strat-plant-name {
        font-size: 11px;
    }

    .strat-pref-like,
    .strat-pref-dislike {
        font-size: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .strategy-panel,
    .strategy-panel-overlay {
        transition-duration: 0.01s !important;
    }
}

/* ==========================================================================
   SELECTION SCREEN V3 -- Two-panel strategic command center
   Prefix: sel2-* to avoid collisions with legacy sel-* classes
   ========================================================================== */

/* --- Two-panel layout (desktop) --- */
.sel2-layout {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.sel2-body {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

/* Left panel: scrollable roster */
.sel2-roster {
    flex: 1 1 0;
    min-width: 0;
    overflow-y: auto;
    padding: 12px;
    -webkit-overflow-scrolling: touch;
}

.sel2-roster::-webkit-scrollbar { width: 6px; }
.sel2-roster::-webkit-scrollbar-track { background: var(--bg-darkest); }
.sel2-roster::-webkit-scrollbar-thumb { background: var(--border-mid); }

/* Right panel: sticky command center */
.sel2-command {
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    overflow-y: auto;
    background: rgba(12,10,8,0.6);
    border-left: 2px solid var(--border-dark);
}

.sel2-command::-webkit-scrollbar { width: 4px; }
.sel2-command::-webkit-scrollbar-track { background: transparent; }
.sel2-command::-webkit-scrollbar-thumb { background: var(--border-dark); }

/* --- Top bar: round title + timer --- */
.sel2-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0,0,0,0.4);
    border-bottom: 2px solid var(--border-dark);
    flex-shrink: 0;
}

.sel2-round-label {
    font-family: var(--font-pixel);
    font-size: 12px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.sel2-round-sub {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sel2-timer {
    font-family: var(--font-pixel);
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    color: var(--text-bright);
    padding: 4px 14px;
    background: rgba(0,0,0,0.5);
    border: 2px solid var(--border-dark);
    letter-spacing: 2px;
    text-align: center;
}

.sel2-timer.timer-urgent {
    color: var(--red);
    border-color: var(--red);
    animation: timer-urgent-blink 0.5s steps(2) infinite;
}

/* --- Filter row --- */
.sel2-filter-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 8px;
}

.sel2-filter-btn {
    font-family: var(--font-pixel);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    background: rgba(0,0,0,0.3);
    border: 2px solid var(--border-dark);
    color: var(--text-muted);
    cursor: pointer;
}

.sel2-filter-btn:hover {
    border-color: var(--border-mid);
    color: var(--text-main);
}

.sel2-filter-btn.active {
    border-color: var(--green);
    color: var(--green-light);
    background: rgba(104,168,88,0.1);
}

/* --- Plant card grid --- */
.sel2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 8px;
}

/* --- Plant card --- */
.sel2-card {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    padding: 10px;
    background: rgba(40,30,20,0.6);
    border: 2px solid var(--border-dark);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    min-height: 140px;
}

.sel2-card.match-strong { border-left: 4px solid var(--green); }
.sel2-card.match-good { border-left: 4px solid var(--gold); }
.sel2-card.match-weak { border-left: 4px solid var(--red); }
.sel2-card.match-neutral { border-left: 4px solid var(--border-dark); }

.sel2-card:hover {
    border-color: var(--border-mid);
    background: rgba(50,38,26,0.7);
}

.sel2-card.selected {
    border-color: var(--green);
    background: rgba(104,168,88,0.08);
}

.sel2-card.used {
    opacity: 0.35;
    pointer-events: none;
}

.sel2-card.preview-hover {
    border-color: var(--gold);
    background: rgba(200,176,80,0.06);
}

/* Rarity border glow */
.sel2-card.rarity-border-uncommon { border-color: var(--rarity-uncommon); }
.sel2-card.rarity-border-rare { border-color: var(--rarity-rare); }
.sel2-card.rarity-border-epic { border-color: var(--rarity-epic); }
.sel2-card.rarity-border-legendary { border-color: var(--rarity-legendary); }

.sel2-card.selected.rarity-border-uncommon,
.sel2-card.selected.rarity-border-rare,
.sel2-card.selected.rarity-border-epic,
.sel2-card.selected.rarity-border-legendary {
    border-color: var(--green);
}

/* Sprite area */
.sel2-card-sprite {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    border: 2px solid var(--border-dark);
    image-rendering: pixelated;
}

.sel2-card-sprite svg,
.sel2-card-sprite img {
    width: 96px;
    height: 96px;
    image-rendering: pixelated;
}

/* Card body */
.sel2-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sel2-card-name {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: break-word;
}

.sel2-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sel2-card-type {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sel2-card-rarity {
    font-family: var(--font-pixel);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 4px;
    border: 1px solid;
}

/* Stats bar */
.sel2-card-stats {
    display: flex;
    gap: 10px;
    font-family: var(--font-pixel);
    font-size: 10px;
}

.sel2-stat-va { color: var(--gold); }
.sel2-stat-ar { color: #a8d8a8; }

/* Per-judge score badges */
.sel2-card-judges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}

.sel2-judge-score {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-pixel);
    font-size: 8px;
    font-variant-numeric: tabular-nums;
    padding: 2px 5px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-dark);
}

.sel2-judge-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
}

.sel2-judge-score-val {
    color: var(--text-muted);
}

.sel2-judge-score.pref-high .sel2-judge-score-val { color: var(--green-light); }
.sel2-judge-score.pref-low .sel2-judge-score-val { color: var(--red-light); }

.sel2-card-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.sel2-card-name-row .sel2-card-name {
    flex: 1;
    min-width: 0;
}

.sel2-card-match {
    font-family: var(--font-pixel);
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 5px;
    border: 1px solid;
    flex-shrink: 0;
    white-space: nowrap;
}

.sel2-card-match.match-strong {
    color: var(--green-light);
    border-color: var(--green);
    background: rgba(104,168,88,0.15);
}

.sel2-card-match.match-good {
    color: var(--gold-light);
    border-color: var(--gold);
    background: rgba(200,176,80,0.1);
}

.sel2-card-match.match-weak {
    color: var(--red-light);
    border-color: var(--red);
    background: rgba(168,72,56,0.1);
}

.sel2-judge-opinion {
    font-family: var(--font-pixel);
    font-size: 7px;
    letter-spacing: -0.5px;
}

.sel2-judge-opinion.judge-loves,
.sel2-judge-opinion.judge-likes { color: var(--green-light); }
.sel2-judge-opinion.judge-dislikes { color: var(--red-light); }
.sel2-judge-opinion.judge-neutral { color: var(--text-dim); }

.sel2-card-total {
    font-family: var(--font-pixel);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    color: var(--text-bright);
    padding: 2px 5px;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--border-mid);
}

/* Effects list */
.sel2-card-effects {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}

.sel2-effect {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-pixel);
    font-size: 8px;
    text-transform: uppercase;
    padding: 2px 5px;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border-dark);
    color: var(--text-muted);
}

.sel2-effect-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
}

.sel2-effect-dot.syn-active { background: var(--green); }
.sel2-effect-dot.syn-conditional { background: var(--gold); }
.sel2-effect-dot.syn-inactive { background: var(--border-dark); }

.sel2-effect-name { flex: 1; min-width: 0; }

.sel2-effect-desc {
    color: var(--text-dim);
    font-size: 7px;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Slot badge on selected cards */
.sel2-slot-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--bg-darkest);
    background: var(--green);
    padding: 3px 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 1;
    border: 2px solid var(--bg-darkest);
}

/* Used overlay */
.sel2-used-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-pixel);
    font-size: 12px;
    color: var(--red);
    letter-spacing: 3px;
    text-transform: uppercase;
    background: rgba(12,10,8,0.7);
}

.sel2-used-overlay span {
    background: rgba(12,10,8,0.9);
    padding: 2px 8px;
    border: 1px solid var(--red);
}

/* ==========================================================================
   COMMAND CENTER -- Right panel components
   ========================================================================== */

/* Section headings */
.sel2-section-title {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-dark);
}

/* --- Shelf in command center --- */
.sel2-shelf {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.sel2-shelf-slot {
    position: relative;
    width: 48px;
    height: 48px;
    border: 2px solid var(--border-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    cursor: default;
}

.sel2-shelf-slot.your-slot {
    border-color: var(--green);
    cursor: pointer;
}

.sel2-shelf-slot.opp-slot {
    border-color: var(--red);
}

.sel2-shelf-slot.empty-slot {
    animation: slot-blink 2s steps(2) infinite;
}

.sel2-shelf-slot.swap-source {
    border-color: var(--gold);
    box-shadow: 0 0 8px rgba(200,176,80,0.4);
    animation: swap-pulse 0.8s steps(2) infinite;
}

@keyframes swap-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(200,176,80,0.4); }
    50% { box-shadow: 0 0 14px rgba(200,176,80,0.6); }
}

.sel2-shelf-slot .slot-sprite {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.sel2-shelf-slot .slot-sprite svg,
.sel2-shelf-slot .slot-sprite img {
    width: 36px;
    height: 36px;
    image-rendering: pixelated;
}

.sel2-shelf-slot .slot-label {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-dim);
    text-transform: uppercase;
}

.sel2-shelf-slot .slot-num {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-dim);
    opacity: 0.5;
}

.sel2-shelf-slot.slot-filled .slot-label,
.sel2-shelf-slot.slot-filled .slot-num {
    opacity: 0;
}

.sel2-shelf-walk-hint {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 2px;
}

/* --- Judge panel --- */
.sel2-judge-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sel2-judge-row {
    display: flex;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.3);
    border: 2px solid var(--border-dark);
    border-left: 3px solid;
    align-items: center;
}

.sel2-judge-portrait {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-darkest);
    border: 2px solid var(--border-dark);
    image-rendering: pixelated;
}

.sel2-judge-portrait svg {
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
}

.sel2-judge-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sel2-judge-name {
    font-family: var(--font-pixel);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sel2-judge-weights {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-dim);
    text-transform: uppercase;
    display: flex;
    gap: 6px;
}

.sel2-judge-weight-bars {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sel2-weight-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sel2-weight-label {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--text-dim);
    text-transform: uppercase;
    width: 28px;
    flex-shrink: 0;
}

.sel2-weight-track {
    flex: 1;
    height: 4px;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--border-dark);
    min-width: 40px;
}

.sel2-weight-fill {
    height: 100%;
    transition: width 0.4s ease-out;
}

.sel2-weight-fill.eye {
    background: var(--gold);
}

.sel2-weight-fill.nose {
    background: #a8d8a8;
}

.sel2-weight-val {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--text-muted);
    width: 20px;
    text-align: right;
    flex-shrink: 0;
}

.sel2-judge-prefs {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

.sel2-judge-pref {
    font-family: var(--font-pixel);
    font-size: 7px;
    text-transform: uppercase;
    padding: 1px 3px;
    border: 1px solid;
}

.sel2-judge-pref.like {
    background: rgba(104,168,88,0.15);
    border-color: var(--green);
    color: var(--green-light);
}

.sel2-judge-pref.dislike {
    background: rgba(168,72,56,0.1);
    border-color: var(--red);
    color: var(--red-light);
}

.sel2-judge-live-score {
    font-family: var(--font-pixel);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-bright);
    text-align: right;
    min-width: 40px;
}

/* --- Synergy panel --- */
.sel2-synergy-panel {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 160px;
    overflow-y: auto;
}

.sel2-synergy-panel::-webkit-scrollbar { width: 3px; }
.sel2-synergy-panel::-webkit-scrollbar-thumb { background: var(--border-dark); }

.sel2-synergy-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    font-family: var(--font-pixel);
    font-size: 8px;
    text-transform: uppercase;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border-dark);
}

.sel2-synergy-row.syn-active {
    border-color: rgba(104,168,88,0.3);
    background: rgba(104,168,88,0.06);
}

.sel2-synergy-row.syn-conditional {
    border-color: rgba(200,176,80,0.3);
    background: rgba(200,176,80,0.04);
}

.sel2-synergy-source {
    color: var(--text-dim);
    font-size: 7px;
}

.sel2-synergy-name {
    flex: 1;
    color: var(--text-muted);
}

.sel2-synergy-status {
    font-size: 7px;
    padding: 1px 4px;
    border: 1px solid;
}

.sel2-synergy-status.active {
    color: var(--green-light);
    border-color: var(--green);
}

.sel2-synergy-status.conditional {
    color: var(--gold);
    border-color: var(--gold);
}

.sel2-synergy-status.inactive {
    color: var(--text-dim);
    border-color: var(--border-dark);
}

/* --- Score breakdown --- */
.sel2-score-breakdown {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sel2-score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    font-family: var(--font-pixel);
    font-size: 9px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-dark);
}

.sel2-score-judge-name {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sel2-score-judge-dot {
    width: 8px;
    height: 8px;
}

.sel2-score-val {
    font-variant-numeric: tabular-nums;
    color: var(--text-bright);
}

.sel2-score-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    font-family: var(--font-pixel);
    font-size: 12px;
    background: rgba(0,0,0,0.5);
    border: 2px solid var(--border-mid);
}

.sel2-score-total-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sel2-score-total-val {
    font-variant-numeric: tabular-nums;
    color: var(--text-bright);
    letter-spacing: 1px;
}

.sel2-score-total-val.has-score {
    color: var(--green-light);
    text-shadow: 0 0 6px rgba(104,168,88,0.4);
}

/* --- Lock-in button --- */
.sel2-lock-in {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    font-family: var(--font-pixel);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    background: rgba(30,24,18,0.8);
    border: 2px solid var(--border-mid);
    cursor: pointer;
    width: 100%;
}

.sel2-lock-in:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sel2-lock-in.ready {
    color: var(--bg-darkest);
    background: var(--green);
    border-color: var(--green-light);
}

.sel2-lock-in:active {
    transform: translate(1px, 1px);
}

.sel2-lock-count {
    font-family: var(--font-pixel);
    font-size: 10px;
    opacity: 0.7;
}

/* --- Empty state (no plants selected) --- */
.sel2-empty-hint {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    padding: 12px;
}

/* ==========================================================================
   MOBILE-FIRST -- Strategy panel + sticky bottom bar
   ========================================================================== */

/* Mobile strategy panel: inline above the grid, toggleable */
.sel2-mobile-strategy {
    display: none;
}

/* Mobile bottom bar: always visible on small screens */
.sel2-mobile-bar {
    display: none;
}

@media (max-width: 899px) {
    .sel2-body {
        flex-direction: column;
    }

    /* Hide desktop command center sidebar */
    .sel2-command {
        display: none;
    }

    .sel2-roster {
        padding: 8px;
        padding-bottom: 72px;
    }

    .sel2-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sel2-card {
        grid-template-columns: 80px 1fr;
        gap: 8px;
        padding: 8px;
        min-height: 100px;
    }

    .sel2-card-sprite {
        width: 80px;
        height: 80px;
    }

    .sel2-card-sprite svg,
    .sel2-card-sprite img {
        width: 64px;
        height: 64px;
    }

    /* --- Mobile strategy panel --- */
    .sel2-mobile-strategy {
        display: none;
        flex-direction: column;
        gap: 0;
        background: rgba(12,10,8,0.95);
        border-bottom: 2px solid var(--border-dark);
        max-height: 55vh;
        overflow: hidden;
    }

    .sel2-mobile-strategy.open {
        display: flex;
    }

    /* Tab bar */
    .sel2-mob-tabs {
        display: flex;
        border-bottom: 2px solid var(--border-dark);
        flex-shrink: 0;
    }

    .sel2-mob-tab {
        flex: 1;
        font-family: var(--font-pixel);
        font-size: 8px;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 8px 4px;
        text-align: center;
        color: var(--text-muted);
        background: rgba(0,0,0,0.3);
        border: none;
        border-right: 1px solid var(--border-dark);
        cursor: pointer;
    }

    .sel2-mob-tab:last-child {
        border-right: none;
    }

    .sel2-mob-tab.active {
        color: var(--gold);
        background: rgba(200,176,80,0.08);
        border-bottom: 2px solid var(--gold);
        margin-bottom: -2px;
    }

    /* Tab content area */
    .sel2-mob-tab-content {
        display: none;
        flex-direction: column;
        gap: 6px;
        padding: 8px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: calc(55vh - 36px);
    }

    .sel2-mob-tab-content::-webkit-scrollbar { width: 4px; }
    .sel2-mob-tab-content::-webkit-scrollbar-thumb { background: var(--border-dark); }

    .sel2-mob-tab-content.active {
        display: flex;
    }

    /* Compact judge cards for mobile */
    .sel2-mob-judge {
        display: flex;
        gap: 8px;
        padding: 6px;
        background: rgba(0,0,0,0.3);
        border: 2px solid var(--border-dark);
        border-left: 3px solid;
        align-items: center;
    }

    .sel2-mob-judge-portrait {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-darkest);
        border: 2px solid var(--border-dark);
        image-rendering: pixelated;
    }

    .sel2-mob-judge-portrait svg {
        width: 36px;
        height: 36px;
        image-rendering: pixelated;
    }

    .sel2-mob-judge-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .sel2-mob-judge-top {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .sel2-mob-judge-name {
        font-family: var(--font-pixel);
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .sel2-mob-judge-dir {
        font-family: var(--font-pixel);
        font-size: 8px;
        color: var(--text-dim);
    }

    .sel2-mob-judge-weights {
        font-family: var(--font-pixel);
        font-size: 8px;
        color: var(--text-dim);
        text-transform: uppercase;
        display: flex;
        gap: 6px;
    }

    .sel2-mob-judge-prefs {
        display: flex;
        gap: 3px;
        flex-wrap: wrap;
    }

    .sel2-mob-judge-score {
        font-family: var(--font-pixel);
        font-size: 14px;
        font-variant-numeric: tabular-nums;
        color: var(--text-bright);
        text-align: right;
        min-width: 40px;
        flex-shrink: 0;
    }

    /* Compact shelf for mobile */
    .sel2-mob-shelf {
        display: flex;
        gap: 4px;
        justify-content: center;
    }

    .sel2-mob-shelf-slot {
        position: relative;
        width: 44px;
        height: 44px;
        border: 2px solid var(--border-dark);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgba(0,0,0,0.3);
    }

    .sel2-mob-shelf-slot.your-slot { border-color: var(--green); }
    .sel2-mob-shelf-slot.opp-slot { border-color: var(--red); }

    .sel2-mob-shelf-slot .mob-slot-sprite {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    .sel2-mob-shelf-slot .mob-slot-sprite svg,
    .sel2-mob-shelf-slot .mob-slot-sprite img {
        width: 32px;
        height: 32px;
        image-rendering: pixelated;
    }

    .sel2-mob-shelf-slot .mob-slot-label {
        font-family: var(--font-pixel);
        font-size: 7px;
        color: var(--text-dim);
        text-transform: uppercase;
    }

    .sel2-mob-shelf-slot.slot-filled .mob-slot-label {
        opacity: 0;
    }

    .sel2-mob-shelf-slot.your-slot.slot-filled {
        cursor: pointer;
    }

    .sel2-mob-shelf-slot.swap-source {
        border-color: var(--gold);
        box-shadow: 0 0 8px rgba(200,176,80,0.4);
        animation: swap-pulse 0.8s steps(2) infinite;
    }

    .sel2-mob-walk-hint {
        font-family: var(--font-pixel);
        font-size: 7px;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: 1px;
        text-align: center;
        margin-top: 2px;
    }

    /* Score summary row (compact) */
    .sel2-mob-score-summary {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .sel2-mob-score-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 3px 6px;
        font-family: var(--font-pixel);
        font-size: 9px;
        background: rgba(0,0,0,0.3);
        border: 1px solid var(--border-dark);
    }

    .sel2-mob-score-judge {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .sel2-mob-score-dot {
        width: 8px;
        height: 8px;
    }

    .sel2-mob-score-val {
        font-variant-numeric: tabular-nums;
        color: var(--text-bright);
    }

    .sel2-mob-total {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 8px;
        font-family: var(--font-pixel);
        font-size: 11px;
        background: rgba(0,0,0,0.5);
        border: 2px solid var(--border-mid);
    }

    .sel2-mob-total-label {
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .sel2-mob-total-val {
        font-variant-numeric: tabular-nums;
        color: var(--text-bright);
        letter-spacing: 1px;
    }

    .sel2-mob-total-val.has-score {
        color: var(--green-light);
        text-shadow: 0 0 6px rgba(104,168,88,0.4);
    }

    /* --- Fixed bottom bar --- */
    .sel2-mobile-bar {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 8px;
        background: rgba(12,10,8,0.97);
        border-top: 2px solid var(--border-dark);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
    }

    .sel2-mob-bar-timer {
        font-family: var(--font-pixel);
        font-size: 14px;
        font-variant-numeric: tabular-nums;
        color: var(--text-bright);
        min-width: 36px;
        flex-shrink: 0;
    }

    .sel2-mob-bar-timer.timer-urgent {
        color: var(--red);
        animation: timer-urgent-blink 0.5s steps(2) infinite;
    }

    .sel2-mob-bar-slots {
        display: flex;
        gap: 3px;
        flex: 1;
        justify-content: center;
    }

    .sel2-mob-bar-slot {
        width: 40px;
        height: 40px;
        border: 2px solid var(--green);
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0,0,0,0.4);
    }

    .sel2-mob-bar-slot.empty {
        border-style: dashed;
        opacity: 0.4;
    }

    .sel2-mob-bar-slot svg,
    .sel2-mob-bar-slot img {
        width: 28px;
        height: 28px;
        image-rendering: pixelated;
    }

    .sel2-mob-bar-info {
        font-family: var(--font-pixel);
        font-size: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 8px 10px;
        background: rgba(200,176,80,0.1);
        border: 2px solid var(--gold);
        color: var(--gold);
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .sel2-mob-bar-info.active {
        background: rgba(200,176,80,0.2);
        color: var(--text-bright);
    }

    .sel2-mob-bar-lock {
        font-family: var(--font-pixel);
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 10px 12px;
        background: rgba(30,24,18,0.8);
        border: 2px solid var(--border-mid);
        color: var(--text-muted);
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .sel2-mob-bar-lock.ready {
        background: var(--green);
        border-color: var(--green-light);
        color: var(--bg-darkest);
    }

    .sel2-mob-bar-lock:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
}

/* Desktop: hide mobile elements, show sidebar command center */
@media (min-width: 900px) {
    .sel2-mobile-bar {
        display: none !important;
    }

    .sel2-mobile-strategy {
        display: none !important;
    }

    .sel2-grid {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    }

    .sel2-card-sprite {
        width: 120px;
        height: 120px;
    }

    .sel2-card-sprite svg,
    .sel2-card-sprite img {
        width: 96px;
        height: 96px;
    }

    .sel2-shelf-slot {
        width: 52px;
        height: 52px;
    }
}

/* ==========================================================================
   COMPETITION INTRO SEQUENCE — Championship Broadcast Opening
   ========================================================================== */

/* --- Overlay & Shared --- */

.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--bg-darkest);
    overflow: hidden;
}

.intro-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.15) 2px,
        rgba(0,0,0,0.15) 4px
    );
    pointer-events: none;
    z-index: 100;
    opacity: 0.4;
    animation: intro-scanline-flicker 4s steps(2) infinite;
}

@keyframes intro-scanline-flicker {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.5; }
}

.intro-broadcast-frame {
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(208,160,48,0.3);
    pointer-events: none;
    z-index: 90;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.intro-broadcast-frame.visible {
    opacity: 1;
}

.intro-broadcast-frame::before,
.intro-broadcast-frame::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
}

.intro-broadcast-frame::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--gold);
    border-left: 2px solid var(--gold);
}

.intro-broadcast-frame::after {
    top: -1px;
    right: -1px;
    border-top: 2px solid var(--gold);
    border-right: 2px solid var(--gold);
}

.intro-broadcast-frame-bottom {
    position: absolute;
    bottom: -1px;
    width: 12px;
    height: 12px;
}

.intro-broadcast-frame-bottom.left {
    left: -1px;
    border-bottom: 2px solid var(--gold);
    border-left: 2px solid var(--gold);
}

.intro-broadcast-frame-bottom.right {
    right: -1px;
    border-bottom: 2px solid var(--gold);
    border-right: 2px solid var(--gold);
}

.intro-skip-hint {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.3s;
    padding: 10px 18px;
    border: 2px solid var(--border-dark);
    background: rgba(0,0,0,0.7);
    min-height: 44px;
    display: flex;
    align-items: center;
}

.intro-skip-hint.intro-skip-visible {
    opacity: 1;
}

.intro-skip-hint:hover {
    color: var(--text-bright);
    border-color: var(--gold-dark);
}

.intro-phase {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Phase 1: Broadcast Open --- */

.intro-power-on {
    position: absolute;
    inset: 0;
    background: #fff;
    clip-path: inset(50% 0 50% 0);
    animation: intro-power-on-expand 0.25s steps(6) forwards;
    z-index: 50;
}

@keyframes intro-power-on-expand {
    0% { clip-path: inset(50% 0 50% 0); opacity: 1; }
    80% { clip-path: inset(0 0 0 0); opacity: 1; }
    100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

.intro-phase-1 {
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.intro-phase-1.intro-phase-active {
    opacity: 1;
}

.intro-title-wrap {
    overflow: hidden;
    white-space: nowrap;
}

.intro-title {
    font-family: var(--font-pixel);
    font-size: 32px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 6px;
    text-shadow:
        0 0 20px rgba(208,160,48,0.5),
        0 0 40px rgba(208,160,48,0.2),
        0 4px 0 rgba(0,0,0,0.8);
    display: inline-block;
    overflow: hidden;
    border-right: 3px solid var(--gold);
    white-space: nowrap;
    width: 0;
    animation: intro-typewriter 1.1s steps(15) forwards, intro-cursor-blink 0.5s steps(1) infinite;
}

@keyframes intro-typewriter {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes intro-cursor-blink {
    0%, 100% { border-right-color: var(--gold); }
    50% { border-right-color: transparent; }
}

.intro-title.done {
    border-right-color: transparent;
    animation: none;
    width: 100%;
}

.intro-subtitle {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 3px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.intro-subtitle.visible {
    opacity: 1;
    transform: translateY(0);
}

.intro-title-lines {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: 500px;
    margin-top: 8px;
}

.intro-title-line {
    height: 1px;
    background: var(--gold);
    box-shadow: 0 0 6px rgba(208,160,48,0.4);
    flex: 1;
    transform: scaleX(0);
    transition: transform 0.6s ease-out;
}

.intro-title-line.left {
    transform-origin: right center;
}

.intro-title-line.right {
    transform-origin: left center;
}

.intro-title-line.visible {
    transform: scaleX(1);
}

.intro-title-diamond {
    width: 6px;
    height: 6px;
    background: var(--gold);
    transform: rotate(45deg);
    flex-shrink: 0;
    margin: 0 8px;
    opacity: 0;
    transition: opacity 0.3s 0.4s;
}

.intro-title-diamond.visible {
    opacity: 1;
}

.intro-phase-1.intro-phase-exit {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

/* --- Phase 2: VS Competitor Reveal --- */

.intro-phase-2 {
    overflow: hidden;
}

.intro-vs-left {
    position: absolute;
    inset: 0;
    clip-path: polygon(0 0, 56% 0, 44% 100%, 0 100%);
    background: radial-gradient(ellipse at 25% 50%, rgba(104,168,88,0.2) 0%, rgba(104,168,88,0.06) 40%, transparent 70%);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 5%;
    transform: translateX(-110%);
    transition: transform 0.55s cubic-bezier(0.17, 0.67, 0.35, 1.4);
}

.intro-vs-left.intro-vs-enter {
    transform: translateX(0);
}

.intro-vs-right {
    position: absolute;
    inset: 0;
    clip-path: polygon(56% 0, 100% 0, 100% 100%, 44% 100%);
    background: radial-gradient(ellipse at 75% 50%, rgba(168,72,56,0.2) 0%, rgba(168,72,56,0.06) 40%, transparent 70%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 5%;
    transform: translateX(110%);
    transition: transform 0.55s cubic-bezier(0.17, 0.67, 0.35, 1.4);
}

.intro-vs-right.intro-vs-enter {
    transform: translateX(0);
}

/* Diagonal gold seam — matches clip-path boundary exactly */
.intro-phase-2::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(calc(56% - 1px) 0, calc(56% + 1px) 0, calc(44% + 1px) 100%, calc(44% - 1px) 100%);
    background: var(--gold);
    box-shadow: 0 0 12px rgba(208,160,48,0.6), 0 0 30px rgba(208,160,48,0.2);
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s 0.4s;
}

.intro-phase-2::after {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(calc(56% - 10px) 0, calc(56% + 10px) 0, calc(44% + 10px) 100%, calc(44% - 10px) 100%);
    background: radial-gradient(ellipse at 50% 50%, rgba(208,160,48,0.15) 0%, transparent 70%);
    z-index: 4;
    opacity: 0;
    transition: opacity 0.4s 0.5s;
    pointer-events: none;
}

.intro-phase-2.intro-phase-active::before {
    opacity: 1;
}

.intro-phase-2.intro-phase-active::after {
    opacity: 1;
}

.intro-vs-player-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    padding: 20px 24px;
    position: relative;
}

.intro-vs-label {
    font-family: var(--font-pixel);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 6px;
    text-shadow: 0 0 16px rgba(0,0,0,0.8);
}

.intro-vs-label-you {
    color: var(--green);
    text-shadow: 0 0 12px rgba(104,168,88,0.6), 0 0 24px rgba(104,168,88,0.3);
}

.intro-vs-label-opp {
    color: var(--red);
    text-shadow: 0 0 12px rgba(168,72,56,0.6), 0 0 24px rgba(168,72,56,0.3);
}

.intro-vs-avatar {
    width: 180px;
    height: 180px;
    background: rgba(0,0,0,0.3);
    border: 3px solid var(--border-mid);
    image-rendering: pixelated;
    position: relative;
}

.intro-vs-avatar::after {
    content: '';
    position: absolute;
    top: 22px;
    left: 50%;
    width: 4px;
    height: 4px;
    transform: translateX(-50%) scale(2.2);
    background: transparent;
    box-shadow:
        -4px 0 0 var(--text-dim),
        0px 0 0 var(--text-dim),
        4px 0 0 var(--text-dim),
        -4px 4px 0 var(--text-dim),
        0px 4px 0 var(--text-dim),
        4px 4px 0 var(--text-dim),
        -2px -4px 0 var(--text-dim),
        2px -4px 0 var(--text-dim),
        0px -4px 0 var(--text-dim),
        0px 8px 0 var(--text-dim),
        -12px 14px 0 var(--text-dim),
        -8px 14px 0 var(--text-dim),
        -4px 14px 0 var(--text-dim),
        0px 14px 0 var(--text-dim),
        4px 14px 0 var(--text-dim),
        8px 14px 0 var(--text-dim),
        12px 14px 0 var(--text-dim),
        -12px 18px 0 var(--text-dim),
        -8px 18px 0 var(--text-dim),
        -4px 18px 0 var(--text-dim),
        0px 18px 0 var(--text-dim),
        4px 18px 0 var(--text-dim),
        8px 18px 0 var(--text-dim),
        12px 18px 0 var(--text-dim),
        -8px 22px 0 var(--text-dim),
        -4px 22px 0 var(--text-dim),
        0px 22px 0 var(--text-dim),
        4px 22px 0 var(--text-dim),
        8px 22px 0 var(--text-dim),
        -12px 26px 0 var(--text-dim),
        -8px 26px 0 var(--text-dim),
        -4px 26px 0 var(--text-dim),
        0px 26px 0 var(--text-dim),
        4px 26px 0 var(--text-dim),
        8px 26px 0 var(--text-dim),
        12px 26px 0 var(--text-dim);
}

.intro-vs-avatar.has-avatar::after {
    display: none;
}

.intro-vs-avatar-you {
    border-color: var(--green);
    box-shadow: 0 0 24px rgba(104,168,88,0.4), 0 0 48px rgba(104,168,88,0.15), inset 0 0 16px rgba(104,168,88,0.1);
}

.intro-vs-avatar-opp {
    border-color: var(--red);
    box-shadow: 0 0 24px rgba(168,72,56,0.4), 0 0 48px rgba(168,72,56,0.15), inset 0 0 16px rgba(168,72,56,0.1);
}

.intro-vs-name {
    font-family: var(--font-pixel);
    font-size: 28px;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 5px;
    text-shadow: 0 0 20px rgba(0,0,0,1), 0 0 40px rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.9);
}

.intro-vs-elo {
    font-family: var(--font-pixel);
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 0 12px rgba(0,0,0,0.8);
}

/* Motion streaks behind avatar */
.intro-vs-streaks {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.intro-vs-streak {
    position: absolute;
    width: 140px;
    height: 140px;
    background: var(--bg-surface);
    border: 2px solid;
    opacity: 0;
}

.intro-vs-left .intro-vs-streak {
    border-color: rgba(104,168,88,0.3);
}

.intro-vs-right .intro-vs-streak {
    border-color: rgba(168,72,56,0.3);
}

.intro-vs-left.intro-vs-enter .intro-vs-streak {
    animation: intro-streak-left 0.4s ease-out forwards;
}

.intro-vs-right.intro-vs-enter .intro-vs-streak {
    animation: intro-streak-right 0.4s ease-out forwards;
}

.intro-vs-streak:nth-child(1) { animation-delay: 0s; }
.intro-vs-streak:nth-child(2) { animation-delay: 0.06s; }
.intro-vs-streak:nth-child(3) { animation-delay: 0.12s; }

@keyframes intro-streak-left {
    0% { transform: translateX(-80px); opacity: 0.4; }
    100% { transform: translateX(-30px); opacity: 0; }
}

@keyframes intro-streak-right {
    0% { transform: translateX(80px); opacity: 0.4; }
    100% { transform: translateX(30px); opacity: 0; }
}

/* Particles */
.intro-vs-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.intro-vs-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    opacity: 0.3;
}

.intro-vs-left .intro-vs-particle {
    background: var(--green);
}

.intro-vs-right .intro-vs-particle {
    background: var(--red);
}

@keyframes intro-particle-float {
    0% { transform: translateY(0) scale(1); opacity: 0.3; }
    100% { transform: translateY(-200px) scale(0.5); opacity: 0; }
}

/* VS badge */
.intro-vs-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 10;
}

.intro-vs-badge.intro-vs-badge-enter {
    animation: intro-vs-slam 0.4s cubic-bezier(0.17, 0.67, 0.35, 1.5) forwards;
}

@keyframes intro-vs-slam {
    0% { transform: translate(-50%, -50%) scale(0); }
    70% { transform: translate(-50%, -50%) scale(1.1); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

.intro-vs-badge span {
    display: block;
    font-family: var(--font-pixel);
    font-size: 64px;
    color: var(--gold-light);
    text-shadow:
        0 0 24px rgba(208,160,48,0.9),
        0 0 48px rgba(208,160,48,0.5),
        0 0 80px rgba(208,160,48,0.25),
        0 4px 0 var(--gold-dark),
        0 6px 0 rgba(0,0,0,0.5);
    letter-spacing: 8px;
    animation: intro-vs-glow-pulse 2s ease-in-out infinite 0.5s;
}

@keyframes intro-vs-glow-pulse {
    0%, 100% { text-shadow: 0 0 20px rgba(208,160,48,0.8), 0 0 40px rgba(208,160,48,0.4), 0 0 60px rgba(208,160,48,0.2), 0 4px 0 var(--gold-dark), 0 6px 0 rgba(0,0,0,0.5); }
    50% { text-shadow: 0 0 30px rgba(208,160,48,1), 0 0 60px rgba(208,160,48,0.6), 0 0 80px rgba(208,160,48,0.3), 0 4px 0 var(--gold-dark), 0 6px 0 rgba(0,0,0,0.5); }
}

/* Burst behind VS */
.intro-vs-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 320px;
    transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle, rgba(208,160,48,0.6) 0%, rgba(208,160,48,0.1) 40%, transparent 70%);
    z-index: 9;
    opacity: 0;
    pointer-events: none;
}

.intro-vs-burst.intro-vs-burst-enter {
    animation: intro-burst-expand 0.8s ease-out forwards;
}

@keyframes intro-burst-expand {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    50% { opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* Ring burst */
.intro-vs-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    border: 2px solid var(--gold);
    transform: translate(-50%, -50%) scale(0);
    z-index: 9;
    opacity: 0;
    pointer-events: none;
}

.intro-vs-ring.intro-vs-ring-enter {
    animation: intro-ring-expand 0.6s ease-out 0.1s forwards;
}

@keyframes intro-ring-expand {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(6); opacity: 0; }
}

/* Match details ribbon */
.intro-vs-ribbon {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.7);
    border-top: 1px solid rgba(208,160,48,0.3);
    padding: 10px 20px;
    z-index: 8;
    transform: translateY(100%);
    transition: transform 0.5s ease-out;
}

.intro-vs-ribbon.visible {
    transform: translateY(0);
}

.intro-vs-ribbon-text {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
}

/* Phase 2 exit */
.intro-phase-2.intro-phase-exit .intro-vs-left {
    transform: translateX(-110%);
    transition: transform 0.4s ease-in;
}

.intro-phase-2.intro-phase-exit .intro-vs-right {
    transform: translateX(110%);
    transition: transform 0.4s ease-in;
}

.intro-phase-2.intro-phase-exit .intro-vs-badge {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
    transition: transform 0.4s ease-in, opacity 0.3s ease-in;
}

.intro-phase-2.intro-phase-exit .intro-vs-badge span {
    animation: none;
}

.intro-phase-2.intro-phase-exit::before,
.intro-phase-2.intro-phase-exit::after {
    opacity: 0;
    transition: opacity 0.2s;
}

.intro-phase-2.intro-phase-exit .intro-vs-ribbon {
    transform: translateY(100%);
    transition: transform 0.3s ease-in;
}

/* --- Phase 3: Judges Cinematic Reveal --- */

.intro-phase-3 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.intro-judges-banner {
    font-family: var(--font-pixel);
    font-size: 16px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow: 0 0 12px rgba(208,160,48,0.4), 0 2px 0 rgba(0,0,0,0.6);
    transform: translateY(-60px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease-out;
    display: flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
    position: absolute;
    top: 6%;
    left: 10%;
    right: 10%;
    transform: translateY(-60px);
    justify-content: center;
    z-index: 5;
    overflow: hidden;
}

.intro-judges-banner.intro-banner-enter {
    transform: translateY(0);
    opacity: 1;
}

.intro-judges-banner::before,
.intro-judges-banner::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    min-width: 30px;
}

.intro-judges-banner-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(208,160,48,0.3) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: intro-shimmer-sweep 1.5s ease-in-out 0.6s forwards;
    pointer-events: none;
}

@keyframes intro-shimmer-sweep {
    0% { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

/* Stage — fills screen, judges split it equally */
.intro-judges-stage {
    position: absolute;
    left: 0;
    right: 0;
    top: 10%;
    bottom: 8%;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

/* Judge card — full-width panel, each takes equal vertical space */
.intro-judge-card {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 24px;
    border-bottom: 1px solid var(--border-dark);
    border-left: 4px solid var(--border-mid);
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    min-height: 0;
}

.intro-judge-card:last-child {
    border-bottom: none;
}

.intro-judge-card.intro-judge-card-enter {
    opacity: 1;
    transform: translateX(0);
}

/* Alternate direction for middle card */
.intro-judge-pos-1 {
    transform: translateX(100%);
    flex-direction: row-reverse;
    border-left: none;
    border-right: 4px solid var(--border-mid);
    text-align: right;
}

.intro-judge-pos-1.intro-judge-card-enter {
    transform: translateX(0);
}

.intro-judge-pos-1 .intro-judge-info {
    align-items: flex-end;
}

.intro-judge-pos-1 .intro-judge-prefs {
    justify-content: flex-end;
}

/* Portrait — large and prominent */
.intro-judge-portrait-wrap {
    width: 120px;
    height: 120px;
    min-width: 120px;
    background: var(--bg-darkest);
    border: 3px solid var(--border-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.intro-judge-canvas {
    width: 120px;
    height: 120px;
}

/* Judge info — big, readable text */
.intro-judge-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.intro-judge-name {
    font-family: var(--font-pixel);
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 20px currentColor;
}

.intro-judge-style-badge {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 4px 12px;
    border: 2px solid var(--border-mid);
    background: rgba(0,0,0,0.5);
    width: fit-content;
}

/* Focus tags — VISUAL / AROMA indicators */
.intro-judge-focus {
    display: flex;
    gap: 8px;
}

.intro-judge-pos-1 .intro-judge-focus {
    justify-content: flex-end;
}

.intro-judge-focus-tag {
    font-family: var(--font-pixel);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 8px;
    border: 1px solid;
}

.intro-judge-focus-eye {
    color: var(--gold);
    border-color: var(--gold-dark);
    background: rgba(208,160,48,0.15);
}

.intro-judge-focus-nose {
    color: #a8d8a8;
    border-color: rgba(104,168,88,0.5);
    background: rgba(104,168,88,0.15);
}

/* Preference tags — larger, more colorful */
.intro-judge-prefs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.intro-judge-pref-tag {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 8px;
    border: 1px solid rgba(104,168,88,0.5);
    background: rgba(104,168,88,0.15);
}

/* Begin text */
.intro-begin-text {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-pixel);
    font-size: 11px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 4px;
    white-space: nowrap;
    opacity: 0;
    z-index: 7;
    transition: opacity 0.5s ease-out;
    animation: intro-begin-pulse 2s ease-in-out infinite;
}

.intro-begin-text.visible {
    opacity: 1;
}

@keyframes intro-begin-pulse {
    0%, 100% { text-shadow: 0 0 8px rgba(208,160,48,0.3); }
    50% { text-shadow: 0 0 20px rgba(208,160,48,0.6); }
}

.intro-phase-3.intro-phase-exit {
    opacity: 0;
    transition: opacity 0.8s ease-in;
}

/* --- Phase 4: Transition to Battle --- */

.intro-phase-4 {
    flex-direction: column;
    gap: 8px;
}

.intro-screen-flash {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.7);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
}

.intro-screen-flash.flash {
    animation: intro-flash-pop 0.15s ease-out forwards;
}

@keyframes intro-flash-pop {
    0% { opacity: 0.7; }
    100% { opacity: 0; }
}

.intro-prepare-text {
    font-family: var(--font-pixel);
    font-size: 22px;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow:
        0 0 16px rgba(208,160,48,0.5),
        0 3px 0 rgba(0,0,0,0.7);
    transform: scale(2.5);
    opacity: 0;
    z-index: 10;
}

.intro-prepare-text.impact {
    animation: intro-prepare-impact 0.35s cubic-bezier(0.17, 0.67, 0.35, 1.3) forwards;
}

@keyframes intro-prepare-impact {
    0% { transform: scale(2.5); opacity: 0; }
    60% { transform: scale(0.95); opacity: 1; }
    80% { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}

.intro-prepare-sub {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0;
    transition: opacity 0.4s ease-out;
    z-index: 10;
}

.intro-prepare-sub.visible {
    opacity: 1;
}

.intro-phase-4.intro-phase-exit {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}

.intro-overlay.intro-overlay-exit {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

/* --- Intro Responsive --- */

@media (max-width: 599px) {
    .intro-title {
        font-size: 20px;
        letter-spacing: 3px;
    }

    .intro-subtitle {
        font-size: 7px;
        letter-spacing: 2px;
    }

    .intro-vs-player-card {
        padding: 10px 16px;
        gap: 10px;
    }

    .intro-vs-avatar {
        width: 140px;
        height: 140px;
    }

    .intro-vs-avatar::after {
        transform: translateX(-50%) scale(1.8);
        top: 18px;
    }

    .intro-vs-name {
        font-size: 20px;
        letter-spacing: 3px;
    }

    .intro-vs-elo {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .intro-vs-label {
        font-size: 10px;
        letter-spacing: 5px;
    }

    .intro-vs-badge span {
        font-size: 44px;
        letter-spacing: 5px;
    }

    .intro-vs-left {
        clip-path: polygon(0 0, 100% 0, 100% 43%, 0 57%);
        padding: 0;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 8%;
        transform: translateY(-110%);
    }

    .intro-vs-left.intro-vs-enter {
        transform: translateY(0);
    }

    .intro-vs-right {
        clip-path: polygon(0 57%, 100% 43%, 100% 100%, 0 100%);
        padding: 0;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        padding-bottom: 10%;
        transform: translateY(110%);
    }

    .intro-vs-right.intro-vs-enter {
        transform: translateY(0);
    }

    .intro-phase-2::before {
        clip-path: polygon(0 calc(57% - 1px), 100% calc(43% - 1px), 100% calc(43% + 1px), 0 calc(57% + 1px));
    }

    .intro-phase-2::after {
        clip-path: polygon(0 calc(57% - 8px), 100% calc(43% - 8px), 100% calc(43% + 8px), 0 calc(57% + 8px));
    }

    .intro-phase-2.intro-phase-exit .intro-vs-left {
        transform: translateY(-110%);
    }

    .intro-phase-2.intro-phase-exit .intro-vs-right {
        transform: translateY(110%);
    }

    .intro-vs-streak {
        width: 64px;
        height: 64px;
    }

    .intro-judges-banner {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .intro-judges-stage {
        top: 7%;
        bottom: 6%;
    }

    .intro-judge-card {
        gap: 12px;
        padding: 8px 12px;
    }

    .intro-judge-portrait-wrap {
        width: 88px;
        height: 88px;
        min-width: 88px;
    }

    .intro-judge-canvas {
        width: 88px !important;
        height: 88px !important;
    }

    .intro-judge-name {
        font-size: 16px;
        letter-spacing: 2px;
    }

    .intro-judge-style-badge {
        font-size: 8px;
    }

    .intro-judge-focus-tag {
        font-size: 7px;
    }

    .intro-judge-prefs {
        gap: 4px;
    }

    .intro-judge-pref-tag {
        font-size: 7px;
        padding: 2px 6px;
    }

    .intro-begin-text {
        font-size: 8px;
        letter-spacing: 2px;
        bottom: 1%;
    }

    .intro-prepare-text {
        font-size: 16px;
        letter-spacing: 2px;
    }

    .intro-vs-ribbon-text {
        font-size: 7px;
        letter-spacing: 1px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .intro-overlay *,
    .intro-overlay *::before,
    .intro-overlay *::after {
        animation-duration: 0.01s !important;
        transition-duration: 0.01s !important;
    }
}