:root{
  --ink:#e9f1ff; --dim:#8ea3c4; --accent:#4dd0ff; --hot:#ff5b3d;
  --panel:rgba(10,18,34,.82); --edge:rgba(120,180,255,.22);
  --safeT:env(safe-area-inset-top,0px); --safeB:env(safe-area-inset-bottom,0px);
  --safeL:env(safe-area-inset-left,0px); --safeR:env(safe-area-inset-right,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  width:100%;height:100%;overflow:hidden;background:#05080f;color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
  -webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none;
  position:fixed;
}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
/* a mouse drag across a button or the picture must never lift a ghost image of it */
canvas,button,img,svg,#hud,#hud *{-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none}
.hidden{display:none!important}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}

.screen{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column}

/* ---------------- loading ---------------- */
#loading{align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,#132244,#05080f 70%)}
.loadInner{text-align:center;padding:24px}
.loadPlane{font-size:64px;color:var(--accent);animation:fly 2.4s ease-in-out infinite}
@keyframes fly{0%,100%{transform:translateX(-16px) rotate(-6deg)}50%{transform:translateX(16px) rotate(6deg)}}
.loadTitle{margin:18px 0 22px;font-size:22px;font-weight:800;letter-spacing:.22em}
.loadBar{width:min(320px,70vw);height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;margin:0 auto}
#loadFill{height:100%;width:0;background:var(--accent);transition:width .25s ease}
#loadMsg{margin-top:14px;font-size:13px;color:var(--dim);letter-spacing:.06em}

/* ---------------- hangar menu ---------------- */
#menu{
  /* Fades to transparent below the cards so the parked aircraft turning on the
     apron behind shows through, instead of a slab of empty navy. */
  background:linear-gradient(180deg,
    #0b1526 0%, rgba(11,21,38,.94) 26%, rgba(8,14,26,.42) 44%,
    rgba(6,10,20,.28) 66%, rgba(6,10,20,.82) 100%);
  padding:calc(18px + var(--safeT)) calc(16px + var(--safeR)) calc(12px + var(--safeB)) calc(16px + var(--safeL));
}
.menuHead{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex:0 0 auto}
.menuIcon{font-size:34px;color:var(--accent);transform:rotate(-12deg)}
.menuHead h1{font-size:20px;font-weight:800;letter-spacing:.16em}
.menuHead p{font-size:12px;color:var(--dim);margin-top:3px;letter-spacing:.04em}

#planeList{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-auto-rows:max-content;gap:12px;align-content:start;padding:2px}
/* grid-auto-rows:max-content — the cards clip their own overflow, which makes
   their automatic minimum height zero; without content-sized rows a full
   hangar (thirty-odd planes) squeezes every card down to its thumbnail
   instead of letting the list scroll. */
.card{
  position:relative;border:2px solid var(--edge);border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,rgba(30,52,92,.55),rgba(10,18,34,.75));
  padding:14px;transition:transform .12s ease,border-color .12s ease;text-align:left;display:block;width:100%
}
.card:active{transform:scale(.97)}
.card.sel{border-color:var(--accent);box-shadow:0 0 0 3px rgba(77,208,255,.18),0 10px 30px rgba(0,0,0,.45)}
.card canvas{width:100%;height:80px;display:block;margin-bottom:8px}
.cardName{font-size:16px;font-weight:800;letter-spacing:.06em}
.cardSub{font-size:11px;color:var(--dim);margin-top:3px;letter-spacing:.04em}
/* Card corners: the NEW / FAVOURITE pills top left, the star top right. */
.cardTags{position:absolute;top:10px;left:10px;display:flex;gap:5px;pointer-events:none}
.fav,.tagNew{font-size:9px;font-weight:900;letter-spacing:.1em;padding:3px 7px;border-radius:99px}
.fav{background:var(--accent);color:#04121c}
.tagNew{background:var(--hot);color:#fff;box-shadow:0 0 10px rgba(255,91,61,.45)}
/* The star: a tap target of its own in the corner (hud.js stops the tap
   there, so it never picks the card or opens the BUY sheet underneath). */
.favStar{position:absolute;top:5px;right:5px;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:19px;line-height:1;color:rgba(233,241,255,.6);background:rgba(5,8,15,.45);
  transition:transform .12s ease,color .12s ease}
.favStar:active{transform:scale(.85)}
.favStar.on{color:#ffd24a;text-shadow:0 0 8px rgba(255,210,74,.6)}
body.desk .favStar:hover{color:var(--ink)}
body.desk .favStar.on:hover{color:#ffe78a}

/* ---------------- hangar: the shelves ----------------
   One row between the title and the cards: a tab per kind of aeroplane, each
   with how many are on that shelf, the starred ones last, and - at a desk
   only - a search box at the end. On a tablet the tabs wrap onto a second
   line rather than hide off the edge; on a phone they are one swipeable strip
   (see the phone rules below). */
.hangarBar{flex:0 0 auto;display:flex;align-items:flex-start;gap:10px;margin:0 0 10px}
.hangarTabs{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:6px;touch-action:pan-x;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hangarTabs::-webkit-scrollbar{display:none}
.hangarTab{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  border:2px solid var(--edge);border-radius:99px;padding:6px 7px 6px 12px;background:rgba(10,18,34,.62);
  font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--dim);
  transition:border-color .12s ease,background .12s ease}
.hangarTab b{min-width:22px;padding:2px 6px;border-radius:99px;background:rgba(120,180,255,.16);color:var(--ink);
  font-size:10px;font-weight:900;letter-spacing:.02em;text-align:center;font-variant-numeric:tabular-nums}
.hangarTab:active{transform:scale(.96)}
.hangarTab.sel{border-color:var(--accent);color:var(--ink);background:rgba(77,208,255,.16)}
.hangarTab.sel b{background:var(--accent);color:#04121c}
/* the two special shelves read in gold, like the MEGA row and the stars */
.hangarTab[data-cat="mega"],.hangarTab[data-cat="favs"]{border-color:rgba(255,210,74,.3);color:#cdb774}
.hangarTab[data-cat="mega"].sel,.hangarTab[data-cat="favs"].sel{border-color:#ffd24a;color:#ffe89a;background:rgba(92,70,20,.5)}
.hangarTab[data-cat="mega"].sel b,.hangarTab[data-cat="favs"].sel b{background:#ffd24a;color:#221a00}
/* The search box: never on a touch screen (body.desk is main.js's word for
   "a mouse and a keyboard"); / puts the cursor in it, Esc empties it. */
.hangarSearch{display:none;flex:0 0 220px;min-width:0;border:2px solid var(--edge);border-radius:99px;padding:7px 14px;
  background:rgba(10,18,34,.62);color:var(--ink);font:inherit;font-size:12px;font-weight:700;letter-spacing:.04em;
  outline:none;-webkit-user-select:text;user-select:text;-webkit-appearance:none;appearance:none}
.hangarSearch::placeholder{color:var(--dim)}
.hangarSearch:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(77,208,255,.18)}
body.desk .hangarSearch{display:block}
/* Tabs and search only ever HIDE cards: they are built once and keep their order. */
.card.off,.hangarGroup.off{display:none}
/* An empty shelf says so: no stars yet, or a search that found nothing. */
.hangarEmpty{grid-column:1/-1;text-align:center;color:var(--dim);font-size:14px;font-weight:700;letter-spacing:.04em;
  padding:34px 12px;border:2px dashed var(--edge);border-radius:16px;background:rgba(10,18,34,.4)}

.menuFoot{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding-top:12px}
#planeStats{flex:1;font-size:11px;color:var(--dim);line-height:1.65;letter-spacing:.03em;
  text-shadow:0 1px 6px rgba(0,0,0,.9)}
#planeStats b{color:var(--ink);font-weight:700}
/* The record to beat, sat above the factsheet in gold so it reads first. */
.statBest{color:#ffd24a;font-size:13px;margin-bottom:3px}
.statBest b{color:#ffd24a !important}
.bigBtn{
  background:linear-gradient(180deg,#5ee0ff,#1aa6d8);color:#04121c;font-size:19px;font-weight:900;
  letter-spacing:.14em;padding:17px 34px;border-radius:14px;box-shadow:0 6px 0 #0d6f96,0 12px 26px rgba(0,0,0,.45)
}
.bigBtn:active{transform:translateY(4px);box-shadow:0 2px 0 #0d6f96}
.ghostBtn{border:2px solid var(--edge);border-radius:12px;padding:14px 22px;font-size:13px;
  font-weight:700;letter-spacing:.1em;color:var(--dim)}

/* ---------------- HUD ---------------- */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none}
#hud button{pointer-events:auto}

#topLeft{position:absolute;top:calc(10px + var(--safeT));left:calc(12px + var(--safeL));
  display:flex;align-items:center;gap:10px;
  /* Never run into the readouts in the middle: when the name tag or the
     AUTOPILOT chip do not fit beside the two buttons (phones, portrait, long
     plane names) they drop onto a second line under them instead. */
  flex-wrap:wrap;max-width:max(102px,calc(50vw - 215px))}
.iconBtn{width:46px;height:46px;border-radius:12px;background:var(--panel);border:1px solid var(--edge);
  font-size:20px;display:flex;align-items:center;justify-content:center}
#planeTag{background:var(--panel);border:1px solid var(--edge);border-radius:10px;padding:9px 13px;
  font-size:12px;font-weight:800;letter-spacing:.14em}

#readout{position:absolute;top:calc(10px + var(--safeT));left:50%;transform:translateX(-50%);
  display:flex;gap:8px}
.ro{background:var(--panel);border:1px solid var(--edge);border-radius:10px;padding:7px 14px;
  text-align:center;min-width:88px}
.ro span{display:block;font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.ro em{display:block;font-size:8px;color:var(--dim);font-style:normal;letter-spacing:.16em;margin-top:2px}

#warn{position:absolute;top:38%;left:50%;transform:translateX(-50%);
  color:var(--hot);font-size:34px;font-weight:900;letter-spacing:.18em;
  text-shadow:0 0 24px rgba(255,91,61,.8);animation:blink .5s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}

#throttle{position:absolute;left:calc(16px + var(--safeL));bottom:calc(26px + var(--safeB));
  width:74px;height:min(46vh,300px);border-radius:18px;background:var(--panel);
  border:1px solid var(--edge);overflow:hidden;pointer-events:auto;touch-action:none}
#thrFill{position:absolute;left:0;right:0;bottom:0;height:70%;
  background:linear-gradient(180deg,rgba(77,208,255,.85),rgba(26,166,216,.45));transition:height .05s linear}
#thrLabel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding-top:12px;font-size:9px;letter-spacing:.14em;color:#fff;text-shadow:0 1px 3px #000;pointer-events:none}
#thrLabel b{font-size:19px;letter-spacing:0;margin-top:3px}

#rightBtns{position:absolute;right:calc(16px + var(--safeR));bottom:calc(26px + var(--safeB));
  display:flex;flex-direction:column;gap:10px}
.rBtn{width:78px;height:64px;border-radius:16px;background:var(--panel);border:1px solid var(--edge);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.rBtn b{font-size:19px;line-height:1}
.rBtn span{font-size:8.5px;letter-spacing:.12em;color:var(--dim)}
.rBtn:active{transform:scale(.94)}
.rBtn.on{border-color:var(--accent)}
.rBtn.on b,.rBtn.on span{color:var(--accent)}

/* AEROBATICS: g meter + attitude ball, top right. The ball is a disc of sky
   over ground; aerobatics.js turns and slides the horizon inside it. */
#aeroHud{position:absolute;top:calc(10px + var(--safeT));right:calc(16px + var(--safeR));
  display:flex;align-items:center;gap:8px;pointer-events:none}
#aeroBall{position:relative;width:50px;height:50px;border-radius:50%;overflow:hidden;
  border:2px solid var(--edge);background:#1b2a44;box-shadow:inset 0 0 8px rgba(0,0,0,.6)}
#aeroHorizon{position:absolute;left:-40px;top:-65px;width:130px;height:180px;display:block;
  background:linear-gradient(180deg,#3f8fd8 0 50%,#7a5a2e 50% 100%);transform-origin:65px 90px}
#aeroBall b{position:absolute;left:50%;top:50%;width:22px;height:2px;margin:-1px 0 0 -11px;
  background:#ffd23f;box-shadow:0 0 4px #000}
#aeroBall b::after{content:"";position:absolute;left:9px;top:-3px;width:4px;height:4px;border-radius:50%;background:#ffd23f}
#aeroG span{color:var(--ink)}
#aeroG[data-band="hi"] span{color:var(--hot)}
#aeroG[data-band="neg"] span{color:#ffc400}
#smokeBtn[data-colour="red"] b{filter:drop-shadow(0 0 5px #ff3b3b)}
#smokeBtn[data-colour="blue"] b{filter:drop-shadow(0 0 5px #4d7dff)}
#smokeBtn[data-colour="red"] span{color:#ff6161}
#smokeBtn[data-colour="white"] span{color:#fff}
#smokeBtn[data-colour="blue"] span{color:#79a2ff}
#aeroChip:not(.sel){color:var(--dim)}

#steerRing{position:absolute;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;
  border:2px solid rgba(255,255,255,.22);pointer-events:none;transition:opacity .18s}
#steerDot{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;left:50%;top:50%;border-radius:50%;
  background:rgba(255,255,255,.3);border:2px solid rgba(255,255,255,.55)}

#hint{position:absolute;bottom:calc(8px + var(--safeB));left:50%;transform:translateX(-50%);
  font-size:11px;color:rgba(255,255,255,.55);letter-spacing:.08em;white-space:nowrap;
  text-shadow:0 1px 4px #000;transition:opacity .6s}
/* At a desk the hint is the key legend: it stays all flight, and the first
   flight ever it is lit up like the coach line for a few seconds. */
#hint.legend{color:rgba(255,255,255,.78);letter-spacing:.04em;padding:2px 12px;border-radius:99px;
  background:rgba(10,18,34,.42);border:1px solid transparent;
  transition:opacity .6s,background-color .6s,border-color .6s,color .6s}
#hint.legend.hot{color:#fff;background:rgba(20,32,54,.92);border-color:var(--accent)}

/* ---------------- item bar ----------------
   Five big square slots, bottom centre, between the POWER lever and the
   button column and just above the hint line. The whole strip takes pointer
   events (not only the buttons) so a thumb that lands in a gap does not start
   steering the aeroplane instead. */
#itemBar{position:absolute;left:50%;bottom:calc(28px + var(--safeB));transform:translateX(-50%);
  display:flex;gap:10px;padding:7px;border-radius:22px;pointer-events:auto;touch-action:none;
  background:rgba(10,18,34,.5);border:1px solid var(--edge)}
