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

body {
    overflow: hidden;
    background: #0e0906;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    user-select: none;
}

/* Loading Screen */
#loading-screen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #0e0906;
    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: #ffd700;
    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: #1a0f08;
    border: 2px solid #8b6914;
    border-radius: 6px;
    overflow: hidden;
    margin: 0 auto 12px;
}

#loading-bar {
    width: 5%;
    height: 100%;
    background: linear-gradient(90deg, #8b6914, #ffd700);
    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: #a09880;
    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: #0e0906;
    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: #daa520;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.ws-subtitle {
    color: #a09880;
    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 #3a3020;
    border-radius: 12px;
    padding: 24px 20px;
    width: 250px;
    text-align: center;
    transition: border-color 0.2s, transform 0.2s;
}

.ws-card:hover {
    border-color: #daa520;
    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: #0e0906;
    border: 1px solid #3a3020;
    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: #daa520;
}

.ws-input-row input.ws-input-error {
    border-color: #c0392b;
    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: #daa520;
    color: #1a1410;
}

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

.ws-btn-season {
    background: #27ae60;
    color: #fff;
}

.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, #1e120a 0%, #150d06 100%);
    display: flex;
    align-items: stretch;
    padding: 2px 8px;
    gap: 4px;
    border-bottom: 2px solid #8b6914;
    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(80px, 1fr));
    align-items: center;
    gap: 2px 4px;
}

#hud-row-raw .hud-item-top,
#hud-row-produced .hud-item-top {
    width: 100%;
    min-width: 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: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

#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: #d4a017;
    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 #8b6914;
    padding-left: 8px;
    margin-left: 4px;
}

.hud-item {
    display: flex;
    align-items: center;
    color: #e0d6c2;
    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: #a09880;
}

.hud-value {
    color: #fff;
    font-weight: bold;
    min-width: 20px;
    font-size: 11px;
}

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

.hud-value {
    display: inline;
}

.hud-show-rates .hud-rate {
    display: inline;
}

.hud-show-rates .hud-value {
    display: none;
}

.hud-rate.rate-pos {
    color: #4caf50;
}

.hud-rate.rate-neg {
    color: #f44336;
}

.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: #8b6914;
    border-radius: 2px;
}

/* Music Controls */
#music-controls {
    position: absolute;
    bottom: 60px;
    right: 90px;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
    border: 1px solid #8b6914;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 3px 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: #ffd700;
}

#music-track-name {
    color: #a09880;
    font-size: 11px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Build Panel (Bottom) */
#build-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 86px;
    background: linear-gradient(0deg, #1e120a 0%, #150d06 100%);
    border-top: 2px solid #8b6914;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

#build-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    border-bottom: 1px solid rgba(139, 105, 20, 0.3);
    gap: 6px;
}

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

.build-cat-btn {
    padding: 5px 12px;
    background: rgba(26, 15, 8, 0.8);
    color: #a09880;
    border: 1px solid rgba(139, 105, 20, 0.3);
    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: rgba(139, 105, 20, 0.15);
    color: #e0d6c2;
}

.build-cat-btn.active {
    background: rgba(139, 105, 20, 0.2);
    color: #e8d5a3;
    border-color: #8b6914;
}

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

.action-icon {
    padding: 4px 10px;
    background: rgba(26, 15, 8, 0.8);
    color: #a09880;
    border: 1px solid rgba(139, 105, 20, 0.3);
    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: rgba(139, 105, 20, 0.2);
    border-color: #8b6914;
    color: #e0d6c2;
}

.land-icon-btn { color: #4caf50; }
.land-icon-btn:hover { border-color: #4caf50; }
.land-icon-btn.active { background: #2a3a2a; border-color: #4caf50; color: #4caf50; }

.research-icon-btn { color: #00ff66; }
.research-icon-btn:hover { border-color: #00ff66; }

.tools-icon-btn { color: #ff8c00; }
.tools-icon-btn:hover { border-color: #ff8c00; }

.companion-icon-btn { color: #ff8c00; }
.companion-icon-btn:hover { border-color: #ff8c00; }

.reset-icon-btn { color: #ff6347; font-size: 9px; }
.reset-icon-btn:hover { border-color: #ff6347; background: #3a1a1a; }

/* Sidebar Menu (right) */
#sidebar-menu {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 86px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(90deg, #1e120a 0%, #150d06 100%);
    border-left: 2px solid #8b6914;
    z-index: 10;
}

#sidebar-header {
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 6px;
}

#sidebar-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    gap: 4px;
    padding: 6px;
    flex: 1;
}

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

#sidebar-footer {
    padding: 8px 6px;
    display: flex;
    justify-content: center;
}

.sidebar-coffee-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: rgba(255, 200, 50, 0.1);
    border: 1px solid rgba(255, 200, 50, 0.3);
    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; }
.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: 22px; height: 22px; }
.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: 22px;
    height: 22px;
    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: rgba(255, 200, 50, 0.2);
    border-color: #ffc832;
}

.sidebar-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 15, 8, 0.8);
    color: #a09880;
    border: 1px solid rgba(139, 105, 20, 0.3);
    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: #8b6914;
    background: rgba(139, 105, 20, 0.2);
}
.sidebar-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: #e2b714;
    color: #1a0f08;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    border-radius: 7px;
    pointer-events: none;
}

.sidebar-btn.research-icon-btn { color: #00ff66; }
.sidebar-btn.tools-icon-btn { color: #ff8c00; }
.sidebar-btn.companion-icon-btn { color: #ff8c00; }
.sidebar-btn.settings-icon-btn { color: #a09880; }

/* Build Tier Tabs */
#build-tier-tabs {
    display: flex;
    gap: 3px;
    padding: 3px 10px;
    border-bottom: 1px solid rgba(139, 105, 20, 0.3);
}

.build-tier-btn {
    padding: 3px 10px;
    background: rgba(26, 15, 8, 0.8);
    color: #a09880;
    border: 1px solid rgba(139, 105, 20, 0.3);
    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: rgba(139, 105, 20, 0.15);
    color: #e0d6c2;
}

.build-tier-btn.active {
    background: rgba(139, 105, 20, 0.2);
    color: #e8d5a3;
    border-color: #8b6914;
}

#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;
    width: fit-content;
    padding: 6px 8px;
    background: rgba(26, 15, 8, 0.6);
    color: #e0d6c2;
    border: 1px solid rgba(139, 105, 20, 0.25);
    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: rgba(139, 105, 20, 0.15);
    border-color: #8b6914;
}

.build-btn.selected {
    background: rgba(139, 105, 20, 0.2);
    border-color: #8b6914;
    color: #e8d5a3;
}

.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: #ffd700;
    font-size: 10px;
    display: block;
}

.build-btn-info {
    color: #888;
    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, #8b6914, transparent);
    margin: 10px 0;
}

.storage-info {
    color: #a09880;
    font-size: 10px;
    white-space: nowrap;
    padding: 0 4px;
}

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

#build-list::-webkit-scrollbar-track {
    background: #1a0f08;
}

#build-list::-webkit-scrollbar-thumb {
    background: #8b6914;
    border-radius: 2px;
}

