* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: url('/img/cursor_32.png') 4 0, auto;
}

/* === Tooltip custom global (data-tip) === */
#global-tooltip {
    position: fixed;
    background: rgba(20, 12, 6, 0.95);
    color: var(--text-light);
    font-size: 11px;
    font-weight: normal;
    padding: 3px 8px;
    border-radius: 3px;
    border: 1px solid var(--gold-a30);
    white-space: nowrap;
    z-index: 9999;
    pointer-events: none;
    display: none;
}

/* ============================================================================
   Theme Variables — Charger un fichier CSS alternatif pour re-skin le UI
   Ex: <link rel="stylesheet" href="/css/theme-frost.css">
   ============================================================================ */
:root {
    /* --- Fonds --- */
    --bg-body: #0e0906;
    --bg-dark: #1a0f08;
    --bg-medium: #2a1a0e;
    --bg-gradient-dark: #1e120a;
    --bg-gradient-darker: #150d06;
    --bg-panel: #1a1510;
    --bg-row: #1a1a2e;
    --bg-row-border: #2a2a3e;
    --bg-bar: #2a2a2a;
    --bg-input: #111;
    --bg-toggle: #333;
    --bg-tab-border: #444;

    /* --- Or / couleur primaire --- */
    /* --gold-bright: #ffd700; */
    --gold: #8b6914;
    --gold-bright: #796500;
    --gold-light: #e8d5a3;
    --gold-muted: #c9a834;
    --gold-dark: #5a4320;
    --gold-accent: #daa520;
    --gold-warm: #d4a017;
    --gold-badge: #e2b714;
    --gold-title: #d4a847;

    /* --- Texte --- */
    --text-primary: #e0d6c2;
    --text-light: #e8d5a3;
    --text-muted: #a09880;
    --text-dim: #888;
    --text-dimmer: #666;
    --text-dimmest: #555;
    --text-white: #fff;
    --text-warm: #d4c4a0;
    --text-pale: #c0b8a0;
    --text-info: #ccc;

    /* --- Couleurs sémantiques --- */
    --color-green: #4caf50;
    --color-green-dark: #2e7d32;
    --color-green-light: #8bc34a;
    --color-green-bright: #00ff66;
    --color-green-text: #6a9a6a;
    --color-red: #f44336;
    --color-red-light: #ff6b6b;
    --color-red-dark: #8b2020;
    --color-orange: #ff8c00;
    --color-orange-light: #ff6b35;
    --color-danger: #ff6347;
    --color-purple: #7B68EE;
    --color-blue-light: #4fc3f7;
    --color-blue-move: #2196F3;
    --color-blue-info: #5dade2;
    --color-warning: #e67e22;
    --color-success: #27ae60;
    --color-error: #c0392b;
    --color-assign: #6a9;

    /* --- Overlays or (alpha) --- */
    --gold-a05: rgba(139, 105, 20, 0.05);
    --gold-a08: rgba(139, 105, 20, 0.08);
    --gold-a10: rgba(139, 105, 20, 0.1);
    --gold-a15: rgba(139, 105, 20, 0.15);
    --gold-a20: rgba(139, 105, 20, 0.2);
    --gold-a25: rgba(139, 105, 20, 0.25);
    --gold-a30: rgba(139, 105, 20, 0.3);
    --gold-a40: rgba(139, 105, 20, 0.4);
    --gold-a45: rgba(139, 105, 20, 0.45);
    --gold-a50: rgba(139, 105, 20, 0.5);

    /* --- Overlays fond --- */
    --bg-a60: rgba(26, 15, 8, 0.6);
    --bg-a80: rgba(26, 15, 8, 0.8);

    /* --- Overlays noir --- */
    --black-a30: rgba(0, 0, 0, 0.3);
    --black-a50: rgba(0, 0, 0, 0.5);
    --black-a60: rgba(0, 0, 0, 0.6);
    --black-a75: rgba(0, 0, 0, 0.75);
    --black-a80: rgba(0, 0, 0, 0.8);

    /* --- Overlays vert --- */
    --green-a10: rgba(76, 175, 80, 0.1);
    --green-a15: rgba(76, 175, 80, 0.15);
    --green-a25: rgba(76, 175, 80, 0.25);
    --green-a30: rgba(76, 175, 80, 0.3);
    --green-a40: rgba(76, 175, 80, 0.4);

    /* --- Overlays rouge --- */
    --red-a10: rgba(244, 67, 54, 0.1);
    --red-a20: rgba(244, 67, 54, 0.2);
    --red-a40: rgba(244, 67, 54, 0.4);

    /* --- Accent vue d'ensemble --- */
    --overview-accent: #c0a882;

    /* --- Filtre icônes (thèmes) --- */
    --icon-filter: none;
    --icon-filter-colored: none;

    /* --- Scrollbar --- */
    --scrollbar-track: #1a0f08;
    --scrollbar-thumb: #8b6914;

    /* --- Terrains --- */
    --land-bg: #2a3a2a;
    --land-bg-hover: #3a5a3a;
    --land-border: #4a5a4a;

    /* --- Zone danger --- */
    --danger-bg: #3a1a1a;
    --danger-bg-dark: #2a0a0a;
    --danger-border: #5c2020;

    /* --- Bordures panels/tabs --- */
    --border-panel: #4a3f2f;
    --border-card: #3a3020;
    --border-card-accent: #5a4a20;
    --border-coffee: rgba(255, 200, 50, 0.3);
    --border-coffee-hover: #ffc832;

    /* --- Supporter theme overrides --- */
    --supporter-panel-border: rgba(255, 215, 0, 0.3);
    --supporter-panel-shadow: rgba(255, 215, 0, 0.08);
    --supporter-btn-shadow: rgba(255, 215, 0, 0.25);

    /* --- Recherche --- */
    --research-bg: #1a2a2a;
    --research-border: #2a3a3a;

    /* --- Tutoriel --- */
    --tutorial-text: #d4dfc8;
    --tutorial-step: #4a7a3a;
    --tutorial-progress: #8ab87a;
    --tutorial-flash: #7adf5a;
    --milestone-check: #7adf7a;

    /* --- Police --- */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    overflow: hidden;
    background: var(--bg-body);
    font-family: var(--font-family);
    user-select: none;
}

/* Loading Screen */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-body);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s;
}

#loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

#loading-content {
    text-align: center;
}

#loading-logo {
    width: 300px;
    height: auto;
    margin-bottom: 16px;
}

#loading-title {
    font-size: 36px;
    color: var(--gold-bright);
    font-weight: bold;
    margin-bottom: 24px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

#loading-bar-container {
    width: 280px;
    height: 12px;
    background: var(--bg-dark);
    border: 2px solid var(--gold);
    border-radius: 6px;
    overflow: hidden;
    margin: 0 auto 12px;
}

#loading-bar {
    width: 5%;
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-bright));
    border-radius: 4px;
    transition: width 0.15s;
    animation: loading-shimmer 1.5s ease-in-out infinite;
}

#loading-bar.active {
    animation: none;
}

@keyframes loading-shimmer {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

#loading-text {
    color: var(--text-muted);
    font-size: 13px;
}

/* ============================================================================
   World Select Screen — Choix du monde avant le lancement du jeu
   ============================================================================ */

#world-select {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-body);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.ws-content {
    text-align: center;
    max-width: 900px;
    width: 100%;
    padding: 20px;
}

.ws-logo {
    width: 80px;
    height: auto;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 12px rgba(218, 165, 32, 0.3));
}

.ws-title {
    color: var(--gold-accent);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
    text-shadow: 0 2px 8px var(--black-a50);
}

.ws-subtitle {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 24px;
}

.ws-cards {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.ws-card {
    background: #1a1410;
    border: 1px solid var(--border-card);
    border-radius: 12px;
    padding: 24px 20px;
    width: 250px;
    text-align: center;
    transition: border-color 0.2s, transform 0.2s;
}

.ws-card:hover {
    border-color: var(--gold-accent);
    transform: translateY(-2px);
}

.ws-card-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.ws-card h2 {
    color: #e8d8b0;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

.ws-card-desc {
    color: #8a7a60;
    font-size: 12px;
    margin-bottom: 12px;
    line-height: 1.4;
}

.ws-seed {
    color: #6a5a40;
    font-size: 11px;
    margin-bottom: 12px;
    font-family: monospace;
}

.ws-dates {
    color: #6a5a40;
    font-size: 11px;
    margin-bottom: 8px;
}

.ws-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-bottom: 12px;
}

.ws-input-row label {
    color: #8a7a60;
    font-size: 12px;
}

.ws-input-row input {
    background: var(--bg-body);
    border: 1px solid var(--border-card);
    border-radius: 6px;
    color: #e8d8b0;
    padding: 6px 10px;
    font-size: 13px;
    width: 120px;
    text-align: center;
    font-family: monospace;
}

.ws-input-row input:focus {
    outline: none;
    border-color: var(--gold-accent);
}

.ws-input-row input.ws-input-error {
    border-color: var(--color-error);
    animation: ws-shake 0.3s;
}

@keyframes ws-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

.ws-btn {
    display: inline-block;
    padding: 8px 28px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.ws-btn:active {
    transform: scale(0.97);
}

.ws-btn-primary {
    background: var(--gold-accent);
    color: #1a1410;
}

.ws-btn-primary:hover {
    background: #e8b62a;
}

.ws-btn-season {
    background: var(--color-success);
    color: var(--text-white);
}

.ws-btn-season:hover {
    background: #2ecc71;
}

.ws-btn-custom {
    background: #4a4030;
    color: #e8d8b0;
}

.ws-btn-custom:hover {
    background: #5a5040;
}

/* Mobile : empiler les cartes en colonne */
@media (max-width: 700px) {
    .ws-cards {
        flex-direction: column;
        align-items: center;
    }

    .ws-card {
        width: 90%;
        max-width: 300px;
    }
}

#game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

#game-canvas {
    display: block;
    width: calc(100% - 80px);
    height: 100%;
    cursor: url('/img/cursor_32.png') 4 0, default;
}

/* HUD Top Bar */
#hud {
    position: absolute;
    top: 0;
    left: 0;
    right: 86px;
    min-height: 36px;
    background: linear-gradient(180deg, var(--bg-gradient-dark) 0%, var(--bg-gradient-darker) 100%);
    display: flex;
    align-items: stretch;
    padding: 2px 8px;
    gap: 4px;
    border-bottom: 2px solid var(--gold);
    z-index: 13;
}

#hud-resources {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 1px;
}

#hud-row-raw,
#hud-row-produced {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    align-items: center;
    gap: 2px 4px;
}

#hud-row-raw .hud-item-top,
#hud-row-produced .hud-item-top {
    flex-shrink: 0;
}

#hud-row-raw .hud-icon,
#hud-row-produced .hud-icon {
    flex-shrink: 0;
}

#hud-row-raw .hud-value,
#hud-row-produced .hud-value {
    flex-shrink: 0;
}

#hud-row-raw .hud-rate,
#hud-row-produced .hud-rate {
    flex-shrink: 0;
    text-align: left;
}

#hud-row-produced:empty {
    display: none;
}

#hud-display-name {
    color: var(--gold-warm);
    font-size: 12px;
    font-weight: bold;
    padding: 0 8px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
}

#hud-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    border-left: 2px solid var(--gold);
    padding-left: 8px;
    margin-left: 4px;
}

#hud-right .hud-item-top {
    flex-wrap: wrap;
    justify-content: center;
}

#hud-right .hud-rate {
    width: 100%;
    text-align: center;
    font-size: 10px;
}

.hud-item {
    display: flex;
    align-items: center;
    color: var(--text-primary);
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}


.mobile-gold-item {
    display: none;
}

.hud-item-top {
    display: flex;
    align-items: center;
    gap: 3px;
}

.hud-icon {
    font-size: 18px;
    line-height: 1;
    display: inline-block;
}

.hud-label {
    color: var(--text-muted);
}

.hud-value {
    color: var(--text-white);
    font-weight: bold;
    font-size: 11px;
}

.hud-rate {
    font-size: 10px;
    margin-left: 2px;
    display: inline;
    opacity: 0.85;
}

.hud-value {
    display: inline;
}

.hud-rate.rate-pos {
    color: var(--color-green);
}

.hud-rate.rate-neg {
    color: var(--color-red);
}

.hud-rate.rate-capped {
    color: #f0c040;
}

#hud-resources::-webkit-scrollbar {
    height: 3px;
}

#hud-resources::-webkit-scrollbar-track {
    background: transparent;
}

#hud-resources::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 2px;
}

/* Music Controls */
#music-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    padding: 4px 2px;
    background: var(--gold-a10);
    border: 1px solid var(--border-coffee);
    border-radius: 6px;
}

/* Prev / Next sur la même ligne */
#music-nav-row {
    display: flex;
    gap: 8px;
}

#music-controls button {
    background: none;
    border: none;
    color: #d4c9a8;
    font-size: 14px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    padding: 2px 4px;
    line-height: 1;
}

#music-controls button:hover {
    color: var(--gold-bright);
}

/* Bouton mute plus gros, centré sous prev/next */
#music-play {
    font-size: 18px;
}

#music-track-name {
    width: 100%;
    text-align: center;
    color: var(--text-muted);
    font-size: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px;
    line-height: 1.2;
}

/* Build Panel (Bottom) */
#build-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 86px;
    background: linear-gradient(0deg, var(--bg-gradient-dark) 0%, var(--bg-gradient-darker) 100%);
    border-top: 2px solid var(--gold);
    z-index: 20;
    display: flex;
    flex-direction: column;
}

#build-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    border-bottom: 1px solid var(--gold-a30);
    gap: 6px;
}

#build-categories {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.build-cat-btn {
    padding: 5px 12px;
    background: var(--bg-a80);
    color: var(--text-muted);
    border: 1px solid var(--gold-a30);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.build-cat-btn:hover {
    background: var(--gold-a15);
    color: var(--text-primary);
}

.build-cat-btn.active {
    background: var(--gold-a20);
    color: var(--text-light);
    border-color: var(--gold);
}

#build-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.action-icon {
    padding: 4px 10px;
    background: var(--bg-a80);
    color: var(--text-muted);
    border: 1px solid var(--gold-a30);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap;
    transition: background 0.15s;
}

.action-icon:hover {
    background: var(--gold-a20);
    border-color: var(--gold);
    color: var(--text-primary);
}

.land-icon-btn {
    color: var(--color-green);
}

.land-icon-btn:hover {
    border-color: var(--color-green);
}

.land-icon-btn.active {
    background: var(--land-bg);
    border-color: var(--color-green);
    color: var(--color-green);
}

.research-icon-btn {
    color: var(--color-green-bright);
}

.research-icon-btn:hover {
    border-color: var(--color-green-bright);
}

.tools-icon-btn {
    color: var(--color-orange);
}

.tools-icon-btn:hover {
    border-color: var(--color-orange);
}

.companion-icon-btn {
    color: var(--color-orange);
}

.companion-icon-btn:hover {
    border-color: var(--color-orange);
}

.reset-icon-btn {
    color: var(--color-danger);
    font-size: 9px;
}

.reset-icon-btn:hover {
    border-color: var(--color-danger);
    background: var(--danger-bg);
}

/* Sidebar Menu (right) */
#sidebar-menu {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 86px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(90deg, var(--bg-gradient-dark) 0%, var(--bg-gradient-darker) 100%);
    border-left: 2px solid var(--gold);
    z-index: 10;
}

#sidebar-header {
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    /* Au-dessus de #sidebar-buttons pour éviter le chevauchement de hitbox */
}

#sidebar-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    gap: 4px;
    padding: 6px;
    flex: 1;
    overflow-y: auto;
    /* Confine le contenu et empêche le débordement sur le header */
    min-height: 0;
    /* Permet au grid de shrink dans le flex container */
}

.sidebar-separator {
    grid-column: 1 / -1;
    height: 1px;
    background: linear-gradient(90deg, transparent 10%, var(--gold) 50%, transparent 90%);
    margin: 4px 0;
}

#sidebar-footer {
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.sidebar-coffee-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: var(--gold-a10);
    border: 1px solid var(--border-coffee);
    border-radius: 6px;
    font-size: 32px;
    text-decoration: none;
    transition: transform 0.15s, background 0.15s, border-color 0.15s;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
}

/* Game Icons (inline SVG) */
.gi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    filter: var(--icon-filter);
}

.gi svg {
    display: block;
    width: 100%;
    height: 100%;
}

.gi.res-icon,
.gi.res-icon svg {
    width: 16px;
    height: 16px;
}

.gi.res-icon-hud,
.gi.res-icon-hud svg {
    width: 22px;
    height: 22px;
}

.gi.sidebar-icon,
.gi.sidebar-icon svg {
    width: 28px;
    height: 28px;
}

.gi.sidebar-icon-lg,
.gi.sidebar-icon-lg svg {
    width: 36px;
    height: 36px;
}

.gi.mobile-icon,
.gi.mobile-icon svg {
    width: 20px;
    height: 20px;
}

.gi.mobile-menu-icon,
.gi.mobile-menu-icon svg {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

.gi.build-icon {
    width: 14px;
    height: 14px;
    font-size: 14px;
    line-height: 1;
    margin-right: 3px;
}

.gi.build-icon svg {
    width: 14px;
    height: 14px;
}

.gi.info-icon,
.gi.info-icon svg {
    width: 20px;
    height: 20px;
}

.gi.milestone-icon,
.gi.milestone-icon svg {
    width: 24px;
    height: 24px;
}

.sidebar-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    image-rendering: pixelated;
}

.res-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    image-rendering: pixelated;
    vertical-align: middle;
}

.res-icon-hud {
    width: 22px;
    height: 22px;
    object-fit: contain;
    image-rendering: pixelated;
    vertical-align: middle;
}


.sidebar-icon-lg {
    width: 36px;
    height: 36px;
}

.mobile-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    image-rendering: pixelated;
}

.mobile-menu-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    image-rendering: pixelated;
    vertical-align: middle;
    margin-right: 4px;
}

.sidebar-coffee-btn:hover {
    transform: scale(1.15);
    background: var(--gold-a20);
    border-color: var(--border-coffee-hover);
}

.sidebar-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-a80);
    color: var(--text-muted);
    border: 1px solid var(--gold-a30);
    border-radius: 4px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 18px;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
}

.sidebar-btn {
    position: relative;
}

.sidebar-btn:hover {
    transform: scale(1.1);
    border-color: var(--gold);
    background: var(--gold-a20);
}

.sidebar-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: var(--gold-badge);
    color: var(--bg-dark);
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    border-radius: 7px;
    pointer-events: none;
}

.sidebar-btn.research-icon-btn {
    color: var(--color-green-bright);
}

.sidebar-btn.tools-icon-btn {
    color: var(--color-orange);
}

.sidebar-btn.companion-icon-btn {
    color: var(--color-orange);
}

.sidebar-btn.settings-icon-btn {
    color: var(--text-muted);
}

/* === Left shortcut buttons (desktop) === */
#left-shortcuts {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 10;
    transition: left 0.25s ease;
}

/* Décalage quand un panneau gauche est ouvert — collé au bord droit du panneau */
#left-shortcuts.sell-panel-open,
#left-shortcuts.import-panel-open,
#left-shortcuts.export-panel-open,
#left-shortcuts.market-sell-panel-open,
#left-shortcuts.portal-panel-open,
#left-shortcuts.elevator-panel-open,
#left-shortcuts.caserne-panel-open {
    left: 380px;
}

.left-shortcut-btn {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 15, 8, 0.5);
    color: var(--text-muted);
    border: 1px solid var(--gold-a30);
    border-left: none;
    border-radius: 0;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 20px;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

/* Premier bouton : coins arrondis en haut-droite uniquement */
.left-shortcut-btn:first-child {
    border-radius: 0 6px 0 0;
    border-bottom: none;
}

/* Dernier bouton : coins arrondis en bas-droite uniquement */
.left-shortcut-btn:last-child {
    border-radius: 0 0 6px 0;
}

.left-shortcut-btn:hover {
    border-color: var(--gold);
    background: var(--gold-a25);
}

/* État actif : panneau correspondant ouvert (style map-switcher) */
.left-shortcut-btn.active {
    background: linear-gradient(180deg, var(--bg-gradient-dark) 0%, var(--bg-gradient-darker) 100%);
    border-color: var(--gold-a40);
    color: var(--text-light);
}

.left-shortcut-btn.tools-icon-btn {
    color: var(--color-orange);
}

.left-shortcut-btn.sell-icon-btn {
    color: var(--gold-badge);
}

/* Pas d'animation slide-in lors d'un swap entre panneaux */
.no-slide-anim {
    animation: none !important;
}

/* Build Tier Tabs */
#build-tier-tabs {
    display: flex;
    gap: 3px;
    padding: 3px 10px;
    border-bottom: 1px solid var(--gold-a30);
}

.build-tier-btn {
    padding: 3px 10px;
    background: var(--bg-a80);
    color: var(--text-muted);
    border: 1px solid var(--gold-a30);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.build-tier-btn:hover {
    background: var(--gold-a15);
    color: var(--text-primary);
}

.build-tier-btn.active {
    background: var(--gold-a20);
    color: var(--text-light);
    border-color: var(--gold);
}

#build-list {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    overflow-x: auto;
    min-height: 64px;
}

.build-btn {
    flex-shrink: 0;
    min-width: 110px;
    max-width: 200px;
    min-height: 76px;
    width: fit-content;
    padding: 6px 8px;
    background: var(--bg-a60);
    color: var(--text-primary);
    border: 1px solid var(--gold-a25);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 11px;
    text-align: left;
    transition: background 0.15s;
}

