:root {
    --bg-color: #0f172a;
    --panel-bg: rgba(30, 41, 59, 0.95);
    --border-color: rgba(148, 163, 184, 0.2);
    --accent: #38bdf8;
    --accent-hover: #0ea5e9;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    
    --health: #fb7185;
    --money: #fbbf24;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #000;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* Use dynamic viewport height to handle address bar on mobile */
    height: 100dvh;
    width: 100vw;
    margin: 0;
    overflow: hidden;
    /* Prevent pull-to-refresh on mobile */
    overscroll-behavior: none;
}

#app {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    /* Use dynamic viewport height to handle address bar on mobile */
    height: 100dvh;
    padding: 0;
    gap: 0;
}

.interactive {
    cursor: pointer;
    transition: all 0.2s;
}

.interactive:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

#top-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: 20px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    flex-shrink: 0;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
    z-index: 110;
    position: relative;
}

#top-bar-stats {
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: center;
}

#top-bar-controls {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center;
}

/* WAVE stat-box: relative container so the countdown floats below without
   adding height to the flex row. All other stat boxes stay unaffected. */
#top-bar-stats .stat-box:first-child {
    position: relative;
}

#wave-display {
    /* no special positioning needed — countdown anchors to the stat-box */
}

#air-countdown {
    position: absolute;
    top: 100%;
    left: 0;
    white-space: nowrap;
    margin-top: -1px;
    line-height: 1;
}

#top-bar-overflow {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center;
}

#overflow-btn {
    display: none; /* desktop: hidden; mobile query flips this on */
}

/* Proxy items only exist for the mobile overflow popover — hide on desktop */
.overflow-speed-proxy,
.overflow-auto-proxy {
    display: none;
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-box .label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    font-family: 'Outfit', sans-serif;
    line-height: 1;
}

.stat-box .value {
    font-size: 1.3rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    line-height: 1.2;
}

#health-display { color: var(--health); text-shadow: 0 0 10px rgba(251, 113, 133, 0.4); }
#money-display { color: var(--money); text-shadow: 0 0 10px rgba(251, 191, 36, 0.4); }
#wave-display { color: var(--accent); text-shadow: 0 0 10px rgba(56, 189, 248, 0.4); }
/* speed-display color is set dynamically by updateSpeedColor() in JS */
#speed-display { text-shadow: 0 0 10px rgba(163, 230, 53, 0.4); }
#seed-display { color: var(--text-muted); }
#restart-display { color: var(--health); }

/* Toggle buttons: white when OFF, green when ON */
#pause-display, #autopilot-display, #sound-display { 
    color: var(--text-main); 
    text-shadow: none; 
    transition: color 0.2s, text-shadow 0.2s; 
}

/* All toggle buttons go green when ON — consistent colour language */
#pause-display.on,
#autopilot-display.on,
#sound-display.on,
.proxy-value.on {
    color: #4ade80;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

/* Keep legacy .paused class working (used elsewhere) */
#pause-display.paused {
    color: #4ade80;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

#content {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    min-height: 0;
}

#game-container {
    position: relative;
    background-color: var(--bg-color);
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

canvas {
    max-width: 100%;
    max-height: 100%;
    touch-action: none;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

#build-menu {
    width: 250px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-shrink: 0;
    background: var(--panel-bg);
    border-left: 1px solid var(--border-color);
    overflow-y: auto;
    position: relative;
}

#build-menu h3 {
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 5px;
}

.tower-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tower-option:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.tower-option.selected {
    border-color: var(--accent);
    background: rgba(56, 189, 248, 0.1);
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
}

.tower-option.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(1);
}

.tower-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    flex-shrink: 0;
}

