/* ============================================================================
 * v5 layer — one-canvas world: buddy intro boot, HUD + minimap, 0/1 theme bit,
 * pal mascot, tl;dr strip. Loads AFTER landing.css.
 * ========================================================================= */

/* ── intro overlay: buddy types "logishell" → block → canvas launch ────── */
.intro{position:fixed;inset:0;z-index:220;background:var(--dark);display:grid;place-items:center;overflow:hidden}
.intro .igrid{position:absolute;inset:-45%;background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;transition:transform 1s var(--ease),opacity .6s var(--ease)}
.intro.zoom .igrid{transform:scale(2.05)}
.intro.out{opacity:0;transition:opacity .5s var(--ease) .12s;pointer-events:none}
.iwrap{position:relative;z-index:2;display:grid;gap:24px;justify-items:center}
.irow{display:flex;align-items:center;gap:clamp(14px,2.4vw,24px);padding:18px 28px;border-radius:22px;border:1px solid transparent;position:relative;transition:border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)}
.irow.block{border-color:var(--dark-line-strong);background:rgba(255,255,255,.03);box-shadow:0 34px 90px -30px rgba(0,0,0,.8)}
.irow .p-i,.irow .p-o{position:absolute;top:50%;width:13px;height:13px;margin-top:-7px;border-radius:4px;transform:scale(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.irow .p-i{left:-7px;background:var(--teal);box-shadow:0 0 0 5px rgba(14,148,136,.2)}
.irow .p-o{right:-7px;background:var(--amber);box-shadow:0 0 0 5px rgba(245,184,28,.22);transition-delay:.08s}
.irow.block .p-i,.irow.block .p-o{transform:scale(1)}
.ibuddy{width:clamp(64px,10vw,92px);height:clamp(64px,10vw,92px);border-radius:22%;background:var(--amber);color:var(--amber-ink);display:grid;place-items:center;box-shadow:0 26px 70px -18px rgba(245,184,28,.55),inset 0 0 0 1px rgba(255,255,255,.25);transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1);will-change:transform;flex:none}
.intro.on .ibuddy{transform:scale(1)}
.ibuddy .iface{font-family:var(--mono);font-weight:700;font-size:clamp(18px,2.8vw,26px);letter-spacing:-.05em;-webkit-text-stroke:.5px currentColor;transition:transform .12s var(--ease)}
.ibuddy.blink .iface{transform:scaleY(.1)}
.iword{font-family:var(--mono);font-weight:600;font-size:clamp(36px,7.5vw,72px);letter-spacing:-.045em;color:var(--dark-ink);line-height:1;min-height:1em;white-space:pre}
.icur{width:.52em;height:1.02em;background:var(--amber);border-radius:3px;font-size:clamp(36px,7.5vw,72px);flex:none}
@media(prefers-reduced-motion:no-preference){.icur{animation:blink 1s steps(1) infinite}}
.istack{display:flex;gap:7px}
.istack i{width:13px;height:13px;border-radius:4px;transform:scale(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.istack i:nth-child(1){background:var(--teal)}.istack i:nth-child(2){background:var(--amber);transition-delay:.09s}.istack i:nth-child(3){background:var(--violet);transition-delay:.18s}
.istack.on i{transform:scale(1)}
.istatus{font-family:var(--mono);font-size:12.5px;line-height:2;color:var(--dark-muted);min-height:52px;text-align:center}
.istatus .ok{color:var(--teal-ink)}
.iskip{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dark-muted);z-index:2}

/* ── the world: everything scrolls as one canvas ───────────────────────── */
#world{position:relative;will-change:transform}

/* ── canvas HUD (appears once you start panning) ───────────────────────── */
.hud{position:fixed;right:18px;bottom:16px;z-index:80;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--ink-2);background:var(--glass);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);border:1px solid var(--line);border-radius:10px;padding:7px 12px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none}
.hud.on{opacity:1;transform:none}
.hud b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
.hud i{font-style:normal;color:var(--muted)}
.hud .hgl{background:var(--amber);color:var(--amber-ink);border-radius:5px;padding:1px 5px;font-weight:700;font-size:9.5px;letter-spacing:-.05em}
.hud .sec{color:var(--teal-ink)}
@media(max-width:860px){.hud{display:none}}

