/* Before entry is known, and on returning visits, show only real loading. */
body[data-garden-entry="preparing"] #welcome .welcome-copy > :not(#loading-state),
body[data-garden-entry="resume"] #welcome .welcome-copy > :not(#loading-state),
body[data-garden-entry="preparing"] #welcome-wave,
body[data-garden-entry="resume"] #welcome-wave { display: none; }
body[data-garden-entry="preparing"] #welcome .welcome-world::after,
body[data-garden-entry="resume"] #welcome .welcome-world::after { background: none; }
body[data-garden-entry="preparing"] #welcome .loading-clouds,
body[data-garden-entry="resume"] #welcome .loading-clouds { margin-inline: auto; }
body[data-garden-entry="preparing"] #welcome .welcome-stage,
body[data-garden-entry="resume"] #welcome .welcome-stage { grid-template-columns: minmax(0,1fr); }
body[data-garden-entry="preparing"] #welcome.woody-welcome .welcome-copy,
body[data-garden-entry="resume"] #welcome.woody-welcome .welcome-copy { justify-self: center; text-align: center; }

/* A quiet reading zone beside an actual, transparent 3D garden entrance. */
body.hybrid-intro { background: #dcebf1; }
body.hybrid-intro #welcome.woody-welcome:not(.diegetic-surface) {
  --welcome-ink: #26384b;
  --welcome-paper: #fff9ec;
  --welcome-clay: #b94f38;
  --play-control-paper: #26384b;
  --play-control-paper-hover: #344f65;
  --play-control-ink: #fff9ec;
  --play-control-edge: #627e91;
  --play-control-depth: #172a3c;
  --play-control-forest: #b94f38;
  --play-control-forest-hover: #a3412d;
  --play-control-forest-depth: #7c3529;
  --play-control-on-forest: #fff9ec;
  --play-control-focus: #26384b;
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 24px clamp(28px,4vw,76px);
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 24px;
  border: 0;
  border-radius: 0;
  background: radial-gradient(ellipse at 14% 50%,#f8faf6 0%,#edf4f3 28%,transparent 64%),linear-gradient(155deg,#c7deef 0%,#d9eaf1 53%,#e5ebd8 100%);
  color: var(--welcome-ink);
  box-shadow: none;
  transform: none;
  pointer-events: auto;
  isolation: isolate;
  font-family: var(--font-body,'DM Sans',sans-serif);
}
#welcome .welcome-masthead {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 48px;
  max-width: 1560px;
  margin: 0 auto;
}
#welcome .welcome-stage {
  display: grid;
  grid-template-columns: minmax(0,.83fr) minmax(0,1.17fr);
  align-items: center;
  min-height: max(550px,calc(100dvh - 120px));
  max-width: 1560px;
  margin: 0 auto;
  gap: 0 clamp(12px,2.5vw,44px);
}
#welcome.woody-welcome .welcome-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 510px;
  padding: 24px 0 40px;
  margin: 0;
}
body.hybrid-intro #welcome #welcome-title {
  margin: 0 0 28px;
  max-width: none;
  font-family: var(--font-heading,'Mochiy Pop P One',sans-serif);
  font-weight: 400;
  font-size: clamp(44px,4.5vw,72px);
  line-height: 1.24;
  letter-spacing: -.025em;
  color: var(--welcome-ink);
  text-wrap: initial;
}
#welcome-title > span,#welcome-title > strong { display: block; font: inherit; }
#welcome-title > strong { font-size: 1.16em; color: #a94b38; margin-top: 4px; }
#welcome.woody-welcome .welcome-deck-title {
  margin: 0 0 14px;
  font: 600 clamp(18px,1.35vw,22px)/1.45 var(--font-body,'DM Sans',sans-serif);
  letter-spacing: -.015em;
  color: var(--welcome-ink);
}
#welcome.woody-welcome .welcome-deck {
  max-width: 36ch;
  margin: 0;
  font-size: clamp(16px,1.1vw,18px);
  line-height: 1.7;
  color: #43586b;
  text-wrap: pretty;
}
#welcome.woody-welcome #welcome-dialogue {
  min-height: 0;
  margin: 24px 0 12px;
  color: #43586b;
  font-size: 14px;
  font-weight: 500;
}
#welcome.woody-welcome .welcome-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px; }
body.hybrid-intro #welcome.woody-welcome #start,
body.hybrid-intro #welcome.woody-welcome #read-direct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  margin: 0;
  padding: 13px 24px;
  border-radius: 12px;
  font: 600 16px/1.35 var(--font-body,'DM Sans',sans-serif);
  text-decoration: none;
  transition: transform 160ms ease,background-color 160ms ease,box-shadow 160ms ease;
}
body.hybrid-intro #welcome.woody-welcome #start {
  min-width: 162px;
  border: 1px solid #973e2d;
  background: #b94f38;
  color: #fff9ec;
  box-shadow: 0 4px 0 #803828,0 7px 20px #a04e3524;
}
body.hybrid-intro #welcome.woody-welcome #start:hover:not(:disabled) { background:#a3412d; transform:translateY(-2px); box-shadow:0 6px 0 #803828,0 9px 22px #a04e3524; }
body.hybrid-intro #welcome.woody-welcome #start:active:not(:disabled) { transform:translateY(3px); box-shadow:0 1px 0 #803828; }
body.hybrid-intro #welcome.woody-welcome #start:disabled { opacity:.55; }
body.hybrid-intro #welcome.woody-welcome #read-direct { padding-inline:6px; border:0; background:transparent; color:#26384b; box-shadow:none; }
body.hybrid-intro #welcome.woody-welcome #read-direct:hover { text-decoration:underline; text-underline-offset:5px; }
#welcome .welcome-world { position:fixed; inset:0; z-index:0; pointer-events:none; }
#welcome .welcome-world::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,#eff5f3 0%,#eff5f3f5 46%,#edf4f380 50%,transparent 56%); }
#welcome.woody-welcome #welcome-portrait { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#welcome-portrait > canvas { position:fixed; inset:0; pointer-events:none; display:block; }
#welcome #welcome-wave {
  position:absolute;
  left:72%;
  bottom:max(24px,8vh);
  transform:translateX(-50%);
  z-index:2;
  min-height:44px;
  padding:10px 18px;
  border:1px solid #8098a7;
  border-radius:24px;
  background:#fff9eceb;
  color:#26384b;
  box-shadow:0 3px 0 #a6bac6,0 5px 16px #43586b14;
  font:500 14px/1.3 var(--font-body,'DM Sans',sans-serif);
  cursor:pointer;
  pointer-events:auto;
}
#welcome #welcome-wave:hover:not(:disabled) { background:#fffdf5; border-color:#a94b38; }
#welcome #welcome-wave:disabled { opacity:.65; cursor:default; }
#welcome.woody-welcome .plain-reading { display:none; }
#welcome.woody-welcome .welcome-audio:not([hidden]) { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; font-size:13px; }
#welcome.woody-welcome #welcome-caption { width:100%; margin:0; }
#welcome.woody-welcome #loading-state[data-ready=true] { display:none; }
#welcome.woody-welcome #loading-state { border:0; background:transparent; padding:0; margin:16px 0; }
body.hybrid-intro #welcome :is(button,a):focus-visible { outline:3px solid #26384b; outline-offset:5px; }
@media (max-width:1100px) {
  #welcome .welcome-stage { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:8px; }
  body.hybrid-intro #welcome #welcome-title { font-size:clamp(38px,4.8vw,55px); }
  #welcome.woody-welcome .welcome-copy { padding-bottom:24px; }
  #welcome.woody-welcome .welcome-actions { gap:10px 15px; }
  body.hybrid-intro #welcome.woody-welcome #start { min-width:142px; padding-inline:18px; }
  body.hybrid-intro #welcome.woody-welcome #read-direct { font-size:14px; }
}
@media (max-height:650px) {
  #welcome .welcome-stage { min-height:490px; }
  body.hybrid-intro #welcome #welcome-title { font-size:44px; margin-bottom:18px; }
  #welcome.woody-welcome .welcome-copy { padding-block:12px; }
  #welcome.woody-welcome #welcome-dialogue { margin-top:18px; }
}
@media (prefers-reduced-motion:reduce) {
  #welcome.woody-welcome,.woody-guide { scroll-behavior:auto; }
  #welcome.woody-welcome :is(button,a) { transition:none; }
}
@media (forced-colors:active) {
  body.hybrid-intro #welcome.woody-welcome:not(.diegetic-surface) { background:Canvas; color:CanvasText; }
  #welcome.woody-welcome :is(#start,#read-direct,#welcome-wave) { border:2px solid ButtonText; }
}

/* Keep the guide readable while the rider is still in control of the world. */
.woody-guide {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 6;
  width: min(560px, calc(100vw - 40px));
  max-height: calc(100dvh - 104px);
  padding: 20px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  transform: translateX(-50%);
  box-shadow: 0 4px 24px #193d3e10;
}

.woody-guide > p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.woody-guide > .eyebrow {
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.5;
}

.woody-guide .guide-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 12px;
}

.woody-guide button {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.woody-guide button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}