.basic-icon { border-color: #38bdf8; background: #0284c7; }
.sniper-icon { border-color: #f472b6; background: #be185d; border-radius: 0; }
.rapid-icon { border-color: #a3e635; background: #4d7c0f; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); border-radius: 0; border: none; }
.laser-icon { border-color: #8b5cf6; background: #6d28d9; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); border-radius: 0; border: none; }
.rocket-icon { border-color: #f97316; background: #c2410c; border-radius: 8px; }
.flak-icon { border-color: #60a5fa; background: #1e3a8a; clip-path: polygon(20% 100%, 80% 100%, 100% 50%, 80% 0%, 20% 0%, 0% 50%); border-radius: 0; border: none; }
.electric-icon { border-color: #0ea5e9; background: #0284c7; border-radius: 50%; outline: 2px dashed #38bdf8; outline-offset: -4px; }
.silo-icon { border-color: #ef4444; background: #991b1b; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); border-radius: 0; border: none; }
.income-icon { border-color: #fbbf24; background: #92400e; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); border-radius: 0; border: none; }
.potion-icon { border-color: #4ade80; background: #166534; border-radius: 50% 50% 40% 40%; }

.tower-info {
    display: flex;
    flex-direction: column;
}

.tower-info .name {
    font-weight: 700;
    font-size: 1rem;
}

.tower-info .cost {
    font-size: 0.8rem;
    color: var(--money);
}

/* Upgrade Menu */
#upgrade-menu {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 320px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid var(--accent);
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
    z-index: 20;
}

#upgrade-menu.hidden {
    display: none;
}

.upgrade-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--accent);
}

.upgrade-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-muted);
    background: rgba(0,0,0,0.4);
    padding: 10px;
    border-radius: 6px;
}

.upgrade-actions button {
    width: 100%;
    font-size: 0.9rem;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.upgrade-actions button.danger {
    border-color: var(--health);
    color: var(--health);
    box-shadow: 0 0 10px rgba(251, 113, 133, 0.1) inset;
}

.upgrade-actions button.danger:hover {
    background: var(--health);
    color: #0f172a;
    box-shadow: 0 0 15px rgba(251, 113, 133, 0.5);
}

.upgrade-actions button .cost {
    font-size: 0.85rem;
    opacity: 0.8;
}

.upgrade-item {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}
.upgrade-item:hover {
    background: #2dd4bf;
    border-color: #2dd4bf;
    color: #0f172a;
}
.upgrade-item.disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(100%);
}
.upg-info { display: flex; flex-direction: column; text-align: left; }
.upg-name { font-weight: bold; font-size: 14px; }
.upg-desc { font-size: 11px; opacity: 0.8; margin-top: 2px;}
.upg-cost { font-weight: bold; color: #fde047; font-size: 14px;}
.upgrade-item:hover .upg-cost { color: #0f172a; }
.upg-level { font-size: 10px; background: #334155; padding: 2px 4px; border-radius: 4px; margin-left: 5px; color: #fff; }

/* Overlays */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.overlay.hidden {
    display: none;
}

.overlay h1 {
    font-size: 4rem;
    color: var(--accent);
    text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
    margin-bottom: 10px;
    letter-spacing: 4px;
    text-align: center;
}

.overlay h2 {
    font-size: 3rem;
    color: var(--health);
    text-shadow: 0 0 20px rgba(251, 113, 133, 0.5);
    margin-bottom: 20px;
}

.overlay p {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 40px;
    text-align: center;
}

button {
    background: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
    padding: 12px 30px;
    font-size: 1.2rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.2s ease;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.2) inset;
}

button:hover {
    background: var(--accent);
    color: #0f172a;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.6);
}

button.danger {
    color: var(--health);
    border-color: var(--health);
    box-shadow: 0 0 15px rgba(251, 113, 133, 0.2) inset;
}

button.danger:hover {
    background: var(--health);
    box-shadow: 0 0 20px rgba(251, 113, 133, 0.6);
}

/* ─── Touch-UI layout ────────────────────────────────────────────────────────
   Applied via body.touch-ui (set by JS input detection) so any touchscreen
   gets the touch-friendly layout regardless of screen size.
   Pure mouse users never get this class, so desktop experience is unchanged.
   The existing @media (max-width: 768px) block below acts as a size-based
   fallback for small screens that haven't fired a touch event yet.
   ─────────────────────────────────────────────────────────────────────────── */
body.touch-ui #top-bar {
    padding: 6px 16px;
    padding-top: max(6px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    gap: 6px;
}
body.touch-ui #top-bar-stats {
    gap: 14px;
    flex-shrink: 0;
}
body.touch-ui #top-bar-controls {
    gap: 10px;
    flex-shrink: 1;
    flex-wrap: nowrap;
    overflow: visible;
}
body.touch-ui .stat-box .label {
    font-size: 0.6rem;
    letter-spacing: 0.6px;
    line-height: 1;
}
body.touch-ui .stat-box .value {
    font-size: 1rem;
    line-height: 1.1;
}
body.touch-ui .stat-box.interactive {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 2px 4px;
    border-radius: 6px;
}
body.touch-ui #top-bar-stats .stat-box {
    min-width: 0;
    min-height: 0;
    padding: 0;
}
body.touch-ui #air-countdown {
    font-size: 0.5rem !important;
}
body.touch-ui #top-bar-overflow {
    position: absolute;
    top: 100%;
    right: max(4px, env(safe-area-inset-right));
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 8px 12px;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    z-index: 120;
    display: none;
    min-width: 130px;
    overflow: hidden;
}
body.touch-ui #top-bar-overflow.open {
    display: flex;
}
body.touch-ui #top-bar-overflow.open::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    height: 2px; width: 100%;
    background: var(--accent);
    transform-origin: left center;
    transform: scaleX(1);
    border-radius: 0 0 8px 8px;
}
body.touch-ui #top-bar-overflow.overflow-counting::after {
    animation: overflow-countdown 2s linear forwards;
}
body.touch-ui #top-bar-overflow .stat-box.interactive {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: 40px;
    padding: 6px 10px;
    gap: 12px;
}
body.touch-ui #top-bar-overflow .stat-box .label { font-size: 0.65rem; }
body.touch-ui #top-bar-overflow .stat-box .value { font-size: 0.95rem; }
body.touch-ui #overflow-btn {
    display: flex;
    flex-shrink: 0;
}
body.touch-ui #overflow-btn .value {
    font-size: 1.4rem;
    line-height: 1;
}
body.touch-ui #speed-btn,
body.touch-ui #ability-btn,
body.touch-ui #autopilot-btn {
    display: none !important;
}
body.touch-ui .overflow-speed-proxy,
body.touch-ui .overflow-auto-proxy {
    display: flex;
}
/* Portrait only — landscape overrides to row below */
@media (orientation: portrait) {
    body.touch-ui #content {
        flex-direction: column;
    }
}
body.touch-ui #build-menu {
    width: 100%;
    height: auto;
    flex-direction: row;
    border-left: none;
    border-top: 1px solid var(--border-color);
    padding: 10px 16px;
    padding-bottom: max(44px, env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    min-height: 100px;
    scroll-snap-type: x proximity;
    align-items: center;
}
body.touch-ui #build-menu > h3,
body.touch-ui #build-menu > hr {
    display: none;
}
body.touch-ui .tower-option {
    flex-shrink: 0;
    width: 76px;
    min-height: 78px;
    flex-direction: column;
    padding: 8px 6px;
    gap: 4px;
    align-items: center;
    justify-content: center;
    text-align: center;
    scroll-snap-align: start;
}
body.touch-ui .tower-option.dragging {
    opacity: 0.4;
    border-color: var(--accent);
    transform: scale(0.95);
}
body.touch-ui .tower-icon { width: 32px; height: 32px; }
body.touch-ui .tower-info { align-items: center; text-align: center; }
body.touch-ui .tower-info .name {
    font-size: 0.7rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
}
body.touch-ui .tower-info .cost { font-size: 0.7rem; font-weight: 700; }
body.touch-ui #upgrade-menu {
    position: fixed;
    width: 100%;
    left: 0; right: 0;
    top: auto; bottom: 0;
    max-height: 50vh;
    border-radius: 14px 14px 0 0;
    border: 1px solid var(--accent);
    border-bottom: none;
    padding: 14px 16px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    overflow-y: auto;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.5), 0 0 20px rgba(56,189,248,0.3);
    z-index: 50;
    animation: sheet-up 0.18s ease-out;
}
body.touch-ui .upgrade-header { font-size: 1.1rem; }
body.touch-ui .upgrade-stats  { font-size: 0.85rem; padding: 8px 10px; }
body.touch-ui .upgrade-item   { padding: 10px 12px; min-height: 44px; }
body.touch-ui .upg-name { font-size: 0.9rem; }
body.touch-ui .upg-desc { font-size: 0.72rem; }
body.touch-ui .upg-cost { font-size: 0.9rem; }