/* 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: 8px;
}

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

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

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

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

#info-panel-header h3 {
    color: #ffd700;
    font-size: 15px;
    margin: 0;
}

#info-content p {
    color: #c0b8a0;
    font-size: 13px;
    margin-bottom: 4px;
}

#info-next-level {
    color: #6a9a6a;
    font-size: 11px;
    font-style: italic;
}

#info-tools {
    margin-top: 8px;
    padding: 6px 8px;
    background: rgba(139, 105, 20, 0.1);
    border: 1px solid rgba(139, 105, 20, 0.25);
    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: #e8d5a3;
    font-size: 13px;
    font-weight: bold;
}

.info-eq-stats {
    color: #a09880;
    font-size: 12px;
    margin-top: 2px;
}

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

.info-eq-upgrade {
    color: #e8d5a3 !important;
    border-color: #8b6914 !important;
}

.info-eq-unassign {
    color: #f44336 !important;
    border-color: rgba(244, 67, 54, 0.4) !important;
    background: rgba(244, 67, 54, 0.1) !important;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 4px 8px;
    font-size: 16px;
    line-height: 1;
}

.info-eq-unassign:hover {
    background: rgba(244, 67, 54, 0.2) !important;
    border-color: #f44336 !important;
}

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

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

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

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

#info-workers-row .action-btn {
    flex: 1;
}

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

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

.action-btn {
    padding: 6px 10px;
    background: rgba(26, 15, 8, 0.8);
    color: #e0d6c2;
    border: 1px solid rgba(139, 105, 20, 0.3);
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 12px;
    transition: background 0.15s;
}

.action-btn:hover {
    background: rgba(139, 105, 20, 0.2);
    border-color: #8b6914;
}

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: #1a1510;
    color: #e0d6c2;
}

/* 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 rgba(139, 105, 20, 0.3);
    border-radius: 4px;
    color: #e0d6c2;
    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: rgba(139, 105, 20, 0.2);
    border-color: #8b6914;
}

.custom-dropdown-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background: #1a1510;
    border: 1px solid rgba(139, 105, 20, 0.5);
    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: #e0d6c2;
    font-size: 12px;
    white-space: nowrap;
}

.custom-dropdown-option:hover {
    background: rgba(139, 105, 20, 0.3);
}

.custom-dropdown-option.active {
    background: rgba(139, 105, 20, 0.45);
    color: #f0d070;
}

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

.harvest-btn {
    background: #2a3a1a;
    border-color: #8bc34a;
    color: #8bc34a;
}

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

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

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

.demolish-btn {
    background: linear-gradient(180deg, #3a1a1a 0%, #2a0a0a 100%);
    border-color: #8b2020;
    color: #ff6347;
}

.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: #fff;
    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: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(42, 26, 14, 0.92) 0%, rgba(26, 15, 8, 0.95) 100%);
    color: #e0d6c2;
    border: 1px solid #8b6914;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 14px;
    z-index: 1000;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

#placement-mode-cancel {
    background: none;
    border: 1px solid #8b6914;
    color: #e0d6c2;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

#placement-mode-cancel:hover {
    background: rgba(139, 105, 20, 0.3);
    color: #ffd700;
}


/* Tooltip */
#tooltip {
    position: absolute;
    background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
    color: #e0d6c2;
    border: 2px solid #8b6914;
    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 rgba(139, 105, 20, 0.3), 0 4px 12px rgba(0, 0, 0, 0.6);
}

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

#offline-content {
    position: relative;
    background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
    border: 3px solid #8b6914;
    border-radius: 4px;
    padding: 24px 32px 20px;
    text-align: center;
    min-width: 320px;
    max-width: 90vw;
    box-shadow:
        0 0 30px rgba(139, 105, 20, 0.4),
        inset 0 0 60px rgba(0, 0, 0, 0.5),
        0 8px 32px rgba(0, 0, 0, 0.8);
    animation: confirmAppear 0.25s ease-out;
}

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

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

#offline-content h3 {
    color: #e8d5a3;
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

#offline-time {
    color: #a09880;
    margin-bottom: 12px;
    font-size: 14px;
}

#offline-earnings {
    color: #d4c4a0;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.6;
}

#offline-ok {
    padding: 8px 30px;
    background: linear-gradient(180deg, #1a3a1a 0%, #0a200a 100%);
    color: #e8d5a3;
    border: 2px solid #8b6914;
    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: #c9a834;
    box-shadow: 0 0 12px rgba(139, 105, 20, 0.3);
}

.hidden {
    display: none !important;
}

/* === Medieval Panel Base === */
.medieval-panel {
    background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
    border: 3px solid #8b6914;
    border-radius: 4px;
    box-shadow:
        0 0 20px rgba(139, 105, 20, 0.3),
        inset 0 0 40px rgba(0, 0, 0, 0.5),
        0 6px 24px rgba(0, 0, 0, 0.7);
    animation: confirmAppear 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, #8b6914, transparent);
    pointer-events: none;
    z-index: 1;
}

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

.medieval-panel-header {
    border-bottom: 1px solid rgba(139, 105, 20, 0.4) !important;
}

.medieval-panel-header h3,
[id$="-panel-header"] h3 {
    color: #ffd700 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* 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: #1a0f08;
}

.medieval-panel > [id$="-content"]::-webkit-scrollbar-thumb,
.medieval-panel::-webkit-scrollbar-thumb {
    background: #8b6914;
    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: #e8d5a3;
    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: #fff;
    background: rgba(139, 105, 20, 0.3);
}

/* 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: rgba(26, 15, 8, 0.8);
    border-color: rgba(139, 105, 20, 0.3);
    color: #a09880;
}

.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: rgba(139, 105, 20, 0.15);
    color: #d4c4a0;
}

.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: rgba(139, 105, 20, 0.2);
    border-color: #8b6914;
    color: #e8d5a3;
}

/* 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: rgba(26, 15, 8, 0.6);
    border-color: rgba(139, 105, 20, 0.2);
}

.medieval-panel .overview-item:hover,
.medieval-panel .overview-resource-row:hover {
    border-color: #8b6914;
    background: rgba(139, 105, 20, 0.15);
}

/* Medieval tier/section headers */
.medieval-panel .research-tier-header,
.medieval-panel .tool-section-header,
.medieval-panel .overview-category {
    background: rgba(139, 105, 20, 0.15);
    color: #c9a834;
}

/* Medieval filter checkbox */
.medieval-panel .research-filter-label input[type="checkbox"] {
    accent-color: #8b6914;
}

/* === 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;
}

#sell-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(139, 105, 20, 0.4);
}

#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: #1a0f08; }
#sell-content::-webkit-scrollbar-thumb { background: #8b6914; border-radius: 3px; }

.sell-row {
    background: rgba(26, 15, 8, 0.6);
    border: 1px solid rgba(139, 105, 20, 0.2);
    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: #e8d5a3;
}

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

.sell-res-stock {
    color: #a09880;
    font-size: 12px;
}

.sell-res-price {
    color: #4caf50;
    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: #4caf50;
}

.sell-rate-neg {
    color: #f44336;
}

.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: rgba(139, 105, 20, 0.1);
    color: #a09880;
    border: 1px solid rgba(139, 105, 20, 0.3);
    border-radius: 0;
    font-size: 11px;
    font-weight: bold;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
}

.sell-row-pct-active {
    background: rgba(139, 105, 20, 0.5);
    border-color: #ffd700;
    color: #ffd700;
}

.sell-amount {
    width: 60px;
    padding: 3px 4px;
    background: #1a0f08;
    color: #e8d5a3;
    border: 1px solid rgba(139, 105, 20, 0.4);
    border-radius: 0;
    font-size: 11px;
    text-align: center;
}

.sell-amount:focus {
    outline: none;
    border-color: #8b6914;
}

.sell-panel-btn {
    padding: 4px 6px;
    background: rgba(139, 105, 20, 0.2);
    color: #e8d5a3;
    border: 1px solid #8b6914;
    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: rgba(139, 105, 20, 0.4);
}

.sell-exec-btn {
    background: rgba(76, 175, 80, 0.15);
    border-color: #4caf50;
    color: #4caf50;
}

.sell-exec-btn:hover {
    background: rgba(76, 175, 80, 0.3);
}

#sell-footer {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(139, 105, 20, 0.4);
    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: rgba(139, 105, 20, 0.1);
    color: #a09880;
    border: 1px solid rgba(139, 105, 20, 0.3);
    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 {
    border-left: none;
}

#sell-pct-group .sell-pct-btn:hover {
    background: rgba(139, 105, 20, 0.3);
    color: #e8d5a3;
}

#sell-pct-group .sell-pct-btn.active {
    background: rgba(139, 105, 20, 0.5);
    color: #ffd700;
    border-color: #8b6914;
}

.sell-all-action {
    width: 100%;
    padding: 6px 12px;
    font-size: 13px;
    background: rgba(76, 175, 80, 0.15);
    border-color: #4caf50;
    color: #4caf50;
}

.sell-all-action:hover {
    background: rgba(76, 175, 80, 0.3);
}

.sell-empty {
    text-align: center;
    color: #a09880;
    padding: 20px;
    font-size: 13px;
}

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

/* Research Panel */
#research-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 620px;
    max-height: 80vh;
    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: 10px;
}

