/* ═══════════════════════════════════════════════════════════════════════════
   GAME HUD — Full-screen board with floating menu panels
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Font Awesome Duotone Theming ───────────────────────────────────────
   Default duotone colors: pink primary, lavender secondary.
   Context-specific overrides via .icon-* utility classes.
   ──────────────────────────────────────────────────────────────────────── */

:root {
    --fa-primary-color: #F471B5;
    --fa-secondary-color: #A78BFA;
    --fa-secondary-opacity: 0.4;
}

/* Context color classes */
.icon-credits { --fa-primary-color: #FBBF24; --fa-secondary-color: #F59E0B; }
.icon-rep     { --fa-primary-color: #F471B5; --fa-secondary-color: #C084FC; }
.icon-health  { --fa-primary-color: #34D399; --fa-secondary-color: #10B981; }
.icon-time    { --fa-primary-color: #22D3EE; --fa-secondary-color: #06B6D4; }
.icon-location { --fa-primary-color: #FB7185; --fa-secondary-color: #E11D48; }

/* HUD stat bar icons — tighter spacing */
.hud-stat .fad,
.hud-stat i.fad { margin-right: 0.2rem; font-size: 0.85rem; }

/* Player list detail icons */
.player-list-details .fad { margin-right: 0.15rem; }

/* Pedia table key icons */
.pedia-key .fad { margin-right: 0.3rem; }

/* Economy indicator card icons */
.indicator-icon .fad { font-size: 1.2rem; }

/* News dialog directional icons */
.news-dialog-icon .fad { font-size: 1.1rem; }

/* History chart title icons */
.history-chart-title .fad { margin-right: 0.3rem; }

/* Shop/action item icons */
.shop-item-name .fad { margin-right: 0.25rem; }
.shop-cat-header .fad { margin-right: 0.3rem; }

/* Travel choice popup icons */
.travel-choice-icon .fad { font-size: 1.3rem; }

/* ─── Full-screen Game Layout ──────────────────────────────────────────── */

/* When game is active, main needs no padding/constraints */
main:has(.game-fullscreen) {
    padding: 0;
    max-width: none;
    overflow: hidden;
}

.game-fullscreen {
    position: relative;
    width: 100vw;
    height: calc(100vh - var(--header-height) - var(--footer-height));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--bg);
    background-image: url('/img/board/board_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.game-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

/* ─── Top HUD Bar ──────────────────────────────────────────────────────── */

.hud-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.25rem;
    background: rgba(180, 50, 120, 0.88);
    border-bottom: none;
    box-shadow:
        0 4px 20px rgba(244, 113, 181, 0.2),
        0 8px 50px rgba(244, 113, 181, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.7);
    z-index: 20;
    flex-shrink: 0;
    gap: 0.75rem;
    position: relative;
}

.hud-top-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex-shrink: 1;
}

.hud-game-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.hud-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    white-space: nowrap;
    gap: 0.25rem;
}

.hud-badge--pace { color: var(--cyan); border-color: rgba(34, 211, 238, 0.3); }
.hud-badge--done { color: var(--success); border-color: rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.1); }
.hud-badge--you { color: var(--cyan); border-color: rgba(34, 211, 238, 0.3); }
.hud-badge--bot { color: var(--purple); border-color: rgba(167, 139, 250, 0.3); }

/* ─── Win Conditions ──────────────────────────────────────────────────── */

.hud-win-conditions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.hud-wc {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(15, 11, 30, 0.5);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.hud-wc .fad { font-size: 0.7rem; }

.hud-wc-val { color: var(--text); }
.hud-wc-sep { color: var(--text-tertiary); font-size: 0.6rem; }
.hud-wc-target { color: var(--text-tertiary); font-size: 0.65rem; }

.hud-wc-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(15, 11, 30, 0.4);
}

.hud-wc-fill {
    height: 100%;
    border-radius: 1px;
    transition: width 0.5s ease;
}

/* Win condition colors */
.hud-wc--credits { border-color: rgba(251, 191, 36, 0.25); }
.hud-wc--credits .hud-wc-val { color: #FBBF24; }
.hud-wc--credits .hud-wc-fill { background: #FBBF24; }
.hud-wc--credits .fad { --fa-primary-color: #FBBF24; --fa-secondary-color: #F59E0B; }

.hud-wc--skills { border-color: rgba(167, 139, 250, 0.25); }
.hud-wc--skills .hud-wc-val { color: #A78BFA; }
.hud-wc--skills .hud-wc-fill { background: #A78BFA; }
.hud-wc--skills .fad { --fa-primary-color: #A78BFA; --fa-secondary-color: #8B5CF6; }

.hud-wc--rep { border-color: rgba(244, 113, 181, 0.25); }
.hud-wc--rep .hud-wc-val { color: #F471B5; }
.hud-wc--rep .hud-wc-fill { background: #F471B5; }
.hud-wc--rep .fad { --fa-primary-color: #F471B5; --fa-secondary-color: #C084FC; }

.hud-wc--uptime { border-color: rgba(52, 211, 153, 0.25); }
.hud-wc--uptime .hud-wc-val { color: #34D399; }
.hud-wc--uptime .hud-wc-fill { background: #34D399; }
.hud-wc--uptime .fad { --fa-primary-color: #34D399; --fa-secondary-color: #10B981; }

.hud-wc--met {
    border-color: rgba(52, 211, 153, 0.5);
    background: rgba(52, 211, 153, 0.08);
}
.hud-wc--met .hud-wc-val { color: var(--success); }

/* ─── Turn Group (center) ─────────────────────────────────────────────── */

.hud-top-center {
    flex-shrink: 0;
    text-align: center;
}

.hud-turn-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.hud-turn-info {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

.hud-turn-info .fad { font-size: 0.72rem; margin-right: 0.2rem; }
/* (hud-turn-left removed — turns left display was dropped) */

/* ─── Resources Group (right) ─────────────────────────────────────────── */

.hud-top-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hud-resources {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* ─── Player Presence Dots ────────────────────────────────────────────── */

.hud-presence {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.hud-pdot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: border-color 0.3s, box-shadow 0.3s;
    background: var(--bg-elevated);
    cursor: default;
}

.hud-pdot-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.hud-pdot-initial {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Status ring colors */
.hud-pdot--playing { border-color: rgba(251, 191, 36, 0.6); }
.hud-pdot--submitted { border-color: rgba(34, 211, 238, 0.6); }
.hud-pdot--eliminated { border-color: rgba(251, 113, 133, 0.4); opacity: 0.45; }
.hud-pdot--me { box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.4); }

/* Online indicator (green dot overlay) */
.hud-pdot--online::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    border: 1.5px solid rgba(180, 50, 120, 0.88);
    z-index: 1;
}

/* ─── Tool Buttons Group ──────────────────────────────────────────────── */

.hud-tools {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.hud-tool-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    padding: 0.3rem 0.45rem;
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hud-tool-btn:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

.hud-tool-btn--active {
    border-color: #F471B5;
    color: #F471B5;
    background: rgba(244, 113, 181, 0.1);
}

.hud-tool-btn--active:hover {
    border-color: #F9A8D4;
    color: #F9A8D4;
}

/* ─── Timer ────────────────────────────────────────────────────────────── */

.hud-timer-label {
    font-size: 0.6rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.hud-timer-value {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.04em;
}

.hud-timer-value--warning { color: var(--warning); }
.hud-timer-value--urgent { color: var(--danger); animation: timerPulse 0.8s ease-in-out infinite; }
.hud-timer-value--expired { color: var(--danger); opacity: 0.6; }
.hud-timer-value--finished { color: var(--warning); font-size: 1.1rem; }

@keyframes timerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ─── Quick Stats (top right) ──────────────────────────────────────────── */

.hud-quick-stats {
    display: flex;
    gap: 0.75rem;
}

.hud-stat {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}

.hud-stat-icon {
    font-size: 0.88rem;
}

/* ─── Game Board Area ──────────────────────────────────────────────────── */

.game-board-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    position: relative;
    z-index: 1;
    overflow: hidden;
}



.board-container {
    position: relative;
    width: 100%;
    max-width: min(95vw, calc((100vh - 140px) * 1.5));
    aspect-ratio: 3 / 2;
    overflow: visible;
    background: transparent !important;
}

/* Layer 0: SVG connection lines */
.board-svg-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.board-label-layer {
    z-index: 3;
}


.board-edge {
    stroke: var(--purple);
    stroke-width: 3;
    stroke-dasharray: none;
    opacity: 0.55;
    transition: stroke 0.3s ease, opacity 0.3s ease;
    filter: drop-shadow(0 0 3px rgba(167, 139, 250, 0.3));
}

.board-edge-active {
    stroke: var(--cyan);
    opacity: 0.9;
    stroke-dasharray: none;
    stroke-width: 3.5;
    filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.5));
}

.board-edge-reachable {
    stroke: var(--primary);
    opacity: 0.7;
    stroke-dasharray: none;
    filter: drop-shadow(0 0 4px rgba(244, 113, 181, 0.3));
}

.board-edge-label {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    fill: var(--secondary);
    text-anchor: middle;
}

.board-edge-pill {
    fill: rgba(15, 11, 30, 0.9);
    stroke: var(--purple);
    stroke-width: 1.5;
    opacity: 0.8;
}

/* Layer 1: Location tiles */
.board-tile {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 15%;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.25s ease, filter 0.25s ease;
    text-align: center;
}

.board-tile-img-wrap {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 2px solid rgba(167, 139, 250, 0.4);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: rgba(26, 21, 48, 0.7);
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.15);
}

.board-tile-img {
    width: 100%;
    height: auto;
    display: block;
    filter: brightness(0.9) saturate(0.9);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.board-tile:hover {
    transform: translate(-50%, -50%) scale(1.12);
    z-index: 5;
}

.board-tile:hover .board-tile-img {
    filter: brightness(1.15) saturate(1.2);
}

.board-tile:hover .board-tile-img-wrap {
    border-color: var(--purple);
    box-shadow: var(--shadow-md), 0 0 24px rgba(167, 139, 250, 0.35);
}

.board-tile-label {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    margin-top: 0.35rem;
    text-shadow: 0 1px 8px rgba(15, 11, 30, 1), 0 0 4px rgba(15, 11, 30, 0.8), 0 0 12px rgba(15, 11, 30, 0.9);
    white-space: nowrap;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.4rem;
    background: rgba(15, 11, 30, 0.6);
    border-radius: 6px;
    display: inline-block;
}

/* Current location highlight */
.board-tile--current .board-tile-img-wrap {
    border-color: var(--cyan);
    box-shadow: 0 0 0 2px var(--cyan), 0 0 28px rgba(34, 211, 238, 0.4);
    animation: locationPulse 2.5s ease-in-out infinite;
}

.board-tile--current .board-tile-img {
    filter: brightness(1.2) saturate(1.3);
}

.board-tile--current .board-tile-label {
    color: var(--cyan);
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}

@keyframes locationPulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--cyan), 0 0 20px rgba(34, 211, 238, 0.3); }
    50%      { box-shadow: 0 0 0 2px var(--cyan), 0 0 36px rgba(34, 211, 238, 0.55); }
}

/* Reachable locations */
.board-tile--reachable .board-tile-img-wrap {
    border-color: rgba(244, 113, 181, 0.5);
    border-style: dashed;
}

.board-tile--reachable .board-tile-label {
    color: var(--primary-light);
}

.board-tile--reachable:hover .board-tile-img-wrap {
    border-color: var(--primary);
    border-style: solid;
    box-shadow: 0 0 20px rgba(244, 113, 181, 0.4);
}

/* Layer 2: Player token (self only) */
.board-token {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                top 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: tokenAppear 0.4s ease backwards;
}

@keyframes tokenAppear {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.board-token--self {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #FF8C00;
    box-shadow: 0 0 14px rgba(255, 140, 0, 0.7), 0 0 0 1px rgba(255, 140, 0, 0.4);
    overflow: hidden;
    background: var(--bg-surface);
}

.board-token-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ─── HUD Menu (right side) ───────────────────────────────────────────── */

.hud-menu {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    z-index: 30;
    padding: 0.5rem;
    background: rgba(15, 11, 30, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.hud-menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.45rem 0.4rem;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 52px;
}

.hud-menu-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    transition: color 0.2s ease, filter 0.2s ease;
}

/* FA icon styling for HUD menu buttons */
i.hud-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    --fa-primary-color: var(--text-secondary);
    --fa-secondary-color: var(--purple);
    --fa-secondary-opacity: 0.35;
}

.hud-menu-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border);
    color: var(--text);
}

.hud-menu-btn:hover .hud-menu-icon {
    filter: brightness(1.1) saturate(1.1);
}
.hud-menu-btn:hover i.hud-menu-icon {
    --fa-primary-color: var(--text);
    --fa-secondary-color: var(--primary-light);
    --fa-secondary-opacity: 0.5;
    filter: none;
}

.hud-menu-btn--active {
    background: var(--bg-elevated);
    border-color: var(--primary);
    color: var(--primary-light);
    box-shadow: 0 0 12px rgba(244, 113, 181, 0.2);
}

.hud-menu-btn--active .hud-menu-icon {
    filter: brightness(1.2) saturate(1.2);
}
.hud-menu-btn--active i.hud-menu-icon {
    --fa-primary-color: var(--primary-light);
    --fa-secondary-color: var(--cyan);
    --fa-secondary-opacity: 0.6;
    filter: none;
}

/* ─── HUD Slide-out Panel ──────────────────────────────────────────────── */

.hud-panel {
    position: absolute;
    right: 80px;
    top: 3rem;
    bottom: 0.5rem;
    width: 360px;
    max-width: calc(100vw - 100px);
    background: rgba(26, 21, 48, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    z-index: 25;
    display: flex;
    flex-direction: column;
    transform: translateX(calc(100% + 80px));
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    pointer-events: none;
    overflow: hidden;
}

.hud-panel--open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.hud-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.hud-panel-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}

.hud-panel-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: background 0.2s, color 0.2s;
}

.hud-panel-close:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.hud-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    scrollbar-color: var(--border-focus) transparent;
}

/* ─── Section Titles in Panels ─────────────────────────────────────────── */

.hud-section-title {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
    margin-top: 0.75rem;
}

.hud-section-title:first-child {
    margin-top: 0;
}

/* ─── Player List (in panel) ───────────────────────────────────────────── */

.player-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.player-list-row {
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border: 1px solid transparent;
    transition: border-color 0.2s;
    overflow: hidden;
}

.player-list-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
}

.player-list-header:hover {
    background: var(--bg-hover);
}

.player-list-row--me {
    border-color: rgba(34, 211, 238, 0.3);
    background: rgba(34, 211, 238, 0.05);
}

.player-list-row--expanded {
    border-color: var(--border-focus);
}

.player-list-row--out {
    opacity: 0.4;
}

.player-list-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
}

.player-expand-chevron {
    color: var(--text-tertiary);
    font-size: 0.65rem;
}

.player-list-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.player-list-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border);
}

.player-list-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 0.85rem;
}

/* Connection indicator dot in player list */
.player-conn-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-elevated);
}

