/* ===== "Bat Jet" night-flight game (/bat-jet, BAT_GAME=1, Oct 26 2026). Game: src/js/bat.js ===== */
.bj{max-width:960px;margin:0 auto}
.bj-stage{position:relative;width:100%;height:min(calc(100vh - 7.5rem),max(56.25vw,min(120vw,580px)),580px);height:min(calc(100svh - 7.5rem),max(56.25vw,min(120vw,580px)),580px);min-height:240px;
  border-radius:16px;overflow:hidden;background:#0c0d0b;box-shadow:0 18px 44px #0009,0 0 0 2px #7d8a6a66,0 0 30px #ddfb6333;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
.bj-stage.is-playing{touch-action:none;cursor:crosshair}
.bj-stage:focus{outline:none}
.bj-stage:focus-visible{outline:3px solid #d4ff3a;outline-offset:3px}
.bj-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
/* HUD: big score, streak, wave, hearts */
.bj-hud{position:absolute;left:.7rem;right:.7rem;top:.5rem;display:flex;align-items:flex-start;flex-wrap:wrap;gap:.2rem .7rem;pointer-events:none;color:#fff;font-weight:800;text-shadow:0 1px 2px #000c,0 0 10px #000a}
.bj-hud p{margin:0}
.bj-score{font:900 clamp(1.5rem,5vw,2.2rem)/1 var(--display);font-variant-numeric:tabular-nums;color:#fff3b0;text-shadow:0 0 10px #ffb703aa,0 2px 0 #161813}
.bj-score{position:relative}
/* batdef: points dropped on a hit (like Sonic rings), shown under the score */
.bj-loss{position:absolute;left:0;top:100%;margin-top:.15rem;padding:.05em .5em;border-radius:999px;background:#d7fa4b;color:#fff;font:900 clamp(1rem,3.4vw,1.35rem)/1.2 var(--display);text-shadow:none;box-shadow:0 0 0 2px #fff3b0,0 0 14px #d7fa4b;opacity:0;pointer-events:none;white-space:nowrap}
.bj-loss.is-on{animation:bj-loss 1.2s ease-out forwards}
@keyframes bj-loss{0%{opacity:0;transform:translateY(-6px) scale(.8)}12%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
.bj-sub2{margin:0;font-weight:800;font-size:clamp(.95rem,3vw,1.15rem);color:#ffd166;text-shadow:0 1px 3px #000c;max-width:26ch}
.bj-combo{font:900 clamp(1.1rem,3.6vw,1.5rem)/1.2 var(--display);color:#d4ff3a;opacity:0;transition:opacity .2s,transform .2s;text-shadow:0 0 10px #d4ff3aaa}
.bj-combo.is-on{opacity:1}
.bj-combo[data-m="3"],.bj-combo[data-m="4"]{color:#e7fc92;text-shadow:0 0 12px #ddfb63}
.bj-combo[data-m="5"]{color:#b9ff4f;text-shadow:0 0 14px #b9ff4f}
.bj-wave{margin-left:auto!important;font:800 clamp(.85rem,2.4vw,1rem)/1.6 var(--font);background:#262f20cc;border-radius:999px;padding:0 .7rem;box-shadow:0 0 0 2px #7d8a6a88;text-shadow:none}
.bj-hearts{display:flex;gap:.25rem;flex-basis:100%;justify-content:flex-end}
.bj-hearts svg{width:clamp(20px,4.6vw,28px);height:auto;fill:#d9fb53;filter:drop-shadow(0 0 4px #d9fb53)}
.bj-hearts svg.is-off{fill:#ffffff30;filter:none}
/* tip, pop, banner, warning */
.bj-tip{position:absolute;left:50%;bottom:16%;transform:translate(-50%,6px);margin:0;max-width:86%;padding:.45rem 1rem;border-radius:999px;background:#0c0d0be6;color:#fff;font:800 clamp(1.05rem,3.6vw,1.35rem)/1.2 var(--font);text-align:center;pointer-events:none;opacity:0;transition:opacity .25s,transform .25s;box-shadow:0 0 0 2px #d4ff3a,0 0 16px #d4ff3a88}
.bj-tip.is-on{opacity:1;transform:translate(-50%,0)}
.bj-pop{position:absolute;left:50%;top:40%;margin:0;transform:translateX(-50%);padding:.15em .6em;border-radius:999px;font:900 clamp(1.3rem,5vw,2rem)/1.1 var(--display);color:#fff;background:#0c0d0bcc;pointer-events:none;opacity:0;white-space:nowrap}
.bj-pop.is-combo{color:#b9ff4f;box-shadow:0 0 0 3px #b9ff4f,0 0 20px #b9ff4f88}
.bj-pop.is-good{color:#d4ff3a;box-shadow:0 0 0 3px #d4ff3a}
.bj-pop.is-bad{color:#fff;background:#3a3d36;box-shadow:0 0 0 3px #e7fc92}
.bj-pop.is-on{animation:bj-pop 1.1s ease-out forwards}
@keyframes bj-pop{0%{opacity:0;transform:translateX(-50%) scale(.7)}15%{opacity:1;transform:translateX(-50%) scale(1.08)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-20px)}}
.bj-banner{position:absolute;left:50%;top:24%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;opacity:0;text-align:center;white-space:nowrap}
.bj-banner small{font:800 clamp(.95rem,3vw,1.2rem)/1 var(--font);letter-spacing:.3em;text-transform:uppercase;color:#d4ff3a;text-shadow:0 0 10px #d4ff3a}
.bj-banner span{font:900 clamp(2rem,8vw,3.6rem)/1.05 var(--display);color:#fff3b0;text-shadow:0 0 8px #ddfb63,0 0 26px #ddfb63,0 3px 0 #3a3d36}
.bj-banner.is-on{animation:bj-ban 2.2s ease-out forwards}
@keyframes bj-ban{0%{opacity:0;transform:translateX(-50%) scale(1.6)}12%{opacity:1;transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
.bj-warn{position:absolute;left:50%;top:16%;transform:translateX(-50%);pointer-events:none;opacity:0}
.bj-warn span{display:inline-block;padding:.3rem 1.2rem;border-radius:16px;background:#d7fa4b;color:#fff;font:900 clamp(2rem,8vw,3.4rem)/1 var(--display);text-transform:uppercase;letter-spacing:.06em;box-shadow:0 0 0 4px #fff3b0,0 0 30px #d7fa4b}
.bj-warn.is-on{opacity:1;animation:bj-warn .35s ease-in-out infinite alternate}
@keyframes bj-warn{to{transform:translateX(-50%) scale(1.1)}}
/* sonar pad: big, bottom right, recharge ring (dark part = still charging) */
.bj-pad{position:absolute;right:.7rem;bottom:.7rem;display:none;flex-direction:column;align-items:center;justify-content:center;width:5.6rem;height:5.6rem;border-radius:50%;border:3px solid #d4ff3a;background:rgba(33,40,28,.5);opacity:.6;transition:opacity .2s;color:#d4ff3a;font:800 .95rem/1 var(--font);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;box-shadow:0 0 16px #d4ff3a66;overflow:hidden}
.bj-pad svg{width:2.2rem;height:2.2rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;position:relative;z-index:1}
.bj-pad svg circle{fill:currentColor;stroke:none}
.bj-pad span{position:relative;z-index:1;margin-top:.15rem}
.bj-cool{position:absolute;inset:0;background:conic-gradient(#000a calc(var(--cool,0) * 360deg),transparent 0);border-radius:50%}
.bj-pad{border-color:#ddfb63;color:#eafc9e;box-shadow:0 0 16px #ddfb6366}
.bj-pad.is-ready{border-color:#d4ff3a;color:#d4ff3a;opacity:.72;animation:bj-ready 1.2s ease-in-out infinite}
.bj-pad:active,.bj-pad.is-fire{opacity:1}
.bj-pad span{text-shadow:0 1px 3px #070806,0 0 6px #070806}.bj-pad svg{filter:drop-shadow(0 1px 2px #070806)}
.bj-pad.is-woozy{border-color:#9cc06a;color:#9cc06a;box-shadow:none}
.bj-pad.is-fire{background:#ddfb63;color:#0c0d0b}
@keyframes bj-ready{50%{box-shadow:0 0 26px #d4ff3acc}}
.bj-stage.is-playing .bj-pad{display:flex}
.bj-stage.is-touch .bj-keys{display:none}
/* overlays */
.bj-over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:1rem;text-align:center;color:#fff;background:radial-gradient(ellipse at 50% 45%,#0c0d0b55,#0c0d0bcc)}
.bj-over[hidden]{display:none}
.bj-logo{margin:0;font:900 clamp(2.6rem,11vw,4.6rem)/1 var(--display);color:#fff;letter-spacing:.03em;text-shadow:0 0 6px #d4ff3a,0 0 22px #ddfb63,0 4px 0 #3a3d36,0 8px 22px #000a}
.bj-sub{margin:0;font-weight:800;font-size:clamp(1.1rem,3.6vw,1.4rem);text-shadow:0 1px 3px #000c;max-width:24ch}
.bj-go{min-width:10rem;font-size:1.4rem;background:#d4ff3a;border-color:#d4ff3a;color:#0c0d0b;box-shadow:0 0 24px #d4ff3a88}
.bj-go:hover{background:#fff;border-color:#fff;color:#0c0d0b}
.bj-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin:.2rem 0 0;font-weight:750;font-size:.95rem}
.bj-keys span{background:#0c0d0bcc;border-radius:999px;padding:.25rem .7rem}
/* end card: short, big */
.bj-end{margin:1rem 0 0;background:linear-gradient(160deg,#2f3927,#0c0d0b);border:2px solid #7d8a6a66;border-radius:18px;padding:clamp(1rem,3vw,1.6rem);color:#fff;text-align:center}
.bj-end[hidden]{display:none}
.bj-end-k{margin:0;font:900 clamp(1.3rem,4vw,1.8rem)/1.1 var(--display);color:#d4ff3a;text-shadow:0 0 12px #d4ff3a88}
.bj-end-h{margin:.2rem 0;color:#fff;font:900 clamp(1.6rem,5vw,2.2rem)/1.1 var(--display)}
.bj-end-h b{color:#fff3b0;font-variant-numeric:tabular-nums;text-shadow:0 0 12px #ffb703aa}
.bj-end-h:focus{outline:none}
.bj-end-sub{margin:0 0 .9rem;font-weight:800;font-size:1.1rem;color:#f7fedd}
.bj-fact{background:#fff7e8;color:#161813;border-radius:14px;padding:.9rem 1.1rem;margin:0 0 1rem;border-left:8px solid #7d8a6a;text-align:left}
.bj-fact p{margin:0;font-weight:800;font-size:clamp(1.1rem,3vw,1.3rem);line-height:1.35}
.bj-fact p+p{margin-top:.4rem;color:#2f6b3a}
.bj-fact .bj-fact-date{color:#3a3d36}
.bj-ctas{justify-content:center}
.bj-sec .arc{max-width:960px}
.bj-sec .arc-adult{max-width:960px;margin-inline:auto}
.bj .ag-how{margin-top:.8rem}
.bj-tools [data-bj-calm][aria-pressed="true"]{background:#d4ff3a;border-color:#d4ff3a;color:#0c0d0b}
html.bj-playing .mbar{display:none}
@media (max-height:500px) and (orientation:landscape){
  .bj-stage{height:calc(100vh - 5rem);height:calc(100svh - 5rem)}
  .bj-pad{width:4.4rem;height:4.4rem;font-size:.8rem}.bj-pad svg{width:1.7rem;height:1.7rem}
  .bj-tip{bottom:12%}
}
@media (prefers-reduced-motion:reduce){.bj-pad.is-ready,.bj-warn.is-on{animation:none}.bj-pop.is-on,.bj-banner.is-on,.bj-loss.is-on{animation:none;opacity:1}}
.bj.is-calm .bj-pad.is-ready,.bj.is-calm .bj-warn.is-on{animation:none}
/* event mode */
html.is-event .bj-ctas{display:none}
@media (min-width:1000px){html.is-event .arc-host .bj{max-width:none;margin:0}}
/* full screen: same layout as the runner (arcade.css) */
html.fs-on .arc-host.is-fs>[data-bj]{grid-column:1;grid-row:1/-1;min-height:0;min-width:0;max-width:none;margin:0;position:relative}
@media (orientation:portrait){html.fs-on .arc-host.is-fs>[data-bj]{grid-row:1;grid-column:1}}
html.fs-on .is-fs .bj-how-v{display:none!important}
html.fs-on .is-fs .bj{display:grid;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);gap:8px}
html.fs-on .is-fs .bj>*{grid-column:1}
html.fs-on .is-fs .bj-tools{grid-row:2;margin:0;justify-content:center;align-items:center}
html.fs-on .is-fs .bj-fit{grid-row:1;container-type:size;min-height:0;min-width:0;display:grid;place-items:center}
html.fs-on .is-fs .bj-stage{width:100cqw;height:min(100cqh,130cqw);min-height:0;border-radius:14px}
html.fs-on .is-fs .bj-end{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;margin:0;width:min(36rem,94%);max-height:94%;overflow-y:auto;box-shadow:0 20px 60px #000c}
@media (min-width:900px) and (min-height:700px){html.fs-on .is-fs .bj-pad{width:7rem;height:7rem;font-size:1.1rem}html.fs-on .is-fs .bj-pad svg{width:2.8rem;height:2.8rem}}
@media (max-height:500px) and (orientation:landscape){
  html.fs-on .is-fs .bj{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr)}
  html.fs-on .is-fs .bj-tools{grid-column:2;grid-row:1;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;gap:.4rem}
}
/* /arcade: fourth cabinet (neon night) and a 2x2 / 4-across grid */
.arc-cab-bat{background:linear-gradient(180deg,#7d8a6a,#414f37);box-shadow:0 0 0 4px #d4ff3a,0 0 22px #d4ff3a55,0 18px 40px rgba(0,0,0,.45)}
.arc-cab-bat .arc-cab-top h2{color:#f3feca;text-shadow:0 0 10px #d4ff3aaa}
.arc-cab-bat .arc-play{background:#d4ff3a;border-color:#d4ff3a}
@media (min-width:760px) and (max-width:999px){.arc-cabs.has-4 .arc-cab-runner{grid-column:auto;justify-self:stretch;width:auto}}
@media (min-width:1000px){.arc-cabs.has-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1260px){.arc-cabs.has-4{grid-template-columns:repeat(4,1fr)}}

/* shared game UI (copied from the source arcade styles) */
.ag-tools{display:flex;flex-wrap:wrap;gap:.5rem;margin:.7rem 0 0}
.ag-tool{min-height:44px;padding:.45rem .95rem;border-radius:999px;border:2px solid #ebfda6;background:transparent;color:#fff;font-weight:700;font-size:.92rem;cursor:pointer}
.ag-tool[aria-pressed="true"]{background:#ffcf73;border-color:#ffcf73;color:#20281b}
.ag-tool:focus-visible,.ag-again:focus-visible{outline:3px solid #ffcf73;outline-offset:2px}
.ag-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin:.4rem 0 1rem}
.ag-more{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem}
.ag-again{min-height:44px;padding:.45rem 1.1rem;border-radius:999px;border:2px solid #fff;background:transparent;color:#fff;font-weight:750;font-size:1rem;cursor:pointer}
.ag-how{color:#f4fecd;font-size:.95rem;font-weight:650;margin:1rem 0 0}
.ag-help{margin:.4rem 0 0;color:#e6fc8c;font-size:.9rem}
.ag-help summary{cursor:pointer;font-weight:750;color:#ffcf73;min-height:44px;display:inline-flex;align-items:center}
.ag-help summary:focus-visible{outline:3px solid #ffcf73;outline-offset:2px}
.ag-help ul{margin:.2rem 0 0;padding-left:1.2rem}
.ag-snd{display:inline-flex;align-items:center;gap:.4rem}
.ag-spk{width:20px;height:20px;flex:none}
.ag-spk path{fill:currentColor}
.ag-spk .ag-spk-on,.ag-spk .ag-spk-off{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ag-snd[aria-pressed="true"] .ag-spk-off,.ag-snd[aria-pressed="false"] .ag-spk-on{display:none}
.ag-snd-hint{flex-basis:100%;margin:.1rem 0 0;font-size:.85rem;color:#ebfda6}
.ag-snd-hint[hidden]{display:none}
html.is-event .menu-btn,html.is-event .mbar,html.is-event .site-footer,html.is-event .cta-band,html.is-event .learn,
html.is-event .ag-final .ag-ctas,html.is-event .house-final>a.btn,html.is-event .house-more,html.is-event .page-hero .lead,html.is-event .house-lead{display:none}
html.is-event .ag-tool,html.is-event .ag-again,html.is-event .ag-help summary,html.is-event .hc-next,html.is-event .arc-skip{min-height:56px;font-size:1.08rem}
.ag-tools .fs-btn{margin-left:auto}
/* --fs-h: visualViewport height from arcade.js (iOS bars, keyboard closing) */
html.fs-on .is-fs .ag-how,html.fs-on .is-fs .ag-help,html.fs-on .is-fs .rr-how-v,html.fs-on .is-fs noscript,html.fs-on .is-fs .house-copy,html.fs-on .is-fs .house-more{display:none!important}
html.fs-on .is-fs.is-play .ag-snd-hint{display:none}
html.fs-on .is-fs .ag-tools{grid-area:tools;margin:0;align-items:center;justify-content:flex-end;flex-wrap:nowrap}
html.fs-on .is-fs .ag-tools .fs-btn{margin-left:0}
@media (max-width:700px) and (orientation:portrait){
  html.fs-on .is-fs .ag:has(.ag-final:not([hidden])){grid-template-areas:"hud" "tools" "fit" "panel";grid-template-rows:auto auto minmax(0,1fr) auto}
  html.fs-on .is-fs .ag{grid-template-columns:minmax(0,1fr);grid-template-areas:"hud" "tools" "fit";grid-template-rows:auto auto minmax(0,1fr)}
  html.fs-on .is-fs .ag-tools{justify-content:flex-start;flex-wrap:wrap}
}
@media (max-width:700px) and (orientation:portrait){
  html.fs-on .arc-host.is-fs:not(.is-play){grid-template-rows:minmax(0,1fr) auto auto}
  html.fs-on .arc-host.is-fs:not(.is-play)>.arc{max-height:21vh;max-height:21dvh}
  html.fs-on .arc-host.is-fs:not(.is-play)>.arc.is-entry{max-height:62vh;max-height:62dvh}
  html.fs-on .is-fs .ag:has(>.ag-panel>[data-ag-screen]:not(.ag-final):not([hidden])){grid-template-areas:"hud" "tools" "fit" "panel";grid-template-rows:auto auto minmax(0,1fr) auto}
  html.fs-on .is-fs .ag-panel:has(>[data-ag-screen]:not(.ag-final):not([hidden])){grid-area:panel;background:none;padding:0;place-items:stretch}
  html.fs-on .is-fs .ag-panel>[data-ag-screen]:not(.ag-final){width:100%;max-height:none;overflow:visible;box-shadow:none;padding:.7rem .9rem}
  html.fs-on .is-fs .ag-panel>[data-ag-screen]:not(.ag-final) .ag-h{font-size:1.3rem}
  html.fs-on .is-fs .ag-panel>[data-ag-screen]:not(.ag-final) p{font-size:.98rem;line-height:1.4;margin-block:.25rem .5rem}
  html.fs-on .is-fs .ag-tool,html.fs-on .is-fs .ag-tools .fs-btn{min-height:44px;font-size:.95rem;padding:.35rem .85rem}
  html.fs-on .is-fs .ag{gap:6px 10px}
  /* safety net for very short screens: the game column scrolls rather than hiding the card's button */
  html.fs-on .arc-host.is-fs:not(.is-play)>[data-ag]{overflow-y:auto;overscroll-behavior:contain}
  /* a sliver of attic looks broken: hide it until there is room (it comes back when the card closes and play starts) */
  @container (max-height:72px){html.fs-on .is-fs .ag-scene{visibility:hidden}}
/* same big buttons in all three games */
html.fs-on .is-fs .ag-tool{min-height:56px;padding:.5rem 1.15rem;font-size:1.05rem}
@media (max-height:500px) and (orientation:landscape){
  html.fs-on .is-fs{padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom))}
  html.fs-on .arc-host.is-fs{grid-template-columns:minmax(0,1fr) 260px}
  html.fs-on .is-fs .ag{grid-template-areas:"hud tools" "fit tools";grid-template-rows:auto minmax(0,1fr)}
  html.fs-on .is-fs .ag-tools{flex-direction:column;justify-content:flex-start;align-items:stretch;gap:.4rem}
  html.fs-on .is-fs .ag-tool,html.fs-on .is-fs .fs-btn{min-height:44px;font-size:.95rem;padding:.35rem .8rem}
  html.fs-on .is-fs .rr{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr)}
  html.fs-on .is-fs .rr-tools{grid-column:2;grid-row:1;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;gap:.4rem}
  html.fs-on .house.is-fs .house-stage{grid-template-columns:minmax(0,1fr) 250px}
  html.fs-on .house.is-fs .house-pic{width:min(100cqw,calc((100cqh - 96px) * 1.6))}
  html.fs-on .is-fs .arc-l{width:54px;height:62px;font-size:2rem}html.fs-on .is-fs .arc-step{width:54px;height:40px}
  html.fs-on .is-fs .arc{padding:.7rem}
  html.fs-on .house.is-fs .gun-slot{width:90px;height:68px}html.fs-on .house.is-fs .gun{width:84px;height:62px}
}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bj-ctas .btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:999px;background:#D4FF3A;color:#0C0D0B;font-weight:800;text-decoration:none;border:2px solid #0C0D0B}
/* Night flight has a header + lede above the stage, so it can't use the arcade's locked one-screen shell: let the page scroll */
html,body{height:auto;overflow-x:hidden;overflow-y:auto}
body.g .app{height:auto;min-height:100vh;min-height:100dvh}