.itemSlot{position:relative;width:76px;height:76px;border-radius:16px;background:var(--panel);
  border:2px solid var(--edge);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.itemSlot b{font-size:34px;line-height:1}
.itemSlot .anvilGlyph{width:38px;height:34px;display:block}
.itemSlot span{font-size:8.5px;font-weight:800;letter-spacing:.12em;color:var(--dim)}
/* the key to press - only worth showing where there is a keyboard */
.itemSlot i{position:absolute;top:4px;left:7px;font-size:9px;font-style:normal;font-weight:800;
  color:var(--dim);display:none}
@media (hover:hover) and (pointer:fine){.itemSlot i{display:block}}
body.desk .itemSlot i{display:block}   /* ...or a keyboard turned up on a touch screen */
.itemSlot:active{transform:scale(.92);border-color:var(--accent)}
/* the toy a game controller's bumpers have picked: press a stick to use it */
.itemSlot.cursor{border-color:#ffd24a;box-shadow:0 0 0 3px rgba(255,210,74,.35)}
/* Cooling down: the slot greys out under a dark face that a bright wedge
   sweeps away clockwise from twelve o'clock (--cd is written by hud.js), with
   the seconds left in the middle. Ready again = the face is gone. */
.itemCd{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  font-style:normal;border-radius:14px;
  background:conic-gradient(rgba(4,8,16,.12) var(--cd,360deg),rgba(4,8,16,.72) 0)}
.itemSlot.cooling .itemCd{display:flex}
.itemSlot.cooling b,.itemSlot.cooling .anvilGlyph,.itemSlot.cooling span{filter:grayscale(.85);opacity:.6}
.itemCd u{text-decoration:none;font-size:28px;font-weight:900;color:#fff;text-shadow:0 2px 8px #000}

/* ---------------- crash report ---------------- */
#crash{align-items:center;justify-content:center;background:rgba(4,8,16,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:20px}
#crashCard{width:min(430px,92vw);background:var(--panel);border:2px solid rgba(255,91,61,.45);
  border-radius:22px;padding:26px;box-shadow:0 24px 70px rgba(0,0,0,.6);
  animation:pop .32s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{from{transform:scale(.82);opacity:0}to{transform:scale(1);opacity:1}}
#crashTitle{font-size:29px;font-weight:900;letter-spacing:.14em;color:var(--hot);text-align:center;margin-bottom:14px}
.crow{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08);
  font-size:13px;letter-spacing:.04em}
.crow span{color:var(--dim)}
.crow b{font-weight:800;font-variant-numeric:tabular-nums}
.crow b small{font-size:11px;font-weight:600;color:var(--dim)}
#crashScoreWrap{display:flex;justify-content:space-between;align-items:center;margin:12px 0 16px}
#crashScoreWrap span{font-size:11px;color:var(--dim);letter-spacing:.16em}
#crashScoreWrap b{font-size:36px;font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums}
.crashBtns{display:flex;flex-direction:column;gap:10px}
.crashBtns .bigBtn,.crashBtns .ghostBtn{width:100%;text-align:center}
/* A tall card (lots of rows plus the black box) never pushes FLY AGAIN off
   the bottom of an iPad: the card stops at the screen and its rows scroll. */
#crashCard{max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);display:flex;flex-direction:column}
#crashRows{overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
/* The BLACK BOX (src/blackbox.js, hud.setBlackBox): its name and the verdict
   on the top line - the photo of the moment between them, when there is one -
   then six little dials, three across. */
.bbox{margin-top:8px;padding:6px 10px 7px;border-radius:12px;background:rgba(255,255,255,.045);
  border:1px solid rgba(77,208,255,.22)}
.bbHead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid rgba(255,255,255,.08)}
.bbHead span{font-size:10px;font-weight:900;letter-spacing:.2em;color:var(--accent)}
.bbHead b{font-size:14px;font-weight:900;letter-spacing:.04em}
.bbHead.ok b{color:#5ff08a} .bbHead.meh b{color:#ffd24a} .bbHead.no b{color:#ff8a70}
.bbGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px 10px}
.bbCell{display:flex;flex-direction:column;min-width:0}
.bbCell span{font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bbCell b{display:flex;align-items:baseline;gap:5px;min-width:0;font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap}
.bbCell b em{font-style:normal;flex:none}           /* the number / the part: never cut */
.bbCell b small{font-size:9.5px;font-weight:700;color:var(--dim);letter-spacing:.02em;min-width:0;overflow:hidden;text-overflow:ellipsis}  /* the small print gives way first */
.bbShot{width:46px;height:30px;object-fit:cover;border-radius:6px;border:2px solid rgba(255,255,255,.5);cursor:pointer;flex:none}
/* tapped: the photo comes up big over the card; tap it again to put it back */
.bbox.big .bbShot{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60;
  width:min(92vw,720px);height:auto;max-height:88vh;object-fit:contain;border-width:3px;border-radius:14px;
  box-shadow:0 0 0 100vmax rgba(4,8,16,.6),0 20px 60px rgba(0,0,0,.7)}

/* ---------------- kid-usability layer ---------------- */
#beacon{position:absolute;display:flex;align-items:center;gap:6px;pointer-events:none;
  background:rgba(255,196,0,.92);color:#221a00;border-radius:99px;padding:8px 14px;
  font-size:15px;font-weight:900;letter-spacing:.08em;box-shadow:0 4px 14px rgba(0,0,0,.4);
  transform:translate(-50%,-50%);z-index:12}
#beaconArrow{display:inline-block;font-size:18px;line-height:1}

/* bottom: clear of the item bar (which tops out at 120px), not just the hint */
#coach{position:fixed;left:50%;bottom:calc(134px + var(--safeB));transform:translateX(-50%);
  background:rgba(20,32,54,.92);border:2px solid var(--accent);border-radius:16px;
  padding:13px 22px;font-size:19px;font-weight:800;letter-spacing:.06em;color:#fff;
  white-space:nowrap;z-index:12;pointer-events:none;animation:coachPop .3s ease}