.research-tab {
    flex: 1;
    padding: 6px 12px;
    border: 1px solid #444;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: #888;
    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: #ccc;
}

.research-tab.active {
    background: rgba(0, 255, 102, 0.15);
    border-color: #00ff66;
    color: #00ff66;
}

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

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

.research-filter-label input[type="checkbox"] {
    accent-color: #00ff66;
}

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

.research-tier-header {
    color: #00ff66;
    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: #1a2a2a;
    border: 1px solid #2a3a3a;
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 6px;
    transition: border-color 0.15s;
}

.research-tech.completed {
    border-color: #00ff66;
    background: rgba(0, 255, 102, 0.08);
}

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

.tech-name {
    color: #e0d6c2;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 2px;
}

.tech-desc {
    color: #a09880;
    font-size: 11px;
    margin-bottom: 4px;
}

.tech-info {
    color: #666;
    font-size: 10px;
    margin-bottom: 4px;
}

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

.tech-status {
    color: #00ff66;
    font-size: 11px;
    font-weight: bold;
}

.tech-start-btn {
    padding: 4px 12px;
    background: rgba(139, 105, 20, 0.15);
    color: #e8d5a3;
    border: 1px solid #8b6914;
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 11px;
    margin-top: 4px;
}

.tech-start-btn:hover {
    background: rgba(139, 105, 20, 0.3);
}

.research-rate-info {
    color: #888;
    font-size: 11px;
    text-align: center;
    padding: 8px 0;
    margin-top: 4px;
    border-top: 1px solid #2a3a3a;
}

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

#research-panel::-webkit-scrollbar-track {
    background: #1a0f08;
}

#research-panel::-webkit-scrollbar-thumb {
    background: #8b6914;
    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: #2a3a2a;
    color: #a09880;
    border: 1px solid #4a5a4a;
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 10px;
}

.block-size-btn:hover {
    background: #3a5a3a;
    color: #e0d6c2;
}

.block-size-btn.active {
    background: #3a5a3a;
    border-color: #4caf50;
    color: #4caf50;
    font-weight: bold;
}

/* Research Notification */
#research-notification {
    position: absolute;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
    border: 2px solid #8b6914;
    border-radius: 3px;
    padding: 10px 24px;
    z-index: 35;
    animation: notifSlide 0.3s ease-out;
    box-shadow: 0 0 16px rgba(139, 105, 20, 0.3), 0 4px 16px rgba(0, 0, 0, 0.6);
}

#research-notification-text {
    color: #e8d5a3;
    font-size: 14px;
    font-weight: bold;
}

/* Equipment Button (legacy) */

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

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

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

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

.tool-tab {
    flex: 1;
    padding: 6px 4px;
    background: #1a1a2e;
    color: #888;
    border: 1px solid #2a2a3e;
    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: #2a2a3e;
    color: #ff8c00;
    border-color: #ff8c00;
    font-weight: bold;
}

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

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

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

.tool-subtab.active {
    background: #1a2a1a;
    color: #6a9;
    border-color: #6a9;
}

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

.tool-empty {
    color: #555;
    font-size: 12px;
    text-align: center;
    padding: 16px 0;
    font-style: italic;
}

.tool-section-header {
    color: #ff8c00;
    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: #1a1a2e;
    border: 1px solid #2a2a3e;
    border-radius: 4px;
}

.tool-buy-name, .tool-owned-name {
    color: #e0d6c2;
    font-weight: bold;
    font-size: 13px;
    display: block;
}

.tool-buy-stats, .tool-owned-stats {
    color: #888;
    font-size: 11px;
    display: block;
    margin-top: 2px;
}

.tool-buy-btn, .tool-upgrade-btn {
    padding: 5px 12px;
    background: rgba(139, 105, 20, 0.15);
    color: #e8d5a3;
    border: 1px solid #8b6914;
    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: rgba(139, 105, 20, 0.3);
}

.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: #6a9;
    font-size: 11px;
    display: block;
    margin-top: 2px;
}

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

.tool-assign-btn:hover {
    background: #2a3a2a;
}

.tool-max {
    color: #ff8c00;
    font-size: 11px;
    font-weight: bold;
    margin-right: 4px;
}

/* Event Banner */
#event-banner {
    position: fixed;
    top: 44px;
    right: 86px;
    background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
    border: 2px solid #8b6914;
    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 rgba(0, 0, 0, 0.6);
}

#event-name {
    color: #ffd700;
    font-size: 14px;
    font-weight: bold;
    display: block;
}

#event-desc {
    color: #e0d6c2;
    font-size: 12px;
    display: block;
    margin: 2px 0;
}

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

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

#event-timer-text {
    color: #a09880;
    font-size: 11px;
}

/* King Popup */
#king-popup {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
}

#king-backdrop {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75);
}

#king-content {
    position: relative;
    background: linear-gradient(180deg, #1a0e2a 0%, #0e0818 100%);
    border: 3px solid #8b6914;
    border-radius: 4px;
    padding: 24px 32px 20px;
    text-align: center;
    min-width: 360px;
    max-width: 90vw;
    box-shadow:
        0 0 30px rgba(139, 105, 20, 0.4),
        inset 0 0 60px rgba(0, 0, 0, 0.5),
        0 8px 32px rgba(0, 0, 0, 0.8);
    animation: confirmAppear 0.25s ease-out;
}

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

#king-content::before { top: 6px; }
#king-content::after { bottom: 6px; }

#king-ornament-top {
    font-size: 28px;
    margin-bottom: 4px;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.4));
}

#king-content h3 {
    color: #e8d5a3;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    margin-bottom: 0;
}

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

#king-demand-text {
    color: #d4c4a0;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 8px;
}

#king-reward-text {
    color: #4caf50;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
    text-shadow: 0 0 6px rgba(76, 175, 80, 0.3);
}

#king-timer-text {
    color: #ff8c00;
    font-size: 12px;
    margin-bottom: 16px;
}

#king-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.king-btn {
    padding: 8px 24px;
    border: 2px solid;
    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;
    min-width: 110px;
}

.king-accept-btn {
    background: linear-gradient(180deg, #1a3a1a 0%, #0a200a 100%);
    border-color: #2a7a2a;
    color: #ffd700;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
}

.king-accept-btn:hover {
    background: linear-gradient(180deg, #2a5a2a 0%, #1a3a1a 100%);
    border-color: #3a9a3a;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}

.king-refuse-btn {
    background: linear-gradient(180deg, #2a2a1a 0%, #1a1a0e 100%);
    border-color: #5a5030;
    color: #b0a880;
}

.king-refuse-btn:hover {
    background: linear-gradient(180deg, #3a3a2a 0%, #2a2a18 100%);
    border-color: #8b7940;
    color: #d4c4a0;
}

/* King Bonus Banner */
#king-bonus-banner {
    position: absolute;
    top: 54px;
    right: 90px;
    background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
    border: 2px solid #8b6914;
    border-radius: 4px;
    padding: 6px 14px;
    z-index: 15;
    color: #e8d5a3;
    font-size: 12px;
    box-shadow: 0 0 12px rgba(139, 105, 20, 0.3);
    font-weight: bold;
}

/* 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: #1a1a2e;
    border: 1px solid #2a2a3e;
    border-radius: 4px;
}

.companion-name {
    color: #e0d6c2;
    font-weight: bold;
    font-size: 14px;
    display: block;
    margin-bottom: 2px;
}

.companion-effect {
    color: #a09880;
    font-size: 12px;
    display: block;
    margin-bottom: 6px;
}

.companion-buy-btn {
    padding: 5px 12px;
    background: rgba(139, 105, 20, 0.15);
    color: #e8d5a3;
    border: 1px solid #8b6914;
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 12px;
}

.companion-buy-btn:hover {
    background: rgba(139, 105, 20, 0.3);
}

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

.companion-active {
    color: #4caf50;
    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 rgba(139, 105, 20, 0.3);
    background: rgba(26, 15, 8, 0.8);
    color: #a09880;
    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: rgba(139, 105, 20, 0.15);
    color: #d4c4a0;
}

.settings-tab.active {
    background: rgba(139, 105, 20, 0.2);
    border-color: #8b6914;
    color: #e8d5a3;
}

.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: #e0d6c2;
    font-size: 13px;
    min-width: 60px;
}

.settings-value {
    color: #a09880;
    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: #c8a96e;
}

/* 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: #333;
    border-radius: 22px;
    transition: 0.3s;
}

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

.settings-toggle input:checked + .toggle-slider {
    background: #2e7d32;
}

.settings-toggle input:checked + .toggle-slider::before {
    transform: translateX(18px);
    background: #4caf50;
}

/* Volume slider */
.settings-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: #333;
    border-radius: 3px;
    outline: none;
}

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

.settings-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #e0d6c2;
    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: #ff6b6b;
    border: 1px solid #5c2020;
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 13px;
}

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

#btn-settings {
    width: 72px;
    height: 34px;
    color: #a09880;
    border-color: rgba(139, 105, 20, 0.3);
    background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
}

#btn-settings:hover {
    color: #e0d6c2;
    border-color: #a09880;
}

