* { box-sizing: border-box; }
  html, body { margin: 0; min-height: 100%; }
  body { background: #161616; color: #f4f4f4; font-family: Arial, Helvetica, sans-serif; }
  main { position: relative; display: grid; place-items: center; min-height: 100vh; min-height: 100svh; overflow: hidden; padding: 32px 20px; isolation: isolate; }
  #particle-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
  .outline { position: absolute; width: min(85vw, 810px); height: auto; max-height: 90vh; overflow: visible; z-index: 1; opacity: 1; }
  .outline path { fill: #4e4e4e; stroke: #ffffff; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
  /* Restrained halo to keep the outline crisp. */
  .outline .glow {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    opacity: .65;
    filter: drop-shadow(0 0 2px rgba(255,255,255,.35));
  }
  /* The chase is drawn as ONE continuous, path-following streak on a canvas.
     This avoids mobile SVG dashoffset/pathLength inconsistencies. */
  .outline .growing-outline-trace { fill: none; stroke: #fff; filter: drop-shadow(0 0 5px rgba(255,255,255,1)) drop-shadow(0 0 12px rgba(255,255,255,.95)) drop-shadow(0 0 24px rgba(210,232,255,.75)); }
  #chase-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
  .outline { transform-origin: center center; transition: none; will-change: transform, opacity; }
  main .outline #shape-path { fill: #4e4e4e; fill-opacity: 0; transition: fill-opacity 560ms cubic-bezier(.22, 1, .36, 1); }
  main:not(.outline-lit) .outline #shape-path { stroke: transparent; }
  main.outline-filled .outline #shape-path { fill-opacity: 1; }
  /* The glowing trace alone constructs the silhouette until it closes. */
  main:not(.outline-lit) .outline .glow { opacity: 0; }
  main.outline-lit .outline .glow { opacity: 1; stroke-width: 7; filter: drop-shadow(0 0 9px rgba(255,255,255,.95)) drop-shadow(0 0 24px rgba(255,255,255,.65)); }
  main.outline-lit .outline #shape-path { stroke: #fff; filter: drop-shadow(0 0 8px rgba(255,255,255,.9)); }
  main.outline-lit .outline { filter: drop-shadow(0 0 30px rgba(255,255,255,.28)); }
  main.outline-shrinking .outline { transform: scale(.002); opacity: 1; transition: transform 1.05s cubic-bezier(.65,0,.95,.35); }
  main.outline-shrinking .outline .glow { opacity: 1; }
  main.map-revealing .outline { opacity: 0; transition: opacity .25s ease; }
  .village-map { position: absolute; width: 100vw; height: 100svh; max-height: none; transform: scale(1.8); transform-origin: center center; z-index: 1; opacity: 0; pointer-events: none; transition: opacity 2.4s ease; }
  @media (max-aspect-ratio: 4/5) { .village-map { width: 142vw; height: auto; transform: scale(1.45); } }
  main.map-revealed .outline { opacity: 0; }

  .village-map { transition: none; }
  .village-map > rect { display: none; }
  .village-map #roads-rebuilt-from-geojson path { opacity: 0; }
  .village-map > g:not(#roads-rebuilt-from-geojson) path { opacity: 0; }
  main.map-revealing .village-map, main.map-revealed .village-map { opacity: 1; }
  #reveal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
  main.map-revealed .village-map { opacity: 1; }
  main.map-revealed #chase-canvas { opacity: 0; }
  #chase-canvas { transition: opacity .8s ease; }
  .content { position: absolute; left: 0; right: 0; bottom: clamp(30px, 6vh, 72px); z-index: 2; pointer-events: none; text-align: center; width: 100%; padding: 0 20px; opacity: 0; transform: translateY(12px); transition: opacity 1.8s ease, transform 1.8s ease; }
  main.text-visible .content { opacity: 1; transform: translateY(0); }
  h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 400; letter-spacing: 0.22em; text-indent: 0.22em; margin: 0; color: #ffd277; }
  p { margin: 14px 0 0; font-size: clamp(17px, 2.5vw, 18px); letter-spacing: 0.22em; color: #aaa; }
  @media (max-width: 600px) {
    .content { padding: 0 12px; }
    .content h1 { font-size: clamp(25px, 7vw, 34px); letter-spacing: 0.18em; text-indent: 0.18em; }
    .content p { font-size: clamp(10px, 2.65vw, 13px); letter-spacing: 0.12em; margin-top: 11px; }
  }
  @media (prefers-reduced-motion: reduce) { .content { transition: none; } .outline .glow { animation: none; } .village-map { opacity: 1; } .outline { opacity: 0; } }

/* Full-screen touch interaction: no browser panning or overscroll. */
html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
#particle-container { touch-action: none; overscroll-behavior: none; }