.player-conn-dot--online { background: var(--success); }
.player-conn-dot--offline { background: var(--text-tertiary); }

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

.player-list-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.player-list-name-link {
    cursor: pointer;
    transition: color 0.15s;
}
.player-list-name-link:hover {
    color: var(--primary-light);
}

.player-list-stats {
    display: flex;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
    flex-wrap: wrap;
}

.hud-badge--human {
    background: rgba(167, 139, 250, 0.15);
    color: var(--purple);
    font-size: 0.55rem;
    padding: 0.1rem 0.3rem;
    border-radius: 6px;
}

/* ─── Player Detail (expanded card) ──────────────────────────────────── */

.player-detail {
    padding: 0.5rem 0.75rem 0.75rem;
    border-top: 1px solid var(--border);
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 500px; }
}

.player-detail-stats {
    display: flex;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.player-detail-section {
    margin-bottom: 0.5rem;
}

.player-detail-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.3rem;
}

.player-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.player-detail-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    padding: 0.15rem 0.4rem;
    background: var(--bg-hover);
    border-radius: 6px;
    color: var(--text-secondary);
}

.player-detail-tag--sub {
    border: 1px solid rgba(244, 113, 181, 0.25);
    color: var(--primary-light);
}

.player-detail-activity {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: 180px;
    overflow-y: auto;
}