@keyframes coachPop{from{transform:translateX(-50%) scale(.85);opacity:0}}

#speedBar{position:absolute;top:calc(66px + var(--safeT));left:50%;transform:translateX(-50%);
  width:250px;height:22px;border-radius:11px;background:rgba(10,18,34,.8);
  border:1px solid var(--edge);overflow:hidden;pointer-events:none}
#speedFill{position:absolute;inset:0;width:0%;background:linear-gradient(90deg,#2e9be0,#4dd0ff);
  transition:width .12s linear}
#speedFill.ready{background:linear-gradient(90deg,#27c454,#5ff08a)}
#speedLabel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;letter-spacing:.14em;color:#fff;text-shadow:0 1px 3px #000}

#throttle.pulse,.rBtn.pulse{animation:thrPulse 1s ease-in-out infinite}
@keyframes thrPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,196,0,.0)}
  50%{box-shadow:0 0 0 8px rgba(255,196,0,.55)}}

.rBtn b{font-size:24px}

/* ---------------- trouble + autopilot panels ---------------- */
.panelOverlay{position:fixed;inset:0;z-index:24;display:flex;align-items:center;justify-content:center;
  background:rgba(4,8,16,.55)}
.panelCard{width:min(460px,94vw);max-height:88vh;overflow-y:auto;background:var(--panel);
  border:2px solid var(--edge);border-radius:22px;padding:22px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);animation:pop .28s cubic-bezier(.2,1.5,.4,1)}
.panelCard h3{font-size:19px;font-weight:900;letter-spacing:.12em;text-align:center;margin-bottom:16px}
.panelFoot{display:flex;gap:10px;margin-top:16px}
.panelFoot>*{flex:1;text-align:center}
.bigBtn.small{font-size:15px;padding:14px 18px}

/* The TROUBLE panel: fourteen cards in four groups, three across. The card is
   wider than the other panels so three columns stay tappable, and the footer
   (FIX EVERYTHING / RANDOM / DONE) sticks to the bottom of the scrolling card
   so it is always on screen however many cards there are. */
#failPanel .panelCard{width:min(640px,94vw);max-height:94vh;padding-bottom:0}
#failPanel h3{margin-bottom:8px}
.failGroup{font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--dim);
  margin:8px 2px 5px}
.failGroup:first-child{margin-top:0}
.failCards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.failCard{border:2px solid var(--edge);border-radius:16px;padding:8px 8px 7px;text-align:center;
  background:rgba(30,52,92,.35);transition:border-color .15s}
.failCard b{display:block;font-size:28px;margin-bottom:3px}
.failCard span{font-size:12px;font-weight:800;letter-spacing:.06em}
.failCard em{display:block;font-size:9px;color:var(--dim);font-style:normal;margin-top:4px;letter-spacing:.08em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.failCard.on{border-color:var(--hot);background:rgba(255,91,61,.18);
  box-shadow:0 0 0 3px rgba(255,91,61,.18)}
.failCard.on em{color:#ffb3a3;font-weight:800}
.failCard:active{transform:scale(.95)}
.failFoot{position:sticky;bottom:0;margin:10px -22px 0;padding:10px 22px 14px;
  background:rgba(10,18,34,.96);border-top:1px solid var(--edge);border-radius:0 0 20px 20px}
.failFoot .ghostBtn{padding:14px 8px;font-size:12px;letter-spacing:.06em;white-space:nowrap}
#randomFailBtn{border-color:#f0a819;color:#ffd764}
/* the count on the TROUBLE button: how many things are broken right now */
#failBtn{position:relative}
#failCount{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;border-radius:11px;padding:0 6px;
  background:var(--hot);color:#fff;font-size:12px;font-weight:900;font-style:normal;line-height:22px;text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.5)}
/* LIGHTS OUT: the readouts lose their numbers */
#readout.dark .ro{background:rgba(4,6,10,.92);border-color:rgba(255,255,255,.08)}
#readout.dark .ro span{color:#39404d}
/* FUEL: the draining gauge under the readouts - two halves, left wing then right wing, a hair apart */
#fuelGauge{position:absolute;top:calc(96px + var(--safeT));left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;pointer-events:none;
  background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:6px 12px}
#fuelGauge span{font-size:11px;font-weight:900;letter-spacing:.12em;white-space:nowrap}
#fuelGauge b{font-size:13px;font-weight:900;color:var(--hot)}
#fuelTrack{width:180px;height:16px;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden;
  border:1px solid var(--edge);display:flex}
#fuelFill,#fuelFillR{height:100%;width:50%;flex:none;background:linear-gradient(90deg,#27c454,#5ff08a);transition:width .3s linear}
#fuelFill{box-shadow:inset -2px 0 0 rgba(0,0,0,.35)}
#fuelFillR{margin-left:auto}
#fuelGauge.low #fuelFill,#fuelGauge.low #fuelFillR{background:linear-gradient(90deg,#d8352c,#ff7b3d)}
#fuelGauge.low{animation:blink .7s steps(2) infinite}
#fuelGauge.empty{animation:none;border-color:var(--hot)}

.apRow{display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.08)}
.apRow span{flex:1;font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--dim)}
.apRow b{min-width:74px;text-align:right;font-size:23px;font-weight:900;font-variant-numeric:tabular-nums}
.apRow em{font-size:10px;color:var(--dim);font-style:normal;width:40px}
.stepBtn{width:58px;height:52px;border-radius:14px;background:rgba(77,208,255,.15);
  border:2px solid var(--edge);font-size:26px;font-weight:900;color:var(--accent)}
.stepBtn:active{background:rgba(77,208,255,.4)}
#apToggleBtn{flex:2;white-space:nowrap}     /* "TURN AUTOPILOT OFF" on one line */
#apToggleBtn.engaged{background:linear-gradient(180deg,#5ff08a,#27c454);box-shadow:0 6px 0 #17813a}

#apChip{background:rgba(39,196,84,.2);border:1px solid #27c454;border-radius:10px;
  padding:9px 12px;font-size:11px;font-weight:800;letter-spacing:.1em;color:#5ff08a}
/* a game controller is plugged in and talking */
#padChip{background:rgba(77,208,255,.16);border:1px solid var(--accent);border-radius:10px;
  padding:9px 12px;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--accent)}

/* ---------------- outfit picker ---------------- */
#outfitRow{display:flex;flex-direction:column;gap:7px;margin-right:14px}
/* All the pilots in one column would be taller than the whole foot, so where
   there is the width for it they stand in two ranks of up to four. (Narrower
   than that the factsheet needs the room more, and the column runs long.) */
@media (min-width:900px){
  #outfitRow{display:grid;grid-template-columns:auto auto;grid-template-rows:repeat(5,auto);grid-auto-flow:column}
  #outfitRow .outfitTitle{grid-column:1/-1;grid-row:1}
}
/* WORLD: six chips on one line would elbow the factsheet into a sliver, so
   they wrap under their title, two short rows, like the pilot column beside. */
#biomeRow{display:flex;flex-wrap:wrap;align-content:center;gap:7px;max-width:min(330px,30vw)}
#biomeRow .outfitTitle{flex-basis:100%}
.outfitTitle{font-size:9px;letter-spacing:.16em;color:var(--dim);font-weight:800}
.outfitChip{border:2px solid var(--edge);border-radius:10px;padding:8px 12px;font-size:12px;
  font-weight:700;letter-spacing:.04em;color:var(--ink);text-align:left;white-space:nowrap}
.outfitChip.sel{border-color:var(--accent);background:rgba(77,208,255,.14)}

/* ---------------- music settings ---------------- */
/* Same column-of-chips shape as the pilot picker, so it reads as one more
   thing you set before you fly rather than a settings panel. */
#musicRow{display:flex;flex-direction:column;gap:7px;margin-right:14px;width:132px;flex:0 0 auto}
#musicBtn{width:100%}
#musicBtn:not(.sel){color:var(--dim)}

/* The volume slider. Styled by hand because the stock control is tiny and
   grey; the track is drawn from a --fill custom property that music.js keeps
   in step with the value, so there is no extra element to position. */
.musicVol{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:none;
  touch-action:none;cursor:pointer;
}
.musicVol::-webkit-slider-runnable-track{
  height:10px;border-radius:5px;border:1px solid var(--edge);
  background:linear-gradient(90deg,var(--accent) var(--fill,40%),rgba(255,255,255,.12) var(--fill,40%));
}
.musicVol::-moz-range-track{
  height:10px;border-radius:5px;border:1px solid var(--edge);
  background:linear-gradient(90deg,var(--accent) var(--fill,40%),rgba(255,255,255,.12) var(--fill,40%));
}
.musicVol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  margin-top:-8px;background:#e9f1ff;border:2px solid var(--accent);
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.musicVol::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:#e9f1ff;border:2px solid var(--accent);
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.musicVol.off{opacity:.35}
#soundBtn,#graphicsBtn{width:100%}

