/* Palmetto is loaded from font.css, generated from the supplied OTF. */
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
body, button { font-family: 'Palmetto', serif; font-weight: 400; }
button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 12px; }
button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
[hidden] { display: none !important; }
#game { position: relative; width: 100%; height: 100dvh; overflow: hidden; color: #fff; }
#world { display: block; width: 100%; height: 100%; }
section { position: absolute; pointer-events: none; }
h1, p { font-weight: 400; margin: 0; }
#loading { inset: 0; background: #000; display: grid; place-items: center; }
.load-track { width: 100%; height: 1px; background: #393939; position: relative; }
#load-fill { height: 1px; width: 0; background: #bdbdbd; }
#walkers { position: absolute; width: 120px; height: 65px; bottom: 0; left: 0; transform: translateX(-110px); }
#title, #ending { inset: 0; display: flex; align-items: center; justify-content: center; background: #000; }
#title h1, #ending h1 { font-size: clamp(29px, 3.5vw, 56px); letter-spacing: .025em; }
#title h1 { animation: fade-in 1.2s both; }
#story { top: 33%; left: 5%; width: 90%; text-align: center; color: #151515; }
#story h1 { font-size: clamp(24px, 2.5vw, 36px); animation: fade-in 1.6s both; }
#story p { margin-top: 16px; font-size: clamp(23px, 2.5vw, 36px); animation: fade-in 1.8s 1.4s both; }
#tutorial { left: 31%; top: 32%; width: 49%; text-shadow: 0 1px 8px #3334; }
#tutorial h1 { font-size: clamp(25px, 3.25vw, 48px); line-height: 1.16; white-space: nowrap; }
#tutorial p { margin-top: 30px; font-size: clamp(16px, 1.75vw, 25px); line-height: 1.65; }
#mission { left: 6%; top: 36%; width: 88%; text-align: center; }
#mission h1 { font-size: clamp(25px, 3.3vw, 47px); }
#tutorial, #mission { animation: fade-in 1.3s both; }
#next { position: absolute; right: 4%; bottom: 4%; font-family: serif; font-size: 30px; opacity: .65; transition: opacity .3s; }
#next:hover, #camera:hover { opacity: 1; }
#game[data-scene="story"] #next, #game[data-scene="story"] #camera { color: #303030; }
#count { position: absolute; top: 5%; right: 5%; font-size: 24px; opacity: .8; text-shadow: 0 1px 8px #111; }
#camera { position: absolute; right: 4%; bottom: 4%; width: 46px; height: 46px; opacity: .65; }
#game[data-scene="story"] #camera, #game[data-scene="tutorial"] #camera, #game[data-scene="mission"] #camera { right: 9%; }
#camera svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.2; }
#camera[aria-busy="true"] { animation: pulse 1s infinite alternate; }
#camera[data-error="true"] { color: #ad6868; }
#camera-panel { position: absolute; bottom: 12%; right: 4%; width: 160px; border: 1px solid #ffffff40; background: #111b; }
video { width: 100%; display: block; transform: scaleX(-1); opacity: .7; }
.center-zone { position: absolute; inset: 0 38%; border-inline: 1px dashed #fff6; pointer-events: none; }
#close-camera { position: absolute; top: 0; right: 0; padding: 0 6px; font: 22px serif; }
#hand-indicator { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font: 18px serif; }
#ending { animation: fade-in 2s both; flex-direction: column; gap: 30px; }
#restart { pointer-events: auto; font: 28px serif; opacity: .6; }
#touch { display: none; position: absolute; bottom: 3%; left: 4%; right: 15%; gap: 16px; pointer-events: none; }
#touch button { pointer-events: auto; touch-action: none; font: 27px serif; width: 44px; height: 44px; opacity: .65; }
#touch button:last-child { margin-left: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { to { opacity: .25; } }
@media (pointer: coarse) { #touch:not([hidden]) { display: flex; } }
@media (max-aspect-ratio: 1/1) {
  #tutorial { left: 9%; width: 82%; top: 28%; }
  #tutorial h1 { font-size: 28px; white-space: normal; }
  #tutorial p { font-size: 19px; margin-top: 20px; }
  #tutorial br { display: none; }
  #story { top: 34%; }
  #story p { max-width: 90%; margin-inline: auto; }
  #game[data-scene="story"] #camera, #game[data-scene="tutorial"] #camera, #game[data-scene="mission"] #camera { right: 17%; }
}
@media (prefers-reduced-motion: reduce) { section, #story h1, #story p { animation-duration: .1s !important; animation-delay: 0s !important; } }