.build-btn-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.build-btn:hover {
    background: var(--gold-a15);
    border-color: var(--gold);
}

.build-btn.selected {
    background: var(--gold-a20);
    border-color: var(--gold);
    color: var(--text-light);
}

.build-btn.disabled {
    opacity: 0.5;
    cursor: url('/img/cursor_32.png') 4 0, not-allowed;
    background: rgba(120, 40, 40, 0.25);
    pointer-events: none;
}

.build-btn-flash {
    animation: buildFlash 1.5s ease-in-out 3;
}

@keyframes buildFlash {

    0%,
    100% {
        background: rgba(30, 20, 8, 0.7);
        box-shadow: none;
    }

    50% {
        background: rgba(255, 215, 0, 0.25);
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    }
}

.build-btn-name {
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
}

.build-btn-cost {
    color: var(--gold-bright);
    font-size: 10px;
    display: block;
}

.build-btn-info {
    color: var(--text-dim);
    font-size: 9px;
    display: block;
    margin-top: auto;
}

.build-btn-info .gi {
    margin-left: 2px;
    margin-right: 2px;
}

.panel-separator {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 10px 0;
}

.storage-info {
    color: var(--text-muted);
    font-size: 10px;
    white-space: nowrap;
    padding: 0 4px;
}

/* Build list scrollbar */
#build-list::-webkit-scrollbar {
    height: 4px;
}

#build-list::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

#build-list::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 2px;
}

#build-list::-webkit-scrollbar-corner {
    background: transparent;
}

/* Info Panel */
#info-panel {
    position: absolute;
    width: 340px;
    padding: 12px;
    z-index: 20;
    animation: none;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#info-panel.grow-up {
    justify-content: flex-end;
}

#info-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

#info-header-text {
    flex: 1;
}

#info-header-text #info-next-level {
    margin: 2px 0 0 0;
}

/* === Sprite wrapper avec overlay pause === */
#info-sprite-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
}

#info-sprite-wrapper:hover #info-sprite-pause-overlay {
    opacity: 1;
}

#info-sprite {
    width: 48px;
    height: 48px;
    image-rendering: auto;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Overlay play/pause par-dessus le sprite */
#info-sprite-pause-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: var(--text-white);
    font-size: 22px;
    border-radius: 4px;
    opacity: 0.7;
    transition: opacity 0.15s;
    pointer-events: none;
}

#info-sprite-pause-overlay.hidden {
    display: none;
}

/* Quand le bâtiment est en pause, overlay toujours visible avec teinte orange */
#info-sprite-pause-overlay.paused {
    opacity: 1;
    background: rgba(230, 126, 34, 0.5);
}

#info-sprite.hidden {
    display: none;
}

#info-panel-header h3 {
    color: var(--gold-bright);
    font-size: 15px;
    margin: 0;
}

#info-content p {
    color: var(--text-pale);
    font-size: 13px;
    margin-bottom: 4px;
}

#info-next-level {
    color: var(--color-green-text);
    font-size: 11px;
    font-style: italic;
}

/* Résumé compact — caché par défaut (visible uniquement en mode mobile compact) */
#info-compact-prod {
    display: none;
}

#info-compact-production {
    color: var(--text-pale);
    font-size: 13px;
    margin: 0;
}

#info-compact-hint {
    color: #8a7e6a;
    font-size: 11px;
    font-style: italic;
    margin: 4px 0 0 0;
}

#info-tools,
#info-workers-wrap {
    margin-top: 8px;
    padding: 6px 8px;
    background: var(--gold-a10);
    border: 1px solid var(--gold-a25);
    border-radius: 4px;
}

.info-eq-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

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

.info-eq-row .info-eq-upgrade {
    font-size: 11px;
    padding: 2px 6px;
}

.info-eq-header {
    color: var(--text-light);
    font-size: 13px;
    font-weight: bold;
}

.info-eq-stats {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 2px;
}

.info-eq-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.info-eq-upgrade {
    color: var(--text-light) !important;
    border-color: var(--gold) !important;
}

.info-eq-unassign {
    color: var(--color-red) !important;
    border-color: var(--red-a40) !important;
    background: var(--red-a10) !important;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 4px 8px;
    font-size: 16px;
    line-height: 1;
}

.info-eq-unassign:hover {
    background: var(--red-a20) !important;
    border-color: var(--color-red) !important;
}

/* Header row avec bouton "Tout" a droite */
.info-eq-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

/* Bouton "Tout" compact */
.info-eq-all-btn {
    font-size: 11px !important;
    padding: 1px 8px !important;
    color: var(--text-muted) !important;
    border-color: var(--gold-a40) !important;
    white-space: nowrap;
}

.info-eq-all-btn.active {
    color: var(--text-light) !important;
    border-color: var(--gold) !important;
    background: var(--gold-a20) !important;
}

/* Onglets par type d'outil */
.info-eq-tabs {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.info-eq-tab {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--gold-a08);
    border: 1px solid var(--gold-a25);
    border-radius: 3px;
    color: var(--text-muted);
    cursor: pointer;
}

.info-eq-tab.active {
    color: var(--text-light);
    border-color: var(--gold);
    background: var(--gold-a25);
}

.info-eq-tab:hover {
    background: var(--gold-a15);
}

.info-eq-assign-btn {
    display: block;
    width: 100%;
    margin-top: 4px;
    color: var(--color-assign) !important;
    border-color: var(--color-assign) !important;
    text-align: left;
}

#info-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.info-btn-full {
    width: 100%;
}

#btn-upgrade {
    background: rgba(180, 150, 50, 0.25);
    border-color: rgba(210, 180, 60, 0.6);
    color: #e8d44d;
}
#btn-upgrade:hover:not(.disabled) {
    background: rgba(210, 180, 60, 0.4);
}

#info-workers-row {
    display: flex;
    gap: 6px;
}

#info-workers-row .worker-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    flex-shrink: 0;
}

#info-demolish-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

#info-demolish-row .demolish-btn {
    font-size: 11px;
    padding: 4px 10px;
}

.action-btn {
    padding: 6px 10px;
    background: var(--bg-a80);
    color: var(--text-primary);
    border: 1px solid var(--gold-a30);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 12px;
    transition: background 0.15s;
}

.action-btn:hover {
    background: var(--gold-a20);
    border-color: var(--gold);
}

select.action-btn {
    appearance: none;
    -webkit-appearance: none;
    color-scheme: dark;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a09880'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}

select.action-btn option {
    background: var(--bg-panel);
    color: var(--text-primary);
}

/* Custom dropdown */
.custom-dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.custom-dropdown-selected {
    background: rgba(26, 21, 16, 0.6);
    border: 1px solid var(--gold-a30);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    padding: 4px 24px 4px 6px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    white-space: nowrap;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a09880'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.custom-dropdown-selected:hover {
    background-color: var(--gold-a20);
    border-color: var(--gold);
}

.custom-dropdown-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-panel);
    border: 1px solid var(--gold-a50);
    border-radius: 4px;
    z-index: 9999;
    margin-top: 2px;
}

.custom-dropdown.open .custom-dropdown-options {
    display: block;
}

.custom-dropdown-option {
    padding: 5px 8px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    color: var(--text-primary);
    font-size: 12px;
    white-space: nowrap;
}

.custom-dropdown-option:hover {
    background: var(--gold-a30);
}

.custom-dropdown-option.active {
    background: var(--gold-a45);
    color: #f0d070;
}

/* Option verrouillée (ex: thème supporter) — texte grisé, curseur interdit */
.custom-dropdown-option.locked {
    opacity: 0.5;
    cursor: url('/img/cursor_32.png') 4 0, not-allowed;
}

.action-btn.disabled {
    opacity: 0.5;
    cursor: url('/img/cursor_32.png') 4 0, not-allowed;
}

.harvest-btn {
    background: #2a3a1a;
    border-color: var(--color-green-light);
    color: var(--color-green-light);
}

.harvest-btn:hover {
    background: #3a5a2a;
    border-color: #a4d65e;
}

.move-btn {
    background: linear-gradient(180deg, #1a2a3a 0%, #0a1a2a 100%);
    border-color: var(--color-blue-move);
    color: #64b5f6;
}

.move-btn:hover {
    background: linear-gradient(180deg, #2a3a4a 0%, #1a2a3a 100%);
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.2);
}

.rotate-btn {
    background: linear-gradient(180deg, #2a1a3a 0%, #1a0a2a 100%);
    border-color: #9c6cd4;
    color: #c9a3f5;
}

.rotate-btn:hover {
    background: linear-gradient(180deg, #3a2a4a 0%, #2a1a3a 100%);
    box-shadow: 0 0 8px rgba(156, 108, 212, 0.3);
}

.downgrade-btn {
    background: linear-gradient(180deg, #4a3a1a 0%, #2a2010 100%);
    border-color: #8a6a2a;
    color: #e0a830;
}

.downgrade-btn:hover {
    background: linear-gradient(180deg, #5a4a2a 0%, #3a2a10 100%);
    box-shadow: 0 0 8px rgba(224, 168, 48, 0.2);
}

.demolish-btn {
    background: linear-gradient(180deg, var(--danger-bg) 0%, var(--danger-bg-dark) 100%);
    border-color: var(--color-red-dark);
    color: var(--color-danger);
}

.demolish-btn:hover {
    background: linear-gradient(180deg, #5a2a2a 0%, #3a1010 100%);
    box-shadow: 0 0 8px rgba(255, 99, 71, 0.2);
}

#move-mode-banner {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(33, 150, 243, 0.9);
    color: var(--text-white);
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    z-index: 1000;
    pointer-events: none;
}

/* Bandeau de mode placement (construction, achat terrain, assignation outil) */
#placement-mode-banner {
    position: absolute;
    bottom: 220px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(42, 26, 14, 0.95) 0%, rgba(26, 15, 8, 0.97) 100%);
    color: var(--text-primary);
    border: 2px solid var(--gold);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    z-index: 1000;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 16px var(--black-a50);
}

#placement-mode-cancel {
    background: linear-gradient(180deg, rgba(120, 60, 20, 0.6) 0%, rgba(80, 30, 10, 0.7) 100%);
    border: 1px solid var(--gold);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
    padding: 4px 12px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
}

#placement-mode-cancel:hover {
    background: linear-gradient(180deg, rgba(150, 70, 25, 0.7) 0%, rgba(100, 40, 15, 0.8) 100%);
    border-color: var(--gold-bright, var(--gold));
}

#placement-mode-cancel:hover {
    background: var(--gold-a30);
    color: var(--gold-bright);
}


/* Tooltip */
#tooltip {
    position: absolute;
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    color: var(--text-primary);
    border: 2px solid var(--gold);
    border-radius: 3px;
    padding: 6px 10px;
    font-size: 12px;
    pointer-events: none;
    z-index: 30;
    max-width: 220px;
    white-space: pre-line;
    line-height: 1.4;
    box-shadow: 0 0 12px var(--gold-a30), 0 4px 12px var(--black-a60);
}

/* Offline Popup */
#offline-popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--black-a75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
}

#offline-content {
    position: relative;
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 3px solid var(--gold);
    border-radius: 4px;
    padding: 24px 32px 20px;
    text-align: center;
    min-width: 320px;
    max-width: 90vw;
    box-shadow:
        0 0 30px var(--gold-a40),
        inset 0 0 60px var(--black-a50),
        0 8px 32px var(--black-a80);
    animation: panelAppear 0.25s ease-out;
}

#offline-content::before,
#offline-content::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

#offline-content::before {
    top: 6px;
}

#offline-content::after {
    bottom: 6px;
}

#offline-content h3 {
    color: var(--text-light);
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px var(--black-a80);
}

#offline-time {
    color: var(--text-muted);
    margin-bottom: 12px;
    font-size: 14px;
}

#offline-earnings {
    color: var(--text-warm);
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.6;
}

#offline-ok {
    padding: 8px 30px;
    background: linear-gradient(180deg, #1a3a1a 0%, #0a200a 100%);
    color: var(--text-light);
    border: 2px solid var(--gold);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.15s;
}

#offline-ok:hover {
    background: linear-gradient(180deg, #2a5a2a 0%, #1a3a1a 100%);
    border-color: var(--gold-muted);
    box-shadow: 0 0 12px var(--gold-a30);
}

.hidden {
    display: none !important;
}

/* === Medieval Panel Base === */
.medieval-panel {
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 3px solid var(--gold);
    border-radius: 4px;
    box-shadow:
        0 0 20px var(--gold-a30),
        inset 0 0 40px var(--black-a50),
        0 6px 24px rgba(0, 0, 0, 0.7);
    animation: panelAppear 0.2s ease-out;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.medieval-panel::before,
.medieval-panel::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    pointer-events: none;
    z-index: 1;
}

.medieval-panel::before {
    top: 6px;
}

.medieval-panel::after {
    bottom: 6px;
}

.medieval-panel-header {
    border-bottom: 1px solid var(--gold-a40) !important;
}

.medieval-panel-header h3,
[id$="-panel-header"] h3 {
    color: var(--gold-bright) !important;
    text-shadow: 0 1px 3px var(--black-a80);
}

/* Medieval scrollbar (on scrollable content divs) */
.medieval-panel>[id$="-content"],
.medieval-panel>[id$="-tabs-content"],
#feedback-form {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.medieval-panel>[id$="-content"]::-webkit-scrollbar,
.medieval-panel::-webkit-scrollbar {
    width: 6px;
}

.medieval-panel>[id$="-content"]::-webkit-scrollbar-track,
.medieval-panel::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

.medieval-panel>[id$="-content"]::-webkit-scrollbar-thumb,
.medieval-panel::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 3px;
}

/* Sticky panel headers & tabs */
[id$="-panel-header"],
.medieval-panel>[id$="-tabs"],
.medieval-panel>[id$="-subtabs"] {
    flex-shrink: 0;
}

/* Unified close button */
.medieval-panel [id$="-close"] {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 28px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
    flex-shrink: 0;
}

.medieval-panel [id$="-close"]:hover {
    color: var(--text-white);
    background: var(--gold-a30);
}

/* Medieval tabs */
.medieval-panel .research-tab,
.medieval-panel .tool-tab,
.medieval-panel .overview-tab,
.medieval-panel .prestige-tab,
.medieval-panel .caserne-tab,
.medieval-panel .stats-tab {
    background: var(--bg-a80);
    border-color: var(--gold-a30);
    color: var(--text-muted);
}

.medieval-panel .research-tab:hover,
.medieval-panel .tool-tab:hover,
.medieval-panel .overview-tab:hover,
.medieval-panel .prestige-tab:hover,
.medieval-panel .caserne-tab:hover,
.medieval-panel .stats-tab:hover {
    background: var(--gold-a15);
    color: var(--text-warm);
}

.medieval-panel .research-tab.active,
.medieval-panel .tool-tab.active,
.medieval-panel .overview-tab.active,
.medieval-panel .prestige-tab.active,
.medieval-panel .caserne-tab.active,
.medieval-panel .stats-tab.active {
    background: var(--gold-a20);
    border-color: var(--gold);
    color: var(--text-light);
}

/* Medieval inner rows */
.medieval-panel .research-tech,
.medieval-panel .tool-buy-row,
.medieval-panel .tool-owned-row,
.medieval-panel .overview-item,
.medieval-panel .overview-resource-row,
.medieval-panel .ach-item,
.medieval-panel .seed-row,
.medieval-panel .companion-row,
.medieval-panel .prestige-bonus-row,
.medieval-panel .craft-item {
    background: var(--bg-a60);
    border-color: var(--gold-a20);
}

.medieval-panel .overview-item:hover,
.medieval-panel .overview-resource-row:hover {
    border-color: var(--gold);
    background: var(--gold-a15);
}

/* Medieval tier/section headers */
.medieval-panel .research-tier-header,
.medieval-panel .tool-section-header,
.medieval-panel .overview-category {
    background: var(--gold-a15);
    color: var(--gold-muted);
}

/* Medieval filter checkbox */
.medieval-panel .research-filter-label input[type="checkbox"] {
    accent-color: var(--gold);
}

/* === Event Panel (side panel, même layout que sell) === */
#event-panel {
    position: absolute;
    top: 44px;
    left: 0;
    bottom: 130px;
    width: 380px;
    padding: 12px 14px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-bottom: none;
    overflow-y: auto;
    animation: sideSlideIn 0.35s ease-out;
}

#event-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gold-a40);
}

#event-panel-header h3 {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Le event panel ne peut pas être fermé */
#event-close {
    display: none;
}

#event-panel-content {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#event-panel-content::-webkit-scrollbar {
    width: 6px;
}

#event-panel-content::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

/* === Sell Panel === */
#sell-panel {
    position: absolute;
    top: 42px;
    left: 0;
    bottom: 0;
    width: 380px;
    padding: 12px 14px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-bottom: none;
    animation: sideSlideIn 0.35s ease-out;
}

#sell-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gold-a40);
}

#sell-panel-header h3 {
    display: flex;
    align-items: center;
    gap: 6px;
}

#sell-content {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#sell-content::-webkit-scrollbar {
    width: 6px;
}

#sell-content::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

#sell-content::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 3px;
}

.sell-row {
    background: var(--bg-a60);
    border: 1px solid var(--gold-a20);
    border-radius: 4px;
    padding: 8px 10px;
}

.sell-row-empty {
    opacity: 0.4;
    pointer-events: none;
}

.sell-row-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--text-light);
}

.sell-res-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: bold;
    flex: 1;
}

.sell-res-stock {
    color: var(--text-muted);
    font-size: 12px;
}

.sell-res-price {
    color: var(--color-green);
    font-size: 12px;
    font-weight: bold;
}

/* === Taux net de production dans le panel vente === */
.sell-res-rate {
    font-size: 11px;
    font-weight: normal;
}

.sell-rate-pos {
    color: var(--color-green);
}

.sell-rate-neg {
    color: var(--color-red);
}

.sell-rate-zero {
    display: none;
}

.sell-row-controls {
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* === Éléments collés dans sell-row-controls === */
/* Tous les enfants : pas de border-radius, bordure gauche supprimée sauf le 1er */
.sell-row-controls>* {
    border-radius: 0;
}

.sell-row-controls> :first-child {
    border-radius: 3px 0 0 3px;
}

.sell-row-controls> :last-child {
    border-radius: 0 3px 3px 0;
}

.sell-row-controls>*+* {
    border-left: none;
}

.sell-row-pct {
    flex: 1;
    padding: 4px 0;
    background: var(--gold-a10);
    color: var(--text-muted);
    border: 1px solid var(--gold-a30);
    border-radius: 0;
    font-size: 11px;
    font-weight: bold;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
}

.sell-row-pct-active {
    background: var(--gold-a50);
    border-color: var(--gold-bright);
    color: var(--gold-bright);
}

/* === Avertissement dépassement stockage or === */
.sell-btn-warn {
    background: #d4820e !important;
    border-color: #e89a1c !important;
    color: #fff !important;
}

.sell-overflow-warn {
    font-size: 11px;
    color: var(--color-red);
    margin-top: 3px;
    text-align: right;
}

.sell-amount {
    width: 60px;
    padding: 3px 4px;
    background: var(--bg-dark);
    color: var(--text-light);
    border: 1px solid var(--gold-a40);
    border-radius: 0;
    font-size: 11px;
    text-align: center;
}

.sell-amount:focus {
    outline: none;
    border-color: var(--gold);
}

.sell-panel-btn {
    padding: 4px 6px;
    background: var(--gold-a20);
    color: var(--text-light);
    border: 1px solid var(--gold);
    border-radius: 0;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}

.sell-panel-btn:hover {
    background: var(--gold-a40);
}

.sell-exec-btn {
    background: var(--green-a15);
    border-color: var(--color-green);
    color: var(--color-green);
}

.sell-exec-btn:hover {
    background: var(--green-a30);
}

#sell-footer {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--gold-a40);
    text-align: center;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#sell-pct-group {
    display: flex;
    gap: 0;
}

#sell-pct-group .sell-pct-btn {
    flex: 1;
    padding: 5px 0;
    font-size: 12px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--gold-a30);
    border-radius: 0;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    transition: background 0.15s, color 0.15s;
}

#sell-pct-group .sell-pct-btn:first-child {
    border-radius: 3px 0 0 3px;
}

#sell-pct-group .sell-pct-btn:last-child {
    border-radius: 0 3px 3px 0;
}

#sell-pct-group .sell-pct-btn+.sell-pct-btn {
    margin-left: -1px;
}

#sell-pct-group .sell-pct-btn:hover {
    background: var(--gold-a15);
    color: var(--text-light);
}

#sell-pct-group .sell-pct-btn.active {
    background: linear-gradient(180deg, var(--bg-gradient-dark) 0%, var(--bg-gradient-darker) 100%);
    color: var(--gold-bright);
    border-color: var(--gold);
    position: relative;
    z-index: 1;
}

/* === Icon mode segment buttons (settings) === */
#icon-mode-group {
    display: flex;
    gap: 6px;
}

#icon-mode-group .sell-pct-btn {
    padding: 5px 12px;
    font-size: 12px;
    background: var(--gold-a10);
    color: var(--text-muted);
    border: 1px solid var(--gold-a30);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    transition: background 0.15s, color 0.15s;
}

#icon-mode-group .sell-pct-btn:hover {
    background: var(--gold-a30);
    color: var(--text-light);
}

