/* 404 page: "fly it home" lunar lander (web/src/pages/404.astro + /js/lander-404.js).
   Everything is scoped under .lander so it can't leak into the site chrome. */
.lander *{box-sizing:border-box}
.lander button{font:inherit;color:inherit}
.lander{
  --bg:#0a0a0a; --panel:#0e0e0e; --line:#262626; --line-2:#3a3a3a;
  --fg:#ffffff; --muted:#8c8c8c; --dim:#5a5a5a;
  --orange:#FF8400; --orange-dim:rgba(255,132,0,.16); --bad:#ff4a3d;
  --sans: var(--font-sans, "Inter", "Helvetica Neue", Arial, system-ui, sans-serif);
  --mono: var(--font-mono, "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);

  color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;
}

/* orange corner-bracket motif */
.lander .brk{
  --c:var(--orange); --s:10px; --t:2px;
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--s) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) top left/var(--t) var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--s) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--t) var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--s) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--t) var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--s) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--t) var(--s) no-repeat;
}


/* Sized so heading + game fit above the fold on a 13" MacBook (~1440x790 viewport).
   The top padding clears the nav's divider line; the heading scales with viewport
   height as well as width, and the canvas height is fitted to the fold in resize(). */
.lander.ld-frame{position:relative;padding:clamp(44px,6.5vh,72px) clamp(16px,3vw,44px) 40px}
@media (max-width:720px){.lander.ld-frame{padding-top:calc(var(--nav-height) + 24px)}}

