/* FlyMacroPilot Cockpit Styles */

/* Body - Fixed viewport to prevent scrolling - v1.9.16 STRIPPED */
/* BARE MINIMUM: Just the Cockpit.png background image, nothing else */
/* Andrew's request: "use just the cockpit image for the next round" */
.cockpit-body {
    margin: 0;
    padding: 0;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    /* v1.9.26: Background removed - now using layered cockpit system */
    /* Sky shows through transparent cockpit PNG */
    background-color: #0a1628; /* Fallback color */
    color: #e0e0e0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    display: flex;
    flex-direction: column;
}

/* AUTO-FIT VIEWPORT SCALING - v1.9.12 Enhanced */
/* Automatically scales UI to fit any screen without manual zoom */

@media (max-height: 900px) {
    .cockpit-body { font-size: 0.95rem; }
    .gauges-row { gap: 20px; }
    .gauge-container { transform: scale(0.9); }
    .panel-center { padding-top: calc(42vh - 185px); }
}

@media (max-height: 800px) {
    .cockpit-body { font-size: 0.9rem; }
    .gauges-row { gap: 15px; }
    .gauge-container { transform: scale(0.8); }
    .panel { padding: 10px; }
    .cockpit-header { padding: 6px 12px; }
    .panel-center { padding-top: calc(42vh - 175px); }
}

@media (max-height: 700px) {
    .cockpit-body { font-size: 0.85rem; }
    .gauges-row { gap: 12px; }
    .gauge-container { transform: scale(0.7); }
    .panel { padding: 8px; }
    .cockpit-header { padding: 5px 10px; }
    .ticker-bar { height: 28px; font-size: 0.75rem; }
    .yoke-bottom-fixed { bottom: 4%; }
    .panel-center { padding-top: calc(42vh - 160px); }
}

@media (max-height: 600px) {
    .cockpit-body { font-size: 0.8rem; }
    .gauge-container { transform: scale(0.6); }
    .panel { padding: 6px; }
    .ticker-bar { height: 24px; }
    .cockpit-footer { padding: 5px 10px; }
    .yoke-bottom-fixed { bottom: 3%; }
    .yoke-image { width: 120px; height: 120px; }
    .panel-center { padding-top: calc(44vh - 140px); }
}

@media (max-height: 500px) {
    .cockpit-body { font-size: 0.75rem; }
    .gauge-container { transform: scale(0.5); }
    .ticker-bar { display: none; } /* Hide tickers on very small screens */
    .yoke-bottom-fixed { bottom: 2%; }
    .yoke-image { width: 100px; height: 100px; }
    .panel-center { padding-top: 20px; } /* compact, just show gauges */
}

/* Width-based scaling for narrow screens */
@media (max-width: 1200px) {
    .cockpit-main { grid-template-columns: 1fr 200px; }
}

@media (max-width: 900px) {
    .cockpit-main { grid-template-columns: 1fr 180px; gap: 8px; }
    .gauge-container { transform: scale(0.75); }
}

@media (max-width: 700px) {
    .cockpit-main { grid-template-columns: 1fr; }
    .panel-right { display: none; } /* Hide sidebar on mobile */
}

/* Header */
.cockpit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    background: rgba(0,0,0,0.7);
    border-bottom: 1px solid rgba(0,255,136,0.3);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.logo-mini {
    font-size: 1.2rem;
    font-weight: bold;
    color: #00ff88;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-mini img {
    height: 32px;
    width: auto;
}

.logo-mini:hover {
    text-shadow: 0 0 10px rgba(0,255,136,0.5);
}

.quarter-display {
    text-align: center;
}

.quarter-label {
    font-size: 0.7rem;
    color: #888;
    display: block;
}

.quarter-value {
    font-size: 1.4rem;
    font-weight: bold;
    color: #00ff88;
}

.progress-bar {
    width: 200px;
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    margin-top: 5px;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00ff88, #00cc6a);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.progress-text {
    position: absolute;
    right: -40px;
    top: -2px;
    font-size: 0.8rem;
    color: #888;
}

/* ==========================================
   SCROLLING TICKER BARS - v1.7
   News + Forex/Markets in single scrolling lines
   ========================================== */

.ticker-bar {
    background: rgba(0,0,0,0.6);
    padding: 6px 0;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
}

.news-ticker-bar {
    border-bottom: 1px solid rgba(255,200,0,0.3);
}

.forex-ticker-bar {
    border-bottom: 1px solid rgba(100,150,255,0.3);
    background: rgba(0,0,0,0.5);
}

.ticker-scroll {
    display: inline-flex;
    gap: 30px;
    padding-left: 100%;
    animation: ticker-scroll 160s linear infinite; /* v1.9.17: Slowed another 50% - was 80s, now 160s */
}

.news-ticker-bar .ticker-scroll {
    animation-duration: 180s; /* v1.9.17: Slowed another 50% - was 90s, now 180s */
}