#icon-mode-group .sell-pct-btn.active {
    background: var(--gold-a50);
    color: var(--gold-bright);
    border-color: var(--gold);
}

.sell-all-action {
    width: 100%;
    padding: 6px 12px;
    font-size: 13px;
    background: var(--green-a15);
    border-color: var(--color-green);
    color: var(--color-green);
}

.sell-all-action:hover {
    background: var(--green-a30);
}

.sell-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
    font-size: 13px;
}

/* === Import / Export Panel === */
#import-panel,
#export-panel,
#market-sell-panel,
#portal-panel {
    position: absolute;
    top: 42px;
    left: 0;
    bottom: 0;
    width: 380px;
    padding: 12px 14px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-bottom: none;
    animation: sideSlideIn 0.35s ease-out;
}

#import-panel-header,
#export-panel-header,
#market-sell-panel-header,
#portal-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gold-a40);
}

#import-panel-header h3,
#export-panel-header h3,
#market-sell-panel-header h3,
#portal-panel-header h3 {
    display: flex;
    align-items: center;
    gap: 6px;
}

#import-tabs,
#export-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.import-map-tab {
    flex: 1;
    padding: 5px 0;
    font-size: 12px;
    background: var(--gold-a10);
    color: var(--text-muted);
    border: 1px solid var(--gold-a30);
    border-radius: 0;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.import-map-tab:first-child {
    border-radius: 3px 0 0 3px;
}

.import-map-tab:last-child {
    border-radius: 0 3px 3px 0;
}

.import-map-tab+.import-map-tab {
    border-left: none;
}

.import-map-tab:hover {
    background: var(--gold-a30);
    color: var(--text-light);
}

.import-map-tab.active {
    background: var(--gold-a50);
    color: var(--gold-bright);
    border-color: var(--gold);
}

#import-content,
#export-content,
#market-sell-content,
#portal-content {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#import-content::-webkit-scrollbar,
#export-content::-webkit-scrollbar,
#market-sell-content::-webkit-scrollbar,
#portal-content::-webkit-scrollbar {
    width: 6px;
}

#import-content::-webkit-scrollbar-track,
#export-content::-webkit-scrollbar-track,
#market-sell-content::-webkit-scrollbar-track,
#portal-content::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

#import-content::-webkit-scrollbar-thumb,
#export-content::-webkit-scrollbar-thumb,
#market-sell-content::-webkit-scrollbar-thumb,
#portal-content::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 3px;
}

.import-res-row {
    background: var(--bg-a60);
    border: 1px solid var(--gold-a20);
    border-radius: 4px;
    padding: 8px 10px;
}

.import-res-row.active {
    border-color: var(--green-a40);
}

.import-row-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-light);
}

.import-res-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: bold;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.import-res-stock {
    font-size: 11px;
    min-width: 55px;
    text-align: right;
}

.import-dump-btn {
    background: none;
    border: 1px solid var(--gold-a40);
    color: #c84;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 3px;
    transition: background 0.15s;
}

.import-dump-btn:hover {
    background: rgba(200, 130, 50, 0.2);
}

.import-res-toggle {
    padding: 2px 8px;
    font-size: 13px;
    background: var(--gold-a15);
    color: var(--text-muted);
    border: 1px solid var(--gold-a30);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    transition: background 0.15s, color 0.15s;
    min-width: 28px;
    text-align: center;
}

.import-res-toggle:hover {
    background: rgba(76, 175, 80, 0.2);
    color: #7c7;
}

.import-res-toggle.active {
    background: var(--green-a25);
    color: var(--color-green);
    border-color: var(--color-green);
}

.import-res-toggle:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.import-row-controls {
    display: flex;
    gap: 0;
    margin-top: 6px;
}

.import-pct-btn {
    flex: 1;
    padding: 4px 0;
    background: var(--gold-a10);
    color: var(--text-muted);
    border: 1px solid var(--gold-a30);
    border-radius: 0;
    font-size: 11px;
    font-weight: bold;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    transition: background 0.15s, color 0.15s;
}

.import-pct-btn:first-child {
    border-radius: 3px 0 0 3px;
}

.import-pct-btn:last-child {
    border-radius: 0 3px 3px 0;
}

.import-pct-btn+.import-pct-btn {
    border-left: none;
}

.import-pct-btn:hover {
    background: var(--gold-a30);
    color: var(--text-light);
}

.import-pct-btn.active {
    background: var(--gold-a50);
    color: var(--gold-bright);
    border-color: var(--gold);
}

#import-footer,
#export-footer,
#market-sell-footer,
#portal-footer {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--gold-a40);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* === Phases Panel (Ritual map) === */
#phases-panel {
    position: absolute;
    top: 42px;
    left: 0;
    bottom: 0;
    width: 380px;
    padding: 12px 14px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-bottom: none;
    animation: sideSlideIn 0.35s ease-out;
}

#phases-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gold-a40);
}

#phases-panel-header h3 {
    display: flex;
    align-items: center;
    gap: 6px;
}

#phases-content {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 4px 0;
}

#phases-content::-webkit-scrollbar {
    width: 6px;
}

#phases-content::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

#phases-content::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 3px;
}

.left-shortcut-btn.phases-icon-btn {
    color: var(--color-purple, #9b59b6);
}

/* Import/Export panel shift classes (same offset as sell-panel) */
#season-hud.import-panel-open,
#season-hud.export-panel-open,
#season-hud.market-sell-panel-open,
#season-hud.portal-panel-open,
#season-hud.elevator-panel-open,
#season-hud.caserne-panel-open {
    left: 426px;
}

#tutorial-banner.import-panel-open,
#tutorial-banner.export-panel-open,
#tutorial-banner.market-sell-panel-open,
#tutorial-banner.portal-panel-open,
#tutorial-banner.elevator-panel-open,
#tutorial-banner.caserne-panel-open {
    left: 388px;
}

/* Bouton "Gérer les slots" dans infosPanel */
.import-manage-btn {
    width: 100%;
    padding: 6px 10px;
    margin-top: 6px;
    background: var(--gold-a20);
    color: var(--text-light);
    border: 1px solid var(--gold-a40);
    border-radius: 4px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 12px;
    font-weight: bold;
    transition: background 0.15s;
}

.import-manage-btn:hover {
    background: var(--gold-a40);
}

/* === Elevator Panel (configuration ascenseur montagne) === */
#elevator-panel {
    position: absolute;
    top: 42px;
    left: 0;
    bottom: 0;
    width: 380px;
    padding: 12px 14px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-bottom: none;
    animation: sideSlideIn 0.35s ease-out;
    overflow-y: auto;
}

#elevator-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gold-a40);
}

#elevator-panel-header h3 {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Sections du panel ascenseur */
.elev-section {
    margin-bottom: 10px;
}

.elev-section-title {
    font-size: 12px;
    font-weight: bold;
    color: var(--gold);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.elev-stop-label {
    display: block;
    font-size: 12px;
    padding: 3px 0;
    color: var(--text-main);
    cursor: pointer;
}

.elev-stop-label.disabled {
    opacity: 0.5;
    cursor: default;
}

.elev-stop-label input[type="checkbox"] {
    margin-right: 4px;
    accent-color: var(--gold);
}

/* Config par stop (section pliable) */
.elev-stop-config {
    margin-bottom: 8px;
    border: 1px solid var(--gold-a20);
    border-radius: 4px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.15);
}

.elev-stop-summary {
    font-size: 12px;
    font-weight: bold;
    color: var(--gold-light);
    cursor: pointer;
    padding: 2px 0;
}

.elev-config-row {
    margin: 6px 0;
    font-size: 11px;
    color: var(--text-muted);
}

.elev-config-label {
    display: block;
    font-size: 11px;
    color: var(--gold-light);
    margin-bottom: 3px;
}

.elev-res-label {
    display: inline-block;
    font-size: 11px;
    margin-right: 8px;
    padding: 2px 0;
    color: var(--text-main);
    cursor: pointer;
}

.elev-res-label input[type="checkbox"] {
    margin-right: 3px;
    accent-color: var(--gold);
}

/* Sliders ascenseur */
.elev-slider {
    width: calc(100% - 40px);
    height: 4px;
    accent-color: var(--gold);
    vertical-align: middle;
}

.elev-slider-val {
    display: inline-block;
    width: 36px;
    text-align: right;
    font-size: 11px;
    color: var(--text-main);
    font-weight: bold;
}

/* Stats résumé */
.elev-stats {
    border-top: 1px solid var(--gold-a20);
    padding-top: 8px;
}

.elev-stat-row {
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 0;
}

.elev-stat-row b {
    color: var(--text-main);
}

/* Bouton configurer dans le buildingInfoRenderer */
.elev-config-btn {
    background: var(--gold-a20);
    border: 1px solid var(--gold-a40);
    color: var(--text-main);
    border-radius: 3px;
    font-family: inherit;
    transition: background 0.2s;
}

.elev-config-btn:hover {
    background: var(--gold-a40);
}

/* Shift classes pour elevator panel */
#left-shortcuts.elevator-panel-open {
    left: 380px;
}

#season-hud.elevator-panel-open {
    left: 426px;
}

#tutorial-banner.elevator-panel-open {
    left: 388px;
}

/* === Caserne Panel (panneau latéral caserne & watchtower) === */
#caserne-panel {
    position: absolute;
    top: 42px;
    left: 0;
    bottom: 0;
    width: 380px;
    padding: 12px 14px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-bottom: none;
    animation: sideSlideIn 0.35s ease-out;
}

#caserne-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gold-a40);
}

#caserne-panel-header h3 {
    display: flex;
    align-items: center;
    gap: 6px;
}

#caserne-panel-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.caserne-panel-tab {
    flex: 1;
    padding: 5px 0;
    font-size: 12px;
    background: var(--gold-a10);
    color: var(--text-muted);
    border: 1px solid var(--gold-a20);
    text-align: center;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.caserne-panel-tab:first-child {
    border-radius: 3px 0 0 3px;
}

.caserne-panel-tab:last-child {
    border-radius: 0 3px 3px 0;
}

.caserne-panel-tab+.caserne-panel-tab {
    border-left: none;
}

.caserne-panel-tab:hover {
    background: var(--gold-a30);
    color: var(--text-light);
}

.caserne-panel-tab.active {
    background: var(--gold-a50);
    color: var(--gold-bright);
    border-color: var(--gold);
}

#caserne-panel-content {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#caserne-panel-content::-webkit-scrollbar {
    width: 6px;
}

#caserne-panel-content::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

#caserne-panel-content::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 3px;
}

/* Override caserne-content max-height when in the lateral panel */
#caserne-panel-content .caserne-content {
    max-height: none;
}

/* Research Button (legacy - kept for research panel btn) */

/* Research Panel */
#research-panel {
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    width: 620px;
    max-height: calc(100vh - 120px);
    padding: 16px;
    z-index: 25;
}

#research-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
}

#research-panel-header h3 {
    font-size: 16px;
}

#research-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}

/* Onglets de tier dans le panneau de recherche */
#research-tier-tabs {
    display: flex;
    gap: 3px;
    margin-bottom: 10px;
    padding: 0 2px;
}

#research-tier-tabs .research-tier-tab {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--bg-tab-border);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-dim);
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

#research-tier-tabs .research-tier-tab:hover {
    background: rgba(0, 255, 102, 0.08);
    color: var(--text-info);
}

#research-tier-tabs .research-tier-tab.active {
    background: rgba(0, 255, 102, 0.12);
    border-color: var(--color-green-bright);
    color: var(--color-green-bright);
}

.research-tab {
    flex: 1;
    padding: 6px 12px;
    border: 1px solid var(--bg-tab-border);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 13px;
    font-weight: 600;
}

.research-tab:hover {
    background: rgba(0, 255, 102, 0.1);
    color: var(--text-info);
}

.research-tab.active {
    background: rgba(0, 255, 102, 0.15);
    border-color: var(--color-green-bright);
    color: var(--color-green-bright);
}

.research-filter {
    margin-bottom: 8px;
}

.research-filter-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-info);
    font-size: 13px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
}

.research-filter-label input[type="checkbox"] {
    accent-color: var(--color-green-bright);
}

.research-tier {
    margin-bottom: 12px;
}

.research-tier-header {
    color: var(--color-green-bright);
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 6px;
    padding: 4px 8px;
    background: rgba(0, 255, 102, 0.1);
    border-radius: 3px;
}

.research-tech {
    background: var(--research-bg);
    border: 1px solid var(--research-border);
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 6px;
    transition: border-color 0.15s;
}

.research-tech.completed {
    border-color: var(--color-green-bright);
    background: rgba(0, 255, 102, 0.08);
}

.research-tech.locked {
    opacity: 0.5;
}

.tech-name {
    color: var(--text-primary);
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 2px;
}

.tech-desc {
    color: var(--text-muted);
    font-size: 11px;
    margin-bottom: 4px;
}

.tech-info {
    color: var(--text-dimmer);
    font-size: 10px;
    margin-bottom: 4px;
}

.tech-time {
    color: #8b7752;
    font-size: 11px;
    margin-bottom: 4px;
}

.tech-status {
    color: var(--color-green-bright);
    font-size: 11px;
    font-weight: bold;
}

.tech-start-btn {
    padding: 4px 12px;
    background: var(--gold-a15);
    color: var(--text-light);
    border: 1px solid var(--gold);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 11px;
    margin-top: 4px;
}

.tech-start-btn:hover {
    background: var(--gold-a30);
}

.research-rate-info {
    color: var(--text-dim);
    font-size: 11px;
    text-align: center;
    padding: 8px 0;
    margin-top: 4px;
    border-top: 1px solid var(--research-border);
}

#research-panel::-webkit-scrollbar {
    width: 6px;
}

#research-panel::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

#research-panel::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 3px;
}


/* Land Block Selector */
#land-block-selector {
    display: flex;
    align-items: center;
    gap: 2px;
}

#block-size-buttons {
    display: flex;
    gap: 2px;
}

.block-size-btn {
    padding: 2px 6px;
    background: var(--land-bg);
    color: var(--text-muted);
    border: 1px solid var(--land-border);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 10px;
}

.block-size-btn:hover {
    background: var(--land-bg-hover);
    color: var(--text-primary);
}

.block-size-btn.active {
    background: var(--land-bg-hover);
    border-color: var(--color-green);
    color: var(--color-green);
    font-weight: bold;
}

/* Research Notification — positionné sous le map-switcher */
#research-notification {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 2px solid var(--gold);
    border-radius: 3px;
    padding: 10px 24px;
    z-index: 35;
    animation: notifSlide 0.3s ease-out;
    box-shadow: 0 0 16px var(--gold-a30), 0 4px 16px var(--black-a60);
}

#research-notification-text {
    color: var(--text-light);
    font-size: 14px;
    font-weight: bold;
}

/* Equipment Button (legacy) */

/* Equipment Panel — panneau latéral gauche (même layout que sell-panel) */
#tools-panel {
    position: absolute;
    top: 42px;
    left: 0;
    bottom: 0;
    width: 380px;
    padding: 12px 14px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-bottom: none;
    animation: sideSlideIn 0.35s ease-out;
}

#tools-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gold-a40);
}

#tools-panel-header h3 {
    display: flex;
    align-items: center;
    gap: 6px;
}

#tools-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 6px;
}

.tool-tab {
    flex: 1;
    padding: 6px 4px;
    background: var(--bg-row);
    color: var(--text-dim);
    border: 1px solid var(--bg-row-border);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 11px;
    text-align: center;
}

.tool-tab.active {
    background: var(--bg-row-border);
    color: var(--color-orange);
    border-color: var(--color-orange);
    font-weight: bold;
}

.tool-tab:hover:not(.active) {
    background: #222238;
}

#tools-content {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#tools-content::-webkit-scrollbar {
    width: 6px;
}

#tools-content::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

#tools-content::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 3px;
}

#tools-subtabs {
    display: flex;
    gap: 2px;
    margin-bottom: 8px;
}

.tool-subtab {
    flex: 1;
    padding: 4px;
    background: #111;
    color: var(--text-dimmer);
    border: 1px solid var(--bg-toggle);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 11px;
    text-align: center;
}

.tool-subtab.active {
    background: #1a2a1a;
    color: var(--color-assign);
    border-color: var(--color-assign);
}

.tool-subtab:hover:not(.active) {
    background: #1a1a1a;
}

.tool-empty {
    color: var(--text-dimmest);
    font-size: 12px;
    text-align: center;
    padding: 16px 0;
    font-style: italic;
}

.tool-section-header {
    color: var(--color-orange);
    font-size: 13px;
    font-weight: bold;
    margin: 8px 0 6px;
    padding: 4px 8px;
    background: rgba(255, 140, 0, 0.1);
    border-radius: 3px;
}

.tool-buy-row,
.tool-owned-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    margin-bottom: 4px;
    background: var(--bg-row);
    border: 1px solid var(--bg-row-border);
    border-radius: 4px;
}

.tool-buy-name,
.tool-owned-name {
    color: var(--text-primary);
    font-weight: bold;
    font-size: 13px;
    display: block;
}

.tool-buy-stats,
.tool-owned-stats {
    color: var(--text-dim);
    font-size: 11px;
    display: block;
    margin-top: 2px;
}

.tool-buy-btn,
.tool-upgrade-btn {
    padding: 5px 12px;
    background: var(--gold-a15);
    color: var(--text-light);
    border: 1px solid var(--gold);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 12px;
    white-space: nowrap;
}

.tool-buy-btn:hover,
.tool-upgrade-btn:hover {
    background: var(--gold-a30);
}

.tool-buy-btn.disabled,
.tool-upgrade-btn.disabled {
    opacity: 0.5;
    cursor: url('/img/cursor_32.png') 4 0, not-allowed;
}

.tool-owned-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.tool-owned-assign {
    color: var(--color-assign);
    font-size: 11px;
    display: block;
    margin-top: 2px;
}

.tool-assign-btn {
    padding: 4px 10px;
    background: #1a2a1a;
    color: var(--color-assign);
    border: 1px solid var(--color-assign);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 11px;
    white-space: nowrap;
}

.tool-assign-btn:hover {
    background: var(--land-bg);
}

.tool-max {
    color: var(--color-orange);
    font-size: 11px;
    font-weight: bold;
    margin-right: 4px;
}

/* Event Banner */
#event-banner {
    position: fixed;
    top: 44px;
    right: 86px;
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 2px solid var(--gold);
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 6px 16px;
    z-index: 9;
    text-align: center;
    animation: notifSlide 0.3s ease-out;
    box-shadow: 0 4px 16px var(--black-a60);
}

#event-name {
    color: var(--gold-bright);
    font-size: 14px;
    font-weight: bold;
    display: block;
}

#event-desc {
    color: var(--text-primary);
    font-size: 12px;
    display: block;
    margin: 2px 0;
}

#event-timer-bar {
    width: 100%;
    height: 4px;
    background: var(--bg-bar);
    border-radius: 2px;
    margin: 4px 0;
    overflow: hidden;
}

#event-timer-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-bright), var(--color-orange));
    border-radius: 2px;
    transition: width 0.3s;
}

#event-timer-text {
    color: var(--text-muted);
    font-size: 11px;
}

/* Companion Panel */
#companion-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    padding: 16px;
    z-index: 25;
}

#companion-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
}

#companion-panel-header h3 {
    font-size: 16px;
}

.companion-row {
    padding: 10px;
    margin-bottom: 8px;
    background: var(--bg-row);
    border: 1px solid var(--bg-row-border);
    border-radius: 4px;
}

.companion-name {
    color: var(--text-primary);
    font-weight: bold;
    font-size: 14px;
    display: block;
    margin-bottom: 2px;
}

.companion-effect {
    color: var(--text-muted);
    font-size: 12px;
    display: block;
    margin-bottom: 6px;
}

.companion-buy-btn {
    padding: 5px 12px;
    background: var(--gold-a15);
    color: var(--text-light);
    border: 1px solid var(--gold);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 12px;
}

.companion-buy-btn:hover {
    background: var(--gold-a30);
}

.companion-buy-btn.disabled {
    opacity: 0.5;
    cursor: url('/img/cursor_32.png') 4 0, not-allowed;
}

.companion-active {
    color: var(--color-green);
    font-size: 12px;
    font-weight: bold;
}

/* Companion Button (legacy - now in bottom bar) */

/* Settings Panel */
#settings-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 16px;
    z-index: 200;
    width: 480px;
    height: 70vh;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

#settings-content {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

#settings-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.settings-tab {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--gold-a30);
    background: var(--bg-a80);
    color: var(--text-muted);
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.settings-tab:hover {
    background: var(--gold-a15);
    color: var(--text-warm);
}

.settings-tab.active {
    background: var(--gold-a20);
    border-color: var(--gold);
    color: var(--text-light);
}

.settings-tab-content {
    display: none;
}

.settings-tab-content.active {
    display: block;
}

#settings-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
}

#settings-panel-header h3 {
    font-size: 16px;
}

.settings-logo {
    text-align: center;
    margin-bottom: 12px;
}

.settings-logo img {
    max-width: 180px;
    height: auto;
}

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

.settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.settings-label {
    color: var(--text-primary);
    font-size: 13px;
    min-width: 60px;
}

.settings-value {
    color: var(--text-muted);
    font-size: 12px;
    min-width: 32px;
    text-align: right;
}

.lang-flags {
    display: flex;
    gap: 6px;
}

.lang-flag {
    background: none;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    padding: 2px 4px;
    opacity: 0.5;
    transition: opacity 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    line-height: 0;
}

