/* Planes follows the approved Hangar/Wallet frames and compact typography. */
body[data-page="planes"] main { padding-top:calc(35px / var(--game-ui-scale,1)); }
body[data-page="planes"] .hangar-heading { display:grid; grid-template-columns:minmax(340px,1fr) minmax(460px,1.3fr); gap:30px; padding:0; margin:0 0 26px; align-items:center; }
body[data-page="planes"] .hangar-heading .hangar-frame { width:100%; max-width:570px; min-height:108px; margin:0; padding:18px 16%; font-size:31px; }
body[data-page="planes"] .hangar-frame small { display:block; font-size:19px; line-height:1.2; margin-top:4px; }
body[data-page="planes"] .hangar-heading .actions { display:flex; justify-content:center; gap:22px; }
body[data-page="planes"] .hangar-heading .actions .btn { flex:0 1 auto; width:245px; min-height:64px; font-size:24px; padding:10px 16px; border-radius:19px; }
body[data-page="planes"] .hangar-heading .actions .btn.green { width:300px; }
.fuel-icon { width:30px; height:33px; flex-shrink:0; vertical-align:middle; }
.mint-button-crate { width:44px; height:44px; object-fit:contain; }
body[data-page="planes"] .hangar-token-coin { width:29px; height:29px; object-fit:contain; mix-blend-mode:normal; clip-path:circle(48% at 49% 48%); }
body[data-page="planes"] .filter-bar { justify-content:flex-end; margin:8px 0 25px; }
body[data-page="planes"] .fleet-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; align-items:stretch; }
body[data-page="planes"] .plane-card { display:flex; flex-direction:column; min-width:0; padding:14px 10px 12px; }
body[data-page="planes"] .plane-art { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; object-position:center; padding:8px; margin:0; mix-blend-mode:normal; mask-image:none; clip-path:none; }
body[data-page="planes"] .plane-name { display:grid; place-items:center; min-height:52px; padding:7px 4px; font-size:19px; line-height:1.1; overflow-wrap:anywhere; }
body[data-page="planes"] .aircraft-stats { margin-top:8px; }
body[data-page="planes"] .stat-column { gap:8px; padding:8px 4px; }
body[data-page="planes"] .stat-column>div { font-size:12px; gap:3px; }
.stat-icon { display:block; width:19px; height:21px; flex-shrink:0; }
body[data-page="planes"] .stat-column .fuel-icon { width:19px; height:21px; }
body[data-page="planes"] .stat-column b { font-size:13px; }
body[data-page="planes"] .stat-column .fuel-value { font-size:16px; }
body[data-page="planes"] .fuel-state { margin:5px 0 8px; min-height:22px; font-size:10px; }
body[data-page="planes"] .card-buttons { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:auto; }
body[data-page="planes"] .card-buttons .btn { min-height:46px; font-size:18px; padding:9px 4px; border-radius:13px; gap:3px; }
body[data-page="planes"] .card-buttons .btn.gold { font-size:16px; }
body[data-page="planes"] .card-buttons .btn .icon { width:19px; height:19px; }
body[data-page="planes"] .card-bottom { margin-top:13px; }
body[data-page="planes"] .btn:disabled { background:linear-gradient(#c8cdd0,#858e95); border-color:#697780; color:#eef0f1; box-shadow:inset 0 0 0 2px #e4e8eb,0 3px #52616b; text-shadow:0 1px #53616b; opacity:1; cursor:not-allowed; }
.dialog.planes-popup > .hangar-frame { font-size:31px; padding-left:15%; padding-right:15%; }
.dialog.planes-popup .badge::after { content:" ✦"; }
.dialog.planes-popup :is(.selected-plane-image,.reward-aircraft,.result-plane,.standing-aircraft,.refuel-item img) { object-fit:contain; mix-blend-mode:normal; mask-image:none; clip-path:none; }
.dialog.planes-popup .result-rays { mask-image:none; }
.dialog.planes-popup .selected-plane { display:grid; grid-template-columns:40% 1fr; gap:24px; align-items:center; padding:10px 20px; }
.dialog.planes-popup .selected-plane-image { width:100%; height:180px; padding:10px; }
.dialog.planes-popup .selected-plane h3 { font-size:29px; line-height:1.1; overflow-wrap:anywhere; }
.dialog.planes-popup .selected-plane p { font-size:18px; }
.dialog.planes-popup .selected-plane .fuel-icon { width:30px; height:33px; }
.dialog.planes-popup .mode-art { position:relative; display:flex; align-items:center; justify-content:center; height:90px; margin:0 auto 8px; width:85%; }
.quick-mode-art>.icon:first-child { width:70px; height:80px; fill:#ffd52b; stroke:#bb7d09; filter:drop-shadow(0 3px 0 #553809); }
.mode-art>.icon:last-child { width:58px; height:58px; color:#1267a8; stroke-width:2; filter:drop-shadow(0 2px 0 #c1d9e8); }
.fly-mode-art .mode-plane { width:150px; height:100px; object-fit:contain; padding:5px; }
.dialog.planes-popup .mode-card h3 { font-size:31px; }
.dialog.planes-popup .mode-card p { font-size:16px; }
.dialog.planes-popup .mode-fuel { display:flex; align-items:center; justify-content:center; gap:8px; }
.dialog.planes-popup .mode-fuel .fuel-icon { width:25px; height:28px; }
.dialog.planes-popup .mode-price .art-coin { mix-blend-mode:normal; clip-path:circle(48% at 49% 48%); }
.dialog.planes-popup .mode-card .btn { width:90%; margin:0 auto; min-height:58px; font-size:27px; }
.dialog.planes-popup .refuel-list { max-height:calc((100dvh - 280px) / var(--game-ui-scale,1)); overflow-y:auto; }
@media(max-width:1100px) and (min-width:761px) {
  body[data-page="planes"] .hangar-heading { grid-template-columns:1fr; gap:18px; justify-items:center; }
  body[data-page="planes"] .hangar-heading .hangar-frame { width:570px; }
  body[data-page="planes"] .fleet-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:760px) {
  body[data-page="planes"] .hangar-heading { display:flex; flex-direction:column; gap:18px; margin-bottom:22px; }
  body[data-page="planes"] .hangar-heading .hangar-frame { width:min(100%,480px); min-height:82px; font-size:clamp(20px,4.2vw,27px); }
  body[data-page="planes"] .hangar-frame small { font-size:15px; }
  body[data-page="planes"] .hangar-heading .actions { width:100%; gap:12px; }
  body[data-page="planes"] .hangar-heading .actions .btn,
  body[data-page="planes"] .hangar-heading .actions .btn.green { width:auto; flex:1; font-size:18px; min-height:54px; padding:8px; }
  .mint-button-crate { width:31px; height:31px; }
  body[data-page="planes"] .hangar-heading .fuel-icon { width:25px; height:28px; }
  body[data-page="planes"] .fleet-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 14px; }
  body[data-page="planes"] .plane-card { padding:12px 7px; }
  body[data-page="planes"] .plane-name { font-size:17px; }
  body[data-page="planes"] .stat-column>div { font-size:11px; }
  body[data-page="planes"] .stat-column b { font-size:12px; }
  .stat-icon,body[data-page="planes"] .stat-column .fuel-icon { width:16px; height:18px; }
  body[data-page="planes"] .card-buttons .btn { font-size:16px; }
  body[data-page="planes"] .card-buttons .btn.gold { font-size:13px; }
  .dialog.planes-popup > .hangar-frame { font-size:clamp(13px,4.2vw,22px); }
  .dialog.planes-popup .selected-plane { gap:12px; padding:9px; }
  .dialog.planes-popup .selected-plane-image { height:130px; padding:5px; }
  .dialog.planes-popup .selected-plane h3 { font-size:23px; }
  .dialog.planes-popup .selected-plane p { font-size:12px; gap:5px; }
  .dialog.planes-popup .mode-art { height:70px; }
  .quick-mode-art>.icon:first-child { width:47px; height:58px; }
  .mode-art>.icon:last-child { width:38px; height:38px; }
  .fly-mode-art .mode-plane { width:90px; height:80px; }
  .dialog.planes-popup .mode-card h3 { font-size:25px; }
  .dialog.planes-popup .mode-card p { font-size:14px; }
  .dialog.planes-popup .mode-card .btn { width:100%; font-size:23px; }
}
@media(max-width:420px) {
  body[data-page="planes"] .fleet-grid { grid-template-columns:1fr; max-width:310px; margin:0 auto; }
  body[data-page="planes"] .stat-column>div { font-size:14px; }
  body[data-page="planes"] .stat-column b { font-size:15px; }
}

/* Reward counters never change the dimensions of either card action. */
body[data-page="planes"] .card-buttons { height:46px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; }
body[data-page="planes"] .card-buttons .btn { height:46px; min-height:46px; max-height:46px; min-width:0; white-space:nowrap; flex-wrap:nowrap; }
body[data-page="planes"] .card-buttons .btn.gold { padding-right:20px; font-size:15px; }
.rewards-label { white-space:nowrap; }
.reward-count { position:absolute; top:3px; right:3px; display:grid; place-items:center; min-width:16px; height:16px; padding:0 3px; border-radius:8px; background:#9c4a08; color:#fff5c5; font:11px/1 Cartoon,sans-serif; text-shadow:none; }
@media(min-width:1101px) {
  body[data-page="planes"] main { max-width:calc(1510px + 100px / var(--game-ui-scale,1)); }
}
body[data-page="planes"] .hangar-heading .actions .btn {
  min-height:78px; border-radius:23px; border:4px solid #19d8ef;
  background:linear-gradient(#43eeff,#03bedb 48%,#079abb);
  box-shadow:0 0 0 2px #03394f,inset 0 0 0 3px #a7faff,inset 0 -5px 0 #078198,0 5px 0 #064857;
  text-shadow:2px 2px #164d61,-1px -1px #164d61;
}
body[data-page="planes"] .hangar-heading .actions .btn.green {
  border-color:#40ed4c; background:linear-gradient(#6be948,#04b72c 48%,#008728);
  box-shadow:0 0 0 2px #064a27,inset 0 0 0 3px #b9ff91,inset 0 -5px 0 #057023,0 5px 0 #08472a;
  text-shadow:2px 2px #205327,-1px -1px #205327;
}
.refuel-button-can,.mint-button-crate { width:58px; height:58px; object-fit:contain; flex-shrink:0; }
@media(max-width:760px) {
  body[data-page="planes"] .hangar-heading .actions .btn { min-height:62px; }
  .refuel-button-can,.mint-button-crate { width:38px; height:38px; }
}

/* Four desktop cards: larger names, statistics and fixed-size actions. */
@media(min-width:1101px) {
  body[data-page="planes"] .plane-card { padding:16px 13px 15px; }
  body[data-page="planes"] .plane-name { min-height:62px; font-size:24px; padding:9px 6px; }
  body[data-page="planes"] .aircraft-number { font-size:28px; height:38px; line-height:38px; }
  body[data-page="planes"] .stat-column { padding:11px 7px; gap:11px; border-radius:15px; }
  body[data-page="planes"] .stat-column>div { font-size:16px; gap:5px; }
  body[data-page="planes"] .stat-column b { font-size:17px; }
  body[data-page="planes"] .stat-icon,
  body[data-page="planes"] .stat-column .fuel-icon { width:25px; height:27px; }
  body[data-page="planes"] .stat-column .fuel-value { font-size:22px; }
  body[data-page="planes"] .fuel-state { font-size:13px; height:28px; line-height:28px; margin:7px 0 11px; }
  body[data-page="planes"] .card-buttons { height:58px; gap:10px; }
  body[data-page="planes"] .card-buttons .btn { height:58px; min-height:58px; max-height:58px; font-size:23px; }
  body[data-page="planes"] .card-buttons .btn.gold { font-size:20px; padding-right:23px; }
  body[data-page="planes"] .card-buttons .btn .icon { width:24px; height:24px; }
  body[data-page="planes"] .reward-count { min-width:19px; height:19px; font-size:13px; }
}
body[data-page="planes"] .stat-column .fuel-value {
  padding:1px 3px; border-radius:5px; background:#128439; color:#fff;
  text-shadow:0 1px #085b27; box-shadow:0 2px 0 #096729;
  text-decoration:underline; text-underline-offset:3px;
}
body[data-page="planes"] .stat-column .fuel-value.depleted {
  background:#e71a12; color:#fff; text-shadow:0 1px #9c140d; box-shadow:0 2px 0 #a5120a;
}

/* Align the top actions with the right edge of the aircraft grid. */
@media(min-width:1101px) {
  body[data-page="planes"] .hangar-heading .actions { justify-content:flex-end; width:100%; }
  body[data-page="planes"] .hangar-heading .hangar-frame {
    transform:translateX(calc(80px / var(--game-ui-scale,1)));
  }
}

/* Shared transparent fuel artwork and the five useful aircraft statistics. */
.fuel-icon { object-fit:contain; mix-blend-mode:normal; }
body[data-page="planes"] .stat-column:last-child { align-content:center; gap:18px; }
/* Larger aircraft with a centered identity block and even spacing. */
.dialog.planes-popup .selected-plane {
  padding-right:calc(20px + 25px / var(--game-ui-scale,1));
}
.dialog.planes-popup .selected-plane-image { height:225px; }
.dialog.planes-popup .selected-plane > div {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center; min-width:0;
  transform:translateX(calc(25px / var(--game-ui-scale,1)));
}
.dialog.planes-popup .selected-plane h3 { margin:0; }
.dialog.planes-popup .selected-plane .badge { margin:0; }
.dialog.planes-popup .selected-plane p { margin:0; justify-content:center; flex-wrap:wrap; }
.dialog.planes-popup .mode-card .btn { width:76.5%; display:flex; justify-content:center; white-space:nowrap; }
.dialog.planes-popup .fly-mode-art > .icon:last-child { margin-left:-22px; }
.cartoon-clock { width:48px; height:48px; flex-shrink:0; }
.dialog.planes-popup .flight-choice-note {
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:13px 18px; margin:18px 0 0;
  border:2px solid #7acbf4; border-radius:22px;
  background:linear-gradient(#e1f7ff,#c9eaff); box-shadow:inset 0 2px 0 #f4fdff;
  text-align:center; color:#0b2857; font-family:Cartoon,sans-serif;
}
.dialog.planes-popup .flight-choice-note strong { display:block; font-size:21px; line-height:1.25; font-weight:400; }
.dialog.planes-popup .flight-choice-note small { display:block; margin-top:4px; font-size:15px; line-height:1.25; color:#27649c; }
.info-circle { display:grid; place-items:center; flex-shrink:0; width:38px; height:38px; border:3px solid #143b5c; border-radius:50%; background:linear-gradient(#18b6fa,#0060bb); box-shadow:inset 0 0 0 2px #d8faff,0 0 0 2px #fff; color:white; font:27px/1 Cartoon,sans-serif; }
@media(max-width:760px) {
  .dialog.planes-popup .selected-plane { padding:9px; }
  .dialog.planes-popup .selected-plane-image { height:162px; }
  .dialog.planes-popup .selected-plane > div { transform:none; gap:9px; }
  .dialog.planes-popup .mode-card .btn { width:85%; font-size:20px; padding-left:7px; padding-right:7px; }
  .dialog.planes-popup .fly-mode-art > .icon:last-child { margin-left:-15px; }
  .cartoon-clock { width:34px; height:34px; }
  .dialog.planes-popup .flight-choice-note { padding:11px; gap:10px; }
  .dialog.planes-popup .flight-choice-note strong { font-size:16px; }
  .dialog.planes-popup .flight-choice-note small { font-size:12px; }
  .info-circle { width:30px; height:30px; font-size:21px; }
}

body[data-page="planes"] .fleet-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin:30px auto 0; }
body[data-page="planes"] .fleet-pagination .btn { min-height:44px; padding:9px 15px; font:18px Cartoon,sans-serif; }
body[data-page="planes"] .fleet-page-numbers { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
body[data-page="planes"] .fleet-page-numbers .btn { min-width:43px; padding:9px; }
body[data-page="planes"] .fleet-page-caption { width:100%; text-align:center; font:15px Cartoon,sans-serif; color:#d7f3ff; text-shadow:0 1px #082a3d; }
@media(max-width:760px) { body[data-page="planes"] .fleet-pagination { gap:10px; } body[data-page="planes"] .fleet-pagination .btn { font-size:15px; padding:8px 10px; } body[data-page="planes"] .fleet-page-numbers { gap:6px; } }

/* Preserve a 10-screen-pixel gap after the fuel count in flight popups. */
.dialog.planes-popup .selected-plane p{column-gap:calc(10px / var(--game-ui-scale,1));}
.dialog.planes-popup .selected-plane .flights-available-label{margin-left:0;}