/* ============================================================
   Transport Empire - Styles principaux
   ============================================================ */

:root {
    --bg-dark: #0d1117;
    --bg-card: #161b22;
    --bg-card2: #1c2128;
    --border: #30363d;
    --text: #e6edf3;
    --text-dim: #8b949e;
    --accent: #2ea043;
    --accent2: #1f6feb;
    --accent3: #f78166;
    --gold: #d29922;
    --red: #da3633;
    --font-title: 'Rajdhani', sans-serif;
    --font-body: 'Inter', sans-serif;
    --radius: 8px;
    --shadow: 0 4px 24px rgba(0,0,0,0.5);
    --panel-w: 340px;
    --hud-h: 52px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    font-family: var(--font-body);
    background: var(--bg-dark);
    color: var(--text);
    overflow: hidden;
}

/* ============================
   LOGIN PAGE
   ============================ */
.login-page {
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.login-bg {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, #0d2137 0%, #0d1117 60%),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect fill="%23111" width="100" height="100"/><circle cx="20" cy="30" r="1" fill="%23ffffff10"/><circle cx="80" cy="70" r="1" fill="%23ffffff10"/><circle cx="50" cy="50" r="0.5" fill="%23ffffff08"/></svg>');
    z-index: 0;
}

.login-map-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 60%, rgba(46,160,67,0.08) 0%, transparent 50%),
        radial-gradient(circle at 70% 40%, rgba(31,111,235,0.08) 0%, transparent 50%);
}

.anim-vehicles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.anim-vehicles span {
    position: absolute;
    font-size: 28px;
    opacity: 0.15;
    animation: float linear infinite;
}
.v1 { top: 15%; animation-duration: 18s; animation-delay: 0s; left: -5%; }
.v2 { top: 40%; animation-duration: 22s; animation-delay: 4s; left: -5%; }
.v3 { top: 65%; animation-duration: 16s; animation-delay: 2s; left: -5%; }
.v4 { top: 80%; animation-duration: 25s; animation-delay: 6s; left: -5%; }
.v5 { top: 28%; animation-duration: 20s; animation-delay: 8s; left: -5%; }

@keyframes float {
    from { transform: translateX(-100px); }
    to { transform: translateX(calc(100vw + 100px)); }
}

.login-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: 20px;
}

.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px 36px;
    box-shadow: var(--shadow), 0 0 60px rgba(46,160,67,0.1);
}

.login-logo {
    text-align: center;
    margin-bottom: 28px;
}

.logo-icon {
    font-size: 52px;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 20px rgba(46,160,67,0.5));
}

.login-logo h1 {
    font-family: var(--font-title);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.login-logo h1 span {
    color: var(--accent);
}

.tagline {
    color: var(--text-dim);
    font-size: 13px;
    margin-top: 6px;
}

.tab-switch {
    display: flex;
    background: var(--bg-dark);
    border-radius: var(--radius);
    padding: 3px;
    margin-bottom: 24px;
    gap: 2px;
}

.tab-btn {
    flex: 1;
    padding: 8px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-family: var(--font-body);
    transition: all 0.2s;
}

.tab-btn.active {
    background: var(--accent2);
    color: white;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 6px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.form-group input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-body);
    transition: border-color 0.2s;
    outline: none;
}

.form-group input:focus {
    border-color: var(--accent2);
}

.btn-primary {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--accent) 0%, #238636 100%);
    border: none;
    border-radius: var(--radius);
    color: white;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-title);
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(46,160,67,0.4);
}

.login-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
    justify-content: center;
}

.feature-item {
    font-size: 11px;
    color: var(--text-dim);
    background: var(--bg-dark);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
}

.alert {
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    margin-bottom: 16px;
}

.alert-error {
    background: rgba(218,54,51,0.15);
    border: 1px solid var(--red);
    color: #ff7b72;
}

.alert-success {
    background: rgba(46,160,67,0.15);
    border: 1px solid var(--accent);
    color: #7ee787;
}

/* ============================
   GAME PAGE
   ============================ */