.lang-flag svg {
    border-radius: 2px;
}

.lang-flag:hover {
    opacity: 0.8;
}

.lang-flag.selected {
    opacity: 1;
    border-color: var(--gold-light);
}

/* Toggle switch */
.settings-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

.settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-toggle);
    border-radius: 22px;
    transition: 0.3s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: var(--text-dim);
    border-radius: 50%;
    transition: 0.3s;
}

.settings-toggle input:checked+.toggle-slider {
    background: var(--color-green-dark);
}

.settings-toggle input:checked+.toggle-slider::before {
    transform: translateX(18px);
    background: var(--color-green);
}

/* Volume slider */
.settings-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--bg-toggle);
    border-radius: 3px;
    outline: none;
}

.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--text-primary);
    border-radius: 50%;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
}

.settings-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--text-primary);
    border-radius: 50%;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    border: none;
}

.settings-danger {
    border-top: 1px solid rgba(139, 40, 20, 0.4);
    padding-top: 12px;
}

.reset-btn-full {
    width: 100%;
    padding: 8px;
    background: linear-gradient(180deg, #3a1010 0%, #2a0808 100%);
    color: var(--color-red-light);
    border: 1px solid var(--danger-border);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 13px;
}

.reset-btn-full:hover {
    background: linear-gradient(180deg, var(--danger-border) 0%, #3a1010 100%);
}

#btn-settings {
    width: 72px;
    height: 34px;
    color: var(--text-muted);
    border-color: var(--gold-a30);
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
}

#btn-settings:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

/* Medieval Confirm Modal */
#confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 500;
}

#confirm-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--black-a75);
}

#confirm-box {
    position: relative;
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 3px solid var(--gold);
    border-radius: 4px;
    padding: 24px 32px 20px;
    width: 340px;
    max-width: 90vw;
    text-align: center;
    box-shadow:
        0 0 30px var(--gold-a40),
        inset 0 0 60px var(--black-a50),
        0 8px 32px var(--black-a80);
    animation: panelAppear 0.25s ease-out;
}

#confirm-box::before,
#confirm-box::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

#confirm-box::before {
    top: 6px;
}

#confirm-box::after {
    bottom: 6px;
}

@keyframes sideSlideIn {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes sideSlideInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.slide-out-left {
    animation: sideSlideOutLeft 0.3s ease-in forwards !important;
}

.slide-out-right {
    animation: sideSlideOutRight 0.3s ease-in forwards !important;
}

@keyframes sideSlideOutLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes sideSlideOutRight {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes panelAppear {
    from {
        scale: 0.9;
        opacity: 0;
    }
    to {
        scale: 1;
        opacity: 1;
    }
}

#confirm-ornament-top {
    font-size: 22px;
    color: var(--gold-muted);
    margin-bottom: 6px;
    text-shadow: 0 0 8px rgba(201, 168, 52, 0.5);
    filter: drop-shadow(0 0 4px rgba(201, 168, 52, 0.3));
}

#confirm-title {
    color: var(--text-light);
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px var(--black-a80);
}

#confirm-separator {
    width: 60%;
    height: 2px;
    margin: 10px auto;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

#confirm-message {
    color: var(--text-warm);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
    padding: 0 8px;
}

#confirm-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.confirm-btn {
    padding: 8px 24px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: bold;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.15s;
    border: 2px solid;
    min-width: 110px;
}

.confirm-btn-yes {
    background: linear-gradient(180deg, #4a1a1a 0%, var(--danger-bg-dark) 100%);
    border-color: var(--color-red-dark);
    color: var(--color-danger);
    text-shadow: 0 0 6px rgba(255, 99, 71, 0.3);
}

.confirm-btn-yes:hover {
    background: linear-gradient(180deg, #6a2a2a 0%, #3a1010 100%);
    border-color: #c03030;
    box-shadow: 0 0 12px rgba(255, 99, 71, 0.3);
}

.confirm-btn-no {
    background: linear-gradient(180deg, #2a2a1a 0%, #1a1a0e 100%);
    border-color: var(--gold-dark);
    color: #b0a880;
}

.confirm-btn-no:hover {
    background: linear-gradient(180deg, #3a3a2a 0%, #2a2a18 100%);
    border-color: var(--gold);
    color: var(--text-warm);
}

/* Save Conflict Modal */
#save-conflict-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 510;
}

#save-conflict-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--black-a80);
}

#save-conflict-box {
    position: relative;
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 3px solid var(--gold);
    border-radius: 4px;
    padding: 24px 28px 24px;
    width: 420px;
    max-width: 92vw;
    text-align: center;
    box-shadow:
        0 0 30px var(--gold-a40),
        inset 0 0 60px var(--black-a50),
        0 8px 32px var(--black-a80);
    animation: panelAppear 0.25s ease-out;
}

#save-conflict-ornament {
    font-size: 22px;
    color: var(--gold-muted);
    margin-bottom: 6px;
    text-shadow: 0 0 8px rgba(201, 168, 52, 0.5);
}

#save-conflict-title {
    color: var(--text-light);
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px var(--black-a80);
}

#save-conflict-separator {
    width: 60%;
    height: 2px;
    margin: 10px auto 16px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

#save-conflict-cards {
    display: flex;
    gap: 12px;
}

.save-conflict-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 12px;
    background: linear-gradient(180deg, #1e1408 0%, #140e06 100%);
    border: 2px solid var(--border-card-accent);
    border-radius: 4px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    transition: all 0.2s;
    text-align: center;
}

.save-conflict-card:hover {
    border-color: var(--gold-muted);
    background: linear-gradient(180deg, #2e1e10 0%, #1a1208 100%);
    box-shadow: 0 0 16px rgba(201, 168, 52, 0.25);
}

.save-card-label {
    font-size: 15px;
    font-weight: bold;
    color: var(--text-light);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.save-card-date {
    font-size: 12px;
    color: #a09070;
}

.save-card-stats {
    font-size: 13px;
    color: var(--text-warm);
    line-height: 1.6;
}

/* Auth Modal */
#auth-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--black-a75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 300;
}

#auth-content {
    position: relative;
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 3px solid var(--gold);
    border-radius: 4px;
    padding: 24px 24px 20px;
    width: 420px;
    max-width: 90vw;
    box-shadow:
        0 0 30px var(--gold-a40),
        inset 0 0 60px var(--black-a50),
        0 8px 32px var(--black-a80);
    animation: panelAppear 0.25s ease-out;
}


#auth-content::before,
#auth-content::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

#auth-content::before {
    top: 6px;
}

#auth-content::after {
    bottom: 6px;
}

#auth-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--gold-a30);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    transition: all 0.15s;
    z-index: 1;
}

#auth-close:hover {
    color: var(--text-light);
    border-color: var(--gold);
    background: var(--gold-a10);
}

#auth-tabs {
    display: flex;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--gold-a40);
}

.auth-tab {
    flex: 1;
    padding: 8px 14px;
    background: var(--bg-a80);
    color: var(--text-muted);
    border: 1px solid var(--gold-a30);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}

.auth-tab.active {
    background: var(--gold-a20);
    color: var(--text-light);
    border-color: var(--gold);
}

.auth-tab:hover:not(.active) {
    background: var(--gold-a10);
}

.auth-field {
    margin-bottom: 12px;
}

.auth-field label {
    display: block;
    color: var(--text-primary);
    font-size: 12px;
    margin-bottom: 4px;
}

.auth-field input {
    width: 100%;
    padding: 8px 10px;
    background: rgba(10, 6, 3, 0.8);
    color: var(--text-primary);
    border: 1px solid var(--gold-a30);
    border-radius: 3px;
    font-size: 13px;
    outline: none;
}

.auth-field input:focus {
    border-color: var(--gold);
}

#auth-error {
    color: var(--color-red-light);
    font-size: 12px;
    margin-bottom: 8px;
    padding: 6px 8px;
    background: rgba(255, 60, 60, 0.1);
    border-radius: 4px;
}

#auth-submit {
    width: 100%;
    padding: 10px;
    background: linear-gradient(180deg, #1a3a1a 0%, #0a200a 100%);
    color: var(--text-light);
    border: 2px solid var(--gold);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.15s;
}

#auth-submit:hover {
    background: linear-gradient(180deg, #2a5a2a 0%, #1a3a1a 100%);
    box-shadow: 0 0 12px var(--gold-a30);
}

#auth-submit:disabled {
    opacity: 0.5;
    cursor: url('/img/cursor_32.png') 4 0, not-allowed;
}

#auth-skip {
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--gold-a20);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 12px;
    transition: all 0.15s;
}

#auth-skip:hover {
    color: var(--text-light);
    border-color: var(--gold-a40);
    background: var(--gold-a10);
}

/* Auth Modal — Logo */
#auth-logo {
    text-align: center;
    margin-bottom: 12px;
}

#auth-logo-img {
    max-width: 180px;
    height: auto;
    filter: drop-shadow(0 2px 8px var(--gold-a40));
}

/* Auth Modal — Donate button */
#auth-donate {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--gold-a20);
    text-align: center;
}

.auth-donate-btn .gi {
    display: inline-block;
    width: 32px;
    height: 32px;
}

.auth-donate-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 20px;
    background: linear-gradient(180deg, #3a2a0a 0%, #1a1200 100%);
    color: #ffd700;
    border: 1px solid var(--gold-a40);
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.2s;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
}

.auth-donate-btn:hover {
    background: linear-gradient(180deg, #5a3a0a 0%, #2a1a00 100%);
    box-shadow: 0 0 12px var(--gold-a30);
    color: #ffe44d;
}

/* Welcome Modal */
#welcome-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--black-a75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 350;
}

/* Fond noir opaque quand l'intro narrative suit (nouvelle partie) */
#welcome-modal.intro-pending {
    background: rgba(0, 0, 0, 1);
}

#welcome-content {
    position: relative;
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 3px solid var(--gold);
    border-radius: 4px;
    padding: 24px 32px 20px;
    width: 360px;
    max-width: 90vw;
    text-align: center;
    box-shadow:
        0 0 30px var(--gold-a40),
        inset 0 0 60px var(--black-a50),
        0 8px 32px var(--black-a80);
    animation: panelAppear 0.25s ease-out;
}

#welcome-content::before,
#welcome-content::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

#welcome-content::before {
    top: 6px;
}

#welcome-content::after {
    bottom: 6px;
}

#welcome-title {
    color: var(--text-light);
    font-size: 18px;
    margin-bottom: 14px;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px var(--black-a80);
}

#welcome-text {
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 10px;
}

#welcome-warning {
    color: #ff9b6b;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 18px;
    padding: 8px;
    background: rgba(255, 155, 107, 0.1);
    border-radius: 4px;
}

#welcome-leaderboard {
    color: var(--gold-muted);
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 18px;
    padding: 8px;
    background: rgba(201, 168, 52, 0.1);
    border-radius: 4px;
}

#welcome-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

#welcome-buttons .action-btn {
    flex: 1;
    padding: 10px;
    border-radius: 4px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 13px;
    font-weight: bold;
}

#welcome-register {
    background: linear-gradient(180deg, #1a3a1a 0%, #0a200a 100%);
    color: var(--text-light);
    border: 2px solid var(--gold);
}

#welcome-register:hover {
    background: linear-gradient(180deg, #2a5a2a 0%, #1a3a1a 100%);
    box-shadow: 0 0 12px var(--gold-a30);
}

.welcome-login-btn {
    width: 100%;
    padding: 10px;
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 13px;
    font-weight: bold;
    background: var(--gold-a15);
    color: var(--text-warm);
    border: 1px solid var(--gold-a40);
    margin-bottom: 14px;
}

.welcome-login-btn:hover {
    background: var(--gold-a25);
    color: var(--text-light);
}

.welcome-later-btn {
    background: var(--bg-a80);
    color: var(--text-muted);
    border: 1px solid var(--gold-a20);
}

.welcome-later-btn:hover {
    background: var(--gold-a10);
}

#welcome-hint {
    color: #706858;
    font-size: 11px;
    line-height: 1.4;
}

#welcome-hint strong {
    color: var(--text-muted);
}

/* Settings Auth Section */
#settings-auth-section {
    border-bottom: 1px solid var(--gold-a30);
    padding-bottom: 12px;
}

#auth-status {
    margin-bottom: 8px;
}

#auth-status-text {
    font-size: 12px;
}

#auth-actions {
    margin-bottom: 8px;
}

.auth-login-btn {
    background: var(--gold-a15);
    color: var(--text-light);
    border-color: var(--gold);
    font-size: 12px;
    width: 100%;
}

.auth-login-btn:hover {
    background: var(--gold-a30);
}

.auth-logout-btn {
    background: var(--danger-bg);
    color: var(--color-red-light);
    border-color: var(--danger-border);
    font-size: 12px;
    width: 100%;
}

.auth-logout-btn:hover {
    background: var(--danger-border);
}

#save-indicator {
    margin-top: 8px;
}

#save-indicator-text {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 6px;
}

.save-now-btn {
    background: rgba(26, 60, 26, 0.3);
    color: var(--color-green);
    border-color: var(--green-a40);
    font-size: 11px;
    width: 100%;
}

.save-now-btn:hover {
    background: rgba(26, 60, 26, 0.5);
}

/* Overview Panel */
#overview-panel {
    position: absolute;
    top: 56px;
    right: 90px;
    width: 560px;
    max-height: 75vh;
    padding: 12px;
    z-index: 20;
}

#overview-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    cursor: url('/img/cursor_32.png') 4 0, grab;
}

#overview-panel-header h3 {
    font-size: 15px;
}

#overview-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.overview-tab {
    flex: 1;
    padding: 6px 12px;
    border: 1px solid var(--bg-tab-border);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 13px;
    font-weight: 600;
}

.overview-tab:hover {
    background: rgba(192, 168, 130, 0.1);
    color: var(--text-info);
}

.overview-tab.active {
    background: rgba(192, 168, 130, 0.15);
    border-color: var(--overview-accent);
    color: var(--overview-accent);
}

.overview-resource-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    margin-bottom: 2px;
    background: var(--bg-row);
    border: 1px solid var(--bg-row-border);
    border-radius: 4px;
    font-size: 12px;
}

.overview-resource-row:hover {
    border-color: var(--overview-accent);
    background: #22223a;
}

.overview-res-icon {
    font-size: 16px;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}

.overview-res-name {
    color: var(--text-primary);
    font-weight: bold;
    min-width: 90px;
    white-space: nowrap;
}

.overview-res-col {
    flex: 1;
    text-align: right;
    font-size: 11px;
    white-space: nowrap;
}

.overview-res-col.positive {
    color: var(--color-green);
}

.overview-res-col.negative {
    color: var(--color-red);
}

.overview-res-col.neutral {
    color: var(--text-dim);
}

.overview-res-col.net-positive {
    color: #66bb6a;
    font-weight: bold;
}

.overview-res-col.net-negative {
    color: #ef5350;
    font-weight: bold;
}

.overview-res-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin-bottom: 4px;
    font-size: 11px;
    color: var(--text-dim);
    font-weight: bold;
}

.overview-res-header span {
    flex: 1;
    text-align: right;
}

.overview-res-header span:first-child {
    min-width: 112px;
    text-align: left;
    flex: none;
}

.overview-res-header span:nth-child(2) {
    min-width: 22px;
    flex: none;
}

.overview-category {
    color: var(--overview-accent);
    font-size: 13px;
    font-weight: bold;
    margin: 8px 0 4px;
    padding: 4px 8px;
    background: rgba(192, 168, 130, 0.1);
    border-radius: 3px;
}

.overview-subgroup {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 16px;
    margin: 2px 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    border-left: 2px solid var(--gold-a30);
}

.overview-subgroup-rate {
    margin-left: auto;
    color: #6bbd6b;
    font-size: 11px;
    font-weight: normal;
}

.overview-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    margin-bottom: 2px;
    background: var(--bg-row);
    border: 1px solid var(--bg-row-border);
    border-radius: 4px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 12px;
    transition: border-color 0.15s, background 0.15s;
}

.overview-item:hover {
    border-color: var(--overview-accent);
    background: #22223a;
}

.overview-item-overflow {
    border-color: var(--color-red);
}

.overview-item-overflow:hover {
    border-color: #ff6659;
}

.overview-item-name {
    color: var(--text-primary);
    font-weight: bold;
    white-space: nowrap;
    min-width: 0;
}

.overview-item-prod {
    color: var(--text-muted);
    font-size: 11px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-item-tags {
    display: flex;
    gap: 2px;
    font-size: 11px;
    flex-shrink: 0;
}

.overview-item-workers {
    color: var(--text-dim);
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
}

.overview-bar {
    width: 40px;
    height: 6px;
    background: var(--bg-bar);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.overview-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--overview-accent), var(--gold-bright));
    border-radius: 3px;
    transition: width 0.3s;
}

.overview-icon-btn {
    color: var(--overview-accent);
}

.overview-icon-btn:hover {
    border-color: var(--overview-accent);
}

#overview-panel::-webkit-scrollbar {
    width: 6px;
}

#overview-panel::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

#overview-panel::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 3px;
}

@keyframes notifSlide {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* === Bottom-Right Utility Menu (au-dessus du build panel) === */
#bottom-right-menu {
    position: absolute;
    bottom: 0;
    right: 86px;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: linear-gradient(0deg, var(--bg-gradient-dark), var(--bg-gradient-darker));
    border-top: 2px solid var(--gold);
    border-left: 2px solid var(--gold);
    border-radius: 4px 0 0 0;
}

#bottom-right-menu button {
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--gold);
    border-radius: 3px;
    padding: 2px 7px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    box-shadow: 0 0 4px var(--gold-a20);
    line-height: 1.2;
    min-width: 26px;
    text-align: center;
}

#bottom-right-menu button:hover {
    background: var(--gold-a30);
    border-color: var(--gold-bright);
    color: var(--gold-bright);
}

/* === Season HUD === */
#season-hud {
    position: absolute;
    top: 44px;
    left: 46px;
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 2px solid var(--gold);
    border-radius: 3px;
    padding: 4px 12px;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: url('/img/cursor_32.png') 4 0, default;
    box-shadow: 0 0 8px var(--gold-a20);
    transition: left 0.2s ease;
}

#season-hud.sell-panel-open {
    left: 426px;
}

#season-bar {
    width: 50px;
    height: 4px;
    background: var(--bg-bar);
    border-radius: 2px;
    overflow: hidden;
}

#season-bar-fill {
    height: 100%;
    background: var(--color-green);
    border-radius: 2px;
    transition: width 0.5s, background 0.5s;
}

#season-tooltip {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 2px solid var(--gold);
    border-radius: 3px;
    padding: 8px 12px;
    font-size: 11px;
    color: var(--text-primary);
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    line-height: 1.6;
    box-shadow: 0 0 12px var(--gold-a30), 0 4px 12px var(--black-a60);
}

#season-tooltip .bonus-pos {
    color: var(--color-green);
}

#season-tooltip .bonus-neg {
    color: #ef5350;
}

#season-tooltip .bonus-neutral {
    color: var(--text-dim);
}

/* === Prestige HUD === */
#prestige-hud {
    position: absolute;
    top: 44px;
    left: 46px;
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 2px solid var(--gold);
    border-radius: 3px;
    padding: 4px 10px;
    z-index: 12;
    font-size: 12px;
    color: var(--text-light);
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-weight: bold;
    box-shadow: 0 0 8px var(--gold-a20);
    transition: left 0.2s ease;
}

/* Étoiles en attente dans le prestige HUD */
#prestige-pending {
    color: var(--gold);
    font-size: 11px;
    margin-left: 2px;
}

/* Ligne d'étoiles en attente dans le panneau prestige */
.prestige-pending-info {
    color: var(--gold);
    font-style: italic;
}

/* Prestige HUD shift quand panels latéraux ouverts */
#prestige-hud.sell-panel-open,
#prestige-hud.import-panel-open,
#prestige-hud.export-panel-open,
#prestige-hud.market-sell-panel-open,
#prestige-hud.portal-panel-open,
#prestige-hud.elevator-panel-open,
#prestige-hud.caserne-panel-open {
    left: 426px;
}

/* Season HUD décalé quand prestige-hud est visible */
#season-hud.prestige-visible {
    left: 110px;
}

#season-hud.prestige-visible.sell-panel-open,
#season-hud.prestige-visible.import-panel-open,
#season-hud.prestige-visible.export-panel-open,
#season-hud.prestige-visible.market-sell-panel-open,
#season-hud.prestige-visible.portal-panel-open,
#season-hud.prestige-visible.caserne-panel-open {
    left: 490px;
}

/* === Toasts === */
/* === Generic Toast (UI.showToast) === */
#generic-toast {
    position: absolute;
    top: 160px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 2px solid var(--gold);
    border-radius: 3px;
    padding: 10px 24px;
    z-index: 41;
    animation: notifSlide 0.3s ease-out;
    box-shadow: 0 0 16px var(--gold-a30), 0 4px 16px var(--black-a60);
    max-width: 500px;
    text-align: center;
}
#generic-toast.toast-success { border-color: #4CAF50; box-shadow: 0 0 16px rgba(76,175,80,0.3); }
#generic-toast.toast-warning { border-color: #FF9800; box-shadow: 0 0 16px rgba(255,152,0,0.3); }
#generic-toast.toast-error   { border-color: #F44336; box-shadow: 0 0 16px rgba(244,67,54,0.3); }
#generic-toast.toast-danger  { border-color: #F44336; box-shadow: 0 0 16px rgba(244,67,54,0.3); }
#generic-toast.toast-info    { border-color: #2196F3; box-shadow: 0 0 16px rgba(33,150,243,0.3); }
#generic-toast-text {
    color: var(--text-light);
    font-size: 14px;
    font-weight: bold;
}