/* Landscape touch: side-dock instead of bottom bar */
@media (orientation: landscape) {
    body.touch-ui #content { flex-direction: row; }
    body.touch-ui #build-menu {
        width: 84px;
        height: auto;
        flex-direction: column;
        border-top: none;
        border-left: 1px solid var(--border-color);
        padding: 4px;
        padding-right: max(4px, env(safe-area-inset-right));
        overflow-x: hidden;
        overflow-y: auto;
        touch-action: pan-y;
        min-height: unset;
    }
    body.touch-ui .tower-option {
        width: 100%;
        min-height: 54px;
        padding: 3px 4px;
    }
    body.touch-ui .tower-icon { width: 26px; height: 26px; }
    body.touch-ui .tower-info .name { font-size: 0.65rem; max-width: 70px; }
    body.touch-ui .tower-info .cost { font-size: 0.65rem; }
    body.touch-ui #upgrade-menu {
        max-height: 45vh;
        width: calc(100% - 84px);
        left: 0; right: 84px;
        padding: 10px 14px;
        border-radius: 12px 12px 0 0;
    }
    body.touch-ui #top-bar {
        padding: 3px 16px;
        padding-top: max(3px, env(safe-area-inset-top));
    }
    body.touch-ui #top-bar-stats { gap: 12px; }
    body.touch-ui #top-bar-controls { gap: 8px; }
    body.touch-ui .stat-box .label { font-size: 0.55rem; }
    body.touch-ui .stat-box .value { font-size: 0.9rem; }
    body.touch-ui .stat-box.interactive { min-height: 38px; min-width: 40px; padding: 1px 4px; }
    body.touch-ui #overflow-btn .value { font-size: 1.2rem; }
    body.touch-ui #air-countdown { font-size: 0.45rem !important; }
}

/* Mobile Responsive: narrow phones OR short (landscape-phone) screens.
   The second clause catches devices like Pixel 7 landscape (915×412) which
   are wider than 768 but still phones. */
