:root {
  --bg: #07090c; --fg: #ece6da; --muted: #a29c90; --accent: #e07a2e; --cold: #a9c1dc; --blood: #a3241c;
  --ui: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --display: "Cormorant Garamond", Georgia, serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); overflow: hidden; overscroll-behavior: none; }
body { font-family: var(--ui); -webkit-user-select: none; user-select: none; touch-action: none; }
#app { position: fixed; inset: 0; overflow: hidden; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

#grain { position: absolute; inset: -50%; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay; background-size: 256px 256px; animation: grain 0.5s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0,0) } 25% { transform: translate(-3%,2%) } 50% { transform: translate(2%,-3%) } 75% { transform: translate(-1%,3%) } }
#frost { position: absolute; inset: 0; pointer-events: none; opacity: 0; background-size: 100% 100%; -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 45%, #000 95%); mask-image: radial-gradient(ellipse at 50% 50%, transparent 45%, #000 95%); mix-blend-mode: screen; }
#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.55) 100%); }
#fear { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 35%, rgba(30,0,0,0.85) 100%); transition: opacity 0.4s; }
#flash { position: absolute; inset: 0; pointer-events: none; background: #fff; opacity: 0; }

.hud { position: absolute; left: 0; right: 0; top: 0; padding: calc(10px + var(--safe-t)) 16px 40px; pointer-events: none; z-index: 20;
  background: linear-gradient(to bottom, rgba(7,9,12,0.62), rgba(7,9,12,0)); text-shadow: 0 2px 10px rgba(0,0,0,0.85); }
