/* ==========================================================================
   arc-offline.css - spark-to-404 takeover
   Pairs with arc-offline.js. No dependencies, no external fonts.
   Full-viewport ROOM -> FIELD takeover; the art is the background.
   ========================================================================== */

#arcFlash,
#offlineScene {
  --offline-deep: #04100a;
  --offline-lime: #b7ff8a;
  --offline-pale: #e2ffd8;
  --offline-mute: #7faa78;
  --offline-border: rgba(183, 255, 138, 0.42);
  --offline-display: var(--font-display, 'Arial Narrow', Impact, sans-serif);
  --offline-mono: var(--font-spec-telemetry, 'JetBrains Mono', 'SFMono-Regular', monospace);
  --arc-x: 50vw;
  --arc-y: 50vh;
}

/* ==========================================================================
   ARC FLASH - drawn on ONE canvas by arc-offline.js (dot grid, rays, core,
   whiteout and the soft reveal). No stacked blend layers, no oversized
   gradients, nothing here for the browser to re-raster each frame.
   ========================================================================== */

#arcFlash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  pointer-events: none;
  contain: strict;
}
#arcFlash.is-active { display: block; }
#arcFlash canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ==========================================================================
   SCROLL LOCK + COVER
   .arc-offline-open    : page scroll locked (set when the scene mounts)
   .arc-offline-covered : iris finished - page nav/footer/etc. are hidden
   ========================================================================== */

html.arc-offline-open,
html.arc-offline-open body { overflow: hidden !important; }
html.arc-offline-open { padding-right: var(--arc-sbw, 0px); }

html.arc-offline-covered body > *:not(#offlineScene):not(#arcFlash) { visibility: hidden !important; }

@media (hover: hover) and (pointer: fine) {
  html.arc-offline-open,
  html.arc-offline-open * {
    cursor: none !important;
  }
}

/* ==========================================================================
   FLOWER CURSOR - Botanical Daisy cursor for the 404 takeover
   ========================================================================== */
.offline-flower-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  margin-left: -19px;
  margin-top: -19px;
  pointer-events: none;
  z-index: 2147483647;
  transform: translate3d(-999px, -999px, 0);
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: transform;
}
.offline-flower-cursor.is-active {
  opacity: 1;
}
.offline-flower-cursor__cv {
  position: absolute;
  left: -9px;
  top: -9px;
  width: 56px;
  height: 56px;
  pointer-events: none;
  display: none;
  filter: drop-shadow(0 3px 6px rgba(8, 14, 9, 0.42));
  transition: filter 0.22s ease;
}
.offline-flower-cursor.has-3d .offline-flower-cursor__cv {
  display: block;
}
.offline-flower-cursor.has-3d .offline-flower-cursor__svg {
  display: none;
}
.offline-flower-cursor.is-hovering .offline-flower-cursor__cv {
  filter: drop-shadow(0 0 11px rgba(183, 255, 138, 0.85)) drop-shadow(0 3px 7px rgba(0, 0, 0, 0.55));
}
.offline-flower-cursor__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 50%;
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.22s ease;
}
.offline-flower-cursor.is-hovering .offline-flower-cursor__svg {
  transform: scale(1.24) rotate(12deg);
  filter: drop-shadow(0 0 10px rgba(183, 255, 138, 0.75)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
.offline-flower-cursor.is-hovering .ofc-core {
  fill: #b7ff8a !important;
  stroke: #182814 !important;
}
.offline-flower-cursor.is-hovering .ofc-aura {
  fill: #b7ff8a !important;
  opacity: 0.65;
  r: 7.5;
}
.offline-flower-cursor.is-clicking .offline-flower-cursor__svg {
  transform: scale(0.88);
}
.offline-flower-burst-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483646;
}
.ofc-burst-petal {
  position: fixed;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  pointer-events: none;
  opacity: 0.92;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition: transform 0.56s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.56s ease;
}

/* Individual Petal breeze ripple */
.ofc-petal {
  transform-origin: 19px 19px;
  transform: rotate(var(--rot, 0deg));
  animation: ofcPetalBreeze 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.32s);
  will-change: transform;
}