@media (max-width: 768px), (max-height: 500px) {
    #top-bar {
        padding: 6px 16px;
        padding-top: max(6px, env(safe-area-inset-top));
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        gap: 6px;
    }

    #top-bar-stats {
        gap: 14px;
        /* Stats are mission-critical — never let them shrink away */
        flex-shrink: 0;
    }

    #top-bar-controls {
        gap: 10px;
        /* Controls side can shrink/wrap to give stats room */
        flex-shrink: 1;
        flex-wrap: nowrap;
        overflow: visible;
    }

    .stat-box .label {
        font-size: 0.6rem;
        letter-spacing: 0.6px;
        line-height: 1;
    }

    .stat-box .value {
        font-size: 1rem;
        line-height: 1.1;
    }

    /* 44×44 minimum touch target for interactive controls. */
    .stat-box.interactive {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
        padding: 2px 4px;
        border-radius: 6px;
    }

    /* Stats don't need 44px height — keep them compact. */
    #top-bar-stats .stat-box {
        min-width: 0;
        min-height: 0;
        padding: 0;
    }

    #air-countdown {
        font-size: 0.5rem !important;
    }

    /* Overflow popover: shown when #top-bar-overflow.open */
    #top-bar-overflow {
        position: absolute;
        top: 100%;
        right: max(4px, env(safe-area-inset-right));
        background: var(--panel-bg);
        border: 1px solid var(--border-color);
        border-top: none;
        border-radius: 0 0 8px 8px;
        padding: 8px 12px;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
        z-index: 120;
        display: none;
        min-width: 130px;
        overflow: hidden;
    }

    #top-bar-overflow.open {
        display: flex;
    }

    /* Countdown progress bar — shrinks from full width to 0 over 2 s.
       Restarted by toggling the .overflow-counting class in JS. */
    #top-bar-overflow.open::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 100%;
        background: var(--accent);
        transform-origin: left center;
        transform: scaleX(1);
        border-radius: 0 0 8px 8px;
    }
    #top-bar-overflow.overflow-counting::after {
        animation: overflow-countdown 2s linear forwards;
    }
    @keyframes overflow-countdown {
        from { transform: scaleX(1); opacity: 1; }
        to   { transform: scaleX(0); opacity: 0.4; }
    }

    #top-bar-overflow .stat-box.interactive {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        min-height: 40px;
        padding: 6px 10px;
        gap: 12px;
    }

    #top-bar-overflow .stat-box .label {
        font-size: 0.65rem;
    }

    #top-bar-overflow .stat-box .value {
        font-size: 0.95rem;
    }

    #overflow-btn {
        display: flex;
        /* Always visible — it's the gateway to hidden controls */
        flex-shrink: 0;
    }

    #overflow-btn .value {
        font-size: 1.4rem;
        line-height: 1;
    }

    /* On mobile: hide SPEED, ABILITY, AUTO from the main bar row —
       they live in the overflow popover instead. */
    #speed-btn,
    #ability-btn,
    #autopilot-btn {
        display: none !important;
    }

    /* Show the proxy copies inside the overflow popover */
    .overflow-speed-proxy,
    .overflow-auto-proxy {
        display: flex;
    }

    /* Content direction is handled by body.touch-ui portrait/landscape rules.
       Only apply column here for non-touch small screens. */
    body:not(.touch-ui) #content {
        flex-direction: column;
    }

    /* Build dock: horizontal scrollable row at bottom.
       Extra bottom padding lifts the content above the home bar / rounded corners.
       touch-action: pan-x lets the browser handle horizontal swipes. */
    #build-menu {
        width: 100%;
        height: auto;
        flex-direction: row;
        border-left: none;
        border-top: 1px solid var(--border-color);
        padding: 10px 16px;
        padding-bottom: max(44px, env(safe-area-inset-bottom));
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        overflow-x: auto;
        overflow-y: hidden;
        gap: 8px;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        min-height: 100px;
        scroll-snap-type: x proximity;
        align-items: center;
    }

    /* Hide the "DEFENSES" heading and the hr separator — they waste screen on phones. */
    #build-menu > h3,
    #build-menu > hr {
        display: none;
    }

    .tower-option {
        flex-shrink: 0;
        width: 76px;
        min-height: 78px;
        flex-direction: column;
        padding: 8px 6px;
        gap: 4px;
        align-items: center;
        justify-content: center;
        text-align: center;
        scroll-snap-align: start;
    }

    .tower-option.dragging {
        opacity: 0.4;
        border-color: var(--accent);
        transform: scale(0.95);
    }

    .tower-icon {
        width: 32px;
        height: 32px;
    }

    .tower-info {
        align-items: center;
        text-align: center;
    }

    .tower-info .name {
        font-size: 0.7rem;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 60px;
    }

    .tower-info .cost {
        font-size: 0.7rem;
        font-weight: 700;
    }

    /* Upgrade menu slides up from the bottom — keeps the play field visible. */
    #upgrade-menu {
        position: fixed;
        width: 100%;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        max-height: 50vh;
        border-radius: 14px 14px 0 0;
        border: 1px solid var(--accent);
        border-bottom: none;
        padding: 14px 16px;
        padding-bottom: max(14px, env(safe-area-inset-bottom));
        overflow-y: auto;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.3);
        z-index: 50;
        animation: sheet-up 0.18s ease-out;
    }

    @keyframes sheet-up {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    .upgrade-header {
        font-size: 1.1rem;
    }

    .upgrade-stats {
        font-size: 0.85rem;
        padding: 8px 10px;
    }

    .upgrade-item {
        padding: 10px 12px;
        min-height: 44px;
    }
    .upg-name  { font-size: 0.9rem; }
    .upg-desc  { font-size: 0.72rem; }
    .upg-cost  { font-size: 0.9rem; }
}