.player-detail-act {
    font-size: 0.7rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    line-height: 1.4;
}

.player-detail-act-turn {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-tertiary);
    min-width: 1.8rem;
    flex-shrink: 0;
}

.player-detail-bot {
    background: rgba(167, 139, 250, 0.06);
    border-radius: 8px;
    padding: 0.5rem;
}

.player-detail-bot-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 0.3rem;
}

.player-detail-bot-meta {
    font-size: 0.68rem;
    color: var(--text-tertiary);
}

/* ─── Action Log Compact ───────────────────────────────────────────────── */

.action-log-compact {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
}

.action-log-compact .log-entry {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.78rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    background: var(--bg-elevated);
}

.action-log-compact .log-entry.log-success { border-left: 3px solid var(--success); }
.action-log-compact .log-entry.log-fail { border-left: 3px solid var(--danger); }

/* ─── Travel Choice Modal ──────────────────────────────────────────────── */

.travel-choice-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 11, 30, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.travel-choice-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    min-width: 280px;
    max-width: 360px;
}

.travel-choice-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.travel-choice-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    background: var(--bg-elevated);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.travel-choice-btn:hover {
    border-color: var(--primary);
    background: var(--bg-hover);
    transform: translateY(-1px);
}

.travel-choice-icon { font-size: 1.3rem; }
.travel-choice-label { font-weight: 700; flex: 1; text-align: left; }
.travel-choice-cost { font-size: 0.75rem; color: var(--secondary); font-weight: 600; }