/* 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: rgba(0, 0, 0, 0.75);
}

#confirm-box {
    position: relative;
    background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
    border: 3px solid #8b6914;
    border-radius: 4px;
    padding: 24px 32px 20px;
    width: 340px;
    max-width: 90vw;
    text-align: center;
    box-shadow:
        0 0 30px rgba(139, 105, 20, 0.4),
        inset 0 0 60px rgba(0, 0, 0, 0.5),
        0 8px 32px rgba(0, 0, 0, 0.8);
    animation: confirmAppear 0.25s ease-out;
}

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

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

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

#confirm-ornament-top {
    font-size: 22px;
    color: #c9a834;
    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: #e8d5a3;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

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

#confirm-message {
    color: #d4c4a0;
    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%, #2a0a0a 100%);
    border-color: #8b2020;
    color: #ff6347;
    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: #5a5030;
    color: #b0a880;
}

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

/* 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: rgba(0, 0, 0, 0.8);
}

#save-conflict-box {
    position: relative;
    background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
    border: 3px solid #8b6914;
    border-radius: 4px;
    padding: 24px 28px 24px;
    width: 420px;
    max-width: 92vw;
    text-align: center;
    box-shadow:
        0 0 30px rgba(139, 105, 20, 0.4),
        inset 0 0 60px rgba(0, 0, 0, 0.5),
        0 8px 32px rgba(0, 0, 0, 0.8);
    animation: confirmAppear 0.25s ease-out;
}

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

#save-conflict-title {
    color: #e8d5a3;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

#save-conflict-separator {
    width: 60%;
    height: 2px;
    margin: 10px auto 16px;
    background: linear-gradient(90deg, transparent, #8b6914, 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 #5a4a20;
    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: #c9a834;
    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: #e8d5a3;
    letter-spacing: 1px;
    text-transform: uppercase;
}

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

.save-card-stats {
    font-size: 13px;
    color: #d4c4a0;
    line-height: 1.6;
}

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

#auth-content {
    position: relative;
    background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
    border: 3px solid #8b6914;
    border-radius: 4px;
    padding: 24px 24px 20px;
    width: 320px;
    max-width: 90vw;
    box-shadow:
        0 0 30px rgba(139, 105, 20, 0.4),
        inset 0 0 60px rgba(0, 0, 0, 0.5),
        0 8px 32px rgba(0, 0, 0, 0.8);
    animation: confirmAppear 0.25s ease-out;
}

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

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

#auth-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(139, 105, 20, 0.4);
    padding-bottom: 8px;
}

#auth-tabs {
    display: flex;
    gap: 4px;
}

.auth-tab {
    padding: 6px 14px;
    background: rgba(26, 15, 8, 0.8);
    color: #a09880;
    border: 1px solid rgba(139, 105, 20, 0.3);
    border-radius: 4px 4px 0 0;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 12px;
    font-weight: bold;
}

.auth-tab.active {
    background: rgba(139, 105, 20, 0.2);
    color: #e8d5a3;
    border-color: #8b6914;
}

.auth-tab:hover:not(.active) {
    background: rgba(139, 105, 20, 0.1);
}

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

.auth-field label {
    display: block;
    color: #e0d6c2;
    font-size: 12px;
    margin-bottom: 4px;
}

.auth-field input {
    width: 100%;
    padding: 8px 10px;
    background: rgba(10, 6, 3, 0.8);
    color: #e0d6c2;
    border: 1px solid rgba(139, 105, 20, 0.3);
    border-radius: 3px;
    font-size: 13px;
    outline: none;
}

.auth-field input:focus {
    border-color: #8b6914;
}

#auth-error {
    color: #ff6b6b;
    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: #e8d5a3;
    border: 2px solid #8b6914;
    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 rgba(139, 105, 20, 0.3);
}

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

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

#welcome-content {
    position: relative;
    background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
    border: 3px solid #8b6914;
    border-radius: 4px;
    padding: 24px 32px 20px;
    width: 360px;
    max-width: 90vw;
    text-align: center;
    box-shadow:
        0 0 30px rgba(139, 105, 20, 0.4),
        inset 0 0 60px rgba(0, 0, 0, 0.5),
        0 8px 32px rgba(0, 0, 0, 0.8);
    animation: confirmAppear 0.25s ease-out;
}

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

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

#welcome-title {
    color: #e8d5a3;
    font-size: 18px;
    margin-bottom: 14px;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

#welcome-text {
    color: #e0d6c2;
    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: #c9a834;
    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: #e8d5a3;
    border: 2px solid #8b6914;
}

#welcome-register:hover {
    background: linear-gradient(180deg, #2a5a2a 0%, #1a3a1a 100%);
    box-shadow: 0 0 12px rgba(139, 105, 20, 0.3);
}

.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: rgba(139, 105, 20, 0.15);
    color: #d4c4a0;
    border: 1px solid rgba(139, 105, 20, 0.4);
    margin-bottom: 14px;
}

.welcome-login-btn:hover {
    background: rgba(139, 105, 20, 0.25);
    color: #e8d5a3;
}

.welcome-later-btn {
    background: rgba(26, 15, 8, 0.8);
    color: #a09880;
    border: 1px solid rgba(139, 105, 20, 0.2);
}

.welcome-later-btn:hover {
    background: rgba(139, 105, 20, 0.1);
}

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

#welcome-hint strong {
    color: #a09880;
}

/* Settings Auth Section */
#settings-auth-section {
    border-bottom: 1px solid rgba(139, 105, 20, 0.3);
    padding-bottom: 12px;
}

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

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

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

.auth-login-btn {
    background: rgba(139, 105, 20, 0.15);
    color: #e8d5a3;
    border-color: #8b6914;
    font-size: 12px;
    width: 100%;
}

.auth-login-btn:hover {
    background: rgba(139, 105, 20, 0.3);
}

.auth-logout-btn {
    background: #3a1a1a;
    color: #ff6b6b;
    border-color: #5c2020;
    font-size: 12px;
    width: 100%;
}

.auth-logout-btn:hover {
    background: #5c2020;
}

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

#save-indicator-text {
    font-size: 11px;
    color: #a09880;
    display: block;
    margin-bottom: 6px;
}

.save-now-btn {
    background: rgba(26, 60, 26, 0.3);
    color: #4caf50;
    border-color: rgba(76, 175, 80, 0.4);
    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 #444;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: #888;
    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: #ccc;
}

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

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

.overview-resource-row:hover {
    border-color: #c0a882;
    background: #22223a;
}

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

.overview-res-name {
    color: #e0d6c2;
    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: #4caf50;
}