.forex-ticker-bar .ticker-scroll {
    animation-duration: 200s; /* v1.9.17: Slowed another 50% - was 100s, now 200s */
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Duplicate content for seamless loop */
.ticker-scroll::after {
    content: attr(data-duplicate);
    display: inline-flex;
    gap: 30px;
    padding-left: 30px;
}

.ticker-item {
    font-size: 0.85rem;
    color: #e0e0e0;
    white-space: nowrap;
}

.news-ticker-bar .ticker-item {
    color: #ffc800;
}

.forex-ticker-bar .ticker-item {
    color: #a0c4ff;
}

.ticker-sep {
    color: #444;
    margin: 0 10px;
}

/* Pause on hover */
.ticker-bar:hover .ticker-scroll {
    animation-play-state: paused;
}

.currency-item {
    font-size: 0.85rem;
    color: #a0c4ff;
    white-space: nowrap;
}

.cur-value {
    font-weight: bold;
    color: #e0e0e0;
}

.cur-change {
    font-size: 0.75rem;
    margin-left: 4px;
}

.cur-change.up {
    color: #ff6b6b;
}

.cur-change.down {
    color: #51cf66;
}

.cur-change.neutral {
    color: #888;
}

/* Main Layout - Flex to fill available space */
/* v1.9.7: Two-column layout - center panel has yoke + gauges, right panel has status */
.cockpit-main {
    display: grid;
    grid-template-columns: 1fr 220px;
    grid-template-rows: 1fr;   /* gives grid items a defined height = fills parent */
    gap: 10px;
    padding: 10px;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    height: 100%;              /* ensures grid fills flex parent */
}

/* v1.9.16: STRIPPED TO BARE COCKPIT IMAGE */
/* Andrew's request: "use just the cockpit image - hold the yoke and view pictures out" */
/* NUCLEAR KILL v3 - ALL OVERLAYS INCLUDING YOKE */
.yoke-center-container,
.yoke-wheel,
.yoke-hub,
.yoke-spoke,
.yoke-bottom-fixed,
#yoke-control,
.yoke-image-wrapper,
.yoke-image,
.yoke-label,
.yoke-rate-display,
.yoke-zone,
.yoke-buttons,
.throttle-container,
.throttle-track,
.throttle-handle,
.throttle-quadrant,
.throttle-zones,
.throttle-markings,
.yoke-wheel::before,
.yoke-wheel::after,
.horizon-container,
.horizon-display,
.horizon-line,
.horizon-indicator,
.horizon-text,
.horizon-clouds,
.horizon-sun,
.horizon-runway,
.horizon-label,
.cloud,
.cloud-1,
.cloud-2,
.cloud-3,
.weather-sunny,
.weather-cloudy,
.weather-stormy,
.flight-path-container,
.flight-path-svg,
.altitude-indicator,
.altitude-label,
.altitude-value,
.flight-status,
.goldilocks-zone,
.plane-icon,
.pressure-container,
.pressure-meter,
.pressure-fill,
.pressure-indicators,
.pressure-label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.panel {
    background: rgba(0,0,0,0.6);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    position: relative;
    z-index: 5;
}

/* Left Panel - Throttle */
.panel-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fed-status {
    text-align: center;
    padding: 15px;
    background: rgba(0,0,0,0.4);
    border-radius: 8px;
}

.fed-label {
    font-size: 0.7rem;
    color: #888;
    margin-bottom: 5px;
}

.fed-current {
    font-size: 2rem;
    font-weight: bold;
    color: #00ff88;
}

.fed-change {
    font-size: 0.9rem;
    color: #888;
}

.fed-change.up { color: #ff4444; }
.fed-change.down { color: #44ff44; }

/* Center Panel - Gauges - TRANSPARENT to show cockpit */
.panel-center {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    /* Push gauges down into cockpit instrument panel slots.
       42vh aligns gauge centers with cockpit image gauge faces.
       Subtract header+tickers (~115px) + half gauge height (80px). */
    padding-top: calc(42vh - 195px);
    padding-bottom: 8px;
    justify-content: flex-start;
}

.gauges-row {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.gauge-container {
    text-align: center;
}

/* v1.9.31: Needle gauge SVG — responsive sizing */
.needle-gauge-svg {
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
    overflow: visible; /* allow tick marks outside viewBox */
    /* Scale gauge to fit cockpit slot at all viewport sizes */
    width: clamp(110px, 12vw, 165px) !important;
    height: clamp(110px, 12vw, 165px) !important;
    will-change: transform; /* GPU-accelerated needle movement */
}

/* Needle smooth animation — ensure will-change on needle element */
.needle-gauge-svg [id$="-needle"] {
    will-change: transform;
    backface-visibility: hidden;
}

.gauge-subtitle {
    font-size: 0.75rem;
    color: #666;
    margin-top: 5px;
}

/* Horizon Display */
.horizon-container {
    text-align: center;
}

.horizon-label {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 10px;
}

.horizon-display {
    width: 100%;
    height: 120px;
    background: linear-gradient(180deg, 
        #87CEEB 0%,
        #6BB8E8 30%,
        #5BA3D9 60%, 
        #3A8AC7 100%);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.2);
}

/* No pseudo-elements - keep it clean */

.horizon-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: #00ff88;
    top: 50%;
    transform: translateY(-50%);
    transition: top 0.5s ease;
}

.horizon-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    padding: 5px 15px;
    border-radius: 4px;
}

.horizon-text {
    color: #00ff88;
    font-weight: bold;
    font-size: 0.9rem;
}

.horizon-text.recession { color: #ff4444; }
.horizon-text.boom { color: #44ff44; }
.horizon-text.crisis { color: #ff0000; }

/* Commodity Mini Gauges */
.gauges-commodities {
    justify-content: space-around;
}

.mini-gauge-container {
    text-align: center;
    padding: 10px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    min-width: 80px;
}

/* Right Panel */
.panel-right {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pressure-container, .events-container, .advisor-container, .leader-container {
    background: rgba(0,0,0,0.4);
    border-radius: 8px;
    padding: 12px;
}

/* Leader Voice Panel */
.leader-container {
    border: 1px solid rgba(255,100,100,0.2);
}

.leader-label {
    font-size: 0.6rem; /* v1.9.18: Reduced for compact display */
    color: #888;
    margin-bottom: 4px; /* Reduced margin */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.leader-quote-box {
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    padding: 6px 8px; /* v1.9.18: Reduced padding for compact display */
    border-left: 3px solid #ff6b6b;
}

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

.leader-icon {
    font-size: 1.2rem;
}

/* Avatar images for leaders */
.leader-avatar-img {
    width: 32px; /* v1.9.18: Reduced from 48px for compact display */
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ff6b6b;
    box-shadow: 0 0 10px rgba(255,107,107,0.3);
}

.advisor-avatar-img {
    width: 28px; /* v1.9.18: Reduced from 40px for compact display */
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #4a9eff;
    box-shadow: 0 0 10px rgba(74,158,255,0.3);
}

.leader-name {
    font-size: 0.7rem; /* v1.9.18: Reduced from 0.8rem for compact display */
    font-weight: bold;
    color: #ff6b6b;
}

.leader-quote {
    font-size: 0.7rem; /* v1.9.18: Reduced from 0.85rem - Andrew: "Pres comments are too large" */
    font-style: italic;
    color: #ccc;
    line-height: 1.3;
}

/* Leader quote pressure states */
.leader-quote-box.low-pressure {
    border-left-color: #51cf66;
}

.leader-quote-box.low-pressure .leader-name {
    color: #51cf66;
}

.leader-quote-box.medium-pressure {
    border-left-color: #ffc800;
}

.leader-quote-box.medium-pressure .leader-name {
    color: #ffc800;
}

.leader-quote-box.high-pressure {
    border-left-color: #ff4444;
    animation: pressure-pulse 2s infinite;
}

.leader-quote-box.high-pressure .leader-name {
    color: #ff4444;
}

@keyframes pressure-pulse {
    0%, 100% { background: rgba(255,0,0,0.1); }
    50% { background: rgba(255,0,0,0.2); }
}

.pressure-label, .events-label, .advisor-label {
    font-size: 0.7rem;
    color: #888;
    margin-bottom: 8px;
}

.pressure-meter {
    height: 10px;
    background: rgba(255,255,255,0.1);
    border-radius: 5px;
    overflow: hidden;
}

.pressure-fill {
    height: 100%;
    background: linear-gradient(90deg, #44ff44, #ffff44, #ff4444);
    transition: width 0.5s ease;
}

.pressure-indicators {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: #666;
    margin-top: 4px;
}

.events-list {
    max-height: 120px;
    overflow-y: auto;
}

.event-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.8rem;
}

.event-icon {
    font-size: 1rem;
}

.advisor-message {
    font-style: italic;
    font-size: 0.7rem; /* v1.9.18: Reduced from 0.85rem for compact display */
    color: #aaa;
    line-height: 1.3;
}

/* Advisor panel with avatar */
.advisor-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.advisor-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.advisor-name {
    font-size: 0.8rem;
    font-weight: bold;
    color: #4a9eff;
}

/* Tooltip System */
.tooltip-container {
    position: relative;
    cursor: help;
}

.gauge-tooltip {
    font-size: 0.65rem;
    color: #4a9eff;
    margin-top: 3px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.tooltip-container:hover .gauge-tooltip {
    opacity: 1;
}

.tooltip-container::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.95);
    color: #e0e0e0;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.4;
    width: 280px;
    text-align: left;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    border: 1px solid #00ff88;
    box-shadow: 0 4px 20px rgba(0,255,136,0.2);
}

.tooltip-container:hover::after {
    opacity: 1;
    visibility: visible;
    bottom: calc(100% + 10px);
}

/* Footer Controls - Sticky at bottom, not fixed */
.cockpit-footer {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 8px 15px;
    background: rgba(0,0,0,0.98);
    border-top: 2px solid rgba(0,255,136,0.3);
    flex-shrink: 0;
}

.control-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: #e0e0e0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.control-btn:hover {
    background: rgba(255,255,255,0.2);
}

.control-btn.btn-primary {
    background: rgba(0,255,136,0.2);
    border-color: #00ff88;
    color: #00ff88;
}

.control-btn.btn-primary:hover {
    background: rgba(0,255,136,0.3);
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 1px solid rgba(0,255,136,0.3);
    border-radius: 15px;
    padding: 25px;
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
    text-align: center;
}

.modal-wide {
    max-width: 650px;
    max-height: 90vh;
}

/* Game Over Modal - v1.9.17 ensure ALL elements visible and fit */
#gameover-modal .modal-content {
    padding: 12px 18px;
    max-height: 90vh;  /* v1.9.17: More vertical space */
    max-width: 600px;  /* v1.9.17: Wider modal */
    display: flex;
    flex-direction: column;
    overflow-y: auto;  /* v1.9.17: Allow scroll if needed */
}

#gameover-modal .gameover-grade {
    font-size: 2rem;  /* v1.9.17: Slightly smaller grade */
    margin: 3px 0;
    flex-shrink: 0;
}

#gameover-modal .gameover-subtitle {
    font-size: 0.85rem;  /* v1.9.17: Smaller subtitle */
    margin-bottom: 4px;
    flex-shrink: 0;
}

#gameover-modal .gameover-score {
    font-size: 1.1rem;  /* v1.9.17: Smaller score */
    margin-bottom: 6px;
    flex-shrink: 0;
}

#gameover-modal .gameover-badges {
    max-height: 50px;  /* v1.9.17: Compact badges */
    overflow-y: auto;
    margin-bottom: 6px;
    flex-shrink: 1;
}

#gameover-modal .gameover-stats {
    max-height: 150px;  /* v1.9.17: More space for stats */
    overflow-y: auto;
    flex-shrink: 1;
    min-height: 0;
    font-size: 0.8rem;  /* v1.9.17: Smaller text */
}

#gameover-modal .gameover-feedback {
    padding: 10px;
    margin: 8px 0;
}

#gameover-modal .gameover-advice {
    padding: 10px;
    margin: 8px 0;
    font-size: 0.8rem;
}

/* Historical grade comparison panel */
#gameover-modal .historical-grade-section {
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #4a3a1a;
    border-radius: 4px;
    background: rgba(40, 30, 10, 0.5);
    font-size: 0.8rem;
}
#gameover-modal .hist-rating {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 6px;
    color: #d4a843;
}
#gameover-modal .hist-table {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2px 8px;
    margin-bottom: 6px;
}
#gameover-modal .hist-row { display: contents; }
#gameover-modal .hist-header span { font-weight: bold; color: #888; font-size: 0.7rem; border-bottom: 1px solid #444; padding-bottom: 2px; }
#gameover-modal .hist-metric { color: #aaa; }
#gameover-modal .hist-you { color: #7ec8e3; }
#gameover-modal .hist-them { color: #e3a07e; }
#gameover-modal .hist-verdict {
    font-style: italic;
    color: #888;
    font-size: 0.75rem;
    border-top: 1px solid #333;
    padding-top: 5px;
}

#gameover-modal .leaderboard-section {
    padding: 10px;
    margin: 8px 0;
    font-size: 0.8rem;
}

#gameover-modal .gameover-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
}

#gameover-modal .gameover-buttons .modal-btn {
    padding: 6px 14px;  /* v1.9.17: Compact buttons */
    font-size: 0.75rem;
}

/* v1.9.17: Responsive adjustments for smaller screens */
@media (max-height: 700px) {
    #gameover-modal .modal-content {
        padding: 8px 12px;
        max-height: 95vh;
    }
    #gameover-modal .gameover-grade {
        font-size: 1.5rem;
    }
    #gameover-modal .gameover-stats {
        max-height: 100px;
        font-size: 0.7rem;
    }
    #gameover-modal .gameover-buttons .modal-btn {
        padding: 5px 10px;
        font-size: 0.7rem;
    }
}

.modal-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.modal-title {
    font-size: 1.5rem;
    color: #00ff88;
    margin-bottom: 15px;
}

.modal-description {
    color: #aaa;
    margin-bottom: 20px;
}