/* ── Touch-UI overlay scrolling ─────────────────────────────────────────────
   Applies to any touch device regardless of screen size / orientation.
   Overlays become scrollable so menus are reachable in landscape too.       */
body.touch-ui .overlay {
    overflow-y: auto;
    justify-content: flex-start;
    padding: 24px 14px;
    padding-top: max(24px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
}
body.touch-ui .overlay h1 { font-size: 2.2rem; letter-spacing: 3px; }
body.touch-ui .overlay h2 { font-size: 1.9rem; }
body.touch-ui .overlay p  { font-size: 0.95rem; margin-bottom: 20px; }
body.touch-ui .menu-buttons { min-width: 0; width: 100%; max-width: 320px; }
body.touch-ui .menu-buttons button { min-height: 44px; }
body.touch-ui button { padding: 10px 22px; font-size: 1rem; }
body.touch-ui .loadout-select { min-width: 0; width: 100%; max-width: 320px; }
body.touch-ui .ascension-buttons { max-width: 100%; }
body.touch-ui .seed-input-row input { width: 80%; max-width: 240px; }
body.touch-ui #tech-tree { padding: 20px 14px; }
body.touch-ui .tech-tree-grid { gap: 12px; }
body.touch-ui .tree-tier { min-width: 0; width: 100%; flex: 1 1 auto; }
body.touch-ui .score-tabs { gap: 2px; }
body.touch-ui #scoreboard { width: 100% !important; max-width: 280px; }
body.touch-ui #tower-mastery { padding: 20px 14px; }
body.touch-ui .tower-variant-grid { grid-template-columns: repeat(2, 1fr); max-width: 300px; }
body.touch-ui #tower-tooltip { max-width: min(260px, calc(100vw - 16px)); }

/* In landscape, compact the overlay vertically so it fits without needing
   as much scroll */
@media (orientation: landscape) {
    body.touch-ui .overlay h1 { font-size: 1.6rem; letter-spacing: 2px; margin-bottom: 6px; }
    body.touch-ui .overlay h2 { font-size: 1.4rem; margin-bottom: 10px; }
    body.touch-ui .overlay p  { font-size: 0.85rem; margin-bottom: 10px; }
    body.touch-ui .overlay { padding: 12px 14px; padding-top: max(12px, env(safe-area-inset-top)); }
    body.touch-ui .menu-buttons { gap: 6px; margin-top: 10px; }
    body.touch-ui .menu-buttons button { padding: 8px 16px; font-size: 0.85rem; min-height: 40px; }
}


    .overlay {
        overflow-y: auto;
        justify-content: flex-start;
        padding: 24px 14px;
        padding-top: max(24px, env(safe-area-inset-top));
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }

    .overlay h1 {
        font-size: 2.2rem;
        letter-spacing: 3px;
    }

    .overlay h2 {
        font-size: 1.9rem;
    }

    .overlay p {
        font-size: 0.95rem;
        margin-bottom: 20px;
    }

    .menu-buttons {
        min-width: 0;
        width: 100%;
        max-width: 320px;
    }

    .menu-buttons button {
        min-height: 44px;
    }

    button {
        padding: 10px 22px;
        font-size: 1rem;
    }

    /* Run-setup dropdowns / ascension buttons — let them breathe. */
    .loadout-select {
        min-width: 0;
        width: 100%;
        max-width: 320px;
    }

    .ascension-buttons {
        max-width: 100%;
    }

    .seed-input-row input {
        width: 80%;
        max-width: 240px;
    }

    /* Tech tree: stack tiers vertically, reduce padding. */
    #tech-tree {
        padding: 20px 14px;
    }

    .tech-tree-grid {
        gap: 12px;
    }

    .tree-tier {
        min-width: 0;
        width: 100%;
        flex: 1 1 auto;
    }

    /* Score tabs on narrow screens — smaller gap, smaller font */
    .score-tabs {
        gap: 2px;
    }

    /* Game-over scoreboard fits the phone width */
    #scoreboard {
        width: 100% !important;
        max-width: 280px;
    }

    /* Tower Mastery */
    #tower-mastery {
        padding: 20px 14px;
    }

    /* Tower variants grid: 2 columns instead of 3 at small widths */
    .tower-variant-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 300px;
    }

    /* Tower tooltip on mobile (long-press) — constrain width */
    #tower-tooltip {
        max-width: min(260px, calc(100vw - 16px));
    }
}

