/* R31: the world remains the canvas;
   controls use one white-sheet system. */
:root {
  color-scheme:light;
  --ink:#252724;
  --muted:#60645f;
  --paper:#fff;
  --frame:#f0f2ee;
  --line:#dce0d9;
  --red:#b52c27;
  --radius:6px;
  color:var(--ink);
  font-family:"Segoe UI",system-ui,sans-serif;
  font-size:14px}

[hidden] {
  display:none!important}
button,select,input {
  font:inherit}
button,select {
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px 14px;
  min-height:42px;
  line-height:1.35;
  transition:background-color .15s,transform .15s}
button {
  cursor:pointer;
  font-weight:600}
button:hover {
  background:var(--frame);
  border-color:#aeb5ab}
button:active {
  transform:translateY(1px)}
button:disabled {
  opacity:1;
  color:#757b73;
  background:#edf0eb;
  cursor:default}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible {
  outline:2px solid var(--red);
  outline-offset:3px}
select {
  width:100%;
  cursor:pointer}
option {
  background:#fff;
  color:var(--ink)}
label {
  display:block;
  color:var(--ink);
  font-size:14px;
  font-weight:600;
  margin:20px 0 8px}
input {
  accent-color:var(--red)}
a {
  color:inherit}
small,.note {
  font-size:12px;
  color:var(--muted);
  line-height:1.55}

header {
  top:24px;
  left:24px;
  right:auto;
  max-width:calc(100vw - 290px);
  pointer-events:none;
  text-shadow:none}
header>div {
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  column-gap:14px;
  padding:12px 18px;
  background:#fffffff0;
  border-radius:0 8px 8px 0;
  border-left:3px solid var(--red);
  max-width:100%;
  color:var(--ink)}
.place-mark {
  grid-column:1;
  grid-row:1/3;
  width:32px;
  height:36px;
  align-self:center;
  color:var(--red)}
header .eyebrow {
  grid-column:2;
  font-size:12px;
  letter-spacing:0;
  color:var(--muted);
  font-weight:500}
header h1 {
  grid-column:2;
  font-family:Georgia,serif;
  font-size:24px;
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.7px;
  margin:4px 0 0;
  max-width:390px;
  overflow-wrap:break-word}
.walking header {
  opacity:1}
header #summary,#panels,#position,#map-panel,header #overview {
  display:none!important}

#hud-actions {
  position:fixed;
  top:24px;
  right:24px;
  z-index:20;
  display:flex;
  align-items:center;
  gap:8px}
#hud-actions>button,#hud-actions .pace {
  min-height:44px;
  background:#fffffff0;
  border:0;
  box-shadow:0 4px 18px #0000001f}
#menu-open {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px}
.icon-button {
  width:44px;
  padding:0;
  display:grid;
  place-items:center}
#hud-actions svg {
  width:20px;
  height:20px;
  flex:none}
#sound-toggle[aria-pressed=true] {
  color:var(--red)}
.pace {
  display:flex;
  padding:4px;
  border-radius:var(--radius)}
.pace button {
  min-height:36px;
  padding:6px 12px;
  border:0;
  background:transparent;
  font-size:13px;
  color:var(--muted)}
.pace button[aria-pressed=true] {
  background:var(--ink);
  color:#fff}
kbd {
  font:inherit;
  font-size:11px;
  color:var(--muted);
  padding:2px 5px;
  background:var(--frame);
  border-radius:3px}

#navigation {
  position:fixed;
  right:24px;
  bottom:44px;
  width:248px;
  box-sizing:border-box;
  padding:12px;
  background:#fffffff0;
  border:0;
  border-radius:8px;
  color:var(--ink)}
#navigation strong {
  font-size:14px;
  font-weight:600;
  letter-spacing:0}
#navigation .row {
  gap:8px}
#nav-collapse {
  flex:0 0 32px;
  min-height:28px;
  padding:1px;
  border:0;
  background:transparent;
  font-size:20px}
#walk-map {
  width:100%;
  height:auto;
  display:block;
  border-radius:4px;
  margin:8px 0 12px}
#map-range {
  width:139px;
  padding:5px 7px;
  min-height:32px;
  font-size:12px}
#nav-location {
  font-size:12px;
  font-variant-numeric:tabular-nums}
