:root {
  --scene-ratio: 1672 / 941;
  --panel: rgba(8, 12, 22, .88);
  --text: #fff8e9;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #02040a;
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
}
button { font: inherit; }

/* Muddlepop iOS fixed-screen touch protection */
html, body, #app {
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.scene {
  touch-action: manipulation;
}

.parent-gate-card {
  touch-action: pan-y;
}

.parent-answer {
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
}


/* =========================================================
   v1.2.7 FIXED GAME CANVAS / MOBILE LANDSCAPE FIT
   The artwork and hotspot coordinates are authored against 1672 x 941.
   Keep that exact coordinate space intact and letterbox the scene when a
   phone is wider than the artwork, rather than cropping the top/bottom.
   177.6833156 = 1672 / 941 * 100
    56.2799043 =  941 / 1672 * 100
   ========================================================= */
#app {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;          /* fallback for older browsers */
  height: 100dvh;         /* follows mobile browser chrome correctly */
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #02040a;
  /* Apple-ready safe viewport. Tests can override the --nnf-safe-* values;
     on-device these resolve to the iOS safe-area environment values. */
  padding-top: var(--nnf-safe-top, env(safe-area-inset-top, 0px));
  padding-right: var(--nnf-safe-right, env(safe-area-inset-right, 0px));
  padding-bottom: var(--nnf-safe-bottom, env(safe-area-inset-bottom, 0px));
  padding-left: var(--nnf-safe-left, env(safe-area-inset-left, 0px));
}
.ambient-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("assets/farm/farm-master.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(28px) saturate(.78) brightness(.34);
  transform: scale(1.12);
  opacity: .92;
  transition: background-image .35s ease, filter .6s ease, opacity .6s ease;
  will-change: background-image, filter;
}
#app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(8,18,31,.04) 22%, rgba(2,6,13,.36) 70%, rgba(1,3,8,.72) 100%),
    linear-gradient(180deg, rgba(4,10,18,.18), rgba(1,4,9,.42));
}
.scene {
  position: relative;
  z-index: 2;
  /* CSS fallback. app.js refines this to the exact safe-area rectangle in px. */
  width: min(100vw, 177.6833156vh);
  height: min(100vh, 56.2799043vw);
  width: min(100vw, 177.6833156dvh);
  height: min(100dvh, 56.2799043vw);
  aspect-ratio: var(--scene-ratio);
  flex: 0 0 auto;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,.035), 0 20px 70px rgba(0,0,0,.42);
}
.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.media-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#farmLayer {
  opacity: 0;
  transform: scale(1.03);
  filter: blur(5px);
  transition:
    opacity 1.8s ease,
    transform 2.2s ease,
    filter 2.0s ease;
}
#farmLayer.revealed {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}
#introVideo {
  z-index: 30;
  opacity: 1;
  background:#000;
  pointer-events:none;
  transition: opacity .72s ease;
}
#introVideo.fade-out { opacity: 0; }

.title-card {
  z-index: 5;
  display: grid;
  place-items: start center;
  padding-top: max(6vh, 16px);
  pointer-events: none;
  opacity: 0;
  transform: scale(.97);
  transition: opacity .7s ease, transform .9s ease;
}
.title-card.show {
  opacity: 1;
  transform: scale(1);
}
.title-card h1 {
  margin: 0;
  text-align: center;
  font-size: clamp(30px, 5.2vw, 84px);
  letter-spacing: .06em;
  line-height: .92;
  text-shadow:
    0 2px 0 rgba(70,35,5,.5),
    0 6px 24px rgba(0,0,0,.62);
}
.title-card .nighty {
  display:block;
  font-size:.52em;
  letter-spacing:.18em;
  margin-bottom:.18em;
}
.title-card .farm-title { display:block; }

.barnaby {
  z-index: 3;
  position: absolute;
  left: 0;
  top: 0;
  height: auto;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  pointer-events: none;
  user-select: none;
  will-change: left, top, width, transform;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.28));
  opacity: 0;
}
.barnaby.visible { opacity: 1; }