#expedition-toast {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 2px solid var(--gold);
    border-radius: 3px;
    padding: 10px 24px;
    z-index: 40;
    animation: notifSlide 0.3s ease-out;
    box-shadow: 0 0 16px var(--gold-a30), 0 4px 16px var(--black-a60);
}

#expedition-toast-text {
    color: var(--text-light);
    font-size: 14px;
    font-weight: bold;
}

#achievement-toast {
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 2px solid var(--gold);
    border-radius: 3px;
    padding: 10px 24px;
    z-index: 40;
    animation: notifSlide 0.3s ease-out;
    box-shadow: 0 0 16px var(--gold-a30), 0 4px 16px var(--black-a60);
}

#achievement-toast-text {
    color: var(--text-light);
    font-size: 14px;
    font-weight: bold;
}

/* === King Attack Toasts === */
#king-attack-toast {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 2px solid var(--gold);
    border-radius: 3px;
    padding: 10px 24px;
    z-index: 45;
    animation: notifSlide 0.3s ease-out;
    box-shadow: 0 0 16px var(--gold-a30), 0 4px 16px var(--black-a60);
    max-width: 400px;
    text-align: center;
    cursor: pointer;
}

#king-attack-toast.victory {
    border-color: var(--color-green);
    box-shadow: 0 0 16px var(--green-a30), 0 4px 16px var(--black-a60);
}

#king-attack-toast.defeat {
    border-color: var(--color-red);
    box-shadow: 0 0 16px rgba(244, 67, 54, 0.3), 0 4px 16px var(--black-a60);
}

#king-attack-toast-text {
    color: var(--text-light);
    font-size: 13px;
    font-weight: bold;
}

#king-attack-warning {
    position: absolute;
    top: 160px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #3a0a0a 0%, #1a0505 100%);
    border: 2px solid #cc3333;
    border-radius: 3px;
    padding: 8px 20px;
    z-index: 44;
    animation: notifSlide 0.3s ease-out;
    box-shadow: 0 0 16px rgba(204, 51, 51, 0.3), 0 4px 16px var(--black-a60);
}

#king-attack-warning-text {
    color: #ff6666;
    font-size: 14px;
    font-weight: bold;
}

/* === Terrain Toast (mobile tap on special terrain) === */
#terrain-toast {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 2px solid var(--gold);
    border-radius: 3px;
    padding: 10px 32px 10px 24px;
    z-index: 40;
    animation: notifSlide 0.3s ease-out;
    box-shadow: 0 0 16px var(--gold-a30), 0 4px 16px var(--black-a60);
    white-space: pre-line;
    text-align: center;
}

#terrain-toast-text {
    color: var(--text-light);
    font-size: 14px;
    font-weight: bold;
}

#terrain-toast-close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: none;
    border: none;
    color: var(--gold);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

/* === Craft Progress Toast === */
#craft-progress-toast {
    position: fixed;
    bottom: 80px;
    right: 86px;
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 10px 14px;
    z-index: 100;
    min-width: 200px;
    box-shadow: 0 0 16px var(--gold-a30), 0 4px 16px var(--black-a60);
    transition: right 0.3s ease, bottom 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Animation d'entrée : une seule fois à l'apparition */
#craft-progress-toast.craft-toast-visible {
    animation: craftToastSlide 0.3s ease-out;
}

#craft-progress-toast.milestones-open {
    right: 374px;
}

.craft-progress-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.craft-progress-name {
    color: var(--text-light);
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
}

.craft-progress-bar-bg {
    flex: 1;
    height: 10px;
    background: #1a1a1a;
    border-radius: 5px;
    border: 1px solid var(--text-dimmest);
    min-width: 80px;
    overflow: hidden;
}

.craft-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-warm));
    border-radius: 4px;
    transition: width 0.15s linear;
}

.craft-progress-pct {
    color: #c0a060;
    font-size: 12px;
    min-width: 32px;
    text-align: right;
}

#craft-toast {
    position: fixed;
    bottom: 120px;
    right: 100px;
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 10px 24px;
    z-index: 101;
    animation: craftToastSlide 0.3s ease-out;
    box-shadow: 0 0 16px var(--gold-a30), 0 4px 16px var(--black-a60);
    transition: right 0.3s ease, bottom 0.2s ease;
}

#craft-toast.milestones-open {
    right: 374px;
}

@keyframes craftToastSlide {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#craft-toast-text {
    color: var(--text-light);
    font-size: 14px;
    font-weight: bold;
}

/* === Tutorial Banner === */
#tutorial-banner {
    position: fixed;
    bottom: 8px;
    left: 8px;
    width: 340px;
    padding: 10px 14px;
    min-height: 250px;
    word-spacing: 2px;
    letter-spacing: 0.3px;
    line-height: 1.5;
    z-index: 20;
    gap: 8px;
    flex-direction: column;
    animation: none;
    transition: opacity 0.3s ease, left 0.2s ease;
}

#tutorial-banner:not(.hidden) {
    display: flex;
}

#tutorial-banner.farewell {
    white-space: normal;
    text-align: center;
    font-style: italic;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
}

#tutorial-close-btn {
    margin-top: 4px;
    padding: 5px 18px;
    font-size: 12px;
}

#tutorial-skip-btn {
    margin-top: 4px;
    padding: 4px 12px;
    font-size: 11px;
    opacity: 0.7;
}

#tutorial-banner.sell-panel-open {
    left: 388px;
}

#tutorial-banner.flash {
    border-color: var(--tutorial-flash);
    box-shadow: 0 0 20px rgba(122, 223, 90, 0.5), 0 4px 16px var(--black-a60);
}

.tutorial-flash {
    animation: tutorialPulse 1s ease-in-out infinite;
}

@keyframes tutorialPulse {

    0%,
    100% {
        box-shadow: 0 0 4px rgba(74, 122, 58, 0.3);
        outline: 1px solid transparent;
    }

    50% {
        box-shadow: 0 0 16px rgba(122, 223, 90, 0.8);
        outline: 2px solid rgba(122, 223, 90, 0.7);
    }
}

.milestone-item.tutorial-flash {
    animation: milestonePulse 1s ease-in-out infinite;
}

@keyframes milestonePulse {

    0%,
    100% {
        border-color: var(--gold-dark);
        background: var(--black-a30);
    }

    50% {
        border-color: var(--tutorial-flash);
        background: rgba(42, 122, 42, 0.3);
    }
}

#tutorial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--gold-a30);
}

/* Bouton fermer tutoriel — visible uniquement en mobile */
.tutorial-dismiss {
    display: none;
    background: none;
    border: none;
    color: var(--gold);
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

/* Bouton flottant pour rouvrir le tutoriel (mobile uniquement) */
#tutorial-reopen-btn {
    display: none;
}

#tutorial-header h3 {
    color: var(--gold-bright);
    font-size: 15px;
    margin: 0;
}

#tutorial-step {
    color: var(--tutorial-step);
    font-size: 13px;
    font-weight: bold;
}

#tutorial-text {
    color: var(--tutorial-text);
    font-size: 15px;
}

#tutorial-text p {
    margin: 0 0 8px 0;
}

#tutorial-text p:last-child {
    margin-bottom: 0;
}

#tutorial-progress {
    color: var(--tutorial-progress);
    font-size: 14px;
    font-weight: bold;
}

/* === Lore Dialog === */
#lore-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    padding: 18px 22px;
    z-index: 22;
    display: none;
    flex-direction: column;
    gap: 10px;
    animation: loreDialogFadeIn 0.4s ease;
    word-spacing: 2px;
    letter-spacing: 0.3px;
    line-height: 1.6;
}

#lore-dialog:not(.hidden) {
    display: flex;
}

@keyframes loreDialogFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

#lore-dialog-header {
    display: flex;
    align-items: center;
    padding-bottom: 6px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--gold-a30);
}

#lore-dialog-header h3 {
    color: var(--gold-bright);
    font-size: 15px;
    margin: 0;
}

#lore-dialog-text {
    color: var(--tutorial-text);
    font-size: 15px;
    font-style: italic;
}

#lore-dialog-btn {
    align-self: flex-end;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
}

/* === Intro Narrative Overlay === */
#intro-narrative {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 1);
    z-index: 400;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 1s ease;
}

#intro-narrative:not(.hidden) {
    display: flex;
}

#intro-narrative.map-glimpse {
    background: var(--black-a30);
}

#intro-narrative-content {
    max-width: 600px;
    padding: 40px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

#intro-narrative-text {
    color: var(--tutorial-text);
    font-size: 17px;
    font-style: italic;
    line-height: 1.8;
    letter-spacing: 0.4px;
    word-spacing: 2px;
    animation: introFadeIn 1.2s ease;
}

#intro-narrative-btn {
    padding: 8px 24px;
    font-size: 14px;
    cursor: pointer;
    animation: introFadeIn 0.8s ease 0.6s both;
}

@keyframes introFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 600px) {
    #intro-narrative-content {
        max-width: calc(100vw - 32px);
        padding: 24px 16px;
    }

    #intro-narrative-text {
        font-size: 15px;
    }
}

/* === Raid Toast === */
#raid-toast {
    position: fixed;
    bottom: 60px;
    right: 100px;
    background: linear-gradient(180deg, #3a1515 0%, #2a0e0e 100%);
    border: 1px solid #e57;
    border-radius: 8px;
    padding: 10px 24px;
    z-index: 40;
    animation: craftToastSlide 0.3s ease-out;
    box-shadow: 0 0 16px rgba(229, 85, 119, 0.3), 0 4px 16px var(--black-a60);
    transition: right 0.3s ease;
}

#raid-toast-text {
    color: #f88;
    font-size: 14px;
    font-weight: bold;
}

/* === Milestone Toast === */
#milestone-toast {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--bg-gradient-dark) 0%, var(--bg-gradient-darker) 100%);
    border: 2px solid var(--gold-warm);
    border-radius: 3px;
    padding: 10px 36px 10px 24px;
    z-index: 45;
    animation: notifSlide 0.3s ease-out;
    box-shadow: 0 0 20px rgba(212, 160, 23, 0.4), 0 4px 16px var(--black-a60);
    display: flex;
    align-items: center;
    gap: 8px;
}

#milestone-toast-text {
    color: var(--gold-bright);
    font-size: 14px;
    font-weight: bold;
}

#milestone-toast-close {
    position: absolute;
    top: 2px;
    right: 6px;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 18px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    padding: 2px 6px;
    line-height: 1;
}

#milestone-toast-close:hover {
    color: var(--gold-bright);
}

/* === Milestones Panel === */
#milestones-panel {
    position: fixed;
    top: 44px;
    right: 86px;
    bottom: 0;
    width: 280px;
    animation: sideSlideInRight 0.35s ease-out;
    overflow-y: hidden;
    z-index: 9;
    transform: none;
    left: auto;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    border-right: none !important;
    border-radius: 4px 0 0 4px;
}

#milestones-panel-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 0;
    border-bottom: 1px solid var(--gold-dark);
}

#milestones-panel-header .milestone-section-title {
    width: 100%;
    position: static;
    margin: 4px 0 0;
    padding: 0 0 6px;
}

#milestones-panel-header h3 {
    color: var(--gold-bright);
    font-size: 16px;
    margin: 0;
}

#milestones-panel-header button {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 20px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    display: none;
}

#milestones-content {
    padding: 8px 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

#milestones-footer {
    padding: 4px 12px 8px;
    border-top: 1px solid var(--gold-dark);
    flex-shrink: 0;
}

#milestones-footer .milestone-section-title {
    position: static;
    margin: 4px 0;
    padding: 0;
}

#milestones-content::-webkit-scrollbar {
    width: 6px;
}

#milestones-content::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

#milestones-content::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 3px;
}

.milestone-section-title {
    color: var(--gold-warm);
    font-size: 13px;
    margin: 8px 0 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, var(--bg-gradient-dark) 0%, var(--bg-gradient-darker) 100%);
    padding: 4px 0;
    z-index: 1;
}

.milestone-item {
    background: var(--black-a30);
    border: 1px solid var(--gold-dark);
    border-radius: 3px;
    padding: 8px 10px;
    margin-bottom: 6px;
}

.milestone-item.completed {
    border-color: #2a7a2a;
    background: rgba(42, 122, 42, 0.15);
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.milestone-item.completed::before {
    content: '✓';
    color: var(--milestone-check);
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    padding-right: 10px;
    flex-shrink: 0;
}

.milestone-completed-content {
    flex: 1;
    min-width: 0;
}

.milestone-header {
    color: var(--text-light);
    font-size: 14px;
    margin-bottom: 2px;
}

.milestone-item.completed .milestone-header {
    color: var(--milestone-check);
}

.milestone-desc {
    color: #b8a582;
    font-size: 12px;
    margin-bottom: 4px;
}

.milestone-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--gold-dark);
    border-radius: 4px;
    overflow: hidden;
    margin: 4px 0;
}

.milestone-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-warm), var(--gold-bright));
    border-radius: 3px;
    transition: width 0.3s;
}

.milestone-progress-wrap {
    display: flex;
    flex-direction: column;
}

.milestone-progress-text {
    color: #b8a582;
    font-size: 11px;
    text-align: right;
    margin-bottom: 1px;
}

.milestone-reward {
    color: var(--text-light);
    font-size: 12px;
    margin-top: 2px;
    text-align: right;
}

/* === Achievements Panel === */
#achievements-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 620px;
    max-height: 80vh;
    padding: 16px;
    z-index: 25;
}

#achievements-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
}

#achievements-panel-header h3 {
    font-size: 16px;
    color: var(--gold-bright) !important;
    text-shadow: 0 1px 3px var(--black-a80);
}

.ach-progress {
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    margin-bottom: 8px;
}

.ach-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.ach-item {
    padding: 8px;
    background: var(--bg-row);
    border: 1px solid var(--bg-row-border);
    border-radius: 4px;
}

.ach-item.completed {
    border-color: var(--color-green);
    background: rgba(0, 100, 0, 0.15);
}

.ach-name {
    color: var(--text-primary);
    font-weight: bold;
    font-size: 13px;
    display: block;
}

.ach-desc {
    color: var(--text-muted);
    font-size: 11px;
    display: block;
}

.ach-reward {
    color: var(--gold-bright);
    font-size: 11px;
    display: block;
    margin-top: 2px;
}

.achievements-icon-btn {
    color: var(--gold-bright);
}

.achievements-icon-btn:hover {
    border-color: var(--gold-bright);
}

/* === Seeds Panel === */
#seeds-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    max-height: 80vh;
    padding: 16px;
    z-index: 25;
}

#seeds-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
}

#seeds-panel-header h3 {
    font-size: 16px;
}

.seed-row {
    display: flex;
    align-items: center;
    padding: 8px;
    margin-bottom: 4px;
    background: var(--bg-row);
    border: 1px solid var(--bg-row-border);
    border-radius: 4px;
    gap: 8px;
}

.seed-row.unlocked {
    border-color: var(--color-green);
    background: rgba(0, 100, 0, 0.15);
}

.seed-emoji {
    font-size: 18px;
    flex-shrink: 0;
}

.seed-name {
    color: var(--text-primary);
    font-weight: bold;
    font-size: 13px;
    flex: 1;
}

.seed-multiplier {
    color: var(--gold-bright);
    font-size: 13px;
    font-weight: bold;
    flex-shrink: 0;
}

.seed-status {
    font-size: 12px;
    flex-shrink: 0;
    min-width: 24px;
    text-align: center;
}

.seed-field-section {
    margin-bottom: 10px;
}

.seed-field-title {
    color: var(--gold-badge);
    font-weight: bold;
    font-size: 12px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-panel);
    margin-bottom: 4px;
}

.seed-apply-all-btn {
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid var(--gold-badge);
    color: var(--gold-badge);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    flex-shrink: 0;
    font-weight: 600;
}

.seed-apply-all-btn:hover {
    background: rgba(255, 215, 0, 0.3);
}

.seed-active-count {
    color: #8f8;
    font-size: 11px;
    flex-shrink: 0;
    min-width: 28px;
    text-align: center;
}

.seeds-icon-btn {
    color: var(--color-green);
}

.seeds-icon-btn:hover {
    border-color: var(--color-green);
}

#seeds-panel::-webkit-scrollbar {
    width: 6px;
}

#seeds-panel::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

#seeds-panel::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 3px;
}

/* === Market Panel === */
#market-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 580px;
    max-height: 80vh;
    padding: 16px;
    z-index: 25;
}

#caravan-panel {
    position: fixed;
    top: 44px;
    right: 94px;
    bottom: 0;
    width: 420px;
    animation: sideSlideInRight 0.35s ease-out;
    overflow-y: hidden;
    z-index: 9;
    transform: none;
    left: auto;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
}

#caravan-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 0;
    border-bottom: 1px solid var(--gold-dark);
}

#caravan-panel-header h3 {
    color: var(--gold-bright);
    font-size: 16px;
    margin: 0;
}

#caravan-panel-header button {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 20px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    display: none;
}

#caravan-content {
    padding: 8px 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* --- Tableau des flux de caravane --- */
.caravan-flows-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.caravan-flows-table thead th {
    color: #d4bf9a;
    font-size: 11px;
    font-weight: 600;
    text-align: right;
    padding: 4px 6px;
    border-bottom: 1px solid var(--gold-a25);
    white-space: nowrap;
}

.caravan-flows-table thead th:first-child {
    text-align: left;
}

.caravan-flows-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.caravan-flows-table tbody tr:hover {
    background: rgba(139, 105, 20, 0.12);
}

.caravan-flows-table td {
    padding: 5px 6px;
    text-align: right;
    white-space: nowrap;
}

.caravan-res-name {
    text-align: left !important;
    color: var(--text-light);
    font-weight: 500;
}

/* Capacité max affichée quand caravane bridée */
.caravan-cap {
    color: var(--text-dim);
    font-size: 10px;
}

/* --- Grille stockage import (3-4 par ligne) --- */
.caravan-import-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 4px;
}

/* --- Titres de section Export / Import --- */
.caravan-section-title {
    color: #d4bf9a;
    margin: 12px 0 4px;
    font-size: 14px;
}

/* --- Sections détails par map destination --- */
.caravan-dest-section {
    margin-bottom: 8px;
}

.caravan-dest-header {
    color: var(--text-light);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 0;
}

.caravan-dest-table {
    margin-bottom: 4px;
}

.caravan-import-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    border: 1px solid var(--gold-a15);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    font-size: 11px;
    color: #cba;
}

.caravan-import-cell.negative {
    border-color: var(--red-a40);
}

.caravan-import-cell.warning {
    border-color: rgba(230, 126, 34, 0.4);
}

.caravan-import-name {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.caravan-import-qty {
    font-weight: 600;
    color: var(--text-light);
    font-size: 11px;
}

.caravan-import-cell.negative .caravan-import-qty {
    color: var(--color-red);
}

.caravan-import-cell.warning .caravan-import-qty {
    color: var(--color-warning);
}

.overview-res-col.warning {
    color: var(--color-warning);
}

#market-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
}

#market-panel-header h3 {
    font-size: 16px;
}

.market-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.market-table th {
    color: var(--text-light);
    text-align: left;
    padding: 4px 8px;
    border-bottom: 1px solid var(--gold-a40);
}

.market-table td {
    color: var(--text-primary);
    padding: 4px 8px;
    border-bottom: 1px solid var(--gold-a15);
}

.market-table tr.price-high td {
    color: var(--color-green);
}

.market-table tr.price-low td {
    color: var(--color-red);
}

.market-icon-btn {
    color: var(--color-blue-light);
}

.market-icon-btn:hover {
    border-color: var(--color-blue-light);
}

/* === Prestige Panel === */
#prestige-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 650px;
    height: 80vh;
    padding: 16px;
    z-index: 25;
    display: flex;
    flex-direction: column;
}

#prestige-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

#prestige-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
}

#prestige-panel-header h3 {
    font-size: 16px;
}

/* --- Accordéons maps --- */
.prestige-accordions {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.prestige-map-accordion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--text-dimmest);
    border-radius: 5px;
    color: #999;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 13px;
    font-weight: 700;
    user-select: none;
    transition: border-color 0.2s, background 0.2s;
}

.prestige-map-accordion:hover {
    background: rgba(255, 215, 0, 0.1);
    color: var(--text-info);
}

.prestige-map-accordion.open {
    background: rgba(255, 215, 0, 0.15);
    border-color: var(--gold-bright);
    color: var(--gold-bright);
}

.prestige-map-accordion .accordion-arrow {
    font-size: 10px;
    width: 14px;
    text-align: center;
}

.prestige-map-accordion .accordion-label {
    flex: 1;
}

.prestige-badge {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

.prestige-map-accordion.open .prestige-badge {
    color: var(--gold-bright);
}

.prestige-map-body {
    display: none;
    padding: 4px 0 4px 12px;
}

.prestige-map-body.open {
    display: block;
}

/* --- Accordéons catégories --- */
.prestige-cat-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-panel);
    border-radius: 4px;
    color: var(--text-dim);
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 2px;
    user-select: none;
    transition: border-color 0.2s, background 0.2s;
}

.prestige-cat-header:hover {
    background: rgba(255, 215, 0, 0.08);
    color: var(--text-info);
}