.travel-choice-cancel {
    display: block;
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.8rem;
    transition: color 0.2s, background 0.2s;
}

.travel-choice-cancel:hover {
    background: var(--bg-hover);
    color: var(--text);
}

/* Move confirmation extras */
.travel-confirm-details {
    margin-bottom: 1rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.travel-confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.travel-confirm-label {
    color: var(--text-secondary);
    font-weight: 600;
}

.travel-confirm-value {
    color: var(--secondary);
    font-weight: 700;
}

.travel-choice-btn--go {
    border-color: var(--success);
    background: rgba(52, 211, 153, 0.08);
}

.travel-choice-btn--go:hover {
    border-color: var(--success);
    background: rgba(52, 211, 153, 0.15);
    box-shadow: 0 0 16px rgba(52, 211, 153, 0.2);
}

/* Transport mode selection */
.transport-mode-panel {
    max-width: 400px;
}

.transport-mode-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.transport-mode-btn {
    align-items: flex-start;
    padding: 1rem;
}

.transport-mode-desc {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 400;
    margin-top: 0.15rem;
}

/* ─── Action Table (redesigned actions panel) ──────────────────────────── */

.action-table {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
}

.action-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-row:hover {
    border-color: var(--primary);
    background: var(--bg-hover);
    transform: translateX(3px);
    box-shadow: 0 0 12px rgba(244, 113, 181, 0.15);
}

.action-row--dimmed {
    opacity: 0.35;
    pointer-events: none;
}

.action-row-icon {
    font-size: 1.15rem;
    flex-shrink: 0;
    width: 1.6rem;
    text-align: center;
}

.action-row-name {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-row-cost {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--secondary);
    background: rgba(251, 191, 36, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(251, 191, 36, 0.2);
    white-space: nowrap;
}

.transport-badge {
    font-size: 0.75rem;
    vertical-align: middle;
}

.btn-end-turn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.7rem 1rem;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    background: var(--bg-elevated);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-end-turn:hover {
    border-color: var(--warning);
    background: rgba(251, 191, 36, 0.08);
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.15);
}

/* ─── Turn Waiting State ───────────────────────────────────────────────── */

.turn-waiting {
    text-align: center;
    padding: 24px 16px;
}
.turn-waiting-header {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--success);
    margin-bottom: 12px;
}
.turn-waiting-header i {
    margin-right: 6px;
}
.turn-waiting-list {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}
.turn-waiting-list i {
    margin-right: 6px;
    color: var(--secondary);
}
.turn-waiting-name {
    color: var(--secondary);
    font-weight: 600;
}
.turn-waiting .fa-spinner-third {
    color: var(--cyan);
    margin-right: 6px;
}

/* ─── TU Progress Bar ──────────────────────────────────────────────────── */

.tu-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 100px;
    max-width: 160px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

.tu-bar-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
}

.tu-bar-icon {
    font-size: 0.78rem;
}

.tu-bar-numbers {
    font-family: var(--font-display);
    letter-spacing: 0.02em;
}

.tu-bar-numbers strong {
    color: var(--cyan);
    font-size: 0.88rem;
}

.tu-bar-track {
    position: relative;
    width: 100%;
    height: 6px;
    background: rgba(15, 11, 30, 0.6);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    flex-direction: row-reverse;
}

.tu-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cyan), #34D399);
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.tu-bar-spent {
    height: 100%;
    background: rgba(167, 139, 250, 0.25);
    flex-shrink: 0;
}

.tu-bar--low .tu-bar-fill {
    background: linear-gradient(90deg, var(--warning), #FBBF24);
}

.tu-bar--low .tu-bar-numbers strong {
    color: var(--warning);
}

.tu-bar--critical .tu-bar-fill {
    background: linear-gradient(90deg, var(--danger), #FB7185);
    animation: tuPulse 1.2s ease-in-out infinite;
}

.tu-bar--critical .tu-bar-numbers strong {
    color: var(--danger);
}

@keyframes tuPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ─── FastLanePedia ────────────────────────────────────────────────────── */

.pedia-intro {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-style: italic;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.pedia-entry {
    margin-bottom: 0.4rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    transition: border-color 0.2s;
}

.pedia-entry[open] {
    border-color: var(--primary);
}

.pedia-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text);
    transition: background 0.2s;
    list-style: none;
}

.pedia-summary::-webkit-details-marker { display: none; }
.pedia-summary::marker { display: none; content: ''; }

.pedia-summary:hover {
    background: var(--bg-hover);
}

.pedia-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.pedia-title {
    flex: 1;
}

.pedia-entry[open] .pedia-summary {
    border-bottom: 1px solid var(--border);
    color: var(--primary-light);
}

.pedia-body {
    padding: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.pedia-body p {
    margin-bottom: 0.5rem;
}

.pedia-body p:last-child {
    margin-bottom: 0;
}

.pedia-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.25rem;
    margin: 0.4rem 0;
}

.pedia-table td {
    padding: 0.35rem 0.5rem;
    vertical-align: top;
    font-size: 0.85rem;
}

.pedia-table tr td:first-child {
    background: rgba(15, 11, 30, 0.5);
    border-radius: 6px 0 0 6px;
}

.pedia-table tr td:last-child {
    background: rgba(15, 11, 30, 0.3);
    border-radius: 0 6px 6px 0;
}

.pedia-key {
    white-space: nowrap;
    font-weight: 700;
    color: var(--text);
    min-width: 5rem;
}

.pedia-key--blitz { color: var(--danger); }
.pedia-key--standard { color: var(--warning); }
.pedia-key--marathon { color: var(--cyan); }

.pedia-tip {
    font-size: 0.82rem;
    color: var(--cyan);
    background: rgba(34, 211, 238, 0.06);
    border-left: 3px solid var(--cyan);
    padding: 0.4rem 0.6rem;
    border-radius: 0 6px 6px 0;
    margin-top: 0.5rem;
    font-style: italic;
}

/* Legacy emoji fallback — no longer used, kept for safety */
.hud-menu-icon--emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 1.2rem;
    filter: none;
}