.lander .ld-hero{display:flex;align-items:flex-end;gap:clamp(16px,3vw,40px);margin-bottom:clamp(14px,2.2vh,22px)}
.lander .code{font-family:var(--mono);color:var(--orange);font-weight:300;font-size:clamp(56px,min(9vw,11vh),120px);line-height:.85;letter-spacing:.02em}
.lander .ld-hero h1{margin:0;font-size:clamp(26px,min(3.6vw,5.2vh),52px);line-height:1.05;letter-spacing:-.02em;font-weight:500}
.lander .ld-hero p{margin:8px 0 0;color:#d6d6d6;font-size:clamp(14px,1.3vw,17px)}
.lander .ld-hero p b{color:var(--orange);font-weight:500}
/* BACK TO HOME: top right of the heading row */
.lander .ld-hero .home{margin-left:auto;align-self:flex-start;flex:none;white-space:nowrap}
@media (max-width:720px){
  .lander .ld-hero{flex-wrap:wrap;align-items:center;row-gap:14px}
  .lander .ld-hero .home{order:1;align-self:center}
  .lander .ld-hero .intro{order:2;flex-basis:100%}
}

.lander .game{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:stretch}
/* wide: the playfield sets the row height; the telemetry panel follows it */
@media (min-width:1200px){.lander .tm{contain:size}}
@media (max-width:1199px){.lander .game{grid-template-columns:1fr}}

.lander .stage{position:relative;border:1px solid var(--line);background:#070707}
.lander .stage.brk{--s:12px}
.lander .view{position:relative}
.lander #world{outline:none;display:block;width:100%;height:auto;touch-action:none}

.lander .overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;text-align:center;padding:16px}
.lander .overlay .box{background:rgba(10,10,10,.82);border:1px solid var(--line-2);padding:22px 28px;max-width:460px;backdrop-filter:blur(2px)}
.lander .overlay .box.brk{--s:10px}
.lander .overlay[hidden]{display:none}
.lander .ov-tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--orange);margin-bottom:8px}
.lander .ov-title{font-size:clamp(22px,2.4vw,30px);font-weight:500;letter-spacing:-.01em}
.lander .ov-sub{color:#cfcfcf;font-size:14px;margin-top:8px;line-height:1.45}
.lander .ov-hint{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:14px;letter-spacing:.04em;line-height:1.9}
.lander .ov-hint kbd{font-family:var(--mono);border:1px solid var(--line-2);padding:1px 6px;color:var(--fg)}
.lander .overlay.bad .ov-tag{color:var(--bad)}

/* config button + sheet */
/* The CONFIG control: a labelled orange button + the current settings as chips,
   with a pulsing dot until the visitor first opens it. */
.lander .cfg-btn{position:absolute;top:12px;left:12px;z-index:3;font-family:var(--mono);font-size:12px;letter-spacing:.1em;background:rgba(10,10,10,.82);border:0;padding:0;cursor:pointer;display:flex;align-items:stretch;text-align:left;backdrop-filter:blur(2px)}
.lander .cfg-btn .act{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--orange);color:#0a0a0a;font-weight:600;transition:background .15s}
.lander .cfg-btn .act svg{width:14px;height:14px;flex:none}
.lander .cfg-btn .sum{display:flex;align-items:center;gap:6px;padding:0 10px;border:1px solid var(--orange);border-left:0;color:var(--fg);letter-spacing:.06em;font-size:11px}
.lander .cfg-btn .sum span{border:1px solid var(--line-2);padding:2px 6px;color:#d6d6d6}
.lander .cfg-btn .new{position:absolute;top:-4px;right:-4px;width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(255,132,0,.7);animation:cfgpulse 1.6s ease-out infinite}
.lander .cfg-btn.seen .new{display:none}
.lander .cfg-btn:hover:not(:disabled) .act{background:#fff}
.lander .cfg-btn:hover:not(:disabled) .sum{border-color:#fff}
.lander .cfg-btn:disabled{opacity:.35;cursor:default}
.lander .cfg-btn:disabled .new{display:none}
.lander .cfg-btn:focus-visible{outline:1px solid var(--orange);outline-offset:3px}
@keyframes cfgpulse{0%{box-shadow:0 0 0 0 rgba(255,132,0,.7)}80%,100%{box-shadow:0 0 0 10px rgba(255,132,0,0)}}
@media (prefers-reduced-motion:reduce){.lander .cfg-btn .new{animation:none}}

.lander .cfg{position:absolute;inset:0;z-index:5;background:rgba(7,7,7,.94);overflow:auto;backdrop-filter:blur(3px)}
.lander .cfg[hidden]{display:none}
.lander .cfg-inner{max-width:760px;margin:0 auto;padding:22px 24px 24px}
.lander .cfg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.lander .cfg-title{font-size:24px;font-weight:500;letter-spacing:-.01em}
.lander .cfg-note{color:var(--muted);font-size:13px;margin-top:4px}
.lander .x{background:none;border:1px solid var(--line-2);width:34px;height:34px;cursor:pointer;font-family:var(--mono)}
.lander .x:hover{border-color:var(--orange)}
.lander .f{margin-bottom:16px}
.lander .fl{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted);margin-bottom:7px}
.lander .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lander .cfg input[type=text]{width:100%;max-width:300px;background:#0e0e0e;border:1px solid var(--line-2);color:var(--fg);font-family:var(--mono);font-size:15px;letter-spacing:.08em;text-transform:uppercase;padding:10px 12px;outline:none}
.lander .cfg input[type=text]:focus{border-color:var(--orange)}
.lander .cfg input::placeholder{color:var(--dim)}

.lander .crafts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lander .craft{text-align:left;background:#0e0e0e;border:1px solid var(--line-2);padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.lander .craft:hover{border-color:#555}
.lander .craft[aria-pressed=true]{border-color:var(--orange);background:#120c06}
.lander .craft canvas{width:100%;height:56px;display:block}
.lander .craft .n{font-weight:500;font-size:14px}
.lander .craft .b{color:var(--muted);font-size:12px;line-height:1.35;min-height:32px}
.lander .stat{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:8px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--muted)}
.lander .stat i{display:block;height:4px;background:#1f1f1f;position:relative}
.lander .stat i b{position:absolute;inset:0 auto 0 0;background:var(--orange)}

.lander .seg{display:flex;flex-wrap:wrap;gap:6px}
.lander .seg button{background:#0e0e0e;border:1px solid var(--line-2);padding:8px 12px;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-align:left;line-height:1.3}
.lander .seg button small{display:block;color:var(--muted);font-size:10px;letter-spacing:.04em}
.lander .seg button:hover{border-color:#555}
.lander .seg button[aria-pressed=true]{border-color:var(--orange);background:#120c06;color:var(--orange)}
.lander .seg button[aria-pressed=true] small{color:#c98a4a}
.lander .craft:focus-visible,.lander .seg button:focus-visible{outline:1px solid var(--orange);outline-offset:2px}

.lander .cfg-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.lander .lnk{background:none;border:0;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.08em;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lander .lnk:hover{color:var(--fg)}
.lander button.ld-btn{border:0;cursor:pointer}

.lander .touch{display:none;gap:10px;padding:10px;border-top:1px solid var(--line)}
.lander .touch button{flex:1;font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:var(--fg);background:#111;border:1px solid var(--line-2);padding:16px 0;user-select:none;-webkit-user-select:none;touch-action:none}
.lander .touch button.burn{flex:2}
.lander .touch button.on{background:var(--orange);color:#000;border-color:var(--orange)}
@media (pointer:coarse),(max-width:720px){.lander .touch{display:flex}}
@media (max-width:720px){
  .lander .overlay .box{padding:14px 16px}.lander .ov-title{font-size:19px}.lander .ov-sub{font-size:13px}.lander .ov-hint{margin-top:8px}
  .lander .cfg{position:fixed;z-index:50}
  .lander .crafts{grid-template-columns:1fr}
  .lander .two{grid-template-columns:1fr}
  .lander .cfg-btn .sum span:nth-child(n+2){display:none}
}

/* telemetry panel */
.lander .tm{border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;font-family:var(--mono);font-size:12px;min-height:0}
.lander .tm.brk{--s:10px}
.lander .tm-head{display:flex;align-items:center;gap:8px;padding:12px 14px 6px;letter-spacing:.1em;font-size:11px}
.lander .tm-head .dot{width:7px;height:7px;background:var(--orange);border-radius:50%;box-shadow:0 0 8px var(--orange)}
.lander .tm-head .dot.los{background:var(--bad);box-shadow:0 0 8px var(--bad);animation:blink .5s steps(2) infinite}
.lander .tm-sub{display:flex;gap:14px;padding:0 14px 10px;border-bottom:1px solid var(--line);color:var(--dim);font-size:10px;white-space:nowrap;overflow:hidden}
.lander .tm-sub b{color:#bdbdbd;font-weight:400}
@keyframes blink{50%{opacity:.2}}

.lander .metrics{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.lander .m{padding:9px 14px;border-bottom:1px solid #1a1a1a}
.lander .m:nth-child(odd){border-right:1px solid #1a1a1a}
.lander .m .l{color:var(--muted);font-size:10px;letter-spacing:.12em}
.lander .m .v{font-size:19px;margin-top:3px;font-variant-numeric:tabular-nums;white-space:nowrap}
.lander .m .v small{font-size:11px;color:var(--muted);margin-left:3px}
.lander .m .v.warn{color:var(--orange)}
.lander .m .v.bad{color:var(--bad)}

.lander .fuel{padding:10px 14px;border-bottom:1px solid var(--line)}
.lander .row{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;letter-spacing:.12em}
.lander .row span:last-child{color:var(--fg);font-size:12px;letter-spacing:0}
.lander .bar{height:6px;background:#1c1c1c;margin-top:7px;position:relative}
.lander .bar i{position:absolute;inset:0 auto 0 0;background:var(--orange);width:100%}
.lander .bar.low i{background:var(--bad);animation:blink .6s steps(2) infinite}

.lander .keys{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);align-items:center}
.lander .keys .lbl{color:var(--muted);font-size:10px;letter-spacing:.12em;margin-right:auto}
.lander .key{border:1px solid var(--line-2);padding:5px 9px;min-width:34px;text-align:center;color:var(--muted);transition:background .05s}
.lander .key.space{min-width:84px}
.lander .key.on{background:var(--orange);border-color:var(--orange);color:#000}

.lander .link{padding:10px 14px;border-bottom:1px solid var(--line);display:grid;gap:5px}
.lander .spark{padding:10px 14px 6px;border-bottom:1px solid var(--line)}
.lander .spark canvas{width:100%;height:54px;display:block;margin-top:6px}
.lander .legend{display:flex;gap:12px;font-size:10px;color:var(--muted)}
.lander .legend b{display:inline-block;width:10px;height:2px;vertical-align:middle;margin-right:5px}

.lander .stream{flex:1;min-height:130px;display:flex;flex-direction:column;padding:8px 14px 10px}
.lander .stream .row{margin-bottom:6px}
.lander .stream .win{flex:1;position:relative;overflow:hidden}
.lander .stream ol{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;bottom:0}
.lander .stream li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:1.55;color:#bdbdbd}
.lander .stream li .o{color:var(--dim);margin-right:8px}
.lander .stream li.ev{color:var(--orange)}
.lander .stream li.err{color:var(--bad)}

/* wide: the panel is as tall as the playfield, so the message stream takes the slack;
   on short (laptop) viewports tighten the panel so it fits the fitted canvas */
@media (min-width:1200px){.lander .stream{min-height:0}}
@media (min-width:1200px) and (max-height:920px){
  .lander .tm-head{padding-top:9px}
  .lander .tm-sub{padding-bottom:7px}
  .lander .m{padding:6px 14px}
  .lander .m .v{font-size:16px;margin-top:1px}
  .lander .fuel,.lander .keys{padding-top:7px;padding-bottom:7px}
  .lander .key{padding:3px 9px}
  .lander .link{padding-top:7px;padding-bottom:7px;gap:3px}
  .lander .spark{padding-top:7px;padding-bottom:4px}
  .lander .spark canvas{height:40px}
}
@media (min-width:1200px) and (max-height:760px){
  .lander .spark{display:none}
}

.lander .foot{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap;margin-top:14px}
.lander .ld-btn{display:inline-block;font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:#0a0a0a;background:#fff;padding:14px 28px;text-decoration:none;outline:3px solid transparent;outline-offset:3px}
.lander .ld-btn.brk{--s:9px;--t:3px;background-color:#fff;padding:14px 28px}
.lander .ld-btn:focus-visible{outline-color:var(--orange)}
.lander .note{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.04em}