.prestige-cat-header.open {
    background: var(--gold-a10);
    border-color: var(--gold);
    color: var(--text-light);
}

.prestige-cat-header .accordion-arrow {
    font-size: 9px;
    width: 12px;
    text-align: center;
}

.prestige-cat-body {
    display: none;
    padding: 4px 0 6px 8px;
}

.prestige-cat-body.open {
    display: block;
}

.prestige-info {
    margin-bottom: 12px;
}

.prestige-info p {
    color: var(--text-primary);
    font-size: 13px;
    margin-bottom: 4px;
}

.prestige-preview {
    color: var(--gold-bright) !important;
    font-weight: bold;
}

.prestige-no-new {
    color: var(--text-secondary) !important;
    font-style: italic;
}

.prestige-banked-info {
    color: #80cbc4 !important;
    font-weight: bold;
}

/* --- Prochains seuils de prestige --- */
.prestige-next-thresholds {
    margin-bottom: 12px;
    padding: 8px;
    background: var(--bg-row);
    border: 1px solid var(--bg-row-border);
    border-radius: 4px;
}

.prestige-section-title {
    color: var(--gold-bright);
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 6px;
}

.prestige-threshold-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 12px;
    color: var(--text-primary);
}

.prestige-threshold-icon {
    width: 20px;
    text-align: center;
}

.prestige-threshold-map {
    flex: 1;
    color: var(--text-secondary);
}

.prestige-threshold-progress {
    flex: 2;
    text-align: right;
}

.prestige-threshold-reward {
    color: var(--gold-bright);
    font-weight: bold;
    min-width: 60px;
    text-align: right;
}

.prestige-bonuses h4 {
    color: var(--gold-bright);
    font-size: 14px;
    margin-bottom: 8px;
}

.prestige-bonus-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    margin-bottom: 4px;
    background: var(--bg-row);
    border: 1px solid var(--bg-row-border);
    border-radius: 4px;
}

.prestige-bonus-name {
    color: var(--text-primary);
    font-size: 12px;
    flex: 1;
}

.prestige-bonus-level {
    color: var(--text-muted);
    font-size: 11px;
    min-width: 60px;
    text-align: right;
    margin-right: 8px;
}

.prestige-maxed {
    color: var(--gold-bright);
    font-size: 11px;
    font-weight: bold;
}

.prestige-locked {
    color: var(--text-dim);
    font-size: 14px;
}

.prestige-buy-btn {
    padding: 4px 10px;
    background: var(--gold-a15);
    color: var(--text-light);
    border: 1px solid var(--gold);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 11px;
}

.prestige-buy-btn .gi,
.prestige-buy-btn .gi svg {
    width: 24px;
    height: 24px;
}

.prestige-buy-btn:hover {
    background: var(--gold-a30);
}

.prestige-buy-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.prestige-reset-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-panel);
}

.prestige-reset-btn {
    width: 100%;
    padding: 10px;
    background: linear-gradient(180deg, #3a2a1a 0%, var(--bg-medium) 100%);
    color: var(--text-light);
    border: 2px solid var(--gold);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.prestige-reset-btn:hover {
    background: linear-gradient(180deg, #5a4a2a 0%, #3a2a1a 100%);
    box-shadow: 0 0 12px var(--gold-a30);
}

.prestige-reset-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.prestige-warning {
    color: #ff9b6b;
    font-size: 11px;
    line-height: 1.4;
}

.prestige-icon-btn {
    color: var(--gold-bright);
}

.prestige-icon-btn:hover {
    border-color: var(--gold-bright);
}

/* === Hybridization Tree Panel === */
#hybridization-panel,
#root-network-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    max-height: 85vh;
    padding: 16px;
    z-index: 25;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#root-network-panel { width: 500px; }

#hybridization-panel-header,
#root-network-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gold-a40);
}

#hybridization-panel-header h3,
#root-network-panel-header h3 {
    font-size: 16px;
    color: var(--gold-bright);
}

#hybridization-content,
#root-network-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Barre d'info pollen + progression */
.hybrid-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    margin-bottom: 8px;
    background: var(--black-a30);
    border: 1px solid var(--border-panel);
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-light);
}

.hybrid-pollen b {
    color: #e6c619;
}

.hybrid-progress b {
    color: var(--gold-bright);
}

/* Légende des branches */
.hybrid-legend {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    justify-content: center;
}

.hybrid-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-dim);
    border-left: 3px solid;
    padding-left: 5px;
}

.hybrid-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Wrapper arbre (position relative pour le SVG) */
.hybrid-tree-wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    padding: 6px;
}

.hybrid-tree-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Grille CSS de l'arbre : 5 colonnes × 6 rangées */
.hybrid-tree-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, auto);
    gap: 10px 8px;
    position: relative;
    z-index: 1;
    padding: 8px 0;
}

/* Cellule vide */
.hybrid-cell-empty {
    min-height: 20px;
}

/* Nœud de l'arbre */
.hybrid-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    border: 2px solid;
    border-radius: 6px;
    background: var(--bg-medium);
    text-align: center;
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.3s;
    min-height: 70px;
    justify-content: center;
}

/* État verrouillé */
.hybrid-node.locked {
    opacity: 0.40;
    filter: grayscale(0.8);
    cursor: not-allowed;
}

/* État disponible — bordure pulsante */
.hybrid-node.available {
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    box-shadow: 0 0 8px var(--gold-a30);
    animation: hybridPulse 2s ease-in-out infinite;
}

.hybrid-node.available:hover {
    transform: scale(1.08);
    box-shadow: 0 0 16px var(--gold-a50);
}

/* État complété — bordure verte, check */
.hybrid-node.completed {
    border-color: #4CAF50 !important;
    background: rgba(76, 175, 80, 0.10);
    box-shadow: inset 0 0 10px rgba(76, 175, 80, 0.15);
}

/* Animation pulse pour nœuds disponibles */
@keyframes hybridPulse {
    0%, 100% { box-shadow: 0 0 6px var(--gold-a20); }
    50% { box-shadow: 0 0 14px var(--gold-a50); }
}

/* Icône nœud */
.hybrid-node-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
}

.hybrid-check {
    color: #4CAF50;
    font-size: 18px;
    font-weight: bold;
}

.hybrid-node-letter {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
}

.hybrid-node.available .hybrid-node-letter {
    color: var(--gold-bright);
}

/* Nom du nœud */
.hybrid-node-name {
    font-size: 10px;
    color: var(--text-light);
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hybrid-node.locked .hybrid-node-name {
    color: var(--text-muted);
}

/* Coûts du nœud */
.hybrid-node-costs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-top: 2px;
}

.hybrid-node-cost {
    font-size: 9px;
    font-weight: 600;
    line-height: 1.1;
}

/* === Irrigation View HUD (above build panel) === */
#farm-tools-hud {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 21;
    transition: bottom 0.15s;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    border: 2px solid var(--gold-a30);
    border-bottom: none;
    background: rgba(26,15,8,0.5);
    box-shadow: 0 4px 12px var(--black-a50);
    display: flex;
    flex-direction: row;
}
#farm-tools-hud button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--text-muted);
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    transition: background 0.2s, color 0.2s;
}
#farm-tools-hud button + button:not(.hidden) {
    border-left: 1px solid var(--gold-a30);
}
#farm-tools-hud button:hover {
    background: var(--gold-a15);
    color: var(--text-primary);
}
#farm-tools-hud button.active {
    background: linear-gradient(180deg, var(--bg-gradient-dark) 0%, var(--bg-gradient-darker) 100%);
    color: var(--text-light);
    font-weight: bold;
}
.gi.farm-tools-hud-icon,
.gi.farm-tools-hud-icon svg {
    width: 32px;
    height: 32px;
}

/* === Ley Lines View HUD (above build panel, arcane_city) === */
#leylines-hud {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 21;
    transition: bottom 0.15s;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    border: 2px solid rgba(138, 43, 226, 0.4);
    border-bottom: none;
    background: rgba(26,15,8,0.5);
    box-shadow: 0 4px 12px var(--black-a50);
}
#leylines-hud button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--text-muted);
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    transition: background 0.2s, color 0.2s;
}
#leylines-hud button:hover {
    background: rgba(138, 43, 226, 0.15);
    color: var(--text-primary);
}
#leylines-hud button.active {
    background: linear-gradient(180deg, rgba(80, 20, 120, 0.6) 0%, rgba(50, 10, 80, 0.8) 100%);
    color: #bb8fce;
    font-weight: bold;
}

/* === Mine Gas HUD (above build panel, mine only) === */
#mine-gas-hud {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 21;
    transition: bottom 0.15s;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    border: 2px solid var(--gold-a30);
    border-bottom: none;
    background: rgba(26,15,8,0.7);
    box-shadow: 0 4px 12px var(--black-a50);
    min-width: 220px;
}
#mine-gas-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
#mine-gas-left {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#mine-gas-bar-container,
#mine-talent-bar-container {
    width: 100%;
    height: 6px;
    background: rgba(0,0,0,0.5);
}
#mine-gas-bar-fill,
#mine-talent-bar-fill {
    height: 100%;
    min-width: 2px;
    width: 0%;
    transition: width 0.3s, background 0.3s;
}
#mine-gas-bar-fill {
    background: #4caf50;
}
#mine-talent-bar-fill {
    background: #b8860b;
}
#mine-gas-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    flex: 1;
}
#mine-gas-icon {
    font-size: 16px;
}
#mine-gas-zone {
    font-weight: 600;
}
.mine-gas-rate {
    font-size: 11px;
    opacity: 0.7;
}
.gi.mine-gas-hud-icon,
.gi.mine-gas-hud-icon svg {
    width: 32px;
    height: 32px;
}
#mine-gas-actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-left: 1px solid var(--gold-a30);
}
.mine-gas-action-purif {
    display: flex;
    flex-direction: column;
}
.mine-gas-action-purif button {
    flex: 1;
}
#mine-gas-actions button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--text-muted);
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    transition: background 0.2s, color 0.2s;
}
#mine-gas-actions button:hover {
    background: var(--gold-a15);
    color: var(--text-primary);
}
#mine-gas-actions button.active {
    background: var(--gold-a15);
    color: var(--text-primary);
    border-bottom: 2px solid var(--gold);
}

/* === Mine Talent Panel (Purification Milestones) === */
#mine-talent-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 60;
    width: 560px;
    max-width: 95vw;
    max-height: 80vh;
    overflow-y: auto;
    padding: 16px;
}
#mine-talent-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
#mine-talent-panel-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--text-main);
}
#mine-talent-panel-header button {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    padding: 0 4px;
}
.mine-talent-score-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 14px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
}
.mine-talent-score-bar b {
    color: #4caf50;
}
.mine-talent-branch {
    margin-bottom: 14px;
}
.mine-talent-branch-header {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mine-talent-branch-nodes {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mine-talent-node {
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    transition: background 0.2s;
}
.mine-talent-node.unlocked {
    border-color: rgba(76,175,80,0.3);
    background: rgba(76,175,80,0.08);
}
.mine-talent-node.next {
    border-color: rgba(255,193,7,0.4);
    background: rgba(255,193,7,0.06);
}
.mine-talent-node-bar {
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    margin-bottom: 4px;
}
.mine-talent-node-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: #4caf50;
    transition: width 0.3s;
}
.mine-talent-node.locked .mine-talent-node-bar-fill {
    background: rgba(255,255,255,0.15);
}
.mine-talent-node.next .mine-talent-node-bar-fill {
    background: #ffc107;
}
.mine-talent-node-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.mine-talent-node-threshold {
    font-weight: 600;
    min-width: 40px;
    color: var(--text-main);
    opacity: 0.7;
}
.mine-talent-node.unlocked .mine-talent-node-threshold {
    color: #4caf50;
    opacity: 1;
}
.mine-talent-node-desc {
    flex: 1;
}
.mine-talent-node-check {
    color: #4caf50;
    font-weight: bold;
}

/* === Forest Talent HUD (above build panel, forest only) === */
#forest-talent-hud {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 21;
    transition: bottom 0.15s;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    border: 2px solid rgba(139, 90, 43, 0.5);
    border-bottom: none;
    background: rgba(26,15,8,0.5);
    box-shadow: 0 4px 12px var(--black-a50);
}
#forest-talent-hud button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--text-muted);
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    transition: background 0.2s, color 0.2s;
}
#forest-talent-hud button:hover {
    background: rgba(139, 90, 43, 0.2);
    color: var(--text-primary);
}
.gi.forest-talent-hud-icon,
.gi.forest-talent-hud-icon svg {
    width: 32px;
    height: 32px;
}

/* === Forest Talent Panel (modal) === */
#forest-talent-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    width: 560px;
    max-width: 95vw;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--bg-panel);
    border: 2px solid var(--gold-a30);
    border-radius: 8px;
    box-shadow: 0 8px 32px var(--black-a50);
    padding: 0;
}
#forest-talent-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gold-a15);
    background: linear-gradient(180deg, rgba(60,40,20,0.6) 0%, rgba(40,25,10,0.8) 100%);
}
#forest-talent-panel-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--text-light);
}
#forest-talent-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    padding: 0 4px;
}
#forest-talent-close:hover { color: var(--text-light); }
#forest-talent-tree {
    padding: 12px 16px 16px;
}

/* --- Info bar (acorn stock + progress) --- */
.talent-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    margin-bottom: 8px;
    background: var(--black-a30);
    border: 1px solid var(--border-panel);
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-light);
}
.talent-acorns b { color: #c9a036; }
.talent-progress b { color: var(--gold-bright); }

/* --- Wrapper arbre (position relative pour le SVG) --- */
.talent-tree-wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    padding: 6px;
}
.talent-tree-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* --- Grille CSS de l'arbre : 5 colonnes × 6 rangées --- */
.talent-tree-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, auto);
    gap: 10px 8px;
    position: relative;
    z-index: 1;
    padding: 8px 0;
}

/* Cellule vide */
.talent-cell-empty { min-height: 20px; }

/* --- Talent nodes (même pattern que .hybrid-node) --- */
.talent-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    border: 2px solid #5a4020;
    border-radius: 6px;
    background: var(--bg-medium);
    text-align: center;
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.3s;
    min-height: 70px;
    justify-content: center;
}
.talent-node.locked {
    opacity: 0.40;
    filter: grayscale(0.8);
    cursor: not-allowed;
}
.talent-node.available {
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    box-shadow: 0 0 8px rgba(139,100,20,0.3);
    animation: talentPulse 2s ease-in-out infinite;
}
.talent-node.available:hover {
    transform: scale(1.08);
    box-shadow: 0 0 16px rgba(139,100,20,0.5);
}
.talent-node.completed {
    border-color: #4CAF50 !important;
    background: rgba(76, 175, 80, 0.10);
    box-shadow: inset 0 0 10px rgba(76, 175, 80, 0.15);
}

@keyframes talentPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(139,100,20,0.2); }
    50% { box-shadow: 0 0 14px rgba(139,100,20,0.5); }
}

/* Icône nœud */
.talent-node-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
}
.talent-check {
    color: #4CAF50;
    font-size: 18px;
    font-weight: bold;
}
.talent-node-emoji {
    font-size: 18px;
}
.talent-node.locked .talent-node-emoji {
    filter: grayscale(1);
}

/* Nom du nœud */
.talent-node-name {
    font-size: 10px;
    color: var(--text-light);
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.talent-node.locked .talent-node-name {
    color: var(--text-muted);
}

/* Coûts du nœud */
.talent-node-costs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-top: 2px;
}
.talent-node-cost {
    font-size: 9px;
    font-weight: 600;
    line-height: 1.1;
}

@media (max-width: 768px) {
    #forest-talent-panel { width: 95vw; padding: 0; }
    .talent-tree-grid { gap: 6px 4px; }
    .talent-node { padding: 5px 3px; min-height: 55px; }
    .talent-node-name { font-size: 9px; }
}

.hybridization-icon-btn {
    color: #e6c619;
}

.hybridization-icon-btn:hover {
    border-color: #e6c619;
}

/* Responsive : plus petit sur mobile */
@media (max-width: 768px) {
    #hybridization-panel {
        width: 95vw;
        max-height: 90vh;
        padding: 10px;
    }

    .hybrid-tree-grid {
        gap: 6px 4px;
    }

    .hybrid-node {
        padding: 5px 2px;
        min-height: 55px;
    }

    .hybrid-node-name {
        font-size: 9px;
    }

    .hybrid-node-cost {
        font-size: 9px;
    }
}

/* === Enchantment UI === */
.info-enchant-section {
    margin-top: 8px;
    padding: 6px 8px;
    background: rgba(123, 104, 238, 0.1);
    border: 1px solid rgba(123, 104, 238, 0.3);
    border-radius: 4px;
}

.info-enchant-header {
    color: var(--color-purple);
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 4px;
}

.enchant-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 12px;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 4px;
}

.enchant-row.enchant-active {
    color: var(--color-purple);
}

.enchant-desc {
    color: var(--text-dim);
    font-size: 10px;
}

.enchant-btn {
    padding: 3px 8px;
    background: #1a1a3e;
    color: var(--color-purple);
    border: 1px solid var(--color-purple);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 10px;
}

.enchant-btn:hover {
    background: #2a2a5e;
}

.enchant-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.enchant-max {
    color: var(--color-purple);
    font-size: 10px;
    font-weight: bold;
}

/* === Specialization UI === */
.info-spec-section {
    margin-top: 8px;
    padding: 6px 8px;
    background: var(--green-a10);
    border: 1px solid var(--green-a30);
    border-radius: 4px;
}

.info-spec-header {
    color: var(--color-green);
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 4px;
}

.spec-bar {
    width: 100%;
    height: 4px;
    background: var(--bg-bar);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.spec-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-green), var(--color-green-light));
    border-radius: 2px;
    transition: width 0.5s;
}

.spec-bonus {
    color: var(--text-muted);
    font-size: 11px;
}

#achievements-panel::-webkit-scrollbar,
#market-panel::-webkit-scrollbar,
#prestige-content::-webkit-scrollbar {
    width: 6px;
}

#achievements-panel::-webkit-scrollbar-track,
#market-panel::-webkit-scrollbar-track,
#prestige-content::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

#achievements-panel::-webkit-scrollbar-thumb,
#market-panel::-webkit-scrollbar-thumb,
#prestige-content::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 3px;
}

/* (Mobile prestige styles now in main @media block at bottom) */

/* === Stats Panel === */
#stats-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    max-height: 80vh;
    padding: 16px;
    z-index: 25;
}

#stats-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gold-a40);
    margin-bottom: 12px;
}

#stats-panel-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--gold-bright);
    text-shadow: 0 1px 3px var(--black-a80);
}

.stats-section-title {
    color: var(--gold-bright);
    font-size: 13px;
    font-weight: bold;
    margin: 14px 0 6px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--gold-a30);
    text-shadow: 0 1px 2px var(--black-a60);
}

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

.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 8px;
    margin-bottom: 3px;
    background: var(--bg-row);
    border: 1px solid var(--bg-row-border);
    border-radius: 4px;
    font-size: 12px;
}

.stats-row:hover {
    border-color: var(--overview-accent);
    background: #22223a;
}

.stats-label {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.stats-value {
    color: var(--text-light);
    font-weight: bold;
    text-align: right;
}

.stats-value.gold {
    color: var(--gold-bright);
}

.stats-value.green {
    color: var(--color-green);
}

.stats-production-detail {
    margin-left: 8px;
}

#stats-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.stats-tab {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid var(--bg-tab-border);
    background: var(--black-a30);
    color: var(--text-muted);
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    border-radius: 4px;
}

.stats-tab:hover {
    background: rgba(255, 215, 0, 0.1);
    color: var(--text-warm);
}

.stats-tab.active {
    background: rgba(255, 215, 0, 0.15);
    border-color: var(--gold-bright);
    color: var(--gold-bright);
}

/* ===== Map Switcher ===== */
#map-switcher {
    position: absolute;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    z-index: 15;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    border: 2px solid var(--gold-a30);
    border-top: none;
    background: rgba(26,15,8,0.5);
    box-shadow: 0 4px 12px var(--black-a50);
}

/* === Strata Switcher (Mountain geological layers) === */
#strata-switcher {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    z-index: 14;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    border: 2px solid var(--gold-a30);
    border-top: none;
    background: rgba(26,15,8,0.6);
    box-shadow: 0 4px 12px var(--black-a50);
}
#strata-switcher .strata-tab {
    padding: 4px 12px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    border-right: 1px solid var(--gold-a20);
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    user-select: none;
}
#strata-switcher .strata-tab:last-child { border-right: none; }
#strata-switcher .strata-tab:hover { background: rgba(212,191,154,0.15); }
#strata-switcher .strata-tab.active {
    background: rgba(212,191,154,0.25);
    color: var(--gold);
    font-weight: 600;
}
#strata-switcher .strata-tab.locked {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
#strata-switcher .strata-tab .collapse-badge {
    color: #e74c3c;
    margin-left: 4px;
    font-size: 10px;
}

#king-attack-hud {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    padding: 8px 22px;
    background: rgba(20, 15, 10, 0.9);
    border: 1px solid var(--gold-a40);
    border-radius: 6px;
    font-size: 16px;
    color: #d4a03a;
    pointer-events: auto;
    white-space: nowrap;
}

/* === HUD Pool de poissons (Phare, map Haute Mer) === */
#sea-fish-hud {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    padding: 8px 22px;
    background: rgba(20, 15, 10, 0.9);
    border: 1px solid rgba(79, 195, 247, 0.4);
    border-radius: 6px;
    font-size: 16px;
    color: #4fc3f7;
    pointer-events: auto;
    white-space: nowrap;
}

