/* ==========================================================================
   Player UI - mobile-first (320-480px), centered column on desktop.
   ========================================================================== */

body.player {
  max-width: 480px;
  margin: 0 auto;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  min-height: 100vh;
  min-height: 100dvh;
}

.view {
  padding: 14px 14px 110px;
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- top status line ----------------------------------------------------- */

.statusline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- fixed bottom action bar --------------------------------------------- */

.actionbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 62%, transparent);
  z-index: 100;
}

.actionbar .btn { width: 100%; min-height: 54px; font-size: 15px; }

/* --- prologue ------------------------------------------------------------ */

#view-prologue {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.prologue-text {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.8;
  min-height: 55vh;
  word-break: break-word;
}

.typewriter-caret::after {
  content: "\2588";
  animation: blink 0.9s infinite steps(1);
}

/* --- reference photo ----------------------------------------------------- */

.ref-figure {
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  margin-bottom: 14px;
}

.ref-figure img {
  display: block;
  width: 100%;
  max-height: 52vh;
  object-fit: contain;
  background: #000;
  filter: saturate(0.75) contrast(1.04);
}

.ref-missing {
  padding: 40px 14px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  letter-spacing: 0.1em;
}

.ref-figure figcaption {
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink-dim);
  white-space: pre-wrap;
}

/* --- coordinate buffer --------------------------------------------------- */

.coordinate-panel {
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: 12px;
  margin-bottom: 14px;
}

.coordinate-panel .label {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.coordinate-display {
  font-size: 17px;
  letter-spacing: 0.22em;
  word-break: break-all;
  line-height: 1.7;
}

/* --- waiting / countdown ------------------------------------------------- */

.waiting-block, .countdown-block {
  border: 1px dashed var(--line-strong);
  padding: 16px 14px;
  margin-bottom: 14px;
  text-align: center;
}

.countdown-value {
  font-size: 30px;
  letter-spacing: 0.18em;
  margin: 8px 0;
}

.wait-flavour {
  font-size: 12px;
  color: var(--ink-dim);
  white-space: pre-wrap;
}

/* --- stage break / final ------------------------------------------------- */

#view-stagebreak, #view-final, #view-paused {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.bigmark {
  font-size: 20px;
  margin-bottom: 18px;
}

.final-coordinate {
  font-size: 20px;
  letter-spacing: 0.2em;
  border: 1px solid var(--ink);
  padding: 18px 12px;
  margin: 18px 0;
  word-break: break-all;
}

.final-text, .break-text {
  white-space: pre-wrap;
  color: var(--ink-dim);
  font-size: 14px;
  text-align: left;
  margin-top: 12px;
}

/* --- camera -------------------------------------------------------------- */

/* The scanline/vignette overlays (body::before/::after) sit at z-9990/9991 and
   the vignette visibly darkens the left/right edges of the full-screen camera,
   reading as black "gaps". Keep the camera (and its UI) above those overlays. */
#view-camera {
  position: fixed;
  top: 0;
  left: 0;
  /* Pin to the full viewport and override the 480px-wide body column that
     was squeezing it (smaller screens => narrower camera). */
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  margin: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  flex-direction: column;
}

.camera-stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #000;
  min-height: 0; /* allow flex to shrink on small screens */
}

.camera-stage video,
.camera-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-stage .camera-hud {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(236, 232, 225, 0.85);
  text-transform: uppercase;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.camera-explain {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  gap: 16px;
  background: var(--bg);
  overflow-y: auto;
}

.camera-explain h2 { font-size: 16px; letter-spacing: 0.12em; }

.camera-explain p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-dim);
  white-space: pre-wrap;
  max-width: 60ch;
}

.camera-explain .btn { width: 100%; max-width: 340px; }

.camera-error {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  gap: 12px;
  background: var(--bg);
  overflow-y: auto;
}

.camera-error.visible { display: flex; }

.camera-error h2 { font-size: 15px; letter-spacing: 0.12em; }

.camera-error .mono-block { width: 100%; max-width: 40ch; }

.camera-error .btn { width: 100%; max-width: 320px; }

.camera-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.camera-controls .btn { min-height: 56px; font-size: 13px; }
.camera-controls .span-2 { grid-column: span 2; }
.camera-controls .span-3 { grid-column: span 3; }

.upload-progress {
  padding: 0 12px 10px;
  background: var(--bg);
}

.upload-progress .label {
  font-size: 11px;
  color: var(--ink-dim);
  margin-bottom: 6px;
  letter-spacing: 0.14em;
}

/* --- message overlay is in base.css -------------------------------------- */

.msg-meta {
  font-size: 11px;
  color: var(--ink-faint);
  margin-bottom: 10px;
}

.msg-body {
  white-space: pre-wrap;
  margin-bottom: 18px;
  font-size: 14px;
}

/* --- login --------------------------------------------------------------- */

.login-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
}

.login-header {
  margin-bottom: 26px;
}

.login-header h1 {
  font-size: 19px;
  letter-spacing: 0.18em;
}

.login-header .sub {
  color: var(--ink-faint);
  font-size: 12px;
  letter-spacing: 0.14em;
  margin-top: 6px;
}

.login-error {
  min-height: 22px;
  color: var(--warn);
  font-size: 13px;
  margin-bottom: 12px;
  white-space: pre-wrap;
}

@media (min-width: 700px) {
  body.player { border-left-width: 1px; }
}