/* ---------- BIOME MARKERS ---------- */
  .biome-marker{
    position:absolute;
    cursor:pointer;
    display:flex;flex-direction:column;align-items:center;
    transform:translate(-50%,-50%);
    transition:transform .25s cubic-bezier(.2,.9,.3,1.3);
    outline:none;
    z-index:10;
  }
  .biome-marker:hover, .biome-marker:focus-visible{transform:translate(-50%,-56%) scale(1.06);}
  /* ---- per-biome cursors: replaces the removed mouse-parallax with a
     simpler, fully CSS-native effect. Each marker shows a small themed
     icon cursor on hover instead of the plain arrow. ---- */
  .biome-marker[data-id="forest"]{ cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M4%2022C4%2012%2010%204%2022%204C22%2016%2014%2022%204%2022Z%22%20fill%3D%22%238ee08a%22%20stroke%3D%22%23173a1c%22%20stroke-width%3D%221.5%22/%3E%3Cpath%20d%3D%22M5%2021C10%2015%2015%2010%2021%205%22%20stroke%3D%22%23173a1c%22%20stroke-width%3D%221.3%22%20fill%3D%22none%22/%3E%3C/svg%3E") 5 21, pointer; }
  .biome-marker[data-id="mountain"]{ cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M2%2022L10%208L14%2014L18%206L24%2022Z%22%20fill%3D%22%23dfe8ff%22%20stroke%3D%22%231c2130%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22/%3E%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%221%22%20stroke%3D%22%231c2130%22%20stroke-width%3D%221.4%22/%3E%3Cpath%20d%3D%22M18%201L23%203L18%205Z%22%20fill%3D%22%23ffb15c%22%20stroke%3D%22%231c2130%22%20stroke-width%3D%221%22/%3E%3C/svg%3E") 13 22, pointer; }
  .biome-marker[data-id="castle"]{ cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M13%202L23%208V14C23%2020%2018%2024%2013%2025C8%2024%203%2020%203%2014V8Z%22%20fill%3D%22%23ffb15c%22%20stroke%3D%22%232c1c14%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M13%208L16%2013L13%2018L10%2013Z%22%20fill%3D%22%232c1c14%22/%3E%3C/svg%3E") 13 3, pointer; }
  .biome-marker[data-id="village"]{ cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M22%202C22%202%2010%204%206%2012C3%2018%204%2022%204%2022C4%2022%208%2023%2014%2020C22%2016%2024%204%2024%204C24%204%2022%202%2022%202Z%22%20fill%3D%22%23ffd97a%22%20stroke%3D%22%232e2110%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22/%3E%3Cline%20x1%3D%224%22%20y1%3D%2222%22%20x2%3D%2210%22%20y2%3D%2216%22%20stroke%3D%22%232e2110%22%20stroke-width%3D%221.4%22/%3E%3C/svg%3E") 4 22, pointer; }
  .biome-marker[data-id="lighthouse"]{ cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M11%2024H15L14%2012H12Z%22%20fill%3D%22%239fd8ff%22%20stroke%3D%22%23122630%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M10%2012H16L15%206H11Z%22%20fill%3D%22%23eaf6ff%22%20stroke%3D%22%23122630%22%20stroke-width%3D%221.2%22/%3E%3Crect%20x%3D%2211.5%22%20y%3D%222%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23ffb15c%22%20stroke%3D%22%23122630%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M16%204L23%202M16%206L24%206M16%208L23%2010%22%20stroke%3D%22%23ffd97a%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") 13 24, pointer; }
  .biome-marker[data-id="swamp"]{ cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M14%202L6%2015H12L10%2024L20%2010H14Z%22%20fill%3D%22%237cff9e%22%20stroke%3D%22%230f2c1c%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") 13 2, pointer; }
  .biome-marker[data-id="siteseeing"]{ cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Crect%20x%3D%2211%22%20y%3D%226%22%20width%3D%223%22%20height%3D%2218%22%20fill%3D%22%237c5640%22%20stroke%3D%22%233a2418%22%20stroke-width%3D%220.8%22/%3E%3Crect%20x%3D%2214%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%225%22%20rx%3D%220.5%22%20fill%3D%22%23ff9e6b%22%20stroke%3D%22%233a2418%22%20stroke-width%3D%220.8%22/%3E%3Cpolygon%20points%3D%2224%2C8%2026.5%2C10.5%2024%2C13%22%20fill%3D%22%23ff9e6b%22%20stroke%3D%22%233a2418%22%20stroke-width%3D%220.8%22/%3E%3Crect%20x%3D%222%22%20y%3D%2213%22%20width%3D%229%22%20height%3D%224.5%22%20rx%3D%220.5%22%20fill%3D%22%23ffb18c%22%20stroke%3D%22%233a2418%22%20stroke-width%3D%220.8%22/%3E%3Cpolygon%20points%3D%222%2C13%20-0.5%2C15.25%202%2C17.5%22%20fill%3D%22%23ffb18c%22%20stroke%3D%22%233a2418%22%20stroke-width%3D%220.8%22/%3E%3C/svg%3E") 13 6, pointer; }
  .biome-marker:focus-visible .icon-wrap{ filter:drop-shadow(0 0 10px var(--gold-bright)); }
  .biome-marker .icon-wrap{ animation:idlebob 4.5s ease-in-out infinite; position:relative; }
  .biome-marker .glow{
    position:absolute;inset:-34px;border-radius:50%;
    opacity:0;transition:opacity .35s ease;
    pointer-events:none; filter:blur(16px);
  }
  .biome-marker:hover .glow, .biome-marker:focus-visible .glow{opacity:.6;}
  .ground-shadow{
    position:absolute; left:50%; bottom:-6px; width:56px; height:14px;
    transform:translateX(-50%);
    background:radial-gradient(ellipse, rgba(0,0,0,.45), transparent 70%);
    pointer-events:none;
  }
  .ring{
    position:absolute;left:50%;top:50%;
    width:40px;height:40px;margin:-20px 0 0 -20px;
    border:1px solid rgba(244,234,209,0);
    border-radius:50%;pointer-events:none;
  }
  .biome-marker:hover .ring, .biome-marker:focus-visible .ring{ animation:pulseRing 1.6s ease-out infinite; }
  @keyframes pulseRing{
    0%{opacity:.6;transform:scale(.6);border-color:rgba(244,234,209,.6);}
    100%{opacity:0;transform:scale(2.2);border-color:rgba(244,234,209,0);}
  }
  .biome-label{
    margin-top:6px; font-family:'Cinzel',serif; font-size:13px; letter-spacing:.12em;
    color:var(--parchment); text-shadow:0 2px 6px rgba(0,0,0,.8);
    /* Visible from first load (not just on hover) - a first-time visitor
       can't tell a decorative sprite from a clickable landmark otherwise.
       The short description stays in .biome-tooltip below, which is still
       hover-only, so labels don't get lost. Kept the transition so it can
       still animate in with the marker's own entrance without a hard cut. */
    opacity:1; transform:translateY(0);
    transition:opacity .25s ease, transform .25s ease;
    white-space:nowrap; display:flex;align-items:center;gap:6px;
    /* Flat solid background (no blur/backdrop-filter - cheap), since with
       every label on-screen at once now, a couple of markers sit close
       enough that their labels can pass behind each other; this keeps
       whichever one is on top legible instead of both blurring together. */
    background:rgba(6,4,12,.55); padding:2px 8px; border-radius:5px;
  }
  .visited-star{ color:var(--gold-bright); font-size:11px; }

  /* short per-biome hover blurb - small enough to not compete with the
     label, tinted with each marker's own accent color for cohesion */
  .biome-marker{ --tip-shift-x: 0px; }
  .biome-tooltip{
    --tip-accent: var(--parchment);
    margin-top:5px; max-width:172px;
    font-family:'Spectral', serif; font-size:10.5px; line-height:1.45; text-align:center;
    color:var(--parchment-dim);
    background:rgba(8,8,12,.6); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    border:1px solid color-mix(in srgb, var(--tip-accent) 40%, transparent);
    border-radius:6px; padding:6px 10px;
    opacity:0; transform:translateY(3px) translateX(var(--tip-shift-x));
    pointer-events:none; white-space:normal;
    transition:opacity .2s ease .05s, transform .2s ease .05s;
  }
  .biome-marker:hover .biome-tooltip, .biome-marker:focus-visible .biome-tooltip{
    opacity:1; transform:translateY(0) translateX(var(--tip-shift-x));
  }
  /* markers close enough to the viewport edge that a centered tooltip
     would clip - nudge just those inward rather than shrinking everyone */
  .biome-marker[data-id="swamp"]{ --tip-shift-x: 26px; }
  @media (hover: none){
    .biome-tooltip{ display:none; } /* no hover on touch - tap still travels normally */
  }
  /* ---- TOUCH AFFORDANCE ----
     The name label being always-visible (see .biome-label above) is now
     the primary "this is tappable" cue on every device, so touch doesn't
     need its own extra affordance layer. It used to also get a permanent
     blurred glow (filter:blur, expensive to composite) and an infinite
     pulsing ring on all 7 markers at once - that was real, continuous
     GPU load stacked on top of everything else running on the map
     screen, and is what caused the flickering/glitching right when
     tapping something (the travel transition's own burst of work landed
     on top of an already-strained render budget). Keeping only the
     larger tap target, which is layout-only and effectively free. */
  @media (hover: none) and (pointer: coarse){
    /* padding (not margin) grows the tap target - transform:translate(-50%,-50%)
       always re-centers on the current box size, so padding alone keeps the
       visual icon exactly where it was while enlarging the hit area around it. */
    .biome-marker{ padding:16px; }
    /* slightly stronger shadow than the global label style, for legibility
       over the busier motion behind it on a small screen */
    .biome-marker .biome-label{
      text-shadow:0 2px 6px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.7);
    }
  }
  @keyframes idlebob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

  .beam{ position:absolute; left:50%; top:14px; width:2px; height:2px; transform-origin:50% 100%; animation:sweep 4s linear infinite; }
  .beam::before{
    content:'';position:absolute; left:-90px; top:-2px; width:180px; height:5px;
    background:linear-gradient(90deg, transparent, rgba(255,247,214,.6), transparent);
    filter:blur(2px);
  }
  @keyframes sweep{ from{transform:translateX(-50%) rotate(-52deg);} to{transform:translateX(-50%) rotate(52deg);} }

  .wave-line{ animation:waveMove 3s ease-in-out infinite; transform-origin:50% 50%; }
  @keyframes waveMove{ 0%,100%{transform:translateX(0);} 50%{transform:translateX(2px);} }

  .sway{ transform-origin:50% 100%; animation:sway 5s ease-in-out infinite; }
  @keyframes sway{ 0%,100%{transform:rotate(-1.6deg);} 50%{transform:rotate(1.6deg);} }

  .flicker-glow{ animation:flickerGlow 2.6s ease-in-out infinite; }
  @keyframes flickerGlow{ 0%,100%{opacity:.7;} 45%{opacity:1;} 55%{opacity:.55;} }

  .vine{ transform-origin:50% 0%; animation:vineSway 4.5s ease-in-out infinite; }
  @keyframes vineSway{ 0%,100%{transform:rotate(-4deg);} 50%{transform:rotate(4deg);} }

  .banner{ transform-origin:50% 0%; animation:bannerWave 2.2s ease-in-out infinite; }
  @keyframes bannerWave{ 0%,100%{transform:skewX(-6deg);} 50%{transform:skewX(6deg);} }

  /* ---------- HUD ---------- */
  .hud{
    position:absolute;top:0;left:0;width:100%;
    display:flex;justify-content:space-between;align-items:flex-start;
    padding:28px 36px;pointer-events:none; z-index:20;
    opacity:0; animation:hudIn 1s ease forwards 1s;
  }
  @keyframes hudIn{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} }
  .hud-title{ font-family:'Cinzel',serif;font-weight:700; font-size:22px;color:var(--parchment); letter-spacing:.15em; text-shadow:0 2px 10px rgba(0,0,0,.7); }
  .hud-title span{ display:block;font-family:'Share Tech Mono',monospace; font-size:11px;letter-spacing:.2em;color:var(--gold); margin-top:4px;opacity:.85; }
  .hud-player{ text-align:right;font-family:'Share Tech Mono',monospace; font-size:11px;color:var(--parchment);opacity:.85; letter-spacing:.05em; text-shadow:0 2px 8px rgba(0,0,0,.7); }
  .hud-player .badge{ display:inline-block;margin-top:4px;padding:3px 10px; border:1px solid var(--gold);border-radius:20px; color:var(--gold);font-size:10px;letter-spacing:.15em; }
  .hud-progress{ margin-top:10px; display:flex; gap:5px; justify-content:flex-end; }
  .hud-progress i{ width:6px;height:6px;border-radius:50%; background:rgba(244,234,209,.25); border:1px solid rgba(244,234,209,.4); transition:background .3s ease, box-shadow .3s ease; }
  .hud-progress i.filled{ background:var(--gold-bright); box-shadow:0 0 6px var(--gold-bright); border-color:var(--gold-bright); }

  /* ---------- FEATURED WORK STRIP ----------
     A fast lane for visitors who won't explore the whole map: a few direct
     links straight into specific projects, visible above the fold. */
  .featured-strip{
    position:absolute; top:94px; left:36px; z-index:20;
    display:flex; gap:10px; flex-wrap:wrap; max-width:440px;
    opacity:0; animation:hudIn 1s ease forwards 1.3s;
  }
  .featured-card{
    position:relative; width:86px; height:64px; border-radius:6px; overflow:hidden;
    border:1px solid rgba(224,180,92,.35); background:rgba(10,7,21,.5);
    cursor:pointer; padding:0; pointer-events:auto;
    transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    display:flex; align-items:flex-end;
    text-decoration:none; font:inherit;
  }
  .featured-card:hover, .featured-card:focus-visible{
    transform:translateY(-3px); border-color:var(--gold-bright);
    box-shadow:0 6px 16px rgba(0,0,0,.45);
    outline:none;
  }
  .featured-card img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55;
    transition:opacity .15s ease;
  }
  .featured-card:hover img, .featured-card:focus-visible img{ opacity:.8; }
  .featured-card::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, transparent 38%, rgba(6,4,12,.88) 100%);
  }
  .fc-label{
    position:relative; z-index:1; font-family:'Share Tech Mono',monospace; font-size:9.5px;
    color:var(--parchment); letter-spacing:.02em; padding:5px 7px; line-height:1.25;
    text-shadow:0 1px 3px rgba(0,0,0,.85);
  }
  .fc-badge{
    position:absolute; top:4px; right:4px; z-index:2;
    font-size:8px; background:rgba(224,180,92,.92); color:#1c1420;
    padding:1px 5px; border-radius:8px; font-family:'Share Tech Mono',monospace; letter-spacing:.02em;
  }
  .featured-resume{
    align-items:center; justify-content:center; flex-direction:column; gap:5px;
    background:rgba(224,180,92,.08); color:var(--gold);
  }
  .featured-resume .fc-label{ padding:0; }
  .featured-resume:hover{ color:var(--gold-bright); background:rgba(224,180,92,.14); }

  .compass-wrap{ position:absolute; bottom:24px; left:32px; z-index:25; }
  .compass{
    position:relative; width:46px;height:46px; opacity:0;
    animation:hudIn 1s ease forwards 1.2s;
    background:none; border:none; padding:0; margin:0; display:block; cursor:pointer;
    border-radius:50%; transition:transform .2s ease, filter .2s ease;
  }
  .compass:hover, .compass:focus-visible{ transform:scale(1.08); filter:drop-shadow(0 0 8px var(--gold-bright)); outline:none; }
  .compass svg{ width:100%;height:100%; }
  .compass-needle{ transform-origin:50% 50%; animation:needleDrift 9s ease-in-out infinite; }
  @keyframes needleDrift{ 0%,100%{transform:rotate(-4deg);} 50%{transform:rotate(4deg);} }

  .compass-menu{
    position:absolute; left:0; bottom:58px; min-width:196px;
    background:rgba(10,10,14,.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(244,234,209,.25); border-radius:8px;
    padding:6px; display:flex; flex-direction:column; gap:1px;
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    box-shadow:0 14px 34px rgba(0,0,0,.5);
  }
  .compass-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
  .compass-menu-item{
    display:flex; align-items:center; gap:9px;
    background:none; border:none; text-align:left; width:100%;
    padding:8px 10px; border-radius:5px; cursor:pointer;
    font-family:'Cinzel',serif; font-size:11.5px; letter-spacing:.03em; color:var(--parchment);
    transition:background .15s ease;
  }
  .compass-menu-item:hover, .compass-menu-item:focus-visible{ background:rgba(244,234,209,.1); outline:none; }
  .compass-menu-icon{ font-size:13px; width:16px; text-align:center; flex-shrink:0; }
  .compass-menu-dot{ width:5px;height:5px;border-radius:50%; background:rgba(244,234,209,.25); flex-shrink:0; margin-left:auto; }
  .compass-menu-item.visited .compass-menu-dot{ background:var(--gold-bright); box-shadow:0 0 5px var(--gold-bright); }

  .hint{
    position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
    font-family:'Share Tech Mono',monospace;font-size:11px; color:var(--parchment);opacity:0;letter-spacing:.1em;
    animation:hintIn 1s ease forwards 1.6s, hintpulse 3s ease-in-out infinite 2.6s; z-index:20;
  }
  @keyframes hintIn{ to{opacity:.55;} }
  @keyframes hintpulse{0%,100%{opacity:.35;}50%{opacity:.75;}}

  /* Sticky mobile Contact CTA - desktop visitors already see every landmark
     (including Farpoint Lighthouse) at a glance, but on a phone the map is
     mostly scrolled/panned past, so a persistent shortcut to contact saves
     a hunt-and-tap. Hidden above the phone breakpoint. */
  .sticky-contact-cta{
    display:none;
  }
  @media (max-width: 640px) {
    .sticky-contact-cta{
      display:flex; align-items:center; gap:6px;
      position:fixed; bottom:20px; right:16px; z-index:30;
      font-family:'Cinzel',serif; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
      color:var(--ink); background:var(--gold); border:none; border-radius:22px;
      padding:11px 18px; cursor:pointer;
      box-shadow:0 6px 18px rgba(0,0,0,.4);
      opacity:0; animation:hudIn 1s ease forwards 1.4s;
    }
    .sticky-contact-cta:active{ transform:scale(.95); background:var(--gold-bright); }
    .sticky-contact-cta svg{ flex-shrink:0; }
  }
  /* Note: no extra hide-when-modal-open logic needed - #destPanel.show
     covers the full viewport at z-index:110, well above this button's
     z-index:30, so it's already hidden underneath whenever a scene is open. */

  /* ---------- TRANSITION ---------- */
  #transitionOverlay{
    position:fixed;inset:0;z-index:100;pointer-events:none;
    background:radial-gradient(circle at var(--ox) var(--oy), var(--tint,#fff) 0%, var(--tint,#fff) 100%);
    clip-path:circle(0% at 50% 50%);
  }
  #transitionOverlay.wipe{ transition:clip-path .85s cubic-bezier(.6,0,.2,1); clip-path:circle(150% at var(--ox) var(--oy)); }
  #burst{ position:fixed; inset:0; z-index:150; pointer-events:none; }

  /* ---------- DESTINATION PANEL ---------- */
  #destPanel{
    position:fixed;inset:0;z-index:110;
    display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at 50% 50%, #2a1832 0%, #0d0812 100%);
    opacity:0;pointer-events:none; transition:opacity .4s ease;
  }
  #destPanel.show{opacity:1;pointer-events:all;}
  .panel-card{
    text-align:center;color:var(--parchment);
    border:1px solid rgba(224,180,92,.4);
    padding:50px 60px;border-radius:6px;
    background:rgba(0,0,0,.25);
    max-width:520px; position:relative;
    transform:translateY(10px); opacity:0;
    transition:opacity .5s ease .1s, transform .5s ease .1s;
  }
  #destPanel.show .panel-card{ opacity:1; transform:translateY(0); }
  .panel-card::before, .panel-card::after{
    content:'';position:absolute;width:22px;height:22px; border:1px solid var(--gold); opacity:.7;
  }
  .panel-card::before{ top:-1px;left:-1px;border-right:none;border-bottom:none; }
  .panel-card::after{ bottom:-1px;right:-1px;border-left:none;border-top:none; }
  .panel-card .panel-icon{font-size:44px;margin-bottom:18px;display:block;}
  .panel-card h2{ font-family:'Cinzel',serif;font-size:28px;letter-spacing:.1em; color:var(--gold);margin-bottom:12px; }
  .panel-card p{ font-size:15px;line-height:1.6;opacity:.85;margin-bottom:26px; }
  .panel-card button{
    font-family:'Cinzel',serif;letter-spacing:.15em;font-size:12px;
    background:transparent;border:1px solid var(--gold);color:var(--gold);
    padding:11px 26px;border-radius:2px;cursor:pointer;
    transition:background .25s ease, color .25s ease;
  }
  .panel-card button:hover, .panel-card button:focus-visible{background:var(--gold);color:#1c1420;}

  /* ============================================================
     CASTLE OF GAMES - interior scene
     ============================================================ */
  .castle-scene{
    position:absolute; inset:0; z-index:5;
    display:flex;
    flex-direction:column;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .25s ease;
    background:
      radial-gradient(ellipse 70% 55% at 82% 0%, rgba(200,30,58,.16), transparent 62%),
      radial-gradient(ellipse 55% 40% at 4% 100%, rgba(150,60,220,.10), transparent 60%),
      linear-gradient(160deg, var(--castle-bg) 0%, #0a0812 100%);
    color:var(--castle-ink);
    font-family:'Spectral',serif;
    overflow:hidden;
    cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%201L21%208L12%2023L3%208Z%22%20fill%3D%22%23c81e3a%22%20stroke%3D%22%23f4e9cf%22%20stroke-width%3D%221.3%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M3%208H21M8%208L12%201L16%208M8%208L12%2023L16%208%22%20stroke%3D%22%23f4e9cf%22%20stroke-width%3D%220.9%22%20fill%3D%22none%22/%3E%3C/svg%3E") 12 3, auto;
  }
  #destPanel.show.castle-mode .castle-scene{ opacity:1; visibility:visible; pointer-events:auto; }
  #destPanel.show.castle-mode .panel-card{ display:none; }

  /* ============================================================
     MASTERY PEAK - interior scene (imported from peak.html)
     ============================================================ */
  /* ── mountain scene ── */
      .peak-scene {
        position: absolute;
        inset: 0;
        z-index: 5;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease;
        background: #0a0e1a;
        padding: 0 0 80px 0;
        overflow-y: auto;
        overflow-x: hidden;
        /* Without this, mobile WebKit/Blink can fail to give this nested
           scrolling panel its own proper compositing layer, which is what
           let its position:absolute children (progress ring, top bar,
           parallax layers) render in the wrong place mid-scroll instead of
           staying calmly pinned. This forces a dedicated layer for the
           scroll region specifically, which is the standard fix for that
           class of glitch and is already used elsewhere on this site
           (e.g. the castle game list) - just missing here. */
        -webkit-overflow-scrolling: touch;
        transform: translateZ(0);
        cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2%2020L9%207L13%2014L17%205L22%2020Z%22%20fill%3D%22%23dfe8ff%22%20stroke%3D%22%231c2130%22%20stroke-width%3D%221.3%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") 12 20, auto;
      }
      #destPanel.show.peak-mode .peak-scene{ opacity: 1; visibility: visible; pointer-events: auto; }
      #destPanel.show.peak-mode .panel-card{ display: none; }
      #destPanel.show.village-mode .panel-card{ display: none; }
  
      /* Dynamic background gradient */
      .scroll-gradient {
        /* Was position:fixed. .peak-scene is itself a nested scrolling
           container (overflow-y:auto), not the real page - and fixed-
           position elements *inside* a nested scroll container are
           notoriously unreliable on mobile browsers: they can detach,
           clip, or flash out during scroll instead of staying calmly
           pinned. absolute (with .peak-scene, which is itself
           position:absolute, as the containing block) achieves the exact
           same "stays put while content scrolls" visual result, but
           reliably, because it doesn't depend on that mobile-buggy
           fixed-in-nested-scroller behavior. Same fix applied to every
           other position:fixed element inside .peak-scene below. */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
        transition: none;
        will-change: background;
      }
  
      /* Parallax layers */
      .parallax-bg {
        position: absolute; /* was fixed - see .scroll-gradient note above */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
        will-change: transform;
        overflow: hidden;
      }
      .parallax-bg .layer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: repeat-x;
        background-position: bottom center;
        will-change: transform;
        transition: none;
      }
      .parallax-bg .layer-mountains {
        /* Was height:70%/bottom:0, which put a hard div edge partway down the
           viewport - stacked with will-change:transform GPU layer promotion,
           that edge showed up as a visible seam. Spanning the full height and
           moving the same visual transition into gradient stops (which always
           blend continuously, no compositing edge) removes the seam while
           keeping the same color distribution. */
        background: linear-gradient(180deg, transparent 0%, transparent 51%, #1c3350 72%, #2c4a63 86%, #4a6a74 100%);
        opacity: 0.5;
        height: 100%;
        top: 0;
      }
      .parallax-bg .layer-ridges {
        background: linear-gradient(180deg, transparent 0%, transparent 69.8%, #16233d 80.8%, #1c3350 100%);
        opacity: 0.35;
        height: 100%;
        top: 0;
      }
      .parallax-bg .layer-mist {
        background: radial-gradient(ellipse at 30% 80%, rgba(200, 220, 255, 0.08), transparent 60%),
          radial-gradient(ellipse at 70% 70%, rgba(200, 220, 255, 0.05), transparent 50%);
        height: 100%;
        bottom: 0;
        opacity: 0.6;
      }
      .parallax-bg .layer-glow {
        background: radial-gradient(ellipse at 50% 100%, rgba(244, 233, 207, 0.04), transparent 50%);
        height: 100%;
        bottom: 0;
        opacity: 0.6;
      }
  
      /* ── floating particles ── */
      #peakParticles {
        position: absolute; /* was fixed - see .scroll-gradient note above */
        inset: 0;
        pointer-events: none;
        z-index: 1;
        overflow: hidden;
      }
      .peak-particle {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        animation: floatParticle linear infinite;
        will-change: transform;
      }
      @keyframes floatParticle {
        0% {
          transform: translateY(-10vh) translateX(0) scale(1);
          opacity: 0;
        }
        10% {
          opacity: 1;
        }
        90% {
          opacity: 1;
        }
        100% {
          transform: translateY(110vh) translateX(var(--drift)) scale(0.4);
          opacity: 0;
        }
      }
  
      /* ── Cloud layer (JS-driven) ── */
      .cloud-layer {
        position: absolute; /* was fixed - see .scroll-gradient note above */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
        overflow: hidden;
      }
      .cloud-obj {
        position: absolute;
        border-radius: 50%;
        background: rgba(220, 235, 255, 0.15);
        filter: blur(2px);
        will-change: transform, opacity;
      }
      .cloud-obj::before {
        content: '';
        position: absolute;
        border-radius: 50%;
        background: inherit;
        filter: blur(4px);
      }
  
      /* ── top bar ── */
      .peak-topbar {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 34px;
        background: rgba(10, 14, 26, 0.85);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(238, 244, 251, 0.08);
        flex-shrink: 0;
      }
      .peak-title {
        font-family: 'Cinzel', serif;
        letter-spacing: 0.22em;
        font-size: 13px;
        color: rgba(238, 244, 251, 0.6);
        text-transform: uppercase;
      }
      .peak-title strong {
        color: #dfe8ff;
      }
      .peak-return {
        font-family: 'Oswald', sans-serif;
        letter-spacing: 0.12em;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        color: rgba(238, 244, 251, 0.7);
        background: transparent;
        border: 1px solid rgba(238, 244, 251, 0.2);
        border-radius: 2px;
        padding: 9px 20px;
        cursor: pointer;
        transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
      }
      .peak-return:hover,
      .peak-return:focus-visible {
        color: #0d1220;
        background: #dfe8ff;
        border-color: #dfe8ff;
        transform: translateY(-1px);
      }
      .peak-return:active {
        transform: scale(0.95);
      }
  
      /* ── progress ring (fixed, bottom-left) ── */
      .peak-progress {
        position: absolute; /* was fixed - see .scroll-gradient note above; this is also the "stays put while content underneath moves and overlaps" element that was reported */
        bottom: 30px;
        left: 30px;
        z-index: 100;
        display: flex;
        align-items: center;
        gap: 14px;
        pointer-events: none;
        background: rgba(10, 14, 26, 0.8);
        backdrop-filter: blur(16px);
        border: 1px solid rgba(238, 244, 251, 0.10);
        border-radius: 50px;
        padding: 10px 20px 10px 14px;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
        transition: border-color 0.4s ease;
      }
      .progress-ring-wrap {
        position: relative;
        width: 52px;
        height: 52px;
        flex-shrink: 0;
      }
      .progress-ring-wrap svg {
        transform: rotate(-90deg);
        width: 52px;
        height: 52px;
      }
      .progress-ring-wrap .bg-ring {
        fill: none;
        stroke: rgba(238, 244, 251, 0.12);
        stroke-width: 3;
      }
      .progress-ring-wrap .fg-ring {
        fill: none;
        stroke: #f4e9cf;
        stroke-width: 3;
        stroke-linecap: round;
        transition: stroke-dashoffset 0.2s ease, stroke 0.4s ease;
      }
      .progress-label {
        font-family: 'Share Tech Mono', monospace;
        font-size: 13px;
        color: #f4e9cf;
        letter-spacing: 0.04em;
        white-space: nowrap;
        transition: color 0.4s ease;
      }
      .progress-label small {
        display: inline-block;
        font-size: 9px;
        opacity: 0.5;
        letter-spacing: 0.08em;
        margin-left: 4px;
      }
  
      /* ── trail container ── */
      .peak-trail {
        position: relative;
        z-index: 2;
        padding: 20px 20px 40px;
        max-width: 900px;
        margin: 0 auto;
      }
  
      /* ── trail line ── */
      .trail-line-wrap {
        position: absolute;
        top: 0;
        left: 50%;
        width: 4px;
        height: 100%;
        transform: translateX(-50%);
        pointer-events: none;
        z-index: 0;
        opacity: 0.6;
      }
      .trail-line-wrap svg {
        display: block;
        width: 100%;
        height: 100%;
      }
      .trail-line-wrap .trail-path {
        fill: none;
        stroke: url(#trailGrad);
        stroke-width: 3;
        stroke-dasharray: 8 12;
        animation: trailFlow 2.4s linear infinite;
      }
      .trail-line-wrap .trail-glow {
        fill: none;
        stroke: rgba(244, 233, 207, 0.12);
        stroke-width: 12;
        filter: blur(8px);
      }
      @keyframes trailFlow {
        0% {
          stroke-dashoffset: 0;
        }
        100% {
          stroke-dashoffset: -20;
        }
      }
  
      /* ── camp cards ── */
      .peak-camp {
        position: relative;
        z-index: 2;
        margin-bottom: 80px;
        display: flex;
        justify-content: center;
        opacity: 0;
        transform: translateY(50px) scale(0.95);
        transition: opacity 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2),
          transform 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2);
        will-change: transform, opacity;
      }
      .peak-camp.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      /* Alternate card positioning with wide margins to push cards away from trail */
      .peak-camp:nth-child(odd) .pc-card {
        margin-right: 6%;
        margin-left: auto;
      }
      .peak-camp:nth-child(even) .pc-card {
        margin-left: 6%;
        margin-right: auto;
      }
  
      /* ── Camp marker (small circle on the trail line) ── */
      .pc-marker {
        position: absolute;
        left: 50%;
        top: 20px;
        width: 16px;
        height: 16px;
        margin-left: -8px;
        border-radius: 50%;
        background: #f4e9cf;
        border: 3px solid #0d1220;
        box-shadow: 0 0 0 4px rgba(244, 233, 207, 0.12);
        z-index: 2;
        transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2),
          box-shadow 0.5s ease, background 0.5s ease;
        left: 50%;
        transform: translateX(-50%);
      }
      .peak-camp.visible .pc-marker {
        transform: translateX(-50%) scale(1.2);
        box-shadow: 0 0 0 10px rgba(244, 233, 207, 0.06), 0 0 40px 14px rgba(244, 233, 207, 0.10);
      }
      /* active camp = "you are here", now the only position indicator on
         the trail since the redundant floating orb was removed, so it gets
         a stronger pulse and adopts that category's own accent color */
      .peak-camp.active-camp .pc-marker {
        background: var(--accent, #ffd97a);
        box-shadow: 0 0 0 16px color-mix(in srgb, var(--accent, #ffd97a) 16%, transparent),
          0 0 60px 28px color-mix(in srgb, var(--accent, #ffd97a) 20%, transparent);
        transform: translateX(-50%) scale(1.4);
        animation: markerBreathe 2.2s ease-in-out infinite;
      }
      @keyframes markerBreathe {
        0%, 100% { transform: translateX(-50%) scale(1.4); }
        50% { transform: translateX(-50%) scale(1.55); }
      }

      .pc-card {
        width: min(85%, 400px);
        background: rgba(10, 14, 26, 0.6);
        border: 1px solid rgba(238, 244, 251, 0.08);
        border-left: 3px solid color-mix(in srgb, var(--accent, #f4e9cf) 45%, transparent);
        border-radius: 10px;
        padding: 24px 26px 28px;
        backdrop-filter: blur(8px);
        transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2),
          box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
        position: relative;
        overflow: visible;
        cursor: default;
      }
      .pc-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(244, 233, 207, 0.03), transparent 60%);
        pointer-events: none;
        border-radius: 10px;
      }
      .pc-card:hover {
        transform: translateY(-6px) scale(1.01);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
        border-color: rgba(238, 244, 251, 0.18);
        border-left-color: var(--accent, #f4e9cf);
      }
      .peak-camp.active-camp .pc-card {
        background: rgba(20, 28, 50, 0.75);
        border-color: rgba(244, 233, 207, 0.2);
        border-left-color: var(--accent, #f4e9cf);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 40px color-mix(in srgb, var(--accent, #f4e9cf) 12%, transparent);
      }
      .pc-card h3 {
        font-family: 'Oswald', sans-serif;
        font-weight: 600;
        font-size: 16px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 12px;
        color: #f4e9cf;
      }
      .pc-card h3 .pc-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        opacity: 0.95;
        color: var(--accent, #f4e9cf);
      }
      .pc-skills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .pc-skill {
        font-family: 'Share Tech Mono', monospace;
        font-size: 11px;
        letter-spacing: 0.02em;
        padding: 5px 14px;
        border-radius: 24px;
        background: rgba(238, 244, 251, 0.05);
        border: 1px solid rgba(238, 244, 251, 0.08);
        display: flex;
        align-items: center;
        gap: 8px;
        color: #eef4fb;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
        user-select: none;
      }
      .pc-skill .pc-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      .pc-skill.lvl-core .pc-dot {
        background: #f4e9cf;
        box-shadow: 0 0 10px rgba(244, 233, 207, 0.4);
      }
      .pc-skill.lvl-comfortable .pc-dot {
        background: #9fc7e8;
        box-shadow: 0 0 10px rgba(159, 199, 232, 0.3);
      }
      .pc-skill.lvl-learning .pc-dot {
        background: transparent;
        border: 1.5px solid rgba(238, 244, 251, 0.4);
      }
      .pc-skill:hover {
        background: rgba(238, 244, 251, 0.10);
        border-color: rgba(238, 244, 251, 0.2);
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
      }
      .pc-skill:hover .pc-dot {
        transform: scale(1.5);
        box-shadow: 0 0 20px rgba(244, 233, 207, 0.5);
      }
      .pc-skill .skill-tip {
        position: absolute;
        bottom: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%) scale(0.9);
        background: rgba(10, 14, 26, 0.95);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(238, 244, 251, 0.12);
        border-radius: 6px;
        padding: 6px 16px;
        font-family: 'Spectral', serif;
        font-size: 11px;
        color: #f4e9cf;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.25s ease;
        z-index: 50;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
      }
      .pc-skill:hover .skill-tip {
        opacity: 1;
        transform: translateX(-50%) scale(1);
      }
      .pc-skill.skill-flash {
        animation: skillFlash 0.4s ease;
      }
      @keyframes skillFlash {
        0% {
          background: rgba(244, 233, 207, 0.3);
          transform: scale(1);
        }
        50% {
          transform: scale(1.15);
          background: rgba(244, 233, 207, 0.5);
        }
        100% {
          transform: scale(1);
          background: rgba(238, 244, 251, 0.05);
        }
      }
  
      /* ── Legend ── */
      .skill-legend {
        display: flex;
        gap: 20px;
        justify-content: center;
        flex-wrap: wrap;
        margin: 10px 0 24px;
        font-family: 'Share Tech Mono', monospace;
        font-size: 10px;
        color: rgba(238, 244, 251, 0.55);
        letter-spacing: 0.04em;
      }
      .skill-legend span {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .skill-legend .dot-sample {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .skill-legend .dot-sample.core {
        background: #f4e9cf;
        box-shadow: 0 0 8px rgba(244, 233, 207, 0.4);
      }
      .skill-legend .dot-sample.comfortable {
        background: #9fc7e8;
        box-shadow: 0 0 8px rgba(159, 199, 232, 0.3);
      }
      .skill-legend .dot-sample.learning {
        background: transparent;
        border: 1.5px solid rgba(238, 244, 251, 0.4);
      }
  
      /* ── intro ── */
      .peak-intro {
        position: relative;
        z-index: 2;
        text-align: center;
        margin-bottom: 80px;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2),
          transform 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2);
      }
      .peak-intro.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .peak-intro .pi-eyebrow {
        font-family: 'Share Tech Mono', monospace;
        font-size: 11px;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: rgba(238, 244, 251, 0.5);
        margin-bottom: 10px;
      }
      .peak-intro h2 {
        font-family: 'Cinzel', serif;
        font-weight: 700;
        font-size: clamp(30px, 4.5vw, 44px);
        letter-spacing: 0.02em;
        margin-bottom: 10px;
        background: linear-gradient(135deg, #f4e9cf, #dfe8ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .peak-intro p {
        font-style: italic;
        color: rgba(238, 244, 251, 0.7);
        font-size: 15px;
        max-width: 500px;
        margin: 0 auto;
      }
  
      /* ── summit ── */
      .peak-summit {
        position: relative;
        z-index: 2;
        text-align: center;
        margin: 80px 0 70px;
        padding: 50px 20px 40px;
        background: rgba(10, 14, 26, 0.3);
        border-radius: 16px;
        border: 1px solid rgba(244, 233, 207, 0.08);
        backdrop-filter: blur(4px);
        opacity: 0;
        transform: translateY(40px) scale(0.97);
        transition: opacity 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2),
          transform 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2),
          box-shadow 0.6s ease;
      }
      .peak-summit.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      .peak-summit.visible.summit-reached {
        box-shadow: 0 0 80px 30px rgba(244, 233, 207, 0.06);
      }
      .peak-summit .ps-eyebrow {
        font-family: 'Share Tech Mono', monospace;
        font-size: 11px;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: rgba(36, 28, 8, 0.5);
        margin-bottom: 8px;
      }
      .peak-summit h3 {
        font-family: 'Cinzel', serif;
        font-weight: 700;
        font-size: 26px;
        color: #f4e9cf;
        margin-bottom: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
      }
      .summit-flag {
        display: inline-block;
        width: 48px;
        height: 56px;
        flex-shrink: 0;
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
      }
      .summit-flag .flag-pole {
        fill: #4a3826;
      }
      .summit-flag .flag-cloth {
        fill: #f4e9cf;
        transform-origin: 14px 12px;
        animation: waveFlag 1.8s ease-in-out infinite alternate;
      }
      .summit-flag .flag-cloth-shadow {
        fill: rgba(0, 0, 0, 0.15);
        transform-origin: 14px 12px;
        animation: waveFlag 1.8s ease-in-out infinite alternate;
      }
      @keyframes waveFlag {
        0% {
          transform: rotate(-4deg) skewX(-2deg);
        }
        100% {
          transform: rotate(4deg) skewX(2deg);
        }
      }
  
      /* ── Glass Box ── */
      .glass-box {
        background: rgba(10, 14, 26, 0.6);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(238, 244, 251, 0.10);
        border-radius: 16px;
        padding: 30px 24px;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
      }
      .glass-box:hover {
        border-color: rgba(238, 244, 251, 0.18);
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
      }
  
      .ps-badges {
        display: flex;
        gap: 24px;
        justify-content: center;
        flex-wrap: wrap;
      }
      .ps-badge {
        width: 140px;
        text-decoration: none;
        color: #f4e9cf;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2),
          filter 0.3s ease;
        position: relative;
      }
      .ps-badge:hover {
        transform: translateY(-8px) scale(1.04);
        filter: drop-shadow(0 12px 32px rgba(244, 233, 207, 0.2));
      }
      .ps-badge:active {
        transform: scale(0.95);
      }
      .ps-flag {
        width: 52px;
        height: 62px;
        flex-shrink: 0;
        transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
      }
      .ps-badge:hover .ps-flag {
        transform: rotate(-5deg) scale(1.06);
      }
      .ps-badge .ps-label {
        font-family: 'Oswald', sans-serif;
        font-weight: 600;
        font-size: 12px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-align: center;
        line-height: 1.3;
      }
      .ps-badge .ps-date {
        font-family: 'Share Tech Mono', monospace;
        font-size: 9.5px;
        opacity: 0.7;
      }
  
      /* ── roadmap ── */
      .peak-climbing {
        position: relative;
        z-index: 2;
        text-align: center;
        max-width: 580px;
        margin: 0 auto;
        padding-top: 10px;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2),
          transform 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2);
      }
      .peak-climbing.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .peak-climbing .pcl-eyebrow {
        font-family: 'Share Tech Mono', monospace;
        font-size: 11px;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: rgba(238, 244, 251, 0.5);
        margin-bottom: 10px;
      }
      .peak-climbing h3 {
        font-family: 'Cinzel', serif;
        font-weight: 700;
        font-size: 20px;
        color: #f4e9cf;
        margin-bottom: 18px;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
      }
      .route-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
      }
      .route-item {
        display: flex;
        align-items: center;
        gap: 14px;
        font-family: 'Share Tech Mono', monospace;
        font-size: 12px;
        color: #eef4fb;
        padding: 6px 0;
        width: 100%;
        border-bottom: 1px solid rgba(238, 244, 251, 0.06);
      }
      .route-item:last-child {
        border-bottom: none;
      }
      .route-marker {
        width: 10px;
        height: 10px;
        border-radius: 2px;
        background: #ffd97a;
        flex-shrink: 0;
        transform: rotate(45deg);
        box-shadow: 0 0 8px rgba(255, 217, 122, 0.3);
      }
      .route-text {
        text-align: left;
      }
  
      /* ── back to top ── */
      .back-top {
        position: absolute; /* was fixed - see .scroll-gradient note above; this is also the "stays put while content underneath moves and overlaps" element that was reported */
        bottom: 30px;
        right: 30px;
        z-index: 90;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: rgba(10, 14, 26, 0.9);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(238, 244, 251, 0.15);
        color: #f4e9cf;
        font-size: 20px;
        cursor: pointer;
        opacity: 0;
        transform: translateY(24px) scale(0.8);
        transition: opacity 0.35s ease, transform 0.35s ease, background 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 28px rgba(0, 0, 0, 0.5);
        pointer-events: none;
      }
      .back-top.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
      }
      .back-top:hover {
        background: rgba(244, 233, 207, 0.12);
        border-color: rgba(238, 244, 251, 0.35);
        box-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
        color: #fff;
      }
      .back-top:active {
        transform: scale(0.9);
      }
  
      /* ── summit celebration canvas ── */
      #summitCelebration {
        position: absolute; /* was fixed - see .scroll-gradient note above */
        inset: 0;
        z-index: 80;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.6s ease;
      }
      #summitCelebration.active {
        opacity: 1;
      }
  
      /* ── responsive ── */
      @media (max-width: 700px) {
        .peak-camp:nth-child(odd) .pc-card,
        .peak-camp:nth-child(even) .pc-card {
          margin-left: auto;
          margin-right: auto;
          width: 92%;
        }
        .peak-topbar {
          padding: 14px 18px;
        }
        .peak-title {
          font-size: 10px;
        }
        .peak-progress {
          bottom: 16px;
          left: 16px;
          padding: 6px 14px 6px 10px;
          gap: 10px;
          border-radius: 30px;
        }
        .progress-ring-wrap {
          width: 40px;
          height: 40px;
        }
        .progress-ring-wrap svg {
          width: 40px;
          height: 40px;
        }
        .progress-label {
          font-size: 11px;
        }
        .progress-label small {
          font-size: 8px;
        }
        .pc-card {
          padding: 18px 18px 22px;
        }
        .ps-badge {
          width: 110px;
        }
        .ps-flag {
          width: 40px;
          height: 48px;
        }
        .back-top {
          width: 44px;
          height: 44px;
          font-size: 18px;
          bottom: 16px;
          right: 16px;
        }
        .skill-legend {
          font-size: 9px;
          gap: 12px;
        }
        .peak-summit h3 {
          font-size: 20px;
        }
        .summit-flag {
          width: 40px;
          height: 48px;
        }
        .glass-box {
          padding: 20px 16px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .peak-camp,
        .peak-intro,
        .peak-summit,
        .peak-climbing {
          opacity: 1 !important;
          transform: none !important;
          transition-duration: 0.001s !important;
        }
        .trail-line-wrap .trail-path {
          animation: none;
        }
        .peak-camp.active-camp .pc-marker {
          animation: none;
        }
        .pc-skill .skill-tip {
          display: none;
        }
        .peak-particle {
          animation-duration: 20s !important;
        }
        .ps-badge:hover {
          transform: none !important;
        }
        .pc-card:hover {
          transform: none !important;
        }
        .back-top {
          transition-duration: 0.001s !important;
        }
        .summit-flag .flag-cloth {
          animation: none !important;
        }
        .summit-flag .flag-cloth-shadow {
          animation: none !important;
        }
        .parallax-bg .layer {
          will-change: auto;
        }
      }
    

  .castle-scene::before{
    content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
    background-image:radial-gradient(rgba(241,233,218,.5) 1px, transparent 1.4px);
    background-size:15px 15px;
    opacity:.05;
  }
  .castle-slashes{
    position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
    will-change:transform;
  }
  .castle-slashes span{
    position:absolute; top:-20%; height:140%; width:34%;
    background:linear-gradient(180deg, rgba(200,30,58,.16), rgba(200,30,58,.02));
    transform:skewX(-14deg);
    will-change:transform,opacity;
  }
  .castle-slashes span:nth-child(1){ right:6%; width:22%; background:linear-gradient(180deg, rgba(200,30,58,.22), transparent); }
  .castle-slashes span:nth-child(2){ right:-4%; width:10%; background:linear-gradient(180deg, rgba(255,58,86,.14), transparent); }
  .castle-slashes span:nth-child(3){ left:-8%; width:16%; background:linear-gradient(180deg, transparent, rgba(162,79,224,.10)); }

  .castle-scene .cs-embers{ position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
  .castle-scene .cs-ember{
    position:absolute; bottom:0; width:4px;height:4px;border-radius:50%;
    background:var(--ember); opacity:0; box-shadow:0 0 10px 2px rgba(255,157,66,.85);
    will-change:transform,opacity;
  }
  .castle-scene .cs-ember.big{ width:6px; height:6px; box-shadow:0 0 14px 3px rgba(255,157,66,.9); }

  .castle-topbar{
    position:relative; z-index:3;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 34px; flex-shrink:0;
    border-bottom:1px solid var(--castle-line);
    overflow:hidden;
  }
  .castle-sweep{
    content:''; position:absolute; top:0; left:-40%; width:30%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,58,86,.16), transparent);
    transform:skewX(-20deg); pointer-events:none; will-change:left;
  }
  .castle-title{
    position:relative; z-index:1;
    font-family:'Cinzel',serif; letter-spacing:.22em; font-size:13px;
    color:var(--castle-ink-dim); text-transform:uppercase;
  }
  .castle-title strong{ color:var(--castle-crimson-bright); }
  .castle-return{
    position:relative; z-index:1;
    font-family:'Oswald',sans-serif; letter-spacing:.12em; font-size:12px; font-weight:600;
    text-transform:uppercase; color:var(--castle-ink-dim);
    background:transparent; border:1px solid var(--castle-line); border-radius:2px;
    padding:9px 18px; cursor:pointer;
    transition:color .2s ease, border-color .2s ease, background .2s ease, transform .15s ease;
    clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  }
  .castle-return:hover, .castle-return:focus-visible{
    color:var(--castle-bg); background:var(--gold); border-color:var(--gold); transform:translateX(-2px);
  }

  .castle-frame{ position:relative; z-index:3; flex:1; display:flex; min-height:0; }

  /* ---- sidebar ---- */
  .castle-sidebar{
    width:280px; flex-shrink:0; padding:28px 0 28px 28px;
    display:flex; flex-direction:column; gap:16px;
    border-right:1px solid var(--castle-line);
  }
  .castle-sidebar-label{
    font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:.28em;
    color:var(--castle-ink-dim); text-transform:uppercase; margin-bottom:2px; padding-right:28px;
  }
  .game-entry{
    position:relative; text-align:left; cursor:pointer; border:none;
    font-family:inherit; color:var(--castle-ink);
    background:var(--castle-panel);
    padding:16px 32px 16px 22px; margin-right:28px;
    display:flex; align-items:center; gap:16px;
    clip-path:polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
    transition:background .2s ease, transform .18s cubic-bezier(.3,.6,.4,2), opacity .45s cubic-bezier(.2,.8,.3,1.2);
  }
  .game-entry:hover{ background:var(--castle-panel-alt); transform:translateX(5px) skewX(-1deg); }
  .game-entry .ge-icon{
    width:36px; height:36px; flex-shrink:0; opacity:.85;
    will-change:transform;
  }
  .game-entry .ge-icon svg{ width:100%; height:100%; display:block; }
  .game-entry .ge-text{ min-width:0; }
  .game-entry .ge-title{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:15px;
    letter-spacing:.03em; text-transform:uppercase; line-height:1.2;
  }
  .game-entry .ge-jam-badge{
    display:inline-block; font-family:'Share Tech Mono',monospace; font-size:8.5px;
    letter-spacing:.05em; color:var(--gold-bright); background:rgba(224,180,92,.12);
    border:1px solid rgba(224,180,92,.4); border-radius:10px;
    padding:1px 7px; margin-left:7px; vertical-align:middle; white-space:nowrap;
  }
  .game-entry .ge-sub{
    font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:.06em;
    color:var(--castle-ink-dim); margin-top:3px;
  }
  .game-entry .ge-bar{
    position:absolute; left:0; top:0; bottom:0; width:4px;
    background:transparent; transition:background .2s ease, box-shadow .25s ease;
  }
  .game-entry.active{ background:var(--castle-crimson); }
  .game-entry.active::after{
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.5) 1px, transparent 1.3px);
    background-size:9px 9px; opacity:.10; mix-blend-mode:overlay;
  }
  .game-entry.active .ge-sub{ color:rgba(241,233,218,.75); }
  .game-entry.active .ge-bar{ background:var(--gold-bright); }
  .game-entry.active .ge-icon{ opacity:1; filter:drop-shadow(0 0 5px rgba(255,255,255,.6)); }
  .game-entry:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:-2px; }
  .game-entry:not(.active):hover .ge-bar{
    box-shadow:0 0 16px 4px var(--gd-accent, var(--gold));
    background:var(--gd-accent, var(--gold));
  }

  /* ---- stage ---- */
  .castle-stage{
    position:relative; flex:1; min-width:0; overflow-y:auto;
    padding:40px 48px 36px;
  }

  .game-entry, .gd-play, .castle-return, .gd-linkedin{ will-change:transform; }
  .game-entry:active{ transform:scale(.97) translateX(2px); }
  .gd-play:active, .gd-linkedin:active{ transform:scale(.95); }
  .castle-return:active{ transform:scale(.95); }
  .gd-thumbs button:active{ transform:scale(.9); }

  /* ---- game switch transition: plain fade + rise, no sweeping bar,
     no transitionend dependency. A setTimeout matched to the transition
     duration swaps the content - the simplest, least failure-prone way
     to sequence a one-shot content swap. ---- */
  .game-detail{
    position:relative; z-index:1; max-width:980px;
    opacity:1; transform:translateY(0);
    transition:opacity .22s ease, transform .22s ease;
  }
  .game-detail.switching{
    opacity:0; transform:translateY(10px);
  }

  .gd-head{ position:relative; margin-bottom:28px; }
  .gd-numeral{
    position:absolute; top:-34px; right:-6px; z-index:0;
    font-family:'Oswald',sans-serif; font-weight:700; font-size:150px; line-height:1;
    color:transparent; -webkit-text-stroke:1.5px var(--gd-accent, var(--gold));
    opacity:.16; user-select:none; pointer-events:none;
  }
  .gd-tag{
    position:relative; display:inline-block; font-family:'Share Tech Mono',monospace; font-size:10px;
    letter-spacing:.18em; text-transform:uppercase; color:var(--gd-accent,var(--gold));
    border:1px solid var(--gd-accent,var(--gold)); border-radius:2px;
    padding:4px 10px; margin-bottom:14px;
  }
  .gd-jam-badge{
    position:relative; display:flex; align-items:center; gap:8px;
    font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:.03em;
    color:var(--castle-ink); background:rgba(224,180,92,.08);
    border:1px solid rgba(224,180,92,.35); border-radius:4px;
    padding:8px 14px; margin:0 0 14px; width:fit-content;
  }
  .gd-jam-trophy{ font-size:14px; flex-shrink:0; }
  .gd-jam-text strong{ color:var(--gold-bright); font-weight:600; }
  .gd-title{
    position:relative;
    font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(30px,3.6vw,46px);
    letter-spacing:.01em; text-transform:uppercase; line-height:1.05; margin-bottom:6px;
  }
  .gd-tagline{ position:relative; font-style:italic; color:var(--castle-ink-dim); font-size:15px; }

  .gd-body{ display:flex; gap:36px; align-items:flex-start; flex-wrap:wrap; }
  .gd-media{ flex:1 1 460px; min-width:300px; }
  .gd-side{ flex:1 1 300px; min-width:260px; }

  .gd-main-wrap{
    position:relative; border-radius:3px; overflow:hidden;
    border:1px solid var(--castle-line);
    box-shadow:0 18px 40px -16px rgba(0,0,0,.65);
    clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px));
    background:#000;
    display:flex; align-items:center; justify-content:center;
    min-height:220px; max-height:460px;
  }
  .gd-main{
    display:block;
    width:auto; height:auto;
    max-width:100%; max-height:460px;
    object-fit:contain;
    transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .15s ease;
  }
  .gd-main-wrap:hover .gd-main{ transform:scale(1.045); }
  .gd-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
  .gd-thumbs button{
    padding:0; border:2px solid transparent; border-radius:2px; cursor:pointer;
    background:#000; width:78px; height:48px; overflow:hidden; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    opacity:.55; transition:opacity .2s ease, border-color .2s ease, transform .15s ease;
  }
  .gd-thumbs button img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
  .gd-thumbs button:hover{ opacity:.9; transform:translateY(-2px); }
  .gd-thumbs button.active{ opacity:1; border-color:var(--gd-accent,var(--gold)); }

  .gd-meta{
    display:flex; flex-direction:column; gap:0; margin-bottom:20px;
    border-top:1px solid var(--castle-line);
  }
  .gd-meta .mrow{
    display:flex; justify-content:space-between; gap:12px;
    padding:9px 2px; border-bottom:1px solid var(--castle-line);
    font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:.04em;
  }
  .gd-meta .mrow span:first-child{ color:var(--castle-ink-dim); text-transform:uppercase; letter-spacing:.14em; font-size:10px; }
  .gd-meta .mrow span:last-child{ color:var(--castle-ink); text-align:right; }

  /* ---- Bestiary with lore panel ---- */
  .gd-bestiary-wrap{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:20px;
  }
  .gd-bestiary{
    display:flex; gap:14px; flex-wrap:wrap;
    padding:14px 16px; background:rgba(0,0,0,.24); border:1px solid var(--castle-line); border-radius:3px;
  }
  .gd-bestiary .bchip{
    display:flex; flex-direction:column; align-items:center; gap:6px; width:58px;
    cursor:pointer;
    transition:transform .2s ease, filter .2s ease;
  }
  .gd-bestiary .bchip:hover{
    transform:scale(1.1);
    filter:drop-shadow(0 0 8px var(--gd-accent, var(--gold)));
  }
  .gd-bestiary .bchip img{
    width:46px; height:46px; object-fit:contain;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
    transition:transform .2s ease;
  }
  .gd-bestiary .bchip:hover img{ transform:scale(1.15) rotate(-4deg); }
  .gd-bestiary .bchip span{
    font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:.06em;
    color:var(--castle-ink-dim); text-transform:uppercase; text-align:center;
  }
  .gd-bestiary-lore{
    padding:12px 16px;
    background:rgba(0,0,0,.35);
    border:1px solid var(--castle-line);
    border-radius:3px;
    min-height:44px;
    font-size:13px;
    line-height:1.5;
    color:var(--castle-ink);
    opacity:.85;
    transition:opacity .25s ease, border-color .25s ease;
  }
  .gd-bestiary-lore .lore-label{
    font-family:'Share Tech Mono',monospace;
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--castle-ink-dim);
    display:block;
    margin-bottom:2px;
  }
  .gd-bestiary-lore .lore-text{
    font-style:italic;
  }
  .gd-bestiary-lore.has-lore{
    border-color:var(--gd-accent, var(--gold));
    opacity:1;
  }

  /* ---- Description (opacity fixed) ---- */
  .gd-desc-wrapper{
    position:relative;
    max-height:180px;
    overflow-y:auto;
    margin-bottom:22px;
  }
  .gd-desc-wrapper.overflowing{
    mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
  }
  .gd-desc-wrapper::-webkit-scrollbar{
    width:3px;
  }
  .gd-desc-wrapper::-webkit-scrollbar-track{
    background:transparent;
  }
  .gd-desc-wrapper::-webkit-scrollbar-thumb{
    background:var(--gd-accent, var(--gold));
    border-radius:3px;
  }
  .gd-desc{
    font-size:14.5px;
    line-height:1.75;
    opacity:1;
    margin-bottom:0;
  }

  .gd-links{
    display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  }
  .gd-play{
    font-family:'Oswald',sans-serif; letter-spacing:.1em; font-size:12px; font-weight:600;
    text-transform:uppercase; text-decoration:none; color:var(--castle-bg);
    background:var(--gd-accent,var(--gold)); padding:12px 26px; border-radius:2px;
    clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
    transition:filter .2s ease, transform .15s ease; display:inline-block;
  }
  .gd-play:hover, .gd-play:focus-visible{ filter:brightness(1.15); transform:translateY(-2px); }
  .gd-play.disabled{
    background:transparent; color:var(--castle-ink-dim); border:1px solid var(--castle-line);
    cursor:default; pointer-events:none;
  }

  /* ---- LinkedIn button ---- */
  .gd-linkedin{
    font-family:'Oswald',sans-serif; letter-spacing:.1em; font-size:12px; font-weight:600;
    text-transform:uppercase; text-decoration:none;
    color:#fff;
    background:#0a66c2;
    padding:12px 26px; border-radius:2px;
    border:1px solid #0a66c2;
    clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
    transition:background .25s ease, transform .15s ease, box-shadow .25s ease, border-color .25s ease;
    display:inline-flex;
    align-items:center;
    gap:8px;
    box-shadow:0 0 20px rgba(10,102,194,.15);
  }
  .gd-linkedin:hover, .gd-linkedin:focus-visible{
    background:#0d7ae8;
    border-color:#0d7ae8;
    transform:translateY(-2px);
    box-shadow:0 0 30px rgba(10,102,194,.35);
  }
  .gd-linkedin:active{
    transform:scale(.95);
  }
  .gd-linkedin .li-icon{
    font-size:16px;
    transition:transform .2s ease;
  }
  .gd-linkedin:hover .li-icon{
    transform:scale(1.1);
  }

  /* ---- Corner brackets + scan-line for screenshots ---- */
  .gd-main-wrap .corner-brackets{
    position:absolute; inset:-1px; pointer-events:none; z-index:2;
    opacity:0;
    transition:opacity .4s ease;
  }
  .gd-main-wrap .corner-brackets::before,
  .gd-main-wrap .corner-brackets::after{
    content:''; position:absolute; width:18px; height:18px;
    border:1.5px solid var(--gd-accent, var(--gold));
    opacity:.85;
  }
  .gd-main-wrap .corner-brackets::before{
    top:2px; left:2px;
    border-right:none; border-bottom:none;
  }
  .gd-main-wrap .corner-brackets::after{
    bottom:2px; right:2px;
    border-left:none; border-top:none;
  }
  .gd-main-wrap.active-frame .corner-brackets{ opacity:1; }

  .gd-main-wrap .scan-line{
    position:absolute; inset:0; pointer-events:none; z-index:1;
    overflow:hidden;
    opacity:0;
    transition:opacity .6s ease;
  }
  .gd-main-wrap .scan-line::after{
    content:''; position:absolute; top:0; left:0; width:200%; height:2px;
    background:linear-gradient(90deg, transparent, var(--gd-accent, var(--gold)), transparent);
    opacity:.5;
    animation:scanSweep 4s linear infinite;
  }
  .gd-main-wrap.active-frame .scan-line{ opacity:1; }
  @keyframes scanSweep{
    0%{ top:0%; left:-100%; }
    100%{ top:100%; left:100%; }
  }

  /* ---- Numeral pulse ---- */
  .gd-numeral.pulse-once{
    animation:numeralPulseOnce .7s cubic-bezier(.2,.9,.3,1.2) forwards;
  }
  @keyframes numeralPulseOnce{
    0%{ opacity:.16; transform:scale(1); -webkit-text-stroke-color:var(--gd-accent, var(--gold)); }
    40%{ opacity:.45; transform:scale(1.08); -webkit-text-stroke-color:var(--gd-accent, var(--gold)); }
    100%{ opacity:.25; transform:scale(1); -webkit-text-stroke-color:var(--gd-accent, var(--gold)); }
  }
  .gd-numeral.glow-static{
    opacity:.25 !important;
  }

  /* ---- Play button arrow ---- */
  .gd-play .play-arrow{
    display:inline-block;
    transition:transform .25s cubic-bezier(.2,.9,.3,1.3);
    margin-left:6px;
    font-size:14px;
  }
  .gd-play:hover .play-arrow,
  .gd-play:focus-visible .play-arrow{
    transform:translateX(6px) scale(1.1);
  }
  .gd-play.disabled .play-arrow{ display:none; }

  /* ---- P5-style snap ---- */
  .game-entry.snap-active{
    transition:background 0.01s ease, transform 0.01s ease !important;
    background:var(--castle-crimson) !important;
  }

  /* ---- Castle entrance ---- */
  .castle-scene.castle-entering{
    animation:castleArrive .7s cubic-bezier(.2,.9,.3,1.2) forwards;
  }
  @keyframes castleArrive{
    0%{ opacity:0; transform:scale(1.08) rotate(-1.2deg); filter:brightness(1.6); }
    60%{ opacity:1; transform:scale(1) rotate(0deg); filter:brightness(1.1); }
    100%{ opacity:1; transform:scale(1) rotate(0deg); filter:brightness(1); }
  }

  /* ---- Sidebar dimming ---- */
  .castle-sidebar.dim-others .game-entry:not(.active){
    opacity:.35;
    transform:scale(.96) translateX(-4px);
    pointer-events:none;
    transition:opacity .35s cubic-bezier(.2,.8,.3,1.2),
               transform .35s cubic-bezier(.2,.8,.3,1.2);
  }
  .castle-sidebar.dim-others .game-entry.active{
    transition:opacity .35s cubic-bezier(.2,.8,.3,1.2),
               transform .35s cubic-bezier(.2,.8,.3,1.2);
  }

  @media (max-width:860px){
    .castle-frame{ flex-direction:column; overflow-y:auto; }
    .castle-sidebar{
      width:auto; flex-direction:row; overflow-x:auto; padding:16px; gap:10px;
      border-right:none; border-bottom:1px solid var(--castle-line);
    }
    .castle-sidebar-label{ display:none; }
    .game-entry{ margin-right:0; flex-shrink:0; }
    .castle-stage{ padding:26px 22px; }
    .gd-numeral{ font-size:96px; top:-20px; }
    .gd-body{ gap:26px; }
    .castle-sidebar.dim-others .game-entry.active{
      transform:scale(1.04);
    }
  }
  @media (max-width:640px){
    .castle-topbar{ padding:16px 18px; }
    .castle-title{ font-size:10px; }
    .gd-title{ font-size:24px; }
    .gd-numeral{ display:none; }
  }

  a:focus-visible, button:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; }

  @media (max-width:640px){
    .hud{ padding:18px 18px; }
    .hud-title{ font-size:16px; }
    .hud-title span{ font-size:9px; }
    .hud-player{ font-size:9px; }
    .featured-strip{
      top:108px; left:18px; right:18px; max-width:none;
      overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px;
      -webkit-overflow-scrolling:touch; scrollbar-width:none;
    }
    .featured-strip::-webkit-scrollbar{ display:none; }
    .featured-card{ width:72px; height:56px; flex-shrink:0; }
    .fc-label{ font-size:8.5px; padding:4px 6px; }
    .biome-label{ font-size:10px; }
    /* With every label visible at once, "Castle of Games" and "Farpoint
       Lighthouse" sit close enough on phones that their nowrap text
       collides (visible in testing). Let labels wrap to two short lines
       here - narrower per-label footprint - and nudge these two markers
       slightly further apart so there's real clearance either way. */
    .biome-label{ white-space:normal; max-width:92px; text-align:center; line-height:1.25; }
    .biome-marker[data-id="castle"]{ left:56% !important; }
    .biome-marker[data-id="lighthouse"]{ left:83% !important; }
    /* Reposition two landmarks that collide with other mobile-only UI at
       this breakpoint: "Site Seeing" (left:70%/top:24% on desktop) sits
       right in the featured-work strip's band once that strip reflows to
       full-width at top:108px on phones, and "The Glitchmire"
       (left:6%/top:86%) lands almost exactly on top of the bottom-left
       compass button. Neither collision exists on desktop, so only moved
       here. !important is needed to beat the inline left/top on the marker. */
    .biome-marker[data-id="siteseeing"]{ left:76% !important; top:36% !important; }
    .biome-marker[data-id="swamp"]{ left:14% !important; top:78% !important; }
    .biome-marker .icon-wrap svg{ width:46px; height:auto; }
    .panel-card{ padding:36px 26px; max-width:88vw; }
    .panel-card h2{ font-size:21px; }
    .panel-card p{ font-size:13px; }
    .compass-wrap{ left:18px; bottom:18px; }
    .compass{ width:34px;height:34px; }
    .compass-menu{ min-width:170px; font-size:11px; }
    .hint{ font-size:9px; bottom:14px; }
  }

  @media (prefers-reduced-motion: reduce){
    #world.zooming, #transitionOverlay.wipe, #destPanel, .panel-card{
      transition-duration:.25s !important;
    }
    .game-entry{ transition-duration:.001s !important; }
    .game-detail{ transition-duration:.001s !important; }
    .gd-main-wrap .scan-line{ display:none; }
  }

        /* ── reset & base ── */
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html,
        body {
            width: 100%;
            min-height: 100vh;
            min-height: calc(var(--vh, 1vh) * 100);
            min-height: 100svh;
            background: #0d0812;
            font-family: 'Spectral', serif;
            color: #f4ead9;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }
        :root {
            --dusk-dark: #0d0812;
            --dusk-purple: #1D1225;
            --dusk-mid: #2D1B36;
            --dusk-warm: #3D2238;
            --amber: #FFB300;
            --amber-soft: #FFE082;
            --amber-glow: rgba(255, 179, 0, .25);
            --wood-dark: #3D2A1C;
            --wood-mid: #5C3D2E;
            --wood-warm: #7A5240;
            --terracotta: #C85A32;
            --cream: #FAF6EE;
            --cream-warm: #F5EDE0;
            --shadow-soft: rgba(0, 0, 0, .4);
        }

        /* ── smooth scroll lock ── */
        .scroll-container {
            width: 100%;
            height: 100vh;
            height: calc(var(--vh, 1vh) * 100);
            height: 100svh;
            overflow-y: auto;
            overflow-x: hidden;
            scroll-behavior: smooth;
            position: relative;
        }

        /* ── Village Scene ── */
        .village-scene {
            position: absolute;
            inset: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            color: #f4ead9;
            font-family: 'Spectral', serif;
            overflow-y: auto;
            overflow-x: hidden;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .25s ease;
            background: var(--dusk-dark);
            z-index: 5;
            cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202L2%2011H5V21H10V15H14V21H19V11H22Z%22%20fill%3D%22%23ffb86b%22%20stroke%3D%22%232e2110%22%20stroke-width%3D%221.3%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") 12 11, auto;
        }

        /* ── Parallax Wrapper ── */
        .parallax-wrap {
            position: relative;
            flex: 1;
            width: 100%;
            height: 100vh;
            height: calc(var(--vh, 1vh) * 100);
            height: 100svh;
            overflow: hidden;
            isolation: isolate;
        }

        /* ── Layers ── */
        .layer {
            position: absolute;
            inset: 0;
            pointer-events: none;
            will-change: transform;
        }
        .layer-sky {
            z-index: 0;
            background: linear-gradient(180deg,
                    #0d0812 0%,
                    #1D1225 25%,
                    #2D1B36 50%,
                    #3D2238 72%,
                    #2D1B36 88%,
                    #1D1225 100%);
        }
        .layer-sky::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 55%;
            background: radial-gradient(ellipse at 50% 0%, rgba(255, 180, 110, .07), transparent 70%);
        }
        .layer-sky .moon {
            position: absolute;
            top: 7%;
            right: 10%;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: radial-gradient(circle at 32% 32%, #fffcf0, #f0e4c8 55%, #d4c8a8 100%);
            box-shadow: 0 0 60px 20px rgba(255, 230, 200, .12), 0 0 120px 50px rgba(255, 230, 200, .05);
            opacity: .75;
            animation: moonGlow 6s ease-in-out infinite alternate;
        }
        .layer-sky .moon::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: radial-gradient(circle at 55% 40%, rgba(200, 190, 170, .25), transparent 45%),
                radial-gradient(circle at 30% 70%, rgba(200, 190, 170, .15), transparent 35%);
        }
        @keyframes moonGlow {
            0% {
                box-shadow: 0 0 60px 20px rgba(255, 230, 200, .12), 0 0 120px 50px rgba(255, 230, 200, .05);
            }
            100% {
                box-shadow: 0 0 80px 30px rgba(255, 230, 200, .18), 0 0 140px 60px rgba(255, 230, 200, .08);
            }
        }

        /* Stars */
        .stars {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }
        .star {
            position: absolute;
            width: 2px;
            height: 2px;
            background: #fff;
            border-radius: 50%;
            opacity: .3;
            animation: villageTwinkle var(--dur, 3s) ease-in-out infinite alternate;
        }
        @keyframes villageTwinkle {
            0% {
                opacity: .1;
                transform: scale(.8);
            }
            100% {
                opacity: .6;
                transform: scale(1.2);
            }
        }

        /* Layer: Distant Hills */
        .layer-hills {
            z-index: 1;
            bottom: 0;
            height: 70%;
            top: auto;
        }
        .hills-silhouette {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            background:
                /* far hills */
                radial-gradient(ellipse 120% 40% at 10% 100%, rgba(45, 27, 54, .6), transparent 70%),
                radial-gradient(ellipse 140% 35% at 40% 100%, rgba(35, 20, 45, .5), transparent 65%),
                radial-gradient(ellipse 110% 45% at 70% 100%, rgba(50, 30, 55, .55), transparent 70%),
                radial-gradient(ellipse 130% 30% at 90% 100%, rgba(30, 18, 40, .5), transparent 60%);
            filter: blur(2px);
        }
        .hills-silhouette::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60%;
            background:
                /* mid hills - more defined */
                radial-gradient(ellipse 80% 30% at 5% 100%, rgba(30, 18, 38, .7), transparent 60%),
                radial-gradient(ellipse 90% 28% at 30% 100%, rgba(38, 22, 45, .65), transparent 55%),
                radial-gradient(ellipse 70% 32% at 55% 100%, rgba(28, 16, 36, .7), transparent 58%),
                radial-gradient(ellipse 85% 25% at 80% 100%, rgba(42, 26, 48, .6), transparent 55%),
                radial-gradient(ellipse 75% 30% at 95% 100%, rgba(32, 18, 40, .65), transparent 60%);
            filter: blur(1px);
        }
        .hills-silhouette::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 30%;
            background:
                /* near hills - sharp */
                radial-gradient(ellipse 60% 25% at 15% 100%, rgba(25, 14, 32, .8), transparent 55%),
                radial-gradient(ellipse 55% 28% at 45% 100%, rgba(30, 16, 35, .75), transparent 50%),
                radial-gradient(ellipse 65% 22% at 75% 100%, rgba(28, 14, 34, .8), transparent 55%);
            filter: blur(0.5px);
        }

        /* Layer: curved ground - a soft rolling horizon between the hills
           and the street so the scene has real terrain depth instead of a
           hard hill→street cut */
        .layer-ground {
            z-index: 1;
            bottom: 0;
            top: auto;
            height: 38%;
        }
        .layer-ground svg {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100%;
            display: block;
        }

        /* Layer: midground tree line - pine silhouettes tiling the horizon,
           sitting behind the houses for depth */
        .layer-trees-mid {
            z-index: 1;
            bottom: 0;
            top: auto;
            height: 22%;
            background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='150'%20viewBox='0%200%20140%20150'%3E%3Cpath%20d='M34%2038%20L50%2068%20L42%2068%20L60%2098%20L48%2098%20L68%20150%20L0%20150%20L20%2098%20L8%2098%20L26%2068%20L18%2068%20Z'%20fill='%23140c1c'%20opacity='.6'/%3E%3Cpath%20d='M104%2018%20L124%2054%20L114%2054%20L134%2090%20L120%2090%20L142%20150%20L66%20150%20L88%2090%20L74%2090%20L94%2054%20L84%2054%20Z'%20fill='%23190f24'%20opacity='.7'/%3E%3C/svg%3E");
            background-repeat: repeat-x;
            background-position: bottom left;
            background-size: 220px auto;
            filter: blur(.4px);
            opacity: .85;
        }

        /* Layer: drifting mist near ground level for atmosphere */
        .layer-mist {
            z-index: 2;
            bottom: 0;
            top: auto;
            height: 16%;
            background: linear-gradient(90deg,
                    transparent 0%,
                    rgba(220, 200, 220, .05) 20%,
                    rgba(220, 200, 220, .09) 45%,
                    rgba(220, 200, 220, .04) 70%,
                    transparent 100%);
            background-size: 200% 100%;
            animation: mistDrift 26s linear infinite;
            mix-blend-mode: screen;
        }
        @keyframes mistDrift {
            0% {
                background-position: 0% 0;
            }
            100% {
                background-position: -200% 0;
            }
        }

        /* Foreground framing trees - sit in front of the street at the
           screen edges like a vignette, closest "camera" layer */
        .trees-front {
            position: absolute;
            inset: 0;
            z-index: 4;
            pointer-events: none;
        }
        .tf-tree {
            position: absolute;
            bottom: -2%;
            filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .5));
            transform-origin: 50% 100%;
            animation: treeSway 7s ease-in-out infinite;
        }
        .tf-left {
            left: -3%;
            width: clamp(120px, 16vw, 240px);
            animation-delay: 0s;
        }
        .tf-right {
            right: -4%;
            width: clamp(140px, 19vw, 280px);
            animation-delay: -3.2s;
            transform: scaleX(-1);
        }
        @keyframes treeSway {
            0%,
            100% {
                transform: rotate(-0.6deg);
            }
            50% {
                transform: rotate(0.6deg);
            }
        }
        .tf-right {
            animation-name: treeSwayR;
        }
        @keyframes treeSwayR {
            0%,
            100% {
                transform: scaleX(-1) rotate(-0.6deg);
            }
            50% {
                transform: scaleX(-1) rotate(0.6deg);
            }
        }
        @media (max-width: 700px) {
            .tf-left,
            .tf-right {
                width: clamp(80px, 26vw, 150px);
                opacity: .8;
            }
        }

        /* Layer: Street (interactive) */
        .layer-street {
            z-index: 2;
            /* Natively scrollable so every house is reachable on any viewport
               width via touch swipe, trackpad, or click-drag - not just on
               desktop windows wide enough to fit the whole street at once. */
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-x;
            scrollbar-width: none;
            pointer-events: auto;
        }
        .layer-street::-webkit-scrollbar {
            display: none;
        }
        .street-track {
            display: flex;
            align-items: flex-end;
            justify-content: safe center;
            /* centered when it fits; falls back to reachable start-alignment
               when houses overflow, so scrollLeft:0 always shows the first
               house instead of clipping it off-screen to the left */
            min-height: 100%;
            padding: 0 clamp(20px, 8vw, 80px);
            gap: clamp(40px, 8vw, 100px);
            pointer-events: auto;
            position: relative;
        }
        /* ground path */
        .street-track::before {
            content: '';
            position: absolute;
            bottom: 8%;
            left: 0;
            right: 0;
            height: 12%;
            background:
                radial-gradient(ellipse at 20% 100%, rgba(90, 60, 40, .2), transparent 50%),
                radial-gradient(ellipse at 60% 100%, rgba(90, 60, 40, .15), transparent 45%),
                radial-gradient(ellipse at 90% 100%, rgba(90, 60, 40, .18), transparent 50%);
            border-radius: 50%;
            filter: blur(6px);
            pointer-events: none;
        }
        /* cobblestone hints */
        .street-track::after {
            content: '';
            position: absolute;
            bottom: 10%;
            left: 5%;
            right: 5%;
            height: 4%;
            background:
                repeating-linear-gradient(90deg,
                    transparent 0px,
                    rgba(120, 90, 70, .08) 2px,
                    transparent 6px,
                    rgba(120, 90, 70, .05) 8px,
                    transparent 14px);
            border-radius: 50%;
            filter: blur(1px);
            pointer-events: none;
        }

        /* ── House Marker ── */
        .house-marker {
            position: relative;
            flex-shrink: 0;
            z-index: 3;
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 0 4px 16px;
            width: 180px;
            pointer-events: auto;
            transition: transform .35s cubic-bezier(.3, .6, .4, 1.8);
            outline: 2px solid transparent;
            border-radius: 6px;
            will-change: transform;
            touch-action: manipulation;
        }
        .house-marker:hover {
            transform: translateY(-8px) scale(1.02);
        }
        .house-marker:active {
            transform: scale(.95) translateY(-4px);
        }
        .house-marker:focus-visible {
            outline-color: var(--amber);
            outline-offset: 6px;
        }

        .house-svg-wrap {
            position: relative;
            width: 100%;
            aspect-ratio: 54 / 50;
            filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .4));
            transition: filter .4s ease;
        }
        .house-marker:hover .house-svg-wrap {
            filter: drop-shadow(0 10px 36px rgba(255, 179, 0, .12));
        }

        .house-svg-wrap svg {
            display: block;
            width: 100%;
            height: 100%;
            transition: transform .4s ease;
        }
        .house-marker:hover .house-svg-wrap svg {
            transform: scale(1.03);
        }

        /* house interactive parts */
        .hm-door {
            transform-origin: left center;
            transition: transform .5s cubic-bezier(.2, .9, .3, 1.3);
        }
        .house-marker:hover .hm-door {
            transform: scaleX(0.2);
        }
        .hm-door-glow {
            opacity: 0;
            transition: opacity .5s ease;
        }
        .house-marker:hover .hm-door-glow {
            opacity: 1;
        }

        .hm-window {
            transition: opacity .5s ease, fill .5s ease;
            opacity: .35;
        }
        .hm-window.lit {
            opacity: .85;
            fill: #FFE082;
        }
        .house-marker:hover .hm-window {
            opacity: .95;
            fill: #FFE082;
        }
        .hm-window-glow {
            opacity: 0;
            transition: opacity .6s ease;
        }
        .house-marker:hover .hm-window-glow {
            opacity: 1;
        }

        .hm-chimney {
            transform-origin: 50% 0%;
            transition: transform .4s ease;
        }
        .house-marker:hover .hm-chimney {
            transform: scale(1.06);
        }

        .hm-smoke {
            opacity: 0;
            transition: opacity .4s ease;
            transform-origin: 50% 100%;
        }
        .house-marker:hover .hm-smoke {
            opacity: 1;
            animation: smokeDrift 2.4s ease-out forwards;
        }
        @keyframes smokeDrift {
            0% {
                transform: translateY(0) scale(.6) translateX(0);
                opacity: .5;
            }
            40% {
                opacity: .7;
            }
            100% {
                transform: translateY(-28px) scale(1.5) translateX(8px);
                opacity: 0;
            }
        }

        /* status badge removed - no more Complete / In Progress text */

        .hm-read {
            position: absolute;
            bottom: 24%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 7px;
            opacity: 0;
            transition: opacity .5s ease;
            color: var(--amber-soft);
            text-shadow: 0 0 16px rgba(255, 179, 0, .3);
            font-family: 'Share Tech Mono', monospace;
            letter-spacing: .08em;
            pointer-events: none;
        }
        .house-marker.read .hm-read {
            opacity: 1;
        }

        .hm-label {
            font-family: 'Oswald', sans-serif;
            font-weight: 600;
            font-size: 13px;
            letter-spacing: .04em;
            text-transform: uppercase;
            text-align: center;
            line-height: 1.25;
            color: #f4ead9;
            text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
            margin-top: 4px;
        }
        .hm-sub {
            font-family: 'Share Tech Mono', monospace;
            font-size: 9.5px;
            letter-spacing: .06em;
            color: rgba(244, 234, 217, .45);
            text-align: center;
        }

        /* ── String Lights ── */
        .string-lights {
            position: absolute;
            top: 6%;
            left: 4%;
            right: 4%;
            height: 2px;
            pointer-events: none;
            z-index: 4;
            opacity: .7;
        }
        .string-lights .wire {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: repeating-linear-gradient(90deg,
                    rgba(180, 140, 100, .15) 0 2px,
                    transparent 2px 18px);
            filter: blur(0.3px);
        }
        .string-lights .bulb {
            position: absolute;
            top: -4px;
            width: 6px;
            height: 8px;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            background: radial-gradient(circle at 40% 30%, #fff8e0, #ffb300);
            box-shadow: 0 0 12px 4px rgba(255, 179, 0, .15);
            animation: bulbFlicker var(--dur, 2.4s) ease-in-out infinite alternate;
            transform-origin: 50% 0%;
        }
        .string-lights .bulb::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            width: 1px;
            height: 6px;
            background: rgba(180, 140, 100, .2);
        }
        @keyframes bulbFlicker {
            0% {
                opacity: .6;
                transform: scale(.9) rotate(-2deg);
                box-shadow: 0 0 8px 2px rgba(255, 179, 0, .1);
            }
            40% {
                opacity: 1;
                transform: scale(1.05) rotate(1deg);
                box-shadow: 0 0 20px 8px rgba(255, 179, 0, .25);
            }
            70% {
                opacity: .85;
                transform: scale(.95) rotate(-1deg);
                box-shadow: 0 0 12px 4px rgba(255, 179, 0, .15);
            }
            100% {
                opacity: 1;
                transform: scale(1) rotate(0deg);
                box-shadow: 0 0 18px 6px rgba(255, 179, 0, .2);
            }
        }

        /* ── Canvas: Fireflies ── */
        #firefliesCanvas {
            position: absolute;
            inset: 0;
            z-index: 5;
            pointer-events: none;
            width: 100%;
            height: 100%;
            display: block;
        }

        /* ── Top Bar ── */
        .village-topbar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 28px;
            background: linear-gradient(180deg, rgba(13, 8, 18, .7), transparent);
            backdrop-filter: blur(6px);
            pointer-events: none;
        }
        .village-topbar>* {
            pointer-events: auto;
        }
        .village-title {
            font-family: 'Cinzel', serif;
            letter-spacing: .22em;
            font-size: 12px;
            color: rgba(244, 234, 217, .6);
            text-transform: uppercase;
        }
        .village-title strong {
            color: var(--amber-soft);
        }
        .village-return {
            font-family: 'Oswald', sans-serif;
            letter-spacing: .1em;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            color: rgba(244, 234, 217, .7);
            background: transparent;
            border: 1px solid rgba(244, 234, 217, .15);
            border-radius: 2px;
            padding: 8px 16px;
            cursor: pointer;
            transition: all .25s ease;
        }
        .village-return:hover {
            color: #1D1225;
            background: var(--amber-soft);
            border-color: var(--amber-soft);
            transform: translateY(-1px);
        }

        .village-intro {
            position: absolute;
            top: clamp(90px, 30%, 240px);
            left: 50%;
            transform: translateX(-50%);
            z-index: 6;
            text-align: center;
            padding: 18px 28px 22px;
            pointer-events: none;
            width: 100%;
            max-width: 560px;
            transition: opacity .6s ease, transform .6s ease;
        }
        .village-intro::before {
            content: '';
            position: absolute;
            inset: -10px -40px;
            background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(13, 8, 18, .38), transparent 75%);
            z-index: -1;
            filter: blur(2px);
        }
        .village-intro.faded {
            opacity: 0;
            transform: translateX(-50%) translateY(-14px);
        }
        .vi-eyebrow {
            font-family: 'Share Tech Mono', monospace;
            font-size: 10px;
            letter-spacing: .28em;
            text-transform: uppercase;
            color: var(--amber-soft);
            margin-bottom: 4px;
            opacity: .7;
        }
        .village-intro p {
            font-style: italic;
            color: rgba(244, 234, 217, .55);
            font-size: 13px;
            line-height: 1.7;
            text-shadow: 0 2px 20px rgba(0, 0, 0, .8);
        }

        /* ── Scroll hint ── */
        .scroll-hint {
            position: absolute;
            bottom: clamp(20px, 4%, 48px);
            left: 50%;
            transform: translateX(-50%);
            z-index: 6;
            font-family: 'Share Tech Mono', monospace;
            font-size: 9px;
            letter-spacing: .15em;
            color: rgba(244, 234, 217, .2);
            animation: hintPulse 2.8s ease-in-out infinite;
            pointer-events: none;
            white-space: nowrap;
        }
        @keyframes hintPulse {
            0%,
            100% {
                opacity: .2;
                transform: translateX(-50%) translateY(0);
            }
            50% {
                opacity: .5;
                transform: translateX(-50%) translateY(-4px);
            }
        }

        /* ── responsive houses ── */
        @media (max-width: 860px) {
            .house-marker {
                width: 140px;
                padding-bottom: 10px;
            }
            .hm-label {
                font-size: 11px;
            }
            .hm-sub {
                font-size: 8px;
            }
            .street-track {
                gap: clamp(20px, 5vw, 50px);
                padding: 0 clamp(10px, 4vw, 40px);
            }
            .village-topbar {
                padding: 14px 18px;
            }
            .village-title {
                font-size: 10px;
            }
            .village-return {
                font-size: 9px;
                padding: 6px 12px;
            }
            .string-lights .bulb {
                width: 4px;
                height: 6px;
            }
            .village-intro p {
                font-size: 11px;
            }
        }
        @media (max-width: 540px) {
            .house-marker {
                width: 110px;
                padding-bottom: 6px;
            }
            .hm-label {
                font-size: 9px;
            }
            .hm-sub {
                font-size: 7px;
            }
            .hm-read {
                font-size: 5px;
                bottom: 20%;
            }
            .street-track {
                gap: 14px;
                padding: 0 8px;
            }
            .village-topbar {
                padding: 10px 14px;
            }
            .village-title {
                font-size: 8px;
                letter-spacing: .14em;
            }
            .village-return {
                font-size: 8px;
                padding: 4px 10px;
            }
            .village-intro {
                top: clamp(78px, 22%, 160px);
                padding: 14px 12px 18px;
                max-width: 90%;
            }
            .village-intro p {
                font-size: 10px;
                line-height: 1.5;
            }
            .vi-eyebrow {
                font-size: 8px;
            }
            .scroll-hint {
                font-size: 7px;
                bottom: 2%;
            }
            .string-lights .bulb {
                width: 3px;
                height: 5px;
            }
            .string-lights {
                top: 4%;
            }
        }

        /* ============================================================
           DEVLOG OVERLAY
           ============================================================ */
        .devlog-overlay {
            position: fixed;
            inset: 0;
            z-index: 200;
            background: var(--cream);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .45s ease, transform .55s cubic-bezier(.2, .9, .3, 1.2), filter .4s ease;
            transform: scale(.92) rotate(-.5deg);
            filter: blur(6px);
            overflow-y: auto;
            cursor: default;
            color: #2a1f1a;
        }
        .devlog-overlay.show {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: scale(1) rotate(0deg);
            filter: blur(0);
        }

        .devlog-progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--amber), var(--amber-soft));
            width: 0%;
            z-index: 12;
            transition: width .08s linear;
            box-shadow: 0 0 24px rgba(255, 179, 0, .2);
        }

        /* ── Hero band: full-bleed, per-project accent wash with a
           watermarked house icon - this is the "wow" first impression ── */
        .da-hero {
            --accent: #FFB300;
            position: relative;
            width: 100vw;
            margin-left: calc(-50vw + 50%);
            margin-right: calc(-50vw + 50%);
            margin-top: -70px;
            margin-bottom: 46px;
            padding: 104px max(30px, calc(50% - 360px)) 52px;
            background:
                radial-gradient(ellipse 60% 90% at 12% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 68%),
                linear-gradient(180deg, rgba(26, 18, 22, .025), transparent 60%);
            overflow: hidden;
            border-bottom: 1px solid rgba(26, 18, 22, .07);
        }
        .da-hero-icon {
            position: absolute;
            top: -10px;
            right: max(-10px, calc(50% - 380px));
            width: clamp(140px, 20vw, 220px);
            opacity: .1;
            transform: rotate(4deg);
            pointer-events: none;
        }
        .da-hero-icon svg {
            width: 100%;
            height: auto;
            display: block;
            filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .1));
        }
        .da-hero-icon svg [class*="hm-window"],
        .da-hero-icon svg [class*="hm-door"] {
            fill: var(--accent) !important;
        }
        .da-hero>.da-eyebrow,
        .da-hero>.da-title,
        .da-hero>.da-sub,
        .da-hero>.da-meta,
        .da-hero>.da-tags {
            position: relative;
            z-index: 1;
        }
        .da-hero .da-eyebrow::before {
            content: '';
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--accent);
            margin-right: 8px;
            box-shadow: 0 0 10px 2px color-mix(in srgb, var(--accent) 60%, transparent);
            vertical-align: middle;
        }
        .da-hero .da-tags {
            margin-bottom: 0;
        }
        .da-hero .da-tag {
            border-color: color-mix(in srgb, var(--accent) 35%, transparent);
            background: color-mix(in srgb, var(--accent) 10%, transparent);
        }

        /* ── Scroll-reveal: sections quietly rise into place as they enter
           view instead of just being "there" ── */
        .da-section,
        .da-links {
            opacity: 0;
            transform: translateY(22px);
            transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
        }
        .da-section.in-view,
        .da-links.in-view {
            opacity: 1;
            transform: translateY(0);
        }

        /* ── Drop cap on the opening pitch - makes the panel feel like a
           real piece of writing, not a form dump ── */
        .da-section .hook::first-letter {
            font-family: 'Cinzel', serif;
            font-size: 2.6em;
            font-weight: 700;
            float: left;
            line-height: .8;
            padding: 4px 8px 0 0;
            color: var(--terracotta);
        }

        /* ── Ornamental divider used between major sections ── */
        .da-ornament {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin: 40px 0;
            color: rgba(26, 18, 22, .25);
            opacity: 0;
            transform: translateY(14px);
            transition: opacity .7s ease, transform .7s ease;
        }
        .da-ornament.in-view {
            opacity: 1;
            transform: translateY(0);
        }
        .da-ornament::before,
        .da-ornament::after {
            content: '';
            width: 44px;
            height: 1px;
            background: currentColor;
        }
        .da-ornament span {
            font-size: 11px;
            transform: rotate(45deg);
        }

        .devlog-close {
            position: fixed;
            top: 20px;
            right: 24px;
            z-index: 12;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: rgba(26, 18, 22, .08);
            border: 1px solid rgba(26, 18, 22, .12);
            color: #2a1f1a;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .25s ease;
            backdrop-filter: blur(4px);
            font-family: 'Spectral', serif;
        }
        .devlog-close:hover {
            background: var(--amber);
            color: #1D1225;
            border-color: var(--amber);
            transform: rotate(90deg);
        }
        .devlog-close:active {
            transform: scale(.9) rotate(90deg);
        }

        .devlog-nav {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            z-index: 12;
            background: rgba(26, 18, 22, .06);
            border: 1px solid rgba(26, 18, 22, .08);
            border-radius: 50%;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 18px;
            color: #2a1f1a;
            transition: all .25s ease;
            backdrop-filter: blur(4px);
            font-family: 'Spectral', serif;
            touch-action: manipulation;
        }
        .devlog-nav:hover {
            background: var(--amber);
            border-color: var(--amber);
            color: #1D1225;
        }
        .devlog-nav:active {
            transform: translateY(-50%) scale(.92);
        }
        .devlog-nav.prev {
            left: 16px;
        }
        .devlog-nav.next {
            right: 16px;
        }
        @media (max-width: 640px) {
            .devlog-nav {
                width: 34px;
                height: 34px;
                font-size: 14px;
            }
            .devlog-nav.prev {
                left: 8px;
            }
            .devlog-nav.next {
                right: 8px;
            }
            .devlog-close {
                top: 14px;
                right: 14px;
                width: 34px;
                height: 34px;
                font-size: 14px;
            }
        }

        .devlog-article {
            max-width: 780px;
            margin: 0 auto;
            padding: 70px 30px 100px;
            color: #2a1f1a;
            font-family: 'Spectral', serif;
            background: var(--cream);
            min-height: 100vh;
        }
        .da-eyebrow {
            font-family: 'Share Tech Mono', monospace;
            font-size: 11px;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--terracotta);
            margin-bottom: 8px;
        }
        .da-title {
            font-family: 'Cinzel', serif;
            font-weight: 700;
            font-size: clamp(28px, 4vw, 42px);
            margin-bottom: 6px;
            line-height: 1.15;
            color: #1D1225;
        }
        .da-sub {
            font-size: 16px;
            color: rgba(26, 18, 22, .5);
            font-weight: 400;
            margin-bottom: 16px;
            font-style: italic;
        }
        .da-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 12px 20px;
            margin-bottom: 28px;
            font-family: 'Share Tech Mono', monospace;
            font-size: 11px;
            color: rgba(26, 18, 22, .45);
            border-bottom: 1px solid rgba(26, 18, 22, .08);
            padding-bottom: 18px;
        }
        .da-meta span {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .da-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 28px;
        }
        .da-tag {
            font-family: 'Share Tech Mono', monospace;
            font-size: 10px;
            letter-spacing: .04em;
            padding: 4px 12px;
            border-radius: 2px;
            background: rgba(200, 90, 50, .08);
            border: 1px solid rgba(200, 90, 50, .15);
            color: #5C3D2E;
        }

        .da-section {
            margin-bottom: 34px;
        }
        .da-section h3 {
            font-family: 'Oswald', sans-serif;
            font-weight: 600;
            font-size: 13px;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--terracotta);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .da-section h3::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(200, 90, 50, .15);
        }
        .da-section p {
            font-size: 15.5px;
            line-height: 1.8;
            color: rgba(26, 18, 22, .88);
            margin-bottom: 10px;
        }
        .da-section p:last-child {
            margin-bottom: 0;
        }
        .da-section .hook {
            font-size: 17px;
            font-style: italic;
            color: rgba(26, 18, 22, .7);
            border-left: 3px solid var(--amber);
            padding-left: 18px;
        }

        .da-list {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 6px 20px;
        }
        .da-list li {
            font-size: 13.5px;
            color: rgba(26, 18, 22, .82);
            line-height: 1.5;
            padding-left: 18px;
            position: relative;
        }
        .da-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--amber);
        }

        .da-tech {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .da-tech span {
            font-family: 'Share Tech Mono', monospace;
            font-size: 11px;
            padding: 5px 14px;
            border-radius: 2px;
            color: #2a1f1a;
            background: rgba(26, 18, 22, .06);
            border: 1px solid rgba(26, 18, 22, .08);
        }

        .da-gallery {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .da-shot-wrap {
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid rgba(26, 18, 22, .08);
            background: #f5ede0;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 120px;
            max-height: 500px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
            transition: box-shadow .35s ease, transform .35s ease;
        }
        .da-shot-wrap:hover {
            box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
            transform: translateY(-3px);
        }
        .da-shot-wrap img {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 500px;
            object-fit: contain;
            transition: transform .5s ease;
        }
        .da-shot-wrap:hover img {
            transform: scale(1.025);
        }
        .da-shot-cap {
            font-family: 'Share Tech Mono', monospace;
            font-size: 10.5px;
            color: rgba(26, 18, 22, .4);
            text-align: center;
            margin-top: -2px;
        }

        .da-links {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            margin-top: 10px;
        }
        .da-github {
            font-family: 'Oswald', sans-serif;
            letter-spacing: .08em;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 24px;
            border-radius: 2px;
            transition: all .2s ease;
        }
        .da-github.live {
            background: var(--amber);
            color: #1D1225;
        }
        .da-github.live:hover {
            filter: brightness(1.08);
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(255, 179, 0, .2);
        }
        .da-github.pending {
            background: transparent;
            color: rgba(26, 18, 22, .35);
            border: 1px dashed rgba(26, 18, 22, .2);
            cursor: default;
            pointer-events: none;
        }

        /* ── "Back to Village" button - fixed to viewport, outside the overlay ── */
        .devlog-back {
            position: fixed;
            bottom: 28px;
            left: 50%;
            transform: translateX(-50%) translateY(0);
            z-index: 210;
            font-family: 'Oswald', sans-serif;
            letter-spacing: .08em;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            color: rgba(26, 18, 22, .5);
            background: rgba(26, 18, 22, .04);
            border: 1px solid rgba(26, 18, 22, .08);
            border-radius: 40px;
            padding: 10px 28px;
            cursor: pointer;
            transition: all .25s ease;
            backdrop-filter: blur(8px);
            opacity: 0;
            pointer-events: none;
            visibility: hidden;
            will-change: transform, opacity;
            white-space: nowrap;
        }
        .devlog-back.visible {
            opacity: 1;
            pointer-events: auto;
            visibility: visible;
        }
        .devlog-back:hover {
            color: #1D1225;
            background: rgba(255, 179, 0, .12);
            border-color: var(--amber);
            transform: translateX(-50%) translateY(-2px);
        }
        .devlog-back:active {
            transform: translateX(-50%) scale(.96);
        }
        @media (max-width: 640px) {
            .devlog-back {
                bottom: 18px;
                padding: 8px 18px;
                font-size: 9px;
            }
        }

        @media (max-width: 640px) {
            .devlog-article {
                padding: 60px 18px 90px;
            }
            .da-section p {
                font-size: 14px;
            }
            .da-section .hook {
                font-size: 15px;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            /* Narrow, deliberate exceptions only - never a blanket `*` rule.
               A blanket `*,*::before,*::after{ animation-duration:.001s!important }`
               rule used to live here and silently clamped every animation on
               the ENTIRE page (not just Village's own) whenever a visitor had
               this OS preference on - it broke the overworld's entrance fade,
               cloud drift, bird flight, and Castle's ambient effects all at
               once, since `*` matches every element site-wide, not just
               elements inside the Village scene. This is the same class of
               landmine documented earlier in this project's history. Village's
               own animated elements are all ambient loops, individually
               listed and disabled below - that's sufficient on its own. */
            .house-marker:hover .hm-door {
                transform: none !important;
            }
            .hm-smoke {
                animation: none !important;
            }
            .house-marker:hover .hm-smoke {
                opacity: 0 !important;
            }
            .string-lights .bulb {
                animation: none !important;
            }
            .star {
                animation: none !important;
            }
            .layer-sky .moon {
                animation: none !important;
            }
        }

#destPanel.show.village-mode .village-scene{ opacity:1; visibility:visible; pointer-events:auto; }
#destPanel.show.siteseeing-mode .siteseeing-scene{ opacity:1; visibility:visible; pointer-events:auto; }
#destPanel.show.village-mode .panel-card{ display:none; }

    <style>
        /* ---------- RESET / BASE ---------- */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #1f1509;
            font-family: 'Spectral', serif;
        }

        /* ---------- FOREST SCENE ---------- */
        .forest-scene {
            position: fixed;
            inset: 0;
            z-index: 120;
            display: none;
            align-items: center;
            justify-content: center;
            background: #2d1f0e;
            overflow: hidden;
            font-family: 'Spectral', serif;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.6s ease;
        
            cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%2021L3%2017L17%203L21%207L7%2021Z%22%20fill%3D%22%238ee08a%22%20stroke%3D%22%23173a1c%22%20stroke-width%3D%221.3%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M17%203L21%207%22%20stroke%3D%22%23173a1c%22%20stroke-width%3D%221%22/%3E%3C/svg%3E") 12 12, auto;
        }
        .forest-scene.visible {
            pointer-events: auto;
            opacity: 1;
        }
        .forest-scene .wood-bg {
            position: absolute;
            inset: 0;
            background:
                repeating-linear-gradient(90deg, rgba(60, 40, 20, 0.15) 0px, rgba(60, 40, 20, 0.15) 2px, transparent 2px, transparent 8px),
                repeating-linear-gradient(0deg, rgba(40, 25, 10, 0.10) 0px, rgba(40, 25, 10, 0.10) 1px, transparent 1px, transparent 12px),
                radial-gradient(ellipse at 30% 40%, #3d2b17, #1f1509);
            pointer-events: none;
        }
        /* ---------- ACCESSIBILITY UTILITIES ---------- */
        .forest-scene .visually-hidden {
            position: absolute !important;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        /* ---------- AMBIENT FIREFLIES ---------- */
        .forest-scene .firefly {
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #d9c27a;
            box-shadow: 0 0 8px 2px rgba(217, 194, 122, 0.7), 0 0 18px 6px rgba(217, 194, 122, 0.25);
            pointer-events: none;
            z-index: 1;
            opacity: 0;
            animation: fireflyDrift linear infinite, fireflyGlow ease-in-out infinite;
        }
        @keyframes fireflyDrift {
            0% { transform: translate(0, 0); }
            25% { transform: translate(30px, -22px); }
            50% { transform: translate(-14px, -40px); }
            75% { transform: translate(-34px, -10px); }
            100% { transform: translate(0, 0); }
        }
        @keyframes fireflyGlow {
            0%, 100% { opacity: 0; }
            50% { opacity: 0.85; }
        }
        @media (prefers-reduced-motion: reduce) {
            .forest-scene .firefly {
                animation: fireflyGlow 4s ease-in-out infinite;
            }
        }

        /* ---------- BOOK WRAPPER ---------- */
        .forest-scene .book-wrapper {
            position: relative;
            width: 90vw;
            max-width: 1100px;
            height: 78vh;
            max-height: 700px;
            perspective: 1800px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }

        /* ---------- BOOK (3D container) ---------- */
        .forest-scene .book {
            position: relative;
            width: 100%;
            height: calc(100% - 3.6rem);
            transform-style: preserve-3d;
            transform: rotateY(0deg);
            transition: transform 0.6s ease;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 2px #5a3d20, 0 0 0 4px #3d2b17;
            border-radius: 4px 12px 12px 4px;
            background: #f4ede4;
            flex-shrink: 0;
        }
        .forest-scene .book.cover-closed {
            transform: rotateY(0deg) scale(0.98);
        }
        .forest-scene .book.cover-open {
            transform: rotateY(0deg) scale(1);
        }

        /* ---------- COVER ---------- */
        .forest-scene .book-cover {
            position: absolute;
            inset: 0;
            z-index: 50;
            background: linear-gradient(145deg, #2d5a27, #1a3a15);
            border-radius: 4px 12px 12px 4px;
            transform-style: preserve-3d;
            transform-origin: left center;
            transition: transform 0.9s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.6s ease;
            will-change: transform, opacity;
            box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4), 0 4px 20px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            border-right: 3px solid #c9a86a;
        }
        .forest-scene .book-cover .cover-title {
            font-family: 'Cinzel', serif;
            font-size: clamp(1.4rem, 4vw, 3.2rem);
            color: #e8d5b0;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
            letter-spacing: 4px;
            text-align: center;
            padding: 0 1rem;
            transform: translateZ(20px);
        }
        .forest-scene .book-cover .cover-title small {
            display: block;
            font-size: 0.35em;
            letter-spacing: 6px;
            opacity: 0.7;
            margin-top: 0.5rem;
            font-family: 'Spectral', serif;
            font-style: italic;
        }
        .forest-scene .book-cover .cover-ornament {
            margin-top: 1rem;
            font-size: clamp(1.8rem, 3vw, 3.5rem);
            opacity: 0.5;
            transform: translateZ(15px);
            color: #c9a86a;
        }
        .forest-scene .book.cover-open .book-cover {
            transform: perspective(1800px) rotateY(-170deg) translateX(-10px);
            opacity: 0;
            pointer-events: none;
            transition: transform 1s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.5s ease 0.3s;
        }

        /* ---------- SPREAD (one per chapter) ---------- */
        .forest-scene .spread {
            position: absolute;
            inset: 0;
            display: flex;
            transform-style: preserve-3d;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s;
            border-radius: 4px 12px 12px 4px;
            overflow: hidden;
        }
        .forest-scene .spread.active {
            opacity: 1;
            visibility: visible;
            z-index: 10;
        }
        .forest-scene .spread.leaving {
            opacity: 0;
            visibility: hidden;
            z-index: 5;
            transition: opacity 0.5s ease, visibility 0.5s;
        }

        /* ---------- GUTTER SHADOW (spine) ---------- */
        .forest-scene .spread::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 6px;
            height: 100%;
            transform: translateX(-50%);
            z-index: 2;
            background: linear-gradient(to right, rgba(0, 0, 0, 0.06) 0%, transparent 40%, transparent 60%, rgba(0, 0, 0, 0.06) 100%);
            pointer-events: none;
        }

        /* ---------- LEFT PAGE ---------- */
        .forest-scene .page-left {
            flex: 0 0 50%;
            height: 100%;
            background: #f4ede4;
            background-image:
                radial-gradient(ellipse at 20% 30%, rgba(200, 180, 155, 0.2) 0%, transparent 70%),
                repeating-linear-gradient(45deg, rgba(180, 160, 130, 0.03) 0px, rgba(180, 160, 130, 0.03) 2px, transparent 2px, transparent 8px);
            padding: 1.5rem 1rem 1.5rem 1.8rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            border-right: 2px solid #d4c5b0;
            box-shadow: inset -4px 0 12px rgba(0, 0, 0, 0.04);
            overflow: hidden;
        }
        .forest-scene .page-left .illustration-wrap {
            width: 100%;
            height: 80%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem;
        }
        .forest-scene .page-left .illustration-wrap svg {
            width: 100%;
            height: 100%;
            max-width: 400px;
            max-height: 400px;
            filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.06));
        }
        .forest-scene .page-left .chapter-number {
            font-family: 'Cinzel', serif;
            font-size: 0.7rem;
            color: #b8a48a;
            letter-spacing: 4px;
            margin-top: 0.4rem;
            opacity: 0.4;
            border-top: 1px solid rgba(180, 160, 130, 0.2);
            padding-top: 0.4rem;
        }

        /* ---------- RIGHT PAGE ---------- */
        .forest-scene .page-right {
            flex: 0 0 50%;
            height: 100%;
            background: #f4ede4;
            background-image:
                radial-gradient(ellipse at 80% 30%, rgba(200, 180, 155, 0.15) 0%, transparent 70%),
                repeating-linear-gradient(-45deg, rgba(180, 160, 130, 0.03) 0px, rgba(180, 160, 130, 0.03) 2px, transparent 2px, transparent 8px);
            padding: 1.8rem 1.8rem 1.8rem 1.5rem;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow-y: auto;
            border-left: 2px solid #d4c5b0;
            box-shadow: inset 4px 0 12px rgba(0, 0, 0, 0.04);
        }
        .forest-scene .page-right .chapter-title {
            font-family: 'Cinzel', serif;
            font-size: clamp(1.2rem, 2.2vw, 1.8rem);
            color: #3d2b17;
            margin-bottom: 0.6rem;
            letter-spacing: 1px;
            border-bottom: 2px solid rgba(180, 160, 130, 0.3);
            padding-bottom: 0.4rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
            flex-shrink: 0;
        }
        .forest-scene .page-right .chapter-title .chapter-badge {
            font-size: 0.55rem;
            font-family: 'Spectral', serif;
            background: #c9a86a;
            color: #f4ede4;
            padding: 0.1rem 0.6rem;
            border-radius: 20px;
            letter-spacing: 1px;
            opacity: 0.7;
            font-weight: 400;
        }
        .forest-scene .page-right .chapter-text {
            font-family: 'Spectral', serif;
            font-size: clamp(0.85rem, 1.25vw, 1.05rem);
            line-height: 1.7;
            color: #3d2b17;
            flex: 1;
            overflow-y: auto;
            padding-right: 4px;
            margin-top: 0.2rem;
            position: relative;
            max-width: 62ch;
        }
        .forest-scene .page-right .chapter-text p {
            margin: 0 0 0.6rem 0;
            text-indent: 1.2em;
        }
        .forest-scene .page-right .chapter-text p:first-of-type::first-letter {
            font-family: 'Cinzel', serif;
            font-size: 2.6em;
            font-weight: 600;
            float: left;
            line-height: 0.8;
            margin: 0.05em 0.12em 0 0;
            color: #2d5a27;
        }
        .forest-scene .page-right .chapter-text p:first-of-type {
            margin-top: 0;
            text-indent: 0;
        }
        .forest-scene .page-right .chapter-text p:last-of-type {
            margin-bottom: 0;
        }

        /* ----- Ricochet link ----- */
        .forest-scene .page-right .ricochet-link {
            display: inline-block;
            margin-top: 0.6rem;
            font-family: 'Cinzel', serif;
            font-size: 0.75rem;
            color: #2d5a27;
            text-decoration: none;
            border: 1px solid #2d5a27;
            padding: 0.3rem 1rem;
            border-radius: 30px;
            transition: all 0.25s ease;
            letter-spacing: 0.5px;
            cursor: pointer;
            background: rgba(45, 90, 39, 0.06);
        }
        .forest-scene .page-right .ricochet-link:hover {
            background: #2d5a27;
            color: #f4ede4;
            box-shadow: 0 2px 12px rgba(45, 90, 39, 0.25);
            transform: translateY(-1px);
        }
        .forest-scene .page-right .ricochet-link::after {
            content: ' →';
            font-size: 1.1em;
        }

        /* ----- Finale: "still being written" cue ----- */
        .forest-scene .page-right .chapter-text .continues-cue {
            display: block;
            margin-top: 1rem;
            font-family: 'Nothing You Could Do', cursive;
            font-size: 0.9rem;
            color: #8a7a66;
            text-align: right;
            opacity: 0.6;
            letter-spacing: 1px;
            position: relative;
        }
        .forest-scene .page-right .chapter-text .continues-cue .trail {
            display: inline-block;
            font-size: 1.4rem;
            letter-spacing: 4px;
            color: #b8a48a;
            animation: fadeTrail 3s ease-in-out infinite alternate;
        }
        @keyframes fadeTrail {
            0% {
                opacity: 0.3;
                transform: translateX(0);
            }
            100% {
                opacity: 0.8;
                transform: translateX(6px);
            }
        }

        /* ----- Role stamps ----- */
        .forest-scene .page-right .role-stamps {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem 0.6rem;
            margin-top: 1rem;
            padding-top: 0.8rem;
            border-top: 2px solid rgba(180, 160, 130, 0.25);
            justify-content: center;
        }
        .forest-scene .page-right .role-stamps .stamp {
            font-family: 'Cinzel', serif;
            font-size: 0.55rem;
            letter-spacing: 0.5px;
            padding: 0.2rem 0.8rem;
            border: 1.5px solid #b8a48a;
            border-radius: 30px;
            color: #5a4a36;
            background: rgba(200, 180, 155, 0.15);
            text-transform: uppercase;
            transform: rotate(-1deg);
            transition: transform 0.2s ease;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
            font-size: clamp(0.45rem, 0.7vw, 0.6rem);
        }
        .forest-scene .page-right .role-stamps .stamp:nth-child(odd) {
            transform: rotate(1.5deg);
        }
        .forest-scene .page-right .role-stamps .stamp:nth-child(3n) {
            transform: rotate(-2deg);
        }
        .forest-scene .page-right .role-stamps .stamp.gamer {
            background: #2d5a27;
            color: #f4ede4;
            border-color: #2d5a27;
            transform: rotate(0deg) scale(1.15);
            font-weight: 700;
            letter-spacing: 2px;
            padding: 0.3rem 1.2rem;
            box-shadow: 0 2px 12px rgba(45, 90, 39, 0.25);
            font-size: clamp(0.55rem, 0.8vw, 0.7rem);
        }
        .forest-scene .page-right .role-stamps .stamp:hover {
            transform: rotate(0deg) scale(1.05);
        }

        /* ---------- PAGE TURN FLIP OVERLAY ---------- */
        .forest-scene .flip-page {
            position: absolute;
            top: 0;
            left: 50%;
            width: 50%;
            height: 100%;
            transform-style: preserve-3d;
            transform-origin: left center;
            z-index: 20;
            pointer-events: none;
            backface-visibility: visible;
            will-change: transform, box-shadow;
            display: none;
            transform: perspective(1500px) rotateY(0deg);
        }
        /* Declarative keyframe-driven flip: far more reliable across browsers than a
           JS-timed transition, which can get coalesced/skipped depending on paint timing. */
        @keyframes forestFlipForward {
            0%   { transform: perspective(1500px) rotateY(0deg); box-shadow: -2px 0 8px rgba(0,0,0,0.08); }
            50%  { box-shadow: -22px 0 40px rgba(0,0,0,0.4); }
            100% { transform: perspective(1500px) rotateY(-180deg); box-shadow: -2px 0 8px rgba(0,0,0,0.08); }
        }
        @keyframes forestFlipBackward {
            0%   { transform: perspective(1500px) rotateY(-180deg); box-shadow: -2px 0 8px rgba(0,0,0,0.08); }
            50%  { box-shadow: -22px 0 40px rgba(0,0,0,0.4); }
            100% { transform: perspective(1500px) rotateY(0deg); box-shadow: -2px 0 8px rgba(0,0,0,0.08); }
        }
        .forest-scene .flip-page.flip-forward-anim {
            animation: forestFlipForward 0.7s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
        }
        .forest-scene .flip-page.flip-backward-anim {
            animation: forestFlipBackward 0.7s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
        }
        .forest-scene .flip-page .flip-front,
        .forest-scene .flip-page .flip-back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            overflow: hidden;
            background: #f4ede4;
            border-radius: 0 12px 12px 0;
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.03);
            display: flex;
            flex-direction: column;
            padding: 1.8rem 1.8rem 1.8rem 1.5rem;
        }
        .forest-scene .flip-page .flip-front {
            z-index: 2;
            background: #f4ede4;
            background-image:
                radial-gradient(ellipse at 80% 30%, rgba(200, 180, 155, 0.15) 0%, transparent 70%),
                repeating-linear-gradient(-45deg, rgba(180, 160, 130, 0.03) 0px, rgba(180, 160, 130, 0.03) 2px, transparent 2px, transparent 8px);
        }
        .forest-scene .flip-page .flip-back {
            transform: rotateY(180deg);
            z-index: 1;
            background: #f4ede4;
            background-image:
                radial-gradient(ellipse at 20% 30%, rgba(200, 180, 155, 0.2) 0%, transparent 70%),
                repeating-linear-gradient(45deg, rgba(180, 160, 130, 0.03) 0px, rgba(180, 160, 130, 0.03) 2px, transparent 2px, transparent 8px);
            border-left: 2px solid #d4c5b0;
            border-radius: 0 12px 12px 0;
            padding: 1.5rem 1rem 1.5rem 1.8rem;
        }
        .forest-scene .flip-page .flip-back .illustration-wrap {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem;
        }
        .forest-scene .flip-page .flip-back .illustration-wrap svg {
            width: 100%;
            height: 100%;
            max-width: 380px;
            max-height: 380px;
            filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.06));
        }
        .forest-scene .flip-page::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background: linear-gradient(to right, rgba(0, 0, 0, 0.08) 0%, transparent 40%);
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: 5;
        }
        .forest-scene .flip-page.flipping::after {
            opacity: 1;
        }

        /* ---------- NAVIGATION (inside book bottom) ---------- */
        .forest-scene .nav-controls {
            position: relative;
            flex-shrink: 0;
            margin-top: 0.9rem;
            display: flex;
            align-items: center;
            gap: 1.5rem;
            z-index: 30;
            background: rgba(45, 31, 14, 0.75);
            backdrop-filter: blur(8px);
            padding: 0.4rem 1.2rem;
            border-radius: 40px;
            border: 1px solid rgba(200, 180, 155, 0.15);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }
        .forest-scene .nav-controls .nav-btn {
            background: none;
            border: none;
            color: #d4c5b0;
            font-size: 1.2rem;
            cursor: pointer;
            padding: 0.3rem 0.6rem;
            border-radius: 30px;
            transition: all 0.2s ease;
            font-family: 'Cinzel', serif;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            opacity: 0.6;
        }
        .forest-scene .nav-controls .nav-btn:hover:not(:disabled) {
            opacity: 1;
            color: #e8d5b0;
            background: rgba(200, 180, 155, 0.1);
        }
        .forest-scene .nav-controls .nav-btn:disabled {
            opacity: 0.2;
            cursor: not-allowed;
        }
        .forest-scene .nav-controls .page-indicator {
            font-family: 'Cinzel', serif;
            font-size: 0.7rem;
            color: #b8a48a;
            letter-spacing: 2px;
            padding: 0 0.4rem;
            min-width: 70px;
            text-align: center;
        }
        .forest-scene .nav-controls .page-indicator .current {
            color: #e8d5b0;
            font-weight: 700;
            font-size: 0.9rem;
        }

        /* ---------- BOOKMARK (progress-aware) ---------- */
        .forest-scene .bookmark-ribbon {
            position: absolute;
            top: -0.4rem;
            right: 3rem;
            z-index: 25;
            width: 2.2rem;
            height: 3.6rem;
            background: linear-gradient(180deg, #c9a86a, #b8924a);
            clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            opacity: 0;
            transition: opacity 0.5s ease 0.3s, transform 0.4s ease;
            transform-origin: top center;
            transform: translateY(0);
        }
        .forest-scene .book.cover-open .bookmark-ribbon {
            opacity: 1;
        }
        .forest-scene .bookmark-ribbon.progress {
            /* subtle shift to indicate progress - we'll animate via JS */;
        }
        @keyframes forestBookmarkPulse {
            0%   { filter: brightness(1); }
            40%  { filter: brightness(1.35); }
            100% { filter: brightness(1); }
        }
        .forest-scene .bookmark-ribbon.bookmark-pulse {
            animation: forestBookmarkPulse 0.5s ease;
        }

        /* ---------- CORNER HINT (page-turn affordance) ---------- */
        .forest-scene .page-corner-hint {
            position: absolute;
            bottom: 0.8rem;
            right: 0.8rem;
            z-index: 15;
            width: 40px;
            height: 40px;
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
            background: radial-gradient(ellipse at 100% 100%, rgba(200, 180, 155, 0.3) 0%, transparent 70%);
            border-radius: 0 0 12px 0;
            border-bottom: 2px solid rgba(200, 180, 155, 0.2);
            border-right: 2px solid rgba(200, 180, 155, 0.2);
            cursor: pointer;
            border: none;
            outline-offset: 2px;
            padding: 0;
            font: inherit;
            -webkit-appearance: none;
            appearance: none;
        }
        .forest-scene .book.cover-open .page-corner-hint {
            opacity: 0.6;
            pointer-events: auto;
        }
        .forest-scene .book.cover-open .page-corner-hint:hover,
        .forest-scene .book.cover-open .page-corner-hint:focus-visible {
            opacity: 1;
        }

        /* ---------- CLOSE BUTTON ---------- */
        .forest-scene .close-btn {
            position: absolute;
            top: 1.2rem;
            left: 1.2rem;
            z-index: 40;
            background: rgba(45, 31, 14, 0.6);
            backdrop-filter: blur(6px);
            border: 1px solid rgba(200, 180, 155, 0.15);
            color: #d4c5b0;
            font-family: 'Cinzel', serif;
            font-size: 0.7rem;
            padding: 0.4rem 1rem;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.25s ease;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            opacity: 0.7;
        }
        .forest-scene .close-btn:hover {
            opacity: 1;
            background: rgba(45, 31, 14, 0.8);
            color: #e8d5b0;
            transform: translateY(-1px);
        }
        .forest-scene .close-btn::before {
            content: '←';
            font-size: 1.1em;
        }

        /* ---------- REDUCED MOTION ---------- */
        @media (prefers-reduced-motion: reduce) {
            .forest-scene .book-cover,
            .forest-scene .book.cover-open .book-cover {
                transition-duration: 0.2s !important;
            }
            .forest-scene .flip-page.flip-forward-anim,
            .forest-scene .flip-page.flip-backward-anim {
                animation-duration: 0.2s !important;
            }
            .forest-scene .book-cover .cover-title,
            .forest-scene .book-cover .cover-ornament {
                transform: none !important;
            }
            .forest-scene .book.cover-open .book-cover {
                transform: rotateY(-170deg) translateX(-10px) !important;
                opacity: 0 !important;
            }
            .forest-scene .spread {
                transition-duration: 0.15s !important;
            }
            @keyframes fadeTrail {
                0%,
                100% {
                    opacity: 0.4;
                    transform: translateX(0);
                }
            }
        }

        /* ---------- SCROLLBAR ---------- */
        .forest-scene .page-right .chapter-text::-webkit-scrollbar,
        .forest-scene .flip-page .flip-front::-webkit-scrollbar,
        .forest-scene .flip-page .flip-back::-webkit-scrollbar {
            width: 3px;
        }
        .forest-scene .page-right .chapter-text::-webkit-scrollbar-track,
        .forest-scene .flip-page .flip-front::-webkit-scrollbar-track,
        .forest-scene .flip-page .flip-back::-webkit-scrollbar-track {
            background: transparent;
        }
        .forest-scene .page-right .chapter-text::-webkit-scrollbar-thumb,
        .forest-scene .flip-page .flip-front::-webkit-scrollbar-thumb,
        .forest-scene .flip-page .flip-back::-webkit-scrollbar-thumb {
            background: #c9a86a;
            border-radius: 10px;
        }

        /* ---------- RESPONSIVE ---------- */
        @media (max-width: 700px) {
            .forest-scene .book-wrapper {
                width: 95vw;
                height: 82vh;
                max-height: 600px;
            }
            .forest-scene .book {
                height: calc(100% - 3rem);
            }
            .forest-scene .page-left {
                padding: 0.8rem 0.5rem 0.8rem 0.8rem;
            }
            .forest-scene .page-right {
                padding: 1rem 0.8rem 1rem 0.8rem;
            }
            .forest-scene .page-right .chapter-title {
                font-size: clamp(0.9rem, 2.5vw, 1.2rem);
            }
            .forest-scene .page-right .chapter-text {
                font-size: clamp(0.7rem, 1.4vw, 0.85rem);
                line-height: 1.6;
            }
            .forest-scene .flip-page .flip-front,
            .forest-scene .flip-page .flip-back {
                padding: 1rem 0.8rem 1rem 0.8rem;
            }
            .forest-scene .nav-controls {
                margin-top: 0.6rem;
                padding: 0.3rem 0.8rem;
                gap: 0.8rem;
            }
            .forest-scene .nav-controls .nav-btn {
                font-size: 0.9rem;
                padding: 0.2rem 0.4rem;
            }
            .forest-scene .nav-controls .page-indicator {
                font-size: 0.6rem;
                min-width: 50px;
            }
            .forest-scene .bookmark-ribbon {
                width: 1.6rem;
                height: 2.8rem;
                right: 1.8rem;
                top: -0.2rem;
            }
            .forest-scene .page-left .chapter-number {
                font-size: 0.55rem;
            }
            .forest-scene .page-right .role-stamps .stamp {
                font-size: 0.4rem;
                padding: 0.1rem 0.5rem;
            }
            .forest-scene .page-right .role-stamps .stamp.gamer {
                font-size: 0.5rem;
                padding: 0.2rem 0.8rem;
            }
            .forest-scene .page-corner-hint {
                width: 28px;
                height: 28px;
                bottom: 0.4rem;
                right: 0.4rem;
            }
        }
        @media (max-width: 480px) {
            .forest-scene .book-wrapper {
                height: 86vh;
                max-height: 500px;
            }
            .forest-scene .page-left .illustration-wrap svg {
                max-width: 180px;
                max-height: 180px;
            }
            .forest-scene .flip-page .flip-back .illustration-wrap svg {
                max-width: 160px;
                max-height: 160px;
            }
            .forest-scene .page-right .chapter-text {
                font-size: clamp(0.6rem, 1.6vw, 0.75rem);
            }
            .forest-scene .page-right .chapter-title {
                font-size: clamp(0.7rem, 2.8vw, 0.95rem);
            }
            .forest-scene .page-right .ricochet-link {
                font-size: 0.6rem;
                padding: 0.2rem 0.6rem;
            }
        }

        /* ---------- FOCUS TRAP ---------- */
        .forest-scene .focus-trap-start,
        .forest-scene .focus-trap-end {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
        }

/* ============================================================
   SITE SEEING - The Viewfinder
   A golden-hour scenic overlook. One object, not a row of things:
   a coin-operated brass viewfinder the visitor dials through to
   see standalone web projects. Distinct from every other biome -
   warm daylight amber/rose instead of night, brass/verdigris metal
   instead of wood or stone. Nested inside #destPanel like Castle/
   Peak/Village (NOT bypassing it like Forest - that bypass caused
   a real bug once already; this scene relies on destPanel's own
   show/opacity system exactly like every other panel-based biome).
   ============================================================ */
.siteseeing-scene{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease;
  overflow:hidden;
  font-family:'Spectral', serif;
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%20fill%3D%22none%22%20stroke%3D%22%23ff9e6b%22%20stroke-width%3D%221.6%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%222%22%20x2%3D%2212%22%20y2%3D%226%22%20stroke%3D%22%233a2418%22%20stroke-width%3D%221.4%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%2218%22%20x2%3D%2212%22%20y2%3D%2222%22%20stroke%3D%22%233a2418%22%20stroke-width%3D%221.4%22/%3E%3Cline%20x1%3D%222%22%20y1%3D%2212%22%20x2%3D%226%22%20y2%3D%2212%22%20stroke%3D%22%233a2418%22%20stroke-width%3D%221.4%22/%3E%3Cline%20x1%3D%2218%22%20y1%3D%2212%22%20x2%3D%2222%22%20y2%3D%2212%22%20stroke%3D%22%233a2418%22%20stroke-width%3D%221.4%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%20fill%3D%22%23ff9e6b%22%20stroke%3D%22%233a2418%22%20stroke-width%3D%221%22/%3E%3C/svg%3E") 12 12, auto;
}

.ss-topbar{
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 34px;
}
.ss-title{
  font-family:'Cinzel', serif; font-size:22px; letter-spacing:.04em;
  color:#fbe9dd;
}
.ss-title strong{ color:#ff9e6b; }
.ss-return{
  font-family:'Share Tech Mono', monospace; font-size:12px; letter-spacing:.06em;
  color:#fbe9dd; background:rgba(58,36,24,.55); border:1px solid rgba(255,177,92,.35);
  border-radius:999px; padding:9px 18px; cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
.ss-return:hover, .ss-return:focus-visible{
  background:rgba(255,158,107,.22); border-color:#ff9e6b;
}
.ss-return:active{ transform:scale(.95); }

/* ---------- OVERLOOK BACKDROP ---------- */
.ss-overlook{
  position:relative; flex:1; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.ss-horizon{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,
    #1e1030 0%, #3c1f42 16%, #6b3a4e 32%, #a94d4a 48%, #d6683f 62%, #ffa855 74%, #ffcf94 86%, #ffe9cf 100%);
}
.ss-horizon::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:60%;
  background:radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255,208,140,.4), rgba(255,208,140,0) 70%);
  pointer-events:none;
}
.ss-valley{
  position:absolute; left:0; right:0; bottom:0; height:48%; z-index:0;
}
.ss-valley svg{ display:block; width:100%; height:100%; overflow:visible; }
.ss-ridge-far{ fill:#8a5c72; opacity:.55; }
.ss-ridge-mid{ fill:#5c3650; opacity:.85; }
.ss-ridge-near{ fill:#2a1826; opacity:1; }
.ss-river{
  fill:none; stroke:url(#ssRiverGrad); stroke-width:3.2; stroke-linecap:round; opacity:.55;
}
.ss-river-glint{
  fill:none; stroke:#fff6e2; stroke-width:2; stroke-linecap:round;
  stroke-dasharray:14 340; stroke-dashoffset:0;
  animation:ssRiverGlint 4.5s linear infinite;
  filter:drop-shadow(0 0 3px rgba(255,240,210,.8));
}
@keyframes ssRiverGlint{ from{ stroke-dashoffset:354; } to{ stroke-dashoffset:0; } }
.ss-sun{
  position:absolute; left:50%; top:42%; width:200px; height:200px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, #fff8e6 0%, #ffe2ac 42%, rgba(255,216,172,0) 72%);
  border-radius:50%;
  filter:blur(1px);
  animation:ssSunPulse 8s ease-in-out infinite;
}
.ss-sun-glow{
  position:absolute; left:50%; top:50%; width:520px; height:520px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,214,150,.35) 0%, rgba(255,180,110,.14) 45%, rgba(255,180,110,0) 75%);
  border-radius:50%;
  pointer-events:none;
}
@keyframes ssSunPulse{ 0%,100%{ filter:blur(1px) brightness(1); } 50%{ filter:blur(1.5px) brightness(1.08); } }

/* ---------- THE VIEWFINDER DEVICE ---------- */
.ss-viewfinder{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  padding-bottom:60px;
}

.ss-vf-plaque{
  font-family:'Share Tech Mono', monospace; font-size:12px; letter-spacing:.08em;
  color:#ffe9cf; background:rgba(46,28,20,.55); border:1px solid rgba(255,177,92,.3);
  border-radius:6px; padding:6px 16px; margin-bottom:14px;
  text-transform:uppercase;
}

.ss-vf-frame{
  position:relative;
  width:min(72vw, 560px); aspect-ratio: 2 / 1;
}
.ss-vf-lens{
  position:absolute; inset:0;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"><circle cx="70" cy="50" r="49" fill="white"/><circle cx="130" cy="50" r="49" fill="white"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"><circle cx="70" cy="50" r="49" fill="white"/><circle cx="130" cy="50" r="49" fill="white"/></svg>');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background:#0c0810;
  overflow:hidden;
}
.ss-vf-view{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .2s ease;
}
.ss-vf-view.ss-vf-active{ opacity:1; visibility:visible; }
.ss-vf-idle-horizon{
  position:absolute; inset:-10%;
  background:linear-gradient(180deg,
    #1e1030 0%, #4a2540 26%, #a94d4a 50%, #ffa855 70%, #ffe9cf 100%);
}
.ss-vf-idle-sun{
  position:absolute; left:50%; top:38%; width:22%; height:38%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, #fff8e6 0%, #ffe2ac 40%, rgba(255,216,172,0) 72%);
  border-radius:50%;
}
.ss-vf-idle-hill{
  position:absolute; left:-8%; right:-8%; bottom:-10%; height:38%;
  background:linear-gradient(180deg, #3a2436, #1e1220);
  clip-path:polygon(0% 100%, 0% 55%, 14% 35%, 30% 52%, 48% 28%, 66% 50%, 82% 32%, 100% 46%, 100% 100%);
}
.ss-vf-idle-birds{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.55;
}
.ss-vf-idle-birds path{
  fill:none; stroke:rgba(58,30,20,.75); stroke-width:1.6; stroke-linecap:round;
}
.ss-vf-iframe{ border:0; width:100%; height:100%; background:#0c0810; }
.ss-vf-gallery{ background:#0c0810; }
.ss-vf-gallery img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.ss-vf-gnext{
  position:absolute; right:14%; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%;
  background:rgba(20,12,10,.55); color:#ffe9cf; border:1px solid rgba(255,216,172,.4);
  font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .15s ease;
}
.ss-vf-gnext:hover{ background:rgba(255,158,107,.35); }
.ss-vf-gnext:active{ transform:translateY(-50%) scale(.9); }

.ss-vf-vignette{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(ellipse 72% 72% at 50% 50%, transparent 55%, rgba(8,4,6,.75) 100%);
}

.ss-vf-iris{
  position:absolute; inset:0; z-index:5;
  background:#0c0810;
  border-radius:50%;
  transform:scale(2.4);
  opacity:0;
  pointer-events:none;
  transition:transform .32s cubic-bezier(.7,0,.3,1), opacity .32s ease;
}
.ss-vf-iris.ss-vf-iris-closed{
  transform:scale(0.02);
  opacity:1;
}

.ss-vf-rim{
  position:absolute; inset:-3%;
  width:106%; height:106%;
  pointer-events:none;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.55));
}
.ss-vf-rim-circle{
  fill:none;
  stroke:url(#ssBrassGrad);
  stroke-width:5;
}

.ss-vf-enter{
  position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  font-family:'Share Tech Mono', monospace; font-size:11.5px; letter-spacing:.06em;
  color:#2a1638; background:#ffb15c; border:1px solid #7a5230;
  border-radius:999px; padding:8px 20px; cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
  transition:background .2s ease, transform .15s ease;
  z-index:6;
}
.ss-vf-enter:hover{ background:#ffcf94; transform:translateX(-50%) translateY(-2px); }
.ss-vf-enter:active{ transform:translateX(-50%) scale(.95); }

.ss-vf-stand{
  width:26px; height:64px; margin-top:26px;
  background:linear-gradient(90deg, #6b4a2e, #a97c4f 45%, #6b4a2e);
  border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.ss-vf-base{
  width:120px; height:16px; margin-top:-2px;
  background:linear-gradient(180deg, #7a5230, #4a3320);
  border-radius:8px/6px;
  box-shadow:0 6px 14px rgba(0,0,0,.4);
}

/* ---------- DIALS ---------- */
.ss-vf-dial{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #d8a86b, #8a5f38 70%, #5c3d24);
  border:2px solid #3d2a18;
  color:#2a1638; font-size:22px; font-weight:700;
  cursor:pointer; z-index:6;
  box-shadow:0 4px 10px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.3);
  transition:transform .15s ease;
}
.ss-vf-dial:hover{ filter:brightness(1.1); }
.ss-vf-dial:active{ transform:translateY(-50%) scale(.9) rotate(20deg); }
.ss-vf-dial-prev{ left:-14px; }
.ss-vf-dial-next{ right:-14px; }
@media (max-width: 640px){
  .ss-vf-dial-prev{ left:-8px; width:42px; height:42px; }
  .ss-vf-dial-next{ right:-8px; width:42px; height:42px; }
}

/* ---------- COIN SLOT (one-time flavor animation) ---------- */
.ss-vf-coinslot{
  position:absolute; left:50%; top:-6px; transform:translateX(-50%);
  width:26px; height:8px; border-radius:2px;
  background:#2a1a10; box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
  z-index:6;
}
.ss-vf-coin{
  position:absolute; left:50%; top:-40px; width:20px; height:20px;
  transform:translateX(-50%);
  background:radial-gradient(circle at 35% 30%, #ffe9a8, #d8a03c 70%, #a97c1a);
  border-radius:50%;
  opacity:0;
  box-shadow:0 0 0 1px #7a5b12;
}
.ss-vf-coin.ss-vf-coin-drop{
  animation: ssCoinDrop 900ms cubic-bezier(.6,0,.4,1) 1;
}
@keyframes ssCoinDrop{
  0%{ opacity:1; top:-40px; transform:translateX(-50%) rotate(0deg); }
  70%{ opacity:1; top:2px; transform:translateX(-50%) rotate(340deg); }
  85%{ opacity:1; top:2px; transform:translateX(-50%) scaleY(.3) rotate(340deg); }
  100%{ opacity:0; top:2px; transform:translateX(-50%) scaleY(.1) rotate(340deg); }
}

/* ---------- CAPTION ---------- */
.ss-vf-caption{
  margin-top:22px; text-align:center; max-width:420px;
}
.ss-vf-caption-title{
  font-family:'Cinzel', serif; font-size:20px; color:#fbe9dd; letter-spacing:.02em;
}
.ss-vf-caption-sub{
  font-family:'Spectral', serif; font-style:italic; font-size:14px;
  color:rgba(251,233,221,.75); margin-top:4px;
}
.ss-vf-caption-tags{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:12px;
}
.ss-vf-caption-tags span{
  font-family:'Share Tech Mono', monospace; font-size:10.5px; letter-spacing:.05em;
  color:#ffd8ac; background:rgba(255,158,107,.12); border:1px solid rgba(255,177,92,.3);
  border-radius:999px; padding:4px 11px;
}

/* ---------- EXPANDED "AT THE EYEPIECE" OVERLAY ---------- */
.ss-expand-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(12,8,10,.92);
  opacity:0; visibility:hidden; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .3s ease;
}
.ss-expand-overlay.show{ opacity:1; visibility:visible; pointer-events:auto; }
.ss-expand-close{
  position:absolute; top:24px; right:28px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  background:rgba(58,36,24,.7); color:#ffe9cf; border:1px solid rgba(255,177,92,.4);
  font-size:18px; cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
.ss-expand-close:hover{ background:#ff9e6b; color:#2a1638; }
.ss-expand-close:active{ transform:scale(.9); }
.ss-expand-frame{
  position:relative;
  width:min(88vw, 1000px); height:min(80vh, 640px);
  border-radius:14px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 6px rgba(169,124,79,.45), 0 0 0 8px rgba(0,0,0,.5);
  background:#0c0810;
}
.ss-expand-frame iframe{ border:0; width:100%; height:100%; background:#0c0810; }
.ss-expand-frame .ss-vf-gallery{ position:absolute; inset:0; }
.ss-expand-frame .ss-vf-gallery img{ object-fit:contain; background:#0c0810; }

/* ---------- AMBIENT: GOD RAYS ---------- */
.ss-rays{
  position:absolute; left:50%; top:50%; width:640px; height:640px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  animation:ssRaysRotate 70s linear infinite;
}
.ss-ray{
  position:absolute; left:50%; top:50%; width:9px; height:48%; margin-left:-4.5px;
  background:linear-gradient(180deg, rgba(255,245,222,.85), rgba(255,214,150,.18) 55%, rgba(255,214,150,0));
  transform-origin:50% 0%;
  animation:ssRaysBreathe 5s ease-in-out infinite;
  filter:blur(.5px);
}
.ss-ray:nth-child(1){ transform:rotate(0deg); }
.ss-ray:nth-child(2){ transform:rotate(45deg); animation-delay:-.6s; }
.ss-ray:nth-child(3){ transform:rotate(90deg); animation-delay:-1.2s; }
.ss-ray:nth-child(4){ transform:rotate(135deg); animation-delay:-1.8s; }
.ss-ray:nth-child(5){ transform:rotate(180deg); animation-delay:-2.4s; }
.ss-ray:nth-child(6){ transform:rotate(225deg); animation-delay:-3s; }
.ss-ray:nth-child(7){ transform:rotate(270deg); animation-delay:-3.6s; }
.ss-ray:nth-child(8){ transform:rotate(315deg); animation-delay:-4.2s; }
@keyframes ssRaysRotate{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes ssRaysBreathe{ 0%,100%{ opacity:.45; } 50%{ opacity:.9; } }

/* ---------- AMBIENT: CLOUDS / BIRDS / BALLOON / DUST / EPHEMERA ---------- */
.ss-cloud-layer, .ss-bird-layer, .ss-balloon-layer, .ss-dust-layer, .ss-ephemera-layer{
  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}
.ss-cloud-layer{
  transform:translate(var(--ss-px, 0px), var(--ss-py, 0px));
  will-change:transform;
}
.ss-valley, .ss-sun{ will-change:transform; }
.ss-cloud-svg{
  position:absolute; top:0; left:0; pointer-events:none; will-change:transform;
  overflow:visible;
}
.ss-cloud-svg path{ fill:url(#ssCloudGrad); }
.ss-cloud-svg.far path{ fill:url(#ssCloudGradFar); }

.ss-flyer{ position:absolute; pointer-events:none; will-change:transform; }
.ss-flyer svg{ display:block; width:100%; height:100%; overflow:visible; }
.ss-flyer .wing{ transform-box:view-box; }
.ss-flyer .wing-l{ transform-origin:12px 6px; animation:flapBirdL .4s cubic-bezier(.4,0,.2,1) infinite; }
.ss-flyer .wing-r{ transform-origin:12px 6px; animation:flapBirdR .4s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes ssFlyAcross{
  from{ transform:translate(-8vw,0) scale(1); }
  to{ transform:translate(108vw,-4vh) scale(.9); }
}
@keyframes ssFlyAcrossRev{
  from{ transform:translate(108vw,0) scale(1) scaleX(-1); }
  to{ transform:translate(-8vw,-3vh) scale(.85) scaleX(-1); }
}

.ss-balloon{ position:absolute; pointer-events:none; opacity:.85; }
.ss-balloon svg{ display:block; width:100%; height:100%; }
@keyframes ssBalloonDrift{
  from{ transform:translateX(-14vw) translateY(0); }
  to{ transform:translateX(114vw) translateY(-3vh); }
}

.ss-dust{
  position:absolute; bottom:0; border-radius:50%;
  background:radial-gradient(circle, rgba(255,224,170,.95), rgba(255,177,92,0));
  will-change:transform,opacity;
}

.ss-ephemera{
  position:absolute; bottom:6%; width:26px; height:18px;
  opacity:0; pointer-events:none;
  background:linear-gradient(160deg,#fbe9dd,#e8c9a8);
  border-radius:2px; box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.ss-ephemera.postcard::after{
  content:''; position:absolute; inset:3px; border:1px dashed rgba(120,80,50,.4);
}
.ss-ephemera.ticket{ width:20px; height:12px; background:linear-gradient(160deg,#ffe9cf,#d8a86b); }
@keyframes ssEphemeraTumble{
  0%{ opacity:0; transform:translate(-10vw,0) rotate(0deg); }
  8%{ opacity:.9; }
  92%{ opacity:.85; }
  100%{ opacity:0; transform:translate(110vw,-6vh) rotate(540deg); }
}

/* ---------- FOREGROUND: GRASS / REEDS ---------- */
.ss-grass{
  position:absolute; left:0; right:0; bottom:0; height:38px; z-index:3;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 4%; pointer-events:none;
}
.ss-reed{
  display:block; width:3px; height:26px;
  background:linear-gradient(180deg, #6b4228, #2e1c14);
  border-radius:3px 3px 0 0;
  transform-origin:bottom center;
  animation:ssReedSway 3.4s ease-in-out infinite;
  opacity:.85;
}
.ss-reed:nth-child(odd){ height:32px; animation-duration:3.9s; }
.ss-reed:nth-child(3n){ height:20px; animation-duration:2.8s; }
.ss-reed:nth-child(2n){ animation-delay:-1.1s; }
.ss-reed:nth-child(5n){ animation-delay:-2s; }
@keyframes ssReedSway{
  0%,100%{ transform:rotate(-4deg); }
  50%{ transform:rotate(5deg); }
}
.ss-bloom{
  display:block; width:3px; height:22px; position:relative;
  background:linear-gradient(180deg, #5c3a22, #2e1c14);
  transform-origin:bottom center;
  animation:ssReedSway 3.6s ease-in-out infinite;
}
.ss-bloom::after{
  content:''; position:absolute; top:-4px; left:50%; transform:translateX(-50%);
  width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffe2ac, #ff9e6b 65%, #c9633f);
  box-shadow:0 0 4px rgba(255,158,107,.6);
}
.ss-bloom:nth-child(3n){ animation-delay:-1.6s; }

/* ---------- VIEWFINDER DEVICE: IDLE SWAY WRAPPER ---------- */
.ss-vf-device{
  display:flex; flex-direction:column; align-items:center;
  animation:ssDeviceSway 6.5s ease-in-out infinite;
  transform-origin:bottom center;
}
@keyframes ssDeviceSway{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-1.5px) rotate(.15deg); }
}

/* ---------- FLAG / PENNANT ---------- */
.ss-vf-flag{
  position:absolute; top:-30px; left:50%; width:2px; height:32px;
  background:#3d2a18; z-index:1;
}
.ss-vf-flag::after{
  content:''; position:absolute; top:0; left:2px; width:18px; height:12px;
  background:linear-gradient(135deg,#ff9e6b,#c9633f);
  clip-path:polygon(0 0, 100% 20%, 0 100%);
  transform-origin:left center;
  animation:ssFlagFlutter 2.6s ease-in-out infinite;
}
@keyframes ssFlagFlutter{
  0%,100%{ transform:skewY(4deg) scaleX(1); }
  50%{ transform:skewY(-6deg) scaleX(.94); }
}

/* ---------- GROUNDING SHADOW ---------- */
.ss-vf-shadow{
  width:150px; height:18px; margin-top:-6px;
  background:radial-gradient(ellipse, rgba(20,10,8,.45), transparent 72%);
  border-radius:50%;
}

/* ---------- BINOCULAR POLISH: BRIDGE / KNURL / BEVEL / WEATHERING / GLOSS / GLINT ---------- */
.ss-vf-bridge{
  fill:url(#ssBrassGrad); stroke:#4a3320; stroke-width:1.2;
}
.ss-vf-bridge-screw{ fill:#2e1c10; stroke:rgba(255,255,255,.35); stroke-width:.4; }
.ss-vf-bridge-seam{ stroke:#3d2812; stroke-width:1; opacity:.28; }

.ss-vf-knurl{
  fill:none; stroke:#5c3d24; stroke-width:2; stroke-dasharray:1.6 2.2; opacity:.55;
}

.ss-vf-rim-highlight{ stroke:#f0cf9a; stroke-width:1.6; opacity:.75; transform:translate(-1.1px,-1.1px); }
.ss-vf-rim-shadow{ stroke:#3d2812; stroke-width:2.2; opacity:.6; transform:translate(1.2px,1.4px); }

.ss-vf-verdigris{ fill:#4a7a5c; opacity:.28; }
.ss-vf-scratch{ stroke:rgba(255,255,255,.3); stroke-width:.6; fill:none; }

.ss-vf-screw{ fill:#2e1c10; stroke:rgba(255,240,210,.4); stroke-width:.5; }

.ss-vf-gloss{
  fill:none; stroke:rgba(255,255,255,.4); stroke-width:3; stroke-linecap:round; opacity:.5;
}

.ss-vf-glint{
  fill:rgba(255,255,255,.55);
  filter:blur(4px);
  animation:ssGlintSweep 7s ease-in-out infinite;
  opacity:0;
}
@keyframes ssGlintSweep{
  0%,90%{ opacity:0; transform:translateX(0); }
  91%{ opacity:.7; }
  96%{ opacity:.5; transform:translateX(230px); }
  100%{ opacity:0; transform:translateX(250px); }
}

@media (prefers-reduced-motion: reduce){
  .ss-return, .ss-vf-dial, .ss-vf-enter{ transition-duration:.001s !important; }
  .ss-vf-iris{ transition-duration:.001s !important; }
}

/* ============================================================
   FARPOINT LIGHTHOUSE - contact / about
   A night ocean scene. A rotating beam from the tower sweeps the
   water; each contact channel is a buoy that catches the light as
   the beam passes it (synced by JS via getBoundingClientRect angle
   math - see lighthouse.js: syncBuoyPulses). A "Captain's Log"
   console holds the bio, resume, and a mailto-only contact form -
   nested inside #destPanel exactly like every other panel-based
   biome (Castle/Peak/Village/Site Seeing).
   ============================================================ */
.lighthouse-scene{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease;
  overflow:hidden;
  font-family:'Spectral', serif;
  background:linear-gradient(180deg, #050810 0%, #0a1420 38%, #0d1f2b 62%, #123240 100%);
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2%2012L22%203L14%2022L11%2013L2%2012Z%22%20fill%3D%22%239fd8ff%22%20stroke%3D%22%23122630%22%20stroke-width%3D%221.3%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M11%2013L22%203%22%20stroke%3D%22%23122630%22%20stroke-width%3D%221%22/%3E%3C/svg%3E") 12 12, auto;
}
#destPanel.show.lighthouse-mode .lighthouse-scene{ opacity:1; visibility:visible; pointer-events:auto; }
#destPanel.show.lighthouse-mode .panel-card{ display:none; }

.lh-topbar{
  position:relative; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 34px;
}
.lh-title{
  font-family:'Cinzel', serif; font-size:22px; letter-spacing:.04em;
  color:#eaf6ff;
}
.lh-title strong{ color:#9fd8ff; }
.lh-return{
  font-family:'Share Tech Mono', monospace; font-size:12px; letter-spacing:.06em;
  color:#eaf6ff; background:rgba(18,38,48,.55); border:1px solid rgba(159,216,255,.35);
  border-radius:999px; padding:9px 18px; cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
.lh-return:hover, .lh-return:focus-visible{ background:rgba(159,216,255,.2); border-color:#9fd8ff; }
.lh-return:active{ transform:scale(.95); }

/* ---------- SKY ---------- */
.lh-sky{
  position:absolute; top:0; left:0; right:0; height:46%;
  overflow:hidden; pointer-events:none; z-index:1;
}
.lh-moon{
  position:absolute; top:12%; right:14%; width:56px; height:56px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #fffef2, #f4ecc9 55%, #e3d9a8 100%);
  box-shadow:0 0 40px 14px rgba(244,236,201,.25), 0 0 90px 30px rgba(244,236,201,.1);
}
.lh-stars{ position:absolute; inset:0; }
.lh-star{
  position:absolute; border-radius:50%; background:#eaf6ff;
  animation:lhTwinkle 4s ease-in-out infinite;
}
@keyframes lhTwinkle{ 0%,100%{ opacity:.25; } 50%{ opacity:.9; } }

/* ---------- OCEAN ---------- */
.lh-ocean{
  position:relative; flex:1; overflow:hidden; z-index:2;
}
.lh-wave{
  position:absolute; left:-10%; right:-10%; height:120px;
  background-repeat:repeat-x;
  background-image:repeating-linear-gradient(100deg,
    rgba(159,216,255,.09) 0 40px, transparent 40px 90px);
  opacity:.6;
}
.lh-wave-far{ bottom:60%; height:70px; animation:lhWaveDrift 22s linear infinite; opacity:.35; }
.lh-wave-mid{ bottom:32%; height:100px; animation:lhWaveDrift 15s linear infinite reverse; opacity:.5; }
.lh-wave-near{ bottom:0; height:160px; animation:lhWaveDrift 10s linear infinite;
  background:linear-gradient(180deg, transparent, rgba(4,10,16,.6)),
    repeating-linear-gradient(100deg, rgba(159,216,255,.12) 0 50px, transparent 50px 110px);
}
@keyframes lhWaveDrift{ from{ background-position-x:0; } to{ background-position-x:-400px; } }

/* ---------- TOWER + BEAM ---------- */
.lh-tower{
  position:absolute; left:5%; bottom:6%; width:70px; height:128px; z-index:6;
}
.lh-tower svg{ position:absolute; inset:0; filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.lh-lamp-core{
  animation:lhLampFlicker 2.6s ease-in-out infinite;
}
@keyframes lhLampFlicker{ 0%,100%{ opacity:1; } 50%{ opacity:.75; } }

.lh-beam-pivot{
  position:absolute; left:35px; top:7px; width:1px; height:1px;
  animation:lhBeamSpin 14s linear infinite; /* keep in sync with BEAM_DURATION in js/biomes/lighthouse.js */
}
@keyframes lhBeamSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.lh-beam{
  position:absolute; left:0; top:0; width:70vw; max-width:1100px; height:220px;
  transform:translateY(-50%);
  transform-origin:0% 50%;
  clip-path:polygon(0 42%, 100% 0%, 100% 100%, 0 58%);
  background:linear-gradient(to right, rgba(255,247,214,.65), rgba(255,247,214,.12) 45%, transparent 75%);
  mix-blend-mode:screen;
  pointer-events:none;
}

/* ---------- BUOYS ---------- */
.lh-buoys{ position:absolute; inset:0; z-index:7; }
.lh-buoy{
  position:absolute; transform:translate(-50%,-50%) scale(calc(.7 + .3 * var(--depth, 1)));
  display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:pointer; outline:none;
  animation:lhBob 4.5s ease-in-out infinite;
  animation-delay:calc(var(--depth, 1) * -1.5s);
  z-index:1;
}
.lh-buoy:focus-visible .lh-buoy-body{ box-shadow:0 0 0 2px #9fd8ff; }
@keyframes lhBob{ 0%,100%{ transform:translate(-50%,-52%) scale(calc(.7 + .3 * var(--depth, 1))); } 50%{ transform:translate(-50%,-48%) scale(calc(.7 + .3 * var(--depth, 1))); } }

.lh-buoy-glow{
  position:absolute; left:50%; top:50%; width:46px; height:46px;
  transform:translate(-50%,-50%) scale(.4);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,247,214,.9), rgba(159,216,255,.35) 55%, transparent 75%);
  opacity:.3; pointer-events:none;
  animation:lhBuoyPulse 14s linear infinite; /* keep in sync with BEAM_DURATION in js/biomes/lighthouse.js */
}
@keyframes lhBuoyPulse{
  0%,90%,100%{ opacity:.28; transform:translate(-50%,-50%) scale(.4); }
  95%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  98%{ opacity:.55; transform:translate(-50%,-50%) scale(.7); }
}

.lh-buoy-body{
  position:relative; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, #244a5a, #0f232c 70%);
  border:1px solid rgba(159,216,255,.4);
  color:#cdeeff;
  box-shadow:0 3px 8px rgba(0,0,0,.4);
  transition:box-shadow .2s ease, border-color .2s ease;
}
.lh-buoy:hover .lh-buoy-body, .lh-buoy.active .lh-buoy-body{
  border-color:#eaf6ff; box-shadow:0 0 14px 2px rgba(159,216,255,.5);
}
.lh-buoy-icon{ width:16px; height:16px; }

.lh-buoy-label{
  font-family:'Share Tech Mono', monospace; font-size:10px; letter-spacing:.05em;
  color:#bfe4ff; opacity:.8; text-shadow:0 1px 3px rgba(0,0,0,.7);
  white-space:nowrap;
}

.lh-buoy-card{
  position:absolute; bottom:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px);
  min-width:200px; max-width:240px;
  background:rgba(8,18,26,.96); border:1px solid rgba(159,216,255,.35); border-radius:8px;
  padding:14px 16px; text-align:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:20;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.lh-buoy.active .lh-buoy-card{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.lh-buoy-card::after{
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:rgba(159,216,255,.35);
}
.lh-buoy-card-label{
  font-family:'Cinzel', serif; font-size:12px; letter-spacing:.08em; color:#9fd8ff; margin-bottom:6px;
}
.lh-buoy-card-value{
  font-family:'Share Tech Mono', monospace; font-size:12px; color:#eaf6ff;
  word-break:break-word; margin-bottom:12px; line-height:1.5;
}
.lh-buoy-card-actions{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.lh-buoy-action{
  font-family:'Share Tech Mono', monospace; font-size:11px; letter-spacing:.04em;
  color:#0f232c; background:#9fd8ff; border:none; border-radius:999px;
  padding:7px 14px; cursor:pointer; text-decoration:none; display:inline-block;
  transition:background .18s ease, transform .12s ease;
}
.lh-buoy-action:hover{ background:#eaf6ff; }
.lh-buoy-action:active{ transform:scale(.94); }
.lh-buoy-copy{ background:transparent; border:1px solid rgba(159,216,255,.5); color:#cdeeff; }
.lh-buoy-copy:hover{ background:rgba(159,216,255,.15); }

/* ---------- CAPTAIN'S LOG CONSOLE ---------- */
.lh-console{
  position:absolute; top:50%; right:0; transform:translateY(-50%);
  width:320px; max-height:82%;
  display:flex; z-index:15;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.lh-console.collapsed{ transform:translateY(-50%) translateX(calc(100% - 46px)); }
.lh-console-tab{
  align-self:center; writing-mode:vertical-rl; text-orientation:mixed;
  background:rgba(18,38,48,.92); border:1px solid rgba(224,180,92,.35); border-right:none;
  border-radius:8px 0 0 8px;
  padding:16px 10px; display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer; color:var(--gold); flex-shrink:0;
}
.lh-console-tab-icon{ font-size:14px; transform:rotate(180deg); }
.lh-console-tab-label{ font-family:'Cinzel', serif; font-size:11px; letter-spacing:.1em; }
.lh-console-body{
  flex:1; background:rgba(12,16,22,.92); border:1px solid rgba(224,180,92,.3);
  border-radius:0 0 0 10px; overflow:hidden; box-shadow:-10px 0 40px rgba(0,0,0,.35);
}
.lh-console-scroll{
  height:100%; max-height:74vh; overflow-y:auto; padding:26px 24px 22px;
  color:var(--parchment);
}
.lh-name{
  font-family:'Cinzel', serif; font-size:17px; letter-spacing:.03em; color:var(--gold-bright);
  margin-bottom:10px;
}
.lh-handle{ font-family:'Share Tech Mono', monospace; font-size:11px; color:var(--parchment-dim); }
.lh-bio-text{ font-size:13.5px; line-height:1.65; opacity:.88; margin-bottom:12px; }
.lh-resume-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Cinzel', serif; font-size:11px; letter-spacing:.1em;
  color:var(--ink); background:var(--gold); border-radius:4px;
  padding:10px 16px; margin-top:6px; text-decoration:none;
  transition:background .2s ease, transform .15s ease;
}
.lh-resume-btn:hover{ background:var(--gold-bright); }
.lh-resume-btn:active{ transform:scale(.96); }

.lh-divider{
  display:flex; align-items:center; gap:10px; margin:22px 0 16px;
  font-family:'Share Tech Mono', monospace; font-size:10px; letter-spacing:.15em;
  color:var(--parchment-dim); text-transform:uppercase;
}
.lh-divider::before, .lh-divider::after{ content:''; flex:1; height:1px; background:rgba(224,180,92,.25); }

.lh-form{ display:flex; flex-direction:column; gap:14px; }
.lh-field{ display:flex; flex-direction:column; gap:6px; }
.lh-field span{
  font-family:'Share Tech Mono', monospace; font-size:10.5px; letter-spacing:.06em;
  color:var(--parchment-dim); text-transform:uppercase;
}
.lh-field input, .lh-field textarea{
  font-family:'Spectral', serif; font-size:13.5px; color:var(--parchment);
  background:rgba(244,234,209,.06); border:1px solid rgba(224,180,92,.3); border-radius:4px;
  padding:9px 11px; resize:vertical;
}
.lh-field input:focus, .lh-field textarea:focus{
  outline:none; border-color:var(--gold);
  background:rgba(244,234,209,.1);
}
.lh-form-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Cinzel', serif; font-size:12px; letter-spacing:.1em;
  background:transparent; color:var(--gold); border:1px solid var(--gold); border-radius:4px;
  padding:11px 20px; cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.lh-form-submit:hover{ background:var(--gold); color:var(--ink); }
.lh-form-submit:active{ transform:scale(.97); }
.lh-form-submit:disabled{ opacity:.6; cursor:default; }
.lh-form-submit:disabled:hover{ background:transparent; color:var(--gold); }
.lh-form-hint{
  font-family:'Share Tech Mono', monospace; font-size:10px; color:var(--parchment-dim);
  opacity:.7; text-align:center; margin-top:2px;
}
.lh-form.lh-hidden{ display:none; }
.lh-honeypot{
  position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none;
}

.lh-form-success{
  display:none; flex-direction:column; gap:12px; align-items:flex-start;
  background:rgba(124,255,158,.06); border:1px solid rgba(124,255,158,.3); border-radius:6px;
  padding:16px;
}
.lh-form-success.visible{ display:flex; }
.lh-form-success .lh-form-confirm-title{ color:var(--swamp-glow); }
.lh-form-success .lh-form-confirm-text{ font-size:12.5px; line-height:1.6; opacity:.85; }
.lh-form-success .lh-form-confirm-text strong{ color:var(--swamp-glow); }

.lh-form-confirm{
  display:none; flex-direction:column; gap:12px;
  background:rgba(224,180,92,.06); border:1px solid rgba(224,180,92,.3); border-radius:6px;
  padding:16px;
}
.lh-form-confirm.visible{ display:flex; }
.lh-form-confirm-title{ font-family:'Cinzel', serif; font-size:13px; color:var(--gold-bright); }
.lh-form-confirm-text{ font-size:12.5px; line-height:1.6; opacity:.85; }
.lh-form-confirm-text strong{ color:var(--gold-bright); }
.lh-form-confirm-body{
  font-family:'Share Tech Mono', monospace; font-size:11.5px; line-height:1.6; color:var(--parchment);
  background:rgba(0,0,0,.25); border:1px solid rgba(224,180,92,.2); border-radius:4px;
  padding:12px; white-space:pre-wrap; word-break:break-word; margin:0;
}
.lh-form-confirm-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.lh-response-time{
  color:var(--gold); opacity:.9; margin-top:8px;
}

.lh-faq{ display:flex; flex-direction:column; gap:8px; }
.lh-faq-item{
  background:rgba(224,180,92,.05); border:1px solid rgba(224,180,92,.18);
  border-radius:6px; padding:2px 14px;
}
.lh-faq-item summary{
  font-family:'Spectral', serif; font-size:13.5px; font-weight:600; color:var(--parchment);
  cursor:pointer; padding:12px 0; list-style:none; display:flex; align-items:center;
  justify-content:space-between; gap:10px;
}
.lh-faq-item summary::-webkit-details-marker{ display:none; }
.lh-faq-item summary::after{
  content:'+'; font-family:'Cinzel', serif; font-size:16px; color:var(--gold);
  flex-shrink:0; transition:transform .2s ease;
}
.lh-faq-item[open] summary::after{ transform:rotate(45deg); }
.lh-faq-item p{
  font-size:12.5px; line-height:1.65; color:var(--parchment-dim); opacity:.9;
  margin:0 0 14px;
}

.lh-footer-note{
  text-align:center; margin-top:24px; padding-top:16px;
  border-top:1px solid rgba(224,180,92,.15);
}
.lh-footer-note a{
  font-family:'Share Tech Mono', monospace; font-size:11px; color:var(--parchment-dim);
  text-decoration:none; letter-spacing:.05em;
}
.lh-footer-note a:hover{ color:var(--gold); }

.lh-hint{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  font-family:'Share Tech Mono', monospace; font-size:11px; color:#cdeeff;
  opacity:.65; letter-spacing:.08em; z-index:16; pointer-events:none;
  transition:opacity .8s ease;
}
.lh-hint.fade{ opacity:0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 760px){
  .lh-console{ width:78vw; max-width:320px; }
  .lh-tower{ left:3%; width:52px; height:96px; }
  .lh-beam-pivot{ left:26px; top:5px; }
  .lh-buoy-label{ display:none; }
  .lh-moon{ width:40px; height:40px; }
}

@media (prefers-reduced-motion: reduce){
  /* Keep the beam, waves, stars, and buoy-glow sync alive - those carry the
     scene's actual meaning (which contact is "lit"). Only drop the small
     decorative bob so buoys don't visually wobble in place. */
  .lh-buoy{ animation:none !important; }
}


/* ============================================================
   THE GLITCHMIRE - abandoned digital laboratory
   Structure: warning entrance (#gmWarnScreen) -> glitch-shatter
   transition -> lab hub grid of numbered "experiments" (#gmLab) ->
   click a tile to mount it into a reusable modal stage
   (#gmExpModal / #gmExpStage). Each experiment is a self-contained
   mount()/unmount() pair in the EXPERIMENTS registry inside
   js/biomes/swamp.js (window.initGlitchmire) - new experiments just
   get appended to that array, nothing else has to change.
   ============================================================ */
.swamp-scene{
  position:absolute; inset:0; z-index:5;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease;
  overflow:hidden;
  font-family:'Share Tech Mono', monospace;
  background:#070907;
  --gm-green:#7cff9e; --gm-magenta:#ff2e88; --gm-cyan:#00e5ff; --gm-yellow:#ffe066; --gm-red:#ff4d4d;
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9%202H15V8L20%2020C21%2022%2019%2024%2017%2024H7C5%2024%203%2022%204%2020L9%208Z%22%20fill%3D%22%237cff9e%22%20stroke%3D%22%230f2c1c%22%20stroke-width%3D%221.3%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M9%202H15%22%20stroke%3D%22%230f2c1c%22%20stroke-width%3D%221.3%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2218%22%20r%3D%221.6%22%20fill%3D%22%230f2c1c%22/%3E%3C/svg%3E") 12 12, auto;
}
#destPanel.show.swamp-mode .swamp-scene{ opacity:1; visibility:visible; pointer-events:auto; }
#destPanel.show.swamp-mode .panel-card{ display:none; }

.swamp-scene.gm-shake{ animation:gmScreenShake .4s ease; }
@keyframes gmScreenShake{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-6px,3px); }
  40%{ transform:translate(5px,-4px); }
  60%{ transform:translate(-4px,-2px); }
  80%{ transform:translate(3px,4px); }
}

/* ---------- CRT overlay ---------- */
.gm-scanlines{
  position:absolute; inset:0; z-index:45; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.gm-vignette{
  position:absolute; inset:0; z-index:46; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.75) 100%);
}
.gm-noise{
  position:absolute; inset:-10%; z-index:44; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:gmNoiseShift .5s steps(2) infinite;
}
@keyframes gmNoiseShift{ 0%{ transform:translate(0,0); } 50%{ transform:translate(-2%,1%); } 100%{ transform:translate(1%,-2%); } }

.swamp-scene.gm-burst-active .gm-scanlines{ animation:gmBurstFlash .45s ease; }
.swamp-scene.gm-burst-active .gm-lab, .swamp-scene.gm-burst-active .gm-warn-screen{ animation:gmBurstShift .45s ease; }
@keyframes gmBurstFlash{ 0%,100%{ opacity:1; } 30%{ opacity:.2; background:rgba(124,255,158,.5); } 60%{ opacity:.15; background:rgba(255,46,136,.4); } }
@keyframes gmBurstShift{
  0%,100%{ filter:none; transform:translate(0,0); }
  20%{ filter:hue-rotate(30deg) saturate(2); transform:translate(4px,0); }
  40%{ filter:hue-rotate(-40deg) saturate(2.4); transform:translate(-5px,2px); }
  60%{ filter:hue-rotate(20deg); transform:translate(3px,-2px); }
  80%{ filter:hue-rotate(-15deg); transform:translate(-2px,0); }
}

/* ---------- glitch title ---------- */
.gm-glitch-title{
  position:relative; display:inline-block;
  font-family:'Cinzel', serif; font-weight:700; letter-spacing:.08em;
  font-size:38px; color:var(--gm-green);
  text-shadow:0 0 18px rgba(124,255,158,.5);
  animation:gmTitleTic 5s steps(1) infinite;
}
.gm-glitch-title.small{ font-size:18px; letter-spacing:.05em; }
.gm-glitch-title::before, .gm-glitch-title::after{
  content:attr(data-text); position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;
}
.gm-glitch-title::before{ color:var(--gm-magenta); z-index:-1; animation:gmTitleSliceA 3.4s steps(1) infinite; }
.gm-glitch-title::after{ color:var(--gm-cyan); z-index:-1; animation:gmTitleSliceB 4.1s steps(1) infinite; }
@keyframes gmTitleTic{
  0%,92%,100%{ transform:translate(0,0) skew(0deg); }
  93%{ transform:translate(-2px,1px) skew(-2deg); } 94%{ transform:translate(2px,-1px); } 95%{ transform:translate(0,0); }
}
@keyframes gmTitleSliceA{
  0%,88%,100%{ clip-path:inset(0 0 100% 0); transform:translate(0,0); }
  89%{ clip-path:inset(10% 0 60% 0); transform:translate(-3px,0); }
  90%{ clip-path:inset(60% 0 5% 0); transform:translate(3px,0); }
  91%{ clip-path:inset(0 0 100% 0); }
}
@keyframes gmTitleSliceB{
  0%,84%,100%{ clip-path:inset(100% 0 0 0); transform:translate(0,0); }
  85%{ clip-path:inset(20% 0 40% 0); transform:translate(3px,0); }
  86%{ clip-path:inset(70% 0 0 0); transform:translate(-3px,0); }
  87%{ clip-path:inset(100% 0 0 0); }
}

/* ---------- WARNING ENTRANCE ---------- */
.gm-warn-screen{
  position:absolute; inset:0; z-index:10;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:radial-gradient(ellipse at center, #0d1a10 0%, #050705 75%);
  transition:opacity .4s ease, visibility .4s ease; text-align:center; padding:20px;
}
.gm-warn-screen.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.gm-warn-icon{
  font-size:34px; color:var(--gm-yellow); animation:gmBlink 1.4s steps(1) infinite;
  text-shadow:0 0 16px rgba(255,224,102,.6);
}
.gm-warn-box{
  margin-top:10px; max-width:520px; min-height:80px;
  border:1px solid rgba(255,77,77,.4); background:rgba(255,77,77,.06); border-radius:6px;
  padding:16px 20px; text-align:left;
}
.gm-warn-line{
  font-size:12.5px; line-height:1.7; color:#ffb3b3; min-height:1.4em;
  border-right:2px solid transparent;
}
.gm-warn-line.typing{ border-right-color:var(--gm-red); animation:gmBlink .6s steps(1) infinite; }
@keyframes gmBlink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
.gm-enter-btn{
  margin-top:14px; font-family:'Cinzel', serif; font-size:13px; letter-spacing:.15em;
  color:#0f2c1c; background:var(--gm-green); border:none; border-radius:4px;
  padding:12px 26px; cursor:pointer; transition:transform .12s ease, box-shadow .2s ease;
  box-shadow:0 0 20px rgba(124,255,158,.35);
}
.gm-enter-btn:hover{ box-shadow:0 0 28px rgba(124,255,158,.6); }
.gm-enter-btn:active{ transform:scale(.95); }

.gm-mute-btn{
  position:absolute; top:20px; right:24px; z-index:11;
  width:38px; height:38px; border-radius:50%; font-size:16px;
  background:rgba(124,255,158,.08); border:1px solid rgba(124,255,158,.35); color:var(--gm-green);
  cursor:pointer;
}
.gm-mute-btn:hover{ background:rgba(124,255,158,.2); }
.gm-mute-btn[aria-pressed="true"]{ color:#666; border-color:#444; }

/* ---------- SHATTER TRANSITION ---------- */
.gm-shatter{ position:absolute; inset:0; z-index:40; pointer-events:none; overflow:hidden; opacity:0; }
.gm-shatter.active{ opacity:1; }
.gm-shard{ position:absolute; opacity:.92; mix-blend-mode:screen; animation:gmShardFly .65s cubic-bezier(.22,.8,.3,1) forwards; }
@keyframes gmShardFly{
  0%{ transform:translate(0,0) rotate(0deg) scale(1); opacity:.95; }
  100%{ transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.4); opacity:0; }
}

/* ---------- LAB HUB ---------- */
.gm-lab{
  position:absolute; inset:0; z-index:6;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease .05s;
}
.gm-lab.visible{ opacity:1; visibility:visible; pointer-events:auto; }

.gm-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 26px; flex-wrap:wrap;
  border-bottom:1px solid rgba(124,255,158,.2);
  background:linear-gradient(180deg, rgba(7,9,7,.9), rgba(7,9,7,.4));
}
.gm-topbar-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.gm-log-counter{
  font-size:11px; letter-spacing:.08em; color:var(--gm-cyan); opacity:.85;
  border:1px solid rgba(0,229,255,.3); border-radius:999px; padding:7px 12px;
}
.gm-chip-btn{
  font-family:'Share Tech Mono', monospace; font-size:11px; letter-spacing:.06em;
  color:var(--gm-yellow); background:rgba(255,224,102,.08); border:1px solid rgba(255,224,102,.35);
  border-radius:999px; padding:8px 14px; cursor:pointer; transition:background .15s ease, transform .1s ease;
}
.gm-chip-btn:hover{ background:rgba(255,224,102,.22); }
.gm-chip-btn:active{ transform:scale(.94); }
.gm-chip-btn[aria-pressed="true"]{ color:#777; border-color:#444; background:transparent; }
.gm-return{
  font-family:'Share Tech Mono', monospace; font-size:11px; letter-spacing:.06em;
  color:#eafff0; background:rgba(124,255,158,.08); border:1px solid rgba(124,255,158,.35);
  border-radius:999px; padding:9px 16px; cursor:pointer; transition:background .15s ease, transform .1s ease;
}
.gm-return:hover{ background:rgba(124,255,158,.22); }
.gm-return:active{ transform:scale(.94); }

.gm-lab-scroll{ flex:1; overflow-y:auto; padding:28px 8vw 60px; }
.gm-lede{
  max-width:640px; margin:0 auto 30px; text-align:center;
  font-family:'Spectral', serif; font-size:14px; line-height:1.7; color:#cdeed9; opacity:.85;
}

.gm-exp-grid{
  max-width:1180px; margin:0 auto; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:18px;
}
.gm-exp-tile{
  position:relative; background:rgba(15,20,16,.75); border:1px solid rgba(124,255,158,.25);
  border-radius:8px; padding:18px; cursor:pointer; text-align:left;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  font-family:'Share Tech Mono', monospace; color:inherit;
}
.gm-exp-tile:hover, .gm-exp-tile:focus-visible{
  transform:translateY(-4px); border-color:var(--gm-green);
  box-shadow:0 10px 26px rgba(0,0,0,.5), 0 0 0 1px var(--gm-green);
  outline:none;
}
.gm-exp-tile.queued{ cursor:default; opacity:.55; }
.gm-exp-tile.queued:hover{ transform:none; box-shadow:none; border-color:rgba(124,255,158,.25); }
.gm-exp-tile.locked{ border-color:rgba(255,77,77,.35); }
.gm-exp-tile.locked:hover{ border-color:var(--gm-red); box-shadow:0 10px 26px rgba(0,0,0,.5), 0 0 0 1px var(--gm-red); }
.gm-exp-tile.unlocked-special{ border-color:rgba(255,224,102,.5); }

.gm-exp-num{ font-size:10.5px; letter-spacing:.12em; color:#7fa38c; margin-bottom:6px; }
.gm-exp-title{ font-family:'Cinzel', serif; font-size:15px; color:#f2fbf5; margin-bottom:8px; letter-spacing:.02em; }
.gm-exp-tile.locked .gm-exp-title{ color:#ff9b9b; }
.gm-exp-desc{ font-size:11.5px; line-height:1.6; color:#b9d9c4; opacity:.85; min-height:2.6em; }
.gm-exp-status{
  display:inline-block; margin-top:12px; font-size:9.5px; letter-spacing:.12em;
  padding:4px 9px; border-radius:999px; text-transform:uppercase;
}
.gm-exp-status.stable{ background:rgba(124,255,158,.12); color:var(--gm-green); border:1px solid rgba(124,255,158,.4); }
.gm-exp-status.unstable{ background:rgba(255,224,102,.12); color:var(--gm-yellow); border:1px solid rgba(255,224,102,.4); animation:gmStatusFlicker 2.4s steps(1) infinite; }
.gm-exp-status.classified{ background:rgba(255,46,136,.12); color:var(--gm-magenta); border:1px solid rgba(255,46,136,.4); }
.gm-exp-status.locked{ background:rgba(255,77,77,.12); color:var(--gm-red); border:1px solid rgba(255,77,77,.4); }
.gm-exp-status.queued{ background:rgba(255,255,255,.05); color:#889; border:1px solid rgba(255,255,255,.15); }
@keyframes gmStatusFlicker{ 0%,90%,100%{ opacity:1; } 92%{ opacity:.3; } 94%{ opacity:1; } 96%{ opacity:.4; } }

.gm-exp-tile.locked .gm-exp-title.redacted{
  color:#ff9b9b; letter-spacing:.15em; filter:blur(.4px);
}

.gm-footer{ text-align:center; margin-top:26px; font-family:'Cinzel', serif; font-size:11px; letter-spacing:.15em; color:#557a63; }

/* ---------- EXPERIMENT MODAL / STAGE ---------- */
.gm-exp-modal{
  position:absolute; inset:0; z-index:35;
  display:flex; align-items:center; justify-content:center; padding:5vh 4vw;
  background:rgba(2,4,3,.88);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
}
.gm-exp-modal.visible{ opacity:1; visibility:visible; pointer-events:auto; }
.gm-exp-modal-inner{
  width:100%; max-width:900px; height:100%; max-height:640px;
  display:flex; flex-direction:column;
  background:#0a0f0a; border:1px solid rgba(124,255,158,.35); border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  overflow:hidden;
}
.gm-exp-modal-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid rgba(124,255,158,.25);
  background:rgba(124,255,158,.04);
}
.gm-exp-modal-title{ font-size:12px; letter-spacing:.1em; color:var(--gm-green); }
.gm-exp-close{
  width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,77,77,.4);
  background:rgba(255,77,77,.08); color:#ff9b9b; cursor:pointer; font-size:12px;
}
.gm-exp-close:hover{ background:rgba(255,77,77,.25); }
.gm-exp-stage{
  position:relative; flex:1; overflow:hidden;
  background:#040604;
}

/* generic stage helpers reused by multiple experiments */
.gm-stage-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair; touch-action:none; }
.gm-stage-hint{
  position:absolute; top:12px; left:14px; z-index:2; font-size:11px; color:#8fd6a8;
  background:rgba(0,0,0,.4); padding:6px 10px; border-radius:4px; letter-spacing:.03em; pointer-events:none;
}
.gm-stage-controls{
  position:absolute; bottom:12px; left:14px; right:14px; z-index:2;
  display:flex; gap:8px; flex-wrap:wrap;
}
.gm-stage-btn{
  font-family:'Share Tech Mono', monospace; font-size:10.5px; letter-spacing:.05em;
  color:#0f2c1c; background:var(--gm-green); border:none; border-radius:4px;
  padding:8px 12px; cursor:pointer;
}
.gm-stage-btn:active{ transform:scale(.94); }
.gm-stage-ascii{
  position:absolute; inset:0; margin:0; padding:10px; overflow:hidden;
  font-family:'Share Tech Mono', monospace; font-size:7px; line-height:7px; letter-spacing:0;
  color:var(--gm-green); background:#020402; white-space:pre; touch-action:none;
}

/* terminal experiment */
.gm-terminal{ position:absolute; inset:0; display:flex; flex-direction:column; padding:14px; }
.gm-terminal-out{
  flex:1; overflow-y:auto; font-size:12px; line-height:1.7; color:var(--gm-green);
  white-space:pre-wrap; word-break:break-word;
}
.gm-terminal-out .err{ color:var(--gm-red); }
.gm-terminal-out .sys{ color:var(--gm-cyan); }
.gm-terminal-in-row{ display:flex; align-items:center; gap:6px; margin-top:8px; border-top:1px solid rgba(124,255,158,.2); padding-top:10px; }
.gm-terminal-prompt{ color:var(--gm-yellow); font-size:12px; }
.gm-terminal-input{
  flex:1; background:transparent; border:none; outline:none; color:var(--gm-green);
  font-family:'Share Tech Mono', monospace; font-size:12px;
}
.gm-term-fx-layer{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.gm-term-cube{
  position:absolute; width:18px; height:18px; opacity:1; border-radius:3px;
  box-shadow:0 0 10px 2px currentColor;
}
.gm-term-duck{ position:absolute; font-size:22px; }
.gm-term-drop{ position:absolute; top:-20px; font-size:12px; color:var(--gm-cyan); opacity:.7; }
.gm-term-portal{
  position:absolute; width:90px; height:90px; border-radius:50%;
  background:radial-gradient(circle, var(--gm-magenta), transparent 70%);
  box-shadow:0 0 44px 12px rgba(255,46,136,.4);
  animation:gmPortalSpin 1.1s linear infinite;
}
.gm-term-portal::before{
  content:''; position:absolute; inset:-16px; border-radius:50%;
  border:3px dashed var(--gm-cyan); opacity:.65;
  animation:gmPortalSpin 2.2s linear infinite reverse;
}
.gm-term-portal::after{
  content:''; position:absolute; inset:-30px; border-radius:50%;
  border:1px solid var(--gm-green); opacity:.35;
  animation:gmPortalSpin 3.4s linear infinite;
}
@keyframes gmPortalSpin{ from{ transform:rotate(0deg) scale(1); } to{ transform:rotate(360deg) scale(1); } }

/* blade mode */
.gm-blade-area{ position:absolute; inset:0; padding:20px; touch-action:none; }
.gm-blade-chip{
  position:absolute; background:rgba(124,255,158,.12); border:1px solid rgba(124,255,158,.4);
  color:#eafff0; font-size:11px; padding:8px 12px; border-radius:4px; user-select:none;
}
.gm-blade-half{ position:absolute; overflow:hidden; pointer-events:none; }

/* fake crash */
.gm-crash{
  position:absolute; inset:0; z-index:60; background:#001a4d; color:#fff;
  font-family:'Share Tech Mono', monospace; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none; padding:40px; text-align:left;
}
.gm-crash.active{ opacity:1; visibility:visible; pointer-events:auto; }
.gm-crash-box{ max-width:560px; }
.gm-crash-box h2{ font-size:20px; font-weight:400; margin-bottom:16px; }
.gm-crash-box p{ font-size:12px; line-height:1.7; opacity:.85; margin-bottom:6px; }

/* toast */
.gm-toast{
  position:absolute; bottom:20px; left:50%; z-index:50;
  transform:translate(-50%, 20px); opacity:0; pointer-events:none;
  background:rgba(10,20,14,.95); border:1px solid var(--gm-yellow); border-radius:6px;
  padding:10px 18px; font-size:11px; letter-spacing:.05em; color:var(--gm-yellow);
  transition:opacity .25s ease, transform .25s ease;
}
.gm-toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
  .gm-glitch-title{ font-size:26px; }
  .gm-topbar{ padding:14px 16px; }
  .gm-lab-scroll{ padding:22px 5vw 50px; }
  .gm-exp-grid{ grid-template-columns:1fr; }
  .gm-mute-btn{ top:14px; right:14px; }
  .gm-exp-modal{ padding:3vh 3vw; }
}

@media (prefers-reduced-motion: reduce){
  .gm-glitch-title, .gm-glitch-title::before, .gm-glitch-title::after,
  .gm-warn-icon, .gm-warn-line.typing, .gm-noise, .gm-exp-status.unstable{ animation:none !important; }
  .gm-glitch-title::before, .gm-glitch-title::after{ display:none; }
  .swamp-scene.gm-shake{ animation:none !important; }
  .gm-exp-tile:hover{ transform:none; }
}

/* ==========================================================================
   PERFORMANCE MODE (mobile / low-power phones)
   Toggled by js/biome-data.js as html.perf-mode - only ever on touch-primary
   devices that are narrow-viewport or low-core-count, so this never touches
   a desktop/laptop (mouse/trackpad) session. Nothing here hides content or
   sections; it only lightens the two GPU-cost properties that are cheap on
   a handful of desktop elements but add up fast across dozens of phone-GPU
   composited/painted layers: backdrop-filter (full compositing blur pass)
   and animated box-shadow (a repaint, not a compositor job, on every frame).
   ========================================================================== */
html.perf-mode {
  /* Frosted-glass panels: keep the same translucent tint, drop the blur
     pass behind them. Panels already use high-enough background opacity
     (.6-.95) to stay legible without it. */
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* A couple of Mastery Peak panels leaned on that blur more than most
     (.85 and .8 opacity, meant to be backed by a 16px blur) - without it
     they let a faint "ghost" of the scrolling content underneath show
     through. Bump them closer to opaque here to compensate. */
  .peak-topbar { background: rgba(8, 11, 20, .97) !important; }
  .peak-progress { background: rgba(8, 11, 20, .95) !important; }

  /* Moon glow / string-light bulbs: swap the animated box-shadow (a full
     repaint per element per frame) for a cheaper opacity pulse - same
     "breathing light" read, compositor-only cost. */
  .layer-sky .moon {
    animation: perfMoonGlow 6s ease-in-out infinite alternate;
  }
  .string-lights .bulb {
    animation: perfBulbFlicker var(--dur, 2.4s) ease-in-out infinite alternate;
  }
}
@keyframes perfMoonGlow {
  0%   { opacity: .65; }
  100% { opacity: .85; }
}
@keyframes perfBulbFlicker {
  0%   { opacity: .6; transform: scale(.92); }
  40%  { opacity: 1;  transform: scale(1.04); }
  100% { opacity: .75; transform: scale(.97); }
}