/* Narrow phones (≤400px): tighter stats, fluid font sizes so nothing clips. */
@media (max-width: 400px) {
    #top-bar {
        /* Extra side padding for rounded-corner screens */
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
    #top-bar-stats {
        gap: 8px;
    }
    /* Use fluid font so labels/values scale with viewport width instead of
       hard-coding a size that clips on very narrow devices (≤360px). */
    #top-bar-stats .stat-box .label {
        font-size: clamp(0.45rem, 2.2vw, 0.6rem);
    }
    #top-bar-stats .stat-box .value {
        font-size: clamp(0.75rem, 3.8vw, 1rem);
    }
    /* Controls side: tighten gap so MORE button stays reachable */
    #top-bar-controls {
        gap: 6px;
    }
    .stat-box.interactive {
        min-width: 38px;
        padding: 2px 3px;
    }
    .tower-option {
        width: 68px;
        min-height: 74px;
    }
    .tower-info .name {
        max-width: 60px;
    }
}

/* Landscape phones (Pixel 7 landscape = 915×412, etc): keep the dock on the
   right side so vertical real estate survives. Applies whenever we're short
   and in landscape, regardless of width. */
@media (orientation: landscape) and (max-height: 500px) {
    /* Tighter top bar — vertical pixels are precious in landscape. */
    #top-bar {
        padding: 3px 10px;
        padding-top: max(3px, env(safe-area-inset-top));
    }
    #top-bar-stats { gap: 12px; }
    #top-bar-controls { gap: 8px; }
    .stat-box .label { font-size: 0.55rem; }
    .stat-box .value { font-size: 0.9rem; }
    .stat-box.interactive {
        min-height: 38px;
        min-width: 40px;
        padding: 1px 4px;
    }
    #overflow-btn .value { font-size: 1.2rem; }
    #air-countdown { font-size: 0.45rem !important; }

    /* Side-dock layout for landscape: canvas left, build strip on right. */
    #content {
        flex-direction: row;
    }

    #build-menu {
        width: 84px;
        height: auto;
        flex-direction: column;
        border-top: none;
        border-left: 1px solid var(--border-color);
        padding: 4px 4px;
        padding-bottom: 4px;
        padding-right: max(4px, env(safe-area-inset-right));
        overflow-x: hidden;
        overflow-y: auto;
        gap: 4px;
        touch-action: pan-y;
    }

    #build-menu > h3,
    #build-menu > hr {
        display: none;
    }

    .tower-option {
        width: 100%;
        min-height: 54px;
        padding: 3px 4px;
        flex-direction: column;
        gap: 2px;
    }

    .tower-icon {
        width: 26px;
        height: 26px;
    }

    .tower-info .name {
        font-size: 0.65rem;
        max-width: 70px;
    }

    .tower-info .cost {
        font-size: 0.65rem;
    }

    /* Upgrade menu: keep bottom-sheet but shorter so gameplay stays visible.
       At 412px height, 45% ≈ 185px — covers the bottom of the canvas but
       leaves enough play area to see what you're upgrading. */
    #upgrade-menu {
        max-height: 45vh;
        width: calc(100% - 84px);   /* leave the side dock visible */
        left: 0;
        right: 84px;
        bottom: 0;
        padding: 10px 14px;
        border-radius: 12px 12px 0 0;
    }

    .upgrade-header   { font-size: 1rem; }
    .upgrade-stats    { font-size: 0.78rem; padding: 6px 8px; }
    .upgrade-item     { padding: 6px 10px; min-height: 38px; }
    .upg-name         { font-size: 0.8rem; }
    .upg-desc         { font-size: 0.68rem; }
    .upg-cost         { font-size: 0.8rem; }

    /* Overflow popover: don't clip off right edge when MORE is near it. */
    #top-bar-overflow {
        right: 4px;
    }
}


.seed-input-row {
    margin-bottom: 16px;
}

.seed-input-row input {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-muted);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 2px;
    padding: 8px 14px;
    text-align: center;
    width: 200px;
    transition: border-color 0.2s;
    /* Remove number input arrows */
    -moz-appearance: textfield;
}

.seed-input-row input::-webkit-outer-spin-button,
.seed-input-row input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.seed-input-row input:focus {
    outline: none;
    border-color: var(--accent);
    color: var(--text-main);
}
/* Ascension selector (replaces 645ce59 difficulty selector) */
.ascension-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.ascension-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 3px;
    font-weight: 600;
}

.ascension-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    max-width: 360px;
}