.start-gate {
  z-index:10;
  display:grid;
  place-items:center;
  padding:18px 20px;
  overflow:auto;
  background:#06101d;
  transition:opacity .5s ease;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.start-gate::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(2,7,16,.50),rgba(2,7,16,.78)),
    radial-gradient(circle at 50% 35%,rgba(41,80,133,.20),transparent 45%),
    url("assets/farm/farm-master.jpg") center/cover no-repeat;
  filter:saturate(.78) brightness(.72);
  transform:scale(1.025);
}
.start-gate::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 25%,rgba(1,5,12,.34) 67%,rgba(1,4,10,.80) 100%);
}
.start-gate.hidden { opacity:0; pointer-events:none; }
.start-gate.prelude-waiting { opacity:0; pointer-events:none; }
.opening-panel,
.selection-panel {
  position:relative;
  z-index:2;
  width:min(1040px,94%);
  border:1px solid rgba(255,240,196,.18);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(6,15,29,.80),rgba(5,11,22,.91));
  box-shadow:0 30px 80px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
}
.opening-panel { padding:clamp(22px,3vw,40px); text-align:center; }
.opening-eyebrow {
  font-size:clamp(9px,.85vw,12px);
  font-weight:750;
  letter-spacing:.24em;
  color:#e6cc86;
  opacity:.92;
}
.opening-panel h1 {
  margin:8px 0 4px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(36px,5.5vw,74px);
  line-height:.9;
  letter-spacing:.035em;
  text-shadow:0 4px 28px rgba(0,0,0,.58);
}
.opening-panel h1 span {
  display:block;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.31em;
  letter-spacing:.22em;
  font-weight:650;
  margin-bottom:.32em;
}
.opening-copy { margin:10px 0 20px; color:rgba(255,248,233,.80); font-size:clamp(13px,1.25vw,17px); }
.mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.4vw,18px); }
.mode-card {
  position:relative;
  min-height:clamp(145px,19vh,210px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:18px 14px;
  border:1px solid rgba(255,244,209,.16);
  border-radius:20px;
  color:#fff8e9;
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 34px rgba(0,0,0,.20);
  cursor:pointer;
  overflow:hidden;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.mode-card::before {
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  top:-105px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,222,133,.22),transparent 67%);
  pointer-events:none;
}
.mode-card:hover,.mode-card:focus-visible {
  transform:translateY(-4px);
  border-color:rgba(255,226,147,.54);
  background:linear-gradient(160deg,rgba(255,245,213,.13),rgba(255,255,255,.035));
  box-shadow:0 18px 42px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.09);
  outline:none;
}
.mode-card strong { font-family:Georgia,"Times New Roman",serif; font-size:clamp(25px,3vw,42px); letter-spacing:.05em; }
.mode-kicker { font-size:9px; font-weight:800; letter-spacing:.18em; color:#e7cd8b; }
.mode-detail { font-size:clamp(12px,1.2vw,16px); font-weight:720; }
.mode-foot { font-size:clamp(10px,.92vw,13px); color:rgba(255,248,233,.60); }
.mode-card.license-locked::after {
  content:"LOCKED";
  position:absolute;
  right:10px;
  top:10px;
  padding:5px 7px;
  border-radius:999px;
  font-size:8px;
  font-weight:850;
  letter-spacing:.13em;
  background:rgba(2,7,14,.72);
  color:#f2d887;
  border:1px solid rgba(242,216,135,.28);
}
.license-note,.start-message { min-height:18px; margin-top:12px; font-size:12px; color:rgba(255,248,233,.65); }
.start-message { color:#f4d98d; font-weight:650; }
.selection-panel { padding:clamp(18px,2.2vw,30px); }
.selection-topline { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; color:#e6cc86; font-size:10px; font-weight:800; letter-spacing:.14em; }
.selection-topline .ghost-button:last-child { justify-self:end; }
.ghost-button {
  border:1px solid rgba(255,245,215,.16);
  background:rgba(255,255,255,.05);
  color:#fff4d9;
  border-radius:999px;
  padding:8px 12px;
  font:700 11px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  cursor:pointer;
}
.selection-panel h2 { margin:14px 0 4px; text-align:center; font:700 clamp(22px,3vw,38px)/1.05 Georgia,"Times New Roman",serif; }
.selection-panel>p { margin:0 0 15px; text-align:center; color:rgba(255,248,233,.65); font-size:12px; }
.animal-select-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
.animal-choice {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-height:74px;
  padding:12px 34px 12px 13px;
  border:1px solid rgba(255,246,219,.13);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  color:#fff8e9;
  cursor:pointer;
  text-align:left;
  transition:.16s ease;
}
.animal-choice:hover { border-color:rgba(255,224,140,.34); background:rgba(255,255,255,.07); }
.animal-choice.selected { border-color:rgba(244,213,126,.62); background:linear-gradient(145deg,rgba(244,213,126,.14),rgba(255,255,255,.05)); box-shadow:inset 0 0 0 1px rgba(244,213,126,.12); }
.animal-choice strong { font-size:13px; }
.animal-choice span { margin-top:3px; color:rgba(255,248,233,.58); font-size:10px; }
.animal-choice::after {
  content:"";
  position:absolute;
  right:12px;
  top:50%;
  width:17px;
  height:17px;
  transform:translateY(-50%);
  border-radius:50%;
  border:1px solid rgba(255,244,209,.27);
  background:rgba(0,0,0,.16);
}
.animal-choice.selected::after { background:#f1d37e; border-color:#f7e3aa; box-shadow:0 0 14px rgba(241,211,126,.35); }
.selection-footer { display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:14px; }
.selection-count { margin-right:auto; color:rgba(255,248,233,.66); font-size:12px; }
.primary-start {
  border:0;
  border-radius:999px;
  padding:11px 19px;
  background:linear-gradient(180deg,#fff0bd,#dfbd61);
  color:#302006;
  font:850 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  box-shadow:0 7px 22px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.65);
  cursor:pointer;
}
.primary-start:disabled { opacity:.38; cursor:not-allowed; }
@media (max-height:620px) {
  .opening-panel { padding:16px 22px; }
  .opening-copy { margin:7px 0 12px; }
  .mode-card { min-height:128px; }
  .animal-choice { min-height:60px; padding-top:9px; padding-bottom:9px; }
}
@media (max-width:900px) {
  .mode-grid { gap:8px; }
  .animal-select-grid { grid-template-columns:repeat(5,minmax(95px,1fr)); overflow-x:auto; }
}
.orientation-gate {
  z-index: 20;
  display:none;
  place-items:center;
  padding:32px;
  text-align:center;
  background:#07101c;
  font-family:system-ui,-apple-system,Segoe UI,sans-serif;
}
.orientation-gate strong { font-size:28px; }
.orientation-gate p { opacity:.75; }
@media (orientation: portrait) {
  /* The game canvas is letterboxed only in landscape. Keep the rotate prompt
     full-screen if the device is turned upright, and keep it above all media. */
  .scene {
    aspect-ratio:auto;
  }
  .orientation-gate { display:grid; z-index:1000; }
}
.debug {
  position:absolute;
  z-index:30;
  right:10px;
  bottom:10px;
  display:none;
  gap:7px;
  padding:8px;
  background:var(--panel);
  border-radius:10px;
  font-family:system-ui,-apple-system,Segoe UI,sans-serif;
}
.debug.show { display:flex; }
.debug button {
  border:0;
  border-radius:8px;
  padding:7px 10px;
  cursor:pointer;
}


/* =========================================================
   LIVING FARM — locked from exported configuration
   ========================================================= */
:root {
  --farm-fireflies: .52;
  --farm-lamp-glow: .44;
  --farm-smoke: .75;
  --farm-water: .07;
  --farm-stars: .55;
  --farm-clouds: .35;
  --farm-path: .50;
  --farm-idle-pulse: .24;
}

.living-farm {
  z-index: 2;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.living-farm.active { opacity: 1; }

.firefly {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: rgba(255,236,123,.98);
  box-shadow:
    0 0 8px rgba(255,222,83,.98),
    0 0 18px rgba(255,194,52,.74),
    0 0 30px rgba(255,175,38,.28);
  animation:
    farmFireflyMove var(--dur) ease-in-out infinite alternate,
    farmFireflyBlink calc(var(--dur) * .42) ease-in-out infinite;
  animation-delay: var(--delay);
}
@keyframes farmFireflyMove {
  from { transform: translate(0,0) scale(.9); }
  to { transform: translate(var(--dx),var(--dy)) scale(1.12); }
}
@keyframes farmFireflyBlink {
  0%,100% { opacity: calc(.12 * var(--farm-fireflies)); }
  42% { opacity: var(--farm-fireflies); }
  58% { opacity: calc(.34 * var(--farm-fireflies)); }
}

.farm-star {
  position:absolute;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 8px rgba(220,235,255,.92), 0 0 16px rgba(180,210,255,.32);
  animation:farmTwinkle var(--dur) ease-in-out infinite;
  animation-delay:var(--delay);
}
@keyframes farmTwinkle {
  0%,100% { opacity:calc(.08 * var(--farm-stars)); transform:scale(.7); }
  50% { opacity:var(--farm-stars); transform:scale(1.45); }
}

.cloud {
  position:absolute;
  width:22vw;
  height:5vw;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(210,225,255,.17),rgba(210,225,255,0) 72%);
  filter:blur(12px);
  opacity:var(--farm-clouds);
  animation:farmCloudDrift 22s linear infinite;
}
.cloud-a { left:-16%; top:10%; }
.cloud-b { left:20%; top:17%; animation-duration:28s; animation-delay:-9s; opacity:calc(.7 * var(--farm-clouds)); }
@keyframes farmCloudDrift {
  from { transform:translateX(0); }
  to { transform:translateX(125vw); }
}

.farm-lamp-glow {
  position:absolute;
  width:calc(var(--r) * 2.2);
  height:calc(var(--r) * 2.2);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,
      rgba(255,240,170,.72),
      rgba(255,194,75,.34) 34%,
      rgba(255,153,39,.14) 58%,
      transparent 78%);
  filter:blur(7px);
  mix-blend-mode:screen;
  animation:farmLampBreath 2.7s ease-in-out infinite;
  animation-delay:var(--delay);
}
@keyframes farmLampBreath {
  0%,100% { opacity:calc(.34 * var(--farm-lamp-glow)); transform:translate(-50%,-50%) scale(.88); }
  50% { opacity:var(--farm-lamp-glow); transform:translate(-50%,-50%) scale(1.14); }
}

.smoke-wrap {
  position:absolute;
  left:29.2%;
  top:2.2%;
  width:10%;
  height:27%;
  opacity:var(--farm-smoke);
}
.smoke {
  position:absolute;
  left:43%;
  bottom:0;
  width:24px;
  height:24px;
  border-radius:50%;
  background:rgba(230,235,245,.38);
  filter:blur(7px);
  animation:farmSmokeRise 7s linear infinite;
}
.smoke:nth-child(2) { animation-delay:-2s; width:29px; height:29px; left:49%; }
.smoke:nth-child(3) { animation-delay:-3.7s; width:34px; height:34px; left:36%; }
.smoke:nth-child(4) { animation-delay:-5.2s; width:27px; height:27px; left:44%; }
@keyframes farmSmokeRise {
  0% { transform:translate(0,0) scale(.65); opacity:0; }
  12% { opacity:.44; }
  60% { opacity:.25; }
  100% { transform:translate(44px,-180px) scale(2.45); opacity:0; }
}

.pond-shimmer {
  position:absolute;
  left:66%;
  top:66.1%;
  width:29%;
  height:25%;
  clip-path:ellipse(49% 48% at 54% 50%);
  opacity:var(--farm-water);
  mix-blend-mode:screen;
  overflow:hidden;
}
.pond-shimmer::before,
.pond-shimmer::after {
  content:"";
  position:absolute;
  inset:-18%;
  background:repeating-linear-gradient(
    177deg,
    rgba(255,235,172,0) 0 10px,
    rgba(255,234,176,.48) 11px 14px,
    rgba(191,225,255,.18) 15px 19px
  );
  filter:blur(1.3px);
  animation:farmWaterShift 4.8s ease-in-out infinite alternate;
}
.pond-shimmer::after {
  opacity:.58;
  animation-duration:7.2s;
  animation-direction:alternate-reverse;
}
@keyframes farmWaterShift {
  from { transform:translateX(-12%) translateY(-2%) skewX(-4deg); }
  to { transform:translateX(12%) translateY(2%) skewX(4deg); }
}

.path-magic {
  position:absolute;
  left:29%;
  top:39%;
  width:48%;
  height:43%;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,223,143,.36),transparent 8%),
    radial-gradient(circle at 45% 40%,rgba(255,212,102,.30),transparent 7%),
    radial-gradient(circle at 70% 72%,rgba(255,222,140,.28),transparent 6%);
  filter:blur(12px);
  animation:farmPathBreath 4.5s ease-in-out infinite;
  opacity:var(--farm-path);
}
@keyframes farmPathBreath {
  0%,100% { opacity:calc(.35 * var(--farm-path)); }
  50% { opacity:var(--farm-path); }
}

.farm-blackouts {
  z-index:3;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  transform:scale(1.03);
  filter:blur(5px);
  transition:opacity 1.8s ease,transform 2.2s ease,filter 2s ease;
}
.farm-blackouts.revealed { opacity:1; transform:scale(1); filter:blur(0); }
.farm-blackout-overlay {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--farm-blackout-fade,1.5s) ease;
  will-change:opacity;
}
.farm-blackout-overlay.show { opacity:1; }
.farm-toast {
  position:absolute;
  z-index:11;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(8px);
  padding:9px 13px;
  border-radius:999px;
  background:rgba(3,9,18,.75);
  color:#fff4d6;
  font:650 12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;
  backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .2s ease,transform .2s ease;
  pointer-events:none;
}
.farm-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.farm-hotspots {
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
}
.farm-hotspot {
  position:absolute;
  border:0;
  background:transparent;
  border-radius:18px;
  pointer-events:auto;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.farm-hotspot::before {
  content:"";
  position:absolute;
  inset:6%;
  border-radius:inherit;
  background:radial-gradient(circle,
      rgba(255,230,153,.52),
      rgba(255,194,70,.16) 48%,
      transparent 72%);
  opacity:0;
  transform:scale(.9);
}
.farm-hotspot.hint::before {
  animation:farmHotspotPulse 2.2s ease-in-out 2;
}
@keyframes farmHotspotPulse {
  0%,100% { opacity:0; transform:scale(.9); }
  48% { opacity:calc(var(--hot-pulse,.7) * var(--farm-idle-pulse)); transform:scale(1.08); }
}
.farm-hotspot .completion-moon {
  position:absolute;
  right:2%;
  top:0;
  font-size:clamp(18px,2.5vw,36px);
  color:#fff0b8;
  filter:drop-shadow(0 0 7px rgba(255,232,150,.8));
  opacity:0;
  transform:scale(.7) rotate(-12deg);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.farm-hotspot.complete .completion-moon {
  opacity:1;
  transform:scale(1) rotate(-12deg);
}
.farm-hotspot .debug-label {
  position:absolute;
  left:50%;
  top:100%;
  transform:translate(-50%,5px);
  padding:4px 7px;
  border-radius:999px;
  background:rgba(4,9,17,.86);
  color:#fff;
  font:11px/1 system-ui,-apple-system,Segoe UI,sans-serif;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
}
.debug-mode .farm-hotspot {
  outline:2px dashed rgba(255,255,255,.75);
  background:rgba(255,220,120,.06);
}
.debug-mode .farm-hotspot .debug-label { opacity:1; }
.debug-status {
  align-self:center;
  font:12px/1 system-ui,-apple-system,Segoe UI,sans-serif;
  opacity:.75;
  padding:0 4px;
}




/* =========================================================
   GENERIC NIGHTY NIGHT FARM ENGINE v1.0
   ========================================================= */
.cinematic-video {
  z-index:20; display:none; opacity:1; background:#000;
}
.cinematic-video.show { display:block; }
.living-farm.hard-cut { transition:none !important; }

.farm-hotspots { pointer-events:none; }
.farm-hotspots.active { pointer-events:auto; }
.farm-hotspot.locked { pointer-events:none; }
.farm-hotspot.unassigned { pointer-events:none; }
.farm-hotspot.special-missing { pointer-events:none; }
.farm-hotspot.mode-locked { pointer-events:auto; }
.farm-completion-markers { position:absolute; inset:0; z-index:9; pointer-events:none; }
.farm-completion-marker {
  position:absolute; transform:translate(-50%,-50%) scale(.7) rotate(-12deg);
  font-size:clamp(20px,2.5vw,38px); color:#fff0b8;
  filter:drop-shadow(0 0 8px rgba(255,232,150,.82)); opacity:0;
  transition:opacity .35s ease, transform .35s ease;
}
.farm-completion-marker.show { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-12deg); }

.room-screen {
  z-index:40; display:none; opacity:0; background:#02040a;
  transition:opacity .18s ease;
}
.room-screen.show { display:block; opacity:1; }
.room-master { position:absolute; inset:0; z-index:0; user-select:none; pointer-events:none; }
.room-master.sleep-base-hidden { visibility:hidden; }
/* Sleep transition masters are deliberately separate DOM layers. Dark-standing and asleep
   never share an <img>, preventing either state from flashing in place of the other. */
.room-dark-master { z-index:1; opacity:0; visibility:hidden; pointer-events:none; }
.room-dark-master.show { opacity:1; visibility:visible; }
.room-sleep-master { z-index:2; opacity:0; visibility:hidden; pointer-events:none; }
.room-sleep-master.show { opacity:1; visibility:visible; }
.room-hotspots { position:absolute; inset:0; z-index:8; pointer-events:auto; }
.room-hotspots.locked { pointer-events:none; }
.room-hotspot {
  position:absolute; border:0; padding:0; border-radius:16px;
  background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent;
}

/* NNA-style room interaction locator dots: normal interactions only. Secrets stay invisible; sleep uses the moon. */
.room-hotspot .interaction-hint-dot {
  position:absolute; left:50%; top:50%; width:clamp(8px,1.05vw,15px); height:clamp(8px,1.05vw,15px);
  transform:translate(-50%,-50%); border-radius:50%; background:rgba(255,255,255,.96);
  box-shadow:0 0 0 2px rgba(255,255,255,.24),0 0 12px rgba(255,255,255,.90),0 0 22px rgba(255,255,255,.34);
  opacity:0; pointer-events:none;
}
.room-hotspot.hint-visible .interaction-hint-dot { animation:roomHintPulse 1.7s ease-in-out infinite; }
@keyframes roomHintPulse {
  0%,100% { opacity:.48; transform:translate(-50%,-50%) scale(.82); }
  50% { opacity:1; transform:translate(-50%,-50%) scale(1.18); }
}
.room-hotspots.locked .interaction-hint-dot { opacity:0!important; animation:none!important; }

.room-hotspot.sleep { pointer-events:none; }
.room-hotspot.sleep .sleep-moon {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-12deg) scale(.82);
  font-size:clamp(30px,4vw,58px); line-height:1; color:#fff1b7;
  text-shadow:0 0 10px rgba(255,238,164,.92),0 2px 8px rgba(0,0,0,.45);
  pointer-events:none; opacity:0;
}
.room-hotspot.sleep.sleep-ready { pointer-events:auto; }
.room-hotspot.sleep.sleep-ready .sleep-moon { animation:sleepMoonArrive .42s ease-out both, sleepMoonBreath 3.1s .42s ease-in-out infinite; }
@keyframes sleepMoonArrive {
  from { opacity:0; transform:translate(-50%,-50%) rotate(-12deg) scale(.72); }
  to { opacity:.92; transform:translate(-50%,-50%) rotate(-12deg) scale(.94); }
}
@keyframes sleepMoonBreath {
  0%,100% { transform:translate(-50%,-50%) rotate(-12deg) scale(.94); opacity:.88; }
  50% { transform:translate(-50%,-50%) rotate(-12deg) scale(1.05); opacity:1; }
}
.room-hotspot .debug-label {
  position:absolute; left:50%; top:100%; transform:translate(-50%,5px);
  padding:4px 7px; border-radius:999px; background:rgba(4,9,17,.88);
  color:#fff; font:11px/1 system-ui,-apple-system,Segoe UI,sans-serif;
  white-space:nowrap; opacity:0; pointer-events:none;
}
.debug-mode .room-hotspot { outline:2px dashed rgba(255,255,255,.8); background:rgba(255,220,120,.07); }
.debug-mode .room-hotspot.secret { outline-color:#ffd96b; }
.debug-mode .room-hotspot.sleep { outline-color:#fff0b8; }
.debug-mode .room-hotspot.missing { outline-color:#ff6464; background:rgba(255,70,70,.08); pointer-events:none; }
.debug-mode .room-hotspot .debug-label { opacity:1; }

/* Muddlepop room navigation: coordinates are the button's top-left corner. */
.room-back {
  position:absolute; z-index:12;
  left:clamp(8px,var(--room-back-x,2%),calc(100% - 72px));
  top:clamp(8px,var(--room-back-y,2%),calc(100% - 64px));
  right:auto; bottom:auto;
  width:64px; height:56px; min-width:64px; min-height:56px;
  margin:0; padding:0; display:grid; place-items:center;
  border:2px solid #f2d18a; border-radius:22px 18px 21px 17px;
  background:
    radial-gradient(ellipse at 30% 8%,#ffedb052,transparent 62%),
    repeating-linear-gradient(4deg,transparent 0 8px,#42270d16 9px 10px),
    linear-gradient(165deg,#b58548,#835831 70%,#684626);
  box-shadow:inset 0 2px 0 #fff2cb73,inset 0 -3px 0 #4d301a66,
             0 4px 0 #39271bc4,0 7px 14px #00000042;
  color:#fff2c4; cursor:pointer; opacity:1; visibility:visible;
  appearance:none; -webkit-appearance:none; backdrop-filter:none;
  touch-action:manipulation;
  user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.room-back svg {
  width:54px; height:44px; display:block; pointer-events:none;
}
.room-back:active:not(:disabled) { filter:brightness(1.12); }
.room-back:focus-visible {
  outline:3px solid #fff7df; outline-offset:4px;
}
.room-back:disabled {
  opacity:0; visibility:hidden; pointer-events:none;
}

.room-toast {
  position:absolute; z-index:13; left:50%; top:16px; transform:translateX(-50%);
  padding:8px 12px; border-radius:999px; background:rgba(5,10,20,.70); color:#fff7df;
  font:650 13px/1.2 system-ui,-apple-system,Segoe UI,sans-serif; backdrop-filter:blur(8px);
  opacity:0; transition:opacity .2s ease; pointer-events:none;
}
.room-toast.show { opacity:1; }
.media-video {
  z-index:50; display:block; opacity:0; visibility:hidden; background:transparent; pointer-events:none;
}
.media-video.priming { opacity:0; visibility:visible; }
.media-video.show { opacity:1; visibility:visible; }

.debug select {
  border:0; border-radius:8px; padding:7px 8px; background:#fff; color:#111; min-width:118px;
}
@media (max-width: 900px) {
  .debug { max-width:70vw; flex-wrap:wrap; justify-content:flex-end; }
}

/* =========================================================
   v1.2.1 PREMIUM OPENING — cinematic NNA-style treatment
   ========================================================= */
[hidden] { display:none !important; }

.start-gate {
  background:#030712;
  /* The complete 16:9 scene already sits inside the safe viewport. */
  padding:12px 18px;
}
.start-gate::before {
  background:
    linear-gradient(180deg,rgba(2,6,14,.18) 0%,rgba(2,7,16,.35) 38%,rgba(1,5,12,.70) 100%),
    url("assets/farm/farm-master.jpg") center/cover no-repeat;
  filter:saturate(.98) brightness(.90);
  transform:scale(1.055);
  animation:openingFarmDrift 18s ease-in-out infinite alternate;
}
@keyframes openingFarmDrift {
  from { transform:scale(1.055) translate3d(-.35%,0,0); }
  to { transform:scale(1.095) translate3d(.45%,-.35%,0); }
}
.start-gate::after {
  background:
    radial-gradient(circle at 50% 4%,rgba(255,225,153,.18),transparent 20%),
    radial-gradient(ellipse at 50% 52%,transparent 12%,rgba(0,4,12,.10) 45%,rgba(0,3,9,.68) 100%),
    linear-gradient(90deg,rgba(0,3,10,.45),transparent 22%,transparent 78%,rgba(0,3,10,.45));
}
.opening-panel {
  width:min(1460px,96%);
  padding:clamp(10px,1.5vw,22px) clamp(8px,1.3vw,18px) clamp(12px,1.7vw,24px);
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  text-align:center;
}
.opening-panel::before {
  content:"";
  position:absolute;
  left:50%; top:-3vh;
  width:min(560px,52%); height:min(160px,19vh);
  transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(255,223,146,.13),transparent 68%);
  filter:blur(8px);
  pointer-events:none;
}
.opening-eyebrow {
  position:relative;
  z-index:3;
  font-size:clamp(9px,.72vw,12px);
  font-weight:800;
  letter-spacing:.29em;
  color:#f4d792;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.opening-eyebrow::before,
.opening-eyebrow::after { content:"✦"; display:inline-block; margin:0 .9em; opacity:.72; font-size:.8em; }
.opening-panel h1 {
  position:relative;
  z-index:3;
  margin:clamp(4px,.7vh,8px) 0 0;
  font-size:clamp(42px,5.6vw,88px);
  line-height:.84;
  letter-spacing:.055em;
  color:#fff6dc;
  text-shadow:0 4px 0 rgba(87,43,8,.28),0 10px 34px rgba(0,0,0,.72),0 0 34px rgba(255,213,118,.10);
}
.opening-panel h1 span {
  font-size:.29em;
  margin-bottom:.32em;
  letter-spacing:.27em;
  color:#ffe8b0;
}
.opening-copy {
  position:relative;
  z-index:3;
  margin:clamp(7px,1vh,12px) 0 clamp(13px,1.7vh,22px);
  color:rgba(255,248,231,.90);
  font-size:clamp(13px,1.18vw,18px);
  font-weight:600;
  letter-spacing:.02em;
  text-shadow:0 2px 10px rgba(0,0,0,.65);
}
.mode-grid {
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.45vw,24px);
  perspective:1400px;
}
.mode-card {
  min-height:clamp(160px,34vh,330px);
  align-items:flex-start;
  justify-content:flex-end;
  gap:3px;
  padding:clamp(18px,2vw,28px);
  border:1px solid rgba(255,237,191,.29);
  border-radius:clamp(22px,2vw,32px);
  text-align:left;
  background-color:#09111e;
  background-position:center;
  background-size:cover;
  box-shadow:0 22px 54px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -70px 80px rgba(0,0,0,.14);
  isolation:isolate;
  transform:translateY(14px) scale(.985);
  opacity:0;
  animation:premiumCardEnter .7s cubic-bezier(.2,.8,.2,1) forwards;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,box-shadow .28s ease,filter .28s ease;
}
.mode-card:nth-child(1){animation-delay:.08s}
.mode-card:nth-child(2){animation-delay:.16s}
.mode-card:nth-child(3){animation-delay:.24s}
@keyframes premiumCardEnter { to { opacity:1; transform:translateY(0) scale(1); } }
.mode-card::before {
  content:"";
  position:absolute;
  inset:0;
  width:auto; height:auto; top:0;
  border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(3,8,16,.05) 0%,rgba(3,8,16,.02) 26%,rgba(3,8,16,.36) 58%,rgba(2,6,14,.94) 100%),
    linear-gradient(90deg,rgba(0,0,0,.18),transparent 62%);
  pointer-events:none;
  z-index:-1;
}
.mode-card::after,
.mode-card.license-locked::after { content:none; }
.mode-card:hover,.mode-card:focus-visible {
  transform:translateY(-8px) scale(1.018);
  border-color:rgba(255,224,145,.78);
  background-color:#09111e;
  box-shadow:0 30px 70px rgba(0,0,0,.50),0 0 0 1px rgba(255,221,139,.12),0 0 32px rgba(255,202,93,.12),inset 0 1px 0 rgba(255,255,255,.18);
  filter:saturate(1.07) brightness(1.04);
  outline:none;
}
.mode-card:active { transform:translateY(-2px) scale(.995); }
.mode-card > * { position:relative; z-index:2; }
.mode-kicker {
  position:absolute;
  left:clamp(16px,1.6vw,24px);
  top:clamp(16px,1.6vw,24px);
  padding:7px 10px 6px;
  border:1px solid rgba(255,231,168,.28);
  border-radius:999px;
  background:rgba(3,8,17,.60);
  backdrop-filter:blur(8px);
  color:#ffe4a1;
  font-size:clamp(8px,.64vw,10px);
  letter-spacing:.19em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.mode-card strong {
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(32px,3.45vw,58px);
  line-height:.92;
  letter-spacing:.05em;
  color:#fff6dd;
  text-shadow:0 3px 16px rgba(0,0,0,.72);
}
.mode-detail {
  margin-top:7px;
  font-size:clamp(13px,1.17vw,18px);
  font-weight:760;
  color:#fff8e9;
  text-shadow:0 2px 12px rgba(0,0,0,.8);
}
.mode-foot {
  margin-top:3px;
  font-size:clamp(10px,.86vw,13px);
  font-weight:600;
  color:rgba(255,245,220,.72);
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.mode-card.license-locked { filter:none; }
.mode-card.license-locked:hover,.mode-card.license-locked:focus-visible { filter:saturate(1.07) brightness(1.04); }
.license-note,.start-message {
  position:relative;
  z-index:3;
  min-height:17px;
  margin-top:clamp(9px,1.2vh,14px);
  color:rgba(255,244,216,.72);
  font-size:clamp(10px,.83vw,12px);
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.start-message { color:#ffe09a; font-weight:750; }

/* SELECT screen — artwork-led, not a settings form. */
.selection-panel {
  width:min(1450px,96%);
  max-height:min(90%,850px);
  overflow:auto;
  padding:clamp(16px,2vw,28px);
  border:1px solid rgba(255,235,184,.18);
  border-radius:clamp(22px,2vw,32px);
  background:linear-gradient(180deg,rgba(3,9,18,.78),rgba(2,7,15,.90));
  box-shadow:0 30px 90px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(16px) saturate(1.08);
}
.selection-topline { font-size:clamp(8px,.72vw,11px); letter-spacing:.19em; color:#f0d58e; }
.ghost-button {
  border:1px solid rgba(255,237,194,.20);
  background:rgba(5,12,23,.52);
  color:#fff1cb;
  padding:9px 13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.ghost-button:hover { border-color:rgba(255,223,143,.50); background:rgba(255,255,255,.08); }
.selection-panel h2 {
  margin:clamp(10px,1.4vh,16px) 0 3px;
  font-size:clamp(24px,3.1vw,46px);
  color:#fff5da;
  text-shadow:0 4px 24px rgba(0,0,0,.55);
}
.selection-panel>p { margin:0 0 clamp(10px,1.5vh,16px); font-size:clamp(10px,.9vw,13px); color:rgba(255,246,222,.69); }
.animal-select-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(8px,.85vw,13px); }
.animal-choice {
  min-height:clamp(90px,14.5vh,146px);
  padding:0;
  justify-content:flex-end;
  align-items:flex-start;
  overflow:hidden;
  border:1px solid rgba(255,239,199,.15);
  border-radius:clamp(14px,1.25vw,20px);
  background-image:linear-gradient(180deg,rgba(2,6,14,.04) 10%,rgba(2,6,14,.18) 45%,rgba(2,6,14,.92) 100%),var(--choice-art);
  background-size:cover;
  background-position:center;
  box-shadow:0 12px 24px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,filter .2s ease;
}
.animal-choice:hover { transform:translateY(-3px); border-color:rgba(255,224,145,.43); background-color:transparent; filter:saturate(1.05) brightness(1.03); }
.animal-choice.selected {
  border-color:rgba(255,222,132,.92);
  background-image:linear-gradient(180deg,rgba(2,6,14,.02) 10%,rgba(2,6,14,.13) 45%,rgba(2,6,14,.88) 100%),var(--choice-art);
  box-shadow:0 0 0 2px rgba(255,215,111,.18),0 14px 30px rgba(0,0,0,.30),0 0 24px rgba(255,201,82,.09);
}
.animal-choice strong,
.animal-choice span { position:relative; z-index:2; margin-left:clamp(11px,1vw,15px); text-shadow:0 2px 10px rgba(0,0,0,.92); }
.animal-choice strong { margin-bottom:1px; font:800 clamp(12px,1vw,16px)/1.05 system-ui,-apple-system,"Segoe UI",sans-serif; color:#fff8e7; }
.animal-choice span { margin-top:2px; margin-bottom:clamp(9px,.9vw,13px); font-size:clamp(8px,.7vw,10px); color:rgba(255,244,216,.70); }
.animal-choice::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
  pointer-events:none;
}
.animal-choice::after {
  content:"";
  position:absolute;
  right:clamp(9px,.8vw,12px);
  top:clamp(9px,.8vw,12px);
  width:clamp(23px,2vw,30px);
  height:clamp(23px,2vw,30px);
  transform:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,244,216,.44);
  background:rgba(2,7,15,.58);
  box-shadow:0 3px 14px rgba(0,0,0,.30);
  color:#251704;
  font:900 clamp(12px,1.1vw,17px)/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  backdrop-filter:blur(5px);
}
.animal-choice.selected::after {
  content:"✓";
  border-color:#ffe09a;
  background:#ffe09a;
  box-shadow:0 0 16px rgba(255,220,135,.36),0 3px 14px rgba(0,0,0,.30);
}
.selection-footer { margin-top:clamp(11px,1.5vh,17px); }
.selection-count { color:rgba(255,244,216,.72); font-weight:700; }
.primary-start {
  border:1px solid rgba(255,232,167,.65);
  background:linear-gradient(180deg,#ffe49f,#e5ba5f);
  color:#271708;
  box-shadow:0 10px 24px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.45);
  font-weight:900;
  letter-spacing:.02em;
}
.primary-start:hover { filter:brightness(1.05); transform:translateY(-1px); }

@media (max-height: 560px) and (orientation: landscape) {
  .opening-panel { padding-top:4px; padding-bottom:4px; }
  .opening-panel h1 { font-size:clamp(36px,8.8vh,58px); }
  .opening-copy { margin:5px 0 9px; }
  .mode-card { min-height:clamp(132px,43vh,205px); padding:14px; }
  .mode-kicker { top:12px; left:12px; padding:5px 8px; }
  .mode-card strong { font-size:clamp(26px,7vh,39px); }
  .license-note,.start-message { margin-top:7px; }
  .selection-panel { max-height:96vh; padding:12px; }
  .selection-panel h2 { margin:6px 0 2px; font-size:clamp(21px,6vh,31px); }
  .selection-panel>p { margin-bottom:7px; }
  .animal-choice { min-height:88px; }
  .selection-footer { margin-top:8px; }
}

/* =========================================================
   v1.2.1 FARM SETTLING LIGHTS
   Building blackouts + nearby lamp pools + cumulative nightfall.
   ========================================================= */
.farm-ambient-dimming {
  z-index:3;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  transform:scale(1.03);
  filter:blur(5px);
  transition:opacity 1.8s ease,transform 2.2s ease,filter 2s ease;
}
.farm-ambient-dimming.revealed { opacity:1; transform:scale(1); filter:blur(0); }
.farm-ambient-overlay {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--farm-blackout-fade,1.5s) ease;
  will-change:opacity;
}
.farm-ambient-overlay.show { opacity:1; }
.farm-night-veil {
  z-index:3;
  pointer-events:none;
  background:#020812;
  opacity:0;
  transition:opacity var(--farm-blackout-fade,1.5s) ease;
}
.farm-lamp-glow { transition:opacity var(--farm-blackout-fade,1.5s) ease; }
.farm-lamp-glow.light-off { animation:none !important; opacity:0 !important; }
.selection-topline .ghost-button:first-child { justify-self:start; }

/* =========================================================
   v1.2.2 BARNABY INTRO HANDOFF
   Keep the real intro video alive invisibly after the menu tap so stricter
   mobile autoplay policies cannot drop the delayed cinematic after the walk.
   ========================================================= */
.cinematic-video.priming {
  display:block;
  opacity:0;
  pointer-events:none;
  z-index:1;
}
.cinematic-video.show {
  opacity:1;
  z-index:20;
}

/* v1.2.3: lantern prelude is the first visual layer; menu fades in only after it completes. */

/* =========================================================
   v1.2.8 APPLE TOUCH TARGET POLISH
   UI controls (not authored gameplay hotspots) keep a minimum 44px target.
   ========================================================= */
.ghost-button,
.primary-start {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.scene {
  -webkit-touch-callout: none;
}


/* =========================================================
   v1.3.0 SPECIAL FARM STATES + MUSIC-AWARE ROOM POLISH
   Frog lily-pad completion and squirrel-loft unlock light.
   ========================================================= */
.farm-special-states { z-index:4; pointer-events:none; overflow:hidden; }
.farm-special-state { position:absolute; opacity:0; pointer-events:none; transition:opacity var(--farm-blackout-fade,1.5s) ease; }
.farm-special-state.show { opacity:1; }
.farm-special-state.frog-sleep-image { object-fit:fill; }
.farm-hotspot.special-room-complete { pointer-events:none; }


/* =========================================================
   v1.3.7 final polish
   - white squirrel-loft unlock locator
   - farmhouse final lights-out layer
   - final "The End" title
   ========================================================= */
.farm-hotspot.special-ready-dot::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(9px,1.05vw,15px);
  height:clamp(9px,1.05vw,15px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(255,255,255,.98);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.24),
    0 0 12px rgba(255,255,255,.95),
    0 0 24px rgba(255,255,255,.42);
  animation:roomHintPulse 1.7s ease-in-out infinite;
  pointer-events:none;
}
.farm-hotspot.special-room-complete::after,
.farm-hotspot.locked.special-ready-dot::after {
  display:none;
}

.farm-special-state.farmhouse-sleep-image {
  object-fit:fill;
  inset:0;
}

/* Match the final farmhouse blackout more closely to the other completed rooms. */
.farm-special-state.farmhouse-sleep-image.show {
  opacity:.72;
}

.end-card {
  position:absolute;
  inset:0;
  z-index:35;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:radial-gradient(circle at center,rgba(2,7,15,.08),rgba(2,6,14,.20) 58%,rgba(2,5,12,.34));
  transition:opacity 1.8s ease, visibility 0s linear 1.8s;
}
.end-card.show {
  opacity:1;
  visibility:visible;
  transition:opacity 1.8s ease;
}
.end-card span {
  transform:translateY(8%);
  font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  font-size:clamp(58px,10vw,150px);
  font-style:italic;
  font-weight:600;
  letter-spacing:.035em;
  color:#fff1c9;
  text-shadow:
    0 2px 2px rgba(0,0,0,.55),
    0 0 14px rgba(255,230,168,.30),
    0 0 32px rgba(255,210,110,.16);
}

/* v1.3.8: action locks also apply to explicitly interactive descendants. */
.room-hotspots.locked .room-hotspot { pointer-events:none; }
/* Used only if a dark/asleep image fails; normal creative layers are unchanged. */
.room-master.sleep-image-fallback { visibility:visible; filter:brightness(.22); }

/* H1: deliberate replay action; preserve the existing title's position and styling. */
#newNight { position:absolute; top:calc(50% + clamp(50px,9vw,115px)); min-width:132px; min-height:48px; padding:10px 24px; border:1px solid #fff1c9; border-radius:24px; color:#fff1c9; background:#152c39; font:600 18px Georgia,serif; cursor:pointer; pointer-events:auto; }
.end-card.show { pointer-events:auto; }
.app-suspended * { animation-play-state:paused !important; }

/* M2: invisible hit regions do not move or resize artwork or locator indicators. */
.farm-hotspot, .room-hotspot { pointer-events:none !important; }
.touch-extension { position:absolute; display:block; background:transparent; pointer-events:auto; }
.farm-hotspots:not(.active) .touch-extension,
.farm-hotspot.locked .touch-extension,
.farm-hotspot.unassigned .touch-extension,
.farm-hotspot.special-missing .touch-extension,
.farm-hotspot.special-room-complete .touch-extension,
.room-hotspots.locked .touch-extension,
.room-hotspot:disabled .touch-extension,
.room-hotspot.sleep:not(.sleep-ready) .touch-extension { pointer-events:none; }

/* v1.4.0: supplied, fully visible card art; baked labels are never duplicated. */
.mode-grid { align-items:center; }
.mode-card, .mode-card:hover, .mode-card:focus-visible { min-height:0; padding:0; border:0; border-radius:0; background:none; overflow:visible; box-shadow:none; text-align:center; }
.mode-card::before { content:none; }
.mode-card .mode-card-art { display:block; width:100%; height:auto; aspect-ratio:1672 / 941; object-fit:contain; pointer-events:none; }
.mode-card:focus-visible { outline:3px solid #fff1c9; outline-offset:5px; border-radius:12px; }
.card-fallback { display:none; }
.mode-card.card-unavailable { min-height:100px; border:1px solid #ffe6ae; border-radius:16px; }
.mode-card.card-unavailable .mode-card-art { display:none; }
.mode-card.card-unavailable .card-fallback { display:block; margin:auto; padding:24px; color:#fff1c9; font:600 24px Georgia,serif; }

/* Final presentation changes only; gameplay hotspot geometry is inherited unchanged. */
.ending-active #farmHotspots, .ending-active #roomHotspots,
.ending-active .touch-extension, .ending-active #roomBack { pointer-events:none !important; }
.end-card { background:radial-gradient(ellipse,rgba(2,6,14,.12),transparent 75%); }
.end-card span { max-width:88%; text-align:center; font-size:clamp(28px,4.7vw,65px); font-style:normal; line-height:1.25; letter-spacing:0; transform:translateY(-15%); text-wrap:balance; }
#newNight { top:calc(50% + clamp(46px,8vh,80px)); min-height:52px; min-width:210px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 1.1s ease,visibility 1.1s; font-size:clamp(15px,1.6vw,20px); }
.end-card.show.menu-ready #newNight { opacity:1; visibility:visible; pointer-events:auto; }
.end-card:not(.show) { opacity:0; visibility:hidden; transition:none; }
.end-card:not(.show) #newNight { opacity:0; visibility:hidden; pointer-events:none; transition:none; }

/* v1.4.1: room coordinates only; farm/intro/cinematic cover presentation is unchanged. */
#roomScreen .room-master, #mediaVideo.room-mapped { object-fit:fill; }
.final-bedtime { z-index:12; pointer-events:auto; min-width:44px; min-height:44px; }
.ending-active[data-ending-stage="barnaby-waiting-for-bedtime"] #finalBedtime { pointer-events:auto !important; }
.final-bedtime .sleep-moon { opacity:1; padding:.12em .24em; border-radius:50%; background:#12212bcc; box-shadow:0 0 0 1px #ffe3a580,0 0 22px #ffda7755; filter:drop-shadow(0 0 10px #ffda77); }
.selection-content { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(12px,2vw,28px); align-items:stretch; }
.selection-content .animal-select-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.selection-content .animal-choice:hover, .selection-content .animal-choice:focus-visible { background-image:linear-gradient(180deg,transparent 10%,#02060eea 100%),var(--choice-art); }
.animal-preview { position:relative; min-width:0; overflow:hidden; border:1px solid #e8c87770; border-radius:20px; background:#17202a; box-shadow:0 0 28px #f4c86b22; }
.animal-preview img { position:absolute; width:100%; height:100%; inset:0; object-fit:cover; }
.animal-preview-caption { position:absolute; inset:auto 0 0; padding:32px 18px 16px; background:linear-gradient(transparent,#08121cf2); display:grid; gap:4px; color:#fff1cc; }
.animal-preview-caption strong { font:700 clamp(22px,2.6vw,40px)/1.1 Georgia,serif; }
.animal-preview-caption span { font-size:clamp(11px,1vw,15px); color:#e9d7ac; }
.preview-change img { animation:preview-reveal .2s ease-out; }
@keyframes preview-reveal { from { opacity:.65; } to { opacity:1; } }
@media (max-width:900px) {
  .selection-content { grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:10px; }
  .selection-content .animal-select-grid { gap:6px; }
  .selection-content .animal-choice { min-height:85px; }
  .selection-content .animal-choice strong { margin-left:5px; font-size:10px; }
  .selection-content .animal-choice span { margin-left:5px; font-size:7px; }
  .animal-preview-caption { padding:22px 10px 10px; }
}
@media (prefers-reduced-motion:reduce) { .preview-change img { animation:none; } }


/* v1.4.3: iPhone landscape menu fit */
@media (orientation:landscape) and (max-height:760px) {
  .mode-grid {
    width:min(92vw,1100px);
    margin-left:auto;
    margin-right:auto;
    padding-left:max(6px,env(safe-area-inset-left));
    padding-right:max(6px,env(safe-area-inset-right));
    box-sizing:border-box;
    gap:clamp(8px,1.2vw,18px);
    transform:translateY(-1.5vh);
  }

  .mode-card,
  .mode-card:hover,
  .mode-card:focus-visible {
    width:92%;
    justify-self:center;
  }
}

/* v1.4.4: real iPhone landscape menu fit */
@media (orientation: landscape) and (max-height: 760px) {
  .mode-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    width: min(82vw, 980px) !important;
    max-width: calc(
      100vw
      - env(safe-area-inset-left)
      - env(safe-area-inset-right)
      - 44px
    ) !important;

    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;

    gap: clamp(10px, 1.35vw, 18px) !important;
    transform: translateY(-1vh);
  }

  .mode-card,
  .mode-card:hover,
  .mode-card:focus-visible {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  .mode-card .mode-card-art {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: 31vh !important;
    object-fit: contain !important;
  }
}

/* BUILD 6 — definitive iPhone landscape opening stage */
@media (orientation:landscape) and (max-height:760px) {

  #startGate.start-gate {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    height:100% !important;
    min-height:0 !important;

    padding:
      max(6px,env(safe-area-inset-top))
      max(12px,env(safe-area-inset-right))
      max(6px,env(safe-area-inset-bottom))
      max(12px,env(safe-area-inset-left)) !important;

    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  #startChoice.opening-panel {
    position:relative !important;
    width:min(760px,100%) !important;
    max-width:760px !important;
    max-height:100% !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    margin:0 auto !important;
    padding:4px 8px 6px !important;
    box-sizing:border-box !important;
  }

  #startChoice .opening-eyebrow {
    margin:0 0 2px !important;
    font-size:8px !important;
    line-height:1 !important;
  }

  #startChoice h1 {
    margin:2px 0 !important;
    font-size:42px !important;
    line-height:.82 !important;
  }

  #startChoice h1 span {
    margin-bottom:.12em !important;
  }

  #startChoice .opening-copy {
    margin:3px 0 7px !important;
    font-size:11px !important;
    line-height:1.1 !important;
  }

  #startChoice .mode-grid {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    width:100% !important;
    gap:9px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }

  #startChoice .mode-card,
  #startChoice .mode-card:hover,
  #startChoice .mode-card:focus-visible,
  #startChoice .mode-card:active {
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
    margin:0 !important;

    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }

  #startChoice .mode-card .mode-card-art {
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:1672 / 941 !important;
    object-fit:contain !important;
  }

  #startChoice .license-note,
  #startChoice .start-message {
    margin:3px 0 0 !important;
    min-height:0 !important;
    font-size:9px !important;
    line-height:1.05 !important;
  }
}