@keyframes ofcPetalBreeze {
  0%, 100% {
    transform: rotate(var(--rot, 0deg)) scaleY(1);
  }
  38% {
    transform: rotate(calc(var(--rot, 0deg) + 3.2deg)) scaleY(0.93) scaleX(1.03);
  }
  72% {
    transform: rotate(calc(var(--rot, 0deg) - 2.4deg)) scaleY(1.03) scaleX(0.97);
  }
}

.offline-flower-cursor.is-fluttering .ofc-petal {
  animation-duration: 0.82s;
}

/* Golden pollen trail particles */
.ofc-trail-mote {
  position: fixed;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  margin-top: -2px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff9c4 0%, #fbd148 60%, rgba(245, 190, 40, 0) 100%);
  box-shadow: 0 0 7px rgba(251, 209, 72, 0.9);
  pointer-events: none;
  z-index: 2147483646;
  opacity: 0.95;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition: transform 0.48s cubic-bezier(0.16, 0.84, 0.38, 1), opacity 0.48s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .ofc-petal {
    animation: none !important;
    transform: rotate(var(--rot, 0deg)) !important;
  }
  .ofc-trail-mote {
    display: none !important;
  }
  .offline-flower-cursor {
    transition: none !important;
  }
  .offline-flower-cursor__svg {
    transition: none !important;
  }
  .offline-flower-cursor.is-hovering .offline-flower-cursor__svg {
    transform: none !important;
  }
  .offline-flower-cursor.is-clicking .offline-flower-cursor__svg {
    transform: none !important;
  }
  .ofc-burst-petal {
    display: none !important;
  }
}

/* ==========================================================================
   SCENE  (#offlineScene) - full viewport, edge to edge, art as background
   ROOM  -> PORTAL (1.6s scale + crossfade through the window) -> FIELD
   ========================================================================== */

#offlineScene {
  --pad: clamp(20px, 3.4vw, 52px);
  --offline-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --offline-text: #eef3dc;
  --offline-mono: var(--font-spec-telemetry, var(--font-mono, 'JetBrains Mono', 'SFMono-Regular', monospace));
  position: fixed;
  inset: 0;
  z-index: 2147482900;
  display: none;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--offline-deep);
  color: var(--offline-text);
  font-family: var(--offline-mono);
  -webkit-font-smoothing: antialiased;
  touch-action: none;
}
#offlineScene *, #offlineScene *::before, #offlineScene *::after { box-sizing: border-box; }
#offlineScene.is-mounted { display: block; }
#offlineScene:focus { outline: none; }

/* open() without the flash fades in; closing fades out (opacity only, compositor-friendly) */
#offlineScene.is-fade-in { animation: offline-scene-in 0.5s ease both; }
#offlineScene.is-closing { opacity: 0; transition: opacity 0.36s ease; }
@keyframes offline-scene-in { from { opacity: 0; } to { opacity: 1; } }

#offlineScene :focus-visible { outline: 2px solid var(--offline-pale); outline-offset: 3px; }
#offlineScene .offline-title:focus-visible { outline: none; }

.offline-vh {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* --- stage ---------------------------------------------------------------- */

.offline-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--stage-bg, #1e2a1f);
  contain: layout style paint;
}

/* rig = pointer parallax (<= 6px) + the overscan that hides its edges */
.offline-rig {
  position: absolute;
  inset: 0;
  transform: translate3d(calc(var(--px, 0) * -6px), calc(var(--py, 0) * -6px), 0) scale(var(--os, 1));
  will-change: transform;
}