.ascension-btn {
    padding: 6px 10px;
    font-size: 0.8rem;
    letter-spacing: 1px;
    border: 2px solid var(--text-muted);
    color: var(--text-muted);
    background: transparent;
    border-radius: 4px;
    min-width: 40px;
    box-shadow: none;
    opacity: 0.7;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
}

.ascension-btn:hover:not(.locked) {
    opacity: 1;
    border-color: var(--accent);
    color: var(--accent);
}

.ascension-btn.selected {
    background: var(--accent);
    color: #0f172a;
    border-color: var(--accent);
    opacity: 1;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.55);
}

.ascension-btn.locked {
    opacity: 0.25;
    cursor: not-allowed;
    border-style: dashed;
}

.ascension-modifiers-preview {
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-align: center;
    max-width: 320px;
    min-height: 1.2em;
    line-height: 1.4;
}

/* Scoreboard tabs — one per Ascension tier */
.score-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 10px;
    justify-content: center;
}

.score-tab {
    padding: 3px 7px;
    font-size: 0.65rem;
    letter-spacing: 1px;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    background: transparent;
    border-radius: 3px;
    min-width: 28px;
    box-shadow: none;
    opacity: 0.55;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
}

.score-tab:hover {
    opacity: 0.9;
}

.score-tab.selected {
    background: rgba(56, 189, 248, 0.18);
    color: var(--accent);
    border-color: var(--accent);
    opacity: 1;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.35) inset;
}

#tower-tooltip {
    position: fixed;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.97);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 180px;
    max-width: 220px;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
}
#tower-tooltip.hidden { display: none; }

/* Touch placement confirmation buttons */
#place-confirm {
    position: fixed;
    z-index: 200;
    display: flex;
    gap: 16px;
    transform: translate(-50%, -50%);
    pointer-events: all;
    /* Add backdrop for better visibility */
    padding: 8px;
    border-radius: 50px;
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(4px);
}
#place-confirm.hidden { display: none; }
#place-confirm button {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 1.6rem;
    font-weight: 700;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-width: 3px;
    letter-spacing: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    /* Ensure buttons are always tappable */
    touch-action: manipulation;
}
#place-confirm-yes {
    color: #4ade80;
    border-color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
    box-shadow: 0 0 16px rgba(74, 222, 128, 0.4);
}
#place-confirm-yes:hover,
#place-confirm-yes:active {
    background: #4ade80;
    color: #0f172a;
}
#place-confirm-no {
    color: var(--health);
    border-color: var(--health);
    background: rgba(251, 113, 133, 0.1);
    box-shadow: 0 0 16px rgba(251, 113, 133, 0.4);
}
#place-confirm-no:hover,
#place-confirm-no:active {
    background: var(--health);
    color: #0f172a;
}
#tt-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent);
    margin-bottom: 4px;
    letter-spacing: 1px;
}
#tt-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.4;
}
#tt-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.78rem;
}
#tt-stats span {
    display: flex;
    justify-content: space-between;
    color: var(--text-main);
}
#tt-stats span b { color: var(--money); }

/* Run Result XP breakdown (M1 minimal) */
.xp-breakdown {
    width: 260px;
    margin: 14px auto 10px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 8px;
    font-family: monospace;
    color: var(--text-main);
}
.xp-breakdown-title {
    text-align: center;
    color: var(--accent);
    font-size: 0.8rem;
    letter-spacing: 3px;
    margin-bottom: 6px;
    font-weight: 700;
    font-family: inherit;
}
.xp-breakdown-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    padding: 2px 0;
    color: var(--text-muted);
}
.xp-breakdown-row.hidden { display: none; }
.xp-breakdown-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.05rem;
    padding: 6px 0 2px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: #a3e635;
    font-weight: 700;
}
.xp-breakdown-balance {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-top: 4px;
}
.xp-breakdown-unlock {
    margin-top: 8px;
    padding: 6px 8px;
    background: rgba(163, 230, 53, 0.12);
    border: 1px solid rgba(163, 230, 53, 0.4);
    border-radius: 4px;
    text-align: center;
    font-size: 0.8rem;
    color: #a3e635;
    letter-spacing: 1px;
    font-family: inherit;
}
.xp-breakdown-unlock.hidden { display: none; }

/* M2: Main Menu buttons */
.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    margin-top: 20px;
    min-width: 240px;
}
.menu-buttons button {
    padding: 10px 16px;
    font-size: 0.95rem;
    letter-spacing: 2px;
    border: 2px solid var(--accent);
    background: transparent;
    color: var(--accent);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
}
.menu-buttons button:hover {
    background: var(--accent);
    color: #0f172a;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.45);
}
.menu-buttons button.menu-primary {
    border-color: #a3e635;
    color: #a3e635;
}
.menu-buttons button.menu-primary:hover {
    background: #a3e635;
    box-shadow: 0 0 16px rgba(163, 230, 53, 0.45);
}
.menu-buttons button.small {
    font-size: 0.8rem;
    padding: 6px 10px;
    border-width: 1px;
    opacity: 0.65;
}
.menu-buttons button.small:hover {
    opacity: 1;
}
.menu-buttons .menu-balance {
    float: right;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}