/* ─── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .hud-menu {
        position: absolute;
        right: 0;
        left: 0;
        top: auto;
        bottom: 0;
        transform: none;
        flex-direction: row;
        justify-content: space-around;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding: 0.4rem 0.5rem;
        gap: 0;
    }

    .hud-menu-btn {
        min-width: 0;
        padding: 0.3rem;
        font-size: 0.5rem;
        min-height: 44px;
        justify-content: center;
    }

    .hud-menu-icon {
        width: 22px;
        height: 22px;
    }

    .hud-panel {
        right: 0;
        left: 0;
        bottom: 54px;
        top: auto;
        max-height: 60vh;
        width: auto;
        max-width: none;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        transform: translateY(100%);
    }

    .hud-panel--open {
        transform: translateY(0);
    }

    .game-board-area {
        padding: 0.5rem;
        padding-bottom: 70px;
    }

    .action-row {
        min-height: 44px;
    }

    .travel-choice-btn {
        min-height: 48px;
    }

    /* Mobile HUD: two-row layout */
    .hud-top {
        flex-wrap: wrap;
        padding: 0.25rem 0.5rem;
        gap: 0.2rem 0.5rem;
    }

    .hud-game-name { display: none; }

    /* Row 1: Turn/timer (left) + Resources/tools (right) */
    .hud-top-center { order: 1; flex-shrink: 0; }
    .hud-top-right { order: 2; flex: 1; justify-content: flex-end; }

    /* Row 2: Win conditions (full width) */
    .hud-top-left { order: 3; width: 100%; }
    .hud-win-conditions {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0.25rem;
    }
    .hud-win-conditions::-webkit-scrollbar { display: none; }

    .hud-wc { padding: 0.15rem 0.35rem; font-size: 0.65rem; }
    .hud-wc-target { display: none; }
    .hud-wc-sep { display: none; }
    .hud-turn-info { font-size: 0.72rem; }
    .hud-pdot { width: 24px; height: 24px; }
    .hud-presence { gap: 0.2rem; }
    .hud-resources { gap: 0.35rem; }
    .hud-tools { gap: 0.15rem; }

    .board-tile { width: 18%; }
    .board-container {
        aspect-ratio: 1 / 1;
    }

    .board-tile-label {
        font-size: 0.85rem;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 0;
        background: rgba(15, 11, 30, 0.88);
        padding: 0.15rem 0.5rem;
        border-radius: 0 0 10px 10px;
        white-space: nowrap;
    }

    .board-edge-label { font-size: 18px; }
    .board-token--self { width: 32px; height: 32px; }
}

@media (max-width: 480px) {
    .board-tile { width: 20%; }
    .board-tile-label { font-size: 0.75rem; }
    .board-edge-label { font-size: 30px; font-weight: 800; }
    .board-edge-pill { opacity: 0.9; }
    .hud-stat { font-size: 0.72rem; }

    /* Win conditions hidden — top-left collapses to zero height */
    .hud-win-conditions { display: none; }
    .hud-top-left { display: none; }

    .hud-tools { gap: 0.15rem; }
    .hud-tool-btn { padding: 0.2rem 0.3rem; font-size: 0.72rem; }

    /* Compact presence on small phones */
    .hud-pdot { width: 20px; height: 20px; }
    .hud-pdot-initial { font-size: 0.55rem; }

    /* Icon-only bottom bar on small phones */
    .hud-menu-btn {
        padding: 0.25rem 0.2rem;
    }
    .hud-menu-btn span {
        display: none;
    }

    .hud-panel {
        max-height: 65vh;
    }

    .board-container {
        max-width: 100vw;
    }
}

/* ─── Shop Catalog ──────────────────────────────────────────────────────── */

.shop-catalog {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.shop-category {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.shop-cat-header {
    background: var(--bg-elevated);
    padding: 0.4rem 0.75rem;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    letter-spacing: 0.02em;
}

.shop-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(61, 52, 96, 0.3);
}

.shop-item:last-child {
    border-bottom: none;
}

.shop-item:hover {
    background: var(--bg-hover);
}

.shop-item--locked {
    opacity: 0.55;
}

.shop-item--expanded {
    background: var(--bg-elevated);
}

.shop-item-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.shop-item-name {
    flex: 1;
    color: var(--text);
    font-weight: 600;
}

.shop-item-price {
    color: var(--secondary);
    font-weight: 700;
    font-size: 0.8rem;
    white-space: nowrap;
}

.shop-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 0.3rem;
}

.shop-badge--owned {
    background: rgba(52, 211, 153, 0.2);
    color: var(--success);
}

