/*
 * The Flashlight — the stylesheet.
 *
 * Almost nothing: the picture is the interface. Small monospace capitals in a
 * cold grey, a thin battery line, a ring at the pointer, and the screens
 * before and after, black with one line of light.
 */
:root {
  color-scheme: dark;
  --ink: rgba(214, 220, 228, 0.78);
  --dim: rgba(214, 220, 228, 0.42);
  --warm: #ffd9a6;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
body {
  color: var(--ink);
  font: 12px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: none;
}
#stage { position: absolute; inset: 0; background: #000; }
#stage canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
#overlay { position: absolute; inset: 0; pointer-events: none; }
#overlay button, #overlay a { pointer-events: auto; cursor: pointer; }

.is-hidden { opacity: 0 !important; pointer-events: none !important; }
/* a hidden layer's buttons must not sit invisibly over the one that is shown */
.is-hidden button, .is-hidden a { pointer-events: none !important; }
.screen.is-hidden { visibility: hidden; transition: opacity 1.1s ease, visibility 0s linear 1.1s; }

/* ---------------------------------------------------------------- the readout */
#hud { position: absolute; inset: 0; transition: opacity 1.2s ease; }
.readout { position: absolute; top: calc(18px + var(--safe-top)); left: 0; right: 0; text-align: center; }
#battery { display: block; color: var(--ink); }
#batteryBar { display: block; width: 84px; height: 2px; margin: 8px auto 0; background: rgba(214, 220, 228, 0.14); position: relative; }
#batteryBar::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--level, 100%); background: var(--warm); opacity: 0.8; transition: width 0.4s linear; }
#hud[data-low="1"] #battery { color: #ff9b7a; animation: lowblink 1.4s steps(2, end) infinite; }
#hud[data-low="1"] #batteryBar::after { background: #ff9b7a; }
@keyframes lowblink { 50% { opacity: 0.45; } }
.objective { position: absolute; left: 0; right: 0; bottom: calc(26px + var(--safe-bottom)); text-align: center; color: var(--ink); min-height: 1.6em; }
.fuses { position: absolute; left: 0; right: 0; bottom: calc(50px + var(--safe-bottom)); text-align: center; color: var(--dim); }

.message { position: absolute; left: 24px; right: 24px; bottom: calc(84px + var(--safe-bottom)); margin: 0; text-align: center; color: var(--ink); transition: opacity 0.6s ease; }
.whisper {
  position: absolute; left: 24px; right: 24px; top: 46%; margin: 0; text-align: center;
  color: rgba(226, 228, 236, 0.9); text-transform: lowercase; letter-spacing: 0.1em; font-style: italic; font-size: 15px;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.25); transition: opacity 1.6s ease, filter 1.6s ease; filter: blur(0.6px);
}
.whisper.is-live { animation: breathe 2.8s ease-in-out; }
@keyframes breathe { 0% { opacity: 0; filter: blur(4px); letter-spacing: 0.3em; } 30% { opacity: 1; filter: blur(0.4px); } 100% { opacity: 0; filter: blur(2px); } }
.hint { position: absolute; left: 24px; right: 24px; top: calc(66px + var(--safe-top)); margin: 0; text-align: center; color: var(--dim); font-size: 11px; transition: opacity 0.8s ease; }

/* ---------------------------------------------------------------- the pointer */
.cursor { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: opacity 0.3s ease; }
.cursor::before { content: ''; position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 230, 190, 0.7); }
.ring { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; transition: opacity 0.25s ease; }
.ring span { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 8px); white-space: nowrap; color: var(--ink); font-size: 10px; letter-spacing: 0.2em; }
.ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(255, 220, 170, 0.95) calc(var(--progress, 0) * 100%), rgba(255, 220, 170, 0.16) 0); -webkit-mask: radial-gradient(circle, transparent 23px, #000 24px); mask: radial-gradient(circle, transparent 23px, #000 24px); }
body[data-touch="1"] .cursor::before { display: none; }

/* ---------------------------------------------------------------- the tools */
.tools { position: absolute; top: calc(10px + var(--safe-top)); right: 10px; display: flex; gap: 4px; transition: opacity 0.6s ease; }
.tools button { width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--dim); display: grid; place-items: center; border-radius: 8px; }
.tools button:hover, .tools button:focus-visible { color: var(--ink); background: rgba(255, 255, 255, 0.06); outline: none; }
.tools svg { width: 20px; height: 20px; }
.tools button[aria-pressed="true"] .wave { display: none; }

/* ---------------------------------------------------------------- the screens */
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; text-align: center; background: #000; transition: opacity 1.1s ease; pointer-events: auto;
}
.screen p { margin: 0; max-width: 34em; }
.eyebrow { color: var(--dim); font-size: 11px; }
.big { margin: 0; font-size: clamp(22px, 5vw, 44px); font-weight: 500; letter-spacing: 0.34em; color: #e6e9ee; text-shadow: 0 0 28px rgba(255, 217, 166, 0.25); animation: flickerin 2.6s steps(1, end) 1; }
.mid { font-size: clamp(13px, 2vw, 17px); color: #e6e9ee; }
.sub { color: var(--ink); text-transform: none; letter-spacing: 0.06em; font-size: 13px; }
.small { color: var(--dim); font-size: 10px; letter-spacing: 0.18em; }
.small a { color: var(--dim); white-space: nowrap; }
.foot { margin-top: 36px !important; }
.key {
  margin-top: 14px; padding: 14px 18px; min-height: 44px; border: 0; background: transparent; color: #e6e9ee;
  font: inherit; letter-spacing: 0.3em; text-transform: uppercase; cursor: pointer; transition: color 0.2s, text-shadow 0.2s;
}
.key:hover, .key:focus-visible { color: var(--warm); text-shadow: 0 0 16px rgba(255, 217, 166, 0.5); outline: none; }
.key.dim { color: var(--dim); }
.row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.behind { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(214, 220, 228, 0.12); }
.stats { display: grid; grid-template-columns: auto auto; gap: 6px 26px; margin: 10px 0 0; text-align: left; }
.stats dt { color: var(--dim); }
.stats dd { margin: 0; color: #e6e9ee; text-align: right; }
.verdict { color: var(--warm); text-transform: none; letter-spacing: 0.08em; font-style: italic; font-size: 13px; margin-top: 8px !important; }
@keyframes flickerin {
  0% { opacity: 0; } 8% { opacity: 1; } 12% { opacity: 0.2; } 18% { opacity: 1; } 22% { opacity: 0.4; } 26% { opacity: 1; } 60% { opacity: 1; } 63% { opacity: 0.5; } 66% { opacity: 1; }
}
#prologue .lines p { font-size: clamp(13px, 2.2vw, 18px); color: #e6e9ee; text-transform: none; letter-spacing: 0.1em; opacity: 0; transition: opacity 1.4s ease; margin: 6px 0; }
#prologue .lines p.is-on { opacity: 1; }
#loading .small { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }

@media (prefers-reduced-motion: reduce) {
  .big, .whisper.is-live, #hud[data-low="1"] #battery, #loading .small { animation: none; }
}
@media (max-width: 600px) {
  body { font-size: 11px; letter-spacing: 0.18em; }
  .stats { gap: 6px 16px; }
}