#navigation .row strong {
  font-size:13px;
  color:var(--muted);
  font-weight:600}

/* 680px = 160px navigation + 520px sheet;
   8px inset belongs to the frame. */
#exploration-menu {
  width:min(680px,calc(100vw - 32px));
  max-height:calc(100dvh - 48px);
  padding:0;
  border:0;
  border-radius:12px;
  background:var(--frame);
  color:var(--ink);
  overflow:hidden;
  box-shadow:0 24px 80px #0003}
#exploration-menu[open] {
  display:grid;
  grid-template-columns:160px minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto}
#exploration-menu::backdrop {
  background:#151b204d}
.menu-heading {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px;
  gap:16px}
.menu-heading h2 {
  font-family:Georgia,serif;
  font-size:27px;
  font-weight:400;
  line-height:1.15;
  margin:0}
.menu-heading p {
  font-size:13px;
  color:var(--muted);
  margin:6px 0 0}
.menu-heading button {
  border:0;
  background:transparent;
  font-size:24px;
  min-width:42px;
  padding:0}
.menu-tabs {
  grid-column:1;
  grid-row:2;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:8px 12px 24px 20px}
.menu-tabs button {
  text-align:left;
  border:0;
  background:transparent;
  font-size:14px;
  padding:10px 8px;
  position:relative;
  font-weight:500}
.menu-tabs [aria-selected=true] {
  color:var(--ink);
  font-weight:700;
  background:#e4e8e1}
.menu-tabs [aria-selected=true]::after {
  content:"";
  position:absolute;
  left:8px;
  bottom:4px;
  width:24px;
  height:2px;
  background:var(--red)}
#exploration-menu [role=tabpanel] {
  grid-column:2;
  grid-row:2;
  padding:22px;
  margin:0 8px 0 0;
  background:var(--paper);
  border:1px solid #e7eae4;
  border-radius:8px;
  overflow-y:auto;
  min-height:300px;
  max-height:calc(100dvh - 220px)}
[role=tabpanel]>label:first-child {
  margin-top:0}
.movement-modes {
  display:flex;
  gap:6px;
  margin:18px 0}
.movement-modes button {
  flex:1;
  font-size:13px;
  padding:10px 6px}
.movement-modes [aria-pressed=true] {
  background:var(--ink);
  color:#fff;
  border-color:var(--ink)}
.menu-help {
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
  margin:22px 0 12px}
.menu-section {
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:28px 0 10px}
[role=tabpanel]>.menu-section:first-child {
  margin-top:0}
.menu-keys {
  list-style:none;
  padding:0;
  margin:14px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  font-size:12px;
  color:var(--muted)}
.place-group {
  display:flex;
  flex-wrap:wrap;
  gap:6px}
.place-group h3 {
  flex-basis:100%;
  font-size:13px;
  font-weight:600;
  margin:16px 0 2px}
.place-group button {
  min-height:34px;
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  background:var(--frame);
  border-color:transparent}
.place-group button:hover {
  background:#e3e7df;
  border-color:#cfd5cb}
.more-places {
  margin-top:16px}
.more-places .row {
  display:flex;
  gap:8px;
  margin-top:10px}
.menu-link {
  margin-top:18px;
  width:100%}
.switch,.check {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600}
.check {
  font-weight:400;
  font-size:13px;
  margin:10px 0}
.switch input {
  appearance:none;
  width:40px;
  height:22px;
  border-radius:11px;
  background:#c9cec6;
  position:relative;
  cursor:pointer;
  margin:0;
  transition:background-color .15s}
.switch input::after {
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  transition:transform .15s}
.switch input:checked {
  background:var(--red)}
.switch input:checked::after {
  transform:translateX(18px)}
#sound-settings.muted {
  opacity:.5}
#checkpoint-go,button.primary {
  background:var(--red);
  color:white;
  border-color:var(--red)}
#checkpoint-go:hover,button.primary:hover {
  background:#92221f}
#checkpoint-select {
  min-width:0}
#exploration-menu aside {
  display:block!important;
  position:static;
  width:auto;
  max-height:none;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  overflow:visible}
#exploration-menu aside .eyebrow,#exploration-menu aside #audio {
  display:none}
#exploration-menu aside .note,#exploration-menu aside details {
  color:var(--muted)}