.shop-badge--locked {
    background: rgba(251, 113, 133, 0.15);
    color: var(--danger);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-item-details {
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.875rem;
}

.shop-item-desc {
    color: var(--text-secondary);
    margin: 0 0 0.4rem 0;
    line-height: 1.45;
}

.shop-item-info {
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    line-height: 1.45;
}

.shop-item-flavor {
    font-style: italic;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
}

.shop-item--current {
    border-color: var(--cyan);
    opacity: 0.85;
}

.badge-current {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--cyan);
    border: 1px solid var(--cyan);
    border-radius: 6px;
    padding: 0.1rem 0.45rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.shop-detail-label {
    color: var(--text-tertiary);
    font-weight: 600;
}

.shop-item-reason {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.3rem;
    font-style: italic;
}

.btn-shop-buy {
    background: var(--gradient-btn);
    color: #fff;
    border: none;
    padding: 0.35rem 0.9rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s;
}

.btn-shop-buy:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(244, 113, 181, 0.3);
}

.mt-05 { margin-top: 0.35rem; }

/* ─── Buy Confirmation Dialog ───────────────────────────────────────────── */

.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 11, 30, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}

.confirm-dialog {
    background: var(--bg-surface);
    border: 1px solid var(--border-focus);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    text-align: center;
    max-width: 320px;
    width: 90%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.confirm-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.4rem;
}

.confirm-cost {
    font-size: 1rem;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 1rem;
}

.confirm-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.confirm-buttons .btn {
    min-width: 90px;
}

.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 2px solid var(--border);
    padding: 0.35rem 0.9rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s;
}

.btn-secondary:hover {
    border-color: var(--border-focus);
}

/* ─── Quantity Stepper (food bulk buy) ─── */
.qty-stepper {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-focus);
    background: var(--bg-elevated);
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.qty-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.qty-val {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cyan);
    min-width: 1.5rem;
    text-align: center;
}

/* ─── Food HUD stat ─── */
.hud-stat-food {
    color: var(--success);
}

/* ─── Bank Action UI ──────────────────────────────────────────────────────── */

.bank-account-summary {
    background: rgba(15, 11, 30, 0.5);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.5rem;
}

.bank-account-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.15rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.bank-account-row + .bank-account-row {
    border-top: 1px solid rgba(61, 52, 96, 0.4);
    margin-top: 0.15rem;
    padding-top: 0.25rem;
}

.bank-account-rate {
    font-weight: 600;
}

.bank-amount-section {
    margin-top: 0.4rem;
}

.bank-amount-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bank-amount-input {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    padding: 0.4rem 0.6rem;
    text-align: center;
    font-family: var(--font-display);
    outline: none;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
}

.bank-amount-input::-webkit-outer-spin-button,
.bank-amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bank-amount-input:focus {
    border-color: var(--border-focus);
}

