:root {
    --bg-deep: #050b14;
    --bg-secondary: #0a1128;
    --blue-primary: #1B4965;
    --blue-light: #3d8ab8;
    --gold-primary: #D4A574;
    --gold-light: #f5d09f;
    --white-primary: #ffffff;
    --white-secondary: #e2e8f0;
    --white-tertiary: #94a3b8;
    --green-success: #4ade80;
    --red-danger: #ef4444;
    --font-display: 'Cormorant Garamond', serif;
    --font-ui: 'Inter', sans-serif;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--bg-deep);
    color: var(--white-primary);
    font-family: var(--font-ui);
    overflow: hidden;
    height: 100vh;
}

.animated-bg {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: linear-gradient(45deg, #050b14, #0b1930, #132b4a, #050b14);
    background-size: 400% 400%;
    animation: gradientBG 20s ease infinite;
    z-index: -1;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.app-container { position: relative; width: 100%; height: 100vh; z-index: 1; }
.screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none; display: none; flex-direction: column;
    animation: fadeIn 0.5s forwards;
}
.screen.active { opacity: 1; pointer-events: auto; display: flex; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.glass-panel {
    background: rgba(10, 17, 40, 0.55);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border-radius: 16px;
}
.overlay-glow { box-shadow: 0 0 40px rgba(212, 165, 116, 0.15); }
.glow-text { text-shadow: 0 0 15px rgba(212, 165, 116, 0.6); }
.text-gold { color: var(--gold-primary); }
.text-green { color: var(--green-success); }

#flight-planner { align-items: center; overflow-y: auto; padding: var(--spacing-xl) var(--spacing-md); }
.planner-content { width: 100%; max-width: 900px; }
.planner-header { text-align: center; margin-bottom: var(--spacing-xl); }
.planner-header h1 { font-family: var(--font-display); font-size: 4rem; color: var(--gold-primary); text-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.subtitle { color: var(--white-tertiary); font-size: 1.1rem; letter-spacing: 1px; }

.owlly-greeting, .owlly-boarding, .owlly-celebration {
    display: flex; align-items: center; gap: var(--spacing-md);
    padding: var(--spacing-md); margin-bottom: var(--spacing-lg);
}
.owlly-avatar { font-size: 2.8rem; }
.bounce { animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.flight-form {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--spacing-md);
    align-items: center; padding: var(--spacing-lg); margin-bottom: var(--spacing-lg);
}
.form-group { display: flex; flex-direction: column; gap: var(--spacing-sm); width: 100%; }
.form-group label { font-family: var(--font-display); color: var(--gold-primary); font-weight: 600; text-transform: uppercase; letter-spacing: 1px;}

.country-input {
    width: 100%; padding: 0.85rem var(--spacing-sm);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 165, 116, 0.4); border-radius: 8px;
    color: white; font-family: var(--font-ui); font-size: 1.05rem;
    outline: none; cursor: pointer; transition: all 0.2s;
    appearance: none; -webkit-appearance: none;
}
.country-input:focus, .country-input:hover { border-color: var(--gold-primary); background: rgba(255, 255, 255, 0.1); }
.country-input option { background-color: #0b1221; color: white; padding: 15px; }

.select-wrapper { position: relative; width: 100%; }
.select-wrapper::after {
    content: "▼"; font-size: 0.7rem; color: var(--gold-primary);
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%); pointer-events: none;
}

.swap-countries {
    width: 45px; height: 45px; background: linear-gradient(135deg, var(--gold-primary), var(--gold-light)); 
    border-radius: 50%; display: flex; align-items: center; justify-content: center; 
    cursor: pointer; color: var(--bg-deep); transition: transform 0.3s;
}
.swap-countries:hover { transform: rotate(180deg) scale(1.1); box-shadow: 0 0 20px rgba(212, 165, 116, 0.4); }

.flight-info { padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.flight-info.hidden { display: none !important; }
.route-display { display: flex; align-items: center; justify-content: center; gap: var(--spacing-lg); font-size: 1.5rem; margin-bottom: var(--spacing-md); }
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sm); text-align: center; }
.metric { background: rgba(255, 255, 255, 0.02); padding: var(--spacing-sm); border-radius: 8px; border: 1px solid rgba(255,255,255,0.05);}
.metric-label { font-size: 0.75rem; color: var(--white-tertiary); display: block; text-transform: uppercase; letter-spacing: 1px;}
.metric-value { font-size: 1.4rem; font-weight: 600; color: var(--white-primary); font-family: var(--font-display); }

.glass-panel-hud { background: rgba(5, 11, 20, 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(212, 165, 116, 0.2); }
.hud-top-bar {
    width: 100%; display: grid; grid-template-columns: 280px 1fr 200px;
    align-items: center; padding: var(--spacing-sm) var(--spacing-lg); z-index: 5; position: relative;
}
.hud-timer-wrap { display: flex; flex-direction: column; }
.hud-label { font-size: 0.7rem; text-transform: uppercase; color: var(--gold-primary); letter-spacing: 1px; }
.hud-time-value { font-size: 2.2rem; font-weight: 700; color: var(--white-primary); font-family: monospace; letter-spacing: 2px;}
.hud-progress-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; }
.progress-bar-container { width: 100%; max-width: 600px; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--blue-light), var(--gold-primary)); transition: width 1s linear; box-shadow: 0 0 10px var(--gold-primary); }
.hud-location-text { font-size: 0.85rem; color: var(--white-secondary); font-style: italic; letter-spacing: 0.5px;}
.hud-action-wrap { display: flex; justify-content: flex-end; }