/* === HUD Phase du Rituel (map Rituel) === */
#ritual-phase-hud {
    position: absolute;
    bottom: 160px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    padding: 10px 28px;
    background: rgba(20, 15, 10, 0.92);
    border: 1px solid rgba(180, 120, 255, 0.4);
    border-radius: 8px;
    font-size: 16px;
    color: #c8a0ff;
    pointer-events: auto;
    white-space: nowrap;
    min-width: 280px;
    text-align: center;
}
#ritual-phase-hud .phase-hud-bar {
    height: 6px;
    background: rgba(180, 120, 255, 0.2);
    border-radius: 3px;
    margin-top: 6px;
    overflow: hidden;
}
#ritual-phase-hud .phase-hud-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* === HUD Vent du Grand Nord === */
#nord-wind-hud {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    padding: 8px 22px;
    background: rgba(20, 15, 10, 0.9);
    border: 1px solid rgba(130, 180, 220, 0.4);
    border-radius: 6px;
    font-size: 16px;
    color: #82b4dc;
    pointer-events: auto;
    white-space: nowrap;
}

/* === Panneau historique des attaques du Roi === */
#king-attack-history {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    width: 380px;
    max-height: 450px;
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 2px solid var(--gold);
    border-radius: 6px;
    box-shadow: 0 0 24px var(--gold-a30), 0 8px 32px var(--black-a60);
    display: flex;
    flex-direction: column;
}

#king-attack-history .history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gold-a30);
    font-size: 14px;
    font-weight: bold;
    color: var(--gold-bright);
}

#king-attack-history .history-close {
    cursor: pointer;
    font-size: 18px;
    color: var(--text-muted);
    background: none;
    border: none;
    padding: 0 4px;
}

#king-attack-history .history-close:hover {
    color: var(--text-light);
}

#king-attack-history .history-content {
    overflow-y: auto;
    max-height: 380px;
    padding: 8px;
}

#king-attack-history .history-entry {
    font-size: 11px;
    color: var(--text-muted);
    padding: 6px 8px;
    border-bottom: 1px solid var(--bg-toggle);
    line-height: 1.4;
}

#king-attack-history .history-entry:last-child {
    border-bottom: none;
}

#king-attack-history .history-entry.victory {
    border-left: 3px solid var(--color-green);
}

#king-attack-history .history-entry.defeat {
    border-left: 3px solid var(--color-red);
}

#king-attack-history .history-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-dim);
    font-size: 12px;
    font-style: italic;
}

.map-tab {
    padding: 8px 14px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--text-muted);
    font-size: 13px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    transition: background 0.2s, color 0.2s;
}

.map-tab + .map-tab {
    border-left: 1px solid var(--gold-a30);
}

.map-tab:hover {
    background: var(--gold-a15);
    color: var(--text-primary);
}

.map-tab.active {
    background: linear-gradient(180deg, var(--bg-gradient-dark) 0%, var(--bg-gradient-darker) 100%);
    color: var(--text-light);
    font-weight: bold;
}

/* Icônes SVG dans les onglets de map — taille fixe 32x32 */
.map-tab .gi.map-tab-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    vertical-align: middle;
}

.map-tab .gi.map-tab-icon svg {
    width: 32px;
    height: 32px;
}

/* Workshop map indicator */
.map-tab[data-map="workshop"].active {
    background: var(--gold-a20);
    color: #c8b0ff;
}

/* ===== Craft Panel ===== */
#craft-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    max-height: 80vh;
    z-index: 200;
}

#craft-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    color: var(--text-light);
}

#craft-panel-header h3 {
    font-size: 16px;
    margin: 0;
}

#craft-panel-header button {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 20px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
}

#craft-content {
    padding: 12px 16px;
}

.craft-item {
    background: var(--bg-a60);
    border: 1px solid var(--gold-a20);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 10px;
}

.craft-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.craft-item-name {
    color: var(--text-light);
    font-weight: bold;
    font-size: 14px;
}

.craft-item-owned {
    color: var(--text-dim);
    font-size: 12px;
}

.craft-item-cost {
    color: #a09080;
    font-size: 12px;
    margin-bottom: 8px;
}

.craft-item-cost span.affordable {
    color: var(--color-green);
}

.craft-item-cost span.expensive {
    color: var(--color-red);
}

.craft-btn {
    padding: 6px 16px;
    background: linear-gradient(180deg, #3a2a1a 0%, var(--bg-medium) 100%);
    border: 1px solid var(--gold);
    border-radius: 3px;
    color: var(--text-light);
    font-size: 12px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    transition: all 0.2s;
}

.craft-btn:hover {
    background: linear-gradient(180deg, #5a4a2a 0%, #3a2a1a 100%);
    box-shadow: 0 0 8px var(--gold-a30);
}

.craft-btn.disabled {
    opacity: 0.4;
    cursor: url('/img/cursor_32.png') 4 0, not-allowed;
}

/* Workshop HUD items styling */
.hud-item.ws-resource {}

/* Expedition HUD */
#expedition-hud {
    position: absolute;
    top: 54px;
    right: 90px;
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border: 2px solid var(--gold);
    border-radius: 3px;
    padding: 4px 12px;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-orange-light);
    cursor: url('/img/cursor_32.png') 4 0, default;
    box-shadow: 0 0 8px var(--gold-a20);
}

/* Caserne Panel */
.caserne-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.caserne-tab {
    flex: 1;
    padding: 6px 8px;
    background: var(--bg-row-border);
    border: 1px solid var(--border-panel);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 11px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
}

.caserne-tab.active {
    background: #3a3a5e;
    color: var(--text-primary);
    border-color: var(--gold-bright);
}

.caserne-content {
    max-height: 350px;
    overflow-y: auto;
}

.caserne-recruit {
    margin-bottom: 8px;
    padding: 6px;
    background: var(--bg-row-border);
    border-radius: 4px;
    color: var(--text-white);
}

.caserne-recruit-btns {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.caserne-recruit-btn {
    font-size: 10px !important;
    padding: 3px 6px !important;
}

.caserne-warrior-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.caserne-warrior-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    background: var(--bg-row-border);
    border-radius: 3px;
    font-size: 11px;
    color: var(--text-primary);
}

.caserne-dismiss-btn {
    font-size: 10px !important;
    padding: 2px 5px !important;
    color: #ff5555 !important;
    border-color: #ff5555 !important;
}

.caserne-warrior-select {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.caserne-w-sel {
    font-size: 10px !important;
    padding: 3px 6px !important;
}

.caserne-w-sel.active {
    border-color: var(--gold-bright) !important;
    color: var(--gold-bright) !important;
}

.caserne-gear-slots {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
}

.caserne-gear-slot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 11px;
}

.caserne-gear-slot.filled {
    background: #2a3a2e;
    border: 1px solid var(--color-green);
    color: var(--text-primary);
}

.caserne-gear-slot.empty {
    background: var(--bg-row-border);
    border: 1px dashed var(--text-dimmest);
    color: var(--text-dim);
}

.slot-label {
    color: var(--text-muted);
    min-width: 60px;
}

.caserne-unequip-btn {
    font-size: 10px !important;
    padding: 1px 4px !important;
    color: #ff5555 !important;
}

.caserne-available-gear h4 {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.caserne-gear-avail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 6px;
    background: var(--bg-row-border);
    border-radius: 3px;
    font-size: 11px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.caserne-equip-btn {
    font-size: 10px !important;
    padding: 2px 5px !important;
}

/* Expedition tab */
.caserne-expedition-active {
    text-align: center;
    padding: 10px;
    background: var(--bg-row-border);
    border-radius: 4px;
    margin-bottom: 8px;
}

.expedition-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-toggle);
    border-radius: 4px;
    margin: 6px 0;
    overflow: hidden;
}

.expedition-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-orange-light), var(--gold-bright));
    border-radius: 4px;
    transition: width 0.5s;
}

.caserne-zones h4,
.caserne-party-select h4,
.caserne-log h4 {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.caserne-zone-btn {
    width: 100%;
    text-align: left;
    margin-bottom: 3px;
    font-size: 11px !important;
}

.caserne-zone-btn.selected {
    border-color: var(--color-orange) !important;
    background: rgba(255, 140, 0, 0.15) !important;
    box-shadow: 0 0 8px rgba(255, 140, 0, 0.35), inset 0 0 6px rgba(255, 140, 0, 0.1);
    color: #fff !important;
    position: relative;
    padding-right: 24px;
}

.caserne-zone-btn.selected::before {
    content: '▶';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--color-orange);
}

.caserne-selected-zone-banner {
    background: rgba(255, 140, 0, 0.12);
    border: 1px solid var(--color-orange);
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--color-orange);
    text-align: center;
    display: none;
}

.caserne-selected-zone-banner.visible {
    display: block;
}

.zone-info {
    display: block;
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
}

.caserne-party-select {
    margin-top: 8px;
}

.caserne-party-warrior {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-primary);
    margin-bottom: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
}

.caserne-party-power {
    font-size: 12px;
    color: var(--gold-bright);
    margin: 6px 0;
}

.caserne-send-btn {
    width: 100%;
    background: var(--color-orange-light) !important;
    color: var(--text-white) !important;
}

.caserne-log {
    margin-top: 8px;
    max-height: 150px;
    overflow-y: auto;
}

.caserne-log-entry {
    font-size: 10px;
    color: var(--text-muted);
    padding: 2px 4px;
    border-bottom: 1px solid var(--bg-toggle);
}

/* Craft tab header */
.craft-tab-header {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.craft-tab-btn {
    flex: 1;
    padding: 6px 8px;
    background: var(--bg-row-border);
    border: 1px solid var(--border-panel);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 11px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
}

.craft-tab-btn.active {
    background: #3a3a5e;
    color: var(--text-primary);
    border-color: var(--gold-bright);
}

.craft-item-desc {
    font-size: 10px;
    color: var(--text-dim);
    margin: 2px 0;
}

/* ── Feedback Button & Panel ─────────────────────────── */
.sidebar-btn.feedback-icon-btn {
    color: var(--color-blue-info);
}

#feedback-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    width: 380px;
    max-width: 90vw;
    max-height: 80vh;
    background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-body) 100%);
    border: 3px solid var(--gold);
    border-radius: 8px;
    box-shadow: 0 0 30px var(--black-a80), inset 0 1px 0 rgba(232, 213, 163, 0.1);
    padding: 0;
}

#feedback-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 2px solid var(--gold);
    background: linear-gradient(180deg, #2a2015 0%, var(--bg-panel) 100%);
    cursor: url('/img/cursor_32.png') 4 0, move;
}

#feedback-panel-header h3 {
    color: var(--gold-bright) !important;
    font-size: 14px;
    margin: 0;
    text-shadow: 0 1px 3px var(--black-a80);
}

#feedback-panel-header button {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    line-height: 1;
}

#feedback-panel-header button:hover {
    color: var(--gold-bright);
}

#feedback-form {
    padding: 16px;
}

.feedback-field {
    margin-bottom: 12px;
}

.feedback-field label {
    display: block;
    color: var(--text-pale);
    font-size: 12px;
    margin-bottom: 4px;
}

.feedback-field select,
.feedback-field textarea {
    width: 100%;
    background: var(--bg-panel);
    border: 1px solid var(--border-panel);
    border-radius: 4px;
    color: var(--text-primary);
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
}

.feedback-field select:focus,
.feedback-field textarea:focus {
    outline: none;
    border-color: var(--gold);
}

#feedback-stars {
    display: flex;
    gap: 4px;
}

.feedback-star {
    font-size: 24px;
    color: #4a3f2f;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    transition: color 0.15s;
}

.feedback-star:hover,
.feedback-star:hover~.feedback-star {
    color: var(--gold);
}

#feedback-stars:hover .feedback-star {
    color: var(--gold-bright);
}

#feedback-stars .feedback-star:hover~.feedback-star {
    color: #4a3f2f;
}

.feedback-star.active {
    color: var(--gold-bright);
}

.feedback-status {
    font-size: 12px;
    min-height: 18px;
    margin-bottom: 8px;
}

.feedback-status.success {
    color: var(--color-success);
}

.feedback-status.error {
    color: var(--color-error);
}

#feedback-submit {
    width: 100%;
    padding: 8px;
    background: linear-gradient(180deg, var(--gold), #6b4f0e);
    border: 1px solid var(--gold-accent);
    border-radius: 4px;
    color: var(--text-light);
    font-size: 13px;
    font-weight: 600;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
}

#feedback-submit:hover {
    background: linear-gradient(180deg, #a07818, var(--gold));
}

#feedback-submit:disabled {
    opacity: 0.5;
    cursor: url('/img/cursor_32.png') 4 0, not-allowed;
}

/* === Leaderboard Panel === */
#leaderboard-panel {
    position: absolute;
    width: 520px;
    max-height: 80vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 300;
}

#leaderboard-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gold-a40);
}

#leaderboard-panel-header h3 {
    color: var(--gold-bright) !important;
    font-size: 15px;
    text-shadow: 0 1px 3px var(--black-a80);
}

#leaderboard-content {
    padding: 12px;
}

#lb-season-selector {
    margin-bottom: 10px;
}

#lb-season-select {
    width: 100%;
    padding: 6px 8px;
    background: var(--bg-a80);
    border: 1px solid var(--gold-a30);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
}

#lb-season-info {
    font-size: 0.8rem;
    color: #a89060;
    margin-top: 4px;
}

#lb-season-info:empty {
    display: none;
}

#lb-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.lb-tab {
    flex: 1;
    padding: 6px 4px;
    background: var(--bg-a80);
    border: 1px solid var(--gold-a30);
    border-radius: 4px;
    color: #8b7355;
    font-size: 11px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    transition: all 0.15s;
}

.lb-tab:hover {
    background: var(--gold-a15);
    color: var(--text-warm);
}

.lb-tab.active {
    background: var(--gold-a20);
    border-color: var(--gold);
    color: var(--text-light);
}

#lb-my-rank {
    padding: 6px 10px;
    margin-bottom: 8px;
    background: var(--gold-a15);
    border: 1px solid var(--gold-a30);
    border-radius: 4px;
    color: var(--text-light);
    font-size: 12px;
    text-align: center;
}

#lb-table-wrapper {
    overflow-x: auto;
    margin-bottom: 8px;
}

#lb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

#lb-table th {
    padding: 6px 8px;
    background: var(--gold-a15);
    color: var(--gold);
    font-size: 11px;
    text-align: left;
    border-bottom: 1px solid var(--gold-a30);
    white-space: nowrap;
}

#lb-table td {
    padding: 5px 8px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--gold-a10);
}

#lb-table tr:hover td {
    background: var(--gold-a08);
}

#lb-table tr.lb-me td {
    background: var(--gold-a20);
    color: var(--text-light);
    font-weight: 600;
}

#lb-table .lb-rank {
    font-weight: 700;
    color: var(--gold);
    text-align: center;
    width: 30px;
}

#lb-table .lb-rank-1 {
    color: var(--gold-bright);
}

#lb-table .lb-rank-2 {
    color: #c0c0c0;
}

#lb-table .lb-rank-3 {
    color: #cd7f32;
}

#lb-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 6px 0;
}

#lb-page-info {
    color: #8b7355;
    font-size: 12px;
}

#lb-login-msg {
    text-align: center;
    color: #8b7355;
    font-size: 12px;
    padding: 8px;
    border-top: 1px solid var(--gold-a20);
    margin-top: 8px;
}

/* Display name in settings */
#display-name-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--gold-a20);
}

.settings-input {
    background: var(--bg-a80);
    border: 1px solid var(--gold-a30);
    border-radius: 4px;
    color: var(--text-primary);
    padding: 4px 8px;
    font-size: 12px;
    width: 120px;
}

.settings-input:focus {
    outline: none;
    border-color: var(--gold);
}

.settings-status {
    font-size: 11px;
    padding: 2px 0;
    min-height: 16px;
}

.settings-status.ok {
    color: var(--color-success);
}

.settings-status.err {
    color: var(--color-error);
}

/* ===== Mobile Elements (hidden on desktop) ===== */
#mobile-nav {
    display: none;
}

#mobile-resources {
    display: none;
}

#mobile-more-menu button {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    padding: 10px 16px;
    text-align: left;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    white-space: nowrap;
}

#mobile-more-menu button:hover,
#mobile-more-menu a:hover {
    background: var(--gold-a20);
}

.mobile-more-coffee {
    display: block;
    color: #ffc832;
    font-size: 13px;
    padding: 10px 16px;
    text-align: left;
    text-decoration: none;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    white-space: nowrap;
    border-top: 1px solid var(--gold-a30);
    margin-top: 4px;
}