#route-info {
  color:var(--ink);
  font-size:13px}
summary {
  cursor:pointer}
details {
  border-color:var(--line);
  font-size:13px}
#profile {
  width:100%;
  height:auto}
#pane-2 details {
  border:0;
  margin:12px 0 0;
  padding:0}
#pane-2 input[type=range] {
  width:100%;
  margin:0;
  box-sizing:border-box}
.menu-credit {
  grid-column:1/-1;
  margin:0;
  padding:16px 24px;
  text-align:right;
  font-size:12px;
  color:var(--muted)}
.menu-credit a {
  text-decoration:none;
  color:var(--ink);
  font-weight:600}
.menu-credit a:hover {
  text-decoration:underline}

#interaction {
  position:fixed;
  left:24px;
  top:132px;
  width:min(350px,calc(100vw - 48px));
  max-height:calc(100dvh - 190px);
  overflow:auto;
  padding:24px;
  background:#fff;
  border:0;
  border-radius:8px;
  color:var(--ink);
  line-height:1.65;
  box-shadow:0 12px 36px #0002}
#interaction-hint,#interaction-feedback {
  position:fixed;left:50%;transform:translateX(-50%);z-index:12;
  max-width:calc(100vw - 40px);width:max-content;pointer-events:none;
  color:#fffdf4;background:#17201bd9;border:1px solid #ffffff28;
  border-radius:24px;font-size:12px;line-height:1.5;text-align:center;
  text-shadow:0 1px 3px #0005;backdrop-filter:blur(8px)
}
#interaction-hint {bottom:104px;padding:7px 13px;display:flex;align-items:center;gap:9px}
#interaction-hint kbd {display:grid;place-items:center;width:22px;height:22px;border:1px solid #ffffff70;border-radius:5px;font-family:inherit;font-size:12px}
#interaction-feedback {bottom:151px;padding:9px 15px}
#interaction-hint[hidden],#interaction-feedback[hidden],.photo-mode #interaction-hint,.photo-mode #interaction-feedback {display:none}
#interaction strong {
  display:block;
  font-family:Georgia,serif;
  font-size:23px;
  font-weight:400;
  line-height:1.2}
#interaction p {
  margin:14px 0}
#interaction small {
  display:block;
  margin-bottom:18px}
#interaction button {
  margin:4px 6px 0 0}
#interaction button:not(:last-child) {
  background:var(--ink);
  color:#fff;
  border-color:var(--ink)}
#crosshair {
  position:fixed;
  left:50%;
  top:50%;
  font-size:18px;
  color:#fff;
  pointer-events:none;
  text-shadow:0 1px 4px #000}

footer {
  width:auto;
  max-width:calc(100vw - 300px);
  padding:6px 10px;
  bottom:10px;
  left:14px;
  border-radius:3px;
  background:#202520c9;
  color:#fff;
  font-size:11px;
  line-height:1.4;
  pointer-events:none}
footer a {
  pointer-events:auto;
  color:inherit}
#loading {
  color:white}

#photo-panel {
  position:fixed;
  right:24px;
  top:24px;
  width:304px;
  box-sizing:border-box;
  max-height:calc(100dvh - 48px);
  overflow:auto;
  z-index:40;
  padding:24px;
  background:var(--paper);
  border:0;
  border-radius:8px;
  color:var(--ink);
  box-shadow:0 16px 50px #0003}
#photo-panel h2 {
  font-family:Georgia,serif;
  font-size:26px;
  font-weight:400;
  margin:0}
#photo-panel .menu-heading {
  padding:0;
  margin-bottom:18px;
  align-items:center}
#photo-panel #photo-close {
  display:grid;
  place-items:center;
  flex:0 0 36px;
  min-width:36px;
  min-height:36px;
  width:36px;
  height:36px;
  padding:0;
  margin:0;
  line-height:1}
#photo-panel label {
  font-size:13px;
  margin:16px 0 6px}
#photo-panel input[type=range] {
  width:100%;
  margin:0}
#photo-panel output {
  float:right;
  color:var(--muted);
  font-variant-numeric:tabular-nums}
#photo-panel .row {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:16px;
  gap:8px}
#photo-panel .row button {
  width:100%;
  min-height:44px;
  margin:0}
