/* Hangar / ship select (built at runtime by hangar.js; only active while #overlay has .hg-on) */
#v2-continue[hidden]{display:none!important}
.hg-wrap[hidden]{display:none!important}

#overlay.overlay.hg-on{position:fixed!important;inset:0!important;z-index:60;display:block!important;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:0!important;text-align:left;
 background:radial-gradient(120% 70% at 50% -10%,#123746 0%,#07202a 38%,#040e14 100%)!important;backdrop-filter:none;-webkit-tap-highlight-color:transparent}
#overlay.hg-on::before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(143,227,240,.035) 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,rgba(143,227,240,.03) 0 1px,transparent 1px 64px);mask-image:linear-gradient(#000,transparent 70%);-webkit-mask-image:linear-gradient(#000,transparent 70%)}
body.hg-active #toast{display:none!important}

.hg-wrap{--hg-c:#d2f78a;--hg-alt:#ffffff;--hg-line:rgba(143,227,240,.16);--hg-panel:rgba(8,28,36,.72);position:relative;box-sizing:border-box;width:100%;min-height:100%;color:#edf1e7;font-family:'DM Sans',sans-serif;display:flex;flex-direction:column;gap:10px;padding:14px 14px 0}
.hg-wrap *,.hg-wrap *::before,.hg-wrap *::after{box-sizing:border-box}

/* ---- header: BACK · title · best ---- */
.hg-head{position:relative;display:flex;align-items:center;gap:12px;text-align:left;min-width:0}
#overlay.hg-on .fl-back{appearance:none;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px!important;margin:0!important;padding:0 14px 0 10px!important;border-radius:12px;border:1px solid var(--hg-line);background:rgba(8,28,36,.72);color:#e6f4e8;font:800 13px/1 'Barlow Condensed',sans-serif!important;letter-spacing:2px;cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
#overlay.hg-on .fl-back span{font-size:26px;line-height:.7;margin-top:-3px}
#overlay.hg-on .fl-back:hover{border-color:var(--hg-c);background:color-mix(in srgb,var(--hg-c) 14%,rgba(8,28,36,.8))}
#overlay.hg-on .fl-back:active{transform:scale(.96)}
#overlay.hg-on .fl-back:focus-visible{outline:2px solid var(--hg-c);outline-offset:2px}
.fl-head-t{flex:1;min-width:0}
.fl-head-t small{display:block;font-size:9px;letter-spacing:2.6px;color:var(--hg-c);transition:color .4s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#overlay.hg-on .fl-head-t h2{margin:3px 0 0!important;font:900 28px/.95 'Barlow Condensed',Impact,sans-serif!important;letter-spacing:1px;color:#f2fbef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-head-best{flex:none;text-align:right}
.fl-head-best small{display:block;font-size:8.5px;letter-spacing:2px;color:#9fb3ad}
.fl-head-best b{font:800 18px/1 'Barlow Condensed',sans-serif;color:#e6ffb0;letter-spacing:1px}

/* ---- hangar display ---- */
.hg-stage{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--hg-line);background:#04101a;height:clamp(220px,32vh,360px);flex:none;touch-action:pan-y;user-select:none;-webkit-user-select:none;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.35)}
.hg-stage::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hg-c) 22%,transparent),inset 0 0 40px color-mix(in srgb,var(--hg-c) 10%,transparent);transition:box-shadow .5s}
.hg-stage .hg-canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;min-width:0!important;aspect-ratio:auto!important;margin:0!important;transform:none!important;display:block!important;border:0!important;border-radius:0!important}
.hg-arrow{position:absolute;top:42%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,var(--hg-c) 45%,transparent);background:rgba(4,16,24,.55);color:#f2fbef;font:600 30px/1 'Barlow Condensed',sans-serif;display:grid;place-items:center;padding:0 0 4px;cursor:pointer;backdrop-filter:blur(4px);transition:background .2s,transform .15s,border-color .4s}
.hg-arrow:hover{background:color-mix(in srgb,var(--hg-c) 25%,rgba(4,16,24,.6))}
.hg-arrow:active{transform:translateY(-50%) scale(.92)}
.hg-arrow:focus-visible,.hg-tabs button:focus-visible{outline:2px solid var(--hg-c);outline-offset:2px}
.hg-prev{left:10px}.hg-next{right:10px}
.hg-plate{position:absolute;left:14px;top:12px;z-index:2;display:flex;flex-direction:column;pointer-events:none;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.hg-plate b{font:900 34px/.9 'Barlow Condensed',Impact,sans-serif;color:var(--hg-c);transition:color .4s}
.hg-plate span{font-size:9px;letter-spacing:2px;color:#c9d8d2;margin-top:3px}
.hg-tabs{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:2;display:flex;gap:6px;padding:5px;border-radius:14px;background:rgba(3,12,18,.6);border:1px solid var(--hg-line);backdrop-filter:blur(6px)}
.hg-tabs button{appearance:none;border:1px solid transparent;background:transparent;color:#9fb3ad;border-radius:10px;padding:3px 8px 3px 4px;display:flex;align-items:center;gap:4px;cursor:pointer;font:700 12px/1 'Barlow Condensed',sans-serif;letter-spacing:1px;min-height:40px;transition:background .25s,border-color .25s,color .25s}
.hg-tabs img{width:32px;height:32px;object-fit:contain;filter:grayscale(.6) brightness(.8);transition:filter .25s,transform .25s}
.hg-tabs button:hover{color:#fff}
.hg-tabs button.on{border-color:var(--hg-c);background:color-mix(in srgb,var(--hg-c) 16%,transparent);color:#fff;box-shadow:0 0 14px color-mix(in srgb,var(--hg-c) 35%,transparent)}
.hg-tabs button.on img{filter:none;transform:scale(1.12)}

/* ---- ship info / stats / skills ---- */
.hg-info{display:flex;flex-direction:column;gap:8px;min-width:0}
.hg-id{display:none}
.hg-role{font-size:9px;letter-spacing:2.4px;color:#9fb3ad}
.hg-name{font:900 56px/.85 'Barlow Condensed',Impact,sans-serif;margin:2px 0 4px;color:var(--hg-c);transition:color .4s;text-shadow:0 0 30px color-mix(in srgb,var(--hg-c) 35%,transparent)}
.hg-tag{font-size:12px!important;line-height:1.4;color:#c3d0c7;margin:0!important}
.hg-dossier{display:none;box-sizing:border-box;padding:11px 13px 12px;border-radius:12px;background:linear-gradient(180deg,rgba(6,18,24,.78),rgba(4,12,16,.9));border:1px solid color-mix(in srgb,var(--hg-c,#d2f78a) 30%,transparent);scrollbar-width:thin}
.hg-dossier small{display:block;font:800 10px/1 'Barlow Condensed',sans-serif;letter-spacing:2px;color:#8fa6a0;margin-bottom:7px}
.hg-dossier small b{color:var(--hg-c,#d2f78a)}
.hg-dossier p{margin:0;font-size:12px;line-height:1.5;color:#c3d3cd;font-style:italic}
.hg-story{font-size:11.5px!important;line-height:1.45;color:#a9bcb6;font-style:italic;margin:8px 0 0!important;padding-left:9px;border-left:2px solid var(--hg-c,#d2f78a);max-width:44ch}
.hg-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.hg-stat{display:grid;grid-template-columns:1fr auto;column-gap:8px;align-items:center}
.hg-stat span{grid-area:1/1}.hg-stat em{grid-area:1/2}.hg-stat i{grid-area:2/1/3/3}
.hg-stat span{font-size:9px;letter-spacing:1.8px;color:#9fb3ad}
.hg-stat em{font:700 13px/1 'Barlow Condensed',sans-serif;font-style:normal;text-align:right;color:#f2fbef}
.hg-stat i{height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:3px}
.hg-stat b{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--hg-c),color-mix(in srgb,var(--hg-c) 40%,#fff));box-shadow:0 0 10px color-mix(in srgb,var(--hg-c) 60%,transparent);transition:width .7s cubic-bezier(.2,.9,.25,1.15),background .4s}
.hg-label{font-size:9px!important;letter-spacing:2.6px;color:#9fb3ad;margin:4px 0 0!important}
.hg-skills{position:relative;list-style:none;margin:0;padding:7px 0 2px;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.hg-skills::-webkit-scrollbar{display:none}
.hg-skills li{flex:0 0 auto;width:210px;scroll-snap-align:start;display:grid;grid-template-columns:32px 1fr;gap:9px;align-items:start;padding:8px 10px;border-radius:11px;border:1px solid var(--hg-line);background:var(--hg-panel);position:relative;transition:border-color .3s,background .3s,box-shadow .3s,transform .3s}
.hg-ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--hg-c) 14%,transparent);border:1px solid color-mix(in srgb,var(--hg-c) 30%,transparent)}
.hg-ico svg{width:20px;height:20px;fill:var(--hg-c);stroke:var(--hg-c);transition:fill .4s,stroke .4s}
.hg-skills small{display:flex;align-items:center;gap:6px;font-size:8.5px;letter-spacing:1.6px;color:#9fb3ad}
.hg-skills kbd{font:600 8px/1 'DM Sans',sans-serif;letter-spacing:.8px;padding:2px 4px;border-radius:4px;border:1px solid rgba(255,255,255,.14);color:#c9d8d2;background:rgba(255,255,255,.04)}
.hg-skills b{display:block;font:800 15px/1.05 'Barlow Condensed',sans-serif;letter-spacing:.6px;color:#f2fbef;margin:2px 0 2px}
.hg-skills p{font-size:10.5px!important;line-height:1.35;color:#a9bcb6;margin:0!important}
.hg-skills li.live{border-color:var(--hg-c);background:color-mix(in srgb,var(--hg-c) 12%,rgba(8,28,36,.85));box-shadow:0 0 18px color-mix(in srgb,var(--hg-c) 28%,transparent)}
.hg-skills li.live::after{content:"ON SCREEN";position:absolute;right:8px;top:-6px;font:700 7.5px/1 'DM Sans',sans-serif;letter-spacing:1.2px;color:#071a1f;background:var(--hg-c);padding:2px 5px;border-radius:4px;animation:hgBlink 1.2s ease-in-out infinite}
@keyframes hgBlink{50%{opacity:.55}}

/* ---- preview monitor ---- */
.hg-video{display:flex;justify-content:center;min-width:0}
.hg-monitor{position:relative;width:min(64vw,250px);aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#02080c var(--hg-poster,none) center/cover no-repeat;border:1px solid color-mix(in srgb,var(--hg-c) 35%,transparent);box-shadow:0 0 0 4px rgba(4,14,20,.8),0 0 0 5px var(--hg-line),0 16px 40px rgba(0,0,0,.45);isolation:isolate}
.hg-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#02080c;transition:opacity .25s}
.hg-no-video .hg-vid{opacity:0}
.hg-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(60% 45% at 50% 45%,color-mix(in srgb,var(--hg-c) 18%,transparent),transparent 70%),linear-gradient(#051722,#02080c);opacity:0;transition:opacity .25s;pointer-events:none}
.hg-no-video .hg-fallback{opacity:1}
.hg-fb-ship{width:48%;max-width:150px;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--hg-c) 50%,transparent));animation:hgHover 2.4s ease-in-out infinite}
@keyframes hgHover{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.hg-fb-text{font:700 11px/1 'DM Sans',sans-serif;letter-spacing:3px;background:linear-gradient(90deg,#50656a 0%,#50656a 35%,#f2fbef 50%,#50656a 65%,#50656a 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hgShimmer 1.6s linear infinite}
@keyframes hgShimmer{from{background-position:100% 0}to{background-position:-150% 0}}
.hg-scan{position:absolute;inset:0;pointer-events:none;z-index:2;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),radial-gradient(120% 90% at 50% 50%,transparent 60%,rgba(0,0,0,.55));mix-blend-mode:multiply}
.hg-static{position:absolute;inset:-20%;pointer-events:none;z-index:3;opacity:0;background:repeating-radial-gradient(circle at 17% 32%,rgba(255,255,255,.9) 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,rgba(255,255,255,.25) 0 2px,rgba(0,0,0,.4) 2px 4px),#1a2a30}
.hg-glitch .hg-static{animation:hgStatic .38s steps(6) both}
.hg-glitch .hg-vid,.hg-glitch .hg-fallback{animation:hgJitter .38s steps(5) both}
@keyframes hgStatic{0%{opacity:0}15%{opacity:.95;transform:translate(3%,-2%)}40%{opacity:.8;transform:translate(-4%,3%)}70%{opacity:.6;transform:translate(2%,1%)}100%{opacity:0;transform:none}}
@keyframes hgJitter{0%{transform:none;filter:none}25%{transform:translateX(-6px) skewX(4deg);filter:hue-rotate(80deg) saturate(2)}50%{transform:translateX(5px);filter:contrast(1.8)}75%{transform:translateX(-2px) scaleY(1.02)}100%{transform:none;filter:none}}
.hg-corner{position:absolute;width:16px;height:16px;z-index:4;pointer-events:none;border:2px solid var(--hg-c);opacity:.85;transition:border-color .4s}
.hg-corner.tl{left:7px;top:7px;border-right:0;border-bottom:0}.hg-corner.tr{right:7px;top:7px;border-left:0;border-bottom:0}
.hg-corner.bl{left:7px;bottom:7px;border-right:0;border-top:0}.hg-corner.br{right:7px;bottom:7px;border-left:0;border-top:0}
.hg-live{position:absolute;left:14px;top:13px;z-index:4;display:flex;align-items:center;gap:6px;font:700 8.5px/1 'DM Sans',sans-serif;letter-spacing:1.8px;color:#f2fbef;background:rgba(2,8,12,.6);padding:4px 7px;border-radius:5px}
.hg-live i{width:6px;height:6px;border-radius:50%;background:#ff4b4b;box-shadow:0 0 8px #ff4b4b;animation:hgBlink 1s steps(2) infinite}
.hg-chip{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:4;max-width:88%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:800 12px/1 'Barlow Condensed',sans-serif;letter-spacing:1.4px;color:#071a1f;background:var(--hg-c);padding:5px 10px;border-radius:999px;box-shadow:0 0 16px color-mix(in srgb,var(--hg-c) 55%,transparent);transition:background .4s}
.hg-timeline{position:absolute;left:12px;right:12px;bottom:9px;height:3px;z-index:4;border-radius:2px;background:rgba(255,255,255,.14)}
.hg-timeline[hidden]{display:none}
.hg-prog{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:var(--hg-c)}
.hg-mark{position:absolute;top:-2px;width:3px;height:7px;margin-left:-1px;border-radius:1px;background:#fff;opacity:.85}

/* ---- menu controls + launch ---- */
.hg-controls{display:flex;flex-direction:column;align-items:center;gap:8px}
#overlay.hg-on .hg-controls>*{margin:0!important}
#overlay.hg-on #ship-picker,#overlay.hg-on .crosshair{display:none!important}
#overlay.hg-on #difficulty-picker{text-align:left;width:100%;max-width:340px}
#overlay.hg-on #overlay-hint{display:block!important;font-size:8px!important;letter-spacing:1.6px;color:#7f9c96;text-align:center}
#overlay.hg-on .steering-picker{max-width:340px;width:100%}
.hg-go{position:sticky;bottom:0;z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 -14px;padding:14px 14px max(12px,env(safe-area-inset-bottom));background:linear-gradient(rgba(4,14,20,0),rgba(4,14,20,.92) 38%,#040e14)}
#overlay.hg-on #launch{position:relative;overflow:hidden;width:100%;max-width:420px;min-height:60px!important;margin:0!important;border-radius:14px;padding:0 26px!important;display:flex;align-items:center;justify-content:center;gap:14px;font:900 20px/1 'Barlow Condensed',Impact,sans-serif!important;letter-spacing:4px!important;color:#10261d!important;background:linear-gradient(180deg,#e6ffb0,#c4ef6e);box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 -4px 0 rgba(0,0,0,.14) inset,0 10px 30px rgba(190,240,110,.28),0 0 40px rgba(190,240,110,.18);cursor:pointer;transition:transform .15s,box-shadow .2s,filter .2s}
#overlay.hg-on #launch span{font-size:22px;transition:transform .25s}
#overlay.hg-on #launch::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:hgShine 3.2s ease-in-out infinite}
@keyframes hgShine{0%,60%{left:-40%}100%{left:130%}}
#overlay.hg-on #launch:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 0 0 1px rgba(255,255,255,.45) inset,0 -4px 0 rgba(0,0,0,.14) inset,0 14px 36px rgba(190,240,110,.38),0 0 60px rgba(190,240,110,.25)}
#overlay.hg-on #launch:hover span{transform:translate(3px,-3px)}
#overlay.hg-on #launch:active{transform:translateY(1px) scale(.985)}
#overlay.hg-on #v2-continue{width:100%;max-width:420px;min-height:46px;margin:0!important;border-radius:12px;display:flex!important;justify-content:center;gap:12px;align-items:center;background:rgba(8,28,36,.8)!important;color:#e6ffb0!important;border:1px solid #c4ef6e!important;font:800 15px/1 'Barlow Condensed',sans-serif;letter-spacing:2.5px}
#overlay.hg-on #v2-continue[hidden]{display:none!important}

/* ---- launch animation + pilot-select entrance (<=0.5s) ---- */
.hg-launching .hg-info,.hg-launching .hg-video,.hg-launching .hg-controls,.hg-launching .hg-head,.hg-launching .hg-tabs,.hg-launching .hg-arrow,.hg-launching .hg-plate{opacity:.15;transition:opacity .3s}
#overlay.hg-launching #launch{transform:scale(.97);filter:brightness(1.25);box-shadow:0 0 0 2px #fff inset,0 0 70px rgba(230,255,176,.8)}
#overlay.hg-launching #launch span{transform:translateY(-40px);transition:transform .35s cubic-bezier(.5,0,.9,.4)}
.hg-wrap.fl-in-fwd .hg-head{animation:hgDrop .34s cubic-bezier(.2,.8,.2,1) both}
.hg-wrap.fl-in-fwd .hg-stage{animation:hgZoom .4s cubic-bezier(.2,.8,.2,1) both}
.hg-wrap.fl-in-fwd .hg-info{animation:hgInR .38s .05s cubic-bezier(.2,.8,.2,1) both}
.hg-wrap.fl-in-fwd .hg-video{animation:hgInR .38s .08s cubic-bezier(.2,.8,.2,1) both}
.hg-wrap.fl-in-fwd .hg-controls,.hg-wrap.fl-in-fwd .hg-go{animation:hgUp .36s .1s cubic-bezier(.2,.8,.2,1) both}
@keyframes hgDrop{from{opacity:0;transform:translateY(-14px)}}
@keyframes hgZoom{from{opacity:0;transform:scale(1.08)}}
@keyframes hgInR{from{opacity:0;transform:translateX(36px)}}
@keyframes hgUp{from{opacity:0;transform:translateY(18px)}}

/* ---- desktop: skills left, hangar centre, video right, controls bar ---- */
@media (min-width:900px) and (min-height:541px){
 .hg-wrap{display:grid;height:100dvh;min-height:600px;grid-template-columns:minmax(250px,320px) minmax(0,1fr) minmax(230px,330px);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"head head head" "info stage video" "controls controls go";gap:14px 22px;padding:16px 26px 16px;max-width:1560px;margin:0 auto}
 .hg-head{grid-area:head;padding-bottom:10px;border-bottom:1px solid var(--hg-line);gap:18px}
 #overlay.hg-on .fl-head-t h2{font-size:clamp(32px,3vw,46px)!important}
 .fl-head-best b{font-size:24px}
 .hg-stage{grid-area:stage;height:auto;min-height:0}
 .hg-plate{display:none}
 .hg-arrow{width:52px;height:52px;font-size:36px}
 .hg-prev{left:16px}.hg-next{right:16px}
 .hg-tabs{bottom:14px;gap:8px;padding:6px}
 .hg-tabs button{padding:4px 12px 4px 6px;font-size:14px;min-height:46px}
 .hg-tabs img{width:38px;height:38px}
 .hg-info{grid-area:info;overflow-y:auto;scrollbar-width:thin;padding-right:2px;gap:10px}
 .hg-id{display:block}
 .hg-stats{grid-template-columns:1fr;gap:7px}
 .hg-skills{flex-direction:column;overflow:visible;gap:7px}
 .hg-skills li{width:auto}
 .hg-video{grid-area:video;container-type:size;align-items:flex-start;min-height:0}
 .hg-video{position:relative}
 .hg-monitor{width:min(100cqw,calc((100cqh - 150px)*.8));max-width:none}
 .hg-dossier{display:block;position:absolute;left:0;right:0;bottom:0;max-height:140px;overflow:auto}
 .hg-id .hg-story{display:none}
 .hg-tabs button{padding:4px 9px 4px 5px;font-size:13px}
 .hg-tabs img{width:32px;height:32px}
 .hg-controls{grid-area:controls;flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:flex-start;gap:10px;padding-top:12px;border-top:1px solid var(--hg-line)}
 #overlay.hg-on #difficulty-picker{width:260px}
 #overlay.hg-on .hg-controls button{min-height:44px;width:auto!important;flex:none;white-space:nowrap;padding:0 18px}
 #overlay.hg-on .game-menu-actions{display:flex;gap:10px;width:auto}
 #overlay.hg-on #overlay-hint{width:100%;text-align:left}
 .hg-go{grid-area:go;position:static;margin:0;padding:12px 0 0;background:none;border-top:1px solid var(--hg-line);align-items:flex-end;justify-content:flex-end;flex-direction:column}
 #overlay.hg-on #launch{width:330px;min-height:66px!important;font-size:22px!important;letter-spacing:3px!important;white-space:nowrap}
 #overlay.hg-on #v2-continue{width:330px}
}
@media (min-width:900px) and (min-height:541px) and (max-height:800px){
 .hg-wrap{gap:10px 18px;padding:12px 22px 12px}
 .hg-head{padding-bottom:6px}
 #overlay.hg-on .fl-head-t h2{font-size:clamp(28px,2.6vw,36px)!important}
 .hg-name{font-size:36px}
 .hg-tag,.hg-story{display:none}
 .hg-stats{grid-template-columns:1fr 1fr;gap:4px 12px!important}
 #overlay.hg-on #overlay-hint{display:none!important}
 #overlay.hg-on #difficulty-picker{width:230px}
 .hg-info{gap:7px}
 .hg-stats{gap:4px}
 .hg-skills{gap:5px}
 .hg-skills li{padding:5px 9px;grid-template-columns:28px 1fr;gap:8px}
 .hg-ico{width:28px;height:28px}.hg-ico svg{width:17px;height:17px}
 .hg-skills b{font-size:14px;margin:1px 0}
 .hg-skills p{font-size:10px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .hg-controls{padding-top:8px;gap:8px}
 .hg-go{padding-top:8px}
 #overlay.hg-on #launch{min-height:58px!important}
 #overlay.hg-on .hg-controls button{min-height:40px;padding:0 14px;font-size:12px}
 #overlay.hg-on #launch{width:300px}
 #overlay.hg-on #v2-continue{width:300px}
}
@media (pointer:fine) and (min-width:900px){#overlay.hg-on .steering-picker{display:none!important}}

/* ---- landscape phones: sticky hangar left, scrolling column right ---- */
@media (max-height:540px) and (min-width:560px){
 .hg-wrap{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr) minmax(120px,22%);grid-template-areas:"stage head head" "stage id video" "stage stats video" "stage label label" "stage skills skills" "stage controls controls" "stage go go";grid-template-rows:auto auto 1fr auto auto auto auto;column-gap:12px;row-gap:8px;padding:8px max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))}
 .hg-info{display:contents}
 .hg-head{grid-area:head;text-align:left}
 .hg-stage{grid-area:stage;position:sticky;top:8px;align-self:start;height:calc(100dvh - 16px);min-height:220px}
 .hg-id{grid-area:id;display:block;align-self:end}.hg-id .hg-name,.hg-id .hg-role{display:none}
 .hg-tag{font-size:11px!important}
 .hg-stats{grid-area:stats;grid-template-columns:1fr;align-content:start;gap:5px}
 .hg-label{grid-area:label}.hg-skills{grid-area:skills}
 .hg-video{grid-area:video;justify-content:flex-end;align-items:flex-start}
 .hg-monitor{width:100%}
 .hg-controls{grid-area:controls;align-items:stretch}
 .hg-go{grid-area:go;flex-direction:row;align-items:stretch;margin:0 -10px 0 0;padding:10px 10px max(8px,env(safe-area-inset-bottom)) 0}
 #overlay.hg-on .fl-head-t h2{font-size:22px!important}
 #overlay.hg-on .fl-back{min-height:38px!important;padding:0 10px 0 7px!important}
 .fl-head-best b{font-size:15px}
 .hg-plate b{font-size:26px}
 .hg-tabs{bottom:8px;gap:3px;padding:3px}
 .hg-tabs button{min-height:34px;padding:2px 6px 2px 3px;font-size:11px}
 .hg-tabs img{width:26px;height:26px}
 .hg-arrow{width:38px;height:38px;font-size:26px}
 .hg-skills li{width:200px;padding:6px 8px;grid-template-columns:26px 1fr;gap:7px}
 .hg-ico{width:26px;height:26px}.hg-ico svg{width:16px;height:16px}
 .hg-skills kbd{display:none}
 .hg-skills b{font-size:14px}
 .hg-skills p{font-size:10px!important}
 #overlay.hg-on #difficulty-picker,#overlay.hg-on .steering-picker{max-width:none}
 #overlay.hg-on #launch{flex:2;min-height:52px!important;max-width:none;font-size:18px!important}
 #overlay.hg-on #v2-continue{flex:1;min-height:52px;max-width:none;font-size:13px;letter-spacing:1.5px}
}

/* ---- portrait phones / narrow: stats beside the preview monitor ---- */
@media not ((min-width:900px) and (min-height:541px)){
 @media not ((max-height:540px) and (min-width:560px)){
  .hg-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);grid-template-areas:"head head" "stage stage" "id video" "stats video" "label label" "skills skills" "controls controls" "go go";grid-template-rows:auto auto auto 1fr auto auto auto auto;column-gap:12px;row-gap:10px;max-width:640px;margin:0 auto}
  .hg-info{display:contents}
  .hg-head{grid-area:head}.hg-stage{grid-area:stage}.hg-video{grid-area:video;align-items:flex-start}
  .hg-id{grid-area:id;display:block;align-self:end}.hg-id .hg-name,.hg-id .hg-role{display:none}
  .hg-stats{grid-area:stats;grid-template-columns:1fr;align-content:start;gap:7px}
  .hg-label{grid-area:label}.hg-skills{grid-area:skills;margin:0 -14px!important;padding:7px 14px 2px!important;scroll-padding:0 14px}
  .hg-controls{grid-area:controls}.hg-go{grid-area:go}
  .hg-monitor{width:100%}
  .hg-tag{font-size:12px!important}
 }
}

/* ---- small portrait phones ---- */
@media (max-width:380px){
 .hg-tabs button span{display:none}
 .hg-tabs button{padding:3px 5px}
}

@media (prefers-reduced-motion:reduce){
 #overlay.hg-on *,#overlay.hg-on *::before,#overlay.hg-on *::after{animation:none!important;transition:none!important}
 .hg-launching .hg-info,.hg-launching .hg-video,.hg-launching .hg-controls{opacity:1}
}
.hg-monitor{container-type:inline-size}
@container (max-width:230px){.hg-chip-cat{display:none}.hg-chip{font-size:10px;letter-spacing:.5px;padding:4px 7px;bottom:17px;max-width:92%}.hg-live{font-size:7.5px;letter-spacing:1px;left:11px;top:11px}}
.hg-skills li>div{min-width:0}

/* =====================================================================
   Front-end flow: TITLE MENU / RESULT screens (hangar.js) + pause MAIN MENU
   ===================================================================== */
.fl-screen[hidden],.fl-bg[hidden],.fl-stash{display:none!important}
.fl-bg{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
#overlay.fl-s-result .fl-bg{filter:brightness(.55) saturate(.85)}
#overlay.fl-s-title::before,#overlay.fl-s-result::before{display:none}
.fl-title,.fl-result{position:relative;z-index:1;box-sizing:border-box;min-height:100%;color:#edf1e7;font-family:'DM Sans',sans-serif}
.fl-title *,.fl-result *{box-sizing:border-box}

/* ---- title ---- */
.fl-title{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:16px;min-height:100dvh;padding:max(30px,env(safe-area-inset-top)) 18px max(14px,env(safe-area-inset-bottom));text-align:center}
.fl-logo{display:flex;flex-direction:column;align-items:center;cursor:pointer;user-select:none;-webkit-user-select:none;position:relative}
.fl-kicker{font-size:9.5px;letter-spacing:3.4px;color:#8fe3f0;opacity:.85}
.fl-word{display:flex;font:900 clamp(54px,15vw,132px)/.84 'Barlow Condensed',Impact,sans-serif;letter-spacing:.015em;margin-top:6px;filter:drop-shadow(0 0 24px rgba(143,227,240,.35)) drop-shadow(0 4px 0 rgba(0,0,0,.45))}
.fl-word span{display:inline-block;color:transparent;-webkit-background-clip:text;background-clip:text;
 background-image:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%),linear-gradient(180deg,#fbfff4 0%,#e3fbff 42%,#8fe3f0 78%,#5fb6c8 100%);background-size:400% 100%,100% 100%;background-position:120% 0,0 0;background-repeat:no-repeat;
 animation:flShine 6s calc(1.4s + var(--i) * 70ms) ease-in-out infinite}
@keyframes flShine{0%{background-position:120% 0,0 0}16%,100%{background-position:-25% 0,0 0}}
.fl-sub{display:flex;align-items:center;gap:12px;margin-top:10px;font:800 clamp(18px,5.4vw,30px)/1 'Barlow Condensed',sans-serif;letter-spacing:.34em;color:#e6ffb0;text-shadow:0 0 18px rgba(196,239,110,.35)}
.fl-sub b{font-weight:800}.fl-sub em{font-style:normal;color:#c4ef6e;margin-left:-.1em}
.fl-sub i{display:block;width:clamp(22px,8vw,64px);height:2px;background:linear-gradient(90deg,transparent,#c4ef6e)}
.fl-sub i:last-child{background:linear-gradient(270deg,transparent,#c4ef6e)}
.fl-dock{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:380px}
.fl-best{display:flex;align-items:baseline;gap:10px;padding:7px 16px;border-radius:999px;background:rgba(3,12,18,.58);border:1px solid rgba(143,227,240,.18);backdrop-filter:blur(6px)}
.fl-best small{font-size:9px;letter-spacing:2.4px;color:#9fb3ad}
.fl-best b{font:800 21px/1 'Barlow Condensed',sans-serif;letter-spacing:2px;color:#e6ffb0}
.fl-menu{display:flex;flex-direction:column;gap:8px;width:100%}
#overlay.hg-on .fl-menu button{appearance:none;position:relative;display:flex!important;align-items:center;justify-content:center;gap:10px;width:100%!important;min-width:0!important;max-width:none!important;min-height:46px!important;margin:0!important;padding:0 18px!important;border-radius:12px!important;border:1px solid rgba(143,227,240,.22)!important;background:rgba(6,22,30,.68)!important;color:#dbeee6!important;font:800 15px/1 'Barlow Condensed',sans-serif!important;letter-spacing:2.4px!important;text-transform:uppercase;white-space:nowrap;cursor:pointer;backdrop-filter:blur(6px);touch-action:manipulation;transition:border-color .2s,background .2s,color .2s,transform .15s}
#overlay.hg-on .fl-menu button:hover,#overlay.hg-on .fl-menu button:focus-visible{border-color:#c4ef6e!important;background:rgba(196,239,110,.13)!important;color:#fff!important}
#overlay.hg-on .fl-menu button:focus-visible{outline:2px solid #c4ef6e;outline-offset:2px}
#overlay.hg-on .fl-menu button:active{transform:scale(.98)}
#overlay.hg-on .fl-menu .fl-start{overflow:hidden;min-height:62px!important;font-size:25px!important;letter-spacing:7px!important;color:#10261d!important;border:0!important;background:linear-gradient(180deg,#e6ffb0,#c4ef6e)!important;box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 -4px 0 rgba(0,0,0,.14) inset,0 10px 30px rgba(190,240,110,.28),0 0 40px rgba(190,240,110,.18)}
#overlay.hg-on .fl-menu .fl-start span{font-size:22px;letter-spacing:0;transition:transform .25s}
#overlay.hg-on .fl-menu .fl-start:hover,#overlay.hg-on .fl-menu .fl-start:focus-visible{background:linear-gradient(180deg,#f0ffc8,#d0f77e)!important;color:#10261d!important;filter:brightness(1.03)}
#overlay.hg-on .fl-menu .fl-start:hover span{transform:translate(3px,-3px)}
#overlay.hg-on .fl-menu .fl-start::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:hgShine 3.2s ease-in-out infinite}
#overlay.hg-on .fl-menu #coop-open{color:#d9f5a8!important}
.fl-hint{margin:0!important;font:700 10px/1 'DM Sans',sans-serif;letter-spacing:2.6px;color:#8fb3ab;animation:flPulse 2.2s ease-in-out infinite}
@keyframes flPulse{50%{opacity:.35}}

/* title entrance (first load / back from results) and back-from-hangar slide */
.fl-intro .fl-kicker{animation:hgDrop .5s .1s cubic-bezier(.2,.8,.2,1) both}
.fl-intro .fl-word span{animation:flDrop .55s calc(.15s + var(--i) * 55ms) cubic-bezier(.2,.9,.25,1.25) both,flShine 6s calc(1.4s + var(--i) * 70ms) ease-in-out infinite}
.fl-intro .fl-sub{animation:flWide .6s .65s cubic-bezier(.2,.8,.2,1) both}
.fl-intro .fl-dock>*{animation:hgUp .45s cubic-bezier(.2,.8,.2,1) both}
.fl-intro .fl-best{animation-delay:.55s!important}.fl-intro .fl-menu{animation-delay:.65s!important}.fl-intro .fl-hint{animation:hgUp .45s .8s cubic-bezier(.2,.8,.2,1) both,flPulse 2.2s 1.3s ease-in-out infinite}
@keyframes flDrop{from{opacity:0;transform:translateY(-40px) scale(1.25);filter:blur(6px)}}
@keyframes flWide{from{opacity:0;letter-spacing:.9em}}
.fl-title.fl-in-back{animation:flInBack .34s cubic-bezier(.2,.8,.2,1) both}
@keyframes flInBack{from{opacity:0;transform:translateX(-40px) scale(.98)}}

/* desktop: logo + menu column left, formation flies on the right */
@media (min-width:900px) and (min-height:541px){
 .fl-title{align-items:flex-start;justify-content:center;gap:36px;padding:48px clamp(44px,7vw,130px);text-align:left}
 .fl-logo{align-items:flex-start}
 .fl-word{font-size:clamp(100px,9.5vw,156px)}
 .fl-sub{margin-left:4px}.fl-sub i:first-child{display:none}
 .fl-dock{align-items:flex-start;max-width:400px}
 #overlay.hg-on .fl-menu button{justify-content:flex-start;padding:0 22px!important}
 #overlay.hg-on .fl-menu button:not(.fl-start):hover,#overlay.hg-on .fl-menu button:not(.fl-start):focus-visible{transform:translateX(5px)}
 #overlay.hg-on .fl-menu .fl-start{justify-content:space-between}
 .fl-hint{padding-left:4px}
}
@media (min-width:900px) and (min-height:541px) and (max-height:800px){
 .fl-title{gap:24px;padding-top:30px;padding-bottom:30px}
 .fl-word{font-size:clamp(88px,8.4vw,120px)}
 .fl-dock{gap:10px}
 #overlay.hg-on .fl-menu{gap:7px}
 #overlay.hg-on .fl-menu button{min-height:42px!important}
 #overlay.hg-on .fl-menu .fl-start{min-height:58px!important}
}
/* landscape phones: logo left (formation beneath it), menu right */
@media (max-height:540px) and (min-width:560px){
 .fl-title{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:20px;padding:max(16px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))}
 .fl-logo{align-items:flex-start;flex:1;min-width:0;padding-top:6px}
 .fl-word{font-size:clamp(54px,15vh,84px)}
 .fl-sub{font-size:17px;margin-top:6px}.fl-sub i:first-child{display:none}
 .fl-dock{flex:none;width:min(330px,42vw);gap:7px;align-self:center}
 .fl-best{padding:5px 12px}.fl-best b{font-size:17px}
 #overlay.hg-on .fl-menu{gap:6px}
 #overlay.hg-on .fl-menu button{min-height:38px!important;font-size:13px!important}
 #overlay.hg-on .fl-menu .fl-start{min-height:50px!important;font-size:21px!important}
 .fl-hint{font-size:8px}
}
@media (max-height:640px) and (max-width:559px){ /* short portrait */
 .fl-title{gap:10px;padding-top:18px}
 .fl-word{font-size:clamp(50px,15vw,80px)}
 #overlay.hg-on .fl-menu{gap:6px}
 #overlay.hg-on .fl-menu button{min-height:40px!important}
 #overlay.hg-on .fl-menu .fl-start{min-height:54px!important}
}

/* ---- result: game over / mission complete ---- */
.fl-result{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom))}
.fl-card{--fl-acc:#ff8a66;width:min(560px,100%);padding:26px 24px 18px;border-radius:20px;background:linear-gradient(180deg,rgba(8,30,40,.88),rgba(4,14,20,.94));border:1px solid rgba(143,227,240,.2);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 30px 80px rgba(0,0,0,.55);backdrop-filter:blur(10px);text-align:center;display:flex;flex-direction:column;align-items:stretch;gap:14px}
.fl-card.fl-won{--fl-acc:#c4ef6e}
#overlay.hg-on .fl-result #overlay-kicker{display:block!important;font-size:10px!important;letter-spacing:2.8px!important;color:var(--fl-acc)!important;margin:0 0 8px!important;opacity:.95}
#overlay.hg-on .fl-result #overlay-title{font:900 clamp(46px,12vw,76px)/.9 'Barlow Condensed',Impact,sans-serif!important;letter-spacing:0!important;margin:0!important;color:#f2fbef;text-transform:uppercase}
#overlay.hg-on .fl-result #overlay-title br{display:none}
#overlay.hg-on .fl-result #overlay-title{white-space:normal!important;overflow-wrap:anywhere}
#overlay.hg-on .fl-result .fl-won #overlay-title br{display:inline}
#overlay.hg-on .fl-result .fl-won #overlay-title em{margin-left:0}
#overlay.hg-on .fl-result #overlay-title em{font-style:normal;letter-spacing:2px!important;margin-left:.2em;color:var(--fl-acc)}
.fl-r-badge{align-self:center;padding:5px 12px;border-radius:999px;font:800 11px/1 'Barlow Condensed',sans-serif;letter-spacing:2px;color:#cfe0da;border:1px solid rgba(143,227,240,.3);background:rgba(143,227,240,.08)}
.fl-r-badge.fl-new{color:#10261d;border-color:transparent;background:linear-gradient(180deg,#ffe38a,#ffc860);box-shadow:0 0 22px rgba(255,200,96,.45)}
.fl-r-badge[hidden]{display:none}
.fl-r-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}
.fl-r-stats>div{padding:10px 8px 9px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(143,227,240,.12);min-width:0}
.fl-r-stats dt{font-size:8.5px;letter-spacing:2px;color:#9fb3ad}
.fl-r-stats dd{margin:5px 0 0;font:800 22px/1 'Barlow Condensed',sans-serif;letter-spacing:1px;color:#f2fbef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-r-stats [data-k="score"] dd{color:#e6ffb0}
.fl-r-stats dd small{display:block;margin-top:3px;font:700 8.5px/1.1 'DM Sans',sans-serif;letter-spacing:1.2px;color:#9fb3ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#overlay.hg-on .fl-r-msg{margin:0!important;font-size:12.5px!important;line-height:1.4;color:#b9cbc4}
.fl-r-actions{display:flex;flex-direction:column;gap:8px}
.fl-r-cont:empty{display:none}
.fl-r-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#overlay.hg-on .fl-result button{appearance:none;display:flex!important;align-items:center;justify-content:center;gap:12px;width:100%!important;max-width:none!important;min-width:0!important;min-height:48px!important;margin:0!important;padding:0 14px!important;border-radius:12px!important;border:1px solid rgba(143,227,240,.24)!important;background:rgba(8,28,36,.8)!important;color:#dbeee6!important;font:800 15px/1 'Barlow Condensed',sans-serif!important;letter-spacing:2.4px!important;white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:border-color .2s,background .2s,transform .15s,filter .2s}
#overlay.hg-on .fl-result button:hover{border-color:#c4ef6e!important;color:#fff!important}
#overlay.hg-on .fl-result button:focus-visible{outline:2px solid #c4ef6e;outline-offset:2px}
#overlay.hg-on .fl-result button:active{transform:scale(.98)}
#overlay.hg-on .fl-result .fl-retry,#overlay.hg-on .fl-result #v2-continue{min-height:58px!important;font-size:20px!important;letter-spacing:4px!important;color:#10261d!important;border:0!important;background:linear-gradient(180deg,#e6ffb0,#c4ef6e)!important;box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 -4px 0 rgba(0,0,0,.14) inset,0 10px 30px rgba(190,240,110,.25)}
#overlay.hg-on .fl-result #v2-continue[hidden]{display:none!important}
#overlay.hg-on .fl-card.fl-has-cont .fl-retry{min-height:48px!important;font-size:16px!important;letter-spacing:2.4px!important;color:#e6ffb0!important;background:rgba(8,28,36,.8)!important;border:1px solid #c4ef6e!important;box-shadow:none}
#overlay.hg-on .fl-result .fl-retry:hover,#overlay.hg-on .fl-result #v2-continue:hover{filter:brightness(1.06)}
#overlay.hg-on .fl-result #overlay-hint{display:block!important;margin:0!important;font-size:8.5px!important;letter-spacing:1.6px;color:#7f9c96}
.fl-result.fl-in-up .fl-card{animation:flInUp .4s cubic-bezier(.2,.8,.2,1) both}
.fl-result.fl-in-up .fl-r-stats>div{animation:hgUp .4s cubic-bezier(.2,.8,.2,1) both}
.fl-result.fl-in-up .fl-r-stats>div:nth-child(2){animation-delay:.05s}.fl-result.fl-in-up .fl-r-stats>div:nth-child(3){animation-delay:.1s}.fl-result.fl-in-up .fl-r-stats>div:nth-child(4){animation-delay:.15s}
@keyframes flInUp{from{opacity:0;transform:translateY(24px) scale(.97)}}
@media (max-width:480px){
 #overlay.hg-on .fl-head-t h2{font-size:23px!important}
 .fl-head-t small{font-size:8px;letter-spacing:2px}
 .fl-head-best b{font-size:15px}
 #overlay.hg-on .fl-result .fl-retry,#overlay.hg-on .fl-result #v2-continue{font-size:18px!important;letter-spacing:2px!important}
 #overlay.hg-on .fl-result button{letter-spacing:1.6px!important;font-size:14px!important}
 .fl-card{padding:22px 16px 16px;gap:12px}
 .fl-r-stats{grid-template-columns:1fr 1fr}
}
@media (max-height:540px) and (min-width:560px){
 .fl-result{padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left))}
 .fl-card{width:min(780px,100%);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"head actions" "badge actions" "stats actions" "msg actions" "foot actions";grid-template-rows:auto auto auto 1fr auto;column-gap:18px;row-gap:8px;padding:16px 18px 12px;text-align:left}
 .fl-r-head{grid-area:head}.fl-r-badge{grid-area:badge;justify-self:start}.fl-r-stats{grid-area:stats}.fl-r-msg{grid-area:msg}.fl-r-foot{grid-area:foot}.fl-r-actions{grid-area:actions;align-self:center}
 #overlay.hg-on .fl-result #overlay-title{font-size:40px!important}
 #overlay.hg-on .fl-result #overlay-kicker{margin-bottom:4px!important}
 .fl-r-stats{gap:6px}.fl-r-stats>div{padding:7px 7px 6px}.fl-r-stats dd{font-size:18px}
 #overlay.hg-on .fl-r-msg{font-size:11px!important}
 #overlay.hg-on .fl-result button{min-height:42px!important;font-size:13px!important}
 #overlay.hg-on .fl-result .fl-retry,#overlay.hg-on .fl-result #v2-continue{min-height:50px!important;font-size:17px!important}
 .fl-r-row{grid-template-columns:1fr}
 #overlay.hg-on .fl-result #overlay-hint{text-align:left}
}

/* ---- pause screen: MAIN MENU (second tap confirms) ---- */
#fl-quit[hidden]{display:none!important}
#overlay #fl-quit{min-height:44px;width:min(100%,340px);margin:8px auto 0;padding:0 16px;background:rgba(6,22,30,.6);color:#d7eadf;border:1px solid #557c80;border-radius:8px;font-weight:700;letter-spacing:1.5px;cursor:pointer;touch-action:manipulation}
#overlay #fl-quit:hover{border-color:#d5f296}
#overlay #fl-quit.fl-armed{border-color:#ff8a66;color:#ffd3c4;background:rgba(90,24,14,.55)}
#overlay #fl-quit:focus-visible{outline:2px solid #d5f296;outline-offset:3px}

@media (prefers-reduced-motion:reduce){
 .fl-word span{background-position:120% 0,0 0!important}
}
@media (max-width:400px){#overlay.hg-on .fl-head-t h2{font-size:20px!important;letter-spacing:0}.hg-head{gap:9px}#overlay.hg-on .fl-back{padding:0 10px 0 7px!important}}

/* =====================================================================
   WORLD MAP (hangar.js): TITLE -> WORLD MAP -> PILOT SELECT
   ===================================================================== */
#overlay.fl-s-map::before{display:none}
.wm-wrap{--wm-c:#8fe3f0;--wm-alt:#c4ef6e;--hg-c:var(--wm-c);--hg-line:rgba(143,227,240,.16);position:relative;z-index:1;box-sizing:border-box;width:100%;min-height:100dvh;color:#edf1e7;font-family:'DM Sans',sans-serif;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "map" "side";grid-template-rows:auto auto 1fr;gap:12px;padding:14px 14px 0;max-width:640px;margin:0 auto;
 background:radial-gradient(90% 60% at 30% 0%,color-mix(in srgb,var(--wm-c) 10%,transparent),transparent 70%)}
.wm-wrap[data-world="2"]{background:radial-gradient(90% 60% at 30% 0%,rgba(181,140,255,.12),transparent 70%)}
.wm-wrap[data-world="3"]{background:radial-gradient(90% 60% at 60% 0%,rgba(255,90,120,.12),transparent 70%),radial-gradient(70% 50% at 10% 100%,rgba(95,240,208,.08),transparent 70%)}
.wm-wrap *,.wm-wrap *::before,.wm-wrap *::after{box-sizing:border-box}
.wm-head{grid-area:head;display:flex;align-items:center;gap:12px;min-width:0}
.wm-head .fl-head-t small{color:var(--wm-c)}
.wm-clr{font:800 18px/1 'Barlow Condensed',sans-serif;color:#e6ffb0;letter-spacing:1px}

/* ---- the map ---- */
.wm-mapbox{grid-area:map;position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.wm-frame{position:relative;width:100%;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:#02080c;border:1px solid color-mix(in srgb,var(--wm-c) 35%,transparent);box-shadow:0 0 0 4px rgba(4,14,20,.8),0 0 0 5px var(--hg-line),0 18px 50px rgba(0,0,0,.5),0 0 60px color-mix(in srgb,var(--wm-c) 10%,transparent);isolation:isolate;container-type:inline-size;transition:border-color .4s}
.wm-frame .hg-corner{border-color:var(--wm-c);z-index:6}
.wm-pan{position:absolute;inset:0;transform-origin:50% 55%;animation:wmDrift 18s ease-in-out infinite alternate}
@keyframes wmDrift{from{transform:scale(1.02) translate(-.6%,.4%)}to{transform:scale(1.06) translate(.8%,-.6%)}}
.wm-art{position:absolute;inset:0;transition:filter .8s}
.wm-art>img,.wm-art>canvas{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;display:block;object-fit:cover;margin:0!important;border:0!important}
.wm-frame:not(.wm-has-art) .wm-art{animation:wmFlicker 5s steps(1) infinite}
.wm-has-art .wm-art>img{filter:saturate(1.05) contrast(1.03)}
@keyframes wmFlicker{0%,100%{opacity:1}47%{opacity:.86}48%{opacity:1}83%{opacity:.93}84%{opacity:1}}
.wm-scan{position:absolute;inset:0;pointer-events:none;z-index:3;background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px),radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.5));mix-blend-mode:multiply}
.wm-sweep{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.wm-sweep::before{content:"";position:absolute;left:0;right:0;top:0;height:16%;background:linear-gradient(180deg,rgba(143,227,240,0),rgba(143,227,240,.07) 85%,rgba(210,250,255,.13) 99%,rgba(210,250,255,0));animation:wmSweep 7s linear infinite;will-change:transform}
.wm-wrap[data-world="2"] .wm-sweep::before{background:linear-gradient(180deg,rgba(255,180,92,0),rgba(255,180,92,.06) 85%,rgba(255,220,170,.12) 99%,rgba(255,220,170,0))}
.wm-wrap[data-world="3"] .wm-sweep::before{background:linear-gradient(180deg,rgba(255,90,120,0),rgba(255,90,120,.06) 85%,rgba(255,180,200,.12) 99%,rgba(255,180,200,0))}
@keyframes wmSweep{from{transform:translateY(-110%)}to{transform:translateY(640%)}}

/* route */
.wm-route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.wm-route path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.wm-r-glow{stroke:var(--wm-c);stroke-width:2.2;opacity:.22;filter:blur(1.2px)}
.wm-r-line{stroke:var(--wm-c);stroke-width:.55;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 1.2px var(--wm-c))}
.wm-r-dash{stroke:#fff;stroke-width:.35;stroke-dasharray:1.2 2.4;opacity:.75;animation:wmMarch 1.4s linear infinite}
@keyframes wmMarch{to{stroke-dashoffset:-3.6}}

/* stage nodes + start marker */
.wm-nodes{position:absolute;inset:0;z-index:2}
.wm-start{position:absolute;left:var(--x);top:var(--y);width:0;height:0;pointer-events:none}
.wm-start i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--wm-alt);box-shadow:0 0 14px var(--wm-alt)}
.wm-start i::before,.wm-start i::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--wm-alt);animation:wmPing 1.8s ease-out infinite}
.wm-start i::after{animation-delay:.9s}
@keyframes wmPing{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}
.wm-start em{position:absolute;right:14px;top:-7px;font:800 10px/1 'Barlow Condensed',sans-serif;font-style:normal;letter-spacing:2px;color:#10261d;background:var(--wm-alt);padding:2px 5px;border-radius:4px;white-space:nowrap}
#overlay.hg-on .wm-node{appearance:none;position:absolute;left:var(--x);top:var(--y);width:0;height:0;padding:0!important;margin:0!important;border:0!important;background:none!important;min-height:0!important;cursor:pointer;z-index:1}
.wm-dot{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(2,10,16,.92) 55%,color-mix(in srgb,var(--rc) 40%,rgba(2,10,16,.9)));border:2px solid var(--rc);box-shadow:0 0 0 3px rgba(2,10,16,.55),0 0 16px color-mix(in srgb,var(--rc) 70%,transparent);transition:transform .2s}
.wm-dot b{font:900 14px/1 'Barlow Condensed',sans-serif;color:#f2fbef;letter-spacing:.5px}
.wm-node:hover .wm-dot,.wm-node:focus-visible .wm-dot,.wm-node.show .wm-dot{transform:scale(1.18)}
.wm-node:focus-visible{outline:none}.wm-node:focus-visible .wm-dot{outline:2px solid #fff;outline-offset:3px}
.wm-chk{position:absolute;right:-7px;top:-7px;width:17px;height:17px;border-radius:50%;background:#c4ef6e;display:grid;place-items:center;box-shadow:0 0 8px rgba(196,239,110,.8)}
.wm-chk svg{width:12px;height:12px;stroke:#10261d}
.wm-label{position:absolute;top:21px;left:0;transform:translateX(-50%);white-space:nowrap;font:800 11px/1 'Barlow Condensed',sans-serif;letter-spacing:1.6px;color:#f2fbef;background:rgba(2,10,16,.78);border:1px solid color-mix(in srgb,var(--rc) 55%,transparent);padding:3px 7px;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .2s;text-shadow:0 1px 4px #000}
.wm-node[data-side="l"] .wm-label{transform:translateX(-86%)}.wm-node[data-side="r"] .wm-label{transform:translateX(-14%)}
.wm-node:hover .wm-label,.wm-node:focus-visible .wm-label,.wm-node.show .wm-label{opacity:1;z-index:3}
.wm-node:hover,.wm-node.show{z-index:4!important}
.wm-start[data-edge] em{right:auto;left:-12px;top:12px}

/* HUD */
.wm-hud{position:absolute;inset:0;pointer-events:none;z-index:4}
.wm-hud-tl{position:absolute;left:14px;top:12px;display:flex;flex-direction:column;text-shadow:0 2px 8px #000}
.wm-hud-tl small{font:700 8.5px/1 'DM Sans',sans-serif;letter-spacing:2.2px;color:var(--wm-c)}
.wm-hud-tl b{font:900 22px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;color:#f2fbef;margin-top:3px}
.wm-hud-br{position:absolute;right:14px;bottom:11px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.wm-hud-br span{font:700 8px/1 'DM Sans',sans-serif;letter-spacing:1.8px;color:#9fb3ad;background:rgba(2,10,16,.6);padding:3px 6px;border-radius:4px}
.wm-hud-br span:empty{display:none}
.wm-hud-diff{color:#ffb45c!important;border:1px solid rgba(255,180,92,.45)}
.wm-hud-emb{position:absolute;right:12px;top:10px;width:clamp(40px,11cqw,92px);aspect-ratio:1;filter:drop-shadow(0 0 14px rgba(255,180,92,.45))}
.wm-hud-emb img,.wm-hud-emb svg{width:100%;height:100%;object-fit:contain;display:block}

/* locked: frost + padlock */
.wm-frost{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .8s;background:radial-gradient(60% 50% at 50% 50%,rgba(4,10,20,.25),rgba(4,10,20,.75)),repeating-linear-gradient(115deg,rgba(220,240,255,.05) 0 2px,transparent 2px 9px),radial-gradient(circle at 20% 30%,rgba(220,240,255,.18),transparent 30%),radial-gradient(circle at 80% 70%,rgba(220,240,255,.14),transparent 35%);backdrop-filter:blur(2px)}
.wm-locked .wm-frost{opacity:1}
.wm-locked .wm-art{filter:blur(3px) saturate(.25) brightness(.55)}
.wm-locked .wm-route,.wm-locked .wm-nodes{opacity:.3;filter:grayscale(1)}
.wm-lock{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:not-allowed}
.wm-locked .wm-lock{display:flex}
.wm-padlock{width:clamp(44px,11cqw,86px);filter:drop-shadow(0 0 18px rgba(143,227,240,.5))}
.wm-padlock .wm-shackle{stroke:#cfe7ee}.wm-padlock .wm-body{fill:#cfe7ee}.wm-padlock .wm-key{fill:#0a1a22}
.wm-lock p{margin:0!important;font:800 clamp(12px,2.4cqw,19px)/1 'Barlow Condensed',sans-serif!important;letter-spacing:3px;color:#e6f4f8;background:rgba(2,10,16,.7);border:1px solid rgba(207,231,238,.35);padding:7px 14px;border-radius:8px;text-align:center}
.wm-shards{position:absolute;left:50%;top:50%;width:0;height:0}
.wm-shards i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;background:#dff4fa;clip-path:polygon(50% 0,100% 70%,20% 100%);opacity:0}
.wm-shake{animation:wmShake .42s cubic-bezier(.36,.07,.19,.97) both!important}
@keyframes wmShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
/* unlock sequence: shackle pops, lock shatters, frost melts, route lights up */
.wm-unlocking .wm-shackle{animation:wmShackle .4s cubic-bezier(.3,1.6,.5,1) both}
@keyframes wmShackle{to{transform:translateY(-9px) rotate(-14deg);transform-origin:46px 32px}}
.wm-unlocking .wm-padlock{animation:wmRattle .4s steps(6) both}
@keyframes wmRattle{25%{transform:rotate(-6deg)}50%{transform:rotate(5deg)}75%{transform:rotate(-3deg)}}
.wm-shatter .wm-padlock,.wm-shatter .wm-lock p{animation:wmBurst .35s ease-in both}
@keyframes wmBurst{to{transform:scale(1.5);opacity:0;filter:blur(4px) brightness(3)}}
.wm-shatter .wm-shards i{animation:wmShard .6s cubic-bezier(.2,.7,.3,1) both}
@keyframes wmShard{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(1.4)}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--d) * -1.6)) rotate(var(--r)) scale(.6)}}
.wm-unlocked{position:absolute;left:50%;top:50%;z-index:6;transform:translate(-50%,-50%);display:none;flex-direction:column;align-items:center;gap:4px;padding:10px 22px;border-radius:12px;background:rgba(2,10,16,.78);border:1px solid var(--wm-c);box-shadow:0 0 40px color-mix(in srgb,var(--wm-c) 50%,transparent);pointer-events:none;text-align:center}
.wm-unlocked small{font:700 9px/1 'DM Sans',sans-serif;letter-spacing:2.6px;color:var(--wm-alt)}
.wm-unlocked b{font:900 clamp(22px,5cqw,44px)/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:2px;color:#fff;text-shadow:0 0 20px var(--wm-c)}
.wm-fresh .wm-unlocked{display:flex;animation:wmBanner 1.9s ease both}
@keyframes wmBanner{0%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%)}}
.wm-fresh::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.9),color-mix(in srgb,var(--wm-c) 40%,transparent) 40%,transparent 70%);animation:wmFlash .6s ease-out both}
@keyframes wmFlash{from{opacity:1}to{opacity:0}}
.wm-fresh .wm-r-line{stroke-width:.9}
.wm-fresh .wm-r-glow{opacity:.5;transition:opacity 1.5s}

/* entrance (<=1s): map settles from a slight zoom, route draws in, nodes pop in sequence */
.wm-in .wm-pan{animation:wmSettle .9s cubic-bezier(.2,.8,.2,1) both,wmDrift 18s .9s ease-in-out infinite alternate}
@keyframes wmSettle{from{transform:scale(1.14) translate(-2%,2%);filter:brightness(1.6) blur(2px)}to{transform:scale(1.02) translate(-.6%,.4%)}}
.wm-in .wm-r-line{animation:wmDraw .7s .15s cubic-bezier(.4,0,.2,1) both}
.wm-in .wm-r-glow,.wm-in .wm-r-dash{animation:wmFade .4s .6s both}
@keyframes wmDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes wmFade{from{opacity:0}}
.wm-in .wm-node .wm-dot{animation:wmPop .3s calc(.25s + var(--i) * 80ms) cubic-bezier(.2,1.6,.4,1) both}
.wm-in .wm-node .wm-label{transition:none;animation:wmFade .3s calc(.35s + var(--i) * 80ms) both}
.wm-in .wm-start{animation:wmPop .3s .15s cubic-bezier(.2,1.6,.4,1) both}
@keyframes wmPop{from{transform:scale(0);opacity:0}}
.wm-in .wm-hud{animation:wmFade .5s .2s both}
.wm-wrap.fl-in-fwd .wm-head{animation:hgDrop .34s cubic-bezier(.2,.8,.2,1) both}
.wm-wrap.fl-in-fwd .wm-side{animation:hgUp .4s .1s cubic-bezier(.2,.8,.2,1) both}
.wm-wrap.fl-in-back .wm-side,.wm-wrap.fl-in-back .wm-head{animation:flInBack .34s cubic-bezier(.2,.8,.2,1) both}
.wm-paused *,.wm-paused *::before,.wm-paused *::after{animation-play-state:paused!important}

/* ---- side: world cards, stage list, SELECT ---- */
.wm-side{grid-area:side;display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}
.wm-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#overlay.hg-on .wm-card{appearance:none;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:0!important;margin:0!important;padding:10px 12px!important;border-radius:12px;border:1px solid var(--hg-line);background:rgba(8,28,36,.72);color:#dbeee6;text-align:left;cursor:pointer;font-family:'DM Sans',sans-serif;transition:border-color .25s,background .25s,box-shadow .25s,opacity .25s,transform .15s}
#overlay.hg-on .wm-card:hover{border-color:color-mix(in srgb,var(--wm-c) 60%,transparent)}
#overlay.hg-on .wm-card.on{border-color:var(--wm-c);background:color-mix(in srgb,var(--wm-c) 13%,rgba(8,28,36,.85));box-shadow:0 0 22px color-mix(in srgb,var(--wm-c) 28%,transparent)}
#overlay.hg-on .wm-card:focus-visible{outline:2px solid var(--wm-c);outline-offset:2px}
#overlay.hg-on .wm-card:active{transform:scale(.985)}
.wm-card-top{display:flex;align-items:center;justify-content:space-between;width:100%;gap:6px}
.wm-card-top small{font-size:8.5px;letter-spacing:2.2px;color:#9fb3ad}
.wm-card-state{display:inline-flex;align-items:center;gap:4px;font:800 9px/1 'Barlow Condensed',sans-serif;font-style:normal;letter-spacing:1.4px;color:#c4ef6e;padding:3px 6px;border-radius:5px;background:rgba(196,239,110,.12)}
.wm-card-state svg{width:11px;height:11px;stroke:currentColor}
.wm-card-state .wm-padlock{width:9px;filter:none}.wm-card-state .wm-shackle{stroke:currentColor}.wm-card-state .wm-body{fill:currentColor}
.wm-card.locked .wm-card-state{color:#cfe7ee;background:rgba(207,231,238,.1)}
.wm-card.cleared .wm-card-state{color:#10261d;background:#c4ef6e}
.wm-card>b{font:900 21px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;color:#f2fbef;position:relative;z-index:1}
.wm-card-meta{display:flex;flex-wrap:wrap;gap:2px 10px;font:700 9px/1.2 'DM Sans',sans-serif;letter-spacing:1.2px;color:#9fb3ad;position:relative;z-index:1}
.wm-card-best{color:#e6ffb0}
.wm-card-diff{font:800 9px/1 'Barlow Condensed',sans-serif;letter-spacing:1.3px;color:#ffb45c;position:relative;z-index:1}
.wm-card-diff:empty{display:none}
.wm-card-emb{position:absolute;right:-8px;bottom:-10px;width:62px;height:62px;opacity:.55;pointer-events:none}
.wm-card-emb img,.wm-card-emb svg{width:100%;height:100%;object-fit:contain}
#overlay.hg-on .wm-card[data-w="2"].on{border-color:#ffb45c;background:rgba(255,180,92,.1);box-shadow:0 0 22px rgba(255,180,92,.25)}
#overlay.hg-on .wm-card.locked{opacity:.62}
#overlay.hg-on .wm-card.locked.on{opacity:.85;border-color:#cfe7ee;background:rgba(207,231,238,.06);box-shadow:none}
.wm-detail{display:flex;flex-direction:column;gap:6px;min-height:0}
.wm-dl{margin:0!important;font-size:9px!important;letter-spacing:2.4px;color:#9fb3ad}
.wm-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px}
.wm-stages li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;background:rgba(8,28,36,.6);border:1px solid var(--hg-line);border-left:3px solid var(--rc);min-width:0}
.wm-stages b{font:900 14px/1 'Barlow Condensed',sans-serif;color:var(--rc)}
.wm-stages span{flex:1;min-width:0;font:700 11.5px/1 'Barlow Condensed',sans-serif;letter-spacing:1.2px;color:#dbeee6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-stages svg{width:13px;height:13px;stroke:#c4ef6e;flex:none}
.wm-wrap:is([data-world="2"],[data-world="3"]) .wm-mapbox:has(.wm-locked)~.wm-side .wm-stages{opacity:.5}
.wm-go{position:sticky;bottom:0;z-index:5;display:flex;flex-direction:column;align-items:center;gap:7px;margin:auto -14px 0;padding:12px 14px max(12px,env(safe-area-inset-bottom));background:linear-gradient(rgba(4,14,20,0),rgba(4,14,20,.92) 34%,#040e14)}
#overlay.hg-on .wm-select{position:relative;overflow:hidden;width:100%;max-width:420px;min-height:58px!important;margin:0!important;border-radius:14px;border:0;padding:0 22px!important;display:flex;align-items:center;justify-content:center;gap:12px;font:900 20px/1 'Barlow Condensed',Impact,sans-serif!important;letter-spacing:3.5px!important;color:#10261d!important;background:linear-gradient(180deg,#e6ffb0,#c4ef6e);box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 -4px 0 rgba(0,0,0,.14) inset,0 10px 30px rgba(190,240,110,.28);cursor:pointer;transition:transform .15s,filter .2s}
#overlay.hg-on .wm-select::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:hgShine 3.2s ease-in-out infinite}
#overlay.hg-on .wm-select:hover{filter:brightness(1.05);transform:translateY(-2px)}
#overlay.hg-on .wm-select:focus-visible{outline:2px solid #fff;outline-offset:3px}
#overlay.hg-on .wm-select span{font-size:inherit}
#overlay.hg-on .wm-select.locked{background:rgba(20,34,42,.9);color:#cfe7ee!important;border:1px solid rgba(207,231,238,.35);box-shadow:none;cursor:not-allowed;font-size:15px!important;letter-spacing:2px!important}
#overlay.hg-on .wm-select.locked::before{display:none}
#overlay.hg-on .wm-select.locked:hover{transform:none;filter:none}
.wm-select .wm-padlock{width:16px;filter:none}
.wm-hint{margin:0!important;font:700 8.5px/1 'DM Sans',sans-serif!important;letter-spacing:1.8px;color:#7f9c96;text-align:center}

/* desktop: map left, cards + stage list + SELECT right */
@media (min-width:900px) and (min-height:541px){
 .wm-wrap{max-width:1600px;height:100dvh;min-height:560px;grid-template-columns:minmax(0,1fr) minmax(300px,360px);grid-template-areas:"head head" "map side";grid-template-rows:auto minmax(0,1fr);gap:14px 24px;padding:16px 26px 18px}
 .wm-head{padding-bottom:10px;border-bottom:1px solid var(--hg-line);gap:18px}
 #overlay.hg-on .wm-head .fl-head-t h2{font-size:clamp(32px,3vw,46px)!important}
 .wm-clr{font-size:24px}
 .wm-mapbox{container-type:size}
 .wm-frame{width:min(100cqw,150cqh)}
 .wm-node .wm-label{opacity:1}
 .wm-tabs{grid-template-columns:1fr}
 #overlay.hg-on .wm-card{padding:13px 16px!important}
 .wm-card>b{font-size:27px}
 .wm-card-emb{width:84px;height:84px;right:-6px;bottom:-12px}
 .wm-stages{grid-template-columns:1fr}
 .wm-go{position:static;margin:auto 0 0;padding:0;background:none}
 #overlay.hg-on .wm-select{max-width:none;min-height:64px!important;font-size:22px!important}
 .wm-hud-tl b{font-size:30px}.wm-hud-tl small{font-size:10px}
 .wm-dot{left:-20px;top:-20px;width:40px;height:40px}.wm-dot b{font-size:16px}
 .wm-label{top:25px;font-size:12.5px}
}
@media (min-width:900px) and (min-height:541px) and (max-height:800px){
 .wm-wrap{gap:10px 20px;padding:12px 22px 14px}
 .wm-head{padding-bottom:6px}
 #overlay.hg-on .wm-head .fl-head-t h2{font-size:clamp(28px,2.6vw,36px)!important}
 #overlay.hg-on .wm-card{padding:10px 14px!important;gap:3px}
 .wm-card>b{font-size:23px}
 .wm-card-emb{width:64px;height:64px}
 .wm-stages{gap:4px}.wm-stages li{padding:4px 8px}
 #overlay.hg-on .wm-select{min-height:56px!important;font-size:19px!important}
}
/* landscape phones: map left, head + cards + SELECT right */
@media (max-height:540px) and (min-width:560px){
 .wm-wrap{max-width:none;height:100dvh;min-height:0;grid-template-columns:auto minmax(200px,1fr);grid-template-areas:"map head" "map side";grid-template-rows:auto minmax(0,1fr);gap:8px 14px;padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left))}
 .wm-mapbox{height:calc(100dvh - 16px);aspect-ratio:3/2;max-width:66vw}
 .wm-frame{width:auto;height:100%;max-width:100%;max-height:100%}
 .wm-head .fl-head-t small{font-size:8px}
 #overlay.hg-on .wm-head .fl-head-t h2{font-size:19px!important;letter-spacing:0}
 #overlay.hg-on .wm-head .fl-back{min-height:36px!important;padding:0 9px 0 6px!important}
 .wm-head .fl-head-best{display:none}
 .wm-tabs{grid-template-columns:1fr;gap:6px}
 #overlay.hg-on .wm-card{padding:7px 10px!important;gap:2px}
 .wm-card>b{font-size:17px}
 .wm-card-emb{width:44px;height:44px}
 .wm-detail{display:none}
 .wm-go{position:static;margin:auto 0 0;padding:0;background:none}
 #overlay.hg-on .wm-select{min-height:48px!important;font-size:16px!important;letter-spacing:2px!important;max-width:none}
 #overlay.hg-on .wm-select.locked{font-size:12px!important;letter-spacing:1px!important;padding:0 10px!important}
 .wm-hint{display:none}
 .wm-dot{left:-14px;top:-14px;width:28px;height:28px}.wm-dot b{font-size:12px}
 .wm-hud-tl b{font-size:18px}
}
@media (max-width:480px){
 .wm-dot{left:-13px;top:-13px;width:26px;height:26px;border-width:1.5px}.wm-dot b{font-size:11px}
 .wm-chk{width:14px;height:14px;right:-6px;top:-6px}.wm-chk svg{width:10px;height:10px}
 .wm-start i{left:-7px;top:-7px;width:14px;height:14px}.wm-start em{font-size:8px;right:10px;top:-6px;padding:2px 3px;letter-spacing:1px}
 .wm-label{top:16px;font-size:10px}
 .wm-hud-tl{left:10px;top:8px}.wm-hud-tl b{font-size:16px}.wm-hud-tl small{font-size:7px}
 .wm-hud-br{right:8px;bottom:6px}.wm-hud-br span{font-size:6.5px;padding:2px 4px}
 .wm-card>b{font-size:17px;letter-spacing:.3px;white-space:nowrap}
 #overlay.hg-on .wm-card{padding:9px 10px!important}
 .wm-card-meta,.wm-card-diff{font-size:8px;letter-spacing:.8px}
 .wm-card-emb{width:40px;height:40px;right:-6px;bottom:-8px;opacity:.35}
 .wm-card-top small{letter-spacing:1.4px}
 #overlay.hg-on .wm-select{font-size:18px!important;letter-spacing:2.5px!important}
 #overlay.hg-on .wm-select.locked{font-size:13px!important;letter-spacing:1.4px!important}
}

/* ---- result screen: WORLD MAP button + WORLD 2 UNLOCKED banner ---- */
.fl-r-row{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:480px){.fl-r-row{grid-template-columns:1fr 1fr}.fl-r-row .fl-map{grid-column:1/-1}}
.fl-r-unlock{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 14px;border-radius:12px;border:1px solid #ffb45c;background:linear-gradient(90deg,rgba(181,140,255,.16),rgba(255,180,92,.16));box-shadow:0 0 26px rgba(255,180,92,.25)}
.fl-r-unlock[hidden]{display:none}
.fl-r-unlock small{font:700 9px/1 'DM Sans',sans-serif;letter-spacing:2.6px;color:#c4ef6e}
.fl-r-unlock b{font:900 26px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:3px;color:#fff;text-shadow:0 0 18px rgba(255,180,92,.8)}
.fl-r-unlock span{font:700 9.5px/1 'DM Sans',sans-serif;letter-spacing:1.8px;color:#ffd7a6}
.fl-r-unlock::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:hgShine 2.6s ease-in-out infinite}
#overlay.hg-on .fl-card.fl-unlock .fl-r-row .fl-map{border-color:#ffb45c!important;color:#10261d!important;background:linear-gradient(180deg,#ffd48a,#ffb45c)!important;box-shadow:0 0 22px rgba(255,180,92,.35)}
@media (max-height:540px) and (min-width:560px){.fl-r-row{grid-template-columns:1fr 1fr}.fl-r-row .fl-map{grid-column:1/-1}.fl-card{grid-template-areas:"head actions" "badge actions" "unlock actions" "stats actions" "msg actions" "foot actions";grid-template-rows:auto auto auto auto 1fr auto}.fl-r-unlock{grid-area:unlock;padding:6px 10px}.fl-r-unlock b{font-size:20px}}
.fl-card.fl-unlock .fl-r-unlock{animation:flInUp .5s .25s cubic-bezier(.2,.8,.2,1) both}

@media (max-width:559px) and (min-height:700px){
 .wm-stages{grid-template-columns:1fr;gap:6px}
 .wm-stages li{padding:8px 10px}
 .wm-stages b{font-size:16px}.wm-stages span{font-size:13px}
}
/* World 3 map art has its route painted in: the code route is kept faint on top of it so the two do not double up */
.wm-wrap[data-world="3"] .wm-route{opacity:.4}

/* LUMEN STRIKE logo: two stacked words; STRIKE a touch smaller and wider-spaced under LUMEN */
.fl-words{display:flex;flex-direction:column;align-items:center}
.fl-word.fl-w2{margin-top:-.02em;transform:scale(.8);transform-origin:50% 0;letter-spacing:.08em;margin-bottom:-.14em}
@media (min-width:900px) and (min-height:541px){.fl-words{align-items:flex-start}.fl-word.fl-w2{transform-origin:0 0}}

/* ---- 4+ worlds (Claude, 26 Sep 2026): world cards become a compact 2x2 grid so the sector list, difficulty and
   PLAY button all fit; the focused world's armour note is already shown on the map itself. ---- */
@media (min-width:900px) and (min-height:541px){
 .wm-tabs{grid-template-columns:1fr 1fr;gap:8px}
 #overlay.hg-on .wm-card{padding:9px 11px!important;gap:3px;min-height:76px!important}
 .wm-card>b{font-size:19px!important;line-height:1.02;padding-right:30px}
 .wm-card-top small{font-size:8px;letter-spacing:1.6px}
 .wm-card-meta .wm-card-best,.wm-card-diff{display:none}
 .wm-card-emb{width:48px!important;height:48px!important;right:-6px!important;bottom:-8px!important}
 #overlay.hg-on .wm-select{white-space:nowrap;font-size:19px!important;min-height:54px!important}
 .wm-side{overflow-y:auto;scrollbar-width:thin}
}
@media (min-width:900px) and (min-height:541px) and (max-height:800px){
 #overlay.hg-on .wm-card{min-height:66px!important;padding:7px 10px!important}
 .wm-card>b{font-size:17px!important}
 #overlay.hg-on .wm-select{min-height:50px!important;font-size:17px!important}
}
@media (max-height:540px) and (min-width:560px){
 .wm-tabs{grid-template-columns:1fr 1fr}
 .wm-card-meta,.wm-card-diff{display:none}
 .wm-card>b{font-size:14px!important}
 .wm-card-top small{display:none}
 .wm-card-state{font-size:7.5px!important;padding:2px 4px!important}
}