/* ==========================================================================
   FLIGHT SIMULATOR (easter egg) — CSS runway scene + the live canvas game
   chrome (HUD/overlay). Game rendering itself is canvas, driven by
   js/modules/flight-game.js.
   ========================================================================== */

.flight-sim { position: relative; z-index: var(--z-content); padding: var(--section-py) 0; }

.flight-box {
    position: relative;
    padding: clamp(.6rem, 2vw, 1.4rem);
    border-radius: var(--radius-lg);
    margin-top: 1rem;
}

.runway-stage, .flight-game {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--radius-md);
    overflow: hidden;
    isolation: isolate;
}

/* --- idle runway visual --- */
.runway-stage {
    background: linear-gradient(180deg, #05060a 0%, #0a0c1c 55%, rgba(var(--accent-rgb), .22) 100%);
    perspective: 480px;
}
.runway-sky { position: absolute; inset: 0; }
.runway-star {
    position: absolute; left: var(--x); top: var(--y);
    width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .3;
    animation: twinkle 2.6s ease-in-out infinite;
    animation-delay: var(--d);
}
@keyframes twinkle { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }

.runway {
    position: absolute; bottom: -6%; left: 50%;
    width: 62%; height: 58%;
    background: linear-gradient(180deg, #14161f, #05060a);
    transform: translateX(-50%) rotateX(58deg);
    transform-origin: bottom center;
    border-left: 1px solid rgba(255,255,255,.08);
    border-right: 1px solid rgba(255,255,255,.08);
}
.runway-center {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 5px; transform: translateX(-50%);
    background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,.75) 0 22px, transparent 22px 46px);
}
.runway-lights {
    position: absolute; top: 0; bottom: 0; width: 3px;
    background-image: radial-gradient(circle, var(--accent) 0 3px, transparent 4px);
    background-size: 100% 30px;
    opacity: .8;
    animation: pulseDot 1.6s infinite;
    filter: drop-shadow(0 0 4px var(--accent));
}
.runway-lights--left { left: 4%; }
.runway-lights--right { right: 4%; }

.runway-plane {
    position: absolute; bottom: 15%; left: 50%; translate: -50% 0;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    color: var(--text);
    transform: rotate(-28deg);
    filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), .6));
    animation: planeIdle 2.4s ease-in-out infinite;
    z-index: 2;
}
@keyframes planeIdle { 0%, 100% { transform: rotate(-28deg) translateY(0); } 50% { transform: rotate(-24deg) translateY(-8px); } }
.runway-stage.is-launching .runway-plane {
    animation: planeTakeoff .7s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes planeTakeoff {
    to { transform: rotate(-55deg) translate(60vw, -60vh); opacity: 0; }
}

.runway-panel {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
    text-align: center; padding: 1.5rem;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(5,6,10,.35), transparent 75%);
    transition: opacity .4s var(--ease-soft);
}
.runway-stage.is-launching .runway-panel { opacity: 0; }
.runway-panel .tag { margin-bottom: 0; }
.runway-hint { font-size: .72rem; color: var(--text-dim); max-width: 32ch; }

/* --- live game view --- */
.flight-game { background: #05060a; }
#flightCanvas { width: 100%; height: 100%; display: block; touch-action: none; }

.flight-hud {
    position: absolute; top: 0; left: 0; right: 0; z-index: 4;
    display: flex; justify-content: space-between;
    padding: .9rem 1.1rem;
    font-size: .78rem; color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.7);
    pointer-events: none;
}
.flight-hud strong { color: var(--accent); font-size: .95rem; }

.flight-overlay {
    position: absolute; inset: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    background: rgba(5,6,10,.72);
    backdrop-filter: blur(6px);
    padding: 1rem;
}
.flight-overlay__panel {
    text-align: center; padding: 1.8rem 1.6rem; border-radius: var(--radius-md);
    max-width: 360px;
}
.flight-overlay__icon { font-size: 2.4rem; display: block; margin-bottom: .6rem; }
.flight-overlay__panel h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.flight-overlay__panel p { color: var(--text-dim); font-size: .9rem; margin-bottom: .4rem; }
.flight-overlay__best { color: var(--text-faint); margin-bottom: 1.2rem !important; }
.flight-overlay__actions { display: flex; flex-direction: column; gap: .7rem; }

.flight-footnote { text-align: center; color: var(--text-faint); font-size: .72rem; margin-top: 1rem; }

@media (max-width: 560px) {
    .runway-plane { bottom: 18%; }
    .flight-overlay__panel { padding: 1.4rem 1.1rem; }
}