/* SLOP SKIES · island edition site. Style bible §11: the stage is the game UI (1280×720, scaled to the window) and the page around
   it is the 2009 island-sports website (sky gradient with puffy clouds, a strip of small glossy buttons ending in a green pill, a
   white legal line on blue). Inside the stage the site draws the boot cards, the main menu (resort room), the pages (sport rooms),
   the notice and leaving cards and the name entry; the engine draws everything else. Tokens are the bible's §2.4 block, unchanged.
   Every picture is our own: renders of our island and aircraft, our line drawings. Fonts: assets/8845c1b17855fc43/fonts/LICENSES. */

@font-face{font-family:'Isle Label';font-weight:800;font-display:swap;src:url(assets/8845c1b17855fc43/fonts/isle-label-800.woff2) format('woff2')}
@font-face{font-family:'Isle Label';font-weight:700;font-display:swap;src:url(assets/8845c1b17855fc43/fonts/isle-label-700.woff2) format('woff2')}
@font-face{font-family:'Isle Body';font-weight:500;font-display:swap;src:url(assets/8845c1b17855fc43/fonts/isle-body-500.woff2) format('woff2')}
@font-face{font-family:'Isle Body';font-weight:700;font-display:swap;src:url(assets/8845c1b17855fc43/fonts/isle-body-700.woff2) format('woff2')}
@font-face{font-family:'Isle Numerals';font-weight:800;font-display:swap;src:url(assets/8845c1b17855fc43/fonts/isle-num-800.woff2) format('woff2')}
@font-face{font-family:'Isle Numerals';font-weight:900;font-display:swap;src:url(assets/8845c1b17855fc43/fonts/isle-num-900.woff2) format('woff2')}
@font-face{font-family:'Isle Mark';font-weight:900;font-style:italic;font-display:swap;src:url(assets/8845c1b17855fc43/fonts/isle-mark-900i.woff2) format('woff2')}