.modal-btn {
    padding: 12px 30px;
    background: linear-gradient(135deg, #00ff88, #00cc6a);
    border: none;
    border-radius: 6px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.modal-btn:hover {
    transform: scale(1.05);
}

.modal-btn.btn-secondary {
    background: rgba(255,255,255,0.1);
    color: #e0e0e0;
    margin-left: 10px;
}

/* Game Over Specifics */
.gameover-grade {
    font-size: 5rem;
    font-weight: bold;
    color: #00ff88;
}

.gameover-subtitle {
    font-size: 1.2rem;
    color: #888;
    margin-bottom: 10px;
}

.gameover-score {
    font-size: 2rem;
    color: #ffc800;
    margin-bottom: 20px;
}

.gameover-badges {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Feedback System */
.gameover-feedback {
    text-align: left;
    margin: 20px 0;
    padding: 15px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
}

.feedback-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
}

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

.feedback-item.success {
    color: #51cf66;
}

.feedback-item.warning {
    color: #ffc800;
}

.feedback-item.danger {
    color: #ff6b6b;
}

.feedback-icon {
    font-size: 1.2rem;
}

/* Advice Section */
.gameover-advice {
    text-align: left;
    margin-top: 20px;
    padding: 15px;
    background: rgba(0,100,255,0.1);
    border: 1px solid rgba(0,150,255,0.3);
    border-radius: 8px;
}

.advice-header {
    font-size: 1rem;
    font-weight: bold;
    color: #4a9eff;
    margin-bottom: 10px;
}

.advice-item {
    font-size: 0.85rem;
    color: #ccc;
    margin: 8px 0;
    line-height: 1.5;
}

.advice-item strong {
    color: #fff;
}

/* Leaderboard */
.leaderboard-section {
    margin-top: 20px;
    padding: 15px;
    background: rgba(255,200,0,0.1);
    border: 1px solid rgba(255,200,0,0.3);
    border-radius: 8px;
}

.leaderboard-header {
    font-size: 1rem;
    font-weight: bold;
    color: #ffc800;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}

.leaderboard-table th,
.leaderboard-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.leaderboard-table th {
    color: #888;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.leaderboard-table td {
    font-size: 0.85rem;
}

.leaderboard-rank {
    font-weight: bold;
    color: #ffc800;
}

.leaderboard-you {
    background: rgba(0,255,136,0.1);
}

.leaderboard-you td {
    color: #00ff88;
}

.badge {
    padding: 5px 12px;
    background: rgba(255,200,0,0.2);
    border: 1px solid #ffc800;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #ffc800;
}

/* Currency Ticker Enhanced */
.currency-ticker {
    display: flex;
    align-items: center;
    background: rgba(0,0,0,0.5);
    padding: 8px 20px;
    border-bottom: 1px solid rgba(100,150,255,0.3);
    overflow: hidden;
}

.currency-ticker-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #4a9eff;
    font-weight: bold;
    margin-right: 15px;
    white-space: nowrap;
}

.ticker-icon {
    font-size: 1rem;
}

.currency-ticker-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    flex: 1;
}

.currency-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    padding: 4px 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
}

.currency-code {
    color: #4a9eff;
    font-weight: bold;
}

.currency-value {
    color: #e0e0e0;
}

.currency-change {
    font-size: 0.7rem;
}