.game-page {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#map {
    position: absolute;
    top: var(--hud-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* ============================
   HUD TOP
   ============================ */
.hud-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--hud-h);
    background: rgba(13,17,23,0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 12px;
    z-index: 1000;
    gap: 12px;
}

.hud-logo {
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hud-logo span { color: var(--text); }

.hud-stats {
    display: flex;
    gap: 6px;
    flex: 1;
    justify-content: center;
    overflow: hidden;
}

.hud-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 13px;
    white-space: nowrap;
}

.stat-icon { font-size: 14px; }
.stat-val { font-weight: 600; font-family: var(--font-title); font-size: 14px; }

#hud-money .stat-val { color: var(--gold); }

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

.hud-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--text);
    cursor: pointer;
    font-size: 14px;
    position: relative;
    transition: background 0.2s;
}

.hud-btn:hover { background: var(--bg-card2); }

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--red);
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* ============================
   LEFT TOOLBAR
   ============================ */
.toolbar-left {
    position: fixed;
    left: 10px;
    top: calc(var(--hud-h) + 10px);
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(13,17,23,0.9);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
}

.tool-btn {
    width: 38px;
    height: 38px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.tool-btn:hover, .tool-btn[data-active="true"] {
    background: var(--bg-card2);
    border-color: var(--accent2);
    color: var(--text);
}

.tool-sep {
    height: 1px;
    background: var(--border);
    margin: 2px 0;
}

/* ============================
   SPEED CONTROLS
   ============================ */
.speed-controls {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    display: flex;
    gap: 4px;
    background: rgba(13,17,23,0.9);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px;
}

.speed-btn {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 12px;
    font-family: var(--font-title);
    font-weight: 600;
    transition: all 0.2s;
}

.speed-btn:hover { background: var(--bg-card2); color: var(--text); }
.speed-btn.active {
    background: var(--accent2);
    color: white;
    border-color: var(--accent2);
}

/* ============================
   RIGHT PANEL
   ============================ */
.right-panel {
    position: fixed;
    top: var(--hud-h);
    right: 0;
    width: var(--panel-w);
    height: calc(100vh - var(--hud-h));
    background: rgba(13,17,23,0.96);
    backdrop-filter: blur(12px);
    border-left: 1px solid var(--border);
    z-index: 600;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.right-panel.open { display: flex; }

.panel-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.panel-close {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

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

.panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.panel-body::-webkit-scrollbar { width: 4px; }
.panel-body::-webkit-scrollbar-track { background: transparent; }
.panel-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ============================
   BUILD MENU
   ============================ */
.build-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.build-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.build-item:hover {
    border-color: var(--accent2);
    background: var(--bg-card2);
    transform: translateY(-1px);
}

.build-item-icon { font-size: 28px; margin-bottom: 6px; }
.build-item-name { font-size: 11px; font-weight: 600; color: var(--text); }
.build-item-cost { font-size: 10px; color: var(--gold); margin-top: 3px; }
.build-item-maint { font-size: 9px; color: var(--text-dim); }

/* ============================
   MODAL
   ============================ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 900;
}

.modal-overlay.open { display: block; }

.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 901;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: calc(100% - 32px);
    max-width: 520px;
    max-height: calc(100vh - 80px);
    overflow: hidden;
    flex-direction: column;
    box-shadow: var(--shadow);
}

.modal.open { display: flex; }

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-title);
    font-size: 17px;
    font-weight: 700;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 18px;
    padding: 2px 6px;
    transition: all 0.2s;
    border-radius: 4px;
}
.modal-close:hover { background: var(--bg-card2); color: var(--text); }

.modal-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

/* ============================
   VEHICLE CATALOGUE
   ============================ */
.vehicle-card {
    background: var(--bg-card2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.vehicle-card:hover {
    border-color: var(--accent2);
}

.vehicle-icon { font-size: 32px; min-width: 40px; text-align: center; }

.vehicle-info { flex: 1; min-width: 0; }
.vehicle-name { font-weight: 700; font-size: 14px; font-family: var(--font-title); }
.vehicle-model { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
.vehicle-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    font-size: 11px;
}
.vstat { color: var(--text-dim); }
.vstat strong { color: var(--text); }
.vehicle-price {
    font-family: var(--font-title);
    font-size: 15px;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
}

/* ============================
   LINE MANAGER
   ============================ */
.line-item {
    background: var(--bg-card2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.line-item:hover { border-color: var(--accent2); }

.line-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.line-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.line-name { font-weight: 600; font-size: 14px; }
.line-type { font-size: 11px; color: var(--text-dim); }
.line-status {
    margin-left: auto;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
}
.status-active { background: rgba(46,160,67,0.2); color: var(--accent); }
.status-inactive { background: rgba(218,54,51,0.2); color: var(--red); }
.status-draft { background: rgba(210,153,34,0.2); color: var(--gold); }

.line-stats {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--text-dim);
}

/* ============================
   POPUP LEAFLET CUSTOM
   ============================ */
.te-popup {
    font-family: var(--font-body);
    min-width: 200px;
}

.te-popup h3 {
    font-family: var(--font-title);
    font-size: 15px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.te-popup .popup-stat {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 2px 0;
    color: #555;
}

.te-popup .popup-stat strong { color: #222; }

.te-popup .popup-actions {
    margin-top: 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.te-popup .popup-btn {
    flex: 1;
    padding: 6px 8px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
    min-width: 80px;
}

.popup-btn-primary { background: #2ea043; color: white; }
.popup-btn-danger { background: #da3633; color: white; }
.popup-btn-info { background: #1f6feb; color: white; }

/* ============================
   TOAST
   ============================ */
#toastContainer {
    position: fixed;
    bottom: 70px;
    right: 16px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 300px;
}

.toast {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    font-size: 13px;
    animation: slideIn 0.3s ease;
    box-shadow: var(--shadow);
}

.toast-success { border-left: 3px solid var(--accent); }
.toast-error { border-left: 3px solid var(--red); }
.toast-info { border-left: 3px solid var(--accent2); }
.toast-gold { border-left: 3px solid var(--gold); }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ============================
   FORMS INSIDE PANELS
   ============================ */
.field-group { margin-bottom: 14px; }

.field-group label {
    display: block;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 5px;
    font-weight: 500;
}

.field-group input,
.field-group select,
.field-group textarea {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 13px;
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.2s;
}

.field-group input:focus,
.field-group select:focus {
    border-color: var(--accent2);
}

.field-group select option { background: var(--bg-card); }

.btn {
    padding: 9px 18px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-title);
    letter-spacing: 0.5px;
    transition: all 0.2s;
}

.btn-success { background: var(--accent); color: white; }
.btn-success:hover { background: #238636; }
.btn-danger { background: var(--red); color: white; }
.btn-info { background: var(--accent2); color: white; }
.btn-info:hover { background: #1558c0; }
.btn-secondary { background: var(--bg-card2); color: var(--text); border: 1px solid var(--border); }
.btn-gold { background: var(--gold); color: var(--bg-dark); }
.btn-full { width: 100%; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-group { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* ============================
   STATS / FINANCES
   ============================ */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.stat-card {
    background: var(--bg-card2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    text-align: center;
}

.stat-card .sc-icon { font-size: 24px; margin-bottom: 4px; }
.stat-card .sc-val {
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: 700;
    color: var(--gold);
}
.stat-card .sc-label { font-size: 11px; color: var(--text-dim); }

.section-title {
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    margin-top: 16px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

/* ============================
   COLOR PICKER LINE
   ============================ */
.color-picker-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.color-swatch.selected,
.color-swatch:hover {
    transform: scale(1.2);
    border-color: white;
}

/* ============================
   LEADERBOARD
   ============================ */
.leader-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--bg-card2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 6px;
}

.leader-rank {
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 700;
    width: 28px;
    text-align: center;
}

.rank-1 { color: #ffd700; }
.rank-2 { color: #c0c0c0; }
.rank-3 { color: #cd7f32; }

.leader-name { flex: 1; font-weight: 600; font-size: 14px; }
.leader-money { font-family: var(--font-title); color: var(--gold); font-size: 13px; }

/* ============================
   PRICE HELP BOX
   ============================ */
.price-guide {
    background: rgba(210,153,34,0.1);
    border: 1px solid rgba(210,153,34,0.3);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 12px;
    margin-top: 4px;
}

.price-guide .pg-row {
    display: flex;
    justify-content: space-between;
    padding: 1px 0;
    color: var(--text-dim);
}

.price-guide .pg-row strong { color: var(--gold); }

/* ============================
   MAP custom markers
   ============================ */
.marker-icon {
    font-size: 20px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.vehicle-marker {
    font-size: 16px;
    transition: left 0.5s linear, top 0.5s linear;
}

/* ============================
   CITY SEARCH
   ============================ */
.city-search-box {
    position: fixed;
    top: calc(var(--hud-h) + 10px);
    right: 10px;
    z-index: 500;
    display: flex;
    gap: 4px;
}

.city-search-box input {
    padding: 7px 12px;
    background: rgba(13,17,23,0.92);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 13px;
    width: 180px;
    outline: none;
    font-family: var(--font-body);
    backdrop-filter: blur(8px);
}

.city-search-box input::placeholder { color: var(--text-dim); }

.city-search-box button {
    padding: 7px 10px;
    background: rgba(13,17,23,0.92);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
    font-size: 14px;
    backdrop-filter: blur(8px);
    transition: background 0.2s;
}

.city-search-box button:hover { background: var(--bg-card2); }

/* ============================
   NEW PLAYER WELCOME
   ============================ */
.welcome-steps {
    counter-reset: step;
}

.welcome-step {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: flex-start;
}

.step-num {
    counter-increment: step;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

.step-text strong { display: block; font-size: 13px; margin-bottom: 2px; }
.step-text span { font-size: 12px; color: var(--text-dim); }

/* ============================
   PROGRESS BAR
   ============================ */
.progress-bar {
    height: 4px;
    background: var(--bg-dark);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s;
}

/* ============================
   RESPONSIVE MOBILE
   ============================ */
@media (max-width: 600px) {
    :root { --panel-w: 100vw; }

    .hud-logo span { display: none; }
    .hud-stat:nth-child(3) { display: none; }

    .right-panel {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 60vh;
        border-left: none;
        border-top: 1px solid var(--border);
        border-radius: 16px 16px 0 0;
    }

    .toolbar-left {
        flex-direction: row;
        left: 50%;
        top: auto;
        bottom: 16px;
        transform: translateX(-50%);
        border-radius: 20px;
    }

    .tool-sep {
        width: 1px;
        height: auto;
        align-self: stretch;
        margin: 0 2px;
    }

    .speed-controls { bottom: 76px; }

    .modal {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 80vh;
    }

    .city-search-box { display: none; }

    .build-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ============================
   V2 - NOUVELLES FONCTIONNALITÉS
   ============================ */

/* Bouton gold */
.btn-gold {
    background: linear-gradient(135deg, var(--gold) 0%, #b8860b 100%);
    color: var(--bg-dark);
    font-weight: 700;
}
.btn-gold:hover { filter: brightness(1.1); }

/* Weather widget dans HUD */
#weatherWidget {
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    transition: all 0.2s;
}
#weatherWidget:hover { transform: scale(1.2); }

/* Contrats progress */
.contract-card {
    background: var(--bg-card2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 10px;
    transition: border-color 0.2s;
}
.contract-card.completed { border-color: var(--accent); }
.contract-card.expiring { border-color: var(--red); }

/* Achievement badge */
.achievement-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(210,153,34,0.2);
    border: 1px solid var(--gold);
    color: var(--gold);
    animation: achPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes achPop {
    0% { transform: scale(0) rotate(-10deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Toast gold */
.toast-gold {
    border-left: 3px solid var(--gold);
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(210,153,34,0.1) 100%);
}

/* Loan card */
.loan-card {
    background: var(--bg-card2);
    border: 1px solid var(--red);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 8px;
}

/* Stat mini bar */
.mini-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.mini-bar-fill {
    flex: 1;
    height: 8px;
    background: var(--bg-dark);
    border-radius: 4px;
    overflow: hidden;
}
.mini-bar-inner {
    height: 100%;
    border-radius: 4px;
    background: var(--accent2);
    transition: width 0.5s;
}

/* Notification toast améliorée */
.toast {
    cursor: pointer;
    transition: all 0.2s;
}
.toast:hover { transform: translateX(-4px); }

/* Weather incident banner */
.incident-banner {
    position: fixed;
    top: calc(var(--hud-h) + 4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 800;
    background: rgba(218,54,51,0.9);
    backdrop-filter: blur(8px);
    border: 1px solid var(--red);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    animation: slideDown 0.3s ease;
    white-space: nowrap;
}

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

/* Toolbar responsive étendue */
@media (max-width: 600px) {
    .toolbar-left {
        overflow-x: auto;
        max-width: 90vw;
        scrollbar-width: none;
    }
    .toolbar-left::-webkit-scrollbar { display: none; }
}

/* Repair button */
.btn-repair {
    background: linear-gradient(135deg, #e67e22, #d35400);
    color: white;
}

/* Satisfaction indicator */
.satisfaction-bar {
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--bg-dark);
    margin-top: 4px;
}