/* ===== Style bible §2.4, pasted unchanged ===== */
:root{
  /* resort room: title, main menu */
  --sky-0:#0831E0; --sky-1:#1239E7; --sky-2:#56BAFF;            /* menu backdrop, top → horizon */
  --sea:#7CEEF2; --sea-near:#B7F4F1; --sand:#EFF8CE;
  --band:#DEF1FF; --stripe-l:#BBBBBB; --stripe-d:#7F7F7F; --sea-deep:#048BF4;   /* title band, stripe, sea strip */
  --tile-frame-t:#E1E6FB; --tile-frame-s:#C6D2F9; --tile-frame-b:#E3EAEE; --tile-key:#4265EA;
  --label-teal:#50C8C8; --outline:#FFFFFF;
  --aqua-hi:#A9F1FB; --aqua:#78DCF9; --aqua-lo:#6CAAD7; --aqua-lip:#5C94B8;    /* Back, Settings, tooltip */
  --tooltip:#9ED8E8; --icon-blue:#73B2FE; --ink-grey:#5C5C5C; --ink-grey-2:#6E6E6E;
  --badge-new:#F59A1B;
  /* sport room: plane select, cards, pause, results, final menu, pages */
  --indigo-t:#1D1A80; --indigo-b:#2B4A96; --hover-t:#2092AA; --hover-b:#296F8B;
  --bar-rim:#D6D4DE; --bar-ink:#4954F2; --bar-ink-rim:#F1F2FF; --veil:rgba(42,58,160,.72);
  --panel-t:#2076E9; --panel-b:#014DE4; --stat-card:#E6ECFB; --stat-ink:#333333;
  --next-t:#84F5E8; --next-b:#92EFE1; --next-rim:#C3F4FF; --next-ink:#19477C; --record-ink:#E8602C;
  --slot-teal:#76D8DE; --mission:rgba(140,156,240,.72); --mission-ink:#2A2A8A;
  --card:#FDFDFD; --card-rim:#88EEF2; --calib-field:#525252; --calib-card:#F4F4F4; --calib-slot:rgba(200,190,240,.5);
  /* players and results */
  --p1:#055EBF; --p1-deep:#0951AD; --p2:#B0203A; --p2-deep:#741024; --lamp:#09CAE9;
  --score-hi:#D7FFD7; --score:#74C97F; --score-rim:#368D68;
  --win-face:#FDF8FD; --win-bevel:#C3AF73; --win-side:#8D7B55;
  --cursor-fill:#FFFFFF; --cursor-shade:#D5F6FB; --cursor-line:#1F7CFC;
  /* HUD */
  --pill:rgba(255,255,255,.42); --pill-rim:rgba(255,255,255,.9); --pill-scan:rgba(31,78,128,.06);
  --timer-ink:#1F4E80; --count-ink:#505050; --count-rim:#F3F3F3;
  --flash-gold:#D6AC3C; --flash-rim:#DF8D90;
  --band-bg:#FFFFFF; --band-edge:#C7651A; --band-ink:#DE6C1C;
  --count-red:#F42C20; --count-shadow:#9E2A31;
  --go-t:#E1FAFD; --go-b:#86E4FA; --go-rim:#1195FD; --go-shadow:#4C6085;
  --hit-t:#FFFFFF; --hit-b:#AADCF9; --hit-rim:#2885D2;
  /* 2009 web chrome around the stage */
  --web-sky-t:#52A6D4; --web-sky-m:#DDEEF6; --web-head:#0F76AD; --web-ink:#092B4A; --web-row:#DBECF5;
  --web-foot:#4AA0D0; --web-play:#72A42E; --web-leave:#007AC0; --web-leave-glow:#009EF9;
  --porthole-ring:#46B2E6; --fact-box-t:#2E93D2; --fact-box-b:#36A3DC; --web-caption:#9D9D9D;
  /* stamps (phase 2) */
  --stamp-on:#E8452C; --stamp-cream:#FFF6E8; --stamp-ring:#E3918E; --stamp-off:#A7B2CE;
  /* shape */
  --r-tile:15px; --r-pic:9px; --r-btn:10px; --r-pill:999px; --r-panel:16px; --r-card:14px;
  --shadow-soft:0 3px 0 rgba(30,60,120,.25), 0 6px 14px rgba(0,30,90,.25);
  --gloss:linear-gradient(180deg,rgba(255,255,255,.75) 0 45%,rgba(255,255,255,0) 46%);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
/* style audit S10/S11: one sport-room veil (the game's Select veil, over the blurred live frame or the still), one chosen state (a 4 px
   white halo, no growth: "menus never overshoot") and one focus ring (white, then the hover teal), as the in-canvas screens draw them */
:root{--cap-blue:#2F8FE0;   /* the characters' cap blue (hud.js IC.capBlue; style audit S15) */
  --veil-sport:linear-gradient(180deg,rgba(36,60,170,.40) 0,rgba(42,70,178,.30) 55%,rgba(30,56,160,.46) 100%);--halo:0 0 0 4px rgba(255,255,255,.5);--focus-ring:0 0 0 3px #fff,0 0 0 6px var(--hover-t)}
/* ===== the site's own (layout, faces, the bible's wordmark colours from §12) ===== */
:root{
  --u:1;                                     /* stage scale: site.8845c1b17855fc43.js sets it, min(window / 1280×720) less the page chrome */
  --f-label:'Isle Label',system-ui,sans-serif; --f-body:'Isle Body',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-num:'Isle Numerals','Isle Label',sans-serif; --f-mark:'Isle Mark','Isle Label',sans-serif;
  --mark-kicker:#8C9AA6; --mark-t:#1E9BEA; --mark-b:#0A6FC2;
  --aqua-btn:linear-gradient(180deg,var(--aqua-hi) 0,#96DEF1 45%,var(--aqua) 47%,#7BDBF6 80%,var(--aqua-lo) 100%);
  --hand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='40' viewBox='0 0 34 40'%3E%3Cpath d='M10.5 3c1.7 0 3 1.3 3 3v10c.5-.7 1.4-1 2.3-1 1.4 0 2.5.9 2.9 2.1.5-.4 1.2-.7 2-.7 1.4 0 2.6 1 2.9 2.3.4-.2 1-.3 1.5-.3 1.7 0 3 1.4 3 3.1v7.5c0 5.2-3.9 9-9.3 9h-2.4c-3.2 0-5.7-1.4-7.4-3.9l-5.4-8c-.9-1.4-.5-3.1.9-3.9 1.2-.8 2.7-.4 3.6.6l-.6.3V6c0-1.7 1.3-3 3-3z' fill='%23fff' stroke='%231F7CFC' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M13.5 16v5M18.7 17.2v4.1M23.6 19.3v2.8' stroke='%23D5F6FB' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M10 31.5h13' stroke='%2309CAE9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 10 3, pointer;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--web-ink);font:500 15px/1.45 var(--f-body);overflow-x:hidden;
  background:linear-gradient(180deg,var(--web-sky-t) 0,#8CC6E4 30%,var(--web-sky-m) 62%,#E8F5FA 82%,var(--sea) 94%,#4FC2EC 100%) fixed}
a{color:#0F76AD}
button{font:inherit;color:inherit;border:0;background:none;padding:0;margin:0}
a,button,[role=button],label{cursor:pointer}
#stage a,#stage button,#stage [role=button]{cursor:var(--hand)}
#stage :focus-visible{outline:none}
#stage .pm:focus-visible{filter:drop-shadow(0 4px 6px rgba(0,0,50,.35)) drop-shadow(0 0 0 #fff) drop-shadow(0 0 4px rgba(255,255,255,.95))}
#stage .lb-tab:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),var(--focus-ring)}
#stage .best tr:focus-visible td{background:var(--hover-t)}
:focus-visible{outline:3px solid var(--hover-t);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
kbd{font:800 .8em/1 var(--f-label);display:inline-block;min-width:1.9em;padding:.3em .45em .28em;border-radius:7px;background:linear-gradient(#fff,#E9EEF5);border:2px solid #9DB2CC;box-shadow:0 2px 0 #9DB2CC;color:#3B4A5E;text-align:center;vertical-align:.08em}

/* ---------- the page sky: our own puffy clouds (one drawing, several sizes), fixed behind everything ---------- */
#sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cl{position:absolute;display:block;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 190'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.45' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23D3E6F4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Ccircle cx='120' cy='112' r='62'/%3E%3Ccircle cx='196' cy='78' r='74'/%3E%3Ccircle cx='276' cy='106' r='60'/%3E%3Ccircle cx='70' cy='140' r='40'/%3E%3Ccircle cx='330' cy='142' r='38'/%3E%3Crect x='60' y='120' width='290' height='60' rx='30'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
#sky .cl1{width:420px;height:200px;left:-90px;top:9%}
#sky .cl2{width:300px;height:142px;right:4%;top:3%;opacity:.9}
#sky .cl3{width:520px;height:246px;right:-150px;top:40%;transform:scaleX(-1)}
#sky .cl4{width:260px;height:124px;left:6%;top:58%;opacity:.85}
#sky .cl5{width:460px;height:218px;left:-150px;bottom:-40px}
#sky .cl6{width:360px;height:170px;right:10%;bottom:4%;opacity:.9}

/* ---------- the page column ---------- */
#field{position:relative;z-index:1}
/* round 2: the stage and one small footer line, centred in the window (no header, no strip) */
body:not(.phone) #field{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center}
#page{width:calc(1280px * var(--u));max-width:100%;margin:0 auto;padding:14px 0 0}
.logo{display:block}
.logo .lk{display:flex;flex-direction:column;line-height:1}
.logo .lk small{font:800 10px/1 var(--f-label);letter-spacing:.16em;color:#fff;opacity:.9;margin:0 0 3px 3px;text-shadow:0 1px 2px rgba(0,40,90,.4)}
.logo .lk b{font:italic 900 30px/1 var(--f-mark);letter-spacing:-.01em;background:linear-gradient(180deg,var(--mark-t),var(--mark-b));-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:0;filter:drop-shadow(0 0 0 #fff) drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 3px 2px rgba(0,40,90,.35))}
.logo.svg svg{display:block;height:46px;width:auto}

/* ---------- the stage: the engine canvas in real pixels, the site's screens on a 1280×720 layer scaled on top ---------- */
#stage{position:relative;width:calc(1280px * var(--u));height:calc(720px * var(--u));background:#5FB6F2;border-radius:6px;overflow:hidden;
  box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(15,118,173,.35),0 10px 28px rgba(0,50,110,.35)}
#dr-screen{position:absolute;inset:0;overflow:hidden;background:#5FB6F2}
#ui{position:absolute;left:0;top:0;width:1280px;height:720px;transform:scale(var(--u));transform-origin:0 0;pointer-events:none;
  font:500 18px/1.4 var(--f-body);color:var(--ink-grey)}
#ui>*{pointer-events:auto}

/* ===== boot ===== */
.boot-card{position:absolute;inset:0;z-index:40}
.fs{background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.fs-pic{width:260px;height:170px;display:block}
.fs-t{margin:36px 0 0;font:500 34px/1.3 var(--f-body);letter-spacing:.05em}
.fs-k{margin:44px 0 0;font:500 22px/1.3 var(--f-body);color:#E6E6E6;animation:fs-blink 1s linear infinite}
@keyframes fs-blink{0%,100%{opacity:1}50%{opacity:.25}}
.fs-touch{display:none}
body.touch .fs-desk{display:none}body.touch .fs-touch{display:inline}
body.touch g.fs-touch{display:block}
body.touch .fs-tab{display:none}
@media (min-width:768px) and (min-height:600px){body.touch .fs-t .fs-ph{display:none}body.touch .fs-t .fs-tab{display:inline}}   /* layout audit L-23: an iPad is told to hold on to its tablet */
.pf{background:linear-gradient(180deg,#52A6D4 0,#9ED0EA 55%,#DDEEF6 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px}
.pf-mark{width:560px;max-width:70%;opacity:0;transform:scale(.92);animation:pf-in .5s cubic-bezier(.2,.8,.2,1) .05s forwards}
.pf-mark svg{display:block;width:100%;height:auto}
@keyframes pf-in{to{opacity:1;transform:none}}
.pf-spin{position:relative;width:64px;height:64px}
.pf-spin i{position:absolute;left:25px;top:0;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.55);transform-origin:7px 32px;animation:pf-dot .8s steps(1) infinite}
.pf-spin i:nth-child(2){transform:rotate(45deg);animation-delay:.1s}.pf-spin i:nth-child(3){transform:rotate(90deg);animation-delay:.2s}.pf-spin i:nth-child(4){transform:rotate(135deg);animation-delay:.3s}
.pf-spin i:nth-child(5){transform:rotate(180deg);animation-delay:.4s}.pf-spin i:nth-child(6){transform:rotate(225deg);animation-delay:.5s}.pf-spin i:nth-child(7){transform:rotate(270deg);animation-delay:.6s}.pf-spin i:nth-child(8){transform:rotate(315deg);animation-delay:.7s}
@keyframes pf-dot{0%,12.4%{background:#fff}12.5%,100%{background:rgba(255,255,255,.55)}}
.pf-m{margin:0;font:800 22px/1 var(--f-label);letter-spacing:.04em;color:#fff;text-shadow:0 2px 4px rgba(0,40,90,.3)}
.pf-m b{font-family:var(--f-num)}
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.028) 0 1px,transparent 1px 4px),var(--calib-card);display:flex;flex-direction:column;align-items:center}
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.06) 0 3px,transparent 3px 6px),linear-gradient(180deg,#B5B0E6 0,#9C97D6 40%,#7C76BE 41%,#6E68B0 100%)}

/* ===== the pages (sport rooms), bible §11.4: the veil over the blurred backdrop, a 64-px header, Back at bottom left ===== */
#rooms{position:absolute;inset:0;z-index:12;pointer-events:none}
.room{position:absolute;inset:0;pointer-events:auto;color:#fff;
  background:var(--veil-sport),url(assets/8845c1b17855fc43/isle/menu-lagoon-blur.jpg) center/cover}
body.scene-live .room{background:var(--veil-sport);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.room-h{position:absolute;left:0;right:0;top:0;height:64px;display:flex;align-items:center;padding:0 12px 0 64px;   /* the game's sport-room header (screens.js sportHeader): 64 px, the roundel 12 px in from the top, bottom and left (client note 10 Oct) */
  background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)) 0 11.5px/55% 2.6px no-repeat,linear-gradient(rgba(255,255,255,.13),rgba(255,255,255,.13)) 0 19.8px/83% 2.6px no-repeat,
    linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)) 0 28.2px/71% 2.6px no-repeat,linear-gradient(rgba(255,255,255,.13),rgba(255,255,255,.13)) 0 36.5px/59% 2.6px no-repeat,
    linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)) 0 44.8px/87% 2.6px no-repeat,linear-gradient(rgba(255,255,255,.13),rgba(255,255,255,.13)) 0 53.1px/75% 2.6px no-repeat,
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.28));box-shadow:inset 0 -2.5px 0 rgba(255,255,255,.85)}
.rh-ro{position:absolute;left:12px;top:12px;width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,30,80,.35)}
.rh-ro::before{content:'';position:absolute;inset:3.2px;border-radius:50%;background:linear-gradient(180deg,#C8FBFF,#7FE3F2)}
.rh-ro svg{position:relative;width:28px;height:28px;overflow:visible;filter:drop-shadow(0 0 .7px #2C9FC6) drop-shadow(0 0 .5px #2C9FC6) drop-shadow(0 1px 1.5px rgba(0,70,120,.35))}
.rh-n{font:800 19px/1 var(--f-label);color:#fff;paint-order:stroke fill;-webkit-text-stroke:.16em rgba(0,50,140,.55);white-space:nowrap}
.rh-rule{flex:1;visibility:hidden}
.rh-t{font:800 30px/1 var(--f-label);color:#fff;paint-order:stroke fill;-webkit-text-stroke:.16em #1D6FD0;white-space:nowrap}
.room-b{position:absolute;left:44px;right:44px;top:84px;bottom:100px}
.room-f{position:absolute;left:0;right:0;bottom:0;height:100px}
.lolli{position:relative;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 19px 0 46px;   /* the keycap and label centred between the disc and the pill's end */border-radius:var(--r-btn);background:var(--aqua-btn);
  box-shadow:0 0 0 3px #fff,0 4px 0 3px var(--aqua-lip),0 8px 14px rgba(0,30,90,.28);font:800 21px/1 var(--f-label);color:var(--ink-grey)}
.lolli .lo-i{position:absolute;left:-34px;top:50%;width:61px;height:61px;margin-top:-30.5px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#9CCBFF,var(--icon-blue) 55%,#4E8FE8);box-shadow:0 0 0 3px #fff,0 3px 8px rgba(10,40,90,.35)}
.lolli .lo-i::after{content:'';position:absolute;inset:3px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 50%);pointer-events:none}
.lolli .lo-i svg{position:relative;width:62%;height:62%;overflow:visible}
.lolli .lo-k{font-size:13px}
.lolli .lo-t{paint-order:stroke fill;-webkit-text-stroke:.14em #fff}
body.touch .lolli .lo-k{display:none}
.lolli:hover,.lolli.on,#stage .lolli:focus-visible{box-shadow:0 0 0 3px #fff,var(--halo),0 4px 0 3px var(--aqua-lip),0 8px 14px rgba(0,30,90,.28)}
#stage .lolli:focus-visible{box-shadow:var(--focus-ring),0 4px 0 3px var(--aqua-lip),0 8px 14px rgba(0,30,90,.28)}
.rf-back{position:absolute;left:46px;top:27px}   /* the disc's left edge 12 px in, the same margin as the header's roundel */
/* the primary action (style audit S11): the Next pill, as the Flight Record's Next and the Top 10 Save */
.btn-next,.rf-go{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:46px;padding:0 26px;border-radius:var(--r-btn);text-decoration:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 50%),linear-gradient(180deg,var(--next-t),var(--next-b));
  box-shadow:0 0 0 3px var(--next-rim),0 4px 0 3px #4FB8AA,0 8px 14px rgba(0,30,90,.28);font:800 21px/1 var(--f-label);color:var(--next-ink)}
.rf-go{position:absolute;right:12px;top:27px;min-width:240px}
.rf-go kbd{font-size:13px}
.btn-next:hover,.btn-next.on,.rf-go:hover,.rf-go.on{box-shadow:0 0 0 3px var(--next-rim),var(--halo),0 4px 0 3px #4FB8AA,0 8px 14px rgba(0,30,90,.28)}
#stage .btn-next:focus-visible,#stage .rf-go:focus-visible{box-shadow:var(--focus-ring),0 4px 0 3px #4FB8AA,0 8px 14px rgba(0,30,90,.28)}
.rf-go:disabled{opacity:.55}
.room .lede{margin:0 0 14px;font:700 19px/1.35 var(--f-body);color:#E8EEFF;text-shadow:0 1px 2px rgba(0,0,50,.5)}

/* Hangar: the porthole carousel (the 2009 JP site's idea, our drawing): a steel porthole, ⊖ and ⊕ either side, a fact box */
.hg{position:absolute;inset:0}
.porthole{position:absolute;left:150px;top:10px;width:404px;height:404px;border-radius:50%;background:url(assets/8845c1b17855fc43/isle/sky-porthole.jpg) center/cover;
  box-shadow:inset 0 10px 22px rgba(0,30,70,.5),inset 0 0 0 3px rgba(80,100,120,.6),0 0 0 4px #EEF3F7,0 0 0 9px #B4C4D1,0 0 0 30px #CCD9E3,0 0 0 33px #F4F8FB,0 0 0 37px #9BAEBD,0 18px 34px 34px rgba(0,0,50,.35)}
.porthole::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 22%,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 32%),linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%);pointer-events:none;z-index:2}
.porthole::after{content:'';position:absolute;inset:-37px;border-radius:50%;pointer-events:none;z-index:0;
  background:conic-gradient(from 210deg,rgba(255,255,255,.55),rgba(255,255,255,0) 14%,rgba(60,80,100,.12) 30%,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 64%,rgba(60,80,100,.14) 82%,rgba(255,255,255,.55));
  -webkit-mask:radial-gradient(circle,transparent 0 206px,#000 207px 239px,transparent 240px);mask:radial-gradient(circle,transparent 0 206px,#000 207px 239px,transparent 240px)}
.porthole canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;z-index:1}
.bolt{position:absolute;width:13px;height:13px;margin:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff 0,#C9D3DB 45%,#7F8E9C 100%);box-shadow:0 1px 1px rgba(0,0,0,.35);z-index:3}
.hinge{position:absolute;left:162px;top:-50px;width:80px;height:30px;border-radius:9px;z-index:3;background:linear-gradient(180deg,#F4F8FB,#BCCAD6 55%,#93A6B6);box-shadow:0 2px 3px rgba(0,0,40,.35),inset 0 1px 0 #fff}
.hinge::before,.hinge::after{content:'';position:absolute;top:7px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#9DB0BF)}
.hinge::before{left:9px}.hinge::after{right:9px}
.latch{position:absolute;top:268px;width:44px;height:22px;border-radius:7px;z-index:3;background:linear-gradient(180deg,#F4F8FB,#B6C5D2 55%,#8EA2B3);box-shadow:0 2px 3px rgba(0,0,40,.35)}
.latch.l{left:-46px;transform:rotate(38deg)}.latch.r{right:-46px;transform:rotate(-38deg)}
.pm{position:absolute;z-index:4;top:168px;width:112px;height:96px;display:grid;place-items:center;filter:drop-shadow(0 4px 6px rgba(0,0,50,.35));transition:transform 90ms var(--ease-out)}
.pm svg{width:112px;height:96px}
.pm:hover{filter:drop-shadow(0 4px 6px rgba(0,0,50,.35)) drop-shadow(0 0 4px rgba(255,255,255,.95))}
.pm.minus{left:-6px}.pm.plus{left:598px}
.hg-dots{position:absolute;left:150px;width:404px;top:452px;display:flex;justify-content:center;gap:10px}
.hg-dots i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.hg-dots i.on{background:#fff;box-shadow:0 0 0 3px var(--porthole-ring)}
.hg-r{position:absolute;left:720px;right:0;top:0;bottom:0;display:flex;flex-direction:column}
.hg-n{margin:0;font:800 42px/1.05 var(--f-label);color:#fff;text-shadow:0 3px 0 rgba(0,0,40,.35)}
.hg-role{margin:6px 0 14px;font:700 18px/1.3 var(--f-body);color:#CFE0FF}
.fact{border-radius:var(--r-card);padding:16px 18px;background:linear-gradient(180deg,var(--fact-box-t),var(--fact-box-b));box-shadow:0 0 0 3px rgba(255,255,255,.85),0 6px 14px rgba(0,0,60,.3);color:#fff}
.fact p{margin:0 0 12px;font:500 17px/1.42 var(--f-body)}
.fact .dims{display:flex;gap:22px;margin:0 0 12px}
.fact .dims span{font:500 14px/1.2 var(--f-body);color:#DDF1FF}
.fact .dims b{display:block;font:800 24px/1.1 var(--f-num);color:#fff}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;margin:0}
.stat{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stat dt{font:700 15px/1 var(--f-label);color:#fff}
.stat dd{margin:0;display:flex;gap:4px}
.stat dd i{width:14px;height:14px;border-radius:4px;background:rgba(255,255,255,.3)}
.stat dd i.f{background:#fff;box-shadow:0 0 0 1.5px #0E6FB0}

/* Targets: the 2009 list rows on pale blue (name in the tug's colour, a rounded thumbnail, a grey round badge) */
.rows{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.row{display:grid;grid-template-columns:170px 1fr 112px;gap:16px;align-items:center;min-height:94px;padding:6px 10px 7px;border-radius:12px;background:var(--web-row);color:var(--web-ink);
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 3px 0 rgba(0,0,60,.18)}
.row-l h3{margin:0 0 3px 2px;font:800 19px/1 var(--f-label);color:var(--c,#0F76AD);white-space:nowrap;letter-spacing:.01em;paint-order:stroke fill;-webkit-text-stroke:.14em #fff;text-shadow:0 2px 0 rgba(0,0,40,.18)}
.row-pic{position:relative;display:block;width:166px;height:62px;border-radius:9px;overflow:hidden;background:url(assets/8845c1b17855fc43/isle/sky-row.jpg) center/cover;box-shadow:0 0 0 2px #fff,0 1px 3px rgba(0,30,70,.4)}
.row-pic canvas{position:absolute;inset:0;width:100%;height:100%}
.row-m{min-width:0}
.row-m .cloth{display:inline-block;padding:3px 9px 2px;border-radius:3px;background:#fff;border:1.5px solid rgba(9,43,74,.25);font:800 13px/1.2 var(--f-label);color:#1D2740;letter-spacing:.03em}
.row-m p{margin:5px 0 0;font:500 14.5px/1.3 var(--f-body);color:var(--web-ink)}
.row-src{color:var(--ink-grey-2)}
.row-st{display:inline-block;margin-top:4px;font:700 13px/1 var(--f-body);color:var(--ink-grey-2)}
.row-r{text-align:center;color:var(--ink-grey-2)}
.row-r .rn{display:block;font:900 32px/1 var(--f-num);color:var(--ink-grey-2)}
.row-r span{display:block;margin-top:2px;font:800 11px/1 var(--f-label);letter-spacing:.1em}
.row.down .row-st{color:#1E8A35}
.row.down .row-st::before{content:'✓ ';font-weight:800}
.row.cur{box-shadow:var(--focus-ring),0 3px 0 rgba(0,0,60,.18)}
.row.cur .row-st{color:#0F76AD}
.rows-note{margin:8px 0 0;font:500 13px/1.3 var(--f-body);color:#D4DEFF;text-align:center}
/* digits are numerals (style audit S02, the engine's rule in hud.js): a run of digits in label or body text is set in the numeral face at
   94.25 %, M PLUS 1p's figures standing as tall as Saira's capitals, so AUTH0's zero is a zero (Saira's slashed zero read as θ or 8) */
.dg{font-family:var(--f-num);font-weight:800;font-size:.9425em;font-feature-settings:normal}

/* Records: stat cards (left), the island board in sport-room bars (right) */
.rec{display:grid;grid-template-columns:400px 1fr;gap:28px;height:100%}
.rec-l{display:flex;flex-direction:column;gap:12px}
.scard{border-radius:8px;background:var(--stat-card);color:var(--stat-ink);padding:12px 16px 10px;box-shadow:0 3px 0 rgba(0,0,60,.2)}
.scard .cap{display:block;font:700 15px/1.2 var(--f-body);color:var(--ink-grey-2)}
.scard .v{display:block;margin:4px 0 4px;font:800 40px/1 var(--f-num);color:var(--stat-ink)}
.scard .v.none{font:800 24px/1.2 var(--f-label);color:#9AA2B4}
.scard .cap.new{color:var(--record-ink)}
.splits{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 2px}
.splits span{font:700 13px/1 var(--f-body);color:var(--ink-grey-2)}
.splits b{font:800 15px/1 var(--f-num);color:#333;margin-left:3px}
.best{width:100%;border-collapse:separate;border-spacing:0 3px;font:700 14px/1 var(--f-body)}
.best td{padding:5px 10px;background:rgba(255,255,255,.14);color:#fff}
.best td:first-child{border-radius:6px 0 0 6px}.best td:last-child{border-radius:0 6px 6px 0;text-align:right;font:800 15px/1 var(--f-num)}
.best tr{cursor:var(--hand)}
.best tr.mine td{background:rgba(255,255,255,.3)}
.best tr.lb-sel td{background:var(--hover-t)}
.bh{margin:2px 0 0;font:800 16px/1 var(--f-label);color:#CFE0FF;letter-spacing:.04em}
.rec-r h3{margin:0 0 10px;display:flex;align-items:center;gap:12px;font:800 26px/1 var(--f-label);color:#fff}
.lb-tab{padding:6px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.18);font:800 14px/1 var(--f-label);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.lb-tab.on{background:var(--hover-t)}
.src-n{margin-left:auto;font:700 14px/1 var(--f-body);color:#CFE0FF}
.top10{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.top10 li{display:grid;grid-template-columns:48px 1fr 150px 92px;align-items:center;height:34px;padding:0 14px 0 6px;border-radius:var(--r-btn);
  background:linear-gradient(180deg,var(--indigo-t),var(--indigo-b));box-shadow:0 0 0 2px var(--bar-rim);font:800 17px/1 var(--f-label);color:#fff}
.top10 li b{display:grid;place-items:center;width:30px;height:26px;border-radius:7px;background:rgba(255,255,255,.18);font:800 16px/1 var(--f-num)}
.top10 li.first b{background:linear-gradient(#FFE07A,#E3A52A);color:#5A3A00}
.top10 li.mine{background:linear-gradient(180deg,var(--hover-t),var(--hover-b))}
.top10 li i{font:800 18px/1 var(--f-num);font-style:normal;text-align:right}
.top10 li .lb-pl{font:700 14px/1 var(--f-body);color:#CFE0FF}
.top10 li.empty{opacity:.55}
.top10 li.lb-empty{grid-template-columns:1fr;height:auto;padding:10px 14px;background:rgba(255,255,255,.12);box-shadow:none}
.top10 li.lb-empty b{display:block;width:auto;height:auto;background:none;font:800 18px/1.2 var(--f-label)}
.top10 li.lb-empty span{display:block;margin-top:4px;font:500 14px/1.3 var(--f-body);color:#DCE4FF}
.rec-note{margin:8px 0 0;font:500 13px/1.35 var(--f-body);color:#CFDAFF}

/* About: the credits card and the earlier editions */
.ab{display:grid;grid-template-columns:1fr 360px;gap:30px;height:100%}
.card-n{border-radius:var(--r-card);background:repeating-linear-gradient(180deg,rgba(0,0,0,.022) 0 1px,transparent 1px 4px),var(--card);box-shadow:0 0 0 4px var(--card-rim),0 0 0 7px #fff,0 8px 18px rgba(0,0,60,.3);color:var(--ink-grey);padding:22px 28px}
.card-n h3{margin:0 0 10px;font:800 26px/1 var(--f-label);color:var(--mission-ink)}
.card-n p{margin:0 0 9px;font:500 16px/1.42 var(--f-body)}
.card-n p b{font-weight:700;color:var(--stat-ink)}
.ed{display:flex;flex-direction:column;gap:18px}
.ed-b{position:relative;display:block;height:150px;border-radius:var(--r-tile);overflow:hidden;text-decoration:none;background:#59B3F4 center/cover;box-shadow:0 0 0 4px #fff,0 6px 14px rgba(0,0,60,.35);transition:transform 90ms var(--ease-out)}
.ed-b:hover,.ed-b.on{box-shadow:0 0 0 4px #fff,0 0 0 8px rgba(255,255,255,.5),0 6px 14px rgba(0,0,60,.35)}
#stage .ed-b:focus-visible{box-shadow:0 0 0 4px #fff,0 0 0 8px var(--hover-t),0 6px 14px rgba(0,0,60,.35)}
.ed-b canvas{position:absolute;inset:0;width:100%;height:100%}
.ed-b b{position:absolute;left:14px;bottom:12px;font:800 28px/1 var(--f-label);color:#fff;paint-order:stroke fill;-webkit-text-stroke:.16em #1B6FB5}
.ed-b em{position:absolute;right:14px;bottom:15px;font:700 14px/1 var(--f-body);font-style:normal;color:#fff;text-shadow:0 1px 2px rgba(0,30,80,.7)}

/* ===== notice card (the earlier editions) and the leaving card ===== */
.notice{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:var(--veil-sport);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.nt-card{position:relative;width:700px;padding:30px 40px 30px 300px;min-height:300px;border-radius:var(--r-card);color:var(--ink-grey);
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.022) 0 1px,transparent 1px 4px),var(--card);box-shadow:0 0 0 4px var(--card-rim),0 0 0 7px #fff,0 10px 24px rgba(0,0,60,.4)}
.nt-pic{position:absolute;left:30px;top:30px;width:240px;height:150px;border-radius:12px;overflow:hidden;background:url(assets/8845c1b17855fc43/isle/tile-fleet.jpg) center/cover;box-shadow:0 0 0 3px var(--card-rim)}
.nt-pic canvas{position:absolute;inset:0;width:100%;height:100%}
.nt-q{margin:0 0 10px;font:800 28px/1.15 var(--f-label);color:var(--mission-ink)}
.nt-p{margin:0 0 22px;font:500 16px/1.4 var(--f-body)}
.nt-b{display:flex;align-items:center;gap:26px;padding-left:34px}
.nt-b>*{flex:none}.nt-btn.ok{min-width:170px}
.leave{position:absolute;inset:0;z-index:35;display:grid;place-items:center;background:radial-gradient(420px 300px at 50% 34%,var(--web-leave-glow) 0,var(--web-leave) 70%);color:#fff;text-align:center}
.leave-box{width:700px;display:flex;flex-direction:column;align-items:center}
.leave-box .logo .lk b{font-size:52px}
.leave-box .logo .lk small{font-size:14px;color:#D3E9F6}
.leave-box p{margin:34px 0 12px;font:500 20px/1.45 var(--f-body)}
.leave-q{display:block;font:800 30px/1.2 var(--f-label);color:#F5A01E;paint-order:stroke fill;-webkit-text-stroke:.14em #fff}
.leave-b{display:flex;gap:28px;margin-top:30px}
.leave-b button,.leave-b a{min-width:170px;height:52px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-btn);text-decoration:none;font:800 24px/1 var(--f-label)}
.leave-b button{background:var(--aqua-btn);box-shadow:0 0 0 3px #fff,0 4px 0 3px var(--aqua-lip),0 8px 14px rgba(0,30,80,.35);color:var(--ink-grey)}
.leave-b button span{paint-order:stroke fill;-webkit-text-stroke:.14em #fff}
.leave-b button:hover{box-shadow:0 0 0 3px #fff,var(--halo),0 4px 0 3px var(--aqua-lip),0 8px 14px rgba(0,30,80,.35)}
#stage .leave-b button:focus-visible{box-shadow:var(--focus-ring),0 4px 0 3px var(--aqua-lip)}

/* ===== the Top 10 name entry: a sport-room panel over the results (leaderboard-ui.8845c1b17855fc43.js) ===== */
#dock{position:absolute;inset:0;z-index:32;display:none;place-items:center;pointer-events:none}
body.lb-on #dock{display:grid;pointer-events:auto;background:var(--veil-sport);animation:dock-in .25s linear .6s both}
@keyframes dock-in{from{opacity:0}to{opacity:1}}
.lb-entry{width:760px;border-radius:var(--r-panel);padding:22px 28px 20px;background:linear-gradient(180deg,rgba(32,118,233,.95),rgba(1,77,228,.95));box-shadow:0 0 0 3px #fff,0 12px 28px rgba(0,0,60,.45);color:#fff}
.lbe-slots{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;position:relative}
.lbe-slots>b{flex:1 0 100%;font:800 26px/1 var(--f-label)}
.lbe-cells{display:flex;gap:6px}
.lbe-cells i{width:44px;height:54px;border-radius:8px;background:var(--stat-card);display:grid;place-items:center;font:800 30px/1 var(--f-num);font-style:normal;color:#333;box-shadow:inset 0 -3px 0 rgba(0,0,60,.15)}
.lbe-cells i.min{box-shadow:inset 0 -3px 0 var(--slot-teal)}
.lbe-cells i.cur{box-shadow:var(--focus-ring)}
.lbe-cells i{font-family:var(--f-label)}.lbe-cells i.d{font-family:var(--f-num);font-size:28px}   /* the typed name: letters in the label face, digits as numerals */
#lbe-est{font:700 16px/1 var(--f-body);font-style:normal;color:#DCE6FF}
#lbe-name{position:absolute;inset:0;opacity:0;width:100%;height:100%;border:0;font-size:16px}
.lbe-keys{margin:14px 0 0;display:grid;gap:5px}
.lbe-keys div{display:flex;gap:5px}
.lbe-keys button{flex:1;height:36px;border-radius:7px;background:linear-gradient(#fff,#E2EAF6);color:#2A3C66;font:800 17px/1 var(--f-label);box-shadow:0 2px 0 #8FA3C8}
.lbe-keys button.w{flex:1.6}
.lbe-keys div:last-child button:not(.w){font-family:var(--f-num);font-size:16px}   /* the digit row in the numeral face: 0 never matches the O key */
.lbe-act{display:flex;align-items:center;gap:14px;margin-top:14px}
.lbe-btn{height:48px;padding:0 22px;border-radius:var(--r-btn);background:linear-gradient(180deg,var(--indigo-t),var(--indigo-b));box-shadow:0 0 0 3px var(--bar-rim);font:800 20px/1 var(--f-label);color:#fff}
.lbe-btn.lbe-go{background:linear-gradient(180deg,var(--next-t),var(--next-b));box-shadow:0 0 0 3px var(--next-rim);color:var(--next-ink)}
.lbe-btn:disabled{opacity:.5}
.lbe-btn kbd{font-size:13px;margin-left:6px}
body.touch .lbe-btn kbd{display:none}   /* CP24 verify: no keycap hints on a touch screen */
.lbe-src{margin-left:auto;font:700 14px/1 var(--f-body);color:#DCE6FF}
.lbe-msg{margin:10px 0 0;min-height:20px;font:500 15px/1.3 var(--f-body);color:#E8EEFF}
.lbe-msg.bad{color:#FFE07A}
.lbe-ok{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.lbe-ok b{font:800 26px/1 var(--f-label)}
.lbe-ok .lbe-nm{font:800 32px/1 var(--f-num);color:var(--next-t)}
.lbe-ok #lbe-nm{font-family:var(--f-label)}   /* the saved name in the label face like every row of the board (its digits .dg) */
.lbe-ok span{font:700 16px/1 var(--f-body);color:#DCE6FF}
.lbe-mini{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:5px}
.lbe-mini li{display:grid;grid-template-columns:70px 1fr 150px 80px;align-items:center;height:32px;padding:0 12px;border-radius:8px;background:rgba(255,255,255,.14);font:800 16px/1 var(--f-label)}
.lbe-mini li.me{background:var(--hover-t)}
.lbe-mini li i{font:800 17px/1 var(--f-num);font-style:normal;text-align:right}
.lbe-mini li span:nth-child(3){font:700 14px/1 var(--f-body);color:#DCE6FF}

/* ===== under the stage (client note 10 Oct): one quiet line, Slop Skies · Made by Jewk.es · Sound On (the rest lives on About) ===== */
#foot{margin:12px auto 14px;padding:0 8px;text-align:center;font:600 12px/1.5 var(--f-body)}
/* one small glass capsule under the stage, so the credits read over the page's clouds (white on white otherwise) */
#foot .ft-box{display:inline-block;max-width:100%;padding:5px 6px 5px 16px;border-radius:14px;color:#2B5C82;background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(255,255,255,.55),0 2px 8px rgba(0,50,110,.16)}
#foot p{margin:0}
#foot .ft-c{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 16px}
#foot .ft-t{font-weight:800}
#foot a{color:#1569A8;font-weight:800;text-decoration:none;border-bottom:1px solid rgba(21,105,168,.35)}
#foot a:hover{border-bottom-color:#1569A8}
#foot .ft-snd{height:22px;padding:0 11px;border:0;border-radius:var(--r-pill);font:800 11px/1 var(--f-label);letter-spacing:.04em;color:#3E6E8E;cursor:pointer;
  background:linear-gradient(180deg,#fff 0,#EEF4F8 50%,#DCE6EC 100%);box-shadow:0 0 0 1px #A8BCCB,0 2px 0 rgba(0,40,80,.16),inset 0 1px 0 #fff;text-shadow:none}
#foot .ft-snd[aria-pressed="false"]{color:#8A98A4}
#flow{display:none}
/* style audit S22: in the phone sheet the footer sits on the indigo panel: a faint glass, light ink (the sky page's white capsule read as lilac) */
body.phone #foot .ft-box{background:rgba(255,255,255,.12);color:#DCE6FF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);-webkit-backdrop-filter:none;backdrop-filter:none}
body.phone #foot a{color:#fff;border-bottom-color:rgba(255,255,255,.4)}

/* ===== tablets (compact) and phones (the handheld's sheet): the stage on top, the pages below as sport-room panels ===== */
body.phone #page{width:100%}
body.phone #top{padding:0 12px}
body.phone #stage{width:100%;border-radius:0;box-shadow:none}
body.phone #flow{display:block;padding:14px 12px 76px;background:linear-gradient(180deg,var(--indigo-t),var(--indigo-b))}
body.phone #rooms{position:static;pointer-events:auto}
body.phone #flow .room{display:none;position:static;background:none;color:#fff;padding:0 0 8px}
body.phone[data-tab="how"] #flow #howto,body.phone[data-tab="aircraft"] #flow #hangar,body.phone[data-tab="map"] #flow #targets,
body.phone[data-tab="record"] #flow #records,body.phone[data-tab="menu"] #flow #about{display:block!important}
body.phone .room-h{position:relative;height:56px;padding:0 0 0 70px;margin:0 0 14px;background:none;box-shadow:inset 0 -2px 0 rgba(255,255,255,.6)}
body.phone .room-h::before{display:none}
body.phone .rh-ro{left:0;top:2px;width:52px;height:52px}
body.phone .rh-ro svg{width:32px;height:32px}
body.phone .rh-n{font-size:22px}
body.phone .rh-t,body.phone .rh-rule{display:none}
body.phone .room-b{position:static}
body.phone .room-f{display:none}
body.phone #flow #dock{position:static;display:none;background:none;animation:none}
body.phone.lb-on #flow #dock{display:block;margin:0 0 16px}
body.phone .lb-entry{width:auto;padding:16px}
body.phone .lbe-cells i{width:26px;height:36px;font-size:20px}
body.phone .lbe-keys button{height:34px;font-size:14px}
body.phone .lbe-mini li{grid-template-columns:52px 1fr 90px 64px;font-size:14px}
body.phone .hg{position:relative;display:flex;flex-direction:column;align-items:center}
body.phone .porthole{position:relative;left:auto;top:auto;width:240px;height:240px;margin:26px 0 30px}
body.phone .pm{top:178px;width:66px;height:56px}
body.phone .pm svg{width:66px;height:56px}
body.phone .pm.minus{left:calc(50% - 158px)}body.phone .pm.plus{left:calc(50% + 92px)}
body.phone .porthole::after{display:none}
body.phone .hinge,body.phone .latch,body.phone .bolt{display:none}
body.phone .hg-dots{position:static;width:auto;margin:0 0 12px}
body.phone .hg-r{position:static;width:100%}
body.phone .hg-n{font-size:28px}
body.phone .rows{gap:8px}
body.phone .row{grid-template-columns:110px 1fr 54px;padding:8px;gap:10px}
body.phone .row-pic{width:106px;height:50px}
body.phone .row-l h3{font-size:16px}
body.phone .row-r .rn{font-size:24px}
body.phone .row-r span{font-size:9px}
body.phone .rec,body.phone .ab,body.phone .hw{display:flex;flex-direction:column;gap:16px}
body.phone .top10 li{grid-template-columns:40px 1fr 70px;font-size:15px}
body.phone .top10 li .lb-pl{display:none}
body.phone .hw-rule{position:static;height:auto;padding:12px 16px;border-radius:14px;font-size:17px;text-align:center}
body.phone .card-n{padding:16px}
body.phone #ph-bar{display:flex}
#ph-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:6px;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,var(--indigo-b),var(--indigo-t));box-shadow:0 -2px 0 rgba(255,255,255,.6)}
#ph-bar button{flex:1;min-width:0;min-height:44px;padding:0 2px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06));box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);font:800 13px/1.1 var(--f-label);color:#fff}
#ph-bar button[aria-selected="true"]{background:linear-gradient(180deg,#fff,#E6EEFF);color:var(--mission-ink)}
@media (max-width:420px){#ph-bar button{font-size:12px}}   /* "How to Fly" stays on one line on a 360-430 px phone */
/* the handheld (body.gb, phone lane): only the sheet shows the site; give it the sport-room panel colour so nothing of the shell shows through */
body.gb #stage{display:none!important}
body.gb.gb-sheet #field{background:linear-gradient(180deg,var(--indigo-t),var(--indigo-b))}
body.gb #flow{padding-top:8px}
body.gb #foot{margin:0}
body.gb .gb-how{display:flex}
body.gb #howto #m-c1{margin:0 0 16px;padding:16px;border-radius:var(--r-card);background:var(--card);box-shadow:0 0 0 3px var(--card-rim)}
body:not(.gb) #howto #m-c1{display:none}
body.gb #howto .hw{display:none}   /* the handheld shows its own controls diagram (handheld.8845c1b17855fc43.js) in place of the keyboard / touch / tilt cards */
/* How to Fly (layout audit L-08): the cards on a tablet's compact page (the handheld uses its diagram) */
.hw-c{padding:14px 16px;border-radius:var(--r-card);background:repeating-linear-gradient(180deg,rgba(0,0,0,.022) 0 1px,transparent 1px 4px),var(--card);box-shadow:0 0 0 3px var(--card-rim);color:var(--ink-grey)}
.hw-p svg{display:block;width:180px;height:auto;margin:0 auto}
.hw-c h3{margin:6px 0 8px;font:800 20px/1.1 var(--f-label);color:var(--mission-ink)}
.hw-k{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font:500 15px/1.3 var(--f-body)}
.hw-k dt{font-weight:700;color:var(--stat-ink)}.hw-k dd{margin:0}
.hw-rule{margin:14px 0 0;color:#fff;background:rgba(255,255,255,.14);font:700 17px/1.35 var(--f-body)}

@media (prefers-reduced-motion:reduce){
  .fs-k,.pf-spin i{animation:none}.pf-mark{animation:none;opacity:1;transform:none}
}