.offline-world { position: absolute; left: 0; top: 0; z-index: 1; transform-origin: 0 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.offline-room { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.offline-stage.is-failed .offline-still { display: none; }

/* soft edge veils: hide the extension seams / unextended edges of the art */
.offline-veil { position: absolute; inset: 0; pointer-events: none; }
.offline-veil > i { position: absolute; display: block; }

/* the field plate, seen through the glass and growing into the screen */
.offline-plate {
  position: absolute;
  left: 0; top: 0;
  z-index: 0;
  transform-origin: 0 0;
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* portrait only: the plate is narrower than the glass, so its sides melt into it. Static mask (no per-frame work). */
.offline-plate.is-feather {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.offline-plate img, .offline-fieldplate img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }

/* --- FIELD (static end state) ---------------------------------------------- */

.offline-field { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.offline-stage[data-view="field"] .offline-field { opacity: 1; visibility: visible; }
.offline-fieldplate {
  position: absolute;
  translate: calc(var(--px, 0) * -3px) calc(var(--py, 0) * -2px);
}

.offline-grass { position: absolute; inset: 0; pointer-events: none; opacity: 0; visibility: hidden; overflow: hidden; }
.offline-stage[data-view="field"] .offline-grass,
.offline-stage[data-view="portal"] .offline-grass { visibility: visible; opacity: 1; }

.offline-grass {
  filter: brightness(calc(1 - var(--night, 0) * 0.5)) saturate(calc(1 - var(--night, 0) * 0.3)) hue-rotate(calc(var(--night, 0) * 16deg));
}
.g-wrap {
  position: absolute;
  left: -3%;
  width: 106%;
  transform-origin: 50% 100%;
  transform: translateX(calc(var(--wind, 0) * 7px)) skewX(calc(var(--wind, 0) * -2.6deg));
}
.g-wrap--back  { bottom: var(--gb-bottom, -1.5dvh); z-index: 1; }
.g-wrap--front { bottom: var(--gf-bottom, -3.5dvh); z-index: 2;
  transform: translateX(calc(var(--wind, 0) * 12px)) skewX(calc(var(--wind, 0) * -4deg)); }
.offline-grass img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 38dvh;
  object-fit: contain;
  object-position: 50% 100%;
  transform-origin: 50% 100%;
  user-select: none;
  -webkit-user-drag: none;
}
.offline-grass .g-back  {
  translate: calc(var(--px, 0) * -4.5px) calc(var(--rise-b, 0) * 1%);
  animation: grass-sway-a 9s ease-in-out infinite; }
.offline-grass .g-front { --gh: var(--gh-front, 18dvh);
  translate: calc(var(--px, 0) * -6px) calc(var(--rise-f, 0) * 1%);
  animation: grass-sway-b 7s ease-in-out infinite; }

@keyframes grass-sway-a { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(0.7deg); } }
@keyframes grass-sway-b { 0%, 100% { transform: skewX(0.2deg); } 50% { transform: skewX(-0.9deg); } }

/* --- the light is real: blue hour after dark. Multiply layer with a clear
       hole at the sun, so the sun reads as the moon. Opacity = night (0..1) ---- */

.offline-grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: calc(var(--night, 0) * 0.9);
  background:
    radial-gradient(ellipse var(--hx, 5%) var(--hy, 8%) at var(--sx, 70%) var(--sy, 20%), #fff 0, #fff 42%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, rgb(52, 74, 138) 0, rgb(70, 92, 146) 46%, rgb(44, 64, 96) 100%);
}

/* --- air: the ASCII pulse, pollen seeds, stars --------------------------------- */

.offline-stage[data-day="1"] .offline-grade { display: none; }
.offline-stage.is-portal .offline-still, .offline-stage.is-portal .still-glow { display: none; }
.offline-air { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* --- shading so type is always legible without a panel ---------------------- */

.offline-shade { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.9s var(--offline-ease); }
.offline-shade--room {
  background:
    linear-gradient(to top, rgba(6, 12, 8, 0.7) 0, rgba(6, 12, 8, 0.38) 24%, rgba(6, 12, 8, 0) 52%),
    radial-gradient(120% 100% at 62% 42%, rgba(6, 12, 8, 0) 56%, rgba(6, 12, 8, 0.42) 100%);
}
.offline-shade--field {
  opacity: 0;
  background:
    radial-gradient(72% 62% at 0% 100%, rgba(7, 13, 8, 0.84) 0, rgba(7, 13, 8, 0.5) 46%, rgba(7, 13, 8, 0) 100%),
    linear-gradient(to top, rgba(8, 14, 9, 0.6) 0, rgba(8, 14, 9, 0.3) 20%, rgba(8, 14, 9, 0) 46%);
}
.offline-stage[data-view="field"] .offline-shade--room,
.offline-stage[data-view="portal"] .offline-shade--room { opacity: 0; }
.offline-stage[data-copy="field"] .offline-shade--field { opacity: 1; }

/* --- the window: the way out ------------------------------------------------- */

.offline-window {
  position: absolute;
  z-index: 2;
  display: block;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.5s var(--offline-ease);
}
.offline-window::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(75% 75% at 74% 24%, rgba(255, 238, 176, 0.62), rgba(255, 238, 176, 0) 72%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.8s var(--offline-ease);
}
.offline-window:hover::before,
.offline-window:focus-visible::before { opacity: 0.85; }
.offline-window.is-dwell::before { opacity: 1; transition: opacity 4s linear; }
.offline-window:focus-visible { outline: 2px solid var(--offline-pale); outline-offset: -7px; }

.offline-window__label {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  font: 500 10.5px/1 var(--offline-mono);
  letter-spacing: 0.22em;
  color: #f2f6e2;
  background: rgba(8, 16, 10, 0.52);
  border: 1px solid rgba(238, 243, 220, 0.26);
  opacity: 0.9;
  transition: opacity 0.5s var(--offline-ease), background-color 0.5s var(--offline-ease), letter-spacing 0.6s var(--offline-ease);
}
.offline-window:hover .offline-window__label,
.offline-window:focus-visible .offline-window__label { opacity: 1; letter-spacing: 0.28em; background: rgba(8, 16, 10, 0.5); }

/* a totem sits inside the glass hit area; keep the window quiet while it is
   hovered so the label and sun glow do not animate with the totem */
.offline-window.is-suppressed::before { opacity: 0; }
.offline-window.is-suppressed .offline-window__label {
  opacity: 0.9;
  letter-spacing: 0.22em;
  background: rgba(8, 16, 10, 0.52);
}

.offline-stage:not([data-view="room"]) .offline-window { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.35s, visibility 0s 0.35s; }

/* --- copy: a field note, not a panel ----------------------------------------- */

.offline-copy {
  position: absolute;
  z-index: 4;
  left: max(var(--pad), env(safe-area-inset-left));
  bottom: max(calc(var(--pad) * 0.9), env(safe-area-inset-bottom));
  width: min(27rem, calc(100% - var(--pad) * 2));
  display: grid;
  gap: 10px;
  justify-items: start;
  pointer-events: none;
}
.offline-copy > * { pointer-events: auto; }

.offline-lines { display: grid; pointer-events: none; }
.offline-line {
  grid-area: 1 / 1;
  display: grid;
  gap: 12px;
  justify-items: start;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.8s var(--offline-ease), transform 0.8s var(--offline-ease), visibility 0s 0.8s;
}
.offline-stage[data-copy="room"]  .offline-line--room,
.offline-stage[data-copy="field"] .offline-line--field {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.9s var(--offline-ease) 0.1s, transform 0.9s var(--offline-ease) 0.1s, visibility 0s;
}

.offline-title {
  margin: 0;
  font-family: var(--offline-display);
  font-weight: 400;
  font-size: clamp(26px, 2.9vw, 46px);
  line-height: 1;
  letter-spacing: 0.17em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--offline-text);
  text-shadow: 0 2px 22px rgba(4, 10, 6, 0.6), 0 0 3px rgba(4, 10, 6, 0.45);
}
.offline-title--field {
  font-size: clamp(25px, 2.6vw, 41px);
  line-height: 1.12;
  letter-spacing: 0.012em;
  white-space: normal;
  text-transform: none;
  max-width: 17ch;
  text-wrap: balance;
}
.offline-title:focus { outline: none; }

.offline-text {
  margin: 0;
  max-width: 46ch;
  font: 400 13.5px/1.65 var(--offline-mono);
  letter-spacing: 0.01em;
  color: rgba(238, 243, 220, 0.84);
  text-shadow: 0 1px 14px rgba(4, 10, 6, 0.7);
}

.offline-notes span { font-variant-numeric: tabular-nums; }
.offline-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  font: 600 11px/1 var(--offline-mono);
  letter-spacing: 0.2em;
  color: rgba(238, 255, 228, 0.96);
  text-shadow: 0 1px 10px rgba(4, 10, 6, 0.9), 0 0 3px rgba(4, 10, 6, 0.7);
}

.offline-reconnect {
  min-height: 44px;
  padding: 0 4px;
  margin: 0 0 0 -4px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--offline-lime);
  font: 600 12px/1 var(--offline-mono);
  letter-spacing: 0.24em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 9px;
  text-shadow: 0 1px 10px rgba(4, 10, 6, 0.95), 0 0 3px rgba(4, 10, 6, 0.8);
  cursor: pointer;
  transition: color 0.2s;
}
.offline-reconnect:hover { color: var(--offline-pale); }
.offline-reconnect[aria-disabled="true"] { color: var(--offline-mute); cursor: progress; }