/* ── minimap: the page, seen as a canvas ───────────────────────────────── */
.mmap{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:80;width:52px;height:min(52vh,400px);background:var(--glass);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);opacity:0;transition:opacity .4s var(--ease);cursor:pointer;overflow:hidden}
.mmap.on{opacity:1}
.mmap .mmb{position:absolute;left:9px;right:9px;border-radius:3px;border:1px solid var(--line-strong);background:var(--card);pointer-events:none}
.mmap .mmb.dk{background:var(--dark);border-color:transparent}
.mmap .mmvp{position:absolute;left:3px;right:3px;border:1.6px solid var(--amber);border-radius:5px;box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 16%,transparent);pointer-events:none}
@media(max-width:1150px){.mmap{display:none}}

/* ── theme as a bit: [0]=light [1]=dark ────────────────────────────────── */
.bit{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 10px 0 12px;font-family:var(--mono);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);cursor:pointer;color:var(--muted);transition:border-color .2s var(--ease),background .2s var(--ease)}
.bit:hover{border-color:var(--line-strong)}
.bit .bl{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.bit .cells{display:flex;gap:3px}
.bit .c{width:17px;height:19px;display:grid;place-items:center;border-radius:4px;font-size:11px;font-weight:700;color:var(--muted);transition:.18s var(--ease)}
.bit .c0{background:var(--amber);color:var(--amber-ink);box-shadow:0 3px 8px -2px color-mix(in srgb,var(--amber) 70%,transparent)}
.bit.dark .c0{background:transparent;color:var(--muted);box-shadow:none}
.bit.dark .c1{background:var(--amber);color:var(--amber-ink);box-shadow:0 3px 8px -2px color-mix(in srgb,var(--amber) 70%,transparent)}
.nav.on-dark .bit{background:transparent;border-color:rgba(255,255,255,.16);color:var(--dark-muted)}
.bit.flip .cells{animation:bitflick .32s steps(2)}
@keyframes bitflick{50%{opacity:.35}}

/* ── tl;dr strip ───────────────────────────────────────────────────────── */
.tldr{position:relative;z-index:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--card) 55%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.trow{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px 28px;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);flex-wrap:wrap}
.trow .tlk{background:var(--ink);color:var(--canvas);border-radius:6px;padding:3px 9px;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.tstep{display:inline-flex;align-items:center;color:var(--ink)}
.tstep b{color:var(--amber-ink);background:var(--amber);border-radius:5px;width:18px;height:18px;display:inline-grid;place-items:center;font-size:10.5px;margin-right:8px;flex:none}
.trow .tarr{color:var(--teal)}

/* ── pal — the page mascot (buddy lab, distilled) ──────────────────────── */
.pal{position:fixed;right:22px;top:76px;z-index:70;width:54px;height:54px;border-radius:14px;background:var(--tint,var(--amber));color:var(--amber-ink);display:grid;place-items:center;font-family:var(--mono);font-size:13.5px;font-weight:700;letter-spacing:-.05em;cursor:pointer;box-shadow:0 10px 26px -8px color-mix(in srgb,var(--tint,var(--amber)) 80%,transparent);transition:transform .2s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);user-select:none;-webkit-user-select:none}
.pal:hover{transform:translateY(-2px) scale(1.06)}
.pal .pface{display:block;transition:transform .1s var(--ease);-webkit-text-stroke:.4px currentColor}
.pal.blink .pface{transform:scaleY(.12)}
.pal.pop{animation:palpop .45s var(--ease)}
@keyframes palpop{40%{transform:scale(1.16)}70%{transform:scale(.94)}}
.pal .psay{position:absolute;right:64px;top:8px;white-space:nowrap;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:0;box-shadow:var(--shadow-2);opacity:0;transform:translateX(6px);transition:opacity .25s var(--ease),transform .25s var(--ease);pointer-events:none}
.pal .psay::after{content:'';position:absolute;right:-5px;top:14px;width:8px;height:8px;background:var(--card);border-right:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.pal.say-on .psay{opacity:1;transform:none}
@media(max-width:720px){.pal{display:none}}

/* small polish */
.hcol .sub b{color:var(--ink);font-weight:600}