.overview-res-col.negative {
    color: #f44336;
}

.overview-res-col.neutral {
    color: #888;
}

.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: #888;
    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: #c0a882;
    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: #a09880;
    font-size: 12px;
    font-weight: 600;
    border-left: 2px solid rgba(192, 168, 130, 0.3);
}

.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: #1a1a2e;
    border: 1px solid #2a2a3e;
    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: #c0a882;
    background: #22223a;
}

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

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

.overview-item-name {
    color: #e0d6c2;
    font-weight: bold;
    white-space: nowrap;
    min-width: 0;
}

.overview-item-prod {
    color: #a09880;
    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: #888;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
}

.overview-bar {
    width: 40px;
    height: 6px;
    background: #2a2a2a;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

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

.overview-icon-btn { color: #c0a882; }
.overview-icon-btn:hover { border-color: #c0a882; }

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

#overview-panel::-webkit-scrollbar-track {
    background: #1a0f08;
}

#overview-panel::-webkit-scrollbar-thumb {
    background: #8b6914;
    border-radius: 3px;
}

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

/* === Reset Camera Button === */
#btn-reset-cam {
    position: absolute;
    top: 44px;
    left: 10px;
    background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
    border: 2px solid #8b6914;
    border-radius: 3px;
    padding: 3px 8px;
    z-index: 12;
    font-size: 14px;
    color: #e0d6c2;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    box-shadow: 0 0 8px rgba(139, 105, 20, 0.2);
    transition: left 0.2s ease;
}

#btn-reset-cam:hover {
    background: rgba(139, 105, 20, 0.3);
    border-color: #ffd700;
    color: #ffd700;
}

#btn-reset-cam.sell-panel-open {
    left: 390px;
}

/* === Season HUD === */
#season-hud {
    position: absolute;
    top: 44px;
    left: 46px;
    background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
    border: 2px solid #8b6914;
    border-radius: 3px;
    padding: 4px 12px;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #e0d6c2;
    cursor: url('/img/cursor_32.png') 4 0, default;
    box-shadow: 0 0 8px rgba(139, 105, 20, 0.2);
    transition: left 0.2s ease;
}

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

#season-bar {
    width: 50px;
    height: 4px;
    background: #2a2a2a;
    border-radius: 2px;
    overflow: hidden;
}

#season-bar-fill {
    height: 100%;
    background: #4caf50;
    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, #2a1a0e 0%, #1a0f08 100%);
    border: 2px solid #8b6914;
    border-radius: 3px;
    padding: 8px 12px;
    font-size: 11px;
    color: #e0d6c2;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    line-height: 1.6;
    box-shadow: 0 0 12px rgba(139, 105, 20, 0.3), 0 4px 12px rgba(0, 0, 0, 0.6);
}

#season-tooltip .bonus-pos { color: #4caf50; }
#season-tooltip .bonus-neg { color: #ef5350; }
#season-tooltip .bonus-neutral { color: #888; }

/* === Prestige HUD === */
#prestige-hud {
    position: fixed;
    top: 54px;
    right: 92px;
    background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
    border: 2px solid #8b6914;
    border-radius: 3px;
    padding: 4px 10px;
    z-index: 12;
    font-size: 12px;
    color: #e8d5a3;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(139, 105, 20, 0.2);
}

/* === Toasts === */
#expedition-toast {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
    border: 2px solid #8b6914;
    border-radius: 3px;
    padding: 10px 24px;
    z-index: 40;
    animation: notifSlide 0.3s ease-out;
    box-shadow: 0 0 16px rgba(139, 105, 20, 0.3), 0 4px 16px rgba(0, 0, 0, 0.6);
}

#expedition-toast-text {
    color: #e8d5a3;
    font-size: 14px;
    font-weight: bold;
}

#achievement-toast {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
    border: 2px solid #8b6914;
    border-radius: 3px;
    padding: 10px 24px;
    z-index: 40;
    animation: notifSlide 0.3s ease-out;
    box-shadow: 0 0 16px rgba(139, 105, 20, 0.3), 0 4px 16px rgba(0, 0, 0, 0.6);
}

#achievement-toast-text {
    color: #e8d5a3;
    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, #2a1a0e 0%, #1a0f08 100%);
    border: 2px solid #8b6914;
    border-radius: 3px;
    padding: 10px 32px 10px 24px;
    z-index: 40;
    animation: notifSlide 0.3s ease-out;
    box-shadow: 0 0 16px rgba(139, 105, 20, 0.3), 0 4px 16px rgba(0, 0, 0, 0.6);
    white-space: pre-line;
    text-align: center;
}

#terrain-toast-text {
    color: #e8d5a3;
    font-size: 14px;
    font-weight: bold;
}

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

/* === Craft Progress Toast === */
#craft-progress-toast {
    position: fixed;
    bottom: 20px;
    right: 100px;
    background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
    border: 1px solid #8b6914;
    border-radius: 8px;
    padding: 10px 14px;
    z-index: 40;
    min-width: 200px;
    animation: craftToastSlide 0.3s ease-out;
    box-shadow: 0 0 16px rgba(139, 105, 20, 0.3), 0 4px 16px rgba(0, 0, 0, 0.6);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

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

.craft-progress-name {
    color: #e8d5a3;
    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 #555;
    min-width: 80px;
    overflow: hidden;
}

.craft-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b6914, #d4a017);
    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: 20px;
    right: 100px;
    background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
    border: 1px solid #8b6914;
    border-radius: 8px;
    padding: 10px 24px;
    z-index: 40;
    animation: craftToastSlide 0.3s ease-out;
    box-shadow: 0 0 16px rgba(139, 105, 20, 0.3), 0 4px 16px rgba(0, 0, 0, 0.6);
    transition: right 0.3s ease;
}

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

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

#craft-toast-text {
    color: #e8d5a3;
    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;
}
#tutorial-close-btn {
    margin-top: 4px;
    padding: 5px 18px;
    font-size: 12px;
}
#tutorial-banner.sell-panel-open {
    left: 388px;
}
#tutorial-banner.flash {
    border-color: #7adf5a;
    box-shadow: 0 0 20px rgba(122, 223, 90, 0.5), 0 4px 16px rgba(0, 0, 0, 0.6);
}
.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: #5a4320; background: rgba(0, 0, 0, 0.3); }
    50% { border-color: #7adf5a; 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 rgba(139, 105, 20, 0.3);
}
/* Bouton fermer tutoriel — visible uniquement en mobile */
.tutorial-dismiss {
    display: none;
    background: none;
    border: none;
    color: #8b6914;
    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: #ffd700;
    font-size: 15px;
    margin: 0;
}
#tutorial-step {
    color: #4a7a3a;
    font-size: 13px;
    font-weight: bold;
}
#tutorial-text {
    color: #d4dfc8;
    font-size: 15px;
}
#tutorial-text p {
    margin: 0 0 8px 0;
}
#tutorial-text p:last-child {
    margin-bottom: 0;
}
#tutorial-progress {
    color: #8ab87a;
    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 rgba(139, 105, 20, 0.3);
}
#lore-dialog-header h3 {
    color: #ffd700;
    font-size: 15px;
    margin: 0;
}
#lore-dialog-text {
    color: #d4dfc8;
    font-size: 15px;
    font-style: italic;
}
#lore-dialog-btn {
    align-self: flex-end;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
}

/* === 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 rgba(0, 0, 0, 0.6);
    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: calc(50% - 43px);
    transform: translateX(-50%);
    background: linear-gradient(180deg, #3a2a0e 0%, #2a1a08 100%);
    border: 2px solid #d4a017;
    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 rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    gap: 8px;
}

#milestone-toast-text {
    color: #ffd700;
    font-size: 14px;
    font-weight: bold;
}

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

#milestone-toast-close:hover {
    color: #ffd700;
}

/* === Milestones Panel === */
#milestones-panel {
    position: fixed;
    top: 44px;
    right: 94px;
    bottom: 0;
    width: 280px;
    overflow-y: hidden;
    z-index: 9;
    transform: none;
    left: auto;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
}

