/* Daybay — only what the shared lab shell does not already cover. */

.lab-canvas { cursor: default; }
.lab-root[data-locked="true"] .lab-canvas { cursor: none; }

.pass-badge {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgb(11 11 11 / 0.72);
  border: 1px solid rgb(255 255 255 / 0.14);
  color: #f2f2f0;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.stats-readout {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  background: rgb(11 11 11 / 0.7);
  border: 1px solid rgb(255 255 255 / 0.12);
  color: #cfcfca;
  font: 500 0.72rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre;
  pointer-events: none;
}

/* A quiet centre mark. Not a crosshair — there is nothing to aim at; it just
   gives the eye something to hold while turning. */
.look-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: rgb(242 242 240 / 0.34);
  pointer-events: none;
}
.lab-root[data-locked="false"] .look-dot { opacity: 0; }

/* The canvas takes focus by script; a focus ring around the whole frame is
   noise in every capture. Keyboard focus is still visible on the buttons. */
.lab-canvas:focus { outline: none; }

.hud {
  position: absolute;
  right: 1.2rem;
  bottom: 1.1rem;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  color: rgb(242 242 240 / 0.82);
  font: 500 0.95rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
  pointer-events: none;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
}
.hud-ammo { font-size: 1.6rem; font-weight: 600; }
.hud-mag { opacity: 0.55; }
.hud-note { margin-left: 0.8rem; font-size: 0.78rem; opacity: 0.8; text-transform: lowercase; }
.lab-root[data-locked="false"] .hud { opacity: 0.5; }

/* the recorder's own overlay */
.rec {
  position: absolute; right: 1.6rem; top: 1.4rem; display: flex; align-items: center; gap: 0.5rem;
  color: rgb(235 235 230 / 0.9); font: 500 0.95rem/1 ui-monospace, Menlo, monospace; letter-spacing: 0.08em;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.7); pointer-events: none;
}
.rec-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #ff3b30; animation: rec-blink 1.2s steps(1) infinite; }
@keyframes rec-blink { 50% { opacity: 0.15; } }

/* weapon HUD */
.hud-weapon { display: block; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; margin-bottom: 0.15rem; }
.hud-slots { display: flex; gap: 0.35rem; margin-top: 0.5rem; }
.hud-slots[hidden] { display: none; }
.hud-slot { font: inherit; font-size: 0.74rem; padding: 0.25rem 0.55rem; border-radius: 0.35rem; border: 1px solid rgba(255,255,255,0.35); background: rgba(0,0,0,0.45); color: #fff; cursor: pointer; }
.hud-slot b { margin-right: 0.3rem; opacity: 0.7; }
.hud-slot[aria-pressed="true"] { background: rgba(255,255,255,0.9); color: #111; border-color: #fff; }
.lab-debug { margin-top: 0.9rem; font-size: 0.8rem; opacity: 0.85; }
.lab-debug summary { cursor: pointer; }
.lab-debug p { margin: 0.4rem 0; }
.lab-debug .lab-btn { font-size: 0.74rem; padding: 0.2rem 0.5rem; margin: 0.1rem 0.2rem 0.1rem 0; }

.hud-audio { display: block; font-size: 0.7rem; opacity: 0.6; margin-top: 0.1rem; }
.vol-row { display: flex; align-items: center; gap: 0.5rem; }
.vol-row input[type="range"] { width: 9rem; }
.lab-debug .lab-btn[aria-pressed="false"] { opacity: 0.45; text-decoration: line-through; }

/* --- encounter HUD --- */
.hud-health { font-variant-numeric: tabular-nums; letter-spacing: .04em; opacity: .95; }
.hud-health.low { color: #ff6a4d; }
.hud-state { opacity: .8; font-size: .82em; letter-spacing: .06em; text-transform: uppercase; }
/* Downed, dead and area cleared. The kicker takes the orange only on a win,
   so the three endings are told apart before the sentence is read. */
.retry {
  position: absolute; inset: auto 0 20% 0; display: grid; justify-items: center; gap: .5rem;
  pointer-events: auto; z-index: 7; text-align: center; padding: 0 20px;
}
.retry .retry-kicker {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lab-muted); text-shadow: 0 2px 12px rgba(0,0,0,.9);
}
.retry[data-outcome="cleared"] .retry-kicker { color: var(--lab-orange); }
.retry .retry-text {
  margin: 0; font-size: clamp(1.4rem, 3.4vw, 2.2rem); font-weight: 600; letter-spacing: -.028em;
  color: #f2f2f0; text-shadow: 0 2px 18px rgba(0,0,0,.85);
}
.retry .retry-note {
  margin: 0; max-width: 30rem; font-size: 13.5px; color: var(--lab-body);
  text-shadow: 0 2px 14px rgba(0,0,0,.9);
}
.retry-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: .6rem; }

/* ------------------------------------------------------------------- menu --
   One sheet over the world, on the shared overlay and card. The panels are
   switched by [data-panel] on the container rather than by hiding each one,
   so exactly one is on screen no matter what else touched the markup. */
.menu { z-index: 9; }
.menu-sheet { width: min(560px, 100%); max-height: min(86vh, 780px); overflow-y: auto; }
.menu-heading { margin-top: 10px; font-size: clamp(24px, 4vw, 32px); }
.menu-panel { display: none; margin-top: 22px; }
.menu[data-panel="root"] [data-panel-id="root"],
.menu[data-panel="controls"] [data-panel-id="controls"],
.menu[data-panel="settings"] [data-panel-id="settings"],
.menu[data-panel="dev"] [data-panel-id="dev"] { display: block !important; }

.menu-list { display: grid; gap: 8px; }
.menu-list .lab-btn { justify-content: center; width: 100%; }
.menu-row { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--lab-line); }
.menu-fine { margin-top: 14px; font-size: 13px; color: var(--lab-muted); }
.menu-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--lab-line); }
.menu-links .lab-chip:hover { color: var(--lab-ink); border-color: var(--lab-line-strong); }
.lab-card-actions-quiet { margin-top: 10px; }