.menu-buttons button:hover .menu-balance {
    color: rgba(15, 23, 42, 0.7);
}

/* M2: Loadout dropdowns in Run Setup */
.loadout-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
}
.loadout-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    font-weight: 600;
}
.loadout-select {
    min-width: 240px;
    padding: 5px 10px;
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.5);
    color: var(--text-main);
    border: 1px solid var(--accent);
    border-radius: 4px;
    font-family: inherit;
    cursor: pointer;
}
.loadout-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.setup-actions {
    display: flex;
    gap: 14px;
    margin-top: 14px;
}
.setup-actions button.secondary {
    border-color: var(--text-muted);
    color: var(--text-muted);
}
.setup-actions button.secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* M2: Tech Tree overlay */
#tech-tree {
    padding: 24px;
    overflow-y: auto;
}
#tech-tree h2 {
    margin-bottom: 10px;
}
.tree-balance-row {
    text-align: center;
    font-size: 0.9rem;
    color: var(--accent);
    letter-spacing: 2px;
    margin-bottom: 18px;
    font-family: monospace;
}
.tech-tree-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto 16px;
}
.tree-tier {
    flex: 1 1 260px;
    min-width: 260px;
    max-width: 300px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 8px;
}
.tree-tier h3 {
    text-align: center;
    color: var(--accent);
    letter-spacing: 3px;
    margin-bottom: 10px;
    font-size: 0.85rem;
}
.tree-tier.locked {
    opacity: 0.5;
    border-style: dashed;
}
.tree-tier.locked h3::after {
    content: ' · LOCKED';
    color: var(--text-muted);
}
.tree-nodes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tree-node {
    padding: 8px 10px;
    border: 1px solid var(--text-muted);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: all 0.15s;
}
.tree-node:hover:not(.owned):not(.locked):not(.too-expensive) {
    border-color: var(--accent);
    background: rgba(56, 189, 248, 0.12);
}
.tree-node.owned {
    border-color: #a3e635;
    background: rgba(163, 230, 53, 0.1);
    cursor: default;
}
.tree-node.locked {
    opacity: 0.45;
    cursor: not-allowed;
    border-style: dashed;
}
.tree-node.too-expensive {
    opacity: 0.6;
    cursor: not-allowed;
}
.tree-node-name {
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
}
.tree-node-name .node-status {
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 1px;
}
.tree-node.owned .node-status {
    color: #a3e635;
}
.tree-node-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* M2: Ability top-bar button */
#ability-btn {
    cursor: pointer;
}
#ability-btn.armed {
    background: rgba(56, 189, 248, 0.18);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.45) inset;
}
#ability-btn.no-charges {
    opacity: 0.35;
    cursor: not-allowed;
}
#ability-display {
    font-variant-numeric: tabular-nums;
}

/* M2: Wave preview popup (Scan + Strategist) */
#wave-preview {
    z-index: 15;
    min-width: 280px;
    max-width: 400px;
    padding: 16px;
}
#wave-preview-list {
    max-height: 300px;
    overflow-y: auto;
    margin: 10px 0;
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--text-main);
}
.wave-preview-row {
    padding: 2px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* M2: qol.skipsetup toggle */
.skip-setup-toggle {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* M3: Tower Mastery overlay */
#tower-mastery {
    padding: 24px;
    overflow-y: auto;
}
#tower-mastery h2 {
    margin-bottom: 6px;
}
.mastery-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 560px;
    margin: 14px auto;
}
.mastery-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
}
.mastery-row.maxed {
    border-color: #a3e635;
    background: rgba(163, 230, 53, 0.08);
}
.mastery-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 4px;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.35);
}
.mastery-body {
    flex: 1;
}
.mastery-name-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-main);
    font-weight: 700;
}
.mastery-xp-text {
    font-family: monospace;
    color: var(--text-muted);
    font-size: 0.75rem;
}
.mastery-bar {
    height: 4px;
    margin-top: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.mastery-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.2s ease;
}
.mastery-bar-fill.maxed {
    background: #a3e635;
}
.mastery-milestones {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-size: 0.65rem;
    letter-spacing: 1px;
    color: var(--text-muted);
}
.mastery-milestone-dot {
    opacity: 0.45;
}
.mastery-milestone-dot.hit {
    opacity: 1;
    color: #a3e635;
}

/* M3: Run Setup tower-variant grid */
.tower-variant-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-width: 340px;
}
.tower-variant-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(56, 189, 248, 0.15);
    border-radius: 3px;
}
.tower-variant-row .variant-base {
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 1px;
}
.tower-variant-row select {
    font-size: 0.72rem;
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.5);
    color: var(--text-main);
    border: 1px solid var(--accent);
    border-radius: 2px;
    font-family: inherit;
    cursor: pointer;
}
.tower-variant-row select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}