.hud .row.top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding-left: 48px; }
.home-pin {
  position: absolute; z-index: 65; left: calc(10px + env(safe-area-inset-left, 0px)); top: calc(8px + var(--safe-t));
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  color: var(--fg); background: rgba(7, 9, 12, .78); border: 1px solid rgba(236, 230, 218, .55);
  text-decoration: none; pointer-events: auto; touch-action: manipulation;
}
.home-pin svg { display: block; }
.leave { position: absolute; inset: 0; z-index: 75; display: grid; place-items: center; padding: 20px; background: rgba(4, 5, 8, 0.78); }
.leave-card { width: min(22rem, 100%); text-align: center; padding: 28px 18px 18px; background: #07090c; border: 1px solid rgba(236, 230, 218, 0.28); }
.leave-card p { margin: 0 0 18px; font: 500 32px/1.15 var(--display); }
.leave-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.leave-actions .btn { min-height: 72px; font-size: 26px; }
.hud .day, .hud .clock { font-size: 20px; letter-spacing: 0.14em; color: var(--muted); white-space: nowrap; min-width: 72px; }
.hud .clock { text-align: right; color: var(--fg); font-variant-numeric: tabular-nums; }
.hud .clock.night { color: var(--cold); }
#compass { flex: 1; height: 38px; max-width: 420px; min-width: 0; }
.objective { margin-top: 6px; font-size: 22px; font-weight: 650; letter-spacing: 0.06em; color: var(--accent); text-transform: uppercase; line-height: 1.15; max-width: 36rem; }
.objective small { display: inline-block; margin-left: 6px; color: var(--fg); font-weight: 400; letter-spacing: 0.12em; }
.nerve { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 16px; letter-spacing: 0.18em; color: var(--muted); }
.nerve i { display: block; width: 110px; height: 3px; background: rgba(255,255,255,0.15); }
.nerve b { display: block; height: 100%; width: 80%; background: var(--fg); transition: width 0.5s, background 0.5s; }
.nerve b.low { background: var(--blood); animation: pulse 0.9s infinite; }
@keyframes pulse { 50% { opacity: 0.35 } }
.warn { margin-top: 8px; font-size: 20px; letter-spacing: 0.14em; color: var(--cold); text-transform: uppercase; min-height: 0; }
.warn.hot { color: #ff6a4a; animation: pulse 1.2s infinite; }
.line { margin: 10px 0 0; display: inline-block; font-family: var(--display); font-weight: 600; font-size: clamp(26px, 4.8vw, 38px); line-height: 1.2; max-width: min(94vw, 40rem); color: #fff; background: rgba(0, 0, 0, 0.78); padding: 10px 14px; border-radius: 4px; text-shadow: 0 2px 0 #000; opacity: 0; transition: opacity 0.35s; }
.line.show { opacity: 1; }
.thought { position: absolute; left: 50%; bottom: calc(148px + var(--safe-b)); transform: translateX(-50%); z-index: 24; margin: 0; max-width: min(94vw, 40rem); text-align: center; font-family: var(--display); font-style: italic; font-weight: 650; font-size: clamp(32px, 6vw, 48px); line-height: 1.15; color: #fff; background: rgba(0, 0, 0, 0.84); padding: 14px 18px; border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 6px; text-shadow: 0 2px 0 #000, 0 0 16px #000; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.thought.show { opacity: 1; }
#reticle { position: absolute; left: 50%; top: 46%; width: 22px; height: 22px; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; z-index: 18; }
#reticle i { position: absolute; background: rgba(236,230,218,0.8); }
#reticle i:nth-child(1) { left: 0; top: 9px; width: 6px; height: 2px; }
#reticle i:nth-child(2) { right: 0; top: 9px; width: 6px; height: 2px; }
#reticle i:nth-child(3) { left: 10px; top: 0; width: 2px; height: 6px; }
#reticle i:nth-child(4) { left: 10px; bottom: 0; width: 2px; height: 6px; }
#spotbar { position: absolute; left: 50%; bottom: calc(96px + var(--safe-b)); width: 132px; height: 3px; transform: translateX(-50%); background: rgba(255,255,255,0.16); opacity: 0; z-index: 22; pointer-events: none; }
#spotbar b { display: block; height: 100%; width: 100%; background: #e7d7c4; }
body.eyeline #reticle { opacity: 0.9; }
body.eyeline #vignette { background: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.78) 100%); }
body.spotting #reticle, body.spotting #spotbar { opacity: 1; }
body.spotting #vignette { background: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 22%, rgba(0,0,0,0.88) 100%); }
body.spotting #stick, body.spotting #touchhint, body.spotting #ctxBtns { opacity: 0; pointer-events: none; }

#labels { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.plabel { position: absolute; transform: translate(-50%, -100%); font-size: 13px; letter-spacing: 0.3em; color: rgba(236,230,218,0.85); text-shadow: 0 1px 8px #000; white-space: nowrap; }
.plabel small { display: block; text-align: center; font-size: 11px; letter-spacing: 0.15em; color: var(--muted); }
.waypoint { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; transform: translate(-50%, -50%); display: none; text-align: center; }
.waypoint i { display: block; width: 14px; height: 14px; margin: 0 auto; border: 2px solid var(--accent); transform: rotate(45deg); box-shadow: 0 0 10px rgba(224,122,46,0.6); }
.waypoint span { display: block; margin-top: 6px; font-size: 13px; letter-spacing: 0.15em; color: var(--accent); text-shadow: 0 1px 6px #000; white-space: nowrap; }

.stick { position: absolute; left: calc(26px); bottom: calc(26px + var(--safe-b)); width: 128px; height: 128px; border-radius: 50%; border: 1.5px solid rgba(236,230,218,0.28); background: rgba(10,12,16,0.18); z-index: 15; pointer-events: none; }
.stick.active { border-color: rgba(236,230,218,0.5); }
.knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(236,230,218,0.35); }
@media (pointer: fine) { .stick { display: none; } }
body:not(.touch) .stick, body:not(.touch) .touchhint { display: none !important; }

.actions { position: absolute; right: 10px; bottom: calc(12px + var(--safe-b)); left: 170px; z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
@media (pointer: fine) { .actions { left: 40%; } }
.btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.btn { min-height: 58px; min-width: 76px; padding: 0 16px; border: 1px solid rgba(236,230,218,0.45); background: rgba(14,15,18,0.82); color: #fff; font: 650 20px var(--ui); letter-spacing: 0.12em; border-radius: 4px; cursor: pointer; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.btn:active { background: rgba(60,60,60,0.8); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); min-width: 46px; }
.btn.hot { border-color: var(--accent); color: #fff; background: rgba(150,60,20,0.75); }
.btn.ctx { border-color: rgba(224,122,46,0.75); }
.btn kbd { font: 400 11px var(--ui); color: var(--muted); margin-left: 6px; }
.status { font-size: 18px; letter-spacing: 0.12em; color: var(--muted); text-shadow: 0 1px 6px #000; font-variant-numeric: tabular-nums; }
.keyhint { position: absolute; left: 16px; bottom: 14px; z-index: 18; font-size: 13px; letter-spacing: 0.14em; color: var(--muted); text-shadow: 0 1px 6px #000; pointer-events: none; display: none; line-height: 1.5; }
@media (pointer: fine) { .keyhint { display: block; } }

.toast { position: absolute; left: 0; right: 0; top: 34%; z-index: 30; text-align: center; pointer-events: none; padding: 26px 30px; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(4,6,10,0.66) 0%, rgba(4,6,10,0.35) 45%, rgba(4,6,10,0) 72%); }
.toast.show { animation: toast 4.2s ease-out forwards; }
.toast b { display: block; font: 600 14px var(--ui); letter-spacing: 0.45em; color: var(--accent); }
.toast p { margin: 10px auto 0; max-width: 24rem; font: italic 500 22px/1.25 var(--display); color: var(--fg); text-shadow: 0 2px 16px #000; }
@keyframes toast { 0% { opacity: 0; transform: translateY(8px) } 10% { opacity: 1; transform: none } 80% { opacity: 1 } 100% { opacity: 0 } }

.optic { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
.optic .mask { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, rgba(0,0,0,0) 0, rgba(0,0,0,0) 37vmin, rgba(0,0,0,0.97) 38.5vmin); }
.optic.binos .mask { background: #000;
  -webkit-mask-image: radial-gradient(circle at calc(50% - 17vmin) 46%, transparent 0, transparent 31vmin, #000 33vmin), radial-gradient(circle at calc(50% + 17vmin) 46%, transparent 0, transparent 31vmin, #000 33vmin);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.optic.binos::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60vmin 40vmin at 50% 46%, transparent 60%, rgba(0,0,0,0.35)); pointer-events: none; }
.optic .reticle { position: absolute; left: 50%; top: 46%; width: 76vmin; height: 76vmin; transform: translate(-50%, -50%); }
.optic.scope .reticle { background: linear-gradient(#000, #000) center/100% 1.5px no-repeat, linear-gradient(#000, #000) center/1.5px 100% no-repeat; }
.optic.scope .reticle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; border: 1.5px solid rgba(200,30,20,0.9); }
.optic.binos .reticle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border: 1px solid rgba(236,230,218,0.5); border-radius: 50%; }
.optic-info { position: absolute; left: 0; right: 0; top: calc(46% + 39vmin); text-align: center; font-size: 15px; letter-spacing: 0.2em; color: var(--fg); display: flex; gap: 14px; justify-content: center; text-shadow: 0 1px 6px #000; }
.optic-bar { position: absolute; left: 50%; top: calc(46% + 39vmin + 28px); width: 160px; height: 3px; margin-left: -80px; background: rgba(255,255,255,0.15); }
.optic-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.optic-ui { position: absolute; right: 10px; bottom: calc(14px + var(--safe-b)); display: flex; gap: 8px; pointer-events: auto; flex-wrap: wrap; justify-content: flex-end; }

.overlay { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(4,5,8,0.62); padding: 20px; }
.overlay.clear { background: rgba(4,5,8,0.2); }
.overlay-card { max-width: 30rem; width: 100%; text-align: center; }
.overlay-card h1 { font: 500 42px/1.05 var(--display); margin: 0 0 10px; }
.overlay-card h2 { font: 600 14px var(--ui); letter-spacing: 0.4em; color: var(--accent); margin: 0 0 12px; }
.overlay-card p { font: 500 20px/1.35 var(--display); margin: 0 0 14px; }
.overlay-card .small { font: 400 15px/1.5 var(--ui); letter-spacing: 0.08em; color: var(--muted); }
.overlay-card .tip-line { margin: 12px 0 0; }
.overlay-card .tip-line a { color: var(--accent); }
.overlay-card .btn { margin: 6px; min-width: 150px; }
.overlay-card .btn.home-big {
  display: inline-grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px;
  padding: 0; border-radius: 50%; letter-spacing: 0;
}
.overlay-card .btn.home-big svg { width: 22px; height: 22px; display: block; }
.overlay-card img, .overlay-card canvas.card { width: 100%; max-height: 52vh; object-fit: cover; border: 1px solid rgba(255,255,255,0.15); display: block; margin: 0 auto 12px; }
.ring { width: 120px; height: 120px; margin: 10px auto; }
.controls { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; text-align: left; font-size: 16px; letter-spacing: 0.06em; margin: 10px auto 14px; max-width: 24rem; }
.controls b { color: var(--accent); font-weight: 600; white-space: nowrap; }
.title-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.55) saturate(0.8); }

.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 72vh; z-index: 35; background: rgba(9,10,13,0.94); border-top: 1px solid rgba(255,255,255,0.12); padding: 14px 18px calc(16px + var(--safe-b)); overflow-y: auto; }
.sheet h3 { font: 600 14px var(--ui); letter-spacing: 0.35em; color: var(--accent); margin: 4px 0 10px; }
.sheet .note { font: 500 18px/1.35 var(--display); margin: 0 0 12px; }
.sheet .note small { display: block; font: 400 12px var(--ui); letter-spacing: 0.2em; color: var(--muted); }

.loading { position: absolute; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: opacity 0.8s; }
.loading p { font: italic 500 32px var(--display); margin: 0; }
.loading small { letter-spacing: 0.3em; color: var(--muted); font-size: 13px; text-transform: uppercase; }
.loadtrack { width: min(320px, 70vw); height: 3px; background: rgba(236,230,218,0.12); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.loadtrack i { display: block; height: 100%; width: 4%; background: var(--hot, #d9631e); transition: width 0.3s; animation: loadpulse 1.6s ease-in-out infinite; }
@keyframes loadpulse { 50% { opacity: 0.6; } }
.tload { margin: 18px auto 0; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: opacity 1s; }
.tload small { letter-spacing: 0.25em; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.tload.done { opacity: 0; }
.loading.gone { opacity: 0; pointer-events: none; }
@media (min-width: 900px) { .line { font-size: 36px; } .objective { font-size: 26px; } .thought { font-size: 46px; } .hud .day, .hud .clock { font-size: 22px; } }

.touchhint { position: absolute; left: 20px; bottom: calc(168px + var(--safe-b)); z-index: 16; font-size: 14px; letter-spacing: 0.2em; color: var(--fg); text-shadow: 0 1px 8px #000; pointer-events: none; transition: opacity 1s; }
.touchhint small { font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.touchhint.gone { opacity: 0; }
@media (pointer: fine) { .touchhint { display: none; } }

body.in-optic #actions, body.in-optic #stick, body.in-optic #touchhint, body.in-optic #keyhint, body.in-optic #labels, body.in-optic #waypoint { display: none !important; }
/* wide screens: show the whole portrait plate, centred, feathered into the dark at the sides */
@media (min-aspect-ratio: 1/1) {
  .title-bg { background-size: auto 100%; background-repeat: no-repeat; background-color: #07090c; filter: brightness(0.62) saturate(0.85); }
  .title-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #07090c 0, #07090c calc(50% - 31vh), transparent calc(50% - 18vh), transparent calc(50% + 18vh), #07090c calc(50% + 31vh), #07090c 100%); }
}
/* flint-and-steel minigame */
.fg { width: min(92vw, 760px); margin: 0 auto; text-align: center; }
.fg-top { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.fg-top b { letter-spacing: 0.25em; font-size: 14px; color: #ffb060; }
.fg-top span { font-size: 13px; color: var(--muted); }
#fgC, #cgC { width: 100%; height: auto; border-radius: 6px; touch-action: none; background: #07080a; }
.fg-row { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.fg-btn { min-width: 96px; padding: 12px 14px; background: rgba(20,22,26,0.85); color: var(--fg); border: 1px solid rgba(236,230,218,0.35); border-radius: 6px; letter-spacing: 0.15em; font: inherit; font-size: 13px; touch-action: none; user-select: none; -webkit-user-select: none; }
.fg-btn:disabled { opacity: 0.3; }
.fg-btn.ghost { background: transparent; border-color: rgba(236,230,218,0.18); min-width: 0; font-size: 11px; }
.fg-row.small { margin-top: 6px; }

.hands3d { position: absolute; pointer-events: none; }