.photo-help,#photo-status {
  font-size:12px;
  line-height:1.5;
  color:var(--muted)}
#photo-panel .photo-grid-label {
  display:flex;
  align-items:center;
  gap:8px}
#photo-grid-toggle {
  width:auto}
.photo-mode header,.photo-mode #navigation,.photo-mode footer,.photo-mode #crosshair,.photo-mode #interaction,.photo-mode #hud-actions {
  display:none!important}
#photo-grid {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:30}

#photo-grid::before {
  content:"";
  position:absolute;
  inset:0 33.333%;
  border-left:1px solid #ffffff65;
  border-right:1px solid #ffffff65}

#photo-grid::after {
  content:"";
  position:absolute;
  inset:33.333% 0;
  border-top:1px solid #ffffff65;
  border-bottom:1px solid #ffffff65}


@media(max-width:700px) {
  header {
  left:16px;
  top:72px;
  max-width:calc(100vw - 32px)}
header>div {
  padding:12px;
  column-gap:10px;
  grid-template-columns:24px minmax(0,1fr)}
.place-mark {
  width:24px;
  height:30px}
header h1 {
  font-size:24px;
  max-width:100%;
  letter-spacing:-.5px}
header .eyebrow {
  font-size:11px}
#hud-actions {
  top:16px;
  right:16px;
  gap:6px}
#menu-open {
  padding:10px}
#menu-open span,#menu-open kbd {
  display:none}
.pace button {
  padding:6px 9px}
#navigation {
  right:16px;
  bottom:70px;
  width:208px;
  padding:10px}
#map-range {
  width:125px;
  font-size:11px}
#exploration-menu[open] {
  display:flex;
  flex-direction:column}
.menu-heading {
  padding:20px 18px 16px}
.menu-heading h2 {
  font-size:25px}
.menu-tabs {
  flex-direction:row;
  padding:0 12px 12px;
  gap:0;
  flex-shrink:0}
.menu-tabs button {
  flex:1;
  font-size:12px;
  text-align:center;
  padding:10px 4px}
.menu-tabs [aria-selected=true]::after {
  left:calc(50% - 12px)}
#exploration-menu [role=tabpanel] {
  margin:0 8px;
  padding:18px;
  min-height:0;
  max-height:calc(100dvh - 220px)}
.menu-credit {
  padding:14px 18px;
  font-size:11px}
.movement-modes button {
  font-size:12px}
footer {
  left:8px;
  bottom:8px;
  max-width:calc(100vw - 16px);
  font-size:11px;
  padding:6px 8px}
#interaction {
  top:130px;
  left:16px;
  width:calc(100vw - 32px);
  max-height:calc(100dvh - 150px)}
#photo-panel {
  right:12px;
  top:12px;
  width:280px;
  max-height:calc(100dvh - 24px);
  padding:20px}
}

@media(prefers-reduced-motion:reduce) {
  button,select {
  transition:none}
button:active {
  transform:none}
}