/* ---------------- sound panel ---------------- */
/* Four rows: name (+ a one-line "what is this"), a fat slider, the number.
   The thumb is 30px so a small finger lands on it first time; the track fill
   comes from the same --fill trick as the hangar's music slider. */
.soundCard{width:min(480px,94vw)}
.volRow{display:grid;grid-template-columns:112px 1fr 44px;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.volName b{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;white-space:nowrap}
.volName em{display:block;font-size:9px;color:var(--dim);font-style:normal;letter-spacing:.06em;
  margin-top:3px;white-space:nowrap}
.volPct{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right;color:var(--accent)}
.vol{
  -webkit-appearance:none;appearance:none;width:100%;height:38px;background:none;
  touch-action:none;cursor:pointer;
}
.vol::-webkit-slider-runnable-track{
  height:12px;border-radius:6px;border:1px solid var(--edge);
  background:linear-gradient(90deg,var(--accent) var(--fill,100%),rgba(255,255,255,.12) var(--fill,100%));
}
.vol::-moz-range-track{
  height:12px;border-radius:6px;border:1px solid var(--edge);
  background:linear-gradient(90deg,var(--accent) var(--fill,100%),rgba(255,255,255,.12) var(--fill,100%));
}
.vol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;
  margin-top:-10px;background:#e9f1ff;border:3px solid var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.55);
}
.vol::-moz-range-thumb{
  width:30px;height:30px;border-radius:50%;background:#e9f1ff;border:3px solid var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.55);
}
.vol.off{opacity:.35}
/* Muted: the whole card says so - sliders greyed, the switch lit up red. */
.soundCard.muted .vol,.soundCard.muted .volPct{opacity:.35}
#muteBtn.on{border-color:var(--hot);color:var(--hot);background:rgba(255,91,61,.14)}
#soundHudBtn.on{border-color:var(--hot)}
.soundCard .panelFoot .ghostBtn{padding:14px 10px}
/* The tune row: name of what is playing, and a skip button. */
.trackRow{grid-template-columns:112px 1fr auto}
.trackName{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nextBtn{padding:10px 14px;font-size:12px;letter-spacing:.08em;white-space:nowrap}
/* (short-screen panel sizes live in the PHONES section at the end) */

/* ---------------- graphics panel ---------------- */
/* Five fat buttons in a row (they wrap two-up on a phone), one line under them
   saying what AUTO is drawing right now, DONE. Same card as the sound panel. */
.graphicsCard{width:min(500px,94vw)}
.graphicsHint{font-size:12px;line-height:1.5;color:var(--dim);text-align:center;margin:-6px 4px 14px;letter-spacing:.03em}
.graphicsHint b{color:var(--ink)}
.graphicsOpts{display:grid;grid-template-columns:repeat(auto-fit,minmax(82px,1fr));gap:8px}
.gfxOpt{border:2px solid var(--edge);border-radius:12px;padding:13px 4px 11px;text-align:center;color:var(--ink);
  background:rgba(10,18,34,.5)}
.gfxOpt b{display:block;font-size:13px;font-weight:900;letter-spacing:.1em}
.gfxOpt em{display:block;font-size:9px;font-style:normal;color:var(--dim);letter-spacing:.05em;margin-top:5px;white-space:nowrap}
.gfxOpt.sel{border-color:var(--accent);background:rgba(77,208,255,.14)}
.gfxOpt.sel b{color:var(--accent)}
.graphicsNow{margin-top:14px;text-align:center;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--accent);
  text-transform:uppercase}

/* ---------------- keys panel (at a desk) ---------------- */
.keysCard{width:min(560px,94vw);background:rgba(10,18,34,.96)}
#keysList{max-height:62vh;overflow-y:auto;padding-right:4px}
.keysGroup{font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--accent);margin:12px 2px 4px}
.keysGroup:first-child{margin-top:0}
.keyRow{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:12px;
  padding:5px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
.keyRow span{display:flex;flex-wrap:wrap;gap:5px}
.keyRow em{font-style:normal;font-size:12px;color:var(--ink);letter-spacing:.02em}
kbd{display:inline-block;min-width:26px;padding:3px 8px;border-radius:7px;text-align:center;
  font:800 11px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;
  color:var(--ink);background:rgba(77,208,255,.12);border:1px solid var(--edge);border-bottom-width:2px}

/* ---------------- crash cam ---------------- */
.bigBtn.watch{background:linear-gradient(180deg,#ffd75e,#f0a819);box-shadow:0 6px 0 #a86f06,0 12px 26px rgba(0,0,0,.45)}
#replayTag{position:fixed;z-index:22;top:calc(14px + var(--safeT));left:50%;transform:translateX(-50%);
  background:rgba(240,168,25,.92);color:#221a00;border-radius:99px;padding:9px 18px;
  font-size:14px;font-weight:900;letter-spacing:.12em;z-index:12;animation:blink 1.2s steps(2) infinite}
#snapBtn{position:fixed;z-index:22;right:calc(20px + var(--safeR));bottom:calc(30px + var(--safeB));
  width:92px;height:92px;border-radius:50%;background:rgba(255,255,255,.92);z-index:12;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:30px;box-shadow:0 6px 20px rgba(0,0,0,.5);border:4px solid #f0a819}
#snapBtn span{font-size:10px;font-weight:900;letter-spacing:.1em;color:#7a5500}
#snapBtn:active{transform:scale(.92)}
/* five photos a flight: at 5/5 the camera greys out */
#snapBtn.full{opacity:.55;border-color:#9a9a9a;filter:grayscale(.8)}
#skipBtn{position:fixed;z-index:22;left:calc(20px + var(--safeL));bottom:calc(30px + var(--safeB));
  width:76px;height:76px;border-radius:50%;background:rgba(20,26,40,.88);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:26px;box-shadow:0 6px 20px rgba(0,0,0,.5);border:3px solid rgba(255,255,255,.5)}
#skipBtn span{font-size:10px;font-weight:900;letter-spacing:.1em;color:#cfd8e8}
#skipBtn:active{transform:scale(.92)}
/* Back three seconds, and quarter speed: the same round buttons, in a row
   beside SKIP along the bottom-left (the right corner is the camera's). */
#rewBtn,#slowBtn{position:fixed;z-index:22;bottom:calc(30px + var(--safeB));
  width:76px;height:76px;border-radius:50%;background:rgba(20,26,40,.88);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:26px;box-shadow:0 6px 20px rgba(0,0,0,.5);border:3px solid rgba(255,255,255,.5)}
#rewBtn{left:calc(110px + var(--safeL))}
#slowBtn{left:calc(200px + var(--safeL))}
#rewBtn span,#slowBtn span{font-size:10px;font-weight:900;letter-spacing:.1em;color:#cfd8e8}
#rewBtn:active,#slowBtn:active{transform:scale(.92)}
/* lit while the replay crawls */
#slowBtn.on{background:rgba(240,168,25,.95);border-color:#fff3c4;color:#221a00;box-shadow:0 0 0 4px rgba(240,168,25,.35),0 6px 20px rgba(0,0,0,.5)}
#slowBtn.on span{color:#5a4100}
#snapFlash{position:fixed;inset:0;background:#fff;z-index:30;pointer-events:none;
  animation:flash .35s ease-out forwards}
@keyframes flash{from{opacity:.9}to{opacity:0}}

.rBtn.eject{border-color:#d8352c;background:rgba(120,18,12,.55)}
.rBtn.eject b{filter:hue-rotate(0deg)}

/* ---------------- GET OUT & LOOK (src/groundwalk.js, issue #163) ----------------
   The crash card's green button, and <body class="wreckwalk">: the HUD is up
   again over the wreck while the pilot walks round it, but only the corner
   buttons, the camera toggle and BACK TO REPORT mean anything on foot - the
   power lever, the wheels, the readouts and the toys stay out of it. */
.bigBtn.look{background:linear-gradient(180deg,#a6f27f,#3fba4e);box-shadow:0 6px 0 #237a33,0 12px 26px rgba(0,0,0,.45)}
.bigBtn.look:active{box-shadow:0 2px 0 #237a33}
.rBtn.back{border-color:var(--accent);background:rgba(20,60,90,.72);width:auto;min-width:78px;padding:0 10px;align-self:flex-end}
.rBtn.back span{color:var(--ink);white-space:nowrap}
body.wreckwalk #readout,body.wreckwalk #throttle,body.wreckwalk #warn,body.wreckwalk #itemBar,body.wreckwalk #hint,
body.wreckwalk #photoBtn,body.wreckwalk #apChip,body.wreckwalk #speedBar,body.wreckwalk #beacon,body.wreckwalk #fuelGauge,
body.wreckwalk #aeroHud{display:none !important}
body.wreckwalk #rightBtns>button:not(#camBtn):not(#wreckBackBtn){display:none !important}

/* ---------------- photo mode (src/photomode.js) ----------------
   <body class="photo">: the HUD and everything that talks over the picture
   go away, a clear layer catches the drags that walk the camera round the
   aeroplane, and a small pill of buttons floats at the bottom. */
#photoLayer,#photoBar{display:none}
body.photo #hud,body.photo #coach,body.photo #nearMiss,body.photo #failPanel,body.photo #apPanel,body.photo #soundPanel,body.photo #keysPanel{visibility:hidden !important;pointer-events:none !important}
body.photo #hud button{pointer-events:none !important}
body.photo #photoLayer{display:block;position:fixed;inset:0;z-index:23;touch-action:none;cursor:grab}
body.photo #photoLayer:active{cursor:grabbing}
body.photo #photoBar{display:flex;position:fixed;z-index:26;left:50%;bottom:calc(22px + var(--safeB));
  transform:translateX(-50%);align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  max-width:calc(100vw - 24px);padding:8px 12px 6px;border-radius:20px;
  background:rgba(12,18,32,.78);border:1px solid var(--edge);box-shadow:0 8px 24px rgba(0,0,0,.45)}
#photoBar button{min-width:46px;height:46px;border-radius:14px;background:var(--panel);border:1px solid var(--edge);
  color:var(--ink);font-size:18px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 12px}
#photoBar button:active{transform:scale(.94)}
#photoBar .phSnap{background:rgba(255,255,255,.92);border:3px solid #f0a819;color:#5a4100;font-size:22px;padding:0 16px}
#photoBar .phSnap span{font-size:11px;letter-spacing:.12em;color:#7a5500}
#photoBar .phSky{min-width:96px;text-align:center;font-size:12px;font-weight:900;letter-spacing:.12em;color:var(--ink)}
#photoBar .phHint{flex-basis:100%;text-align:center;font-size:10px;letter-spacing:.06em;color:var(--dim);padding-top:2px}
#photoBtn.on{border-color:var(--accent);color:var(--accent)}

/* A real <button>, top level and above every screen (menu/crash are 20, the
   panels 24), so no overlay can swallow its tap and the steering handler in
   controls.js (which leaves buttons alone) never grabs the finger first. */
#updatePill{position:fixed;z-index:40;left:50%;bottom:calc(28px + var(--safeB));transform:translateX(-50%);
  background:#f0a819;color:#221a00;font-weight:900;letter-spacing:.08em;font-size:14px;
  padding:12px 22px;border-radius:99px;box-shadow:0 6px 18px rgba(0,0,0,.45);cursor:pointer;
  animation:blink 1.4s steps(2) infinite}
/* The hangar's bottom edge is wall-to-wall buttons; up top is free there. */
#menu:not(.hidden) ~ #updatePill{bottom:auto;top:calc(20px + var(--safeT))}
/* "Updated to the latest version": a small note at the top that leaves by
   itself, above every screen (the hangar is up by the time it shows). */
#toast{position:fixed;z-index:45;left:50%;top:calc(18px + var(--safeT));transform:translateX(-50%);
  background:rgba(20,26,40,.94);color:var(--ink);border:1px solid var(--accent);border-radius:99px;
  padding:9px 18px;font-size:13px;font-weight:800;letter-spacing:.06em;white-space:nowrap;
  pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.45);animation:toastIn .3s ease-out}