.offline-close {
  position: absolute;
  z-index: 5;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid rgba(238, 243, 220, 0.3);
  border-radius: 0;
  background: rgba(6, 12, 8, 0.5);
  color: var(--offline-text);
  font: 600 13px/1 var(--offline-mono);
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.offline-close:hover { background: rgba(6, 12, 8, 0.6); border-color: var(--offline-lime); }

/* ==========================================================================
   ROOM MOTION  (small copies of the painting cut to one region, soft-masked;
   nothing but the pixels inside that region ever moves - no camera moves)
   Regions are set by JS as fractions of the full canvas: --l --t --w --h
   ========================================================================== */

.offline-still { position: absolute; inset: 0; pointer-events: none; }

.still {
  position: absolute;
  left: calc(var(--l) * 100%);
  top: calc(var(--t) * 100%);
  width: calc(var(--w) * 100%);
  height: calc(var(--h) * 100%);
  --f: 12px;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 var(--f), #000 calc(100% - var(--f)), transparent),
    linear-gradient(180deg, transparent, #000 var(--f), #000 calc(100% - var(--f)), transparent);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, transparent, #000 var(--f), #000 calc(100% - var(--f)), transparent),
    linear-gradient(180deg, transparent, #000 var(--f), #000 calc(100% - var(--f)), transparent);
          mask-composite: intersect;
}
.still > i {
  position: absolute;
  display: block;
  width: calc(100% / var(--w));
  height: calc(100% / var(--h));
  left: calc(var(--l) / var(--w) * -100%);
  top: calc(var(--t) / var(--h) * -100%);
  background: var(--room) 0 0 / 100% 100% no-repeat;
}

.still--window > i { animation: offline-drift 8s ease-in-out infinite alternate; }

.still--404 {
  --f: 0px;
  -webkit-mask-image: url("offline/crt-404-mask.png");
          mask-image: url("offline/crt-404-mask.png");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-over; mask-composite: add;
  opacity: 0;
  animation: offline-flicker 12s linear infinite;
}
.still--404 > i { filter: brightness(2.1) contrast(1.1); }

.still--plant, .still--owl {
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 76%, transparent 100%);
          mask-image: radial-gradient(ellipse closest-side, #000 76%, transparent 100%);
  -webkit-mask-composite: source-over; mask-composite: add;
}
.still--owl { -webkit-mask-image: radial-gradient(ellipse closest-side, #000 82%, transparent 100%);
                      mask-image: radial-gradient(ellipse closest-side, #000 82%, transparent 100%); }
.still--plant > i { transform-origin: var(--tox) var(--toy); animation: offline-sway 9s ease-in-out infinite; }
.still--owl   > i { transform-origin: var(--tox) var(--toy); animation: offline-breathe 6.5s ease-in-out infinite; transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.32, 1.2), filter 0.3s ease; }

/* While the owl's canvas eyes are open, lock the underlying painted patch so
   the eyelids and facial disc stay 100% pixel-registered with zero drift. */
.still--owl.is-awake > i {
  animation-play-state: paused;
  transform: scale(1);
}

/* --- Interactive 3D Room Totems Canvas & Hitboxes ------------------------- */
.offline-totem-cv {
  position: absolute;
  left: calc(var(--l) * 100%);
  top: calc(var(--t) * 100%);
  width: calc(var(--w) * 100%);
  height: calc(var(--h) * 100%);
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.45s var(--offline-ease);
}
.offline-stage:not([data-view="room"]) .offline-totem-cv {
  opacity: 0;
}

.offline-totems {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.35s var(--offline-ease);
}
.offline-stage:not([data-view="room"]) .offline-totems {
  opacity: 0;
  visibility: hidden;
}

.totem-btn {
  position: absolute;
  left: calc(var(--l) * 100%);
  top: calc(var(--t) * 100%);
  width: calc(var(--w) * 100%);
  height: calc(var(--h) * 100%);
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.totem-btn:focus-visible {
  outline: 1px dashed var(--offline-lime);
  outline-offset: 2px;
}

.still-glow { position: absolute; pointer-events: none; mix-blend-mode: screen; }
.still-glow--sun {
  background: radial-gradient(circle, rgba(255, 247, 205, 0.6) 0, rgba(255, 240, 170, 0.24) 32%, transparent 64%);
  opacity: 0.08;
  animation: offline-shimmer 7s ease-in-out infinite alternate;
}
.still-glow--crt {
  background: radial-gradient(ellipse at 50% 50%, rgba(183, 255, 138, 0.34) 0, rgba(183, 255, 138, 0.12) 38%, transparent 70%);
  opacity: calc(var(--night, 0) * 0.85);
}
.still-glow--plug {
  background: radial-gradient(circle, rgba(226, 255, 216, 0.7) 0, rgba(183, 255, 138, 0.28) 34%, transparent 66%);
  opacity: 0;
  animation: offline-pulse 12s ease-in-out infinite;
}

.offline-motes { position: absolute; inset: 0; }
.offline-mote {
  position: absolute;
  width: var(--s, 2px);
  height: var(--s, 2px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--offline-pale) 0, rgba(226, 255, 216, 0) 72%);
  opacity: 0;
  animation: offline-mote var(--d, 20s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes offline-drift   { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(1.6px, -0.9px, 0); } }
@keyframes offline-shimmer { from { opacity: 0.08; transform: scale(0.97); } to { opacity: 0.3; transform: scale(1.03); } }
@keyframes offline-sway    { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(0.35deg); } 75% { transform: rotate(-0.35deg); } }
@keyframes offline-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.009); } }
@keyframes offline-flicker {
  0%, 94.5% { opacity: 0; transform: translate3d(0, 0, 0); }
  95%   { opacity: 0.9; transform: translate3d(0.7px, 0, 0); }
  95.6% { opacity: 0.1; transform: translate3d(-0.6px, 0, 0); }
  96.3% { opacity: 1; transform: translate3d(0, 0, 0); }
  97%   { opacity: 0.2; transform: translate3d(0.4px, 0, 0); }
  97.8% { opacity: 0.7; transform: translate3d(0, 0, 0); }
  98.6%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
}
@keyframes offline-pulse { 0%, 28% { opacity: 0; } 40% { opacity: 0.5; } 56%, 100% { opacity: 0; } }
@keyframes offline-mote {
  0%   { opacity: 0;    transform: translate(0, 0); }
  18%  { opacity: 0.75; }
  62%  { opacity: 0.45; }
  100% { opacity: 0;    transform: translate(var(--dx, 8px), var(--dy, -12px)); }
}

/* ==========================================================================
   PORTRAIT / NARROW
   ========================================================================== */

@media (max-aspect-ratio: 1 / 1) {
  #offlineScene { --pad: 22px; }
  .offline-copy { width: calc(100% - var(--pad) * 2); bottom: max(26px, env(safe-area-inset-bottom)); gap: 8px; }
  .offline-title { font-size: clamp(24px, 7.2vw, 34px); letter-spacing: 0.16em; }
  .offline-title--field { font-size: clamp(25px, 7vw, 36px); letter-spacing: 0.01em; }
  .offline-text { font-size: 13px; }
  .offline-window__label {
    left: 50%;
    top: 38%;
    transform: translateX(-50%);
    min-height: 24px;
    padding: 0 8px;
    font-size: 9px;
    letter-spacing: 0.16em;
    white-space: nowrap;
  }
  .offline-shade--room {
    background:
      linear-gradient(to top, rgba(6, 12, 8, 0.82) 0, rgba(6, 12, 8, 0.55) 22%, rgba(6, 12, 8, 0) 46%),
      radial-gradient(120% 100% at 60% 38%, rgba(6, 12, 8, 0) 58%, rgba(6, 12, 8, 0.36) 100%);
  }
  .offline-grass .g-back  { --gh: 19dvh; }
  .offline-grass .g-front { --gh-front: 16dvh; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .offline-title { font-size: 22px; }
  .offline-title--field { font-size: 22px; }
  .offline-text { font-size: 12px; line-height: 1.5; }
  .offline-line { gap: 8px; }
}

/* ==========================================================================
   REDUCED MOTION - same full-bleed frame, fully static:
   no flash, no iris, no portal animation, no parallax, no loops
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  #arcFlash { display: none !important; }
  .offline-still { display: none !important; }
  .offline-rig { transform: none !important; }
  .offline-air { display: none !important; }
  .g-wrap { transform: none !important; }
  #offlineScene *, #offlineScene *::before, #offlineScene *::after { animation: none !important; transition: none !important; }
  .offline-fieldplate, .offline-grass img { translate: none !important; }
}