.bank-presets {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

.btn-bank-preset {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.3rem;
    cursor: pointer;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.btn-bank-preset:hover {
    background: var(--bg-hover);
    color: var(--text);
    border-color: var(--border-focus);
}

.btn-bank-preset--all {
    color: var(--cyan);
    border-color: rgba(34, 211, 238, 0.3);
}

.btn-bank-preset--all:hover {
    border-color: var(--cyan);
}

.bank-empty-notice {
    color: var(--text-tertiary);
    font-size: 0.8rem;
    font-style: italic;
    padding: 0.3rem 0;
}

/* ─── HUD Stat Colors ─────────────────────────────────────────────────── */

.hud-stat--credits { color: #FBBF24; }
.hud-stat--rep { color: #F471B5; }
.hud-stat--uptime { color: #34D399; }
.hud-stat--warning { color: #FBBF24 !important; }
.hud-stat--danger { color: #FB7185 !important; animation: timerPulse 1.2s ease-in-out infinite; }

/* ─── History Charts Panel ─────────────────────────────────────────────── */

.history-charts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.25rem 0;
}

.history-chart-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    transition: border-color 0.2s;
}

.history-chart-card:hover {
    border-color: var(--border-focus);
}

.history-chart-title {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.history-svg {
    width: 100%;
    height: auto;
    display: block;
}

.history-axis-label {
    font-family: var(--font-mono);
    font-size: 8px;
    fill: var(--text-tertiary);
}

.history-value-label {
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 700;
    text-anchor: start;
}

.history-chart-legend {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.history-legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.history-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* ─── Mobile adjustments ───────────────────────────────────────────────── */

@media (max-width: 600px) {
    .history-chart-card { padding: 0.5rem; }
    .history-chart-title { font-size: 0.75rem; }
}

/* ─── Job Skill Badges ─────────────────────────────────────────────── */
.job-skill-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    vertical-align: middle;
    margin-left: 0.2rem;
}
.job-skill-tech    { background: rgba(34,211,238,0.18); color: var(--cyan); }
.job-skill-charm   { background: rgba(244,113,181,0.18); color: var(--primary); }
.job-skill-labor   { background: rgba(251,191,36,0.18); color: var(--secondary); }
.job-skill-business{ background: rgba(167,139,250,0.18); color: var(--purple); }

/* ─── Danger-outline button for cancel subscription ────────────────── */
.btn-danger-outline {
    background: transparent !important;
    border: 1.5px solid var(--danger);
    color: var(--danger);
}
.btn-danger-outline:hover {
    background: rgba(251,113,133,0.12) !important;
}


/* ─── News Dialog (center-screen dismissible) ────────────────────────────── */

.news-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 11, 30, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.news-dialog {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    min-width: 300px;
    max-width: 440px;
    width: 90vw;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(167, 139, 250, 0.08);
    animation: dialogPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dialogPop {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.news-dialog-header {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    letter-spacing: 0.03em;
}

.news-dialog-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    margin-bottom: 0.75rem;
}

.news-dialog-item--up { border-left: 3px solid var(--success); }
.news-dialog-item--down { border-left: 3px solid var(--danger); }

.news-dialog-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.news-dialog-item--up .news-dialog-icon { color: var(--success); }
.news-dialog-item--down .news-dialog-icon { color: var(--danger); }

.news-dialog-content { flex: 1; min-width: 0; }

.news-dialog-headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.news-dialog-body {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.news-dialog-tag {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.news-dialog-dismiss {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.6rem;
    font-size: 0.9rem;
}

/* ─── Victory Condition Badges (HUD top bar) ─────────────────────────────── */
.hud-badge--credits { color: #FBBF24; border-color: rgba(251, 191, 36, 0.3); }
.hud-badge--credits .fad { --fa-primary-color: #FBBF24; --fa-secondary-color: #F59E0B; }
.hud-badge--skills { color: #A78BFA; border-color: rgba(167, 139, 250, 0.3); }
.hud-badge--skills .fad { --fa-primary-color: #A78BFA; --fa-secondary-color: #8B5CF6; }
.hud-badge--rep { color: #F471B5; border-color: rgba(244, 113, 181, 0.3); }
.hud-badge--rep .fad { --fa-primary-color: #F471B5; --fa-secondary-color: #C084FC; }
.hud-badge--uptime { color: #34D399; border-color: rgba(52, 211, 153, 0.3); }
.hud-badge--uptime .fad { --fa-primary-color: #34D399; --fa-secondary-color: #10B981; }

/* ─── Applied Job Badge ──────────────────────────────────────────────────── */
.shop-item-price--applied {
    color: var(--text-tertiary);
    font-style: italic;
}
.shop-item-price--applied .fad {
    --fa-primary-color: var(--text-tertiary);
    --fa-secondary-color: var(--text-tertiary);
    margin-right: 0.2rem;
}


/* ─── Financial Warning Dialog ─────────────────────────────────────────────── */

.finwarn-dialog {
    background: var(--bg-surface);
    border: 2px solid var(--danger);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 420px;
    width: 90vw;
    text-align: center;
    box-shadow: 0 0 40px rgba(251, 113, 133, 0.3);
    animation: finwarn-shake 0.5s ease-out;
}

@keyframes finwarn-shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-8px); }
    30% { transform: translateX(8px); }
    45% { transform: translateX(-5px); }
    60% { transform: translateX(5px); }
    75% { transform: translateX(-2px); }
}

.finwarn-header {
    font-family: 'Fredoka', 'Nunito', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--danger);
    margin-bottom: 0.75rem;
}

.finwarn-header .fad {
    margin-right: 0.4rem;
    --fa-primary-color: var(--danger);
    --fa-secondary-color: var(--secondary);
}

.finwarn-message {
    color: var(--text);
    font-size: 0.95rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.finwarn-bills {
    background: var(--bg-elevated);
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.finwarn-bill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
}

.finwarn-bill + .finwarn-bill {
    border-top: 1px solid var(--border);
}

.finwarn-bill-type {
    color: var(--text-secondary);
    text-transform: capitalize;
    font-size: 0.9rem;
}

.finwarn-bill-amount {
    color: var(--danger);
    font-weight: 600;
    font-size: 0.9rem;
}

.finwarn-cancelled {
    margin-bottom: 0.75rem;
}

.finwarn-cancelled-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.finwarn-cancelled-tag {
    display: inline-block;
    background: rgba(251, 113, 133, 0.15);
    color: var(--danger);
    font-size: 0.8rem;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    text-transform: capitalize;
    margin: 0.15rem;
}

.finwarn-balance {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.finwarn-balance strong {
    color: var(--text);
}

.finwarn-dismiss {
    width: 100%;
}


/* ─── Turn Recap Dialog ────────────────────────────────────────────────────── */

.turn-recap-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 11, 30, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    animation: fadeIn 0.2s ease;
    padding: 1rem;
}

.turn-recap-dialog {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    min-width: 340px;
    max-width: 520px;
    width: 95vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 80px rgba(244, 113, 181, 0.08);
    animation: dialogPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.turn-recap-header {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.25rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.turn-recap-header .fad {
    -webkit-text-fill-color: initial;
    color: var(--primary);
    margin-right: 0.4rem;
}

.turn-recap-subheader {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.turn-recap-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.recap-section {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem;
}

.recap-section-title {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.6rem;
}

.recap-section-title .fad {
    margin-right: 0.35rem;
    color: var(--primary-light);
}

/* News items */
.recap-news-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text);
    margin-bottom: 0.3rem;
}

.recap-news-item--up { background: rgba(52, 211, 153, 0.08); }
.recap-news-item--down { background: rgba(251, 113, 133, 0.08); }
.recap-news-item--up .recap-news-icon { color: var(--success); }
.recap-news-item--down .recap-news-icon { color: var(--danger); }

.recap-news-icon { flex-shrink: 0; font-size: 0.75rem; }
.recap-news-text { font-weight: 600; }

/* Scoreboard */
.recap-scoreboard {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.recap-player {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border);
}

.recap-player--out {
    opacity: 0.4;
}

.recap-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.recap-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    color: var(--text);
    font-weight: 700;
    font-size: 0.75rem;
}

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

.recap-player-name {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text);
    margin-bottom: 0.15rem;
}

.recap-player-stats {
    display: flex;
    gap: 0.6rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.recap-player-stats .fad { margin-right: 0.15rem; }

/* Action log */
.recap-action-group {
    margin-bottom: 0.6rem;
}

.recap-action-group:last-child { margin-bottom: 0; }

.recap-action-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.recap-action-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.recap-action-name {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text);
}

.recap-action-list {
    padding-left: 1.6rem;
}

.recap-action-item {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.recap-action-item .fad { margin-right: 0.25rem; font-size: 0.7rem; }

.turn-recap-dismiss {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.65rem;
    font-size: 0.95rem;
    font-weight: 700;
}

/* Custom scrollbar for recap dialog */
.turn-recap-dialog::-webkit-scrollbar { width: 6px; }
.turn-recap-dialog::-webkit-scrollbar-track { background: transparent; }
.turn-recap-dialog::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

@media (max-width: 480px) {
    .turn-recap-dialog { padding: 1rem; }
    .recap-player-stats { gap: 0.4rem; font-size: 0.65rem; }
}


/* ─── Collapsible Section Title ──────────────────────────────────────────── */

.hud-section-title--toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.15s ease;
}
.hud-section-title--toggle:hover {
    color: var(--primary-light);
}
.hud-section-title--toggle .fad {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
}


/* ─── Credit Rating Card ─────────────────────────────────────────────────── */

.credit-rating-card {
    background: var(--bg-elevated);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
}

.credit-rating-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.credit-rating-grade {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    min-width: 3rem;
    text-align: center;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--bg-hover);
}

/* Grade colors */
.credit-grade-aaa { color: #34D399; border: 1px solid #34D399; }
.credit-grade-aa  { color: #6EE7B7; border: 1px solid #6EE7B7; }
.credit-grade-a   { color: #A7F3D0; border: 1px solid #A7F3D0; }
.credit-grade-bbb { color: #FBBF24; border: 1px solid #FBBF24; }
.credit-grade-bb  { color: #FCD34D; border: 1px solid #FCD34D; }
.credit-grade-b   { color: #FDE68A; border: 1px solid #FDE68A; }
.credit-grade-ccc { color: #FB923C; border: 1px solid #FB923C; }
.credit-grade-cc  { color: #FB7185; border: 1px solid #FB7185; }
.credit-grade-c   { color: #F43F5E; border: 1px solid #F43F5E; }
.credit-grade-d   { color: #EF4444; border: 1px solid #EF4444; }

.credit-rating-details {
    flex: 1;
}

.credit-rating-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}

.credit-rating-score {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.credit-rating-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px 12px;
}

.credit-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.credit-stat span:last-child {
    font-weight: 600;
    font-family: var(--font-display);
}


/* ─── Collapsible Section Title ──────────────────────────────────────────── */

.hud-section-title--toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.15s ease;
}
.hud-section-title--toggle:hover {
    color: var(--primary-light);
}
.hud-section-title--toggle .fad {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
}


/* ─── Credit Rating Card ─────────────────────────────────────────────────── */

.credit-rating-card {
    background: var(--bg-elevated);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
}

.credit-rating-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.credit-rating-grade {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    min-width: 3rem;
    text-align: center;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--bg-hover);
}

/* Grade colors */
.credit-grade-aaa { color: #34D399; border: 1px solid #34D399; }
.credit-grade-aa  { color: #6EE7B7; border: 1px solid #6EE7B7; }
.credit-grade-a   { color: #A7F3D0; border: 1px solid #A7F3D0; }
.credit-grade-bbb { color: #FBBF24; border: 1px solid #FBBF24; }
.credit-grade-bb  { color: #FCD34D; border: 1px solid #FCD34D; }
.credit-grade-b   { color: #FDE68A; border: 1px solid #FDE68A; }
.credit-grade-ccc { color: #FB923C; border: 1px solid #FB923C; }
.credit-grade-cc  { color: #FB7185; border: 1px solid #FB7185; }
.credit-grade-c   { color: #F43F5E; border: 1px solid #F43F5E; }
.credit-grade-d   { color: #EF4444; border: 1px solid #EF4444; }

.credit-rating-details {
    flex: 1;
}

.credit-rating-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}

.credit-rating-score {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.credit-rating-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px 12px;
}

.credit-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.credit-stat span:last-child {
    font-weight: 600;
    font-family: var(--font-display);
}


/* ── Elimination & Spectator Mode ─────────────────────────────────── */

/* Turn recap elimination banner */
.recap-elim-banner {
    background: linear-gradient(135deg, rgba(251,113,133,0.15), rgba(251,113,133,0.05));
    border: 1px solid rgba(251,113,133,0.4);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    margin-bottom: 1rem;
}
.recap-elim-icon {
    font-size: 2.5rem;
    color: var(--danger);
    margin-bottom: 0.5rem;
}
.recap-elim-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--danger);
    margin-bottom: 0.35rem;
}
.recap-elim-reason {
    color: var(--text);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}
.recap-elim-spectate {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
}

/* Other players eliminated this turn */
.recap-elim-other {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: rgba(251,113,133,0.08);
    border-radius: 8px;
    margin-bottom: 0.35rem;
}
.recap-elim-other-name {
    font-weight: 600;
    color: var(--text);
}
.recap-elim-other-reason {
    color: var(--danger);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Spectator panel (replaces actions panel when dead) */
.spectator-panel {
    text-align: center;
    padding: 2rem 1rem;
}
.spectator-icon {
    font-size: 2.5rem;
    color: var(--text-tertiary);
    margin-bottom: 0.75rem;
    opacity: 0.7;
}
.spectator-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.spectator-reason {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}
.spectator-info {
    color: var(--text-tertiary);
    font-size: 0.85rem;
    font-style: italic;
}

/* HUD spectating badge */
.hud-badge--dead {
    background: rgba(251,113,133,0.2);
    color: var(--danger);
    border: 1px solid rgba(251,113,133,0.4);
    animation: pulse-dead 2s ease-in-out infinite;
}
@keyframes pulse-dead {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Game fullscreen spectating overlay — subtle desaturation */
.game-fullscreen--spectating {
    position: relative;
}
.game-fullscreen--spectating .game-board-area {
    filter: saturate(0.6) brightness(0.85);
    pointer-events: auto;
}
.game-fullscreen--spectating .hud-menu-btn[data-panel="actions"] {
    opacity: 0.5;
}

/* Victory screen dead player styling */
.victory-rank--dead {
    opacity: 0.65;
    border-left: 3px solid var(--danger);
}
.victory-rank--dead .victory-rank-medal {
    opacity: 0.5;
}
.victory-rank-elim {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--danger);
    font-weight: 500;
    margin-left: 0.5rem;
    opacity: 0.9;
}
.victory-rank-elim i {
    margin-right: 0.2rem;
    font-size: 0.7rem;
}