#milestones-panel-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 0;
    border-bottom: 1px solid #5a4320;
}
#milestones-panel-header .milestone-section-title {
    width: 100%;
    position: static;
    margin: 4px 0 0;
    padding: 0 0 6px;
}

#milestones-panel-header h3 {
    color: #ffd700;
    font-size: 16px;
    margin: 0;
}

#milestones-panel-header button {
    background: none;
    border: none;
    color: #e8d5a3;
    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 #5a4320;
    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: #1a0f08;
}
#milestones-content::-webkit-scrollbar-thumb {
    background: #8b6914;
    border-radius: 3px;
}

.milestone-section-title {
    color: #d4a017;
    font-size: 13px;
    margin: 8px 0 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, #1e120a 0%, #150d06 100%);
    padding: 4px 0;
    z-index: 1;
}

.milestone-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #5a4320;
    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: #7adf7a;
    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: #e8d5a3;
    font-size: 14px;
    margin-bottom: 2px;
}

.milestone-item.completed .milestone-header {
    color: #7adf7a;
}

.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 #5a4320;
    border-radius: 4px;
    overflow: hidden;
    margin: 4px 0;
}

.milestone-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #d4a017, #ffd700);
    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: #e8d5a3;
    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: #ffd700 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.ach-progress {
    color: #a09880;
    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: #1a1a2e;
    border: 1px solid #2a2a3e;
    border-radius: 4px;
}

.ach-item.completed {
    border-color: #4caf50;
    background: rgba(0, 100, 0, 0.15);
}

.ach-name {
    color: #e0d6c2;
    font-weight: bold;
    font-size: 13px;
    display: block;
}

.ach-desc {
    color: #a09880;
    font-size: 11px;
    display: block;
}

.ach-reward {
    color: #ffd700;
    font-size: 11px;
    display: block;
    margin-top: 2px;
}

.achievements-icon-btn { color: #ffd700; }
.achievements-icon-btn:hover { border-color: #ffd700; }

/* === 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: #1a1a2e;
    border: 1px solid #2a2a3e;
    border-radius: 4px;
    gap: 8px;
}

.seed-row.unlocked {
    border-color: #4CAF50;
    background: rgba(0, 100, 0, 0.15);
}

.seed-emoji {
    font-size: 18px;
    flex-shrink: 0;
}

.seed-name {
    color: #e0d6c2;
    font-weight: bold;
    font-size: 13px;
    flex: 1;
}

.seed-multiplier {
    color: #ffd700;
    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: #e2b714;
    font-weight: bold;
    font-size: 12px;
    padding: 4px 8px;
    border-bottom: 1px solid #3a2a18;
    margin-bottom: 4px;
}

.seed-apply-all-btn {
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid #e2b714;
    color: #e2b714;
    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: #4CAF50; }
.seeds-icon-btn:hover { border-color: #4CAF50; }

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

#seeds-panel::-webkit-scrollbar-track {
    background: #1a0f08;
}

#seeds-panel::-webkit-scrollbar-thumb {
    background: #8b6914;
    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: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    max-height: 70vh;
    padding: 16px;
    z-index: 25;
    overflow-y: auto;
}

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

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

#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: #e8d5a3;
    text-align: left;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(139, 105, 20, 0.4);
}

.market-table td {
    color: #e0d6c2;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(139, 105, 20, 0.15);
}

.market-table tr.price-high td { color: #4caf50; }
.market-table tr.price-low td { color: #f44336; }

.market-icon-btn { color: #4fc3f7; }
.market-icon-btn:hover { border-color: #4fc3f7; }

/* === 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 #555;
    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: #ccc;
}

.prestige-map-accordion.open {
    background: rgba(255, 215, 0, 0.15);
    border-color: #ffd700;
    color: #ffd700;
}

.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: #a09880;
    font-weight: 600;
}

.prestige-map-accordion.open .prestige-badge {
    color: #ffd700;
}

.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 #3a3a4e;
    border-radius: 4px;
    color: #888;
    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: #ccc;
}

.prestige-cat-header.open {
    background: rgba(255, 215, 0, 0.1);
    border-color: #b8960f;
    color: #e8d5a3;
}

.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: #e0d6c2;
    font-size: 13px;
    margin-bottom: 4px;
}

.prestige-preview {
    color: #ffd700 !important;
    font-weight: bold;
}

.prestige-bonuses h4 {
    color: #ffd700;
    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: #1a1a2e;
    border: 1px solid #2a2a3e;
    border-radius: 4px;
}

.prestige-bonus-name {
    color: #e0d6c2;
    font-size: 12px;
    flex: 1;
}

.prestige-bonus-level {
    color: #a09880;
    font-size: 11px;
    min-width: 60px;
    text-align: right;
    margin-right: 8px;
}

.prestige-maxed {
    color: #ffd700;
    font-size: 11px;
    font-weight: bold;
}
.prestige-locked {
    color: #888;
    font-size: 14px;
}

.prestige-buy-btn {
    padding: 4px 10px;
    background: rgba(139, 105, 20, 0.15);
    color: #e8d5a3;
    border: 1px solid #8b6914;
    border-radius: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    font-size: 11px;
}

.prestige-buy-btn:hover { background: rgba(139, 105, 20, 0.3); }
.prestige-buy-btn.disabled { opacity: 0.5; cursor: not-allowed; }

.prestige-reset-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #4a3f2f;
}

.prestige-reset-btn {
    width: 100%;
    padding: 10px;
    background: linear-gradient(180deg, #3a2a1a 0%, #2a1a0e 100%);
    color: #e8d5a3;
    border: 2px solid #8b6914;
    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 rgba(139, 105, 20, 0.3); }
.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: #ffd700; }
.prestige-icon-btn:hover { border-color: #ffd700; }

/* === 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: #7B68EE;
    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: #a09880;
    flex-wrap: wrap;
    gap: 4px;
}

.enchant-row.enchant-active {
    color: #7B68EE;
}

.enchant-desc {
    color: #888;
    font-size: 10px;
}

.enchant-btn {
    padding: 3px 8px;
    background: #1a1a3e;
    color: #7B68EE;
    border: 1px solid #7B68EE;
    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: #7B68EE;
    font-size: 10px;
    font-weight: bold;
}

/* === Specialization UI === */
.info-spec-section {
    margin-top: 8px;
    padding: 6px 8px;
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 4px;
}

.info-spec-header {
    color: #4caf50;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 4px;
}

.spec-bar {
    width: 100%;
    height: 4px;
    background: #2a2a2a;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.spec-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    border-radius: 2px;
    transition: width 0.5s;
}

.spec-bonus {
    color: #a09880;
    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: #1a0f08;
}

#achievements-panel::-webkit-scrollbar-thumb,
#market-panel::-webkit-scrollbar-thumb,
#prestige-content::-webkit-scrollbar-thumb {
    background: #8b6914;
    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 rgba(139, 105, 20, 0.4);
    margin-bottom: 12px;
}

#stats-panel-header h3 {
    margin: 0;
    font-size: 16px;
    color: #ffd700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.stats-section-title {
    color: #ffd700;
    font-size: 13px;
    font-weight: bold;
    margin: 14px 0 6px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(139, 105, 20, 0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.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: #1a1a2e;
    border: 1px solid #2a2a3e;
    border-radius: 4px;
    font-size: 12px;
}

.stats-row:hover {
    border-color: #c0a882;
    background: #22223a;
}

.stats-label {
    color: #e0d6c2;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stats-value {
    color: #e8d5a3;
    font-weight: bold;
    text-align: right;
}

.stats-value.gold {
    color: #ffd700;
}

.stats-value.green {
    color: #4caf50;
}

.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 #444;
    background: rgba(0,0,0,0.3);
    color: #a09880;
    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: #d4c4a0;
}

.stats-tab.active {
    background: rgba(255,215,0,0.15);
    border-color: #ffd700;
    color: #ffd700;
}