/* The controls panel is still #help, and main.js still owns the button that
   toggles [hidden] on it. Reusing .lab-help keeps the definition-list type
   and spacing; these four lines take away its floating-card position so it
   reads as a page of the sheet. The rule above wins over both [hidden] and
   the shared short-window rule that hides .lab-help entirely. */
.menu .lab-help {
  position: static; width: auto; padding: 0;
  border: 0; background: none; box-shadow: none; backdrop-filter: none;
}
.menu .lab-help dl { margin-top: 0; }
.menu-settings { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; font-size: 13.5px; }
.menu-settings dt { color: var(--lab-muted); }
.menu-settings dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.menu-settings .hint { flex: 1 1 100%; font-size: 12.5px; color: var(--lab-muted); }

/* An error on the start card: what happened, what to do, and the stack folded
   away underneath. Never a wall of red. */
.start-error {
  margin-top: 16px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--lab-line-strong); background: var(--lab-hover);
  font-size: 13.5px; color: var(--lab-body);
}
.start-error summary { margin-top: 8px; cursor: pointer; font-size: 12.5px; color: var(--lab-muted); }
.start-error pre {
  margin: 8px 0 0; padding: 8px; max-height: 10rem; overflow: auto;
  background: rgba(0,0,0,.3); border-radius: 8px;
  font: 500 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap; word-break: break-word;
}

/* Narrow windows: the sheet takes the frame, and the rows stack rather than
   scrolling sideways. The definition lists lose their second column. */
@media (max-width: 620px) {
  .menu-sheet { max-height: 92vh; }
  .menu .lab-help dl, .menu-settings { grid-template-columns: 1fr; gap: 4px 0; }
  .menu .lab-help dd, .menu-settings dd { margin-bottom: 12px; }
  .menu-settings dt { margin-top: 4px; }
  .vol-row input[type="range"] { width: 100%; }
}

/* --- incoming damage ------------------------------------------------------
   Everything here is DOM, on purpose: it sits outside the render target, so
   the world's motion blur and lens distortion cannot smear it and the number
   stays sharp. Nothing is opaque and the middle of the frame is never covered:
   the direction reads as light coming in from one edge, not as a shape drawn
   on top of the scene.
*/
.dmg-root { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.dmg-vig, .dmg-low, .dmg-arc {
  position: absolute; inset: 0; opacity: 0; will-change: opacity;
}
.dmg-vig {
  background:
    radial-gradient(ellipse 66% 60% at 50% 50%, rgba(0,0,0,0) 70%, rgba(104,11,8,.82) 100%),
    radial-gradient(ellipse 90% 82% at 50% 50%, rgba(0,0,0,0) 80%, rgba(162,26,18,.44) 100%);
}
/* the quiet persistent one, below a third health */
.dmg-low {
  background: radial-gradient(ellipse 76% 68% at 50% 50%, rgba(0,0,0,0) 34%, rgba(92,10,7,.62) 82%, rgba(58,6,4,.86) 100%);
}
/* the direction: a soft bloom whose centre is pushed off-frame toward where
   the shot came from, so it fades in from that edge and never draws an edge
   of its own across the picture */
.dmg-arc {
  background: radial-gradient(ellipse 40% 78% at var(--dx, 50%) var(--dy, 120%),
    rgba(242,58,38,.95) 0%, rgba(220,32,16,.52) 28%, rgba(184,18,10,0) 66%);
}

/* The front door says as little as it can get away with. The renderer and
   licence detail is still all here, one click behind "How it is made" -
   nobody deciding whether to press Play needs to read it first. */
.lab-hint {
  margin: .55rem 0 0; font-size: .8rem; letter-spacing: .01em;
  color: var(--lab-muted); text-align: center;
}
.lab-hint kbd, .retry-key kbd, .lab-btn kbd {
  display: inline-block; padding: .05em .38em; margin: 0 .1em;
  border: 1px solid rgba(255,255,255,.24); border-radius: .28rem;
  background: rgba(255,255,255,.07);
  font: 600 .82em/1.35 ui-monospace, "SF Mono", Menlo, monospace;
}
.lab-btn kbd { opacity: .72; margin-left: .45em; }
.lab-meta-line { margin: 0 0 .35rem; }
.lab-meta-more { margin: .1rem 0 .5rem; }
.lab-meta-more summary {
  cursor: pointer; font-size: .8rem; opacity: .66; user-select: none;
  list-style: none;
}
.lab-meta-more summary::-webkit-details-marker { display: none; }
.lab-meta-more summary::before { content: "▸ "; opacity: .7; }
.lab-meta-more[open] summary::before { content: "▾ "; }
.lab-meta-more summary:hover { opacity: 1; }
.lab-meta-more p { margin: .45rem 0 0; }

/* An ending should not need a mouse. */
.retry-key {
  margin: .7rem 0 0; font-size: .82rem; color: var(--lab-muted); text-align: center;
}