/* ============================================================
   E TO INTERACT — style.css
   One tall world. Pixel-game UI. Day/night everything.
   ============================================================ */

:root{
  --font-display:'Press Start 2P', monospace;
  --font-body:'VT323', monospace;

  --ink:#0d0d14;
  --paper:#f5efdc;
  --accent:#ffd24a;      /* lantern gold */
  --accent2:#6ee7a8;     /* interact green */
  --danger:#ff6b6b;

  --ui-bg:rgba(13,13,20,.96);
  --ui-border:#f5efdc;

  --shadow-op:.35;
  --time-mix:0;          /* 0 = day, 1 = night — synced by JS */
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; }

body{
  overflow:hidden;
  font-family:var(--font-body);
  font-size:22px;
  color:var(--paper);
  background:#000;
  -webkit-font-smoothing:none;
  image-rendering:pixelated;
  user-select:none;
}

.hidden{ display:none !important; }

html, body{ touch-action:manipulation; }
body.touch .kb-only{ display:none !important; }
body:not(.touch) .touch-only{ display:none !important; }

/* ============================================================
   SKY — two stacked layers, JS crossfades them
   ============================================================ */
.sky{
  position:fixed; inset:0;
  z-index:0;
}
.sky .sub{
  position:absolute; inset:0;
}
#sky-night{ opacity:0; }

#stars{
  position:fixed; inset:0; z-index:1;
  opacity:0;
  transition:opacity 2.8s ease;
  pointer-events:none;
  content-visibility:auto;   /* skip painting the 140 stars while hidden */
}
body[data-time="night"] #stars,
body[data-biome="space"] #stars{ opacity:1; }
.star{
  position:absolute; background:#fff; border-radius:0;
}
/* Only run the twinkle animation when the star field is actually shown.
   By day the 140 star elements are static (and culled), which removes a
   constant compositing cost. */
body[data-time="night"] .star,
body[data-biome="space"] .star{
  animation:twinkle 3s infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:.9; } 50%{ opacity:.25; }
}

/* ============================================================
   WORLD
   ============================================================ */
#viewport{
  position:fixed; inset:0; overflow:hidden; z-index:2;
}
#world{
  position:absolute; left:0; top:0; width:100%;
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}

/* Off-screen sections/crossings are skipped by the browser's renderer.
   contain-intrinsic-size preserves their layout height so scrolling the
   camera stays stable. This is the main lag-spike fix for the tall world. */
.section, .transition{
  content-visibility:auto;
  contain:layout paint style;
}

.section{
  position:absolute; left:0; width:100%;
  display:flex; align-items:center; justify-content:center;
}
/* ============================================================
   TRANSITION CROSSINGS — each one is unique
   ============================================================ */