.btn { padding: 0.85rem 2rem; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; text-transform: uppercase; font-family: var(--font-ui); letter-spacing: 1px; transition: all 0.3s ease;}
.btn-primary { background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-light) 100%); color: var(--bg-deep); width: 100%; box-shadow: 0 4px 15px rgba(212, 165, 116, 0.2); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(212, 165, 116, 0.4); }
.btn-lavatory { background: rgba(239, 68, 68, 0.15); border: 1px solid var(--red-danger); color: white; padding: 0.6rem 1rem; border-radius: 6px; font-weight: 600; text-transform: uppercase; cursor: pointer; font-size: 0.85rem; transition: var(--transition-fast); backdrop-filter: blur(5px);}
.btn-lavatory:hover { background: rgba(239, 68, 68, 0.35); box-shadow: 0 0 15px rgba(239,68,68,0.4);}

.flight-viewport { flex: 1; position: relative; overflow: hidden; }
#map-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.flight-dashboard { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: space-between; padding: var(--spacing-lg); pointer-events: none; z-index: 2; }

.dashboard-panel { display: flex; flex-direction: column; gap: var(--spacing-md); width: 240px; pointer-events: auto; }
.data-block { padding: var(--spacing-sm) var(--spacing-md); text-align: center; }
.data-label { font-size: 0.75rem; color: var(--white-tertiary); text-transform: uppercase; display: block; letter-spacing: 1px;}
.data-value { font-size: 1.4rem; font-weight: 600; color: var(--white-primary); font-family: var(--font-display); }

.announcement-box { position: absolute; bottom: var(--spacing-lg); right: var(--spacing-lg); padding: var(--spacing-md); width: 340px; opacity: 0; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 100; transform: translateY(20px);}
.announcement-box.visible { opacity: 1; transform: translateY(0);}
.announcement-header { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px;}
.announcement-title { font-family: var(--font-display); font-size: 1.2rem; color: var(--gold-primary); font-weight: 600; text-transform: uppercase;}

.meal-service, .pause-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5, 11, 20, 0.9); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 500; }
.pause-menu { z-index: 600; }
.meal-container, .pause-content { padding: var(--spacing-xl); text-align: center; max-width: 500px; width: 90%;}
.meal-break-timer { font-size: 3.5rem; color: var(--gold-primary); font-weight: bold; font-family: monospace; margin: 10px 0;}
.lavatory-door-icon { font-size: 4.5rem; margin-bottom: 15px; }
.hidden { display: none !important; }

#boarding-gate, #landing-summary { align-items: center; justify-content: center; flex-direction: column; padding: var(--spacing-lg);}
.boarding-pass { background: #ffffff; color: #0a1128; padding: var(--spacing-lg); border-radius: 12px; width: 100%; max-width: 400px; margin-bottom: var(--spacing-md); text-align: left; box-shadow: 0 20px 50px rgba(0,0,0,0.5);}
.pass-header { display: flex; justify-content: space-between; border-bottom: 2px dashed #94a3b8; padding-bottom: 0.8rem; margin-bottom: 1rem; }
.airline-logo { font-family: var(--font-display); font-weight: 700; color: var(--blue-primary); font-size: 1.3rem;}
.pass-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); margin-bottom: 0.8rem; }
.pass-label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; display: block;}
.pass-value { font-weight: 700; font-size: 1.1rem;}
.boarding-code { text-align: center; letter-spacing: 4px; font-family: monospace; margin-top: 1rem; background: #f1f5f9; padding: 8px; border-radius: 4px;}

.flight-summary-card { padding: var(--spacing-xl); width: 100%; max-width: 600px; margin: var(--spacing-lg) 0; }
.summary-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); }
.summary-stat { background: rgba(255,255,255,0.03); padding: var(--spacing-md); border-radius: 8px; display: flex; gap: var(--spacing-md); align-items: center; text-align: left; border: 1px solid rgba(255,255,255,0.05);}
.stat-icon { font-size: 2rem;}

.history-section { margin-top: var(--spacing-xl); width: 100%;}
.history-section h3 { font-family: var(--font-display); font-size: 1.8rem; color: var(--gold-primary); margin-bottom: var(--spacing-md); text-align: center;}
.flight-history { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--spacing-md); }
.history-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(212,165,116,0.15); padding: var(--spacing-md); border-radius: 12px; transition: transform 0.3s; cursor: pointer;}
.history-item:hover { transform: translateY(-5px); border-color: var(--gold-primary); background: rgba(255,255,255,0.08);}

@media (max-width: 768px) {
    .flight-dashboard { display: none; }
    .flight-form { grid-template-columns: 1fr; }
    .hud-top-bar { grid-template-columns: 1fr auto; }
    .hud-progress-wrap { display: none; }
    .planner-header h1 { font-size: 3rem;}
}