/* ===== Map Switcher ===== */
#map-switcher {
    position: absolute;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    z-index: 15;
    background: linear-gradient(180deg, #1e120a 0%, #150d06 100%);
    border-radius: 0 0 4px 4px;
    padding: 4px 8px;
    border: 2px solid #8b6914;
    border-top: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.map-tab {
    padding: 6px 16px;
    background: rgba(26, 15, 8, 0.8);
    border: 1px solid rgba(139, 105, 20, 0.3);
    border-radius: 3px;
    color: #a09880;
    font-size: 13px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    transition: all 0.2s;
}

.map-tab:hover {
    background: rgba(139, 105, 20, 0.15);
    color: #e0d6c2;
}

.map-tab.active {
    background: rgba(139, 105, 20, 0.25);
    border-color: #8b6914;
    color: #e8d5a3;
    font-weight: bold;
}

/* Icônes SVG dans les onglets de map — taille fixe 24x24 */
.map-tab .gi.map-tab-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
}
.map-tab .gi.map-tab-icon svg {
    width: 24px;
    height: 24px;
}

/* Workshop map indicator */
.map-tab[data-map="workshop"].active {
    background: rgba(139, 105, 20, 0.2);
    border-color: #8b6914;
    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: #e8d5a3;
}

#craft-panel-header h3 {
    font-size: 16px;
    margin: 0;
}

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

#craft-content {
    padding: 12px 16px;
}

.craft-item {
    background: rgba(26, 15, 8, 0.6);
    border: 1px solid rgba(139, 105, 20, 0.2);
    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: #e8d5a3;
    font-weight: bold;
    font-size: 14px;
}

.craft-item-owned {
    color: #888;
    font-size: 12px;
}

.craft-item-cost {
    color: #a09080;
    font-size: 12px;
    margin-bottom: 8px;
}

.craft-item-cost span.affordable {
    color: #4caf50;
}

.craft-item-cost span.expensive {
    color: #f44336;
}

.craft-btn {
    padding: 6px 16px;
    background: linear-gradient(180deg, #3a2a1a 0%, #2a1a0e 100%);
    border: 1px solid #8b6914;
    border-radius: 3px;
    color: #e8d5a3;
    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 rgba(139, 105, 20, 0.3);
}

.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, #2a1a0e 0%, #1a0f08 100%);
    border: 2px solid #8b6914;
    border-radius: 3px;
    padding: 4px 12px;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #ff6b35;
    cursor: url('/img/cursor_32.png') 4 0, default;
    box-shadow: 0 0 8px rgba(139, 105, 20, 0.2);
}

/* Caserne Panel */
.caserne-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}
.caserne-tab {
    flex: 1;
    padding: 6px 8px;
    background: #2a2a3e;
    border: 1px solid #4a3f2f;
    border-radius: 4px;
    color: #a09880;
    font-size: 11px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
}
.caserne-tab.active {
    background: #3a3a5e;
    color: #e0d6c2;
    border-color: #ffd700;
}
.caserne-content {
    max-height: 350px;
    overflow-y: auto;
}
.caserne-recruit {
    margin-bottom: 8px;
    padding: 6px;
    background: #2a2a3e;
    border-radius: 4px;
    color: #fff;
}
.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: #2a2a3e;
    border-radius: 3px;
    font-size: 11px;
    color: #e0d6c2;
}
.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: #ffd700 !important;
    color: #ffd700 !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 #4caf50;
    color: #e0d6c2;
}
.caserne-gear-slot.empty {
    background: #2a2a3e;
    border: 1px dashed #555;
    color: #888;
}
.slot-label {
    color: #a09880;
    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: #a09880;
    margin-bottom: 4px;
}
.caserne-gear-avail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 6px;
    background: #2a2a3e;
    border-radius: 3px;
    font-size: 11px;
    color: #e0d6c2;
    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: #2a2a3e;
    border-radius: 4px;
    margin-bottom: 8px;
}
.expedition-progress-bar {
    width: 100%;
    height: 8px;
    background: #333;
    border-radius: 4px;
    margin: 6px 0;
    overflow: hidden;
}
.expedition-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff6b35, #ffd700);
    border-radius: 4px;
    transition: width 0.5s;
}
.caserne-zones h4, .caserne-party-select h4, .caserne-log h4 {
    font-size: 11px;
    color: #a09880;
    margin-bottom: 4px;
}
.caserne-zone-btn {
    width: 100%;
    text-align: left;
    margin-bottom: 3px;
    font-size: 11px !important;
}
.caserne-zone-btn.selected {
    border-color: #ffd700 !important;
}
.zone-info {
    display: block;
    font-size: 10px;
    color: #888;
    margin-top: 2px;
}
.caserne-party-select {
    margin-top: 8px;
}
.caserne-party-warrior {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #e0d6c2;
    margin-bottom: 3px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
}
.caserne-party-power {
    font-size: 12px;
    color: #ffd700;
    margin: 6px 0;
}
.caserne-send-btn {
    width: 100%;
    background: #ff6b35 !important;
    color: #fff !important;
}
.caserne-log {
    margin-top: 8px;
    max-height: 150px;
    overflow-y: auto;
}
.caserne-log-entry {
    font-size: 10px;
    color: #a09880;
    padding: 2px 4px;
    border-bottom: 1px solid #333;
}

/* Craft tab header */
.craft-tab-header {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}
.craft-tab-btn {
    flex: 1;
    padding: 6px 8px;
    background: #2a2a3e;
    border: 1px solid #4a3f2f;
    border-radius: 4px;
    color: #a09880;
    font-size: 11px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
}
.craft-tab-btn.active {
    background: #3a3a5e;
    color: #e0d6c2;
    border-color: #ffd700;
}
.craft-item-desc {
    font-size: 10px;
    color: #888;
    margin: 2px 0;
}

/* ── Feedback Button & Panel ─────────────────────────── */
.sidebar-btn.feedback-icon-btn {
    color: #5dade2;
}

#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, #1a1510 0%, #0e0906 100%);
    border: 3px solid #8b6914;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0,0,0,0.8), 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 #8b6914;
    background: linear-gradient(180deg, #2a2015 0%, #1a1510 100%);
    cursor: url('/img/cursor_32.png') 4 0, move;
}

#feedback-panel-header h3 {
    color: #ffd700 !important;
    font-size: 14px;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

#feedback-panel-header button {
    background: none;
    border: none;
    color: #a09880;
    font-size: 20px;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
    line-height: 1;
}
#feedback-panel-header button:hover {
    color: #ffd700;
}

#feedback-form {
    padding: 16px;
}

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

.feedback-field label {
    display: block;
    color: #c0b8a0;
    font-size: 12px;
    margin-bottom: 4px;
}

.feedback-field select,
.feedback-field textarea {
    width: 100%;
    background: #1a1510;
    border: 1px solid #4a3f2f;
    border-radius: 4px;
    color: #e0d6c2;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
}
.feedback-field select:focus,
.feedback-field textarea:focus {
    outline: none;
    border-color: #8b6914;
}

#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: #8b6914;
}
#feedback-stars:hover .feedback-star {
    color: #ffd700;
}
#feedback-stars .feedback-star:hover ~ .feedback-star {
    color: #4a3f2f;
}
.feedback-star.active {
    color: #ffd700;
}

.feedback-status {
    font-size: 12px;
    min-height: 18px;
    margin-bottom: 8px;
}
.feedback-status.success {
    color: #27ae60;
}
.feedback-status.error {
    color: #c0392b;
}

#feedback-submit {
    width: 100%;
    padding: 8px;
    background: linear-gradient(180deg, #8b6914, #6b4f0e);
    border: 1px solid #a07818;
    border-radius: 4px;
    color: #e8d5a3;
    font-size: 13px;
    font-weight: 600;
    cursor: url('/img/cursor_32.png') 4 0, pointer;
}
#feedback-submit:hover {
    background: linear-gradient(180deg, #a07818, #8b6914);
}
#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 rgba(139, 105, 20, 0.4);
}
#leaderboard-panel-header h3 {
    color: #ffd700 !important;
    font-size: 15px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