.transition{
  position:absolute; left:0; width:100%;
  -webkit-mask-image:linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image:linear-gradient(transparent, #000 14%, #000 86%, transparent);
}

/* Forest Trail (spawn → forest): dirt path through tall grass */
.trans-trail{
  background:
    linear-gradient(90deg, transparent 0 40%, rgba(122,90,58,.85) 41% 59%, transparent 60%),
    linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.16));
}
.trans-trail::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(6px 14px at 20% 15%, #3f7a4a 98%, transparent),
    radial-gradient(6px 14px at 30% 45%, #56995f 98%, transparent),
    radial-gradient(6px 14px at 14% 75%, #3f7a4a 98%, transparent),
    radial-gradient(6px 14px at 74% 25%, #56995f 98%, transparent),
    radial-gradient(6px 14px at 84% 60%, #3f7a4a 98%, transparent),
    radial-gradient(6px 14px at 68% 88%, #56995f 98%, transparent);
  background-repeat:no-repeat;
}

/* The Old Bridge (forest → castle): planks over a misty river */
.trans-bridge{
  background:
    linear-gradient(90deg, transparent 0 34%, rgba(0,0,0,.35) 34% 35%, transparent 35% 65%, rgba(0,0,0,.35) 65% 66%, transparent 66%),
    linear-gradient(90deg, transparent 0 35%, #6d4f33 35% 65%, transparent 65%),
    linear-gradient(rgba(40,80,110,.35), rgba(30,60,90,.5));
  background-blend-mode:normal;
}
.trans-bridge::before{ /* plank lines */
  content:""; position:absolute; left:35%; right:35%; top:0; bottom:0;
  background:repeating-linear-gradient(0deg, transparent 0 42px, rgba(0,0,0,.3) 42px 47px);
}
.trans-bridge::after{ /* drifting mist */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(220px 60px at 20% 30%, rgba(235,242,246,.35), transparent 70%),
    radial-gradient(260px 70px at 75% 55%, rgba(235,242,246,.3), transparent 70%),
    radial-gradient(200px 55px at 40% 80%, rgba(235,242,246,.32), transparent 70%);
}
.lamp{ width:10px; height:70px; background:#2c2c38; }
.lamp::after{ content:""; position:absolute; top:-16px; left:-7px; width:24px; height:20px;
  background:var(--accent); border:3px solid #2c2c38;
  box-shadow:0 0 22px rgba(255,210,74,.75); }

/* Tower Stairs (castle → studio): dark stone, torchlit */
.trans-stairs{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 44px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 2px, transparent 2px 52px),
    linear-gradient(#221c2c, #191420);
}
.trans-stairs::before, .trans-stairs::after{ /* stepped side walls */
  content:""; position:absolute; top:0; bottom:0; width:120px;
  background:repeating-linear-gradient(0deg, #131019 0 34px, #1b1626 34px 68px);
}
.trans-stairs::before{ left:0; } .trans-stairs::after{ right:0; }
.torch{ width:8px; height:36px; background:#5b4023; border:2px solid #241708; }
.torch::after{
  content:""; position:absolute; top:-26px; left:-8px;
  width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent;
  border-bottom:26px solid var(--accent);
  filter:drop-shadow(0 0 16px rgba(255,180,60,.9));
}

/* Launch Elevator (studio → space): metal shaft, caution stripes */
.trans-elevator{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 64px),
    linear-gradient(90deg, rgba(0,0,0,.4) 0 8%, transparent 8% 92%, rgba(0,0,0,.4) 92%),
    linear-gradient(#39424f, #2b323d);
}
.trans-elevator::before, .trans-elevator::after{
  content:""; position:absolute; left:0; right:0; height:30px;
  background:repeating-linear-gradient(45deg, var(--accent) 0 18px, #14141f 18px 36px);
}
.trans-elevator::before{ top:11%; }
.trans-elevator::after{ bottom:11%; }

/* Sky Bridge (space → temple): glass walkway in the clouds */
.trans-skybridge{
  background:
    linear-gradient(90deg, transparent 0 38%, rgba(255,255,255,.18) 38% 62%, transparent 62%),
    linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.1));
}
.trans-skybridge::before{ /* walkway edge glow */
  content:""; position:absolute; top:0; bottom:0; left:38%; width:24%;
  border-left:3px solid rgba(255,255,255,.5);
  border-right:3px solid rgba(255,255,255,.5);
  box-shadow:0 0 26px rgba(200,225,255,.35);
}
.cloud{
  width:190px; height:56px; border-radius:40px;
  background:rgba(255,255,255,.55);
  box-shadow:34px -18px 0 -6px rgba(255,255,255,.5), -40px -12px 0 -10px rgba(255,255,255,.45);
  filter:blur(1px);
}
.cloud.c2{ transform:scale(.7); animation-delay:-7s; opacity:.8; }

/* ---------- signposts ---------- */
.sign{
  position:absolute; left:50%; transform:translateX(-50%);
  text-align:center; z-index:3;
}
.sign .plate{
  display:inline-block;
  font-family:var(--font-display);
  font-size:clamp(14px, 3.4vw, 30px);
  letter-spacing:2px;
  padding:18px 26px 16px;
  background:var(--ui-bg);
  border:4px solid var(--ui-border);
  box-shadow:0 6px 0 rgba(0,0,0,.45);
  position:relative;
}
.sign .plate::after{
  content:""; position:absolute; left:50%; bottom:-34px;
  width:12px; height:34px; transform:translateX(-50%);
  background:#5b4023;
  border:3px solid #2c1e10;
}
.sign .sub{
  display:inline-block;
  margin-top:46px;
  font-size:24px; letter-spacing:2px;
  color:var(--paper);
  background:rgba(13,13,20,.78);
  border:3px solid rgba(245,239,220,.4);
  padding:6px 16px 4px;
  text-shadow:
    2px 2px 0 rgba(0,0,0,.9),
   -1px -1px 0 rgba(0,0,0,.6);
}
.sign.near .plate{
  border-color:var(--accent2);
  box-shadow:0 0 0 3px rgba(110,231,168,.25), 0 6px 0 rgba(0,0,0,.45);
}

/* ---------- NPCs — sparse ambient storytellers ---------- */
.npc{
  position:absolute; z-index:2;
  width:48px; height:72px;
  margin-left:-24px;
  pointer-events:none;
}
.npc-body{ position:absolute; inset:0; }
.npc-shadow{
  position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  width:40px; height:10px; background:rgba(0,0,0,.28); border-radius:50%;
}
/* NPCs stand still when idle (no constant bob). They give a brief nod only
   while actively talking, which is a purposeful interaction cue. */
.npc.talking{ animation:npcbob .35s ease-in-out 2; }
.npc.near .npc-body::after{
  content:""; position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:8px; height:8px; background:var(--accent2); border-radius:50%;
  box-shadow:0 0 10px rgba(110,231,168,.75);
}
@keyframes npcbob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }

/* NPC silhouettes by role */
.npc-hiker .npc-body{
  background:
    linear-gradient(var(--paper) 0 0) 14px 8px / 20px 18px no-repeat,
    linear-gradient(#6b4a2a 0 0) 10px 26px / 28px 22px no-repeat,
    linear-gradient(var(--ink) 0 0) 16px 48px / 8px 18px no-repeat,
    linear-gradient(var(--ink) 0 0) 26px 48px / 8px 18px no-repeat;
}
.npc-hiker .npc-body::before{
  content:""; position:absolute; top:0; left:18px; width:12px; height:12px;
  background:var(--danger); clip-path:polygon(50% 0,100% 100%,0 100%);
}
.npc-ranger .npc-body{
  background:
    linear-gradient(#e9e2cc 0 0) 14px 6px / 20px 16px no-repeat,
    linear-gradient(#2d5c38 0 0) 8px 22px / 32px 26px no-repeat,
    linear-gradient(var(--ink) 0 0) 14px 48px / 9px 16px no-repeat,
    linear-gradient(var(--ink) 0 0) 26px 48px / 9px 16px no-repeat;
}
.npc-ranger .npc-body::before{
  content:""; position:absolute; top:18px; right:2px; width:14px; height:28px;
  background:#5b3f22; border:2px solid #241708; transform:rotate(12deg);
}
.npc-guard .npc-body{
  background:
    linear-gradient(#e9e2cc 0 0) 14px 6px / 20px 16px no-repeat,
    linear-gradient(#5f5b73 0 0) 8px 22px / 32px 28px no-repeat,
    linear-gradient(var(--ink) 0 0) 14px 50px / 9px 14px no-repeat,
    linear-gradient(var(--ink) 0 0) 26px 50px / 9px 14px no-repeat;
}
.npc-guard .npc-body::before{
  content:""; position:absolute; top:20px; left:4px; width:8px; height:34px;
  background:#8a8a95; border:3px solid #4a4a55;
}
.npc-coder .npc-body{
  background:
    linear-gradient(#e9e2cc 0 0) 14px 6px / 20px 16px no-repeat,
    linear-gradient(#4a90d9 0 0) 10px 22px / 28px 24px no-repeat,
    linear-gradient(var(--ink) 0 0) 14px 46px / 9px 16px no-repeat,
    linear-gradient(var(--ink) 0 0) 26px 46px / 9px 16px no-repeat;
}
.npc-coder .npc-body::after{
  content:""; position:absolute; top:28px; left:30px; width:16px; height:12px;
  background:#0f1522; border:2px solid #2b2b36;
  box-shadow:inset 0 0 6px rgba(110,231,168,.6);
}
.npc-pilot .npc-body{
  background:
    linear-gradient(#e9e2cc 0 0) 14px 6px / 20px 16px no-repeat,
    linear-gradient(#f5efdc 0 0) 8px 22px / 32px 28px no-repeat,
    linear-gradient(var(--ink) 0 0) 14px 50px / 9px 14px no-repeat,
    linear-gradient(var(--ink) 0 0) 26px 50px / 9px 14px no-repeat;
}
.npc-pilot .npc-body::before{
  content:""; position:absolute; top:4px; left:10px; width:28px; height:10px;
  background:#8fd3f4; border:2px solid #2b2b36; border-radius:6px 6px 0 0;
}
.npc-mystic .npc-body{
  background:
    linear-gradient(#e9e2cc 0 0) 14px 6px / 20px 16px no-repeat,
    linear-gradient(#6e5a94 0 0) 8px 22px / 32px 30px no-repeat,
    linear-gradient(var(--ink) 0 0) 14px 52px / 9px 12px no-repeat,
    linear-gradient(var(--ink) 0 0) 26px 52px / 9px 12px no-repeat;
}
.npc-mystic .npc-body::before{
  content:""; position:absolute; top:-4px; left:16px; width:16px; height:16px;
  border-radius:50%; background:radial-gradient(circle at 40% 35%,#fff,var(--accent) 70%);
  box-shadow:0 0 12px rgba(255,210,74,.7);
}
.npc-angler .npc-body{
  background:
    linear-gradient(#e9e2cc 0 0) 14px 8px / 20px 16px no-repeat,
    linear-gradient(#4a6a8a 0 0) 10px 24px / 28px 22px no-repeat,
    linear-gradient(var(--ink) 0 0) 16px 46px / 8px 16px no-repeat,
    linear-gradient(var(--ink) 0 0) 26px 46px / 8px 16px no-repeat;
}
.npc-angler .npc-body::before{
  content:""; position:absolute; top:10px; right:-6px; width:4px; height:44px;
  background:#5b4023; transform:rotate(-18deg);
}
.npc-angler .npc-body::after{
  content:""; position:absolute; top:6px; right:-18px; width:18px; height:10px;
  border:2px solid rgba(200,220,240,.5); border-radius:50%;
}

/* ---------- ambient decor (sparse life) ---------- */
.lantern-post{ width:16px; height:70px; background:#5b3f22; border:3px solid #241708; }
/* lantern-glow styles moved to the AMBIENT LIFE block below */

.stump{ width:54px; height:28px; background:#6b4a2a; border:4px solid #241708; border-radius:6px 6px 4px 4px; }
.stump::after{
  content:""; position:absolute; top:-22px; right:-8px; width:6px; height:28px;
  background:#5b4023; border:2px solid #241708; transform:rotate(24deg);
}

.bird{ width:22px; height:16px; }
.bird::before{
  content:""; position:absolute; left:0; top:4px;
  width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent;
  border-right:14px solid #2a2a38;
}
.bird::after{
  content:""; position:absolute; left:10px; top:0;
  width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent;
  border-bottom:10px solid #2a2a38;
}
.bird{ animation:birdpeck 4s ease-in-out infinite; }
@keyframes birdpeck{ 0%,88%,100%{ transform:translateY(0); } 92%{ transform:translateY(2px); } }

.fern{ width:36px; height:28px;
  background:radial-gradient(ellipse at 50% 80%,#3f8a55 30%,transparent 32%),
             radial-gradient(ellipse at 30% 60%,#2d6b3d 28%,transparent 30%),
             radial-gradient(ellipse at 70% 60%,#2d6b3d 28%,transparent 30%);
}
.fern.f2{ transform:scale(.8); }

.cat{ width:34px; height:20px; background:#8a8a95; border:3px solid #4a4a55; border-radius:12px 12px 6px 6px; }
.cat::before{ content:""; position:absolute; left:4px; top:-8px; width:0; height:0;
  border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:10px solid #8a8a95; box-shadow:14px 0 0 #8a8a95; }
.cat::after{ content:""; position:absolute; right:-10px; top:4px; width:16px; height:6px;
  background:#8a8a95; border-radius:0 8px 8px 0; transform-origin:left center; animation:tailflick 5s ease-in-out infinite; }
@keyframes tailflick{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(14deg); } }

.barrel{ width:40px; height:48px; background:#6b4a2a; border:4px solid #3c2c1c; border-radius:6px; }
.barrel::before{ content:""; position:absolute; left:4px; right:4px; top:14px; height:4px; background:#3c2c1c; box-shadow:0 14px 0 #3c2c1c; }

.mug{ width:18px; height:16px; background:#f5efdc; border:3px solid #3c2c1c; border-radius:0 0 6px 6px; }
.mug::after{ content:""; position:absolute; right:-10px; top:4px; width:10px; height:10px;
  border:3px solid #3c2c1c; border-left:none; border-radius:0 6px 6px 0; }
.cable{ width:80px; height:6px; background:#2b2b36; border-radius:3px; transform:rotate(-8deg); }
.cable::after{ content:""; position:absolute; right:-8px; top:-4px; width:12px; height:12px; border-radius:50%; background:var(--accent2); opacity:.7; }

.cable-run{ width:120px; height:8px; background:repeating-linear-gradient(90deg,#3a4250 0 16px,#2b3140 16px 20px); border:2px solid #1a1f28; transform:rotate(6deg); }

.mote{ width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 40% 35%,#fff,var(--accent) 80%);
  box-shadow:0 0 14px rgba(255,210,74,.55); animation:motedrift 6s ease-in-out infinite; }
.mote.m2{ animation-delay:-3s; transform:scale(.75); }
.mote.m3{ animation-delay:-5.2s; transform:scale(.55); background:radial-gradient(circle at 40% 35%,#fff,#b8a0ff 80%); box-shadow:0 0 10px rgba(180,160,255,.6); }
@keyframes motedrift{ 0%,100%{ transform:translate(0,0); opacity:.7; } 50%{ transform:translate(6px,-10px); opacity:1; } }

/* Studio sticky notes */
.sticky{ width:20px; height:20px; background:var(--accent); }
.sticky.s2{ background:#ff9a3d; margin-top:-2px; }

/* Space station warning lights */
.warn-light{ width:12px; height:12px; border-radius:50%; background:var(--danger);
  box-shadow:0 0 8px rgba(255,107,107,.7); animation:warnblink 2s steps(1) infinite; }
.warn-light.wl2{ background:#ffd24a; box-shadow:0 0 8px rgba(255,210,74,.7); animation-delay:-1s; }
@keyframes warnblink{ 50%{ opacity:.15; } }

.rod-rack{ width:8px; height:50px; background:#5b4023; border:2px solid #241708; }
.rod-rack::after{ content:""; position:absolute; top:-8px; left:-4px; width:16px; height:8px;
  border:2px solid rgba(200,220,240,.45); border-radius:50%; }

/* ---------- biome decor (simple CSS shapes) ---------- */
.decor{ position:absolute; pointer-events:none; }

/* forest trees */
.tree{ width:0; height:0; border-left:46px solid transparent; border-right:46px solid transparent; border-bottom:120px solid #1d5c33; filter:drop-shadow(0 8px 0 rgba(0,0,0,.35)); }
.tree::after{ content:""; position:absolute; left:-8px; top:118px; width:16px; height:34px; background:#4a3320; }
.tree.t2{ transform:scale(1.35); border-bottom-color:#17492a; }
.tree.t3{ transform:scale(.8); border-bottom-color:#2a7343; }

/* castle blocks */
.tower{ width:90px; height:260px; background:#5f5b73; border:4px solid #33303f;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0,0,0,.15) 2px, transparent 2px);
  background-size:100% 26px, 30px 100%;
}
.tower::before{ content:""; position:absolute; top:-22px; left:-4px; right:-4px; height:22px;
  background:repeating-linear-gradient(90deg,#33303f 0 18px, transparent 18px 36px); }
.tower .flag{ position:absolute; top:-64px; left:50%; width:4px; height:44px; background:#2c1e10; }
.tower .flag::after{ content:""; position:absolute; top:0; left:4px; border-top:12px solid transparent; border-bottom:12px solid transparent; border-left:26px solid var(--danger); }

/* studio desk */
.desk{ width:200px; height:90px; background:#7a5a3a; border:4px solid #3c2c1c; }
.desk .screen{ position:absolute; top:-74px; left:34px; width:110px; height:70px; background:#0f1522; border:5px solid #2b2b36; box-shadow:inset 0 0 18px rgba(110,231,168,.7); }
.desk .screen::after{ content:"> _"; position:absolute; left:8px; top:6px; color:var(--accent2); font-family:var(--font-body); font-size:20px; animation:blinkc 1.2s steps(1) infinite; }
@keyframes blinkc{ 50%{ opacity:.2; } }

/* space props */
.planet{ width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #b78bff, #5a3fa8 62%, #2a1d55);
  box-shadow:0 0 40px rgba(150,110,255,.35); }
.planet::after{ content:""; position:absolute; left:-30px; top:56px; width:200px; height:26px;
  border:4px solid rgba(220,200,255,.6); border-radius:50%; transform:rotate(-18deg); }
.porthole{ width:110px; height:110px; border-radius:50%; background:#0a1030; border:8px solid #4a5570; box-shadow:inset 0 0 30px rgba(120,160,255,.5); }

/* temple platforms */
.platform{ width:220px; height:34px; background:#d9c9ef; border:4px solid #6e5a94;
  box-shadow:0 10px 0 rgba(0,0,0,.15); }
.platform::after{ content:""; position:absolute; left:24px; top:-44px; width:20px; height:44px; background:#b9a3dd; border:4px solid #6e5a94; }
.platform.p2{ animation-delay:-2.5s; transform:scale(.8); }

/* spawn campfire */
.campfire{ width:70px; height:26px; background:#4a3320; border:4px solid #241708; border-radius:6px; }
.campfire .flame{ position:absolute; left:50%; top:-46px; transform:translateX(-50%);
  width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent;
  border-bottom:48px solid var(--accent); filter:drop-shadow(0 0 8px rgba(255,180,60,.75));
  animation:flick .5s steps(2) infinite; will-change:transform,opacity; }
.campfire .log{ position:absolute; top:14px; width:44px; height:9px; background:#5b3f22; border:3px solid #241708; }
.campfire .log.l1{ left:-16px; transform:rotate(18deg); }
.campfire .log.l2{ right:-16px; transform:rotate(-18deg); }
@keyframes flick{ 50%{ transform:translateX(-50%) scale(1.1,.92); opacity:.82; } }

/* ============================================================
   BIOME SCENERY (added detail per land)
   ============================================================ */

/* ground strips */
.ground{ height:60px; z-index:0; }
.ground.g-grass{ background:linear-gradient(#3f8a4d,#2c6b3a); box-shadow:inset 0 6px 0 rgba(255,255,255,.12); }
.ground.g-forest{ background:linear-gradient(#2f6b3d,#1d4a2a); box-shadow:inset 0 6px 0 rgba(160,220,170,.14); }
.ground.g-stone{ height:52px; background:repeating-linear-gradient(90deg,#6b6577 0 40px,#5b5668 40px 80px); border-top:5px solid #3a3646; }
.ground.g-floor{ height:48px; background:repeating-linear-gradient(90deg,#8a6a44 0 44px,#7a5c3a 44px 88px); border-top:4px solid #4a3826; }

/* tent (campsite) */
.tent{ width:0; height:0; border-left:80px solid transparent; border-right:80px solid transparent;
  border-bottom:96px solid var(--danger); filter:drop-shadow(0 8px 0 rgba(0,0,0,.3)); }
.tent::before{ content:""; position:absolute; left:-8px; top:40px; border-left:22px solid transparent; border-right:22px solid transparent; border-bottom:56px solid #2a1d40; }
.tent::after{ content:""; position:absolute; left:-92px; top:92px; width:184px; height:8px; background:#3a2b1a; }

.rock{ width:52px; height:34px; background:#8a8a95; border:4px solid #4a4a55; border-radius:26px 26px 8px 8px; }
.rock.r2{ transform:scale(.7); }
.logpost{ width:16px; height:70px; background:#5b3f22; border:3px solid #241708; }
.logpost::after{ content:""; position:absolute; top:-6px; left:-9px; width:34px; height:12px; background:#6b4a2a; border:3px solid #241708; }

.bush{ width:70px; height:44px; background:radial-gradient(circle at 30% 30%,#3f8a55,#245c38); border-radius:40px 40px 12px 12px; box-shadow:0 6px 0 rgba(0,0,0,.2); }
.cloud-bg{ width:150px; height:40px; border-radius:30px; background:rgba(255,255,255,.5);
  box-shadow:30px -14px 0 -4px rgba(255,255,255,.45),-34px -8px 0 -8px rgba(255,255,255,.4); filter:blur(.6px); }
.cloud-bg.c2{ transform:scale(.7); opacity:.8; }
body[data-time="night"] .cloud-bg{ opacity:.25; }

/* forest extras */
.tree.tb{ transform:scale(.55); opacity:.55; filter:none; border-bottom-color:#16402580; }
body[data-time="night"] .tree.tb{ opacity:.4; }
.mushroom{ width:22px; height:16px; background:var(--danger); border:3px solid #5a1a1a; border-radius:16px 16px 0 0; }
.mushroom::after{ content:""; position:absolute; left:6px; top:14px; width:8px; height:14px; background:#e9e2cc; }
.mushroom.m2{ transform:scale(.8); filter:hue-rotate(40deg); }
.log-fallen{ width:180px; height:30px; background:#5b3f22; border:4px solid #241708; border-radius:16px; }
.log-fallen::after{ content:""; position:absolute; left:-2px; top:2px; width:22px; height:22px; border-radius:50%; background:#6b4a2a; border:3px solid #241708; }

/* castle extras */
.gatehouse{ width:180px; height:220px; background:#5f5b73; border:4px solid #33303f;
  background-image:linear-gradient(rgba(0,0,0,.12) 2px,transparent 2px),linear-gradient(90deg,rgba(0,0,0,.12) 2px,transparent 2px);
  background-size:100% 28px,32px 100%; }
.gatehouse::before{ content:""; position:absolute; top:-20px; left:-4px; right:-4px; height:20px;
  background:repeating-linear-gradient(90deg,#33303f 0 20px,transparent 20px 40px); }
.gatehouse .gate-door{ position:absolute; left:50%; bottom:0; width:80px; height:120px; margin-left:-40px;
  background:#2a1d10; border:5px solid #4a3620; border-radius:40px 40px 0 0; box-shadow:inset 0 0 20px rgba(0,0,0,.8); }
.wall{ height:120px; background:repeating-linear-gradient(90deg,#5b5668 0 46px,#524d60 46px 92px); border-top:5px solid #33303f; border-bottom:5px solid #33303f; opacity:.9; }
.wall::before{ content:""; position:absolute; top:-18px; left:0; right:0; height:18px; background:repeating-linear-gradient(90deg,#33303f 0 22px,transparent 22px 44px); }
.banner{ width:38px; height:96px; background:#8a2740; border:3px solid #4a1424;
  clip-path:polygon(0 0,100% 0,100% 84%,50% 100%,0 84%);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.06); }
.banner::before{ content:""; position:absolute; left:50%; top:14px; transform:translateX(-50%);
  width:16px; height:16px; background:var(--accent);
  clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%); }
.banner::after{ content:""; position:absolute; left:50%; top:40px; transform:translateX(-50%);
  width:4px; height:30px; background:var(--accent); opacity:.85; }
.banner.b2{ background:#2f4a8a; border-color:#182a52; }
.banner.b2::before, .banner.b2::after{ background:#8fd3f4; }
.torch-wall{ width:8px; height:30px; background:#5b4023; border:2px solid #241708; }
.torch-wall::after{ content:""; position:absolute; top:-22px; left:-8px; width:0; height:0;
  border-left:12px solid transparent; border-right:12px solid transparent; border-bottom:24px solid var(--accent);
  filter:drop-shadow(0 0 8px rgba(255,180,60,.85)); }

/* studio extras */
.desk .screen.s2{ left:auto; right:34px; box-shadow:inset 0 0 18px rgba(140,200,255,.7); }
.desk .screen.s2::after{ content:"< >"; color:#8fd3f4; }
.whiteboard{ width:160px; height:100px; background:#eee; border:6px solid #444;
  background-image:linear-gradient(90deg,transparent 40%,#4a90d9 40% 42%,transparent 42%),linear-gradient(#eee,#e0e0e0); }
.whiteboard::after{ content:""; position:absolute; left:14px; top:16px; width:60px; height:8px; background:#d9534f;
  box-shadow:0 18px 0 #5cb85c,0 36px 0 #4a90d9; }
.shelf{ width:120px; height:90px; background:#6b4a2a; border:4px solid #3c2c1c;
  background-image:linear-gradient(#3c2c1c 3px,transparent 3px); background-size:100% 30px; }
.shelf::after{ content:""; position:absolute; left:10px; top:6px; width:12px; height:22px; background:var(--danger);
  box-shadow:18px 0 0 #4a90d9,36px 2px 0 var(--accent2),58px -2px 0 #ffd24a,10px 30px 0 #8fd3f4,30px 30px 0 var(--danger); }
.plant{ width:40px; height:44px; background:#5b3f22; border:3px solid #241708; border-radius:0 0 8px 8px; }
.plant::after{ content:""; position:absolute; left:-6px; top:-38px; width:52px; height:44px;
  background:radial-gradient(circle at 40% 60%,#3f8a55,#245c38); border-radius:50% 50% 40% 40%; }
.plant.p2{ transform:scale(.8); }
.poster{ width:60px; height:80px; background:linear-gradient(135deg,#2a2050,#8fd3f4); border:4px solid #e9e2cc; }
.poster::after{ content:"★"; position:absolute; inset:0; display:grid; place-items:center; color:var(--accent); font-size:22px; }
.arcade{ width:64px; height:120px; background:#2a2050; border:4px solid #16112e; border-radius:10px 10px 4px 4px; }
.arcade::before{ content:""; position:absolute; top:12px; left:10px; right:10px; height:44px; background:#0f1522; border:3px solid #4a90d9; box-shadow:inset 0 0 14px rgba(110,231,168,.8); }
.arcade::after{ content:""; position:absolute; bottom:26px; left:16px; width:14px; height:14px; border-radius:50%; background:var(--danger); box-shadow:24px 0 0 var(--accent); }

/* space extras */
.planet.pm{ width:80px; height:80px; background:radial-gradient(circle at 34% 30%,#8fd3f4,#3a5a8a 62%,#1a2a4a); box-shadow:0 0 30px rgba(120,180,255,.35); }
.planet.pm::after{ display:none; }
.console{ width:140px; height:80px; background:#2b3242; border:4px solid #4a5570; border-radius:8px 8px 0 0; }
.console::before{ content:""; position:absolute; top:10px; left:12px; right:12px; height:34px; background:#0a1030; border:3px solid #4a90d9; box-shadow:inset 0 0 16px rgba(120,160,255,.6); }
.console::after{ content:""; position:absolute; bottom:10px; left:16px; width:10px; height:10px; border-radius:50%; background:var(--accent2); box-shadow:20px 0 0 var(--accent),40px 0 0 var(--danger); animation:blinkc 1.4s steps(1) infinite; }
.console.cr::before{ box-shadow:inset 0 0 16px rgba(183,139,255,.6); border-color:#b78bff; }
.satellite{ width:60px; height:24px; background:#8a8f9c; border:3px solid #4a4f5c; }
.satellite::before{ content:""; position:absolute; left:-40px; top:2px; width:36px; height:16px; background:repeating-linear-gradient(90deg,#4a90d9 0 6px,#2a5a9a 6px 12px); border:2px solid #16326a; }
.satellite::after{ content:""; position:absolute; right:-40px; top:2px; width:36px; height:16px; background:repeating-linear-gradient(90deg,#4a90d9 0 6px,#2a5a9a 6px 12px); border:2px solid #16326a; }
.pipe{ width:34px; height:200px; background:repeating-linear-gradient(0deg,#3a4250 0 24px,#2b3140 24px 30px); border:3px solid #1a1f28; }

/* temple extras */
.arch{ width:180px; height:120px; border:14px solid #d9c9ef; border-bottom:none; border-radius:90px 90px 0 0; box-shadow:0 0 24px rgba(200,180,255,.4); }
.pillar{ width:34px; height:120px; background:linear-gradient(90deg,#e6d9ff,#c9b3e6); border:4px solid #6e5a94; }
.pillar::before{ content:""; position:absolute; top:-10px; left:-8px; right:-8px; height:12px; background:#d9c9ef; border:3px solid #6e5a94; }
.pillar::after{ content:""; position:absolute; bottom:-10px; left:-8px; right:-8px; height:12px; background:#d9c9ef; border:3px solid #6e5a94; }
.isle{ width:120px; height:44px; background:#c9b3e6; border:4px solid #6e5a94; border-radius:50% 50% 40% 40%; }
.isle::after{ content:""; position:absolute; left:20px; top:-18px; width:30px; height:18px; background:#3f8a55; border-radius:50% 50% 0 0; }
.isle.i2{ transform:scale(.75); }
.orb{ width:26px; height:26px; border-radius:50%; background:radial-gradient(circle at 40% 35%,#fff,var(--accent) 70%);
  box-shadow:0 0 26px rgba(255,210,74,.8); }

/* ============================================================
   AMBIENT LIFE — new sparse environmental details
   ============================================================ */

/* Moon in the sky (night only, always above world) */
#sky-moon{
  position:fixed; top:8%; right:12%; z-index:1;
  width:52px; height:52px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff 0%, #e8e0d0 55%, #c8c0a8 100%);
  box-shadow:0 0 30px rgba(240,235,220,.55), 0 0 60px rgba(200,195,180,.2);
  opacity:0;
  transition:opacity 2.4s ease;
  pointer-events:none;
}
body[data-time="night"] #sky-moon{ opacity:1; }
/* craters */
#sky-moon::before{
  content:""; position:absolute;
  width:10px; height:10px; border-radius:50%; top:26%; left:38%;
  background:rgba(0,0,0,.1); box-shadow:16px 14px 0 5px rgba(0,0,0,.07), -4px 20px 0 3px rgba(0,0,0,.08);
}

/* Shooting star (night only, rare CSS animation) */
#sky-moon::after{
  content:""; position:fixed; z-index:1;
  top:5%; right:30%;
  width:120px; height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,240,.9), transparent);
  border-radius:1px;
  opacity:0;
  transform:rotate(-30deg) translateX(-200px);
  animation:shootingstar 14s 6s ease-out infinite;
  pointer-events:none;
}
body[data-time="night"] #sky-moon::after{ animation:shootingstar 14s 6s ease-out infinite; }
body:not([data-time="night"]) #sky-moon::after{ animation:none; }
@keyframes shootingstar{
  0%   { opacity:0; transform:rotate(-30deg) translateX(-200px); }
  3%   { opacity:1; }
  8%   { opacity:0; transform:rotate(-30deg) translateX(300px); }
  100% { opacity:0; transform:rotate(-30deg) translateX(300px); }
}

/* Forest fireflies (small dots, night only) */
.firefly{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:radial-gradient(circle, #d8ffb0, #9aff6e 60%, transparent);
  box-shadow:0 0 6px rgba(180,255,120,.7);
  opacity:0; pointer-events:none;
  animation:fireflyFloat 7s ease-in-out infinite;
}
.firefly.ff2{ animation-delay:-2.3s; animation-duration:9s; }
.firefly.ff3{ animation-delay:-4.8s; animation-duration:8s; }
.firefly.ff4{ animation-delay:-1.1s; animation-duration:6s; }
body:not([data-time="night"]) .firefly{ opacity:0 !important; animation:none; }
@keyframes fireflyFloat{
  0%  { opacity:0; transform:translate(0,0); }
  20% { opacity:.9; }
  50% { opacity:.5; transform:translate(var(--fdx, 18px), var(--fdy, -22px)); }
  80% { opacity:.9; }
  100%{ opacity:0; transform:translate(var(--fdx2, -8px), var(--fdy2, 12px)); }
}

/* Lantern glow — richer at night with a soft corona */
.lantern-post .lantern-glow{
  position:absolute; top:-18px; left:-10px; width:32px; height:22px;
  background:var(--accent); border:3px solid #2c2c38;
  box-shadow:0 0 0 rgba(255,210,74,0);
  opacity:0; transition:opacity 1.8s ease, box-shadow 1.8s ease;
}
body[data-time="night"] .lantern-post .lantern-glow{
  opacity:1;
  box-shadow:0 0 22px rgba(255,210,74,.75), 0 0 50px rgba(255,180,60,.25);
  animation:lanternpulse 3s ease-in-out infinite;
}
@keyframes lanternpulse{ 0%,100%{ opacity:.85; } 50%{ opacity:1; } }

/* Torch flicker on castle walls — extra glow at night */
body[data-time="night"] .torch-wall::after,
body[data-time="night"] .torch::after{
  filter:drop-shadow(0 0 12px rgba(255,180,60,.95));
}

/* Night: mushrooms faintly glow in the forest */
body[data-time="night"] .mushroom{
  box-shadow:0 0 12px rgba(255,80,80,.35);
  filter:brightness(1.1);
}
body[data-time="night"] .mushroom.m2{
  box-shadow:0 0 12px rgba(255,160,80,.35);
}

/* Night: temple orbs pulse brighter */
body[data-time="night"] .orb{
  box-shadow:0 0 36px rgba(255,210,74,.9), 0 0 70px rgba(255,180,60,.3);
  animation:orbpulsenight 2.5s ease-in-out infinite;
}
@keyframes orbpulsenight{
  0%,100%{ box-shadow:0 0 28px rgba(255,210,74,.75); }
  50%{ box-shadow:0 0 52px rgba(255,210,74,1), 0 0 90px rgba(255,180,60,.4); }
}

/* Night: arcade screen glows more, console blink faster */
body[data-time="night"] .arcade::before{
  box-shadow:inset 0 0 22px rgba(110,231,168,1), 0 0 14px rgba(110,231,168,.4);
}
body[data-time="night"] .desk .screen{
  box-shadow:inset 0 0 24px rgba(110,231,168,.85), 0 0 10px rgba(110,231,168,.25);
}

/* Night: space station porthole glow */
body[data-time="night"] .porthole{
  box-shadow:inset 0 0 40px rgba(120,160,255,.7), 0 0 20px rgba(120,160,255,.3);
}

/* Faint star above lantern post at night */
.lantern-post::before{
  content:""; position:absolute; top:-48px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:#fff;
  box-shadow:0 0 4px rgba(255,255,255,.6);
  opacity:0; transition:opacity 2s ease;
}
body[data-time="night"] .lantern-post::before{ opacity:.7; }

/* Campfire smoke (day only, night the fire dims)
   Note: .campfire already has position set by parent context.
   We use .flame::before for the smoke so it stacks correctly */
.campfire .flame::before{
  content:""; position:absolute; left:50%; top:-38px; transform:translateX(-50%);
  width:10px; height:34px;
  background:linear-gradient(transparent, rgba(200,180,160,.3) 40%, transparent);
  border-radius:50%;
  animation:smokedrift 4s ease-in-out infinite;
  pointer-events:none;
}
body[data-time="night"] .campfire .flame::before{ opacity:.15; }
@keyframes smokedrift{
  0%,100%{ transform:translateX(-50%) translateY(0) scaleX(1); opacity:.35; }
  50%    { transform:translateX(calc(-50% + 5px)) translateY(-8px) scaleX(1.3); opacity:.15; }
}
/* Night: campfire flame flickers a little slower and dimmer */
body[data-time="night"] .campfire .flame{
  filter:brightness(.8);
}

/* Bird hides at night */
body[data-time="night"] .bird{ opacity:0; transition:opacity 2s ease; }
body:not([data-time="night"]) .bird{ opacity:1; transition:opacity 2s ease; }

/* New NPC types */
.npc-scout .npc-body{
  background:
    linear-gradient(#e9e2cc 0 0) 14px 6px / 20px 16px no-repeat,
    linear-gradient(#8a5c3a 0 0) 8px 22px / 32px 26px no-repeat,
    linear-gradient(var(--ink) 0 0) 14px 48px / 9px 16px no-repeat,
    linear-gradient(var(--ink) 0 0) 26px 48px / 9px 16px no-repeat;
}
.npc-scout .npc-body::before{
  content:""; position:absolute; top:-4px; left:14px; width:20px; height:10px;
  background:#5b3f22; border:2px solid #241708; border-radius:4px 4px 0 0;
}
.npc-scout .npc-body::after{
  content:""; position:absolute; top:24px; left:-2px; width:6px; height:22px;
  background:#7a9a5a; border:2px solid #3a5a2a; transform:rotate(-10deg);
}

.npc-scholar .npc-body{
  background:
    linear-gradient(#e9e2cc 0 0) 14px 6px / 20px 18px no-repeat,
    linear-gradient(#3a3a6a 0 0) 8px 24px / 32px 26px no-repeat,
    linear-gradient(var(--ink) 0 0) 14px 50px / 9px 14px no-repeat,
    linear-gradient(var(--ink) 0 0) 26px 50px / 9px 14px no-repeat;
}
.npc-scholar .npc-body::before{
  content:""; position:absolute; top:26px; right:-2px; width:14px; height:18px;
  background:#f5efdc; border:2px solid #3c2c1c;
}
.npc-scholar .npc-body::after{
  content:""; position:absolute; top:2px; left:8px; width:32px; height:6px;
  background:#3a3a6a; border-radius:6px 6px 0 0; border:2px solid #22224a;
}

.npc-merchant .npc-body{
  background:
    linear-gradient(#e9e2cc 0 0) 14px 6px / 20px 18px no-repeat,
    linear-gradient(#8a7a3a 0 0) 8px 24px / 32px 26px no-repeat,
    linear-gradient(var(--ink) 0 0) 14px 50px / 9px 14px no-repeat,
    linear-gradient(var(--ink) 0 0) 26px 50px / 9px 14px no-repeat;
}
.npc-merchant .npc-body::before{
  content:""; position:absolute; top:20px; left:-6px; width:16px; height:24px;
  background:#6b4a2a; border:2px solid #241708; border-radius:3px;
  box-shadow:2px 4px 0 rgba(0,0,0,.3);
}
.npc-merchant .npc-body::after{
  content:""; position:absolute; top:4px; left:14px; width:12px; height:8px;
  background:var(--accent); border:2px solid #a35b00; border-radius:50% 50% 0 0;
}

/* Idle look-around — NPCs subtly shift their shadow to hint at a glance */
/* (NPC idle brightness-blink removed — it repainted every NPC constantly,
   which cost performance, and NPCs should stand still when idle.) */

/* ---- travel portal: a small purple black hole ----
   Size scales with the viewport so it has the same proportional impact on
   every screen — on desktop a fixed 150px hole looked tiny and lost, while
   on phones it filled the screen and read much better. clamp() gives the
   phone-sized drama everywhere. */
.portal{
  position:absolute;
  /* Fixed size on every device so the suck-in distance always lands Vaugn
     dead-centre in the hole. (Previously this scaled up to 300px on desktop
     while the slide stayed ~96px, so on big screens he only reached the
     rim — the phone's smaller portal looked far better, so we match it.) */
  width:150px; height:150px;
  margin-left:-75px; margin-top:-75px;
  z-index:4; pointer-events:none;
  transform:scale(0) rotate(-140deg); opacity:0;
  transition:transform .5s cubic-bezier(.2,1.4,.4,1), opacity .3s ease;
}
.portal.open{ transform:scale(1) rotate(0deg); opacity:1; }
.portal.open.feeding{ transform:scale(1.16); }   /* swells as it swallows Vaugn */
.portal.closing{
  transition:transform .34s cubic-bezier(.6,-.45,.8,.5), opacity .3s ease .04s;
  transform:scale(0) rotate(160deg); opacity:0;
}
.portal, .portal > div{
  /* The black-hole layers are smooth gradients + blur, not pixel-art, so
     override the body's global `image-rendering:pixelated` — otherwise on
     standard-DPI desktops the purple disk renders blocky/banded while phones
     (high-DPI) look smooth. This makes the portal identical on every device. */
  image-rendering:auto;
}
.portal > div{ position:absolute; border-radius:50%; }

/* gravitational halo — light bending around the hole */
.bh-halo{
  inset:-38px;
  background:radial-gradient(closest-side,
    transparent 40%, rgba(150,90,235,.36) 54%, rgba(80,40,170,.16) 70%, transparent 84%);
  filter:blur(6px);
  animation:bhpulse 2.2s ease-in-out infinite;
}
/* accretion disk — bright ring of infalling matter, tilted & spinning */
.bh-disk{
  inset:0;
  background:conic-gradient(from 0deg,
    #e2c8ff, #8b3ff0 16%, #2a0a5e 32%, #b878ff 50%,
    #3d1288 68%, #f0e0ff 84%, #e2c8ff);
  -webkit-mask:radial-gradient(circle, transparent 40%, #000 47%, #000 96%, transparent 100%);
  mask:radial-gradient(circle, transparent 40%, #000 47%, #000 96%, transparent 100%);
  filter:blur(1px) saturate(1.35) brightness(1.12);
  box-shadow:0 0 38px rgba(150,80,255,.72), 0 0 82px rgba(110,50,220,.4);
  animation:bhspin 1.3s linear infinite;
}
/* inner spiral — matter whipping inward faster, opposite direction */
.bh-spiral{
  inset:15px;
  background:conic-gradient(from 90deg,
    transparent, rgba(210,170,255,.95) 18%, transparent 40%,
    rgba(150,90,255,.75) 62%, transparent 84%);
  -webkit-mask:radial-gradient(circle, transparent 30%, #000 38%, #000 90%, transparent 100%);
  mask:radial-gradient(circle, transparent 30%, #000 38%, #000 90%, transparent 100%);
  filter:blur(2px);
  animation:bhspin .6s linear infinite reverse;
}
/* event horizon — pure black core that swallows the light */
.bh-core{
  inset:38px;
  background:radial-gradient(circle at 50% 46%, #000 60%, #14062c 86%, transparent 100%);
  box-shadow:0 0 26px 12px rgba(0,0,0,.9), inset 0 0 18px rgba(120,60,220,.5);
}
/* thin lensing rim right at the edge of darkness */
.bh-core::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:2px solid rgba(216,182,255,.95);
  box-shadow:0 0 16px rgba(190,130,255,.85), inset 0 0 9px rgba(190,130,255,.6);
  animation:bhpulse 1s ease-in-out infinite;
}
@keyframes bhspin{ to{ transform:rotate(360deg); } }
@keyframes bhpulse{ 0%,100%{ opacity:.65; } 50%{ opacity:1; } }

/* Vaugn spaghettifying as gravity drags him in, then flung back out */
@keyframes suckIn{
  0%   { transform:translate(0,0) scale(1) rotate(0deg); opacity:1; }
  55%  { transform:translate(64px,-3px) scaleX(.5) scaleY(1.28) rotate(170deg); opacity:1; }
  100% { transform:translate(96px,-5px) scaleX(.04) scaleY(.1) rotate(450deg); opacity:0; }
}
@keyframes spitOut{
  0%   { transform:translate(96px,-5px) scaleX(.04) scaleY(.1) rotate(-450deg); opacity:0; }
  55%  { transform:translate(52px,-3px) scaleX(.62) scaleY(1.22) rotate(-160deg); opacity:1; }
  100% { transform:translate(0,0) scale(1) rotate(0deg); opacity:1; }
}

/* secret door */
#secret-door{
  position:absolute; left:calc(50% + 150px); width:84px; height:120px;
  background:#241a33; border:5px solid var(--accent);
  box-shadow:0 0 30px rgba(255,210,74,.55), inset 0 0 24px rgba(255,210,74,.3);
  z-index:3; animation:doorin .8s ease-out;
}
#secret-door::after{ content:"?"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-display); font-size:30px; color:var(--accent); }
@keyframes doorin{ from{ transform:scale(0); } to{ transform:scale(1); } }

/* ============================================================
   MASCOT — placeholder character
   Swap in real sprite sheets via js/config.js ANIMATIONS
   ============================================================ */
#mascot{
  position:absolute; left:50%; top:0;
  width:64px; height:96px;
  margin-left:-32px;
  z-index:5;
  will-change:transform;
}
#mascot .hop{ position:relative; width:100%; height:100%; }
#mascot .shadow{
  position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
  width:52px; height:12px; background:rgba(0,0,0,var(--shadow-op)); border-radius:50%;
}

.sprite{ position:absolute; inset:0; }

/* When a real sheet is set, JS adds .sheet-mode and hides the placeholder */
.sprite.sheet-mode .px-char,
.sprite.gif-mode .px-char{ display:none; }
.sprite.sheet-mode,
.sprite.gif-mode{
  background-repeat:no-repeat;
  inset:auto;                 /* size comes from the animation config */
  left:50%; bottom:0;
  translate:-50% 0;
  /* Vaugn's art is smooth, not pixel-art — force smooth scaling so he
     doesn't render blocky on standard-DPI desktops (the body sets a global
     `image-rendering:pixelated` for the pixel UI, which we override here). */
  image-rendering:auto;
  image-rendering:smooth;
  image-rendering:high-quality;
  -ms-interpolation-mode:bicubic;
}
/* Turning (facing) and the walk/run motion cue are now driven every
   frame from mascot.js via inline `transform`/`translate` (see tick()),
   eased smoothly instead of snapped by toggling a class. That's what
   lets idle<->walk<->run and left<->right blend instead of popping, and
   avoids a CSS keyframe animation fighting the JS transform each time
   the state flips. These rules are kept only as safe fallbacks. */
.sprite.mirror{ transform:scaleX(-1); }
.sprite.fb-move{ animation:fbstep .5s ease-in-out infinite; }
@keyframes fbstep{ 0%,100%{ translate:-50% 0; } 50%{ translate:-50% -6px; } }

.anim-label{
  position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  font-size:16px; color:var(--paper);
  background:rgba(13,13,20,.8); padding:2px 8px 1px;
  border:2px solid rgba(245,239,220,.5);
  text-shadow:1px 1px 0 rgba(0,0,0,.8);
  white-space:nowrap;
}

/* ---- the placeholder pixel character ---- */
.px-char{ position:absolute; inset:0; }
.px-char .antenna{ position:absolute; top:-2px; left:50%; width:4px; height:14px; margin-left:-2px; background:#c9c2ab; }
.px-char .antenna::after{ content:""; position:absolute; top:-8px; left:-3px; width:10px; height:10px; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.px-char .head{ position:absolute; top:12px; left:8px; width:48px; height:34px; background:#e9e2cc; border:4px solid var(--ink); }
.px-char .eye{ position:absolute; top:10px; width:7px; height:10px; background:var(--ink); }
.px-char .eye.left{ left:9px; } .px-char .eye.right{ right:9px; }
.px-char .mouth{ position:absolute; bottom:5px; left:50%; width:12px; height:3px; margin-left:-6px; background:var(--ink); }
.px-char .body{ position:absolute; top:46px; left:12px; width:40px; height:30px; background:#4a90d9; border:4px solid var(--ink); }
.px-char .chest{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-display); font-size:12px; color:var(--paper); }
.px-char .leg{ position:absolute; top:76px; width:10px; height:16px; background:var(--ink); }
.px-char .leg.left{ left:18px; } .px-char .leg.right{ right:18px; }

/* placeholder state animations (only seen if the idle GIF fails to load) */
.sprite[data-anim="idle"] .px-char{ animation:bob 1.6s ease-in-out infinite; }
.sprite[data-anim="walking"] .px-char{ animation:bob .38s ease-in-out infinite; }
.sprite[data-anim="running"] .px-char{ animation:bob .24s ease-in-out infinite; }
.sprite[data-anim="walking"] .leg.left{ animation:stepA .38s linear infinite; }
.sprite[data-anim="walking"] .leg.right{ animation:stepB .38s linear infinite; }
.sprite[data-anim="running"] .leg.left{ animation:stepA .24s linear infinite; }
.sprite[data-anim="running"] .leg.right{ animation:stepB .24s linear infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }
@keyframes stepA{ 0%,100%{ height:16px; } 50%{ height:8px; } }
@keyframes stepB{ 0%,100%{ height:8px; } 50%{ height:16px; } }

/* sprint speed lines */
#mascot .speedlines{ display:none; }
#mascot.sprinting .speedlines{ display:block; }

/* ============================================================
   ATMOSPHERE OVERLAYS
   ============================================================ */
#particles{ position:fixed; inset:0; z-index:4; pointer-events:none; }

#darkness{
  position:fixed; inset:0; z-index:6; pointer-events:none;
  background:#03020a; opacity:0; transition:opacity .35s ease;
}
#night-tint{
  position:fixed; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(#0a0820, #06041a);
  opacity:0;
  transition:opacity .4s ease;
  mix-blend-mode:multiply;
}
#time-flash{
  position:fixed; inset:0; z-index:8; pointer-events:none;
  opacity:0; transition:opacity .6s ease;
}
#time-flash.on{ opacity:1; transition:opacity .18s ease; }
/* Day flash: warm sunrise wash sweeping from the clock corner */
#time-flash[data-time="day"]{
  background:
    radial-gradient(ellipse 70% 55% at 88% 6%, rgba(255,210,74,.46), transparent 58%),
    radial-gradient(ellipse 100% 40% at 50% 0%, rgba(255,180,80,.12), transparent 60%);
}
/* Night flash: cool indigo bloom from the clock corner */
#time-flash[data-time="night"]{
  background:
    radial-gradient(ellipse 70% 55% at 88% 6%, rgba(100,120,220,.42), transparent 58%),
    radial-gradient(ellipse 100% 40% at 50% 0%, rgba(60,60,160,.14), transparent 60%);
}
#lantern{
  position:fixed; inset:0; z-index:7; pointer-events:none;
  opacity:0; transition:opacity .35s ease;
  background:radial-gradient(circle 240px at var(--lx,50%) var(--ly,60%),
    rgba(255,210,74,.32), rgba(255,180,60,.12) 45%, transparent 70%);
  mix-blend-mode:screen;
}
#vignette{
  position:fixed; inset:0; z-index:6; pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(0,0,10,.28));
  transition:background 1.8s ease;
}
body[data-time="night"] #vignette{
  background:radial-gradient(ellipse at 50% 55%, transparent 45%, rgba(0,0,14,.55));
}

#fade{
  position:fixed; inset:0; z-index:30; pointer-events:none;
  background:#000; opacity:0; transition:opacity .5s ease;
}

/* ============================================================
   HUD
   ============================================================ */
#hud{ position:fixed; inset:0; z-index:10; pointer-events:none; }

#biome-tag{
  position:absolute; top:calc(18px + env(safe-area-inset-top)); left:calc(18px + env(safe-area-inset-left));
  font-family:var(--font-display); font-size:12px; letter-spacing:1px;
  background:var(--ui-bg); border:3px solid var(--ui-border);
  padding:10px 14px;
}
#biome-tag .arrow{ color:var(--accent2); }

/* ---- Reload website button (always visible, all devices) ---- */
#reload-btn{
  position:absolute; top:calc(64px + env(safe-area-inset-top)); left:calc(18px + env(safe-area-inset-left));
  width:40px; height:40px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--ui-bg); border:3px solid var(--ui-border);
  color:var(--paper); cursor:pointer; pointer-events:auto;
}
#reload-btn .reload-icon{ font-size:19px; line-height:1; }
#reload-btn:hover{ border-color:var(--accent); }
#reload-btn:focus-visible{ border-color:var(--accent2); }
#reload-btn:active{ transform:translateY(2px); }

#hint-bar{
  position:absolute; bottom:14px; left:18px;
  display:flex; flex-direction:column; gap:6px;
  font-size:20px;
  color:var(--paper);
  background:rgba(13,13,20,.82);
  border:3px solid rgba(245,239,220,.4);
  padding:7px 16px 5px;
  text-shadow:1px 1px 0 rgba(0,0,0,.8);
}
.hint-row{ display:flex; gap:18px; flex-wrap:wrap; }
.hint-row.hint-shortcuts{ font-size:16px; opacity:.85; }
#hint-bar b{ color:var(--accent); }

/* ---- Minecraft-style rotating clock ---- */
#clock{
  position:absolute; top:calc(16px + env(safe-area-inset-top)); right:calc(18px + env(safe-area-inset-right));
  width:76px; height:76px; padding:0;
  background:none; border:none; cursor:pointer; pointer-events:auto;
}
.time-badge{
  position:absolute; left:50%; bottom:-24px; transform:translateX(-50%);
  font-family:var(--font-display); font-size:7px; letter-spacing:1px;
  padding:4px 8px 3px; white-space:nowrap; z-index:2;
  background:var(--ui-bg); border:2px solid var(--ui-border);
  color:rgba(245,239,220,.55);
  transition:color .45s ease, border-color .45s ease, box-shadow .45s ease,
             background .45s ease;
}
.time-badge[data-time="day"]{
  color:#3a2200; background:linear-gradient(135deg, #b8e0f5 0%, #ffd24a 100%);
  border-color:#a35b00;
  box-shadow:0 2px 0 rgba(0,0,0,.35), 0 0 8px rgba(255,210,74,.35);
}
.time-badge[data-time="night"]{
  color:#c8c0f0; background:linear-gradient(135deg, #0b1030 0%, #3a2860 100%);
  border-color:#8070b4;
  box-shadow:0 0 12px rgba(140,160,255,.55), 0 2px 0 rgba(0,0,0,.45);
}
.time-badge.pulse{ animation:timebadgepulse .6s cubic-bezier(.2,1.4,.4,1); }
@keyframes timebadgepulse{
  0%  { transform:translateX(-50%) scale(1); }
  35% { transform:translateX(-50%) scale(1.22); }
  100%{ transform:translateX(-50%) scale(1); }
}
.clock-frame{
  position:absolute; inset:0;
  border:5px solid #6b5a3a; outline:4px solid #2c1e10;
  background:transparent; border-radius:4px;
  box-shadow:0 4px 0 rgba(0,0,0,.4);
  pointer-events:none;
  transition:outline-color .45s ease, box-shadow .45s ease, border-color .45s ease;
}
#clock[data-time-active="day"] .clock-frame{
  outline-color:#a35b00; border-color:#8a6820;
  box-shadow:0 4px 0 rgba(0,0,0,.4), 0 0 18px rgba(255,210,74,.4);
}
#clock[data-time-active="night"] .clock-frame{
  outline-color:#8070b4; border-color:#5040a0;
  box-shadow:0 4px 0 rgba(0,0,0,.4), 0 0 18px rgba(140,160,255,.45);
}
#clock.is-spinning .clock-frame{
  outline-color:var(--accent2);
  box-shadow:0 4px 0 rgba(0,0,0,.4), 0 0 22px rgba(110,231,168,.5);
  animation:clockspinglow .7s ease-out;
}
@keyframes clockspinglow{
  0%  { box-shadow:0 4px 0 rgba(0,0,0,.4), 0 0 40px rgba(110,231,168,.8); }
  100%{ box-shadow:0 4px 0 rgba(0,0,0,.4), 0 0 22px rgba(110,231,168,.5); }
}
.dial{
  position:absolute; inset:5px; overflow:hidden; border-radius:2px;
  transition:none;
  will-change:transform;
}
.dial .half{
  position:absolute; left:0; width:100%; height:100%;
  display:grid; place-items:center; font-size:30px;
  transition:filter .45s ease, opacity .45s ease;
}
.dial .sun{ top:0; background:linear-gradient(#b0ddf5,#ffd24a); color:#a35b00;
  clip-path:polygon(0 0,100% 0,100% 50%,0 50%); }
.dial .moon{ top:0; background:linear-gradient(#0b1030,#2a2050); color:#e9e2cc;
  clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%); }
/* Day active: sun face bright, moon dimmed */
#clock[data-time-active="day"] .dial .sun{
  filter:brightness(1.18) saturate(1.15) drop-shadow(0 0 4px rgba(255,210,74,.6));
  opacity:1;
}
#clock[data-time-active="day"] .dial .moon{ filter:brightness(.5) saturate(.6); opacity:.38; }
/* Night active: moon bright with cool glow, sun dimmed */
#clock[data-time-active="night"] .dial .moon{
  filter:brightness(1.25) drop-shadow(0 0 6px rgba(140,160,255,.7));
  opacity:1;
}
#clock[data-time-active="night"] .dial .sun{ filter:brightness(.45) saturate(.5); opacity:.35; }
#clock:hover .clock-frame{ outline-color:var(--accent); }
#clock:focus-visible .clock-frame{ outline-color:var(--accent2); }
#clock:active .dial{ transform:scale(.96); }

/* ============================================================
   PROMPT
   ============================================================ */
#prompt{
  position:fixed; left:50%; top:0; z-index:11; pointer-events:none;
  transform:translate(-50%, 0);
  background:var(--ui-bg); border:3px solid var(--accent2);
  padding:6px 12px; font-size:20px; white-space:nowrap;
  will-change:transform;
}
#prompt .key{ animation:promptbob .9s ease-in-out infinite; }
@keyframes promptbob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }

.key{
  display:inline-block; min-width:26px; text-align:center;
  font-family:var(--font-display); font-size:12px;
  background:var(--paper); color:var(--ink);
  border:2px solid var(--ink); box-shadow:0 3px 0 var(--ink);
  padding:5px 6px 3px; margin:0 3px 2px 0; vertical-align:middle;
}

/* ============================================================
   DIALOGUE
   ============================================================ */
#dialogue{
  position:fixed; z-index:20;
  left:50%; bottom:34px; transform:translateX(-50%);
  width:min(680px, 92vw);
  display:flex; gap:14px;
  background:var(--ui-bg); border:4px solid var(--ui-border);
  box-shadow:0 8px 0 rgba(0,0,0,.5);
  padding:16px 18px;
}
#dialogue .portrait{
  width:64px; height:64px; flex:0 0 auto;
  border:3px solid var(--ui-border); background:#1c1c28;
  display:grid; place-items:center;
  image-rendering:auto;   /* Vaugn's face renders smooth, not blocky */
}
.px-mini{ width:34px; height:34px; background:#e9e2cc; border:3px solid var(--ink); position:relative; }
.px-mini::before, .px-mini::after{ content:""; position:absolute; top:10px; width:5px; height:8px; background:var(--ink); }
.px-mini::before{ left:6px; } .px-mini::after{ right:6px; }
#dialogue-name{ font-family:var(--font-display); font-size:10px; color:var(--accent); margin-bottom:8px; letter-spacing:1px; }
#dialogue-text{ font-size:24px; line-height:1.25; min-height:56px; }
#dialogue-next{ position:absolute; right:14px; bottom:8px; font-size:16px; color:var(--accent2); animation:promptbob .8s infinite; }
#dialogue .text-wrap{ position:relative; flex:1; }

/* ============================================================
   WELCOME BANNER (one-time studio intro card, right after spawn)
   Sits below the corner HUD (biome tag / reload / clock) and
   never intercepts input — fully pointer-events:none so it can't
   block movement, interaction, or any other UI element.
   ============================================================ */
#welcome-banner{
  position:fixed; left:50%; top:calc(104px + env(safe-area-inset-top));
  transform:translate(-50%, -12px);
  width:min(560px, 90vw);
  z-index:15; pointer-events:none;
  text-align:center;
  background:var(--ui-bg); border:3px solid var(--ui-border);
  box-shadow:0 8px 0 rgba(0,0,0,.5), 0 0 22px rgba(255,210,74,.18);
  padding:16px 22px 18px;
  opacity:0;
  animation:welcomein .55s cubic-bezier(.2,.9,.3,1) forwards;
}
#welcome-banner .wb-badge{
  display:inline-block;
  font-family:var(--font-display); font-size:9px; letter-spacing:1.5px;
  color:var(--ink); background:var(--accent);
  padding:5px 9px 4px; margin-bottom:10px;
  box-shadow:0 2px 0 rgba(0,0,0,.4);
}
#welcome-banner p{ font-size:21px; line-height:1.35; color:var(--paper); }
#welcome-banner p b{ color:var(--accent); }
#welcome-banner .wb-sub{ margin-top:6px; font-size:18px; color:rgba(245,239,220,.72); }
#welcome-banner.hide{ animation:welcomeout .6s ease-in forwards; }
@keyframes welcomein{
  from{ opacity:0; transform:translate(-50%, -18px); }
  to{ opacity:1; transform:translate(-50%, 0); }
}
@keyframes welcomeout{
  from{ opacity:1; transform:translate(-50%, 0); }
  to{ opacity:0; transform:translate(-50%, -14px); }
}
@media (max-width:760px){
  /* Sit the welcome popup in the open band between the Contact shortcut
     button (which ends near the top-right) and the joystick (bottom-left),
     instead of up top where it overlapped the shortcut column. Centered in
     that lower-middle gap and narrowed so it never slips under the buttons. */
  #welcome-banner{
    top:auto; bottom:calc(210px + env(safe-area-inset-bottom));
    width:min(340px, 88vw);
    padding:13px 16px 15px;
  }
  #welcome-banner .wb-badge{ font-size:7px; padding:4px 7px 3px; }
  #welcome-banner p{ font-size:17px; }
  #welcome-banner .wb-sub{ font-size:14px; }
}
/* tablets (touch, 761–1024px): same idea — drop it into the lower-middle
   band so it clears the right-side shortcut column. */
@media (min-width:761px) and (max-width:1024px){
  body.touch #welcome-banner{
    top:auto; bottom:calc(150px + env(safe-area-inset-bottom));
    width:min(520px, 72vw);
  }
}
/* shorter phones (≤700px tall): the middle band is smaller, so make the
   popup very compact and sit it just above the joystick, with its top edge
   below the shortcut column so nothing overlaps. */
@media (max-width:760px) and (max-height:700px){
  #welcome-banner{
    bottom:calc(132px + env(safe-area-inset-bottom));
    width:min(290px, 80vw);
    padding:8px 12px 10px;
  }
  #welcome-banner p{ font-size:14px; line-height:1.28; }
  #welcome-banner .wb-sub{ font-size:12px; margin-top:3px; }
  #welcome-banner .wb-badge{ margin-bottom:5px; font-size:6px; padding:3px 6px 2px; }
  /* Not enough vertical room here for both the shortcut column and the
     popup — tuck the column away for the few seconds the popup is visible.
     It returns automatically the moment the welcome banner finishes. */
  body.welcome-showing #shortcut-keys{
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
}
@media (max-height:600px){
  /* short landscape: keep it clear of the on-screen controls */
  #welcome-banner{ top:auto; bottom:calc(150px + env(safe-area-inset-bottom)); width:min(360px, 70vw); padding:10px 14px 12px; }
  #welcome-banner p{ font-size:15px; }
  #welcome-banner .wb-sub{ font-size:13px; }
}
body.reduce-motion #welcome-banner{ animation:none; opacity:1; }
body.reduce-motion #welcome-banner.hide{ animation:none; opacity:0; transition:opacity .3s ease; }

/* ============================================================
   ONBOARDING (multi-page guide shown after boot, before spawn)
   Matches the site: pixel display font, gold accent, paper text,
   hard drop-shadows, dashed rules.
   ============================================================ */
#onboard{
  position:fixed; inset:0; z-index:60;
  background:rgba(5,5,10,.94);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:obfade .35s ease-out;
}
#onboard.out{ opacity:0; pointer-events:none; transition:opacity .4s ease; }
@keyframes obfade{ from{ opacity:0; } to{ opacity:1; } }

.ob-card{
  position:relative;
  width:min(560px, 94vw); max-height:88vh;
  background:var(--ui-bg); border:4px solid var(--accent);
  box-shadow:0 14px 0 rgba(0,0,0,.5);
  padding:22px 26px 18px;
  display:flex; flex-direction:column;
  animation:logoin .4s ease-out;
}
.ob-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ob-badge{
  display:inline-block; font-family:var(--font-display); font-size:9px;
  letter-spacing:2px; color:var(--ink); background:var(--accent);
  padding:7px 10px;
}
.ob-skip{
  font-family:var(--font-display); font-size:9px; letter-spacing:1px;
  color:rgba(245,239,220,.6); background:transparent; border:none;
  cursor:pointer; padding:6px 4px;
}
.ob-skip:hover{ color:var(--accent); }
.ob-skip:focus-visible{ outline:2px solid var(--accent2); outline-offset:2px; }

/* overflow-x is forced to a scrollable value here because overflow-y is
   set (a CSS quirk: setting only one axis promotes the other out of
   "visible"). .ob-page.on's slide-in animation briefly translates its
   content past the right edge every time a page is shown, which — with
   overflow-x uncontrolled — made the browser paint a horizontal
   scrollbar (a thin "slider") for a single frame on every page change.
   Pinning overflow-x:hidden keeps the vertical scroller but clips that
   transient overflow so no scrollbar ever appears. */
.ob-pages{ position:relative; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; }
.ob-page{ display:none; }
.ob-page.on{ display:block; animation:obslide .3s ease-out; }
@keyframes obslide{ from{ transform:translateX(16px); opacity:0; } to{ transform:none; opacity:1; } }

.ob-page h2{
  font-family:var(--font-display); font-size:clamp(15px,3.4vw,20px);
  color:var(--paper); margin:0 0 14px; line-height:1.35;
  text-shadow:2px 2px 0 rgba(42,32,80,.7);
}
.ob-page p{ font-size:18px; line-height:1.5; margin:10px 0; color:rgba(245,239,220,.9); }
.ob-page .ob-fine{ font-size:15px; color:rgba(245,239,220,.6); }
.ob-art{
  font-size:30px; text-align:center; margin:16px 0; letter-spacing:4px;
}

/* onboarding clock demo */
.ob-clockdemo{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin:16px 0 14px;
}
.ob-clock-face{
  position:relative; width:72px; height:72px;
  border:4px solid #6b5a3a; outline:3px solid #2c1e10;
  border-radius:4px; overflow:hidden;
  box-shadow:0 4px 0 rgba(0,0,0,.4);
}
.ob-half{
  position:absolute; left:0; width:100%; height:50%;
  display:grid; place-items:center; font-size:26px;
  transition:filter .4s ease, opacity .4s ease;
}
.ob-half.sun{ top:0; background:linear-gradient(#8fd3f4,#ffd24a); color:#a35b00; }
.ob-half.moon{ bottom:0; background:linear-gradient(#0b1030,#2a2050); color:#e9e2cc; }
.ob-half.on{ filter:brightness(1.15); opacity:1; }
.ob-half:not(.on){ filter:brightness(.5); opacity:.45; }
.ob-clock-label{
  font-family:var(--font-display); font-size:8px; letter-spacing:1px;
  padding:5px 9px 4px; background:linear-gradient(#8fd3f4,#ffd24a);
  color:var(--ink); border:2px solid #a35b00;
}

.ob-keys{ margin:14px 0; display:flex; flex-direction:column; gap:10px; }
.ob-keys.ob-keys-tight{ gap:7px; }
.ob-krow{ display:flex; align-items:center; gap:10px; font-size:17px; color:rgba(245,239,220,.9); flex-wrap:wrap; }
.ob-krow .key, .tkeymini{
  display:inline-grid; place-items:center; min-width:26px; height:26px;
  padding:0 7px; font-family:var(--font-display); font-size:10px;
  background:var(--paper); color:var(--ink); border:2px solid var(--ink);
  box-shadow:0 2px 0 var(--ink); border-radius:3px; flex:0 0 auto;
}
.tkeymini{ margin:0 2px; }
.tkeymini.big-e{ min-width:34px; height:34px; font-size:13px; background:var(--accent2); }
.mouseicon, .reloadicon, .fingericon{ font-size:20px; width:26px; text-align:center; flex:0 0 auto; }
.reloadicon{ color:var(--accent); }

/* touch stick demo on the movement page */
.ob-stickdemo{ display:flex; justify-content:center; margin:16px 0; }
.ob-stick{
  position:relative; width:104px; height:104px; border-radius:50%;
  background:rgba(255,255,255,.05); border:3px solid rgba(255,210,74,.4);
}
.ob-stick .jl{ position:absolute; font-family:var(--font-display); font-size:9px; color:rgba(255,210,74,.8); }
.ob-stick .jw{ top:8px; left:50%; transform:translateX(-50%); }
.ob-stick .js{ bottom:8px; left:50%; transform:translateX(-50%); }
.ob-stick .ja{ left:9px; top:50%; transform:translateY(-50%); }
.ob-stick .jd{ right:9px; top:50%; transform:translateY(-50%); }
.ob-knob{
  position:absolute; left:50%; top:50%; width:42px; height:42px;
  margin:-21px 0 0 -21px; border-radius:50%;
  background:var(--accent); box-shadow:0 3px 0 rgba(0,0,0,.4);
  animation:obknob 2.6s ease-in-out infinite;
}
@keyframes obknob{
  0%,100%{ transform:translate(0,0); }
  25%{ transform:translate(0,-13px); }
  60%{ transform:translate(9px,-5px); }
}

.ob-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:16px; padding-top:14px;
  border-top:2px dashed rgba(245,239,220,.18);
}
.ob-btn{
  font-family:var(--font-display); font-size:11px; letter-spacing:1px;
  color:var(--ink); background:var(--accent); border:3px solid var(--ink);
  box-shadow:0 3px 0 var(--ink); cursor:pointer; padding:10px 15px;
}
.ob-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--ink); }
.ob-btn:focus-visible{ outline:2px solid var(--accent2); outline-offset:2px; }
.ob-btn.ghost{ background:transparent; color:rgba(245,239,220,.8); box-shadow:0 3px 0 rgba(245,239,220,.25); border-color:rgba(245,239,220,.4); }
.ob-btn.ghost:hover:not(:disabled){ color:var(--paper); border-color:rgba(245,239,220,.7); }
.ob-btn.ghost:disabled{ opacity:.3; cursor:default; }
.ob-dots{ display:flex; gap:7px; flex-wrap:wrap; justify-content:center; }
.ob-dots .dot{ width:9px; height:9px; border-radius:50%; background:rgba(245,239,220,.28); transition:background .2s, transform .2s; cursor:pointer; }
.ob-dots .dot:hover:not(.on){ background:rgba(255,210,74,.55); }
.ob-dots .dot.on{ background:var(--accent); transform:scale(1.25); }

/* ============================================================
   BOOT SCREEN
   ============================================================ */
#boot{
  position:fixed; inset:0; z-index:50;
  background:#050508;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center;
  transition:opacity 1s ease;
}
#boot.out{ opacity:0; pointer-events:none; }
.boot-bar{
  width:min(560px, 80vw); height:16px;
  background:repeating-linear-gradient(90deg, var(--paper) 0 14px, transparent 14px 18px);
}
.boot-title{
  font-family:var(--font-display);
  font-size:clamp(20px, 5vw, 44px);
  letter-spacing:6px; color:var(--paper);
  text-shadow:4px 4px 0 #2a2050;
}
#boot-logo{
  width:min(520px, 76vw); height:auto;
  image-rendering:auto;
  filter:drop-shadow(4px 4px 0 rgba(42,32,80,.9));
  animation:logoin .7s ease-out;
  margin-bottom:-6px;   /* pull the start prompt closer to the logo */
}
@keyframes logoin{ from{ transform:translateY(14px) scale(.96); opacity:0; } to{ transform:none; opacity:1; } }
.boot-tagline{
  max-width:min(560px, 84vw);
  font-size:clamp(14px, 2.4vw, 19px);
  line-height:1.5; color:rgba(245,239,220,.72);
  margin:2px 0 6px; letter-spacing:.5px;
  animation:logoin .9s ease-out .1s both;
}
.boot-press{ font-family:var(--font-display); font-size:clamp(11px,2vw,16px); color:var(--accent); margin-top:2px; }
.boot-note{ font-size:20px; color:rgba(245,239,220,.55); margin-top:-4px; }
.blink{ animation:blinkc 1.1s steps(1) infinite; }

/* ============================================================
   PAUSE MENU
   ============================================================ */
#pause{
  position:fixed; inset:0; z-index:40;
  background:rgba(5,5,10,.82);
  display:flex; align-items:center; justify-content:center;
}
.pause-box, .pause-pane{
  background:var(--ui-bg); border:4px solid var(--ui-border);
  box-shadow:0 10px 0 rgba(0,0,0,.55);
  padding:26px 40px; text-align:center;
  min-width:min(420px, 88vw);
}
.pause-rule{ color:rgba(245,239,220,.5); font-size:18px; letter-spacing:2px; }
#pause-list, #settings-list, #dev-list{ list-style:none; margin:16px 0; }
#pause-list li, #settings-list li, #dev-list li{
  font-family:var(--font-display); font-size:13px;
  padding:12px 8px; color:rgba(245,239,220,.75);
  cursor:pointer; position:relative;
}
#pause-list li.sel, #settings-list li.sel, #dev-list li.sel{
  color:var(--accent);
}
#pause-list li.sel::before, #settings-list li.sel::before, #dev-list li.sel::before{
  content:"▸"; position:absolute; left:-14px; color:var(--accent2);
  animation:promptbob .7s infinite;
}
#settings-list li{ display:flex; justify-content:space-between; gap:30px; }
#settings-list .val{ color:var(--accent2); }
.pause-hint, .pane-hint{ font-size:17px; color:rgba(245,239,220,.55); margin-top:10px; }

.pause-pane{ position:absolute; text-align:left; max-width:min(560px, 92vw); }
.pane-title{ font-family:var(--font-display); font-size:13px; color:var(--accent); margin-bottom:16px; text-align:center; }
.pause-pane p{ margin:10px 0; line-height:1.3; }
.pause-pane table{ width:100%; border-collapse:collapse; }
.pause-pane td{ padding:8px 6px; font-size:22px; }
.pane-note{ margin-top:14px; font-size:19px; color:rgba(245,239,220,.6); }
.konami-tease{ color:var(--accent); }

/* ============================================================
   SECTION PANELS
   ============================================================ */
#panel{
  position:fixed; inset:0; z-index:35;
  background:rgba(5,5,10,.6);
  display:flex; align-items:center; justify-content:center;
}
.panel-card{
  position:relative;
  width:min(620px, 92vw); max-height:82vh; overflow:auto;
  background:var(--ui-bg); border:4px solid var(--accent);
  box-shadow:0 12px 0 rgba(0,0,0,.55);
  padding:28px 32px;
  animation:panelin .35s ease-out;
}
#panel-close{
  position:sticky; top:0; float:right;
  width:40px; height:40px; margin:-6px -8px 0 12px;
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:16px;
  background:var(--paper); color:var(--ink);
  border:3px solid var(--ink); box-shadow:0 3px 0 var(--ink);
  cursor:pointer; z-index:2;
}
#panel-close:hover{ border-color:var(--accent); }
#panel-close:focus-visible{ outline:2px solid var(--accent2); outline-offset:2px; }
#panel-close:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--ink); }
@keyframes panelin{ from{ transform:translateY(24px); opacity:0; } to{ transform:none; opacity:1; } }
.panel-biome{ font-size:18px; letter-spacing:4px; color:var(--accent2); }
.panel-title{ font-family:var(--font-display); font-size:clamp(16px,3vw,24px); margin:10px 0 18px; }
.panel-body p{ margin:12px 0; line-height:1.35; font-size:23px; }
.about-logo{
  display:block; width:min(320px, 70%); height:auto; margin:0 auto 18px;
  image-rendering:auto;
  filter:drop-shadow(3px 3px 0 rgba(0,0,0,.5));
}
.panel-body .fine{ font-size:19px; color:rgba(245,239,220,.6); }
.panel-hint{ margin-top:18px; font-size:17px; color:rgba(245,239,220,.55); text-align:right; }

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:14px 0; }
.tcard{ border:3px solid var(--ui-border); padding:12px; display:flex; flex-direction:column; gap:4px; font-size:20px; }
.tcard span{ font-size:17px; color:rgba(245,239,220,.6); }
.tface{ width:54px; height:54px; border:3px solid var(--ink); margin-bottom:6px; }
.f1{ background:#ffd24a; } .f2{ background:#6ee7a8; } .f3{ background:#8fd3f4; } .f4{ background:#e78bb5; }

/* ---- Games (Castle vault): card grid + dedicated detail page ---- */
.games-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:14px 0; }
.gcard{
  border:3px solid var(--ui-border); padding:12px; display:flex; flex-direction:column; gap:4px;
  font-size:20px; font-family:var(--font-body); color:var(--paper); text-align:left;
  background:rgba(255,255,255,.02); cursor:pointer;
  transition:border-color .15s ease, transform .15s ease, background .15s ease;
}
.gcard:hover, .gcard:focus-visible{ border-color:var(--accent); transform:translateY(-2px); background:rgba(255,255,255,.05); }
.gcard:focus-visible{ outline:2px solid var(--accent2); outline-offset:2px; }
.gcard:active{ transform:translateY(0); }
.gcard-body{ display:flex; flex-direction:column; gap:4px; }
.gcard-body b{ font-size:20px; }
.gcard-body span{ font-size:17px; color:rgba(245,239,220,.6); }
.gart{ height:70px; margin-bottom:8px; border:3px solid var(--ink); }
.g1{ background:linear-gradient(135deg,#16324a,#ffd24a 130%); }
.g2{ background:linear-gradient(135deg,#2a2050,#8fd3f4 130%); }
.g3{ background:repeating-linear-gradient(45deg,#111 0 10px,#1c1c28 10px 20px); }
.g4{ background:linear-gradient(135deg,#2a5040,#e78bb5 130%); }
.g5{ background:linear-gradient(135deg,#402a50,#6ee7a8 130%); }

.gstatus{
  align-self:flex-start; margin-top:2px;
  font-family:var(--font-display); font-size:9px; letter-spacing:1px;
  color:var(--ink); background:var(--accent2); padding:4px 7px 3px;
}

.game-detail{ margin-top:4px; }
.game-back{
  font-family:var(--font-display); font-size:10px; letter-spacing:1px;
  color:rgba(245,239,220,.75); background:transparent; border:none;
  cursor:pointer; padding:4px 2px 14px; margin-bottom:6px;
}
.game-back:hover{ color:var(--accent); }
.game-back:focus-visible{ outline:2px solid var(--accent2); outline-offset:2px; }
.gdetail-hero{
  height:150px; border:3px solid var(--ink); margin-bottom:14px;
  box-shadow:0 6px 0 rgba(0,0,0,.4);
}
.gdetail-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.gdetail-head h3{ font-family:var(--font-display); font-size:clamp(14px,3vw,19px); font-weight:normal; margin:0; }
.gdetail-genre{ font-size:16px; color:var(--accent2); letter-spacing:.5px; margin:8px 0 0; }
.gdetail-tagline{ font-size:19px; color:rgba(245,239,220,.75); margin:4px 0 0; font-style:italic; }
.gdetail-desc{ font-size:21px; line-height:1.45; margin:14px 0; color:rgba(245,239,220,.9); }
.gdetail-block{ margin:16px 0; }
.gdetail-block h4{
  font-family:var(--font-display); font-size:11px; letter-spacing:1px;
  color:var(--accent); margin:0 0 10px;
}
.gdetail-features{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.gdetail-features li{
  font-size:19px; padding-left:18px; position:relative; color:rgba(245,239,220,.85);
}
.gdetail-features li::before{ content:"▸"; position:absolute; left:0; color:var(--accent2); }
.gplat-row{ display:flex; flex-wrap:wrap; gap:8px; }
.gplat{
  font-size:15px; padding:5px 10px; border:2px solid var(--ui-border);
  color:rgba(245,239,220,.75);
}

/* ---- posts tabs (Space Station) — filter the feed by game ---- */
.posts-tabs{
  display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px;
  padding-bottom:14px; border-bottom:2px dashed rgba(245,239,220,.18);
}
.ptab{
  font-family:var(--font-display); font-size:10px; letter-spacing:1px;
  color:rgba(245,239,220,.7); background:transparent;
  border:2px solid var(--ui-border); cursor:pointer;
  padding:8px 11px 7px; transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.ptab:hover{ color:var(--paper); border-color:rgba(245,239,220,.5); }
.ptab:focus-visible{ outline:2px solid var(--accent2); outline-offset:2px; }
.ptab.on{ color:var(--ink); background:var(--accent); border-color:var(--accent); }

.contact-list{ list-style:none; margin:14px 0; }
.contact-list li{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:6px 16px; padding:10px 4px;
  border-bottom:2px dashed rgba(245,239,220,.25); font-size:22px;
}
.contact-list li b{ flex:0 0 auto; }
.contact-list span{
  color:rgba(245,239,220,.65);
  word-break:break-word; overflow-wrap:anywhere; text-align:right;
}

/* ---- posts feed (Space Station) ---- */
.feed-intro{ margin-bottom:6px; }
.post{
  border:3px solid var(--ui-border);
  padding:14px 16px; margin:16px 0;
  background:rgba(255,255,255,.03);
}
.post header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px;
}
.post-type{
  font-family:var(--font-display); font-size:9px; letter-spacing:1px;
  color:var(--ink); background:var(--accent2); padding:4px 7px 3px;
}
.post-video .post-type, .post-video header .post-type{ background:var(--accent); }
.post-date{ font-size:17px; color:rgba(245,239,220,.55); }
.post h3{ font-size:25px; margin:4px 0 10px; font-weight:normal; }
.post p{ margin:10px 0 2px; font-size:21px; color:rgba(245,239,220,.85); }
.post-video{
  position:relative; width:100%; aspect-ratio:16/9;
  border:3px solid var(--ink); background:#000;
}
.post-video iframe{ position:absolute; inset:0; width:100%; height:100%; }
.post-img{
  display:block; width:100%; border:3px solid var(--ink);
  image-rendering:auto;
}
.post-img.missing{
  min-height:120px;
  background:repeating-linear-gradient(45deg,#111 0 10px,#1c1c28 10px 20px);
}

/* ============================================================
   DEVELOPER ROOM
   ============================================================ */
#devroom{
  position:fixed; inset:0; z-index:45;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,210,74,.08), transparent 55%),
    #07050d;
  display:flex; align-items:center; justify-content:center;
}
.dev-box{
  text-align:center; padding:34px 46px;
  border:4px solid var(--accent);
  box-shadow:0 0 60px rgba(255,210,74,.25), inset 0 0 40px rgba(255,210,74,.08);
  background:rgba(13,13,20,.9);
}
.dev-title{ font-family:var(--font-display); font-size:clamp(14px,3vw,22px); color:var(--accent); letter-spacing:3px; }
.dev-sub{ margin:14px 0 6px; color:rgba(245,239,220,.7); font-size:21px; }

/* ============================================================
   ON-SCREEN VIRTUAL KEYS (touch devices; body.touch set by JS)
   ============================================================ */
#touch-controls, #top-actions{ display:none; }

.tkey{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:60px; height:60px; padding:0;
  background:var(--ui-bg); color:var(--paper);
  border:3px solid var(--ui-border);
  box-shadow:0 4px 0 rgba(0,0,0,.55);
  font-family:var(--font-display);
  touch-action:none; -webkit-touch-callout:none; user-select:none;
  cursor:pointer;
}
.tkey span{ font-size:16px; line-height:1; }
.tkey b{ font-size:9px; color:var(--accent); font-weight:normal; }
.tkey:focus-visible{ outline:2px solid var(--accent2); outline-offset:2px; }
.tkey:active, .tkey.on{
  background:var(--accent); border-color:var(--ink);
  transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.55);
}
.tkey:active b, .tkey.on b, .tkey:active span, .tkey.on span{ color:var(--ink); }

body.touch #touch-controls{
  display:flex; justify-content:space-between; align-items:flex-end;
  position:fixed; left:0; right:0;
  bottom:calc(12px + env(safe-area-inset-bottom));
  padding:0 14px; z-index:26;
  pointer-events:none;
}
#touch-controls > *{ pointer-events:auto; }

/* ---- joystick (WASD labels keep the keyboard theme) ---- */
#joystick{
  position:relative; width:124px; height:124px; border-radius:50%;
  background:rgba(13,13,20,.85);
  border:3px solid var(--ui-border);
  box-shadow:0 4px 0 rgba(0,0,0,.5), inset 0 0 22px rgba(0,0,0,.6);
  touch-action:none; -webkit-touch-callout:none;
}
#joy-knob{
  position:absolute; left:50%; top:50%;
  width:52px; height:52px; margin:-26px 0 0 -26px;
  border-radius:50%;
  background:var(--paper); border:3px solid var(--ink);
  box-shadow:0 3px 0 var(--ink);
  pointer-events:none;
  transition:transform .08s linear;
}
.jlabel{
  position:absolute; font-family:var(--font-display);
  font-size:8px; color:rgba(255,210,74,.7); pointer-events:none;
}
.jlabel.jw{ top:6px; left:50%; transform:translateX(-50%); }
.jlabel.js{ bottom:6px; left:50%; transform:translateX(-50%); }
.jlabel.ja{ left:7px; top:50%; transform:translateY(-50%); }
.jlabel.jd{ right:7px; top:50%; transform:translateY(-50%); }

#actions{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.tkey.big{ width:68px; height:68px; }
.tkey.big b{ font-size:20px; color:var(--paper); }
.tkey.wide{ width:68px; height:38px; }

body.touch #top-actions{
  display:flex; flex-direction:column; gap:7px;
  position:fixed; top:calc(126px + env(safe-area-inset-top)); right:calc(16px + env(safe-area-inset-right)); z-index:26;
}
#top-actions .tkey{ width:52px; height:34px; }
#top-actions .tkey b{ font-size:8px; }

/* shortcut keycaps — right column below ESC/MAP, touch only */
#shortcut-keys{ display:none; }
body.touch #shortcut-keys{
  display:flex; flex-direction:column; gap:6px;
  position:fixed; top:calc(218px + env(safe-area-inset-top)); right:calc(16px + env(safe-area-inset-right)); z-index:26;
}
#shortcut-keys .tkey{
  flex-direction:row; justify-content:center; gap:0;
  width:100px; height:30px; padding:0 9px;
}
#shortcut-keys .tkey b{ display:none; }
#shortcut-keys .tkey .lbl{ font-size:11px; color:var(--paper); font-style:normal; letter-spacing:.5px; }
#shortcut-keys .tkey:active .lbl, #shortcut-keys .tkey.on .lbl{ color:var(--ink); }

body.touch #hint-bar{ display:none; }
body.touch #prompt{ pointer-events:auto; cursor:pointer; }
body.touch .pause-hint, body.touch .pane-hint, body.touch .panel-hint{ display:none; }

/* Fast travel sheet */
#travel-sheet{
  position:fixed; inset:0; z-index:39;
  background:rgba(5,5,10,.72);
  display:flex; align-items:center; justify-content:center;
}
.travel-box{
  background:var(--ui-bg); border:4px solid var(--ui-border);
  box-shadow:0 10px 0 rgba(0,0,0,.55);
  padding:24px 30px; text-align:center; min-width:min(360px, 88vw);
}
#travel-list{ list-style:none; margin:14px 0; text-align:left; }
#travel-list li{
  font-family:var(--font-display); font-size:12px;
  padding:13px 8px; color:rgba(245,239,220,.85); cursor:pointer;
  border-bottom:2px dashed rgba(245,239,220,.15);
}
#travel-list li:active{ color:var(--accent); }

/* Back buttons in menus */
.back-btn{
  display:inline-block; margin-top:14px; padding:9px 18px 7px;
  font-family:var(--font-display); font-size:10px;
  background:var(--paper); color:var(--ink);
  border:2px solid var(--ink); box-shadow:0 3px 0 var(--ink);
  cursor:pointer;
}
.back-btn:hover{ border-color:var(--accent); }
.back-btn:focus-visible{ outline:2px solid var(--accent2); outline-offset:2px; }
.back-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--ink); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after{
  animation-duration:.001s !important;
  transition-duration:.15s !important;
}

/* ============================================================
   RESPONSIVE — phones & small tablets
   ============================================================ */
@media (max-width:760px){
  body{ font-size:20px; }
  #biome-tag{ font-size:9px; padding:8px 10px; top:calc(12px + env(safe-area-inset-top)); left:calc(12px + env(safe-area-inset-left)); }
  #reload-btn{ top:calc(52px + env(safe-area-inset-top)); left:calc(12px + env(safe-area-inset-left)); width:34px; height:34px; }
  #reload-btn .reload-icon{ font-size:16px; }
  #clock{ width:58px; height:58px; top:calc(12px + env(safe-area-inset-top)); right:calc(12px + env(safe-area-inset-right)); }
  .dial .half{ font-size:22px; }
  .time-badge{ font-size:6px; bottom:-20px; padding:3px 6px 2px; }
  body.touch #top-actions{ top:calc(120px + env(safe-area-inset-top)); right:calc(12px + env(safe-area-inset-right)); }

  #dialogue{
    width:min(560px, 94vw);
    padding:12px 14px; gap:10px;
  }
  #dialogue .portrait{ width:50px; height:50px; }
  #dialogue-text{ font-size:20px; min-height:48px; }

  /* onboarding: compact on phones */
  .ob-card{ padding:18px 16px 14px; max-height:92vh; }
  .ob-page h2{ font-size:16px; }
  .ob-page p{ font-size:16px; }
  .ob-page .ob-fine{ font-size:13px; }
  .ob-art{ font-size:26px; margin:12px 0; }
  .ob-krow{ font-size:15px; gap:8px; }
  .ob-btn{ font-size:10px; padding:9px 12px; }
  .ob-skip{ font-size:8px; }
  .ob-badge{ font-size:8px; padding:6px 8px; }

  /* panels: compact so they don't swallow the screen; close button pinned */
  .panel-card{ padding:18px 16px; max-height:78vh; width:min(560px, 94vw); }
  .panel-biome{ font-size:14px; letter-spacing:2px; }
  .panel-title{ margin:6px 0 12px; font-size:clamp(15px,4.5vw,20px); }
  .panel-body p{ font-size:17px; line-height:1.4; margin:9px 0; }
  .panel-body .fine{ font-size:15px; }
  #panel-close{ width:38px; height:38px; font-size:15px; }

  /* contact rows stack vertically so nothing overflows */
  .contact-list li{ font-size:17px; padding:11px 2px; }
  .contact-list li b{ font-size:13px; letter-spacing:1px; opacity:.85; }
  .contact-list span{ flex:1 1 100%; text-align:left; font-size:17px; }

  /* team/games cards: 2-up so faces aren't giant, single col only if tiny */
  .cards.team{ grid-template-columns:repeat(2, 1fr); }
  .tcard{ padding:9px; font-size:16px; }
  .tcard span{ font-size:14px; }
  .tface{ width:44px; height:44px; }

  .games-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .gcard{ padding:9px; font-size:16px; }
  .gcard-body b{ font-size:16px; }
  .gcard-body span{ font-size:13px; }
  .gart{ height:54px; }
  .gdetail-hero{ height:100px; }
  .gdetail-desc{ font-size:17px; }
  .gdetail-features li{ font-size:16px; }
  .gdetail-tagline{ font-size:16px; }

  .posts-tabs{ gap:6px; margin:8px 0 2px; padding-bottom:12px; }
  .ptab{ font-size:9px; padding:7px 9px 6px; }

  .post{ padding:14px; }
  .post h3{ font-size:19px; }
  .post p{ font-size:17px; }
  .jobs li{ font-size:18px; }

  .pause-box, .pause-pane{ padding:18px 20px; min-width:min(420px, 92vw); max-height:86vh; overflow:auto; }
  #pause-list li, #settings-list li, #dev-list li{ font-size:11px; padding:11px 6px; }
  .pause-pane td{ font-size:19px; }
  .pause-pane p{ font-size:18px; line-height:1.4; }
  .sign .plate{ font-size:15px; padding:14px 18px 12px; }
  .sign .sub{
    font-size:15px; letter-spacing:1px;
    padding:5px 12px 3px; margin-top:40px;
    max-width:min(62vw, 240px);
    line-height:1.25;
  }
  #prompt{ font-size:18px; }
  .dev-box{ padding:24px 22px; max-height:86vh; overflow:auto; }
  .travel-box{ padding:18px 20px; max-height:86vh; overflow:auto; min-width:min(340px,90vw); }
  #travel-list li{ font-size:11px; padding:12px 6px; }

  /* Rich section decor is authored for wide screens. On phones, clip each
     section so nothing can spill sideways, and gently shrink the largest
     structural props so they don't crowd Vaugn. Trees/bushes keep their
     own scale variants — we only touch the big architectural pieces. */
  .section{ overflow:hidden; }
  .tower{ transform:scale(.62); transform-origin:top center; }
  .gatehouse{ transform:scale(.66); transform-origin:top center; }
  .tent{ transform:scale(.66); transform-origin:bottom center; }
  .arcade, .console, .console.cr, .whiteboard, .satellite{ transform:scale(.62); transform-origin:center; }
  .desk{ transform:scale(.7); transform-origin:bottom center; }
  .npc{ transform:scale(.85); transform-origin:bottom center; }
}

/* touch devices: lift the dialogue clear of the controls */
body.touch #dialogue{
  bottom:calc(166px + env(safe-area-inset-bottom));
}
@media (max-width:760px){
  /* trimmer controls on phones so the play area stays open */
  #joystick{ width:116px; height:116px; }
  #joy-knob{ width:48px; height:48px; margin:-24px 0 0 -24px; }
  .tkey.big{ width:64px; height:64px; }
  .tkey.big b{ font-size:19px; }
  .tkey.wide{ width:64px; height:36px; }
  body.touch #top-actions{ top:calc(120px + env(safe-area-inset-top)); right:calc(12px + env(safe-area-inset-right)); }
  body.touch #top-actions .tkey{ width:50px; height:32px; }
  body.touch #shortcut-keys{ top:calc(206px + env(safe-area-inset-top)); right:calc(12px + env(safe-area-inset-right)); gap:5px; }
  #shortcut-keys .tkey{ width:72px; height:26px; }
  #shortcut-keys .tkey .lbl{ font-size:9px; letter-spacing:.3px; }
  body.touch #dialogue{ bottom:calc(156px + env(safe-area-inset-bottom)); }
}
@media (max-height:600px){
  body.touch #dialogue{ bottom:calc(140px + env(safe-area-inset-bottom)); }
  #joystick{ width:104px; height:104px; }
  #joy-knob{ width:44px; height:44px; margin:-22px 0 0 -22px; }
  .tkey.big{ width:58px; height:58px; }
  /* On short landscape screens there's no room for the shortcut column
     without it colliding with the action buttons — hide it; MAP still gives
     full fast-travel access to every land. */
  body.touch #shortcut-keys{ display:none; }
}


/* ============================================================
   HARD GATE — fine-pointer devices (desktops with a mouse) can
   never display the touch rig, even if detection misfires.
   ============================================================ */
@media (hover: hover) and (pointer: fine){
  #touch-controls, #top-actions, #shortcut-keys{ display:none !important; }
  body.touch #hint-bar{ display:flex !important; }
  body.touch .kb-only{ display:revert !important; }
  body.touch .touch-only{ display:none !important; }
  body.touch .pause-hint, body.touch .pane-hint, body.touch .panel-hint{ display:block !important; }
  body.touch #dialogue{ bottom:34px; }
}