@keyframes toastIn{from{transform:translateX(-50%) translateY(-14px);opacity:0}}
/* ?perf: the frame-timing panel (src/perf.js). Top left under the menu and
   photo buttons - clear of the POWER lever below it and of the button column
   on the right, so it can stay up while somebody actually flies. Above the
   hangar and the panels (it is a tool), under the toast. Tapping it unfolds
   the full list; it may then run long, so it scrolls inside itself. */
#perfBox{position:fixed;z-index:44;left:calc(12px + var(--safeL));top:calc(70px + var(--safeT));margin:0;
  max-height:calc(100vh - 150px - var(--safeT) - var(--safeB));overflow:auto;
  background:rgba(8,12,22,.72);color:#d8f0ff;border:1px solid rgba(120,190,255,.35);border-radius:8px;
  padding:6px 8px;font:11px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;
  pointer-events:auto;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
#perfBox.expanded{background:rgba(8,12,22,.86)}

#nearMiss{position:fixed;z-index:21;left:50%;top:32%;transform:translateX(-50%);
  background:rgba(20,26,36,.85);border:3px solid #f0a819;border-radius:16px;
  padding:10px 22px;font-size:22px;font-weight:900;letter-spacing:.06em;color:#ffd764;
  text-align:center;pointer-events:none;white-space:nowrap;
  animation:nearmiss 1.6s ease-out forwards}
#nearMiss small{display:block;font-size:12px;color:#9fb0c8;letter-spacing:.14em}
@keyframes nearmiss{
  0%{opacity:0;transform:translateX(-50%) scale(.6)}
  12%{opacity:1;transform:translateX(-50%) scale(1.12)}
  22%{transform:translateX(-50%) scale(1)}
  80%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(-36px)}}

/* ---------------- crash punch ---------------- */
/* The white blink at the moment of impact. Opacity only, so it costs the
   compositor a single layer and never touches layout. */
#flash{position:fixed;inset:0;background:#fff3df;opacity:0;pointer-events:none;
  transition:opacity 140ms ease-out;z-index:40}

/* Score numbers that burst out of the wreck. Eight of these exist for the
   whole session; main.js only ever writes transform and opacity on them. */