#leaderboard-content {
    padding: 12px;
}
#lb-season-selector {
    margin-bottom: 10px;
}
#lb-season-select {
    width: 100%;
    padding: 6px 8px;
    background: rgba(26, 15, 8, 0.8);
    border: 1px solid rgba(139, 105, 20, 0.3);
    border-radius: 4px;
    color: #e0d6c2;
    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: rgba(26, 15, 8, 0.8);
    border: 1px solid rgba(139, 105, 20, 0.3);
    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: rgba(139, 105, 20, 0.15);
    color: #d4c4a0;
}
.lb-tab.active {
    background: rgba(139, 105, 20, 0.2);
    border-color: #8b6914;
    color: #e8d5a3;
}
#lb-my-rank {
    padding: 6px 10px;
    margin-bottom: 8px;
    background: rgba(139, 105, 20, 0.15);
    border: 1px solid rgba(139, 105, 20, 0.3);
    border-radius: 4px;
    color: #e8d5a3;
    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: rgba(139, 105, 20, 0.15);
    color: #8b6914;
    font-size: 11px;
    text-align: left;
    border-bottom: 1px solid rgba(139, 105, 20, 0.3);
    white-space: nowrap;
}
#lb-table td {
    padding: 5px 8px;
    color: #e0d6c2;
    border-bottom: 1px solid rgba(139, 105, 20, 0.1);
}
#lb-table tr:hover td {
    background: rgba(139, 105, 20, 0.08);
}
#lb-table tr.lb-me td {
    background: rgba(139, 105, 20, 0.2);
    color: #e8d5a3;
    font-weight: 600;
}
#lb-table .lb-rank {
    font-weight: 700;
    color: #8b6914;
    text-align: center;
    width: 30px;
}
#lb-table .lb-rank-1 { color: #ffd700; }
#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 rgba(139, 105, 20, 0.2);
    margin-top: 8px;
}
/* Display name in settings */
#display-name-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(139, 105, 20, 0.2);
}
.settings-input {
    background: rgba(26, 15, 8, 0.8);
    border: 1px solid rgba(139, 105, 20, 0.3);
    border-radius: 4px;
    color: #e0d6c2;
    padding: 4px 8px;
    font-size: 12px;
    width: 120px;
}
.settings-input:focus {
    outline: none;
    border-color: #8b6914;
}
.settings-status {
    font-size: 11px;
    padding: 2px 0;
    min-height: 16px;
}
.settings-status.ok { color: #27ae60; }
.settings-status.err { color: #c0392b; }

/* ===== Mobile Elements (hidden on desktop) ===== */
#mobile-nav { display: none; }
#mobile-resources { display: none; }
#mobile-more-menu button {
    background: none;
    border: none;
    color: #e0d6c2;
    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: rgba(139, 105, 20, 0.2);
}

.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 rgba(139, 105, 20, 0.3);
    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: 50;
    }
    .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-banner {
        top: auto;
        bottom: 58px;
        left: 8px;
        padding: 6px 12px;
        gap: 5px;
        width: calc(100vw - 16px);
        min-height: auto;
        max-height: 40vh;
        overflow-y: auto;
    }
    #tutorial-step { font-size: 10px; }
    #tutorial-text { font-size: 11px; }
    #tutorial-progress { font-size: 10px; }
    .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: 68px;
        left: 10px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(30, 20, 10, 0.92);
        border: 2px solid #8b6914;
        color: #ffd700;
        font-size: 22px;
        cursor: pointer;
        z-index: 30;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        padding: 0;
        line-height: 44px;
        text-align: center;
    }
    #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: 50;
    }
    #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; }

    /* --- 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;
    }

    /* --- Bottom nav --- */
    #mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        z-index: 16;
        background: linear-gradient(0deg, #1e120a, #150d06);
        border-top: 2px solid #8b6914;
        justify-content: space-around;
        align-items: center;
    }
    .mobile-nav-btn {
        background: none;
        border: none;
        color: #a09880;
        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: #ffd700;
    }
    .mobile-nav-btn {
        position: relative;
    }
    .mobile-nav-badge {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: #e2b714;
        color: #1a0f08;
        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;
    }

    /* --- 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;
    }
    .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;
    }

    /* --- 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 rgba(139, 105, 20, 0.3);
        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 #8b6914;
        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 rgba(139, 105, 20, 0.3);
        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: #fff;
        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: #4caf50; }
    .mobile-res-item .mobile-res-rate.rate-neg { color: #f44336; }
    .mobile-res-sell {
        padding: 1px 4px;
        background: #1a3a1a;
        color: #4caf50;
        border: 1px solid #4a5a4a;
        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, #2a1a0e 0%, #1a0f08 100%);
        border: 2px solid #8b6914;
        border-radius: 8px;
        z-index: 20;
        display: flex;
        flex-direction: column;
        padding: 4px;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.6);
    }
    #mobile-more-menu.hidden { display: none !important; }

    /* --- HUD overlay elements repositioned (no top HUD) --- */
    #btn-reset-cam {
        left: 42px;
        top: env(safe-area-inset-top, 4px);
    }
    #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;
    }

    /* --- Mobile Map FAB button --- */
    #mobile-map-btn {
        position: fixed;
        bottom: 56px;
        right: 8px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(180deg, #2a1a0e 0%, #1a0f08 100%);
        border: 2px solid #8b6914;
        color: #e0d6c2;
        font-size: 20px;
        z-index: 17;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        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: #ffd700;
        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, #2a1a0e 0%, #1a0f08 100%);
        border: 2px solid #8b6914;
        border-radius: 8px;
        z-index: 20;
        display: flex;
        flex-direction: column;
        padding: 4px;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.6);
        max-height: 60vh;
        overflow-y: auto;
    }
    #mobile-map-menu.hidden { display: none !important; }
    #mobile-map-menu button {
        background: none;
        border: none;
        color: #a09880;
        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: rgba(139, 105, 20, 0.15);
        color: #e0d6c2;
    }
    #mobile-map-menu button.active {
        background: rgba(139, 105, 20, 0.25);
        border: 1px solid #8b6914;
        color: #e8d5a3;
        font-weight: bold;
    }
    #expedition-hud {
        top: env(safe-area-inset-top, 4px);
        right: 4px;
    }
    #prestige-hud {
        top: env(safe-area-inset-top, 4px);
        right: 4px;
    }
    #music-controls { display: none; }
    #event-banner {
        right: 0;
        left: 38px;
    }
    #king-bonus-banner {
        right: 0;
    }

    /* --- 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,
    #king-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"] { 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: #ffd700;
    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: #ffd700;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.3);
}

/* HUD: supporter display name gold glow */
#hud-display-name.hud-supporter {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* Supporter section layout (settings) */
.supporter-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(139, 105, 20, 0.15);
    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, #ffd700 0%, #b8860b 100%);
    color: #1a0f08 !important;
    font-weight: bold;
    border: 1px solid #ffd700;
    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 #8b6914;
    margin-top: 8px;
}

/* Supporter theme overrides (applied to body.supporter-theme) */
.supporter-theme #hud {
    border-bottom-color: #ffd700;
}
.supporter-theme .medieval-panel {
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.08);
}
.supporter-theme #sidebar-menu {
    border-left-color: rgba(255, 215, 0, 0.3);
}
.supporter-theme .action-btn:not(.demolish-btn):hover {
    border-color: #ffd700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.25);
}
.supporter-theme #build-panel {
    border-top-color: rgba(255, 215, 0, 0.3);
}

/* === 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 rgba(139, 119, 82, 0.4);
    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 rgba(139, 119, 82, 0.4);
    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 #555; overflow:hidden; }
.research-progress-bar-fill { height:100%; background:linear-gradient(90deg,#5c2de0,#9c4dff); border-radius:4px; transition:width 0.15s linear; }
.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:#fff; border:1px solid #a03060; padding:3px 10px; border-radius:4px; cursor:pointer; font-size:11px; }
.tech-cancel-btn:hover { background:#a82a62; }