.currency-up .currency-change { color: #51cf66; }
.currency-down .currency-change { color: #ff6b6b; }
.currency-flat .currency-change { color: #888; }

.chaos-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid rgba(255,255,255,0.1);
}

.chaos-label {
    font-size: 0.6rem;
    color: #666;
}

.chaos-value {
    font-size: 0.75rem;
    font-weight: bold;
}

.chaos-low { color: #51cf66; }
.chaos-moderate { color: #ffc800; }
.chaos-high { color: #ff6b6b; }
.chaos-extreme { color: #ff0000; animation: chaos-blink 0.5s infinite; }

@keyframes chaos-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Badge System Styles */
.badges-header {
    font-size: 1rem;
    color: #ffc800;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 15px;
    background: rgba(0,0,0,0.4);
    border-radius: 10px;
    min-width: 100px;
    transition: transform 0.2s ease;
}

.badge:hover {
    transform: scale(1.05);
}

.badge-icon {
    font-size: 2rem;
    margin-bottom: 5px;
}

.badge-name {
    font-size: 0.8rem;
    font-weight: bold;
    color: #e0e0e0;
    text-align: center;
}

.badge-rarity {
    font-size: 0.6rem;
    margin-top: 3px;
    padding: 2px 8px;
    border-radius: 10px;
}

.badge-legendary {
    border: 2px solid #ffd700;
    background: rgba(255,215,0,0.1);
}
.badge-legendary .badge-rarity {
    background: #ffd700;
    color: #000;
}

.badge-epic {
    border: 2px solid #a855f7;
    background: rgba(168,85,247,0.1);
}
.badge-epic .badge-rarity {
    background: #a855f7;
    color: #fff;
}

.badge-rare {
    border: 2px solid #3b82f6;
    background: rgba(59,130,246,0.1);
}
.badge-rare .badge-rarity {
    background: #3b82f6;
    color: #fff;
}

.badge-uncommon {
    border: 2px solid #22c55e;
    background: rgba(34,197,94,0.1);
}
.badge-uncommon .badge-rarity {
    background: #22c55e;
    color: #fff;
}

.badge-shameful {
    border: 2px solid #ef4444;
    background: rgba(239,68,68,0.1);
}
.badge-shameful .badge-rarity {
    background: #ef4444;
    color: #fff;
}

.no-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #666;
    padding: 20px;
}

.no-badges-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

/* Mini Gauge Enhancements */
.mini-gauge {
    text-align: center;
}

.mini-gauge-label {
    font-size: 0.7rem;
    color: #888;
    margin-bottom: 4px;
}

.mini-gauge-value {
    font-size: 1rem;
    font-weight: bold;
    color: #e0e0e0;
}

.mini-gauge-prefix {
    color: #888;
    font-size: 0.8rem;
}

.mini-gauge-trend {
    margin-left: 4px;
    font-size: 0.9rem;
}

.mini-gauge.trend-up .mini-gauge-trend { color: #51cf66; }
.mini-gauge.trend-down .mini-gauge-trend { color: #ff6b6b; }
.mini-gauge.trend-flat .mini-gauge-trend { color: #888; }

/* Leader Message Animation */
.leader-message {
    animation: fadeIn 0.3s ease;
}

.leader-message.angry .leader-text { color: #ff6b6b; }
.leader-message.frustrated .leader-text { color: #ffa06b; }
.leader-message.panicked .leader-text { color: #ff4444; }
.leader-message.concerned .leader-text { color: #ffc800; }
.leader-message.happy .leader-text { color: #51cf66; }
.leader-message.pleased .leader-text { color: #88ff88; }

.message-new {
    animation: messageSlide 0.5s ease;
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Score Display Enhanced */
.score-display {
    text-align: center;
    margin-top: 5px;
}

.score-label {
    font-size: 0.7rem;
    color: #888;
    margin-bottom: 4px;
}

.score-value {
    font-size: 1.5rem;
    font-weight: bold;
}

.score-separator {
    color: #666;
    margin: 0 2px;
}

.score-max {
    color: #666;
    font-size: 1rem;
}

.score-bar {
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.score-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease, background 0.5s ease;
}

/* Snarky Tooltips for Economic Indicators */
.gauge-container {
    position: relative;
    cursor: help;
}

.gauge-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.95);
    border: 1px solid #00ff88;
    border-radius: 8px;
    padding: 12px 15px;
    width: 280px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none;
}

.gauge-container:hover .gauge-tooltip {
    opacity: 1;
    visibility: visible;
    bottom: calc(100% + 10px);
}

.tooltip-title {
    color: #00ff88;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.tooltip-snark {
    color: #ffc800;
    font-style: italic;
    font-size: 0.8rem;
    margin-bottom: 8px;
    border-left: 2px solid #ffc800;
    padding-left: 8px;
}

.tooltip-relationship {
    color: #aaa;
    font-size: 0.75rem;
    line-height: 1.4;
}

.tooltip-relationship strong {
    color: #e0e0e0;
}

/* Tooltip arrow */
.gauge-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #00ff88;
}

/* Throttle Lever Redesign - Aircraft Flap Controller Style */
/* v1.9.6: Hide old throttle system - using centered yoke now */
.throttle-container {
    display: none;
}

.throttle-label {
    text-align: center;
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

/* Aircraft-style quadrant housing */
.throttle-quadrant {
    position: relative;
    width: 100%;
    padding: 10px;
    background: linear-gradient(180deg, #2a2a3e, #1a1a28);
    border-radius: 8px;
    border: 2px solid #444;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.8);
}

.throttle-track {
    position: relative;
    width: 50px;
    height: 220px;
    margin: 0 auto;
    background: linear-gradient(180deg, 
        #cc2222 0%,      /* TIGHT - High rates */
        #dd4422 10%,
        #ee6622 20%,
        #ff8822 30%,
        #ffaa22 40%,
        #cccc22 50%,     /* NEUTRAL */
        #88cc44 60%,
        #44cc66 70%,
        #22aa88 80%,
        #2288aa 90%,
        #2266cc 100%);   /* LOOSE - Low rates */
    border-radius: 25px;
    border: 3px solid #222;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.7), 0 0 5px rgba(0,0,0,0.5);
}

/* Notch markers on track */
/* v1.9.7: Hide ALL old throttle elements completely */
.throttle-track,
.throttle-track::before,
.throttle-track::after,
.throttle-handle,
.throttle-quadrant,
.throttle-zones,
.throttle-markings {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* The actual lever handle - like a flap lever */
.throttle-handle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 40px;
    background: linear-gradient(180deg, 
        #666 0%, 
        #555 20%,
        #444 50%,
        #333 80%,
        #222 100%);
    border: 2px solid #777;
    border-radius: 8px;
    cursor: grab;
    box-shadow: 
        0 4px 15px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -1px 0 rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s;
}

.throttle-handle:hover {
    box-shadow: 
        0 4px 20px rgba(0,255,136,0.3),
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -1px 0 rgba(0,0,0,0.3);
    border-color: #00ff88;
}

.throttle-handle:active {
    cursor: grabbing;
    box-shadow: 
        0 2px 10px rgba(0,255,136,0.5),
        inset 0 2px 5px rgba(0,0,0,0.3);
}

/* Grip texture on handle */
.throttle-handle::before {
    content: '';
    width: 50px;
    height: 20px;
    background: repeating-linear-gradient(
        90deg,
        #555,
        #555 3px,
        #444 3px,
        #444 6px
    );
    border-radius: 3px;
}

/* Rate zone labels */
.throttle-zones {
    position: absolute;
    right: -55px;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.6rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.zone-tight { color: #ff4444; }
.zone-firm { color: #ff8844; }
.zone-neutral { color: #cccc44; }
.zone-easy { color: #44cc88; }
.zone-loose { color: #4488cc; }

/* Left side percentage markers */
.throttle-markings {
    position: absolute;
    left: -35px;
    top: 5%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.65rem;
    color: #666;
    font-family: 'Courier New', monospace;
}

.throttle-value-display {
    text-align: center;
    margin-top: 15px;
    font-size: 2rem;
    font-weight: bold;
    color: #00ff88;
    text-shadow: 0 0 15px rgba(0,255,136,0.6);
    font-family: 'Orbitron', 'Courier New', monospace;
}

/* Policy stance indicator */
.throttle-stance {
    text-align: center;
    margin-top: 8px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.stance-tight { color: #ff4444; }
.stance-firm { color: #ff8844; }
.stance-neutral { color: #cccc44; }
.stance-easy { color: #44cc88; }
.stance-loose { color: #4488cc; }

/* Badges Display Panel */
.badges-panel {
    background: rgba(0,0,0,0.4);
    border-radius: 8px;
    padding: 12px;
    margin-top: 10px;
}

.badges-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.badges-panel-title {
    font-size: 0.7rem;
    color: #ffc800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.badges-count {
    font-size: 0.75rem;
    color: #888;
}

.badges-earned {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.badge-mini {
    font-size: 1.2rem;
    padding: 4px;
    background: rgba(255,200,0,0.1);
    border-radius: 4px;
    cursor: help;
    transition: transform 0.2s;
}

.badge-mini:hover {
    transform: scale(1.2);
}

.no-badges-yet {
    color: #666;
    font-size: 0.75rem;
    font-style: italic;
}

/* Tip Container */
.tip-container {
    background: rgba(0,0,0,0.4);
    border-radius: 8px;
    padding: 12px;
    border-left: 3px solid #4a9eff;
}

.tip-label {
    font-size: 0.7rem;
    color: #4a9eff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* Badges Container in Right Panel */
.badges-container {
    background: rgba(0,0,0,0.4);
    border-radius: 8px;
    padding: 12px;
    border-left: 3px solid #ffc800;
}

.badges-label {
    font-size: 0.7rem;
    color: #ffc800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* Leaderboard Mini Display */
.leaderboard-mini {
    background: rgba(0,0,0,0.4);
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
}

.leaderboard-title {
    font-size: 0.7rem;
    color: #4a9eff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.leaderboard-entry {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.leaderboard-rank {
    color: #ffc800;
}

.leaderboard-name {
    color: #e0e0e0;
    flex: 1;
    margin-left: 8px;
}

.leaderboard-score {
    color: #00ff88;
}

.leaderboard-you {
    background: rgba(0,255,136,0.1);
    border-radius: 4px;
    padding: 4px 6px;
    margin: 0 -6px;
}

/* Keyboard Help Overlay */
.keyboard-help-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.keyboard-help-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.keyboard-help-content {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid #00ff88;
    border-radius: 15px;
    padding: 30px 40px;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 0 40px rgba(0,255,136,0.3);
}

.keyboard-help-content h2 {
    color: #00ff88;
    margin-bottom: 25px;
    font-size: 1.5rem;
}

.shortcut-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    text-align: left;
}

.shortcut-section h3 {
    color: #ffc800;
    font-size: 0.9rem;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.shortcut {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: #ccc;
}

kbd {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: #00ff88;
    min-width: 24px;
    text-align: center;
}

.help-footer {
    margin-top: 25px;
    color: #666;
    font-size: 0.8rem;
}

/* Keyboard Toast Notification */
.keyboard-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0,0,0,0.9);
    border: 1px solid #00ff88;
    border-radius: 8px;
    padding: 12px 24px;
    color: #00ff88;
    font-size: 0.9rem;
    font-weight: bold;
    z-index: 1500;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,255,136,0.3);
}

.keyboard-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* High Scores Table */
.highscores-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.highscores-table th,
.highscores-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.highscores-table th {
    color: #888;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.highscores-table td {
    font-size: 0.85rem;
    color: #e0e0e0;
}

.highscores-table .top-score td {
    color: #ffc800;
    font-weight: bold;
}

.grade {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.8rem;
}

.grade-Aplus, .grade-A { background: rgba(0,255,136,0.2); color: #00ff88; }
.grade-Aminus, .grade-Bplus { background: rgba(100,200,100,0.2); color: #88cc88; }
.grade-B, .grade-Bminus { background: rgba(200,200,100,0.2); color: #cccc88; }
.grade-Cplus, .grade-C { background: rgba(200,150,50,0.2); color: #ccaa44; }
.grade-Cminus, .grade-Dplus { background: rgba(200,100,50,0.2); color: #cc8844; }
.grade-D, .grade-Dminus { background: rgba(200,50,50,0.2); color: #cc4444; }
.grade-F { background: rgba(255,0,0,0.2); color: #ff4444; }

.no-scores {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 20px;
}

/* New Record Animation */
.new-record {
    animation: newRecordPulse 1s ease infinite;
}

@keyframes newRecordPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255,200,0,0.3); }
    50% { box-shadow: 0 0 30px rgba(255,200,0,0.6); }
}

/* Share Button */
.btn-share {
    background: linear-gradient(135deg, #1da1f2, #0d8ecf);
    border: none;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-share:hover {
    background: linear-gradient(135deg, #0d8ecf, #0a6da8);
}

/* Keyboard hint in footer */
.keyboard-hint {
    position: fixed;
    bottom: 70px;
    right: 20px;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.75rem;
    color: #888;
    z-index: 50;
    /* v1.9.18: Make clickable */
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.keyboard-hint:hover {
    border-color: #00ff88;
    color: #00ff88;
    background: rgba(0,40,20,0.8);
    box-shadow: 0 0 10px rgba(0,255,136,0.3);
}

.keyboard-hint:active {
    transform: scale(0.98);
}

.keyboard-hint kbd {
    font-size: 0.7rem;
    padding: 2px 6px;
}

/* ==========================================
   FLIGHT PATH VISUALIZATION
   Shows the economy's trajectory like a flight path
   ========================================== */

.flight-path-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.flight-path-svg {
    width: 100%;
    height: 100%;
}

.flight-path-line {
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.5));
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawPath 1s ease forwards;
}

@keyframes drawPath {
    to {
        stroke-dashoffset: 0;
    }
}

.goldilocks-zone {
    transition: opacity 0.3s ease;
}

.plane-icon {
    transition: transform 0.5s ease;
}

/* Plane state animations */
.plane-smooth {
    /* Steady flight */
}

.plane-climbing {
    animation: planeClimb 0.5s ease infinite alternate;
}

@keyframes planeClimb {
    from { transform: translateY(0); }
    to { transform: translateY(-3px); }
}

.plane-diving {
    animation: planeDive 0.3s ease infinite alternate;
}

@keyframes planeDive {
    from { transform: translateY(0); }
    to { transform: translateY(3px); }
}

.plane-turbulent {
    animation: planeTurbulence 0.1s ease infinite;
}

@keyframes planeTurbulence {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-2px, 1px) rotate(-2deg); }
    50% { transform: translate(2px, -1px) rotate(2deg); }
    75% { transform: translate(-1px, -2px) rotate(-1deg); }
}

.plane-stall {
    animation: planeStall 0.2s ease infinite;
}

@keyframes planeStall {
    0%, 100% { opacity: 1; transform: rotate(-30deg); }
    50% { opacity: 0.7; transform: rotate(-35deg); }
}

.plane-mayday {
    animation: planeMayday 0.15s ease infinite;
}

@keyframes planeMayday {
    0%, 100% { transform: rotate(25deg) scale(1); }
    50% { transform: rotate(30deg) scale(0.95); }
}

/* Flight status message */
.flight-status {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.75rem;
    color: #00ff88;
    white-space: nowrap;
    border: 1px solid rgba(0,255,136,0.3);
    z-index: 20;
    transition: all 0.3s ease;
}

.flight-status.state-smooth {
    color: #00ff88;
    border-color: rgba(0,255,136,0.3);
}

.flight-status.state-climbing {
    color: #ffc800;
    border-color: rgba(255,200,0,0.3);
}

.flight-status.state-diving {
    color: #ff8844;
    border-color: rgba(255,136,68,0.3);
}

.flight-status.state-turbulent {
    color: #ffa500;
    border-color: rgba(255,165,0,0.3);
    animation: statusShake 0.2s ease infinite;
}

@keyframes statusShake {
    0%, 100% { transform: translateX(-50%); }
    25% { transform: translateX(calc(-50% - 2px)); }
    75% { transform: translateX(calc(-50% + 2px)); }
}

.flight-status.state-stall {
    color: #ff4444;
    border-color: rgba(255,68,68,0.5);
    animation: statusPulse 0.5s ease infinite;
}

.flight-status.state-mayday {
    color: #ff0000;
    background: rgba(255,0,0,0.2);
    border-color: #ff0000;
    animation: statusMayday 0.3s ease infinite;
}

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

@keyframes statusMayday {
    0%, 100% { transform: translateX(-50%) scale(1); background: rgba(255,0,0,0.2); }
    50% { transform: translateX(-50%) scale(1.05); background: rgba(255,0,0,0.4); }
}

/* Altitude indicator on right side */
.altitude-indicator {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.7);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.2);
    text-align: center;
    z-index: 15;
}

.altitude-label {
    font-size: 0.6rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.altitude-value {
    font-size: 1.2rem;
    font-weight: bold;
    color: #00ff88;
}

.altitude-value.low {
    color: #ff4444;
}

.altitude-value.warning {
    color: #ffc800;
}

.altitude-value.good {
    color: #00ff88;
}

/* ==========================================
   FIRST-PERSON COCKPIT VIEW
   Makes it feel like you're in the pilot seat
   ========================================== */

/* Cockpit frame overlay - REMOVED to fix grey bars issue */
/* .cockpit-body::before - disabled */

/* Cockpit rivets/bolts decoration - REMOVED */
/* .cockpit-body::after - disabled */

/* ==========================================
   SLIDE-IN LEADER QUOTES (Toast Style)
   Leaders slide in from the right
   ========================================== */

.leader-toast {
    position: fixed;
    right: -400px;
    top: 120px;
    width: 350px;
    background: linear-gradient(135deg, rgba(20,20,40,0.98), rgba(30,30,50,0.98));
    border: 2px solid rgba(255,100,100,0.4);
    border-right: none;
    border-radius: 12px 0 0 12px;
    padding: 15px 20px;
    z-index: 500;
    transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: -5px 5px 30px rgba(0,0,0,0.5);
}

.leader-toast.visible {
    right: 0;
}

.leader-toast .leader-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 8px;
}

.leader-toast .leader-icon {
    font-size: 2rem;
}

.leader-toast .leader-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: #ff6b6b;
}

.leader-toast .leader-title {
    font-size: 0.7rem;
    color: #888;
}

.leader-toast .leader-quote {
    font-size: 0.95rem;
    font-style: italic;
    color: #ddd;
    line-height: 1.5;
}

.leader-toast .leader-dismiss {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 5px;
}

.leader-toast .leader-dismiss:hover {
    color: #fff;
}

/* Leader toast pressure states */
.leader-toast.low-pressure {
    border-color: rgba(81,207,102,0.4);
}
.leader-toast.low-pressure .leader-name {
    color: #51cf66;
}

.leader-toast.medium-pressure {
    border-color: rgba(255,200,0,0.4);
}
.leader-toast.medium-pressure .leader-name {
    color: #ffc800;
}

.leader-toast.high-pressure {
    border-color: rgba(255,68,68,0.6);
    animation: toast-urgent 1s infinite;
}
.leader-toast.high-pressure .leader-name {
    color: #ff4444;
}

@keyframes toast-urgent {
    0%, 100% { box-shadow: -5px 5px 30px rgba(255,0,0,0.3); }
    50% { box-shadow: -5px 5px 50px rgba(255,0,0,0.5); }
}

/* ==========================================
   ENHANCED HORIZON WITH WEATHER
   Dynamic sky based on economic conditions
   ========================================== */

/* Cloud layers */
.horizon-clouds {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    pointer-events: none;
}

.cloud {
    position: absolute;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    filter: blur(20px);
}

.cloud-1 {
    width: 120px;
    height: 40px;
    top: 20%;
    left: 10%;
    animation: cloud-drift 30s linear infinite;
}

.cloud-2 {
    width: 80px;
    height: 30px;
    top: 35%;
    left: 60%;
    animation: cloud-drift 25s linear infinite reverse;
}

.cloud-3 {
    width: 100px;
    height: 35px;
    top: 15%;
    left: 40%;
    animation: cloud-drift 35s linear infinite;
}

@keyframes cloud-drift {
    0% { transform: translateX(-100px); }
    100% { transform: translateX(calc(100% + 100px)); }
}

/* Weather states */
.horizon-display.weather-sunny {
    background: linear-gradient(180deg, 
        #1a4a7a 0%, 
        #2a6a9c 30%, 
        #4a8abc 48%, 
        #3d6a3d 52%, 
        #3d3817 70%, 
        #2a1a00 100%);
}

.horizon-display.weather-sunny .cloud {
    background: rgba(255,255,255,0.25);
}

.horizon-display.weather-cloudy {
    background: linear-gradient(180deg, 
        #1a2a3a 0%, 
        #2a3a4c 30%, 
        #3a4a5c 48%, 
        #3d4a3d 52%, 
        #3d2817 70%, 
        #1a0a00 100%);
}

.horizon-display.weather-cloudy .cloud {
    background: rgba(150,150,150,0.4);
    filter: blur(15px);
}

.horizon-display.weather-stormy {
    background: linear-gradient(180deg, 
        #0a0a1a 0%, 
        #1a1a2c 30%, 
        #2a2a3c 48%, 
        #2d3a2d 52%, 
        #2d1817 70%, 
        #0a0000 100%);
    animation: storm-flash 3s infinite;
}

.horizon-display.weather-stormy .cloud {
    background: rgba(100,100,120,0.5);
    filter: blur(10px);
}

@keyframes storm-flash {
    0%, 90%, 100% { filter: brightness(1); }
    92%, 94% { filter: brightness(1.5); }
}

/* Sun/moon in horizon */
.horizon-sun {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffdd00 0%, #ff8800 100%);
    box-shadow: 0 0 40px rgba(255,200,0,0.6);
    top: 15%;
    right: 15%;
    transition: all 1s ease;
}

.horizon-display.weather-stormy .horizon-sun {
    opacity: 0.2;
    filter: blur(10px);
}

.horizon-display.weather-cloudy .horizon-sun {
    opacity: 0.5;
    filter: blur(5px);
}

/* Runway/landing strip enhancement */
.horizon-runway {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 50%;
    background: linear-gradient(
        to top,
        rgba(255,255,255,0.3) 0%,
        rgba(255,255,255,0.1) 30%,
        transparent 100%
    );
    clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%);
}

.horizon-runway::before {
    content: '';
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: rgba(255,255,255,0.5);
    box-shadow: 0 15px 0 rgba(255,255,255,0.4), 0 30px 0 rgba(255,255,255,0.3);
}

/* ==========================================
   SCROLLING NEWS TICKER ENHANCEMENTS
   ========================================== */

.ticker-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
}

.ticker-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 15px;
    background: rgba(255,200,0,0.15);
    height: 100%;
    border-right: 1px solid rgba(255,200,0,0.3);
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: bold;
    color: #ffc800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ticker-icon {
    font-size: 1rem;
}

.ticker-viewport {
    flex: 1;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
}

.ticker-content {
    display: flex;
    white-space: nowrap;
    will-change: transform;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 20px;
    color: #e0e0e0;
    font-size: 0.85rem;
}

.ticker-item-icon {
    font-size: 1rem;
}

.ticker-item-separator {
    color: #444;
    margin-left: 10px;
}

.ticker-item-breaking {
    color: #ff4444;
    font-weight: bold;
}

.ticker-item-success {
    color: #51cf66;
}

.ticker-item-warning {
    color: #ffc800;
}

.ticker-item-market {
    color: #4a9eff;
}

/* ==========================================
   v1.7.1 SCROLLING TICKER BARS
   3 scrolling bars: News, Forex, Stocks
   ========================================== */

.ticker-bar {
    display: flex;
    align-items: center;
    height: 32px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ticker-bar.news-ticker-bar {
    background: rgba(0, 0, 0, 0.7);
    border-bottom-color: rgba(255, 200, 0, 0.3);
}

.ticker-bar.forex-ticker-bar {
    background: rgba(0, 20, 40, 0.7);
    border-bottom-color: rgba(100, 150, 255, 0.3);
}

.ticker-bar.stocks-ticker-bar {
    background: rgba(0, 30, 20, 0.7);
    border-bottom-color: rgba(0, 255, 136, 0.3);
}

.ticker-scroll {
    display: flex;
    white-space: nowrap;
    animation: ticker-scroll-anim 30s linear infinite;
    gap: 40px;
    padding-left: 100%;
}

.ticker-bar:hover .ticker-scroll {
    animation-play-state: paused;
}

@keyframes ticker-scroll-anim {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 15px;
    font-size: 0.8rem;
    color: #e0e0e0;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.ticker-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.news-ticker-bar .ticker-item {
    color: #ffc800;
}

.forex-ticker-bar .ticker-item {
    color: #a0c4ff;
}

.stocks-ticker-bar .ticker-item {
    color: #88ffaa;
}

.ticker-sep {
    color: #444;
    padding: 0 10px;
}

/* Flash animation for new news items */
.ticker-item.flash-new {
    animation: flash-news 1s ease;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 200, 0, 0.8);
}

@keyframes flash-news {
    0%, 100% { background: transparent; }
    25% { background: rgba(255, 200, 0, 0.4); }
    50% { background: rgba(255, 200, 0, 0.2); }
    75% { background: rgba(255, 200, 0, 0.3); }
}

/* News popup modal */
.news-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.news-popup-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.news-popup {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid #ffc800;
    border-radius: 12px;
    padding: 25px;
    max-width: 500px;
    width: 90%;
    text-align: center;
}

.news-popup-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.news-popup-title {
    color: #ffc800;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.news-popup-detail {
    color: #ccc;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.news-popup-close {
    padding: 10px 25px;
    background: linear-gradient(135deg, #ffc800, #ff9900);
    border: none;
    border-radius: 6px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
}

/* Flash news in sidebar */
.event-item.flash-event {
    animation: flash-sidebar 1s ease;
    background: rgba(255, 200, 0, 0.2);
}

@keyframes flash-sidebar {
    0%, 100% { background: rgba(255, 200, 0, 0.2); }
    50% { background: rgba(255, 200, 0, 0.5); }
}

/* Responsive */
@media (max-width: 1024px) {
    .cockpit-main {
        grid-template-columns: 1fr;
    }
    
    .panel-left, .panel-right {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .gauges-row {
        flex-wrap: wrap;
    }
    
    .progress-bar {
        width: 120px;
    }
}

/* ==========================================
   INTERACTIVE TUTORIAL SYSTEM
   First-time player onboarding walkthrough
   ========================================== */

/* Dark overlay behind spotlight */
.tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tutorial-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.tutorial-overlay-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
}

/* Spotlight cutout around target element - v1.7.1 smaller boxes */
.tutorial-spotlight {
    position: fixed;
    z-index: 9001;
    border-radius: 6px;
    box-shadow: 
        0 0 0 9999px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(0, 255, 136, 0.4),
        inset 0 0 10px rgba(0, 255, 136, 0.15);
    border: 2px solid #00ff88;
    pointer-events: none;
    display: none;
    transition: all 0.3s ease;
    max-width: 90vw;
    max-height: 70vh;
}

.tutorial-spotlight.pulse {
    animation: spotlightPulse 2s ease-in-out infinite;
}

@keyframes spotlightPulse {
    0%, 100% { 
        box-shadow: 
            0 0 0 9999px rgba(0, 0, 0, 0.85),
            0 0 30px rgba(0, 255, 136, 0.5),
            inset 0 0 20px rgba(0, 255, 136, 0.2);
    }
    50% { 
        box-shadow: 
            0 0 0 9999px rgba(0, 0, 0, 0.85),
            0 0 50px rgba(0, 255, 136, 0.8),
            inset 0 0 30px rgba(0, 255, 136, 0.4);
    }
}

/* Tutorial tooltip/dialog - v1.7.1 compact with always-visible Next */
.tutorial-tooltip {
    position: fixed;
    z-index: 9002;
    width: 300px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid #00ff88;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 255, 136, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tutorial-tooltip.visible {
    opacity: 1;
    visibility: visible;
}

.tutorial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tutorial-step-indicator {
    font-size: 0.75rem;
    color: #888;
    font-weight: bold;
}

.tutorial-skip {
    background: none;
    border: none;
    color: #666;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.tutorial-skip:hover {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}

.tutorial-title {
    color: #00ff88;
    font-size: 1.1rem;
    margin: 0 0 10px 0;
    font-weight: bold;
}

.tutorial-content {
    color: #ccc;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 15px 0;
}

.tutorial-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    position: sticky;
    bottom: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid rgba(0, 255, 136, 0.2);
}

.tutorial-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tutorial-prev {
    background: rgba(255, 255, 255, 0.1);
    color: #888;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.tutorial-prev:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ccc;
}

.tutorial-next {
    background: linear-gradient(135deg, #00ff88, #00cc6a);
    color: #000;
    flex: 1;
}

.tutorial-next:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.4);
}

/* Body class when tutorial active - prevent interactions */
body.tutorial-active .cockpit-main,
body.tutorial-active .cockpit-header,
body.tutorial-active .cockpit-footer {
    pointer-events: none;
}

/* Re-enable pointer events for spotlighted elements */
body.tutorial-active .tutorial-spotlight-target {
    pointer-events: auto;
    position: relative;
    z-index: 9001;
}

/* Tutorial completion toast */
.tutorial-complete-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid #ffc800;
    border-radius: 15px;
    padding: 30px 50px;
    text-align: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.tutorial-complete-toast.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.tutorial-complete-icon {
    font-size: 4rem;
    margin-bottom: 15px;
}

.tutorial-complete-title {
    color: #00ff88;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.tutorial-complete-subtitle {
    color: #888;
    font-size: 0.9rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tutorial-tooltip {
        width: 280px;
        padding: 15px;
    }
    
    .tutorial-title {
        font-size: 1rem;
    }
    
    .tutorial-content {
        font-size: 0.85rem;
    }
    
    .tutorial-btn {
        padding: 8px 15px;
        font-size: 0.8rem;
    }
}

/* ===== DIFFICULTY SYSTEM STYLES ===== */
/* Added: March 3, 2026 - Daily Improvement */

.difficulty-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.difficulty-tourist {
    background: linear-gradient(135deg, #2d5a27 0%, #4a8c3f 100%);
    color: #90EE90;
    border: 1px solid #4a8c3f;
    box-shadow: 0 0 8px rgba(74, 140, 63, 0.3);
}

.difficulty-business {
    background: linear-gradient(135deg, #1a4a7a 0%, #2a6a9c 100%);
    color: #87CEEB;
    border: 1px solid #2a6a9c;
    box-shadow: 0 0 8px rgba(42, 106, 156, 0.3);
}

.difficulty-first {
    background: linear-gradient(135deg, #8B0000 0%, #B22222 100%);
    color: #FFB6C1;
    border: 1px solid #B22222;
    box-shadow: 0 0 8px rgba(178, 34, 34, 0.4);
    animation: danger-pulse 2s ease-in-out infinite;
}

@keyframes danger-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(178, 34, 34, 0.4); }
    50% { box-shadow: 0 0 15px rgba(178, 34, 34, 0.7); }
}

/* Black swan event flash */
.black-swan-flash {
    animation: black-swan-alert 0.5s ease-out 3;
}

@keyframes black-swan-alert {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(139, 0, 0, 0.3); }
}

/* ==========================================
   v1.9.28: ENHANCED GRADE VISUALS
   C/D/F grades with "Sweaty Handoff" flavor
   ========================================== */

/* Grade letter styling */
.grade-letter {
    font-size: 4rem;
    font-weight: bold;
    display: block;
    margin-top: 10px;
}

.grade-excellent {
    color: #00ff88;
    text-shadow: 0 0 20px rgba(0,255,136,0.6);
}

.grade-good {
    color: #88cc88;
    text-shadow: 0 0 15px rgba(136,204,136,0.4);
}

.grade-mediocre {
    color: #ffc800;
    text-shadow: 0 0 15px rgba(255,200,0,0.4);
}

.grade-poor {
    color: #ff8844;
    text-shadow: 0 0 15px rgba(255,136,68,0.4);
}

.grade-failure {
    color: #ff4444;
    text-shadow: 0 0 20px rgba(255,68,68,0.6);
    animation: failure-pulse 1s ease-in-out infinite;
}

@keyframes failure-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Sweaty Handoff Visual - C grades */
.sweaty-handoff-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 2.5rem;
    margin-bottom: 10px;
    animation: sweaty-shake 0.5s ease-in-out infinite;
}

.sweaty-emoji {
    animation: sweat-drip 2s ease-in-out infinite;
}

.handoff-arrow {
    animation: arrow-pulse 1s ease-in-out infinite;
}

.nervous-emoji {
    animation: nervous-shake 0.3s ease-in-out infinite;
}

@keyframes sweaty-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

@keyframes sweat-drip {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes arrow-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes nervous-shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

/* Rough Landing Visual - D grades */
.rough-landing-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 2.5rem;
    margin-bottom: 10px;
    animation: turbulence 0.3s ease-in-out infinite;
}

.turbulence-emoji {
    animation: plane-wobble 0.5s ease-in-out infinite;
}

.concerned-emoji {
    animation: concern-pulse 1.5s ease-in-out infinite;
}

@keyframes turbulence {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-3px, 2px) rotate(-2deg); }
    50% { transform: translate(2px, -3px) rotate(1deg); }
    75% { transform: translate(-2px, -1px) rotate(-1deg); }
}

@keyframes plane-wobble {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

@keyframes concern-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

/* Crash Visual - F grade */
.crash-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 3rem;
    margin-bottom: 10px;
    animation: crash-shake 0.2s ease-in-out infinite;
}

.crash-emoji {
    animation: explosion 0.5s ease-in-out infinite;
}

@keyframes crash-shake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-4px, 2px); }
    20% { transform: translate(4px, -2px); }
    30% { transform: translate(-3px, -3px); }
    40% { transform: translate(3px, 3px); }
    50% { transform: translate(-2px, 1px); }
    60% { transform: translate(2px, -1px); }
    70% { transform: translate(-1px, -2px); }
    80% { transform: translate(1px, 2px); }
    90% { transform: translate(-1px, 1px); }
}

@keyframes explosion {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    25% { transform: scale(1.1); filter: brightness(1.3); }
    50% { transform: scale(0.95); filter: brightness(0.9); }
    75% { transform: scale(1.05); filter: brightness(1.2); }
}

/* Grade visual container states */
.grade-visual-victory {
    background: linear-gradient(135deg, rgba(0,255,136,0.1), rgba(0,200,100,0.05));
    border-radius: 10px;
    padding: 15px;
}

.grade-visual-smooth {
    background: linear-gradient(135deg, rgba(100,200,100,0.1), rgba(80,180,80,0.05));
    border-radius: 10px;
    padding: 15px;
}

.grade-visual-sweaty,
.grade-visual-sweaty_handoff {
    background: linear-gradient(135deg, rgba(255,200,0,0.15), rgba(200,150,0,0.1));
    border-radius: 10px;
    padding: 15px;
    border: 1px solid rgba(255,200,0,0.3);
}

.grade-visual-rough_landing {
    background: linear-gradient(135deg, rgba(255,136,68,0.15), rgba(200,100,50,0.1));
    border-radius: 10px;
    padding: 15px;
    border: 1px solid rgba(255,136,68,0.3);
}

.grade-visual-crash {
    background: linear-gradient(135deg, rgba(255,0,0,0.2), rgba(150,0,0,0.15));
    border-radius: 10px;
    padding: 15px;
    border: 2px solid rgba(255,68,68,0.5);
    animation: crash-bg-pulse 1s ease-in-out infinite;
}

@keyframes crash-bg-pulse {
    0%, 100% { background: linear-gradient(135deg, rgba(255,0,0,0.2), rgba(150,0,0,0.15)); }
    50% { background: linear-gradient(135deg, rgba(255,50,50,0.3), rgba(200,0,0,0.2)); }
}

/* ==========================================
   v1.9.29: GRADE C/D "BARELY SQUEAKING BY" ENDINGS
   "The Handoff" and "Rough Landing" visual styles
   ========================================== */

/* Ending type backgrounds */
.ending-handoff {
    background: linear-gradient(135deg, #f39c12, #e67e22) !important;
}

.ending-sweaty {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
}

/* Ending title styling */
.ending-title {
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 10px 0;
    padding: 8px 15px;
    border-radius: 6px;
    display: inline-block;
}

.ending-title-handoff {
    color: #f39c12;
    background: rgba(243, 156, 18, 0.15);
    border: 1px solid rgba(243, 156, 18, 0.4);
    animation: handoff-glow 2s ease-in-out infinite;
}

.ending-title-handoff::after {
    content: " 😅";
}

.ending-title-sweaty {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.4);
    animation: sweaty-glow 1.5s ease-in-out infinite;
}

.ending-title-sweaty::after {
    content: " 😰";
}

.ending-title-crash {
    color: #ff0000;
    background: rgba(255, 0, 0, 0.2);
    border: 2px solid rgba(255, 0, 0, 0.6);
    animation: crash-title-pulse 0.5s ease-in-out infinite;
}

.ending-title-crash::after {
    content: " 💥";
}

@keyframes handoff-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(243, 156, 18, 0.3); }
    50% { box-shadow: 0 0 20px rgba(243, 156, 18, 0.5); }
}

@keyframes sweaty-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(231, 76, 60, 0.3); }
    50% { box-shadow: 0 0 25px rgba(231, 76, 60, 0.6); }
}

@keyframes crash-title-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.8; }
}

/* Grade container styling for C/D endings */
.gameover-grade.ending-handoff {
    border: 2px solid rgba(243, 156, 18, 0.5);
    border-radius: 12px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(230, 126, 34, 0.05));
}

.gameover-grade.ending-sweaty {
    border: 2px solid rgba(231, 76, 60, 0.5);
    border-radius: 12px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(192, 57, 43, 0.05));
}

/* Enhanced emoji animations for C/D grades */
.ending-handoff .sweaty-emoji {
    animation: sweat-drip 1.5s ease-in-out infinite, relief-sigh 3s ease-in-out infinite;
}

.ending-handoff .nervous-emoji {
    animation: nervous-shake 0.4s ease-in-out infinite;
}

.ending-sweaty .turbulence-emoji {
    animation: plane-wobble 0.3s ease-in-out infinite;
}

.ending-sweaty .concerned-emoji {
    animation: concern-pulse 1s ease-in-out infinite;
}

@keyframes relief-sigh {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Subtitle message styling for C/D endings */
.ending-handoff + .gameover-subtitle,
.ending-sweaty + .gameover-subtitle {
    font-style: italic;
    color: #ccc;
    max-width: 400px;
    margin: 10px auto;
    line-height: 1.4;
}

/* Sweat drop animation overlay */
.sweaty-handoff-visual::before {
    content: "💧";
    position: absolute;
    top: -5px;
    right: 30%;
    font-size: 0.8rem;
    animation: drip-fall 2s ease-in infinite;
    opacity: 0.7;
}

@keyframes drip-fall {
    0% { transform: translateY(0); opacity: 0.7; }
    100% { transform: translateY(30px); opacity: 0; }
}

/* Turbulence lines for rough landing */
.rough-landing-visual::after {
    content: "〰️〰️";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    color: #ff8844;
    opacity: 0.6;
    animation: turbulence-lines 0.5s ease-in-out infinite;
}

@keyframes turbulence-lines {
    0%, 100% { transform: translateX(-50%) scaleX(1); }
    50% { transform: translateX(-50%) scaleX(1.2); }
}

/* ============================================================
   v2.1.0 — 17 IMPROVEMENTS
   ============================================================ */

/* ── ITEM 1: Toolbar — 51k economists scrolling text ── */
.economists-watching {
    font-size: 0.65rem;
    color: rgba(0,255,136,0.6);
    white-space: nowrap;
    overflow: hidden;
    max-width: 220px;
    animation: economists-scroll 20s linear infinite;
    letter-spacing: 0.04em;
}
@keyframes economists-scroll {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* Shrink logo-mini text so more screen space is visible */
.logo-mini {
    font-size: 0.9rem !important;
}
.logo-mini img {
    height: 22px !important;
}

/* ── ITEM 3: Reduce section spacing ── */
.panel { padding: 10px !important; }
.cockpit-header { padding: 5px 12px !important; }
.panel-right { gap: 8px !important; }
.leader-container, .advisor-container, .events-container {
    padding: 8px !important;
}
.leader-label, .advisor-label, .events-label { margin-bottom: 3px !important; }
.gauges-row { gap: 20px; }

/* ── ITEM 4: Widen readable zones, letter-spacing ── */
.cockpit-main { padding: 8px 14px !important; }
.gauge-label, .gauge-subtitle, .events-label, .advisor-label,
.leader-label, .panel .label, .ticker-item-text {
    letter-spacing: 0.03em;
}
.panel-center { padding-left: 12px !important; padding-right: 12px !important; }

/* ── ITEM 5: Cursor crosshair on rate buttons ── */
.control-btn.btn-primary { cursor: crosshair; }

/* ── ITEM 9: Current Events Panel ── */
.current-events-panel {
    background: rgba(0,0,0,0.45);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 6px;
    border: 1px solid rgba(100,150,255,0.2);
    max-height: 150px;
    overflow-y: auto;
}
.current-events-header {
    font-size: 0.6rem;
    color: #4a9eff;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.current-events-dot {
    width: 6px;
    height: 6px;
    background: #4a9eff;
    border-radius: 50%;
    animation: live-pulse 1.5s ease-in-out infinite;
}
.current-events-list { display: flex; flex-direction: column; gap: 4px; }
.current-event-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    color: #ccc;
    padding: 3px 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1.3;
}
.current-event-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.current-event-score-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.current-event-score-dot.red    { background: #ff4444; }
.current-event-score-dot.orange { background: #ffaa00; }
.current-event-score-dot.green  { background: #00ff88; }

/* News story popup */
.news-story-popup-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.75);
    z-index: 9000; display: flex; align-items: center; justify-content: center;
}
.news-story-popup-box {
    background: #0d1a2e; border: 1px solid rgba(0,255,136,0.3);
    border-radius: 12px; padding: 24px; max-width: 440px; width: 90%;
    position: relative; box-shadow: 0 8px 40px rgba(0,0,0,0.8);
}
.news-story-close {
    position: absolute; top: 10px; right: 14px;
    background: none; border: none; color: #888; font-size: 1.2rem; cursor: pointer;
}
.news-story-headline {
    font-size: 1rem; font-weight: bold; color: #e0e0e0; margin-bottom: 12px; line-height: 1.4;
}
.news-story-relevance-label {
    font-size: 0.65rem; color: #4a9eff; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px;
}
.news-story-relevance { font-size: 0.82rem; color: #aaa; line-height: 1.6; margin-bottom: 14px; }
.news-story-score {
    display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: bold; margin-bottom: 14px;
}
.news-story-score.red    { background: rgba(255,68,68,0.2); color: #ff6666; border: 1px solid rgba(255,68,68,0.4); }
.news-story-score.orange { background: rgba(255,170,0,0.2); color: #ffaa00; border: 1px solid rgba(255,170,0,0.4); }
.news-story-score.green  { background: rgba(0,255,136,0.1); color: #00ff88; border: 1px solid rgba(0,255,136,0.3); }
.news-story-dismiss {
    display: block; width: 100%; padding: 8px; background: rgba(0,255,136,0.15);
    border: 1px solid rgba(0,255,136,0.4); border-radius: 6px; color: #00ff88; cursor: pointer; font-size: 0.85rem;
}

/* ── ITEM 13: Scorecard print / share ── */
#scorecard-printable {
    display: none;
    position: fixed; inset: 0; background: #0a1628; z-index: 9999;
    padding: 40px; font-family: 'Courier New', monospace; color: #e0e0e0;
    align-items: center; justify-content: center; flex-direction: column;
}
#scorecard-printable.visible { display: flex; }
.scorecard-inner {
    max-width: 500px; width: 100%; background: #0d1a2e;
    border: 2px solid #00ff88; border-radius: 16px; padding: 32px;
    text-align: center; box-shadow: 0 0 40px rgba(0,255,136,0.3);
}
.scorecard-logo { font-size: 1.2rem; color: #00ff88; margin-bottom: 8px; letter-spacing: 3px; }
.scorecard-grade { font-size: 5rem; font-weight: bold; color: #00ff88; line-height: 1; }
.scorecard-score { font-size: 1.4rem; color: #e0e0e0; margin: 8px 0; }
.scorecard-stats { margin: 16px 0; text-align: left; font-size: 0.85rem; }
.scorecard-stat { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.scorecard-certified { margin-top: 16px; font-size: 0.65rem; color: #555; letter-spacing: 2px; text-transform: uppercase; }
.scorecard-close { margin-top: 16px; padding: 8px 24px; background: none; border: 1px solid #555; color: #888; border-radius: 6px; cursor: pointer; }
@media print {
    body > *:not(#scorecard-printable) { display: none !important; }
    #scorecard-printable { display: flex !important; position: static; }
}

/* ── ITEM 15: Social / Impact Feed panels ── */
.social-feed-panel, .impact-feed-panel {
    background: rgba(0,0,0,0.35);
    border-radius: 6px;
    padding: 8px;
    margin-top: 4px;
    font-size: 0.7rem;
    max-height: 100px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,0.06);
}
.social-comment, .impact-story {
    display: flex; gap: 6px; padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    line-height: 1.4; align-items: flex-start;
}
.social-icon, .impact-icon { font-size: 0.8rem; flex-shrink: 0; padding-top: 1px; }
.social-text { color: #bbb; }
.impact-text { color: #9ac; font-style: italic; }

/* ── ITEM 16: Leaderboard section ── */
.fmp-leaderboard-section {
    margin-top: 16px;
    background: rgba(0,255,136,0.05);
    border: 1px solid rgba(0,255,136,0.2);
    border-radius: 10px; padding: 14px;
}
.fmp-lb-header { font-size: 0.9rem; color: #00ff88; margin-bottom: 10px; font-weight: bold; }
.fmp-lb-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.fmp-lb-table th { color: #666; padding: 4px 6px; text-align: left; font-weight: normal; }
.fmp-lb-table td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); color: #ccc; }
.fmp-lb-table tr.fmp-lb-you td { color: #00ff88; font-weight: bold; }
.fmp-lb-rank { font-size: 0.8rem; color: #00ff88; margin-top: 8px; }

/* ── ITEM 2: Debrief popup styles ── */
.debrief-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.8);
    z-index: 9500; display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.debrief-popup {
    background: #0d1a2e; border: 1px solid rgba(0,200,150,0.3);
    border-radius: 14px; padding: 28px; max-width: 520px; width: 100%;
    max-height: 80vh; overflow-y: auto; position: relative;
    box-shadow: 0 10px 50px rgba(0,0,0,0.9);
}
.debrief-close {
    position: absolute; top: 12px; right: 16px;
    background: none; border: none; color: #666; font-size: 1.2rem; cursor: pointer;
}
.debrief-popup-title { font-size: 1.1rem; font-weight: bold; color: #00cc88; margin-bottom: 4px; }
.debrief-popup-short { font-size: 0.8rem; color: #888; margin-bottom: 16px; font-style: italic; }
.debrief-section { margin-bottom: 16px; }
.debrief-section-label { font-size: 0.65rem; color: #4a9eff; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; }
.debrief-explanation { font-size: 0.82rem; color: #ccc; line-height: 1.65; }
.debrief-tweets { display: flex; flex-direction: column; gap: 8px; }
.debrief-tweet {
    background: rgba(29,161,242,0.08); border-left: 3px solid rgba(29,161,242,0.4);
    border-radius: 6px; padding: 8px 10px; font-size: 0.78rem; color: #aac; line-height: 1.45; font-style: italic;
}
.debrief-human { font-size: 0.82rem; color: #b8d4c0; line-height: 1.65; font-style: italic; }
.debrief-dismiss-btn {
    display: block; width: 100%; padding: 10px;
    background: rgba(0,200,136,0.12); border: 1px solid rgba(0,200,136,0.35);
    border-radius: 8px; color: #00cc88; cursor: pointer; font-size: 0.85rem; margin-top: 8px;
}
.debrief-clickable {
    cursor: pointer;
    text-decoration: underline dotted rgba(0,200,136,0.5);
    transition: color 0.2s, text-shadow 0.2s;
}
.debrief-clickable:hover {
    color: #00ff88;
    text-shadow: 0 0 8px rgba(0,255,136,0.4);
}

/* ── ITEM 17: Heavy Animation — Fed Chair Office Immersion ── */

/* 17a: Ambient dust motes */
.cockpit-body::before {
    content: '';
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,200,0.08) 1px, transparent 1px);
    background-size: 200px 200px, 350px 350px;
    background-position: 0 0, 100px 100px;
    animation: dust-drift 18s linear infinite;
}
@keyframes dust-drift {
    0%   { background-position: 0 0, 100px 100px; }
    100% { background-position: 200px 200px, 300px 300px; }
}

/* 17b: Ticker tape urgency flash — amber background flash on bad news */
.ticker-bar.news-urgent {
    animation: ticker-urgent-flash 0.4s ease-in-out 4;
}
@keyframes ticker-urgent-flash {
    0%, 100% { background-color: rgba(0,0,0,0.6); }
    50%       { background-color: rgba(200,100,0,0.4); }
}

/* 17c: "LIVE" blinking indicator */
.live-indicator {
    position: fixed;
    top: 70px;
    right: 16px;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6rem;
    font-weight: bold;
    color: #ff3333;
    letter-spacing: 2px;
    pointer-events: none;
}
.live-dot {
    width: 8px; height: 8px;
    background: #ff3333; border-radius: 50%;
    animation: live-pulse 1.2s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 4px #ff3333; }
    50%       { opacity: 0.3; box-shadow: none; }
}

/* 17d: Phone ringing shake on high pressure */
.phone-ringing {
    animation: phone-shake 0.4s ease-in-out infinite;
    display: inline-block;
}
@keyframes phone-shake {
    0%, 100% { transform: rotate(0deg); }
    20%       { transform: rotate(-12deg); }
    40%       { transform: rotate(12deg); }
    60%       { transform: rotate(-8deg); }
    80%       { transform: rotate(8deg); }
}

/* 17f: Heartbeat monitor pulse on score display */
.score-heartbeat {
    animation: heartbeat-pulse 1.8s ease-in-out infinite;
}
@keyframes heartbeat-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,136,0); }
    30%       { box-shadow: 0 0 0 6px rgba(0,255,136,0.15); }
    60%       { box-shadow: 0 0 0 0 rgba(0,255,136,0); }
    75%       { box-shadow: 0 0 0 3px rgba(0,255,136,0.08); }
}

/* 17g: Vignette overlay — cinematic dark edges */
.cockpit-body::after {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none; z-index: 2;
    background: radial-gradient(ellipse at center,
        transparent 50%,
        rgba(0,0,0,0.25) 75%,
        rgba(0,0,0,0.55) 100%
    );
}

/* 17h: Dramatic rate change flash */
.rate-flash-overlay {
    position: fixed; inset: 0; background: rgba(255,255,255,0.35);
    z-index: 8000; pointer-events: none;
    animation: rate-flash 0.35s ease-out forwards;
}
@keyframes rate-flash {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
.screen-shake {
    animation: screen-shake-kf 0.3s ease-in-out;
}
@keyframes screen-shake-kf {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-4px) translateY(2px); }
    40%       { transform: translateX(4px) translateY(-2px); }
    60%       { transform: translateX(-3px) translateY(1px); }
    80%       { transform: translateX(3px); }
}

/* 17j: Wall clock */
.wall-clock {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.75rem; color: rgba(255,255,255,0.5);
}
.wall-clock-face {
    width: 28px; height: 28px;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    position: relative;
    background: rgba(0,0,0,0.4);
    flex-shrink: 0;
}
.wall-clock-hand {
    position: absolute;
    bottom: 50%; left: 50%;
    transform-origin: bottom center;
    border-radius: 2px;
}
.wall-clock-hour   { width: 2px; height: 7px; margin-left: -1px; background: #ccc; }
.wall-clock-minute { width: 1.5px; height: 9px; margin-left: -0.75px; background: #aaa; }
.wall-clock-second { width: 1px; height: 10px; margin-left: -0.5px; background: #ff4444; }
.wall-clock-time   { font-family: monospace; font-size: 0.7rem; color: #888; }

/* Video background in sky layer */
.sky-video-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; opacity: 0.65;
    pointer-events: none;
}

/* A-score advice section in game over */
.a-score-advice {
    margin-top: 14px;
    background: rgba(0,255,136,0.05);
    border: 1px solid rgba(0,255,136,0.2);
    border-radius: 10px;
    padding: 14px;
}
.a-score-advice-header {
    font-size: 0.85rem; font-weight: bold; color: #00ff88; margin-bottom: 10px;
}
.a-score-advice-item {
    font-size: 0.78rem; color: #aaa; padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05); line-height: 1.5;
}
.a-score-advice-item:last-child { border-bottom: none; }

/* Advisor quarterly advice callout */
.advisor-quarterly-advice {
    background: rgba(74,158,255,0.08);
    border-left: 3px solid rgba(74,158,255,0.5);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.68rem;
    color: #9bc;
    margin-top: 4px;
    line-height: 1.4;
    font-style: italic;
}