.pop{position:fixed;left:0;top:0;opacity:0;font-weight:900;white-space:nowrap;
  pointer-events:none;will-change:transform,opacity;z-index:14;
  text-shadow:0 2px 0 rgba(0,0,0,.25);
  animation:popin .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes popin{from{scale:.2}to{scale:1}}
.pop-normal{color:#fff8e8;font-size:28px}
.pop-big{color:#ffd24a;font-size:44px;text-shadow:0 0 12px #ff9640}
.pop-combo{color:#ff5fa2;font-size:36px}

/* The hangar's top-right corner: CRASH ALBUM always; KEYS and FULL SCREEN join
   it at a desk (they start hidden and main.js reveals them). */
.menuTopRight{position:absolute;top:calc(18px + var(--safeT));right:calc(16px + var(--safeR));z-index:2;
  display:flex;gap:8px;align-items:center}
#fsBtn.sel{border-color:var(--accent);color:var(--ink)}
.albumHint{font-size:11px;color:var(--dim);text-align:center;margin-bottom:12px;letter-spacing:.04em}
#albumCount{font-size:12px;color:var(--dim);letter-spacing:.08em;margin-left:8px;font-weight:700;white-space:nowrap}
#albumGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-height:52vh;overflow-y:auto}
#albumGrid img{width:100%;border-radius:10px;display:block}
#albumGrid figure{margin:0;position:relative}
.albumDel{position:absolute;right:6px;top:6px;min-width:34px;height:34px;padding:0 8px;border-radius:17px;border:1px solid var(--edge);
  background:rgba(0,0,0,.6);color:#fff;font-size:16px;font-weight:800;letter-spacing:.04em;cursor:pointer}
.albumDel.armed{background:#c0392b;border-color:#e74c3c;font-size:11px}
#albumGrid figcaption{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.6);
  color:#fff;font-size:9px;font-weight:800;letter-spacing:.06em;padding:3px 7px;border-radius:6px}
.albumEmpty{grid-column:1/-1;text-align:center;color:var(--dim);font-size:13px;padding:30px 0}

/* ---------------- coins + mega planes ----------------
   The purse chip sits first in the hangar's top-right corner, the same height
   as the buttons beside it, in gold so it reads as treasure and not a setting.
   It hops when the number changes (hud.js re-adds .bump). */
.coinChip{border:2px solid rgba(255,210,74,.55);border-radius:12px;padding:12px 16px;font-size:14px;
  font-weight:900;letter-spacing:.06em;color:#ffd24a;background:rgba(60,44,8,.45);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.coinChip b{font-weight:900}
.coinChip.bump{animation:coinBump .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes coinBump{0%{transform:scale(1)}30%{transform:scale(1.18)}100%{transform:scale(1)}}
/* The MEGA PLANES get their own row: a heading right across the grid, then
   the cards. grid-column 1/-1 spans however many columns this screen has. */
.hangarGroup{grid-column:1/-1;margin:10px 2px 0;font-size:13px;font-weight:900;letter-spacing:.18em;
  color:#ffd24a;text-shadow:0 1px 6px rgba(0,0,0,.9);display:flex;align-items:center;gap:10px}
.hangarGroup::after{content:"";flex:1;height:2px;border-radius:1px;
  background:linear-gradient(90deg,rgba(255,210,74,.55),rgba(255,210,74,0))}
.card.mega{border-color:rgba(255,210,74,.38);
  background:linear-gradient(160deg,rgba(92,70,20,.5),rgba(10,18,34,.78))}
.card.mega.sel{border-color:#ffd24a;box-shadow:0 0 0 3px rgba(255,210,74,.22),0 10px 30px rgba(0,0,0,.45)}
/* Locked: the picture goes grey and dim under a padlock and the price; the
   name stays readable so the kid knows what he is saving up for. */
.cardPic{position:relative}
.card.locked canvas{filter:grayscale(1) brightness(.55);opacity:.75}
.card.locked .cardName,.card.locked .cardSub{opacity:.8}
.lockTag{display:none;position:absolute;inset:0;align-items:center;justify-content:center;gap:8px;
  white-space:nowrap;pointer-events:none;
  font-size:18px;font-weight:900;letter-spacing:.04em;color:#ffd24a;text-shadow:0 2px 8px #000,0 0 2px #000}
.lockTag i{font-style:normal;font-size:26px}
.card.locked .lockTag{display:flex}
/* The BUY sheet: the aeroplane's picture, one line about it, the price
   against the purse, and two big buttons. BUY greys out when it cannot be paid. */
.buyCard{width:min(440px,94vw);border-color:rgba(255,210,74,.45)}
.buyCard h3{color:#ffd24a}
#buyThumb{width:100%;height:auto;aspect-ratio:640/260;display:block;border-radius:12px;margin-bottom:10px;
  background:linear-gradient(160deg,rgba(92,70,20,.35),rgba(10,18,34,.6))}
#buyBlurb{font-size:13px;line-height:1.45;color:var(--ink);margin-bottom:10px;letter-spacing:.02em}
.buyRow{display:flex;justify-content:space-between;align-items:center;padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.08);font-size:12px;letter-spacing:.12em;color:var(--dim)}
.buyRow b{font-size:20px;font-weight:900;color:#ffd24a;letter-spacing:.02em;font-variant-numeric:tabular-nums}
#buyNeed{margin-top:12px;text-align:center;font-size:15px;font-weight:800;color:#ffb3a3;letter-spacing:.03em}
#buyYesBtn{flex:1.4;background:linear-gradient(180deg,#ffe27a,#f0a819);box-shadow:0 6px 0 #a86f06,0 12px 26px rgba(0,0,0,.45);
  color:#221a00;white-space:nowrap}
#buyYesBtn:disabled{background:linear-gradient(180deg,#59606e,#3c4250);box-shadow:0 6px 0 #262b35;color:#9aa3b5;
  cursor:not-allowed;transform:none}
/* The coin line on the end-of-flight card, under the big score. */
#crashCoins{display:flex;justify-content:space-between;align-items:center;margin:-8px 0 18px;
  padding-top:10px;border-top:1px solid rgba(255,210,74,.25)}
#crashCoins span{font-size:11px;color:#ffd24a;letter-spacing:.16em}
#crashCoins b{font-size:22px;font-weight:900;color:#ffd24a;font-variant-numeric:tabular-nums}
#crashCoins em{font-style:normal}
#crashCoins small{font-size:12px;font-weight:700;color:var(--dim);letter-spacing:.04em}

/* ---------------- big-upgrade seams ----------------
   WHERE the new boxes sit, and nothing else. Each one is an empty <div> in
   index.html that a plugin fills; what it LOOKS like is that feature's own
   file in styles/ (dmg, board, radio, boss, ammo, race, pause, settings,
   howtofly), which loads after this one and may move its own box too. Until
   something is put in a box it is not drawn at all (:empty), so the game
   looks exactly as it did.
   A box lets touches through (the HUD does) except on its buttons; one that
   wants every touch inside it - a text field, a list that scrolls - carries
   .noSteer, which controls.js leaves alone the way it leaves #itemBar alone.
   Anything a kid presses in flight is 64 px or more on an iPad. */
#radio,#botBoard,#bossBar,#raceHud,#ammoBar,#dmgDiagram{position:absolute;z-index:1;pointer-events:none}
#radio:empty,#botBoard:empty,#bossBar:empty,#raceHud:empty,#ammoBar:empty,#dmgDiagram:empty{display:none}
.noSteer{pointer-events:auto}
/* left, in the free strip: under the name tag's two lines, over the POWER lever */
#radio{left:calc(16px + var(--safeL));top:calc(120px + var(--safeT));
  bottom:calc(38px + var(--safeB) + min(46vh,300px));max-width:300px}
/* right, under the g meter, beside (not under) the button column */
#botBoard{right:calc(104px + var(--safeR));top:calc(72px + var(--safeT))}
/* top middle, one under the other, below the takeoff bar's and the fuel gauge's slots */
#bossBar{left:50%;transform:translateX(-50%);top:calc(130px + var(--safeT))}
#raceHud{left:50%;transform:translateX(-50%);top:calc(178px + var(--safeT))}
/* bottom middle: over the toys AND over the coach line that sits on them */
#ammoBar{left:50%;transform:translateX(-50%);bottom:calc(192px + var(--safeB))}
/* bottom left, beside the POWER lever: a 96 px square */
#dmgDiagram{left:calc(100px + var(--safeL));bottom:calc(26px + var(--safeB));width:96px;height:96px}
/* A narrow screen (an iPad upright): the toys are where the diagram would be, so it goes over them;
   and the name tag and AUTOPILOT chip wrap onto a third line, so the radio starts under that. */
@media (max-width:900px){
  #dmgDiagram{bottom:calc(128px + var(--safeB))}
  #radio{top:calc(160px + var(--safeT))}
}
/* A tall screen: the button column stops well short of the top, so the board sits right under the g meter. */
@media (min-height:950px){#botBoard{right:calc(16px + var(--safeR))}}
/* On foot beside the wreck (GET OUT & LOOK) the flying furniture stays away, as the lever and the toys do. */
body.wreckwalk #ammoBar,body.wreckwalk #dmgDiagram,body.wreckwalk #raceHud{display:none !important}
/* A prize aeroplane (spec.prize: won from a boss, never bought) wears the MEGA
   PLANES' gold, and its padlock says what to do instead of what to pay - a
   whole sentence, so it wraps and shrinks where the price was one short line. */
.card.prize{border-color:rgba(255,210,74,.38);
  background:linear-gradient(160deg,rgba(92,70,20,.5),rgba(10,18,34,.78))}
.card.prize.sel{border-color:#ffd24a;box-shadow:0 0 0 3px rgba(255,210,74,.22),0 10px 30px rgba(0,0,0,.45)}
.lockTag.prize{flex-direction:column;gap:1px;white-space:normal;text-align:center;padding:0 10px;
  font-size:12px;line-height:1.15;letter-spacing:.06em}
.lockTag.prize i{font-size:22px}
/* "Built by Nick and Jack." - under the factsheet of the aeroplane that says so (spec.builtBy) */
.statBuilt{color:#ffd24a;font-weight:700;margin-top:3px}

/* =====================================================================
   BIG SCREENS
   A desktop monitor or a TV: nothing here changes an iPad (the largest is
   1366 CSS px wide). The hangar packs six planes to a row instead of
   stretching four huge cards across the wall, the factsheet gets room beside
   the turning showcase plane, and the flight HUD grows a notch and spreads out.
   ===================================================================== */
@media (min-width:1400px){
  #planeList{grid-template-columns:repeat(6,minmax(0,1fr));max-width:1640px;width:100%;
    margin:0 auto;gap:14px;flex:0 1 auto}
  .hangarBar{max-width:1640px;width:100%;margin:0 auto 12px}
  .hangarSearch{flex-basis:240px}
  .card canvas{height:92px}
  .lockTag{font-size:20px}
  .coinChip{font-size:15px}
  .menuHead h1{font-size:24px}
  /* The foot: the three pickers as rows of chips on the left, the factsheet
     as a card in the middle - up against the showcase - and FLY on the right. */
  .menuFoot{max-width:1640px;width:100%;margin:auto auto 0;padding-top:14px;
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:28px;row-gap:8px;align-items:center}
  #biomeRow,#outfitRow,#musicRow{grid-column:1;position:relative;display:flex;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:6px;margin:0;width:auto;max-width:900px;padding-left:104px;min-height:36px}
  .menuFoot .outfitTitle{position:absolute;left:0;top:50%;transform:translateY(-50%);width:98px;font-size:10px}
  #musicBtn,#soundBtn,#graphicsBtn{width:auto}
  .musicVol{width:160px;flex:0 0 auto}
  .outfitChip{font-size:13px;padding:9px 14px}
  #planeStats{grid-column:2;grid-row:1/span 3;justify-self:center;align-self:end;
    font-size:14px;line-height:1.7;columns:2;column-gap:36px;width:min(100%,620px);
    background:rgba(10,18,34,.6);border:1px solid var(--edge);border-radius:16px;padding:14px 20px}
  .statBest{font-size:16px;column-span:all}
  #flyBtn{grid-column:3;grid-row:1/span 3;align-self:end;font-size:24px;padding:22px 48px}

  #readout{gap:16px}
  .ro{min-width:112px;padding:9px 18px}
  .ro span{font-size:27px}
  .ro em{font-size:9px}
  #planeTag{font-size:13px}
  .iconBtn{width:52px;height:52px;font-size:22px}
  #throttle{width:86px;height:min(46vh,380px)}
  #thrLabel b{font-size:22px}
  .rBtn{width:92px;height:74px;border-radius:18px}
  .rBtn b{font-size:28px}
  .rBtn span{font-size:10px}
  #itemBar{bottom:calc(36px + var(--safeB))}
  .itemSlot{width:86px;height:86px}
  .itemSlot b{font-size:38px}
  #hint{font-size:13px;bottom:calc(9px + var(--safeB))}
  #hint.legend{padding:3px 14px}
  #coach{font-size:22px;bottom:calc(160px + var(--safeB))}
  #speedBar{width:320px;height:26px;top:calc(78px + var(--safeT))}
  #warn{font-size:42px}
  #radio{bottom:calc(38px + var(--safeB) + min(46vh,380px))}
  #botBoard{right:calc(118px + var(--safeR));top:calc(80px + var(--safeT))}
  #ammoBar{bottom:calc(226px + var(--safeB))}
  #dmgDiagram{left:calc(112px + var(--safeL))}
  .lockTag.prize{font-size:13px}
  .statBuilt{column-span:all}
}

/* =====================================================================
   PHONES
   The game is laid out for an iPad. The two blocks below only switch on for
   phone-shaped screens and leave every iPad size exactly as it was:
     "short"  = a phone on its side  (landscape, no iPad is under 700px tall)
     "narrow" = a phone held upright (portrait, no iPad is under 700px wide)
   Exactly one of them applies to a phone, never both. Pure layout: which
   buttons exist and when is still decided by the game.
   ===================================================================== */

/* ---------------- short: phone on its side ---------------- */
@media (orientation:landscape) and (max-height:480px){
  /* Top row: slimmer gauges, so the coach line has a home under them, and a
     smaller name tag that fits beside them on one line. */
  .ro{padding:5px 10px;min-width:74px}
  .ro span{font-size:17px}
  #topLeft{max-width:max(102px,calc(50vw - 185px))}
  #planeTag{padding:7px 10px;font-size:11px;letter-spacing:.1em}
  #speedBar{top:calc(56px + var(--safeT))}
  /* The coach sat across the middle of a short screen - right over the
     aeroplane. It now lives under the gauges (below the takeoff bar's slot). */
  #coach{top:calc(84px + var(--safeT));bottom:auto;font-size:15px;padding:8px 16px;border-radius:12px}

  /* Seven buttons in one column is taller than the phone. Two columns,
     anchored bottom-right: four rows always fit, nothing leaves the screen.
     EJECT keeps the outside corner whatever else is showing. */
  #rightBtns{display:grid;grid-template-columns:auto auto;gap:6px;
    right:calc(12px + var(--safeR));bottom:calc(12px + var(--safeB))}
  .rBtn{width:60px;height:52px;border-radius:13px;gap:2px}
  .rBtn b{font-size:20px}
  .rBtn span{font-size:7px;letter-spacing:.06em}
  #ejectBtn{grid-column:2}
  #throttle{height:40vh;width:64px;bottom:calc(12px + var(--safeB))}
  #hint{bottom:calc(4px + var(--safeB))}
  /* The item bar shrinks to thumb-size squares and sits just over the hint,
     well inside the gap between the lever and the two button columns. */
  #itemBar{bottom:calc(20px + var(--safeB));gap:6px;padding:5px;border-radius:16px}
  .itemSlot{width:52px;height:52px;border-radius:12px;gap:2px}
  .itemSlot b{font-size:24px}
  .itemSlot .anvilGlyph{width:27px;height:24px}
  .itemSlot span{font-size:6.5px;letter-spacing:.06em}
  .itemCd{border-radius:10px}
  .itemCd u{font-size:20px}

  /* Panels: BREAK SOMETHING stays three across; the cards slim down and the
     sticky footer keeps FIX EVERYTHING and DONE on screen while it scrolls. */
  .panelCard{padding:14px;max-height:94vh}
  .panelCard h3{margin-bottom:8px;font-size:16px}
  #failPanel .panelCard{width:min(640px,94vw);padding-bottom:0}
  .failCards{grid-template-columns:repeat(3,1fr);gap:6px}
  .failGroup{margin:6px 2px 4px;font-size:10px}
  .failCard{padding:6px 6px}
  .failCard b{font-size:22px;margin-bottom:2px}
  .failCard span{font-size:11px}
  .failFoot{margin:8px -14px 0;padding:8px 14px 10px}
  .failFoot .ghostBtn,.failFoot .bigBtn.small{padding:10px 8px}
  /* the top-right corner is free on a phone on its side: the leak gauge lives there */
  #fuelGauge{top:calc(10px + var(--safeT));left:auto;right:calc(12px + var(--safeR));transform:none;padding:5px 9px}
  #fuelTrack{width:110px;height:12px}
  .panelFoot{margin-top:10px}
  .apRow{padding:5px 0}
  .stepBtn{height:44px}
  .volRow{padding:3px 0} .vol{height:32px}
  .soundCard .panelFoot .ghostBtn,.soundCard .bigBtn.small{padding:10px 10px}

  /* Crash report: what happened on the left, the score and the buttons on
     the right, so FLY AGAIN is never below the bottom of the phone. */
  #crash{padding:8px}
  #crashCard{width:min(720px,96vw);padding:14px 20px;display:grid;
    grid-template-columns:1fr 1fr;column-gap:24px;align-items:center}
  #crashTitle{grid-column:1/-1;font-size:22px;margin-bottom:6px}
  #crashRows{grid-column:1;grid-row:2/span 3}
  .crow{padding:5px 0;font-size:12px}
  /* the grid card: rows (and their black box) scroll in the left column */
  #crashCard{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}
  #crashRows{max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px)}
  .bbox{margin-top:6px;padding:5px 8px 6px}
  .bbHead{padding-bottom:4px;margin-bottom:4px}
  .bbHead b{font-size:13px}
  .bbGrid{gap:3px 8px}
  .bbCell b{font-size:13px;gap:4px}
  .bbCell b small{font-size:8.5px}
  .bbShot{width:40px;height:26px}
  #crashScoreWrap{grid-column:2;margin:0 0 10px}
  #crashScoreWrap b{font-size:30px}
  #crashCoins{grid-column:2;margin:-4px 0 8px;padding-top:6px}
  #crashCoins b{font-size:18px}
  .crashBtns{grid-column:2;gap:8px}
  .crashBtns .bigBtn{padding:12px 16px;font-size:16px}
  .crashBtns .ghostBtn{padding:10px 16px}
  /* the BUY sheet: picture smaller so both buttons stay on the screen */
  #buyThumb{width:60%;margin:0 auto 6px}
  #buyBlurb{font-size:12px;margin-bottom:4px}
  .buyRow{padding:4px 0}
  #buyNeed{margin-top:6px;font-size:13px}

  /* Hangar: one swipeable row of cards, the pickers as rows of chips, the
     factsheet on one line, FLY big on the right. */
  #menu{padding-top:calc(8px + var(--safeT));padding-bottom:calc(8px + var(--safeB))}
  .menuHead{gap:10px;margin-bottom:6px}
  .menuIcon{font-size:24px}
  .menuHead h1{font-size:15px}
  .menuHead p{display:none}
  .menuTopRight{top:calc(6px + var(--safeT))}
  .menuTopRight .ghostBtn{padding:7px 12px;font-size:11px}
  #planeList{flex:0 0 auto;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:180px;
    gap:8px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x}
  .card{padding:8px 10px;border-radius:12px}
  .card canvas{height:60px;margin-bottom:4px}
  .cardName{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cardSub{font-size:9px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cardTags{top:5px;left:5px;gap:3px}
  .fav,.tagNew{font-size:7px;padding:2px 5px}
  .favStar{top:2px;right:2px;width:26px;height:26px;font-size:15px}
  /* The shelves: one strip of tabs you swipe along, never a second line. */
  .hangarBar{margin-bottom:6px}
  .hangarTabs{flex-wrap:nowrap;overflow-x:auto}
  .hangarTab{padding:4px 5px 4px 9px;font-size:10px;gap:5px;letter-spacing:.06em}
  .hangarTab b{min-width:18px;padding:1px 5px;font-size:9px}
  /* One row has no width to span: the MEGA heading becomes a signpost card
     in the strip (so does the empty-shelf note), and the padlocks shrink
     with the pictures. */
  .hangarGroup{grid-column:auto;margin:0;justify-content:center;text-align:center;font-size:12px;
    border:2px dashed rgba(255,210,74,.4);border-radius:12px;padding:0 10px}
  .hangarGroup::after{content:none}
  .hangarEmpty{grid-column:auto;padding:22px 12px;font-size:12px;border-radius:12px}
  .lockTag{font-size:14px;gap:5px}
  .lockTag i{font-size:19px}
  .menuTopRight .coinChip{padding:7px 10px;font-size:11px}
  .menuFoot{margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:center;column-gap:14px;row-gap:5px;padding-top:6px}
  #biomeRow,#outfitRow,#musicRow{grid-column:1;position:relative;display:flex;flex-direction:row;
    flex-wrap:wrap;align-items:center;gap:5px;margin:0;width:auto;max-width:none;padding-left:62px;min-height:30px}
  .menuFoot .outfitTitle{position:absolute;left:0;top:50%;transform:translateY(-50%);width:58px}
  .outfitChip{padding:6px 9px;font-size:11px}
  #musicBtn,#soundBtn,#graphicsBtn{width:auto}
  .musicVol{width:120px;flex:0 0 auto}
  #planeStats{grid-column:1;font-size:10px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #planeStats br{display:none}
  #planeStats b{margin-right:12px}
  .statBest{display:inline;font-size:10px;margin:0}
  #flyBtn{grid-column:2;grid-row:1/span 4;padding:16px 26px}
  /* The big-upgrade boxes. RESET never shows on a phone (the pause menu has it):
     the two button columns are as tall as the screen already. The rest squeeze
     in round the smaller lever, the two button columns and the coach up top. */
  #resetBtn{display:none !important}
  #radio{top:calc(64px + var(--safeT));bottom:calc(24px + var(--safeB) + 40vh);left:calc(12px + var(--safeL))}
  #botBoard{right:calc(146px + var(--safeR));top:calc(52px + var(--safeT))}
  #bossBar{top:calc(124px + var(--safeT))}
  #raceHud{top:calc(160px + var(--safeT))}
  #ammoBar{bottom:calc(88px + var(--safeB))}
  #dmgDiagram{left:calc(84px + var(--safeL));bottom:calc(12px + var(--safeB));width:72px;height:72px}
  .lockTag.prize{font-size:10px;padding:0 6px}
  .lockTag.prize i{font-size:16px}
  .statBuilt{display:inline;margin:0 0 0 12px}
}

/* ---------------- narrow: phone held upright ---------------- */
@media (orientation:portrait) and (max-width:480px){
  /* Top row: the two buttons keep the left corner (the name tag drops under
     them); the four gauges pack two-by-two into the right corner instead of
     spilling across the whole width on top of the menu button. */
  #topLeft{max-width:calc(100vw - 190px - var(--safeL) - var(--safeR))}
  #planeTag{padding:7px 10px;font-size:11px;letter-spacing:.1em}
  #readout{left:auto;right:calc(8px + var(--safeR));transform:none;
    display:grid;grid-template-columns:auto auto;gap:4px}
  .ro{min-width:66px;padding:4px 8px}
  .ro span{font-size:15px}
  .ro em{font-size:7px;letter-spacing:.1em}
  #speedBar{top:calc(106px + var(--safeT));width:190px}
  /* the gauges own the top-right corner here: the g meter and its ball sit
     under the name tag on the left instead */
  #aeroHud{right:auto;left:calc(12px + var(--safeL));top:calc(108px + var(--safeT))}
  #aeroBall{width:40px;height:40px}
  #aeroHorizon{left:-45px;top:-70px}
  /* The coach goes under all of that and may take two lines: at the bottom
     it covered WALK and the power lever. */
  #coach{top:calc(140px + var(--safeT));bottom:auto;font-size:15px;padding:8px 14px;border-radius:12px;
    white-space:normal;text-align:center;width:max-content;max-width:calc(100vw - 24px)}
  #warn{font-size:24px;letter-spacing:.12em;white-space:nowrap}

  /* Slimmer column and lever leave a wider strip of sky to steer in. */
  #rightBtns{gap:6px;right:calc(10px + var(--safeR));bottom:calc(14px + var(--safeB))}
  .rBtn{width:58px;height:50px;border-radius:13px;gap:2px}
  .rBtn b{font-size:20px}
  .rBtn span{font-size:7px;letter-spacing:.06em}
  #throttle{width:64px;left:calc(10px + var(--safeL));bottom:calc(14px + var(--safeB))}
  /* The hint wraps inside the strip between the lever and the buttons
     instead of running under EJECT. */
  #hint{white-space:normal;text-align:center;width:calc(100vw - 170px);line-height:1.35;
    bottom:calc(6px + var(--safeB))}
  /* The item bar has ~245px between the lever and the buttons: five small
     squares, emoji only (the pictures say it), lifted over the wrapped hint. */
  #itemBar{bottom:calc(42px + var(--safeB));gap:3px;padding:4px;border-radius:14px}
  .itemSlot{width:42px;height:42px;border-radius:10px;border-width:1.5px}
  .itemSlot b{font-size:22px}
  .itemSlot .anvilGlyph{width:25px;height:22px}
  .itemSlot span{display:none}
  .itemCd{border-radius:8px}
  .itemCd u{font-size:18px}

  .panelCard{padding:16px}
  #failPanel .panelCard{padding-bottom:0}
  .failCards{grid-template-columns:repeat(2,1fr)}
  .failCard span{font-size:11px}
  .failFoot{margin:10px -16px 0;padding:10px 16px 12px;flex-wrap:wrap}
  .failFoot .ghostBtn{font-size:11px;padding:12px 6px}
  #fuelGauge{top:calc(200px + var(--safeT))}
  #fuelTrack{width:110px}
  .apRow span{font-size:10px;letter-spacing:.06em}
  .apRow b{min-width:64px;font-size:20px}
  .apRow em{width:34px}
  .stepBtn{width:50px}
  .volRow{grid-template-columns:92px 1fr 40px;gap:8px}
  .trackRow{grid-template-columns:92px 1fr auto}
  .volName em{white-space:normal}
  .soundCard .panelFoot{gap:6px}
  .soundCard .panelFoot .ghostBtn{padding:12px 6px;font-size:11px;letter-spacing:.04em}
  #crashCard{padding:22px 18px}
  #crashCard .bigBtn{padding:16px 14px;font-size:17px;letter-spacing:.1em}
  /* a narrow card: the black box's dials go two across (three rows) */
  .bbGrid{grid-template-columns:repeat(2,1fr)}
  .bbCell b{font-size:14px;gap:4px}
  .bbCell b small{font-size:9px}

  /* Hangar: cards two across in a scrolling grid, the pickers stacked as
     rows of chips, the factsheet in two columns, FLY full width at the bottom. */
  #menu{padding:calc(12px + var(--safeT)) calc(10px + var(--safeR)) calc(10px + var(--safeB)) calc(10px + var(--safeL))}
  .menuHead{gap:10px;margin-bottom:6px;order:-2}
  .menuIcon{font-size:26px}
  .menuHead h1{font-size:16px;letter-spacing:.06em}
  .menuHead p{font-size:11px}
  /* No corner is wide enough for the coin chip AND the album beside the
     title, so the pair drop into a short row of their own under it. */
  .menuTopRight{position:static;order:-1;align-self:flex-end;gap:5px;margin:0 0 8px}
  .menuTopRight .ghostBtn{padding:7px 9px;font-size:10px;letter-spacing:.04em}
  .menuTopRight .coinChip{padding:7px 9px;font-size:10px;letter-spacing:.02em}
  #planeList{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;gap:8px}
  .card{padding:8px 10px;border-radius:12px}
  .card canvas{height:52px;margin-bottom:4px}
  .cardName{font-size:12px;letter-spacing:.03em}
  .cardSub{font-size:9px;margin-top:2px}
  .cardTags{top:5px;left:5px;gap:3px}
  .fav,.tagNew{font-size:7px;padding:2px 5px}
  .favStar{top:2px;right:2px;width:26px;height:26px;font-size:15px}
  /* The shelves: one strip of tabs you swipe along, under the coin row. */
  .hangarBar{margin-bottom:6px}
  .hangarTabs{flex-wrap:nowrap;overflow-x:auto}
  .hangarTab{padding:5px 6px 5px 10px;font-size:10px;gap:5px;letter-spacing:.06em}
  .hangarTab b{min-width:18px;padding:1px 5px;font-size:9px}
  .hangarEmpty{font-size:12px;padding:22px 10px;border-radius:12px}
  .hangarGroup{font-size:11px;margin-top:6px}
  .lockTag{font-size:13px;gap:5px}
  .lockTag i{font-size:18px}
  .menuFoot{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;padding-top:8px}
  #biomeRow,#outfitRow,#musicRow{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:5px;margin:0;width:auto;max-width:none;padding-left:62px;min-height:30px}
  .menuFoot .outfitTitle{position:absolute;left:0;top:8px;width:58px}
  .outfitChip{padding:7px 9px;font-size:11px}
  #musicBtn,#soundBtn,#graphicsBtn{width:auto}
  .musicVol{width:110px;flex:0 0 auto}
  #planeStats{columns:2;column-gap:14px;font-size:10px;line-height:1.5}
  .statBest{font-size:11px}
  #flyBtn{width:100%;padding:15px}
  /* The big-upgrade boxes. RESET never shows on a phone (the pause menu has it).
     Up top the gauges own the right corner, the g meter the left, and the coach
     and the fuel gauge come under them - so the bars start below all of that. */
  #resetBtn{display:none !important}
  #radio{top:calc(160px + var(--safeT));left:calc(10px + var(--safeL));max-width:calc(100vw - 96px)}
  #botBoard{right:calc(76px + var(--safeR));top:calc(324px + var(--safeT))}
  #bossBar{top:calc(236px + var(--safeT))}
  #raceHud{top:calc(280px + var(--safeT))}
  #ammoBar{bottom:calc(100px + var(--safeB))}
  #dmgDiagram{left:calc(82px + var(--safeL));bottom:calc(140px + var(--safeB));width:72px;height:72px}
  .lockTag.prize{font-size:10px;padding:0 6px}
  .lockTag.prize i{font-size:16px}
}

/* ---------------- occasions (feats.js -> ui.setFestive) ----------------
   Birthday: a string of little pennants along the very top of the hangar and
   a ribbon under the title. Pure paint on one body class - nothing in the
   layout moves, so every breakpoint above stays exactly as it was; the
   header is lifted a layer so its words always win where a pennant tip
   reaches them. */
body.festive-birthday #menu::before{
  content:"";position:absolute;left:0;right:0;top:var(--safeT);height:24px;pointer-events:none;z-index:1;
  background:
    linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)) 0 2px/100% 2px no-repeat,
    conic-gradient(from -32deg at 50% 100%,#ff4f6d 64deg,transparent 0) 0 3px/100px 18px repeat-x,
    conic-gradient(from -32deg at 50% 100%,#ffd23f 64deg,transparent 0) 25px 3px/100px 18px repeat-x,
    conic-gradient(from -32deg at 50% 100%,#4fd0ff 64deg,transparent 0) 50px 3px/100px 18px repeat-x,
    conic-gradient(from -32deg at 50% 100%,#7be36f 64deg,transparent 0) 75px 3px/100px 18px repeat-x;
}
body.festive-birthday .menuHead{position:relative;z-index:2}
body.festive-birthday #menuSub[data-ribbon]::after{
  content:attr(data-ribbon);display:inline-block;margin-left:10px;padding:3px 11px;border-radius:999px;
  background:linear-gradient(90deg,#ff4f6d,#ffb43f);color:#fff;font-weight:800;font-size:11px;letter-spacing:.1em;
  box-shadow:0 2px 10px rgba(255,79,109,.45);vertical-align:1px
}

/* Loading-screen tips and jokes under the progress line (hud.js rotates them). */
#loadTip{margin:12px auto 0;max-width:min(440px,82vw);min-height:2.6em;font-size:12px;line-height:1.35;
  color:#9fd8ff;letter-spacing:.04em;opacity:.92;transition:opacity .25s ease}
#loadTip.swap{opacity:0}
/* Where the map data came from (OpenStreetMap's licence asks for exactly this line). */
#loadCredit{margin:10px auto 0;max-width:min(560px,92vw);font-size:11px;line-height:1.35;text-align:center;opacity:.6}

/* The secret hangar disco (hud.js: seven taps on the title): the whole menu
   cycles through the rainbow with coloured spots sweeping over it, ten seconds. */
body.disco #menu{animation:discoHue 2.5s linear infinite}
body.disco #menu::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;mix-blend-mode:screen;opacity:.55;
  background:
    radial-gradient(circle at 20% 30%,rgba(255,60,160,.55),transparent 22%),
    radial-gradient(circle at 80% 25%,rgba(60,200,255,.55),transparent 22%),
    radial-gradient(circle at 50% 80%,rgba(120,255,90,.5),transparent 24%);
  background-size:200% 200%;animation:discoSpots 1.6s ease-in-out infinite alternate}
body.disco .menuHead h1{animation:discoBop .4s ease-in-out infinite alternate}
@keyframes discoHue{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
@keyframes discoSpots{from{background-position:0% 0%,100% 0%,50% 100%}to{background-position:100% 60%,0% 80%,20% 0%}}
@keyframes discoBop{from{transform:translateY(0)}to{transform:translateY(-3px) rotate(-1deg)}}

/* Crash-album stickers (hud.js renderAlbum): a tilted label in the top corner. */
.albumSticker{position:absolute;left:7px;top:7px;transform:rotate(var(--tilt,-8deg));padding:2px 7px;border-radius:4px;
  color:#141414;font-weight:900;font-size:10px;letter-spacing:.07em;box-shadow:0 2px 6px rgba(0,0,0,.45);pointer-events:none}