#train-arrival {position:fixed;left:50%;bottom:56px;transform:translateX(-50%);z-index:15}
#arrival-skip {min-width:120px;border:0;border-radius:999px;background:#fffffff0;box-shadow:0 8px 28px #14291a33}
.visually-hidden {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#train-arrival[hidden],.photo-mode #train-arrival {display:none}

.arrival-settings label {display:flex;align-items:center;gap:8px;font-size:12px;margin-top:12px}
.arrival-settings input {width:auto;margin:0}
.arrival-settings {margin-top:24px;padding-top:20px;border-top:1px solid #bcc7b6}
.arrival-settings h3 {font-size:18px;margin:0 0 6px}
.arrival-settings p {font-size:13px;margin:0 0 12px}
.train-arriving #crosshair {display:none}
@media(max-width:700px){
  #train-arrival{bottom:76px}
  .train-arriving #navigation{display:none}
}

/* Welcome: a small shrine mark and a quiet trail, fully inside its bounds. */
.welcome-open header,.welcome-open #hud-actions,.welcome-open #navigation,.welcome-open footer,
.welcome-open #train-arrival,.welcome-open #crosshair,.welcome-open #interaction {visibility:hidden}
#welcome {
  position:fixed;inset:0;z-index:100;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;
  box-sizing:border-box;overflow:auto;text-align:center;
  padding:clamp(24px,6vw,80px);
  background:#f5f5f1;
  color:var(--ink);transition:opacity .7s ease,visibility .7s}
#welcome.leaving {opacity:0;visibility:hidden;pointer-events:none}
.welcome-gates {
  flex:none;width:200px;height:150px;
  overflow:visible}
.welcome-gates svg {width:100%;height:100%;display:block;overflow:visible}
.gate {fill:var(--red);transform-origin:120px 77px;animation:gate-breathe 4s ease-in-out infinite}
.torii-crown {fill:#39342e}
.welcome-trail {stroke:#c8c8bc;stroke-width:1.5;stroke-linecap:round}
.welcome-wayfarer {fill:var(--red);animation:trail-breathe 4s ease-in-out infinite}
@keyframes gate-breathe {0%,100% {opacity:.75;transform:translateY(0)} 50% {opacity:1;transform:translateY(-2px)}}
@keyframes trail-breathe {0%,100% {opacity:.3} 50% {opacity:1}}
#welcome.ready .gate,#welcome.ready .welcome-wayfarer {animation:none;opacity:1}
.welcome-copy {max-width:440px;display:flex;flex-direction:column;align-items:center;flex:none}
.welcome-kanji {font-size:16px;letter-spacing:.16em;color:var(--red);margin:0}
#welcome h2 {font-family:Georgia,serif;font-weight:400;font-size:clamp(42px,6vw,64px);line-height:1;letter-spacing:-.02em;margin:10px 0 18px}
.welcome-lede {font-size:17px;line-height:1.55;color:#4a4d48;margin:0 0 24px}
#loading {position:static;display:block;background:none;color:var(--muted);font-size:14px;line-height:1.5;min-height:21px;padding:0;margin:0 0 12px;text-align:left}
.welcome-bar {height:3px;width:220px;background:#dedfd8;overflow:hidden}
.welcome-bar span {display:block;height:100%;width:32%;background:var(--red);animation:welcome-load 2.4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes welcome-load {0% {transform:translateX(-110%)} 100% {transform:translateX(330%)}}
#welcome.ready .welcome-bar,#welcome.ready #loading {display:none}
#welcome-enter {width:auto;font-size:17px;padding:14px 34px;min-height:52px;border-radius:999px}
#welcome-enter span {font-weight:400;margin-left:6px;opacity:.85}
.welcome-sound {display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:22px 0 0}
.welcome-sound svg {width:18px;height:18px}
.welcome-keys {justify-content:center;list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted)}
.welcome-credit {position:absolute;right:24px;bottom:16px;margin:0;font-size:12px;color:var(--muted)}
.welcome-credit a {color:var(--ink);font-weight:600;text-decoration:none}
@media(max-width:760px){
  #welcome {gap:12px;padding:24px;justify-content:safe center}
  .welcome-gates {width:160px;height:120px}
  .welcome-copy {display:flex;flex-direction:column;align-items:center}
  #loading {text-align:center}
  .welcome-keys,.welcome-sound {justify-content:center}
  .welcome-credit {position:static}
}
@media(prefers-reduced-motion:reduce){
  .gate,.welcome-wayfarer {animation:none;transform:none;opacity:1}
  .welcome-bar span {animation:none;width:32%;transform:translateX(106%)}
  #welcome {transition:none}
}

@media(max-height:680px){
  #welcome {gap:8px;padding:20px;justify-content:safe center}
  .welcome-gates {width:128px;height:96px}
  #welcome h2 {margin:8px 0 12px}
  .welcome-lede {font-size:15px;margin-bottom:16px}
  .welcome-credit {position:static;margin-top:12px}
}
/* Diagnostic stays quiet and does not intercept walking controls. */
#render-stats {position:fixed;left:16px;bottom:36px;z-index:30;padding:7px 10px;border-radius:5px;background:rgba(24,30,27,.84);color:#edf1e9;font:12px/1.4 ui-monospace,monospace;font-variant-numeric:tabular-nums;pointer-events:none;max-width:calc(100vw - 32px)}
#render-stats[data-health="stall"] {color:#ffc596}
#render-stats[data-health="slow"] {color:#ffe6a0}
.welcome-open #render-stats {visibility:hidden}