/* SPIDEY — comic-book retheme of the worldcup2026 skeleton.
     Language: hard ink outlines, offset solid shadows, halftone accents,
     Bangers display over Hanken body. One signature motion: the thwip-in
     web-line drop on the hero hashtag (and its scroll echo on tracker pins). */
  :root{
    --red:#e62429; --red2:#ff4a50; --blue:#141f5c; --blue2:#2b5cff;
    --ink:#0b0b12; --paper:#f2ead8; --char:#151a36; --char2:#1d2447;
    --white:#fff; --mute:rgba(255,255,255,.65); --line:rgba(255,255,255,.12);
    /* aliases the shared activity-menu skins itself from */
    --navy:#141f5c; --green:#ff4a50;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-family:"Hanken Grotesk",system-ui,sans-serif;background:#07091f;color:var(--white);display:flex;justify-content:center}
  .h5{position:relative;width:min(460px,100vw);background:var(--blue);overflow:visible;min-height:100vh}
  .halftone{background-image:radial-gradient(circle, rgba(0,0,0,.28) 1px, transparent 1.5px);background-size:7px 7px}

  /* ---------- preloader ---------- */
  .preloader{position:fixed;inset:0;background:var(--blue);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;
    transition:transform .85s cubic-bezier(.76,0,.24,1)}
  .preloader.done{transform:translateY(-100%)}
  .pl-lockup{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:clamp(8px,2.5vw,18px);padding:0 14px;max-width:100%}
  .pl-logo{height:clamp(34px,9vw,72px);width:auto;flex:0 0 auto;display:block;opacity:0;animation:plUp .6s cubic-bezier(.2,.8,.2,1) .05s forwards}
  .pl-x{font-family:"Baloo 2";font-weight:800;font-size:clamp(22px,6vw,42px);line-height:1;flex:0 0 auto;color:#fff;opacity:.45;animation:plxin .5s ease .16s both}
  @keyframes plUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes plxin{from{opacity:0;transform:translateY(10px)}to{opacity:.4;transform:none}}
  .pl-mark{font-family:"Bangers",system-ui;color:var(--red2);font-size:clamp(34px,9.5vw,74px);letter-spacing:.03em;line-height:1.3;padding-bottom:.06em;white-space:nowrap;flex:0 1 auto;
    text-shadow:3px 3px 0 var(--ink);
    clip-path:inset(0 100% 0 0);animation:plReveal 1.5s cubic-bezier(.76,0,.24,1) .15s forwards}
  @keyframes plReveal{to{clip-path:inset(0 0 0 0)}}
  .pl-count{position:absolute;bottom:38px;left:0;right:0;text-align:center;font-family:"Baloo 2";font-weight:800;color:rgba(255,255,255,.7);font-size:22px;letter-spacing:.04em}
  .pl-bar{position:absolute;bottom:0;left:0;height:4px;width:0;background:var(--red2)}
  .pl-spider{position:absolute;bottom:7px;left:0;transform:translateX(-50%);z-index:6;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
  .pl-spider img{display:inline-block;width:26px;height:auto;image-rendering:pixelated;animation:plsway 1s ease-in-out infinite alternate}
  @keyframes plsway{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}

  /* reveal */
  .rv{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
  .rv.in{opacity:1;transform:none}
  .rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}

  /* ---------- top bar ---------- */
  /* Overlays the hero and scrolls away with it (same as summer), so it stays
     inside the .h5 column instead of hugging the viewport edges on desktop.
     The logo opens the shared Activities drawer — activity-menu.js wires
     .topbar .logo-img. The bar itself is click-through so the strip never
     blocks the hero; modals (veils at z 400+) still cover it. */
  .topbar{position:absolute;top:0;left:0;right:0;z-index:300;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;pointer-events:none}
  .topbar>*{pointer-events:auto}
  .logo-img{height:38px;width:auto;display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)) drop-shadow(0 0 2px rgba(0,0,0,.4))}
  /* floating login pill (summer's .rules topbar pill, spidey palette) */
  .tb-login{font-family:"Baloo 2";font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#fff;
    background:rgba(11,11,18,.45);border:2px solid rgba(255,255,255,.3);border-radius:999px;padding:7px 14px;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-decoration:none;transition:border-color .15s ease,background .15s ease}
  .tb-login:hover{border-color:var(--red2);background:rgba(11,11,18,.65)}
  .tb-login[hidden]{display:none}

  /* ---------- hero ---------- */
  .hero{position:relative;height:84vh;height:84svh;min-height:600px;max-height:820px;overflow:hidden}
  .hero .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.14);transform-origin:center}
  body.ready.go .hero .heroimg{animation:kb 10s ease-out forwards}
  @keyframes kb{from{transform:scale(1.14)}to{transform:scale(1)}}
  /* sketched skyline melted into the hero: black bg removed via
     luminance→alpha, buildings pre-tinted to the palette, scrim on top */
  .hero .hero-city{position:absolute;left:50%;bottom:-3%;transform:translateX(-50%);width:min(820px,104%);
    opacity:.42;pointer-events:none}
  .hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,18,.4) 0%,transparent 30%,rgba(20,31,92,.55) 72%,var(--blue) 100%)}
  .hero .content{position:absolute;left:0;right:0;bottom:30px;padding:0 22px;z-index:3}
  .eyebrow{font-family:"Baloo 2";font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--red2)}
  .hashtag{font-family:"Bangers",system-ui;font-size:clamp(44px,14vw,72px);line-height:.95;margin:8px 0 6px;letter-spacing:.02em;
    color:#fff;text-shadow:4px 4px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink)}
  .tagline{font-size:clamp(12px,4vw,18px);font-weight:600;color:rgba(255,255,255,.88);margin-bottom:18px}
  .heroup{opacity:0;transform:translateY(26px)}
  body.ready.go .heroup{animation:up .8s cubic-bezier(.2,.8,.2,1) forwards}
  body.ready.go .heroup.a2{animation-delay:.16s}
  body.ready.go .heroup.a3{animation-delay:.32s}
  body.ready.go .heroup.a4{animation-delay:.48s}
  @keyframes up{to{opacity:1;transform:none}}
  body.skip-intro .heroup{animation:none;opacity:1;transform:none}
  body.skip-intro .hero .heroimg{animation:none;transform:scale(1)}
  /* the signature motion (spideytracker homage): a little spider rides its
     web line down into the hero, dangles, and only THEN the title pops */
  .thwip{position:relative}
  /* the spider is a RESIDENT: drops in beside the title, then just hangs
     there, swaying — it never fades. Anchored right of the text column so it
     dangles over open hero art at every width. */
  .thwip .web-line{position:absolute;left:85%;bottom:100%;width:2px;height:130vh;background:rgba(255,255,255,.85);
    box-shadow:0 0 0 .5px rgba(11,11,18,.4);transform:scaleY(0);transform-origin:top;opacity:0}
  .thwip .hero-spider{position:absolute;left:85%;bottom:calc(100% + 2px);width:clamp(52px,14vw,84px);height:auto;opacity:0;
    image-rendering:pixelated;transform:translate(-50%,-105vh);transform-origin:top center;
    filter:drop-shadow(0 3px 4px rgba(0,0,0,.4));z-index:2}
  body.ready.go .thwip .web-line{animation:lineDrop .9s cubic-bezier(.45,0,.25,1) .1s forwards}
  @keyframes lineDrop{0%{opacity:1;transform:scaleY(0)}100%{opacity:1;transform:scaleY(1)}}
  body.ready.go .thwip .hero-spider{animation:spiderDrop .9s cubic-bezier(.45,0,.25,1) .1s forwards, spiderHang 3.2s ease-in-out 1s infinite alternate}
  @keyframes spiderDrop{0%{opacity:1;transform:translate(-50%,-105vh) rotate(0)}70%{opacity:1;transform:translate(-50%,10px) rotate(3deg)}85%{transform:translate(-50%,-6px) rotate(-3deg)}100%{opacity:1;transform:translate(-50%,0) rotate(0)}}
  @keyframes spiderHang{from{opacity:1;transform:translate(-50%,0) rotate(-6deg)}to{opacity:1;transform:translate(-50%,0) rotate(6deg)}}
  /* the copy waits for the spider: title pops at .95s, the rest follows */
  body.ready.go .heroup.a2{animation-delay:.95s}
  body.ready.go .heroup.a3{animation-delay:1.15s}
  body.ready.go .heroup.a4{animation-delay:1.35s}
  body.skip-intro .thwip .web-line{transform:scaleY(1);opacity:1}
  body.skip-intro .thwip .hero-spider{opacity:1;transform:translate(-50%,0)}

  /* ---------- buttons ---------- */
  .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:3px solid var(--ink);text-decoration:none;
    font-family:"Baloo 2";font-weight:800;font-size:17px;background:var(--red);color:#fff;
    padding:13px 26px;border-radius:14px;box-shadow:4px 4px 0 var(--ink);
    transition:transform .14s cubic-bezier(.34,1.56,.64,1),box-shadow .15s ease}
  .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
  .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
  .btn.full{width:100%;justify-content:center;font-size:19px;padding:16px}
  .btn.kicked{animation:btnpop .42s ease}
  @keyframes btnpop{0%{transform:scale(.9)}45%{transform:scale(1.08)}100%{transform:scale(1)}}

  /* ---------- ticker ---------- */
  .ticker{background:var(--red);color:#fff;font-family:"Baloo 2";font-weight:800;text-transform:uppercase;
    font-size:13px;letter-spacing:.04em;padding:9px 0;overflow:hidden;white-space:nowrap;
    border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
  .ticker span{display:inline-block;padding-left:100%;animation:slide 16s linear infinite}
  .ticker span i{font-style:normal;margin:0 7px;opacity:.6}
  @keyframes slide{to{transform:translateX(-100%)}}

  /* ---------- sections ---------- */
  section{padding:46px 22px}
  .sec-eyebrow{font-family:"Baloo 2";font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--red2)}
  h2{font-family:"Bangers",system-ui;font-weight:400;text-transform:uppercase;font-size:clamp(34px,10vw,46px);letter-spacing:.02em;line-height:.95;margin:6px 0 16px;
    text-shadow:3px 3px 0 var(--ink)}
  .lead{font-size:15px;line-height:1.55;color:var(--mute)}

  /* social proof */
  .proof{display:flex;align-items:center;gap:14px;background:var(--char);border:3px solid var(--ink);border-radius:16px;padding:16px 18px;margin-top:-8px;box-shadow:4px 4px 0 var(--ink)}
  .proof .num{font-family:"Bangers",system-ui;font-size:32px;color:var(--red2);line-height:1;text-shadow:2px 2px 0 var(--ink)}
  .proof .lbl{font-size:13px;color:var(--mute);font-weight:600}
  .avs{display:flex;margin-left:auto}
  .avs img{width:30px;height:30px;border-radius:50%;border:2px solid var(--char);margin-left:-10px;object-fit:cover;background:var(--char)}

  /* steps */
  .steps{display:flex;flex-direction:column;gap:12px}
  .step{display:flex;gap:14px;align-items:flex-start;background:var(--char);border:3px solid var(--ink);border-radius:14px;padding:16px;box-shadow:4px 4px 0 var(--ink)}
  .step .n{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:var(--red);border:2px solid var(--ink);display:grid;place-items:center;font-family:"Bangers",system-ui;font-size:20px;color:#fff}
  .step:nth-child(2) .n{background:var(--blue2)}
  .step:nth-child(3) .n{background:#fff;color:var(--ink)}
  .step h3{font-family:"Baloo 2";font-weight:800;font-size:17px;margin-bottom:2px}
  .step p{font-size:13.5px;color:var(--mute);line-height:1.45}

  /* the wall — sighting cards from /api/spidey/posts. Comic-panel framing
     (ink outline + offset solid shadow) to match .proof/.step above. */
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
  .post{display:block;background:var(--char);border:3px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:4px 4px 0 var(--ink);color:inherit;text-decoration:none}
  .post .pic{aspect-ratio:3/4;width:100%;overflow:hidden;background:var(--char2)}
  .post .pic img{width:100%;height:100%;object-fit:cover;display:block}
  .post .meta{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 11px;font-weight:700;font-size:12.5px}
  .post .meta .h{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .post .meta .l{flex:0 0 auto;color:var(--red2);display:inline-flex;align-items:center;gap:4px}
  .post .meta .l::before{content:"";width:13px;height:13px;flex:0 0 auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ff4a50' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center/contain}

  /* pattern divider */
  .divider{height:150px;overflow:hidden;position:relative;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
  .divider img{width:100%;height:100%;object-fit:cover;object-position:center}

  /* ---------- THE TRACKER (interaction block) ---------- */
  #tracker[hidden]{display:none}
  /* The map is a fixed-frame VIEWPORT: the whole 3:2 world render sits on a
     pan/zoom layer inside it (drag / pinch / wheel / buttons — tracker.js).
     The frame never moves; the MAP moves. Pins live on the layer and are
     counter-scaled via --pz so they keep a constant on-screen size. */
  .map-bleed{margin:6px 0 0}
  .map-wrap{position:relative;border:3px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink);overflow:hidden;
    aspect-ratio:4/5;background:#0c1e38;width:100%;touch-action:none;cursor:grab}
  .map-wrap.dragging{cursor:grabbing}
  .map-layer{position:absolute;left:0;top:0;width:100%;aspect-ratio:3/2;transform-origin:0 0;will-change:transform}
  .map-art{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-select:none;pointer-events:none}
  .map-zoom{position:absolute;right:12px;top:12px;z-index:6;display:flex;flex-direction:column;gap:8px}
  .map-zoom button{width:40px;height:40px;border:2.5px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);
    font-family:"Baloo 2";font-weight:800;font-size:22px;line-height:1;cursor:pointer;box-shadow:3px 3px 0 var(--ink);
    -webkit-tap-highlight-color:transparent}
  .map-zoom button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
  /* Anchor contract: translate(-50%,-100%) pins the button's bottom-center to
     the (x%,y%) coord, so the visual tip must sit exactly there — height is
     drop-center-y + the drop's half-diagonal (15 + 15√2 ≈ 36), and the sharp
     border-radius corner is bottom-RIGHT because rotate(+45deg) turns BR to
     point straight down. Get either wrong and pins drift against the map as
     the counter-scale (--pz) changes with zoom. */
  .pin{position:absolute;transform:translate(-50%,-100%) scale(var(--pz,1));transform-origin:50% 100%;width:40px;height:36px;background:none;border:none;cursor:pointer;z-index:3;padding:0;
    -webkit-tap-highlight-color:transparent}
  /* box-shadow rotates with the element: a (2.8,0) offset lands as (2,2)
     down-right after rotate(45deg), instead of a blob straight below the tip */
  .pin .drop{display:block;width:30px;height:30px;margin:0 auto;border-radius:50% 50% 4px 50%;transform:rotate(45deg) scale(0);
    background:var(--blue2);border:2.5px solid var(--ink);box-shadow:2.8px 0 0 rgba(11,11,18,.5);
    transition:transform .45s cubic-bezier(.3,1.6,.4,1)}
  .pin .drop::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff;opacity:.9}
  .pin.unclaimed .drop{background:#8a8fa8}
  .pin.done .drop{background:#7ee2a0}
  .pin.done .q{display:none}
  .web-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
  .web-svg path{fill:none;stroke:rgba(255,255,255,.85);stroke-width:2.5;vector-effect:non-scaling-stroke;
    stroke-dasharray:6 5;filter:drop-shadow(0 0 3px rgba(255,255,255,.5))}
  /* the "!" is positioned by its glyph center line (translate -50%), not by
     font metrics — top is hand-tuned to sit optically middle in the drop */
  .pin .q{position:absolute;left:50%;top:19px;transform:translate(-50%,-50%) scale(0);font-family:"Baloo 2";font-weight:800;font-size:12px;line-height:1;color:var(--ink);z-index:2;transition:transform .45s cubic-bezier(.3,1.6,.4,1) .1s}
  .map-wrap.in .pin .drop{transform:rotate(45deg) scale(1)}
  .map-wrap.in .pin .q{transform:translate(-50%,-50%) scale(1)}
  /* grow-about-center dips the tip below the anchor by (scale-1)*15√2 — lift
     by the same amount so the needle point stays planted on the coord */
  .pin:hover .drop{transform:translateY(-3.8px) rotate(45deg) scale(1.18)}
  .pin:focus-visible{outline:3px solid var(--red2);outline-offset:2px;border-radius:8px}
  #claimCta{margin-top:16px}
  /* tracker HUD panel: legend + your-web progress, breathing room */
  .tracker-hud{background:rgba(11,24,48,.55);border:2.5px solid rgba(125,179,232,.28);border-radius:16px;
    padding:16px 16px 18px;margin:14px 0 18px}
  .type-legend{display:flex;flex-direction:column;gap:10px;margin:0 0 15px}
  .tl-row{display:flex;align-items:flex-start;gap:11px}
  .tl-txt{font-family:"Baloo 2";font-weight:600;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.78)}
  .tl-txt b{color:#fff;font-weight:800;letter-spacing:.05em}
  .tl-dot{flex:0 0 auto;width:14px;height:14px;margin-top:3px;border-radius:50% 50% 50% 3px;transform:rotate(45deg);border:2px solid var(--ink);
    background:#8a8fa8;box-shadow:1.5px 1.5px 0 rgba(11,11,18,.5)}
  /* one colour per action type — same palette as the wall's .type-chip */
  .tl-dot.sighting{background:var(--blue2)}
  .tl-dot.signal{background:#ffd166}
  .tl-dot.recruit{background:#b48cff}
  .tracker-hud .tracker-progress{margin:0;border-top:2px dashed rgba(255,255,255,.16);padding-top:14px}
  /* community progress bar */
  .tracker-progress{margin:4px 0 12px}
  .tp-label{font-family:"Baloo 2";font-weight:800;font-size:13px;letter-spacing:.05em;color:#fff;margin-bottom:6px}
  .tp-track{height:14px;border:2.5px solid var(--ink);border-radius:9px;background:var(--char);overflow:hidden;box-shadow:2px 2px 0 var(--ink)}
  .tp-fill{display:block;height:100%;background:var(--red2);border-radius:6px}
  .tp-counts{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
  .tp-counts span{font-family:"Baloo 2";font-weight:800;font-size:10.5px;letter-spacing:.06em;color:rgba(255,255,255,.85);
    border:2px solid rgba(255,255,255,.28);border-radius:8px;padding:3px 9px}
  /* today's mission pin: solid parts win overlaps (paint AND clicks)… */
  .pin.today{z-index:4}
  .pin.today .drop{background:var(--red2)}
  .pin.today.done .drop{background:#7ee2a0}
  /* …and the pulsing ring paints on TOP of every pin (5 beats .pin.today's 4).
     It used to sit at z-1 like a big-maps ripple — background under the
     markers — but on a dense map the ring kept disappearing behind whichever
     neighbouring pin it grew into, which is the one thing it exists to avoid.
     It's pointer-events:none, so nothing above it becomes unclickable, and
     #mapLayer's transform traps it in that stacking context — it can never
     reach the .map-zoom buttons (z-6) outside. It can't be a ::before of the
     pin either: the pin's own transform would trap the ring inside the pin.
     tracker.js positions this element on today's coords (and moves it when an
     invite reassigns the mission). */
  .today-halo{position:absolute;width:40px;height:36px;transform:translate(-50%,-100%) scale(var(--pz,1));transform-origin:50% 100%;
    z-index:5;pointer-events:none}
  .today-halo::before{content:"";position:absolute;left:50%;top:15px;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;
    border:3px solid var(--red2);opacity:0;animation:todayPulse 1.7s ease-out infinite}
  @keyframes todayPulse{0%{opacity:.9;transform:translate(-50%,-50%) scale(.55)}80%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}100%{opacity:0}}
  /* signal-arrival ping: each pin pops + radiates a ring */
  .pin.ping .drop{animation:pingPop .5s cubic-bezier(.3,1.6,.4,1)}
  @keyframes pingPop{50%{transform:translateY(-8.5px) rotate(45deg) scale(1.4)}}
  .pin.ping::after{content:"";position:absolute;left:50%;top:15px;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;
    border:3px solid #9fd6ff;opacity:0;animation:todayPulse 1.1s ease-out 2;pointer-events:none}
  .today-tag{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-family:"Baloo 2";font-weight:800;font-size:8.5px;
    letter-spacing:.08em;background:var(--red2);color:#fff;border:2px solid var(--ink);border-radius:6px;padding:1px 6px;white-space:nowrap}
  /* the arrival: a spider drops onto the map before the pins pop */
  .map-drop{position:absolute;inset:0;z-index:5;pointer-events:none;transition:opacity .5s ease}
  .map-drop.gone{opacity:0}
  .md-line{position:absolute;left:50%;top:0;width:2px;height:0;background:rgba(255,255,255,.9);animation:mdLine .6s cubic-bezier(.5,0,.3,1) forwards}
  @keyframes mdLine{to{height:46%}}
  .md-spider{position:absolute;left:50%;top:0;transform:translate(-50%,-100%);width:38px;height:auto;image-rendering:pixelated;
    filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));animation:mdSpider .6s cubic-bezier(.5,0,.3,1) forwards, mdSway 1s ease-in-out .6s infinite alternate}
  @keyframes mdSpider{to{top:46%}}
  @keyframes mdSway{from{transform:translate(-50%,-100%) rotate(-10deg)}to{transform:translate(-50%,-100%) rotate(10deg)}}
  /* mission chips */
  .pc-tags{display:flex;gap:8px;margin:2px 0 10px;flex-wrap:wrap}
  .diff,.cleared-chip,.today-chip,.duo-chip,.type-chip{font-family:"Baloo 2";font-weight:800;font-size:10px;letter-spacing:.08em;padding:3px 9px;
    border:2px solid var(--ink);border-radius:7px;background:#fff;color:var(--ink)}
  .diff.easy{background:#7ee2a0}
  .diff.hard{background:#ffd166}
  .diff.boss{background:var(--red2);color:#fff}
  .cleared-chip{background:var(--blue2);color:#fff}
  .duo-chip{background:#b48cff}
  .type-chip{background:var(--blue2);color:#fff}
  .type-chip.signal{background:#ffd166;color:var(--ink)}
  .type-chip.recruit{background:#b48cff;color:var(--ink)}
  .today-chip{background:var(--red2);color:#fff}
  .pc-mission{font-weight:700;font-size:15px;line-height:1.4;margin-top:4px}
  .pc-steps{list-style:none;margin:12px 0 0;padding:0;counter-reset:pcs;text-align:left}
  .pc-steps li{counter-increment:pcs;position:relative;padding:4px 0 4px 34px;font-weight:700;font-size:13.5px;line-height:1.35;color:rgba(11,11,18,.85)}
  .pc-steps li::before{content:counter(pcs);position:absolute;left:0;top:3px;width:22px;height:22px;display:grid;place-items:center;
    background:var(--red2);color:#fff;border:2px solid var(--ink);border-radius:50%;font-family:"Baloo 2";font-weight:800;font-size:12px}
  .pc-row{display:flex;gap:10px}
  /* "prompt copied" confirmation toast (shown in the pre-nav window of make-go) */
  .copy-toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:500;background:var(--ink);color:#fff;
    font-family:"Baloo 2";font-weight:800;font-size:14px;letter-spacing:.02em;padding:10px 16px;border-radius:12px;
    border:2px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.35);white-space:nowrap;max-width:92vw;overflow:hidden;
    text-overflow:ellipsis;animation:toastIn .25s ease both}
  @keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
  .cleared-chip.done{background:#7ee2a0;color:var(--ink)}
  .pc-row .btn{flex:1;font-size:13px;padding:10px 6px}
  /* pin card: bottom sheet on mobile, same card centered on desktop */
  .pin-veil{position:fixed;inset:0;background:rgba(7,9,31,.55);z-index:400}
  .pin-veil[hidden]{display:none}
  .pin-card{position:fixed;left:50%;bottom:0;transform:translate(-50%,8px);width:min(460px,100vw);z-index:401;
    background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:18px 18px 0 0;
    padding:18px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -6px 0 rgba(11,11,18,.35);
    animation:sheetup .35s cubic-bezier(.2,.9,.3,1)}
  .pin-card[hidden]{display:none}
  .pin-card{max-height:calc(100vh - 10px);max-height:calc(100svh - 10px);overflow-y:auto}
  @keyframes sheetup{from{transform:translate(-50%,60%)}to{transform:translate(-50%,8px)}}
  .pin-card .pc-x{position:absolute;top:10px;right:14px;background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:var(--ink)}
  .pin-card .pc-img{width:100%;aspect-ratio:1/1;max-height:44vh;max-height:44svh;object-fit:cover;border:3px solid var(--ink);border-radius:12px;display:block;background:#dcd4bd}
  .pin-card .pc-city{font-family:"Bangers",system-ui;font-size:26px;letter-spacing:.02em;margin:12px 0 2px}
  .pin-card .pc-by{font-size:13px;font-weight:700;color:rgba(11,11,18,.65)}
  .pin-card .pc-cap{font-size:14px;line-height:1.45;margin-top:6px;color:rgba(11,11,18,.85)}
  .pin-card .pc-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px}
  .pin-card .btn{font-size:15px;padding:12px 18px}
  .pin-card .btn.ghosted{background:transparent;color:var(--ink)}
  /* cleared missions render AS the sighting file */
  .pin-card.file{padding-top:14px}
  .pcf-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:24px -18px 14px;
    background:var(--red);color:#fff;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
    padding:8px 18px;font-family:"Baloo 2";font-weight:800;font-size:12.5px;letter-spacing:.08em}
  /* true 3:4 always: width follows the height cap instead of clamping height
     under a fixed width (which silently squared the photo) */
  .pin-card .pcf-img{aspect-ratio:3/4;height:auto;object-fit:cover;display:block;
    width:min(calc(100% - 10px),33vh);width:min(calc(100% - 10px),33svh);
    border:3px solid var(--ink);outline:10px solid #fff;outline-offset:-13px;border-radius:4px;background:#dcd4bd;
    transform:rotate(-1deg);box-shadow:4px 4px 0 rgba(11,11,18,.25);margin:6px auto 0}
  .pcf-badge{position:absolute;top:74px;right:10px;width:74px;height:74px;transform:rotate(9deg);
    filter:drop-shadow(2px 3px 3px rgba(11,11,18,.35));pointer-events:none;z-index:2}
  .pcf-spotted{font-family:"Bangers",system-ui;font-size:30px;letter-spacing:.02em;text-align:center;margin:16px 0 2px;
    color:var(--ink);text-shadow:2px 2px 0 var(--red2)}
  .pin-card.file .pc-mission,.pin-card.file .pc-by,.pin-card.file .pc-cap{text-align:center}
  .pin-card .pc-unclaimed{display:grid;place-items:center;aspect-ratio:1/1;max-height:34vh;max-height:34svh;margin:0 auto;width:100%;border:3px dashed rgba(11,11,18,.4);border-radius:12px;
    font-family:"Bangers",system-ui;font-size:64px;color:rgba(11,11,18,.35)}

  /* ---------- MISSION BRIEFING overlays (invite.js) ---------- */
  .invite-veil{position:fixed;inset:0;background:rgba(7,9,31,.78);z-index:500;display:grid;place-items:center;padding:22px}
  .invite-veil[hidden]{display:none}
  .invite-card{position:relative;width:min(430px,100%);background:var(--paper);color:var(--ink);border:3px solid var(--ink);
    border-radius:18px;box-shadow:8px 8px 0 var(--ink);padding:74px 22px 22px;text-align:center;
    animation:briefIn .5s cubic-bezier(.2,.9,.3,1)}
  .invite-card .btn.ghosted{background:transparent;color:var(--ink)}
  .invite-card .pc-x{position:absolute;top:10px;right:14px;background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:var(--ink)}
  @keyframes briefIn{from{transform:translateY(26px);opacity:0}to{transform:none;opacity:1}}
  .iv-drop{position:absolute;left:50%;top:-3px;transform:translateX(-50%);pointer-events:none}
  .iv-lineb{position:absolute;left:50%;bottom:100%;width:2px;height:60vh;background:rgba(255,255,255,.85)}
  .iv-drop img{width:54px;image-rendering:pixelated;display:block;transform:translateY(-6px);filter:drop-shadow(0 3px 4px rgba(0,0,0,.4));
    animation:ivSway 2.4s ease-in-out infinite alternate;transform-origin:top center}
  .iv-env{position:absolute;left:50%;top:34px;transform:translateX(-50%) rotate(8deg);font-size:22px}
  @keyframes ivSway{from{transform:translateY(-6px) rotate(-5deg)}to{transform:translateY(-6px) rotate(5deg)}}
  .iv-head{display:inline-block;background:var(--blue);color:#fff;border:2.5px solid var(--ink);border-radius:8px;
    font-family:"Baloo 2";font-weight:800;font-size:12.5px;letter-spacing:.12em;padding:5px 12px;margin-bottom:14px}
  .iv-type{font-family:"Baloo 2";font-weight:800;font-size:22px;line-height:1.25;min-height:56px;color:var(--ink)}
  .iv-type::after{content:"▌";color:var(--red2);animation:ivCaret 1s steps(1) infinite}
  .iv-type.done::after{content:""}
  @keyframes ivCaret{50%{opacity:0}}
  .iv-mission{margin:10px 0 4px;min-height:20px}
  .iv-mission b{display:block;font-family:"Bangers",system-ui;font-weight:400;font-size:30px;letter-spacing:.02em;
    color:var(--ink);text-shadow:2px 2px 0 var(--red2);margin-bottom:4px}
  .iv-mission span{font-weight:700;font-size:15px;line-height:1.4}
  .iv-stamp{display:inline-block;margin:12px 0 4px;padding:5px 14px;border:3px solid var(--red2);border-radius:6px;
    color:var(--red2);font-family:"Bangers",system-ui;font-size:22px;letter-spacing:.06em;transform:rotate(-4deg);
    opacity:0;scale:1.6}
  .invite-card.stamped .iv-stamp{opacity:.9;scale:1;transition:all .28s cubic-bezier(.2,1.4,.4,1)}
  .iv-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
  .iv-accepted{position:absolute;left:50%;top:46%;padding:8px 20px;border:4px solid #1d9e57;border-radius:10px;
    color:#1d9e57;background:rgba(242,234,216,.92);font-family:"Bangers",system-ui;font-size:32px;letter-spacing:.05em;
    white-space:nowrap;opacity:0;transform:translate(-50%,-50%) rotate(-6deg) scale(2.2);
    animation:stampIn .35s cubic-bezier(.2,1.3,.4,1) .1s forwards;pointer-events:none;z-index:2}
  @keyframes stampIn{to{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(1)}}
  .invite-card.reelup{animation:reelUp .75s cubic-bezier(.6,-.1,.8,.5) forwards}
  @keyframes reelUp{to{transform:translateY(-130vh)}}
  .iv-sub{font-weight:700;font-size:14.5px;line-height:1.45;margin:2px 0 12px;color:rgba(11,11,18,.85)}
  .iv-input{width:100%;background:#fff;border:3px solid var(--ink);border-radius:12px;padding:12px 14px;
    font-family:"Baloo 2";font-weight:700;font-size:15px;color:var(--ink);box-shadow:3px 3px 0 var(--ink);text-align:center}
  .iv-input:focus-visible{outline:3px solid var(--red2);outline-offset:2px}
  /* pixel-HUD arrival overlay: mirrors the shared link preview exactly */
  .invite-veil.pixhud{background:#173a63;padding:0}
  .pixhud .ph-frame{position:absolute;inset:10px;border:4px solid #7db3e8;box-shadow:0 0 0 6px #2b6cb0,0 0 0 12px #173a63;
    background:#0f2440 url(/spidey/assets/map.jpg) center/cover;overflow:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-family:"Menlo","Consolas",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.12em}
  .pixhud .ph-frame::before{content:"";position:absolute;inset:0;background:
    linear-gradient(rgba(5,10,30,.62),rgba(5,10,30,.62)),
    linear-gradient(rgba(125,179,232,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(125,179,232,.06) 1px,transparent 1px);
    background-size:auto,100% 44px,44px 100%}
  .pixhud .ph-title{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;
    background:#0b1830;border:3px solid #7db3e8;outline:2px solid #0b0b12;padding:9px 16px;color:#9fd6ff;font-weight:700;font-size:14px;white-space:nowrap}
  .pixhud .ph-eyes{width:30px;height:30px;background:#e62429;border:3px solid #0b0b12;border-radius:50%;position:relative;flex:0 0 auto}
  .pixhud .ph-eyes::before,.pixhud .ph-eyes::after{content:"";position:absolute;top:5px;width:8px;height:13px;background:#fff;border-radius:50%}
  .pixhud .ph-eyes::before{left:4px;transform:rotate(-15deg)}
  .pixhud .ph-eyes::after{right:4px;transform:rotate(15deg)}
  .pixhud .ph-reel{position:relative;width:min(430px,92%);display:flex;flex-direction:column;align-items:center}
  .pixhud .ph-thread{position:absolute;bottom:calc(100% - 6px);left:50%;width:2px;height:70vh;background:rgba(255,255,255,.85)}
  .pixhud .ph-spider{width:52px;image-rendering:pixelated;margin-bottom:-4px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4));
    animation:ivSway 2.6s ease-in-out infinite alternate;transform-origin:top center;position:relative}
  .pixhud .ph-dialog{position:relative;width:100%;background:#f2ead8;border:4px solid #0b0b12;box-shadow:10px 10px 0 rgba(11,11,18,.85)}
  .pixhud .ph-head{background:#5f1b24;color:#f2ead8;text-align:center;font-weight:700;font-size:14px;padding:13px;border-bottom:4px solid #0b0b12}
  .pixhud .ph-body{padding:20px 18px 22px;text-align:center;color:#0b0b12}
  .pixhud .iv-type{font-weight:700;font-size:16.5px;line-height:1.55;min-height:52px;color:#0b0b12}
  .pixhud .iv-mission{margin:8px 0 2px;min-height:20px}
  .pixhud .iv-mission b{display:block;font-family:inherit;font-weight:700;font-size:15.5px;color:#b3222c;margin-bottom:8px;letter-spacing:.14em;text-shadow:none}
  .pixhud .iv-mission span{display:block;font-weight:700;font-size:11.5px;line-height:1.6;color:rgba(11,11,18,.75)}
  .pixhud .ph-accept{display:block;width:100%;margin-top:18px;background:#e62429;color:#fff;border:4px solid #0b0b12;
    box-shadow:5px 5px 0 rgba(11,11,18,.85);padding:15px 10px;font:700 14px "Menlo","Consolas",ui-monospace,monospace;
    letter-spacing:.14em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .pixhud .ph-accept:active{transform:translate(3px,3px);box-shadow:2px 2px 0 rgba(11,11,18,.85)}
  .pixhud .ph-later{display:block;margin:13px auto 0;background:none;border:none;color:rgba(11,11,18,.55);
    font:700 11px "Menlo",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-decoration:underline}
  .pixhud .ph-ticker{position:absolute;bottom:16px;left:4%;right:4%;background:#0b1830;border:3px solid #7db3e8;
    color:#9fd6ff;text-align:center;padding:11px 6px;font-weight:700;font-size:10px;letter-spacing:.07em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pixhud .ph-reel.reelup{animation:reelUp .75s cubic-bezier(.6,-.1,.8,.5) forwards}
  .pixhud .iv-accepted{font-family:"Menlo",ui-monospace,monospace;font-size:20px;letter-spacing:.08em;white-space:nowrap}
  /* the poster's orange alert, live on the map frame (signal-link arrivals) */
  .ph-alert{position:absolute;left:4%;right:4%;top:14px;z-index:6;background:linear-gradient(#ffb733 50%,#ff9f1c 50%);
    border:3px solid var(--ink);box-shadow:4px 4px 0 rgba(11,11,18,.5);padding:10px 12px;text-align:center;
    font-family:"Menlo","Consolas",ui-monospace,monospace;text-transform:uppercase;transition:opacity .5s ease;
    animation:phAlertIn .4s cubic-bezier(.2,1.2,.4,1)}
  @keyframes phAlertIn{from{transform:translateY(-16px);opacity:0}}
  .ph-alert.gone{opacity:0}
  .ph-alert b{display:block;font-size:13.5px;letter-spacing:.12em;color:#0b0b12}
  .ph-alert span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:rgba(11,11,18,.8);margin-top:3px}
  .recruited-chip{margin:13px 0 0;display:inline-block;background:var(--red2);color:#fff;border:2.5px solid var(--ink);
    border-radius:9px;font-family:"Baloo 2";font-weight:800;font-size:12.5px;letter-spacing:.03em;padding:6px 12px;
    box-shadow:3px 3px 0 var(--ink)}
  /* reward card */
  .reward{background:var(--char);border-radius:20px;padding:22px 18px;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
  .reward .rtop{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
  .reward .rtitle{font-family:"Baloo 2";font-weight:800;font-size:26px;line-height:.95}
  .reward .rtitle b{color:var(--red2)}
  .reward .rtoday{text-align:right;font-size:12px;color:var(--mute);line-height:1.4}
  .reward .rtoday b{display:block;color:#fff;font-size:16px;font-family:"Baloo 2"}
  .reqline{background:var(--char2);border-radius:12px;padding:11px 14px;font-size:13px;color:rgba(255,255,255,.8);font-weight:600;margin-bottom:18px}
  .reqline b{color:var(--red2)}
  .ladder{position:relative;padding-left:4px}
  .track{position:absolute;left:22px;top:30px;bottom:30px;width:5px;background:rgba(255,255,255,.12);border-radius:5px;overflow:hidden}
  .track .fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--red2);border-radius:5px;transition:height 1.6s cubic-bezier(.4,0,.2,1) .2s}
  .in .track .fill{height:100%}
  .tier{position:relative;display:flex;align-items:center;gap:15px;padding:11px 0;z-index:2;opacity:0;transform:translateX(-12px);transition:opacity .5s,transform .5s}
  .in .tier{opacity:1;transform:none}
  .in .tier:nth-child(2){transition-delay:.3s}.in .tier:nth-child(3){transition-delay:.6s}.in .tier:nth-child(4){transition-delay:.9s}
  .tier .dot{width:44px;height:44px;flex:0 0 auto;border-radius:50%;background:var(--char2);border:3px solid var(--red2);display:grid;place-items:center;font-size:13px;letter-spacing:.02em;font-family:"Baloo 2";font-weight:800;color:var(--red2)}
  .tier .info .w{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
  .tier .info .r{font-family:"Baloo 2";font-weight:800;font-size:18px;color:#fff}
  .reward .btn{margin-top:18px}

  /* footer */
  footer{padding:30px 22px 130px;text-align:center;border-top:1px solid var(--line)}
  .fine{font-size:11px;color:rgba(255,255,255,.4);line-height:1.6;margin-top:18px;letter-spacing:.02em}

  /* sticky bottom CTA */
  .stickybar{position:fixed;bottom:0;left:50%;transform:translate(-50%,120%);width:min(460px,100vw);
    background:rgba(11,14,40,.94);backdrop-filter:blur(10px);border-top:3px solid var(--ink);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;z-index:320;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  .stickybar.show{transform:translate(-50%,0)}
  .stickybar .s-left{font-size:12px;color:var(--mute);font-weight:600;line-height:1.3}
  .stickybar .s-left b{display:block;color:#fff;font-family:"Baloo 2";font-size:15px}
  .stickybar .btn{margin-left:auto;padding:11px 20px;font-size:16px}

  /* ============ TABLET / DESKTOP ============ */
  @media (min-width:768px){
    .h5{width:100%}
    section{padding-top:80px;padding-bottom:80px;
      padding-left:max(6vw,calc((100% - 1080px) / 2));
      padding-right:max(6vw,calc((100% - 1080px) / 2))}
    h2{font-size:clamp(44px,5vw,64px)}
    .sec-eyebrow{font-size:14px}
    .lead{font-size:17px;max-width:60ch}
    .hero{height:92vh;height:92svh;min-height:560px;max-height:none}
    .hero .content{left:50%;transform:translateX(-50%);width:100%;max-width:1080px;padding:0 6vw;bottom:8vh}
    .hashtag{font-size:clamp(72px,9vw,140px)}
    .tagline{font-size:22px;max-width:46ch}
    .topbar{padding:22px}
    .logo-img{height:52px}
    .proof{max-width:560px;margin-left:auto;margin-right:auto}
    .steps{flex-direction:row;gap:18px}
    .step{flex:1;flex-direction:column;padding:26px}
    .grid{grid-template-columns:repeat(4,1fr);gap:18px}
    .post .pic{aspect-ratio:4/5}
    .step h3{font-size:19px;margin-top:8px}
    .step p{font-size:14.5px}
    .reward{padding:36px 34px}
    .reward .rtitle{font-size:32px}
    .reqline{font-size:14px}
    .tier .info .r{font-size:20px}
    .divider{height:220px}
    .ticker{font-size:15px;padding:12px 0}
    .map-bleed{margin:6px 0 0}
    .map-wrap{aspect-ratio:3/2;border:3px solid var(--ink);border-radius:16px;box-shadow:6px 6px 0 var(--ink)}
    .map-zoom{right:14px;top:14px}
    .pin{width:44px;height:39px}   /* 16 + 16√2 ≈ 39 — keep tip on the anchor */
    .pin .drop{width:32px;height:32px}
    .pin-card{left:50%;bottom:auto;top:50%;transform:translate(-50%,-50%);border-radius:18px;width:min(430px,92vw);
      animation:cardpop .3s cubic-bezier(.34,1.4,.64,1)}
    @keyframes cardpop{from{opacity:0;transform:translate(-50%,-46%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
    .stickybar{width:auto;min-width:460px;max-width:720px;border:3px solid var(--ink);border-radius:60px;
      bottom:24px;padding:12px 14px 12px 24px}
    footer{padding:60px 6vw 120px}
  }
  @media (min-width:1180px){
    section{padding-top:96px;padding-bottom:96px}
    .hashtag{font-size:clamp(90px,9vw,150px)}
  }

  @media (prefers-reduced-motion:reduce){
    .rv,.heroup,.pin .drop,.pin .q{transition:none;animation:none!important;opacity:1;transform:none}
    .map-wrap.in .pin .drop{transform:rotate(45deg) scale(1)}
    .thwip .web-line,.thwip .hero-spider,.map-drop{display:none}
    .pin.today::before{animation:none;opacity:0}
    .ticker span{animation:none;padding-left:0}
    .hero .heroimg{animation:none;transform:scale(1)}
  }

  .auth-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px}
  .auth-modal[hidden]{display:none}
  .auth-backdrop{position:absolute;inset:0;background:rgba(4,6,15,.72);backdrop-filter:blur(6px)}
  .auth-card{position:relative;z-index:1;width:min(380px,92vw);background:var(--char);border:3px solid var(--ink);border-radius:20px;padding:32px 26px 24px;text-align:center;box-shadow:6px 6px 0 var(--ink);animation:authpop .42s cubic-bezier(.34,1.56,.64,1)}
  @keyframes authpop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
  .auth-x{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--mute);font-size:26px;line-height:1;cursor:pointer}
  .auth-logo{height:30px;width:auto;margin:0 auto 18px;display:block}
  .auth-title{font-family:"Baloo 2";font-weight:800;font-size:24px;margin-bottom:8px}
  .auth-body{font-size:14px;color:var(--mute);line-height:1.5;margin-bottom:22px}
  .btn.is-ended{background:var(--char2)!important;color:var(--mute)!important;box-shadow:none!important;cursor:default;pointer-events:none}
  .lang{position:relative;display:inline-block;margin-top:18px}
  .lang-btn{display:inline-flex;align-items:center;gap:8px;background:var(--char);color:#fff;border:1px solid var(--line);border-radius:30px;padding:9px 15px;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .15s ease}
  .lang-btn:hover{border-color:rgba(255,255,255,.28)}
  .lang-globe{font-size:14px;opacity:.85}
  .lang-chev{opacity:.55}
  .lang-menu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--char2);border:1px solid var(--line);border-radius:14px;padding:6px;display:none;flex-direction:column;min-width:150px;max-height:248px;overflow:auto;box-shadow:0 18px 44px -12px rgba(0,0,0,.65);z-index:50}
  .lang-menu.open{display:flex}
  .lang-opt{background:none;border:none;color:rgba(255,255,255,.82);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:13px;font-weight:600;text-align:left;padding:9px 12px;border-radius:9px;cursor:pointer;white-space:nowrap}
  .lang-opt:hover{background:rgba(255,255,255,.08);color:#fff}
  .lang-opt.sel{color:var(--red2)}
  .tb-right{display:flex;align-items:center;gap:9px}
  .share-wrap{position:relative}
  .share-btn{width:36px;height:36px;display:grid;place-items:center;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:50%;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .15s ease}
  .share-btn:hover{border-color:rgba(255,255,255,.3)}
  .share-btn svg{width:17px;height:17px;transform:translateX(-1px)}
  .share-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--char2);border:1px solid var(--line);border-radius:14px;padding:6px;display:flex;flex-direction:column;min-width:174px;box-shadow:0 18px 44px -12px rgba(0,0,0,.6);z-index:60}
  .share-menu[hidden]{display:none}
  .share-wrap.up .share-menu{top:auto;bottom:calc(100% + 8px)}
  .share-opt{display:flex;align-items:center;gap:11px;background:none;border:none;color:rgba(255,255,255,.85);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:14px;font-weight:600;text-align:left;padding:10px 12px;border-radius:9px;cursor:pointer;text-decoration:none;white-space:nowrap;width:100%}
  .share-opt:hover{background:rgba(255,255,255,.08);color:#fff}
  .share-opt svg{width:17px;height:17px;flex:0 0 auto;color:var(--red2)}