/* ===== Mobile Layout ===== */
@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }

    /* --- Craft progress toast: compact on mobile --- */
    #craft-progress-toast {
        bottom: 60px;
        right: 8px;
        left: auto;
        min-width: 0;
        max-width: 180px;
        padding: 6px 10px;
        gap: 5px;
        font-size: 11px;
        z-index: 100;
    }

    .craft-progress-name {
        font-size: 11px;
    }

    .craft-progress-bar-bg {
        min-width: 50px;
        height: 7px;
    }

    .craft-progress-pct {
        font-size: 10px;
        min-width: 26px;
    }

    /* --- Tutorial drawer panel (mobile) --- */
    #tutorial-banner {
        top: auto;
        bottom: 50px;
        left: 0;
        right: 0;
        width: 100%;
        min-height: auto;
        max-height: none;
        height: auto;
        padding: 0 14px 10px;
        gap: 5px;
        border-radius: 12px 12px 0 0;
        border-bottom: none;
        overflow-y: visible;
        animation: tutorialDrawerSlideUp 0.3s ease-out;
    }

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

    /* Poignée (grab handle) en haut du drawer */
    #tutorial-banner::before {
        content: '';
        position: sticky;
        top: 0;
        display: block;
        width: 36px;
        height: 4px;
        margin: 8px auto 4px;
        border-radius: 2px;
        background: var(--gold-a30);
        left: auto;
        right: auto;
        flex-shrink: 0;
    }

    /* Masquer le trait décoratif ::after du medieval-panel */
    #tutorial-banner::after {
        display: none;
    }

    /* Neutraliser les décalages desktop quand un panel latéral est ouvert */
    #tutorial-banner.sell-panel-open,
    #tutorial-banner.import-panel-open,
    #tutorial-banner.export-panel-open,
    #tutorial-banner.market-sell-panel-open,
    #tutorial-banner.portal-panel-open,
    #tutorial-banner.caserne-panel-open {
        left: 0;
    }

    #tutorial-step {
        font-size: 10px;
    }

    #tutorial-text {
        font-size: 12px;
    }

    #tutorial-progress {
        font-size: 10px;
        padding-bottom: 2px;
    }

    .tutorial-dismiss {
        display: block;
        font-size: 26px;
        padding: 6px 10px;
        min-width: 44px;
        min-height: 44px;
    }

    /* Bouton flottant pour rouvrir le tutoriel après dismiss */
    #tutorial-reopen-btn:not(.hidden) {
        display: block;
        position: fixed;
        bottom: 58px;
        left: 10px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(30, 20, 10, 0.92);
        border: 2px solid var(--gold);
        color: var(--gold-bright);
        font-size: 22px;
        cursor: pointer;
        z-index: 30;
        box-shadow: 0 2px 8px var(--black-a50);
        padding: 0;
        line-height: 44px;
        text-align: center;
        transition: bottom 0.3s ease;
    }

    /* Pousser le bouton tutorial au-dessus du build panel ouvert */
    body.mobile-build-open #tutorial-reopen-btn:not(.hidden) {
        bottom: calc(45vh + 58px);
    }

    #lore-dialog {
        width: calc(100vw - 32px);
        padding: 12px 14px;
        gap: 6px;
    }

    #lore-dialog-text {
        font-size: 13px;
    }

    #lore-dialog-btn {
        font-size: 12px;
    }

    #milestone-toast {
        left: 50%;
    }

    #raid-toast {
        bottom: 100px;
        right: 8px;
        padding: 6px 12px;
        z-index: 50;
    }

    #raid-toast-text {
        font-size: 12px;
    }

    #craft-toast {
        bottom: 60px;
        right: 8px;
        padding: 6px 12px;
        z-index: 101;
    }

    #craft-toast-text {
        font-size: 12px;
    }

    /* --- Canvas full width --- */
    #game-canvas {
        width: 100% !important;
        height: 100vh;
        touch-action: none;
        /* Empêcher la gestion native des gestes (scroll, zoom) sur le canvas */
    }

    /* --- HUD top bar hidden on mobile (replaced by left drawer) --- */
    #hud {
        display: none !important;
    }

    /* --- Sidebar hidden --- */
    #sidebar-menu {
        display: none !important;
    }

    /* --- Left shortcuts hidden on mobile --- */
    #left-shortcuts {
        display: none !important;
    }

    /* --- Milestones panel: popup on mobile --- */
    #milestones-panel {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        right: auto;
        bottom: auto;
        width: 380px;
        max-width: 95vw;
        max-height: 70vh;
        z-index: 50;
    }

    #milestones-panel-header button {
        display: block;
    }

    /* --- Caravan panel: close button visible on mobile --- */
    #caravan-panel-header button {
        display: block;
    }

    /* --- Bottom nav --- */
    #mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        z-index: 16;
        background: linear-gradient(0deg, var(--bg-gradient-dark), var(--bg-gradient-darker));
        border-top: 2px solid var(--gold);
        justify-content: space-around;
        align-items: center;
    }

    .mobile-nav-btn {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 22px;
        padding: 8px 6px;
        cursor: url('/img/cursor_32.png') 4 0, pointer;
        line-height: 1;
        transition: color 0.15s;
    }

    .mobile-nav-btn:hover,
    .mobile-nav-btn.active {
        color: var(--gold-bright);
    }

    .mobile-nav-btn {
        position: relative;
    }

    .mobile-nav-badge {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: var(--gold-badge);
        color: var(--bg-dark);
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
        border-radius: 8px;
        pointer-events: none;
    }

    /* --- Build panel as drawer --- */
    #build-panel {
        position: fixed;
        bottom: 50px;
        left: 0;
        right: 0;
        max-height: 45vh;
        transform: translateY(calc(100% + 52px));
        transition: transform 0.3s ease, visibility 0.3s;
        z-index: 15;
        overflow-y: auto;
        visibility: hidden;
        border-top: none;
    }

    #build-panel.mobile-open {
        transform: translateY(0);
        visibility: visible;
    }

    /* --- Cacher les HUDs du bas quand le tiroir build est ouvert --- */
    body.mobile-build-open #farm-tools-hud,
    body.mobile-build-open #forest-talent-hud,
    body.mobile-build-open #mine-gas-hud,
    body.mobile-build-open #leylines-hud {
        display: none !important;
    }

    /* --- All medieval panels as fullscreen overlay --- */
    .medieval-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 50px !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        transform: none !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 12px !important;
        animation: mobilePanelSlideUp 0.25s ease-out !important;
    }

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

    /* Tutorial banner : drawer compact, pas plein écran */
    #tutorial-banner {
        top: auto !important;
        bottom: 50px !important;
        height: auto !important;
        overflow-y: visible !important;
        border-radius: 12px 12px 0 0 !important;
        padding: 0 14px 10px !important;
        animation: tutorialDrawerSlideUp 0.3s ease-out !important;
    }

    .medieval-panel.hidden {
        display: none !important;
    }

    /* Mobile close buttons: larger touch targets */
    .medieval-panel [id$="-close"] {
        font-size: 32px;
        width: 40px;
        height: 40px;
    }

    /* Achievements single column on mobile */
    .ach-grid {
        grid-template-columns: 1fr;
    }

    /* --- Info panel as bottom sheet --- */
    #info-panel {
        position: fixed !important;
        bottom: 50px !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-height: 55vh;
        border-radius: 12px 12px 0 0 !important;
        transform: none !important;
    }

    /* --- Mode compact : seul le header + résumé prod sont visibles --- */
    #info-panel.compact {
        max-height: none;
        cursor: pointer;
    }

    #info-panel.compact #info-content {
        display: none;
    }

    #info-panel.compact #info-compact-prod {
        display: block;
    }

    #info-panel.compact #info-panel-header {
        margin-bottom: 0;
    }

    /* --- Mode expanded : panel complet avec plus de hauteur --- */
    #info-panel.expanded {
        max-height: 85vh;
    }

    #info-panel.expanded #info-compact-prod {
        display: none;
    }

    /* --- Mobile resources left drawer --- */
    #mobile-resources {
        position: fixed;
        top: env(safe-area-inset-top, 0px);
        left: 0;
        bottom: 52px;
        width: 38px;
        overflow-y: auto;
        overflow-x: hidden;
        background: rgba(30, 18, 10, 0.75);
        border-right: 1px solid var(--gold-a30);
        z-index: 14;
        padding: 3px 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
        transition: width 0.2s ease;
    }

    #mobile-resources.expanded {
        width: 160px;
        background: rgba(30, 18, 10, 0.95);
        border-right: 2px solid var(--gold);
        z-index: 25;
    }

    #mobile-resources.hidden {
        display: none !important;
    }

    #mobile-resources::-webkit-scrollbar {
        width: 0;
    }

    /* Collapsed : icône avec quantité superposée */
    .mobile-res-item {
        position: relative;
        width: 32px;
        height: 28px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    .mobile-res-item.mobile-res-separator {
        border-top: 1px solid var(--gold-a30);
        margin-top: 2px;
        padding-top: 2px;
    }

    .mobile-res-item .hud-icon {
        font-size: 18px;
        opacity: 0.6;
    }

    .mobile-res-item .mobile-res-val {
        position: absolute;
        bottom: 0;
        right: -2px;
        color: var(--text-white);
        font-weight: bold;
        font-size: 9px;
        text-shadow: 0 0 3px #000, 0 0 3px #000, 1px 1px 1px #000;
        line-height: 1;
    }

    .mobile-res-item .mobile-res-rate {
        display: none;
    }

    .mobile-res-item .mobile-res-sell {
        display: none;
    }

    /* Expanded : grille icône | valeur | rate | vente */
    #mobile-resources.expanded .mobile-res-item {
        width: auto;
        height: auto;
        margin: 0;
        display: grid;
        grid-template-columns: 22px 1fr auto auto;
        align-items: center;
        gap: 0 6px;
        padding: 3px 8px;
        min-height: 22px;
    }

    #mobile-resources.expanded .mobile-res-item .hud-icon {
        font-size: 14px;
        opacity: 1;
    }

    #mobile-resources.expanded .mobile-res-item .mobile-res-val {
        position: static;
        font-size: 11px;
        text-align: right;
        text-shadow: none;
    }

    #mobile-resources.expanded .mobile-res-rate {
        display: inline;
        font-size: 9px;
    }

    .mobile-res-item .mobile-res-rate.rate-pos {
        color: var(--color-green);
    }

    .mobile-res-item .mobile-res-rate.rate-neg {
        color: var(--color-red);
    }

    .mobile-res-sell {
        padding: 1px 4px;
        background: #1a3a1a;
        color: var(--color-green);
        border: 1px solid var(--land-border);
        border-radius: 3px;
        cursor: url('/img/cursor_32.png') 4 0, pointer;
        font-size: 9px;
        font-weight: bold;
        display: none;
    }

    #mobile-resources.expanded .mobile-res-sell {
        display: inline;
    }

    /* --- Mobile more menu --- */
    #mobile-more-menu {
        position: fixed;
        bottom: 52px;
        right: 4px;
        background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
        border: 2px solid var(--gold);
        border-radius: 8px;
        z-index: 20;
        display: flex;
        flex-direction: column;
        padding: 4px;
        box-shadow: 0 -4px 16px var(--black-a60);
    }

    #mobile-more-menu.hidden {
        display: none !important;
    }

    /* --- HUD overlay elements repositioned (no top HUD) --- */
    #bottom-right-menu {
        display: none;
    }

    #season-hud {
        top: env(safe-area-inset-top, 4px);
        left: 42px;
        right: auto;
        font-size: 11px;
        z-index: 13;
    }

    /* Desktop map-switcher hidden on mobile, replaced by #mobile-map-btn */
    #map-switcher {
        display: none !important;
    }

    /* Defense HUD repositioned on mobile (above build panel) */
    #king-attack-hud {
        font-size: 11px;
        padding: 3px 10px;
    }

    /* Wind HUD repositioned on mobile */
    #nord-wind-hud {
        font-size: 11px;
        padding: 3px 10px;
    }

    /* --- Mobile Map FAB button --- */
    #mobile-map-btn {
        position: fixed;
        bottom: 56px;
        right: 8px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
        border: 2px solid var(--gold);
        color: var(--text-primary);
        font-size: 20px;
        z-index: 17;
        box-shadow: 0 2px 10px var(--black-a50);
        cursor: url('/img/cursor_32.png') 4 0, pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    #mobile-map-btn:hover,
    #mobile-map-btn.active {
        border-color: var(--gold-bright);
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
    }

    #mobile-map-btn.hidden {
        display: none !important;
    }

    /* --- Mobile Map popup menu --- */
    #mobile-map-menu {
        position: fixed;
        bottom: 106px;
        right: 8px;
        background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
        border: 2px solid var(--gold);
        border-radius: 8px;
        z-index: 20;
        display: flex;
        flex-direction: column;
        padding: 4px;
        box-shadow: 0 -4px 16px var(--black-a60);
        max-height: 60vh;
        overflow-y: auto;
    }

    #mobile-map-menu.hidden {
        display: none !important;
    }

    #mobile-map-menu button {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 14px;
        padding: 10px 16px;
        text-align: left;
        cursor: url('/img/cursor_32.png') 4 0, pointer;
        white-space: nowrap;
        border-radius: 4px;
        transition: background 0.15s, color 0.15s;
    }

    #mobile-map-menu button:hover {
        background: var(--gold-a15);
        color: var(--text-primary);
    }

    #mobile-map-menu button.active {
        background: var(--gold-a25);
        border: 1px solid var(--gold);
        color: var(--text-light);
        font-weight: bold;
    }

    #expedition-hud {
        top: env(safe-area-inset-top, 4px);
        right: 4px;
    }

    #prestige-hud {
        top: env(safe-area-inset-top, 4px);
        left: 42px;
        right: auto;
    }

    #season-hud.prestige-visible {
        left: 100px;
    }

    #music-controls {
        display: none;
    }

    #event-banner {
        right: 0;
        left: 38px;
    }

    /* --- Research notification reposition --- */
    #research-notification {
        top: 4px;
        left: 42px;
        transform: none;
    }

    /* --- Craft panel fullscreen --- */
    #craft-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 50px !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    /* --- Build list wrap on mobile --- */
    #build-list {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .build-btn {
        width: calc(50% - 3px);
        min-width: 0;
    }

    #build-categories {
        flex-wrap: wrap;
    }

    .build-cat-btn {
        font-size: 10px;
        padding: 4px 8px;
    }

    /* --- Modals adapt --- */
    #offline-content {
        min-width: auto;
        width: 90vw;
    }

    #confirm-box {
        min-width: auto;
        width: 90vw;
    }

    /* --- Tooltip hidden on mobile (touch) --- */
    #tooltip {
        display: none !important;
    }

    /* --- Quick sale caché sur mobile (pas de clic droit sur tactile) --- */
    .research-tech[data-tech-id="quick_sale"],
    .research-tech[data-tech-id="fn_quick_sale"],
    .research-tech[data-tech-id="mn_quick_sale"],
    .research-tech[data-tech-id="mt_quick_sale"],
    .research-tech[data-tech-id="kd_quick_sale"],
    .research-tech[data-tech-id="ag_quick_sale"],
    .research-tech[data-tech-id="ac_quick_sale"],
    .research-tech[data-tech-id="ep_quick_sale"] {
        display: none !important;
    }

    /* --- Leaderboard table smaller --- */
    #lb-table {
        font-size: 11px;
    }

    #lb-table th,
    #lb-table td {
        padding: 4px 6px;
    }
}

/* ======================================
   SUPPORTER PACK (cosmetic)
   ====================================== */

/* Supporter badge (inline star) */
.supporter-badge {
    color: var(--gold-bright);
    font-size: 0.85em;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}

/* Leaderboard: supporter row name in gold */
.lb-supporter td:nth-child(2) {
    color: var(--gold-bright);
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.3);
}

/* HUD: supporter display name gold glow */
#hud-display-name.hud-supporter {
    color: var(--gold-bright);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* === Titres de noblesse === */

/* Titre dans le HUD (devant le nom du joueur) */
.hud-title {
    color: var(--gold-title);
    font-style: italic;
    font-weight: 600;
}

/* Titre dans le leaderboard */
.lb-title {
    color: var(--gold-title);
    font-style: italic;
    font-size: 0.9em;
}

/* Supporter section layout (settings) */
.supporter-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--gold-a15);
    margin-bottom: 10px;
}

.supporter-cta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px;
}

.supporter-cta-row .supporter-cta-btn {
    flex: 1;
}

/* Supporter CTA button (settings) */
.supporter-cta-btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--gold-bright) 0%, #b8860b 100%);
    color: var(--bg-dark) !important;
    font-weight: bold;
    border: 1px solid var(--gold-bright);
    border-radius: 6px;
    padding: 8px 18px;
    text-decoration: none;
    text-align: center;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    transition: box-shadow 0.2s, transform 0.1s;
}

.supporter-cta-btn:hover {
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    transform: scale(1.03);
}

.supporter-qr {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    border: 2px solid var(--gold);
    margin-top: 8px;
}

/* Supporter theme overrides (applied to body.supporter-theme) */
.supporter-theme #hud {
    border-bottom-color: var(--gold-bright);
}

.supporter-theme .medieval-panel {
    border-color: var(--gold-bright);
    box-shadow: 0 0 12px var(--supporter-panel-shadow);
}

.supporter-theme #sidebar-menu {
    border-left-color: var(--gold-bright);
}

.supporter-theme .action-btn:not(.demolish-btn):not(.downgrade-btn):hover {
    border-color: var(--gold-bright);
    box-shadow: 0 0 8px var(--supporter-btn-shadow);
}

.supporter-theme #build-panel {
    border-top-color: var(--gold-bright);
}

/* === Save Slots === */
#save-slots-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.save-slot-row {
    background: rgba(30, 25, 18, 0.7);
    border: 1px solid var(--gold-a40);
    border-radius: 6px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.save-slot-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.save-slot-name {
    font-weight: bold;
    color: #d4a843;
    font-size: 14px;
}

.save-slot-date {
    font-size: 12px;
    color: #8b7752;
}

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

.save-slot-actions button {
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid;
    border-radius: 4px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-family: inherit;
}

.save-slot-btn-restore {
    background: rgba(50, 80, 130, 0.6);
    border-color: rgba(90, 140, 200, 0.5);
    color: #a0c4f0;
}

.save-slot-btn-restore:hover {
    background: rgba(60, 100, 160, 0.8);
    border-color: rgba(110, 160, 220, 0.7);
}

.save-slot-btn-delete {
    background: rgba(130, 40, 40, 0.5);
    border-color: rgba(180, 60, 60, 0.4);
    color: #e09090;
}

.save-slot-btn-delete:hover {
    background: rgba(160, 50, 50, 0.7);
    border-color: rgba(200, 80, 80, 0.6);
}

#save-slots-create {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

#save-slot-name {
    flex: 1;
    padding: 6px 10px;
    background: rgba(20, 18, 14, 0.8);
    border: 1px solid var(--gold-a40);
    border-radius: 4px;
    color: #d4c8a0;
    font-family: inherit;
    font-size: 13px;
}

#save-slot-name::placeholder {
    color: #6b5f48;
}

#save-slots-info {
    font-size: 12px;
    color: #8b7752;
}

#save-slots-create .action-btn:disabled {
    opacity: 0.4;
    cursor: url('/img/cursor_32.png') 4 0, not-allowed;
}

/* Research progress bars */
.research-progress-bar-bg {
    height: 10px;
    background: #1a1a1a;
    border-radius: 5px;
    border: 1px solid var(--text-dimmest);
    overflow: hidden;
}

.research-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #5c2de0, #9c4dff);
    border-radius: 4px;
    transition: width 0.15s linear;
}

/* === Barre de densité forestière === */
.density-bar-bg {
    height: 10px;
    background: #1a1a1a;
    border-radius: 5px;
    border: 1px solid var(--text-dimmest);
    overflow: hidden;
    margin-top: 4px;
}

.density-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s linear, background 0.5s ease;
}

/* === Sélecteur de tier (extracteurs/condensateur rituel) === */
.extractor-tier-select {
    font-size: 11px;
    background: #1a1a2e;
    color: #e0d5c0;
    border: 1px solid #3a3a5a;
    border-radius: 3px;
    padding: 2px 6px;
    margin-left: 4px;
    cursor: pointer;
}
.extractor-tier-select option:disabled {
    color: #666;
}

.tech-progress {
    margin-top: 6px;
}

.tech-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #b0a0d0;
    margin-top: 2px;
}

.tech-lab-selector {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tech-lab-selector .custom-dropdown {
    min-width: 160px;
}

.tech-cancel-btn {
    background: #8b2252;
    color: var(--text-white);
    border: 1px solid #a03060;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
}

.tech-cancel-btn:hover {
    background: #a82a62;
}

/* ============================================================ */
/* === Tavern — Side Panel (HUD + Bank)                       === */
/* ============================================================ */

#tavern-panel {
    position: absolute;
    top: 42px;
    left: 0;
    bottom: 120px;
    width: 380px;
    padding: 12px 14px;
    z-index: 9;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-bottom: none;
    animation: sideSlideIn 0.35s ease-out;
    overflow-y: auto;
}

#tavern-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gold-a40);
}

#tavern-panel-header h3 {
    display: flex;
    align-items: center;
    gap: 6px;
}

#tavern-panel-content {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- Tavern HUD rows --- */

#tavern-hud-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: var(--bg-dark);
    border-radius: 4px;
    border: 1px solid var(--gold-a20);
}

.tavern-hud-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-light);
}

.tavern-hud-row span:nth-child(2) {
    font-weight: bold;
    color: var(--gold-bright);
    min-width: 30px;
}

.tavern-hud-label {
    color: var(--text-dim);
}

/* --- Bank section --- */

#tavern-bank-section h4 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--gold-bright);
    border-bottom: 1px solid var(--gold-a20);
    padding-bottom: 6px;
}

.bank-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    padding: 8px 10px;
    background: var(--bg-dark);
    border-radius: 4px;
    border: 1px solid var(--gold-a20);
}

.bank-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bank-label {
    color: var(--text-light);
    font-size: 13px;
}

.bank-value {
    color: var(--gold-bright);
    font-weight: bold;
    font-size: 14px;
}

.bank-tiers-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
    font-size: 12px;
}

.bank-tiers-table th {
    text-align: left;
    color: var(--text-light);
    padding: 4px 8px;
    border-bottom: 1px solid var(--gold-a30);
}

.bank-tiers-table td {
    padding: 4px 8px;
    color: var(--text-dim);
}

.bank-tiers-table tr.bank-tier-active td {
    color: var(--gold-bright);
    background: var(--gold-a10);
    font-weight: bold;
}

/* Overlay banque (chargement / non connecté) */
.bank-overlay {
    text-align: center;
    color: var(--text-dim);
    padding: 20px 10px;
    font-size: 13px;
    font-style: italic;
}

/* Message d'erreur banque (temporaire) */
.bank-error {
    color: #e74c3c;
    font-size: 12px;
    text-align: center;
    margin-top: 6px;
}

.bank-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bank-controls input[type="number"] {
    width: 100%;
    padding: 6px 10px;
    background: var(--bg-input);
    border: 1px solid var(--gold-a30);
    border-radius: 4px;
    color: var(--text-light);
    font-size: 13px;
}

.bank-buttons {
    display: flex;
    gap: 6px;
}

.bank-buttons .action-btn {
    flex: 1;
    font-size: 12px;
    padding: 6px 8px;
}

/* === Tavern — Social Panel + Visit Banner                  === */
/* ============================================================ */

#social-panel {
    position: absolute;
    top: 44px;
    left: 0;
    bottom: 130px;
    width: 380px;
    padding: 12px 14px;
    z-index: 12;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-bottom: none;
    overflow-y: auto;
    animation: sideSlideIn 0.35s ease-out;
}

#social-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gold-a40);
}

#social-panel-header h3 {
    display: flex;
    align-items: center;
    gap: 6px;
}

#social-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.social-tab {
    background: var(--bg-medium);
    border: 1px solid var(--gold-a30);
    color: var(--text-light);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s;
}

.social-tab:hover {
    background: var(--gold-a20);
}

.social-tab.active {
    background: var(--gold-a30);
    border-color: var(--gold-a60);
    color: var(--text-white);
}

#social-tab-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Liste des joueurs en ligne */
.online-player-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px solid var(--gold-a10);
    font-size: 13px;
    color: var(--text-light);
}

.online-player-row:hover {
    background: var(--gold-a10);
}

.online-player-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.online-player-title {
    font-size: 11px;
    color: var(--gold-a60);
    margin-left: 6px;
}

.visit-btn {
    background: var(--bg-medium);
    border: 1px solid var(--gold-a30);
    color: var(--text-light);
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    margin-left: 8px;
}

.visit-btn:hover {
    background: var(--gold-a20);
    color: var(--text-white);
}

/* Bandeau de visite (affiché en haut quand on visite une autre taverne) */
#tavern-visit-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: linear-gradient(135deg, #2a1a0e, #3d2a1a);
    border: 1px solid var(--gold-a40);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

#tavern-visit-banner .visit-player-name {
    color: var(--text-white);
}

#tavern-visit-back {
    font-size: 12px;
    padding: 4px 12px;
}

/* ============================================================ */
/* === Tavern — Bottom Bar (social/account buttons)          === */
/* ============================================================ */

#tavern-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 15;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(26, 15, 8, 0.92), rgba(42, 26, 14, 0.92));
    border: 1px solid var(--gold-a40);
    border-radius: 10px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
    animation: tavernBarSlideUp 0.35s ease-out;
}

@keyframes tavernBarSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.tavern-bottom-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 18px;
    background: var(--bg-dark);
    border: 1px solid var(--gold-a30);
    border-radius: 6px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    color: var(--text-muted);
    transition: transform 0.15s, border-color 0.15s, background 0.15s, color 0.15s;
}

.tavern-bottom-btn:hover {
    transform: scale(1.08);
    border-color: var(--gold);
    background: var(--gold-a20);
    color: var(--text-light);
}

.gi.tavern-bottom-icon,
.gi.tavern-bottom-icon svg {
    width: 22px;
    height: 22px;
}

.tavern-bottom-label {
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
}