:root { color-scheme:dark; --navy:#123b59; --cream:#fff4d7; --gold:#ffd277; }
body { background:#092d47; color:var(--cream); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
button { font-family:inherit; cursor:pointer; color:inherit; border:0; touch-action:manipulation; }
button:disabled,button[aria-disabled="true"] { cursor:default; opacity:.55; }
button:focus-visible { outline:3px solid #fff4c7; outline-offset:-4px; }
svg { flex-shrink:0; vertical-align:middle; }
.menu-art { position:absolute; inset:0; background:#24bfd1 url('../img/menu.webp') center / cover no-repeat; pointer-events:none; }
.menu-art::after { content:''; position:absolute; inset:48% 0 0; background:linear-gradient(transparent,#073856c9 55%,#073856); }
.menu-cloud { position:absolute; width:150px; height:45px; border-radius:50%; background:radial-gradient(ellipse,#fffbe780,transparent 68%); pointer-events:none; animation:cloud-drift 12s ease-in-out infinite alternate; }
.c1 { top:32%; left:-50px; }
.c2 { top:48%; right:-20px; animation-delay:-5s; }
@keyframes cloud-drift { to { transform:translate(55px,10px); } }
.menu-top { position:absolute; top:16px; left:18px; right:18px; display:flex; justify-content:space-between; gap:15px; }
.counter { display:flex; align-items:center; justify-content:center; gap:8px; min-width:112px; height:42px; padding:0 13px; border:2px solid #e4c18d; border-radius:13px; background:linear-gradient(#2b6283,#123d5c); box-shadow:0 4px 0 #08283f,inset 0 2px 0 #ffffff42; font-size:20px; font-weight:900; }
.counter svg { color:#ffdb79; filter:drop-shadow(0 2px 0 #89562b); }
.menu-heading { position:absolute; top:77px; left:15px; right:15px; text-align:center; pointer-events:none; }
.eyebrow { font-size:10px; font-weight:900; letter-spacing:2.7px; color:#fff9de; text-shadow:0 2px 3px #14567b; margin-bottom:14px; }
#flight-logo { width:350px; margin:0 auto; transform:rotate(-3deg); filter:drop-shadow(0 5px 0 #16405c55); }
#flight-logo svg { display:block; width:100%; height:auto; }
.menu-bottom { position:absolute; left:17px; right:17px; bottom:10px; display:flex; flex-direction:column; align-items:stretch; gap:9px; }
.route-tag { align-self:center; display:flex; flex-direction:column; align-items:center; gap:3px; border-radius:12px; padding:8px 20px; background:#123b59ed; border:1px solid #6ea7b5; box-shadow:0 4px 0 #082b4299; }
.route-tag small { font-size:9px; font-weight:800; letter-spacing:2px; color:#90d9e4; }
.route-tag b { font-size:16px; color:#ffedbf; }
.menu-tray { display:flex; flex-direction:column; gap:10px; padding:12px 13px 8px; border:3px solid #edca8a; border-radius:25px; background:linear-gradient(#245676e8,#103a56f5); box-shadow:0 5px 0 #06273f,inset 0 2px 0 #fff9d65e; }
.btn { display:flex; align-items:center; justify-content:center; flex-shrink:0; gap:9px; min-height:48px; padding:9px 15px; border:2px solid #97eee2; border-radius:16px; background:linear-gradient(#51ded5,#159eaa); color:#fff8df; font-size:17px; font-weight:900; text-shadow:0 2px 0 #0c667d; box-shadow:0 4px 0 #0a6075,inset 0 3px 0 #ffffff6b; transition:transform .1s,box-shadow .1s; }
.btn:active,.menu-icon:active,.counter:active { transform:translateY(3px); box-shadow:0 1px 0 #092b46; }
.btn-play { min-height:68px; border-color:#fff0b6; border-radius:21px; background:#fba33c url('../img/button-play.png') center / 100% 100% no-repeat; color:#fff9e8; font-size:29px; text-shadow:0 3px 0 #9b462a; box-shadow:0 5px 0 #9a4b30; }
.btn-play svg { width:32px; height:32px; }
.secondary { background:#24bbb8 url('../img/button-secondary.png') center / 100% 100% no-repeat; }
.menu-pair { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.menu-pair .btn { font-size:15px; min-height:46px; gap:7px; padding:8px; }
.menu-icons { display:flex; justify-content:space-around; padding-top:3px; }
.menu-icon { position:relative; width:65px; height:58px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:transparent; color:#ffe7b1; }
.menu-icon:nth-child(2) { color:#89eee3; }
.menu-icon:nth-child(3) { color:#baf395; }
.menu-icon:nth-child(4) { color:#ffb2a2; }
.menu-icon svg { width:27px; height:27px; filter:drop-shadow(0 2px 0 #082e49); }
.menu-icon span { font-size:10px; font-weight:800; }
#daily-dot { position:absolute; top:0; right:11px; width:8px; height:8px; border:2px solid #fff1c4; border-radius:50%; background:#ff755f; }
.menu-links { display:flex; justify-content:center; gap:8px; border-top:1px solid #7fb5be55; }
.text-btn { min-height:40px; padding:4px 6px; background:transparent; color:#b0d8df; font-size:10px; font-weight:600; }
.guest { display:none; align-items:center; justify-content:center; gap:5px; color:#ccebf0; font-size:9px; font-weight:600; line-height:14px; }
.guest.show { display:flex; }
.overlay { background:#062a48c9; backdrop-filter:blur(3px); }
.panel { width:354px; flex-shrink:0; padding:18px; gap:12px; border:12px solid transparent; border-image:url('../img/panel.png') 64 fill / 16px stretch; border-radius:27px; background:#163f64; color:#fff2d1; box-shadow:0 8px 0 #05263c; text-align:center; }
.panel::before,.panel::after { content:''; position:absolute; top:12px; width:5px; height:5px; border-radius:50%; background:#f1cc89; box-shadow:0 2px 0 #153c57; }
.panel::before { left:13px; }
.panel::after { right:13px; }
.panel-kicker { font-size:9px; letter-spacing:3px; color:#9ed4e2; font-weight:800; }
.panel-title { font-size:25px; font-weight:900; line-height:29px; color:#ffe6a2; text-shadow:0 3px 0 #102e4a; }
.panel-copy { font-size:14px; line-height:21px; color:#d0e7e9; }
.btn-sm { min-height:40px; font-size:13px; background:#2b6280; border-color:#81a9bb; box-shadow:0 3px 0 #0b304c; }
.panel .btn-play { font-size:20px; min-height:55px; }
.panel .scroller { height:285px; text-align:left; padding:2px 5px 6px 0; }
.result-stats { display:flex; justify-content:space-around; gap:12px; padding:13px 6px; border-top:1px solid #77adbb55; border-bottom:1px solid #77adbb55; }
.result-stats div { display:flex; flex-direction:column; gap:5px; }
.result-stats small { font-size:10px; letter-spacing:2px; color:#a7d6de; }
.result-stats b { font-size:24px; }
#res-stars { display:flex; justify-content:center; gap:7px; }
.star { color:#40627a; }
.star.earned { color:#ffda7e; }
#res-reward { color:#ffe38d; }
#res-progress { color:#a9d6df; font-size:11px; }
.lb-row { background:#123d59; border-radius:10px; border:1px solid #578a9e66; font-size:12px; }
.lb-medal { font-weight:900; color:#a8cbd7; }
.lb-avatar { background:#2c718a; color:#e7f3e4; }
.top-1 { border-color:#f7ce75; background:#5e624f; }
.top-2 { border-color:#b9dce5; background:#3f6176; }
.top-3 { border-color:#daa17b; background:#655c59; }
.me { outline:2px solid #6ce7d1; outline-offset:-2px; }
.gold { color:#ffe08c; }
.silver { color:#e1f3fa; }
.bronze { color:#ffbb8b; }
.lb-score { color:#ffe39b; font-weight:800; }
.lb-empty { color:#b7dbe5; font-size:14px; }
.upgrade-row { display:flex; gap:12px; padding:13px 0; border-bottom:1px solid #6797a96b; }
.upgrade-icon { display:grid; place-items:center; width:48px; height:48px; flex-shrink:0; background:#103a58; border:1px solid #709daa; border-radius:13px; }
.upgrade-copy { flex:1; }
.upgrade-copy b { font-size:15px; }
.upgrade-copy b small { color:#91c8d4; }
.upgrade-copy p,.achievement-row p,.armory-row p { font-size:12px; line-height:18px; color:#bfdde2; margin:6px 0 10px; }
.buy { min-height:37px; font-size:12px; padding:7px 13px; border-radius:10px; }
.achievement-row { padding:12px 0; border-bottom:1px solid #719daa66; }
.achievement-row b { font-size:15px; }
.achievement-row small { font-size:11px; color:#a4cfd9; }
.achievement-progress { background:#10334e; height:5px; margin:8px 0; border-radius:5px; overflow:hidden; }
.achievement-progress span { display:block; height:100%; background:#f2cf78; }
.achievement-row .buy { width:100%; margin-top:10px; }
.armory-row { display:flex; gap:13px; padding:12px 0; }
.armory-letter { display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; border:2px solid #fff2cb; border-radius:11px; color:#173d60; font-size:22px; font-weight:900; box-shadow:0 3px 0 #082c47; }
.help-footnote { color:#e4d098; font-size:12px; line-height:18px; }
#help-list h3 { font-size:15px; color:#ffe3a5; margin:8px 0; }
#help-list p { font-size:13px; line-height:20px; color:#c5e1e7; margin-bottom:17px; }
.intro-plane,.daily-gift { color:#ffd78d; padding:6px; }
.map-wrap { display:flex; flex-direction:column; padding:22px 20px 18px; gap:15px; background:#144a68; }
.page-heading small { font-size:10px; letter-spacing:3px; color:#93d2df; font-weight:800; }
.page-heading h1 { font-size:30px; color:#ffe2a1; margin-top:3px; }
#mission-list { flex:1; min-height:0; padding-right:2px; }
.chapter-label { font-size:11px; font-weight:900; color:#9dd8e0; letter-spacing:1px; padding:18px 0 12px; }
.mission-row { display:flex; align-items:center; gap:10px; width:100%; height:71px; margin-bottom:8px; padding:10px; border:1px solid #77a5b3; border-radius:13px; background:#1c5977; text-align:left; }
.mission-row.current { background:#32758a; border:2px solid #ffd783; }
.mission-row.locked { opacity:.42; }
.mission-no { display:grid; place-items:center; width:36px; height:39px; flex-shrink:0; color:#ffe0a0; background:#103d5b; border-radius:10px; font-size:21px; font-weight:900; }
.mission-copy { flex:1; min-width:0; }
.mission-copy b { display:block; font-size:13px; line-height:16px; }
.mission-copy small { display:block; font-size:9px; color:#add2dc; margin-top:5px; }
.mission-stars { display:flex; }
.mission-stars svg { width:13px; height:13px; }
#cv { position:absolute; inset:0; touch-action:none; }
.game-hud { position:absolute; inset:0; pointer-events:none; }
.hud-top { display:flex; gap:8px; align-items:stretch; position:absolute; top:10px; left:12px; right:12px; }
.hud-box { display:flex; flex-direction:column; justify-content:center; padding:6px 11px; border:1px solid #98c3c8; border-radius:11px; background:#0e3e5be8; flex:1; }
.hud-box small { font-size:8px; letter-spacing:1.5px; color:#9ed2dc; }
.hud-box b { font-size:20px; line-height:24px; }
.hud-stage { flex:0; min-width:78px; text-align:center; }
.hud-pause { width:46px; min-height:46px; background:#174b68; border:2px solid #c6d9cc; border-radius:12px; box-shadow:0 3px 0 #113950; pointer-events:auto; }
.hud-status { position:absolute; top:67px; left:14px; right:14px; display:flex; align-items:center; justify-content:space-between; gap:5px; text-shadow:0 2px 0 #0b324f; }
#hud-hp { display:flex; gap:1px; }
.heart { color:#385c75; }
.heart.full { color:#ff7d8c; filter:drop-shadow(0 1px 0 #72364e); }
.weapon-status { display:flex; gap:7px; font-size:11px; font-weight:900; }
.weapon-status b { color:#fff2c5; }
.hud-route { position:absolute; top:92px; left:16px; right:16px; height:3px; border-radius:3px; overflow:hidden; background:#17436177; }
#hud-route-fill { height:100%; background:#ffdc8b; transform-origin:left; }
#hud-combo { position:absolute; left:17px; top:107px; font-size:12px; font-weight:900; color:#ffedaf; text-shadow:0 2px 0 #164565; }
.bomb-button { display:flex; align-items:center; justify-content:center; gap:7px; position:absolute; bottom:17px; right:16px; min-width:70px; height:56px; padding:8px 12px; background:linear-gradient(#ffce75,#e49b44); color:#19415b; border:2px solid #fff0b5; border-radius:17px; font-size:22px; font-weight:900; box-shadow:0 4px 0 #9b6541; pointer-events:auto; }
#toast { bottom:24px; width:max-content; padding:12px 18px; border:2px solid #f2d08b; border-radius:13px; background:#174660; color:#fff0c7; font-size:14px; font-weight:800; }
#scr-loading { background:#1d81a4 url('../img/menu.webp') center / cover; }
.load-box { padding:24px; border:3px solid #f2d290; border-radius:25px; background:#123f60eb; }
#load-title { color:#ffe1a0; text-shadow:0 3px 0 #082b46; }
#load-tip { color:#b4e5eb; }
@media (prefers-reduced-motion:reduce) { .menu-cloud { animation:none; } .btn { transition:none; } }