/* Title screen: "Zero Classified — Sector 9: Blackout".
   Two key arts, both with their painted menu, logo, button and taglines
   removed: assets/ui/title.webp (16:9, iPad / desktop) and title-wide.webp
   (2.33:1, iPhone and other wide screens); the <picture> in index.html picks
   by screen shape, and the --ar / --a-* numbers below follow it. The art
   always covers the whole screen in landscape:
   wide screens crop the bottom (the title stays), tall screens crop the sides
   (Ghost and the title stay). Everything else is live and pinned to the screen
   edges, sized from the art: --bw / --bh are the art's drawn width / height,
   --ox / --oy its offset. In portrait the art fits the width instead. */

:root {
  --t-red: #ff2438;
  --t-red-soft: rgba(255, 36, 56, 0.35);
  --t-ink: #f1f1f1;
  --t-font: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
}

#title {
  /* Where things sit on the 16:9 art, as fractions of its width / height. */
  --ar: 1.7768;
  --a-mx: 0.027;  --a-my: 0.066;        /* menu, top left */
  --a-lr: 0.019;  --a-ly: 0.037;        /* SI-TELLIGENCE mark, top right */
  --a-cy: 0.865;  --a-cw: 0.239;  --a-ch: 0.057;   /* start button */
  --a-fy: 0.922;                        /* credit and taglines */
  --bw: max(100vw, calc(100vh * var(--ar)));
  --bw: max(100vw, calc(100dvh * var(--ar)));
  --bh: calc(var(--bw) / var(--ar));
  --ox: calc((100vw - var(--bw)) / 2);
  --oy: max(calc(100vh - var(--bh)), calc(var(--bh) * -0.03));
  --oy: max(calc(100dvh - var(--bh)), calc(var(--bh) * -0.03));
  --edge-l: calc(16px + var(--safe-l, 0px));
  --edge-r: calc(16px + var(--safe-r, 0px));
  --edge-t: calc(10px + var(--safe-t, 0px));
  --edge-b: calc(10px + var(--safe-b, 0px));
  --ch: clamp(36px, calc(var(--bh) * var(--a-ch)), 72px);
  position: absolute;
  inset: 0;
  z-index: 19;                 /* under .screen (20) so settings opens on top */
  background: #050304;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
#title[hidden] { display: none !important; }
#title.leaving { opacity: 0; transform: scale(1.04); pointer-events: none; }

/* The dev build stamp would sit on the start button. */
#app:has(#title:not([hidden])) #build-stamp { display: none; }

/* Behind the art; only seen in portrait. */
.title-fill {
  position: absolute;
  inset: -40px;
  background: url("../assets/ui/title-1000.webp") center / cover no-repeat;
  filter: blur(26px) brightness(0.45) saturate(1.2);
  display: none;
}

.title-art {
  position: absolute;
  left: var(--ox);
  top: var(--oy);
  width: var(--bw);
  height: var(--bh);
  animation: title-push 26s ease-in-out infinite alternate;
  transform-origin: 50% 8%;
}
.title-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  animation: title-flash 11s linear infinite 2.5s;
}
@keyframes title-push { from { transform: scale(1); } to { transform: scale(1.03); } }
/* Lightning lights the whole street for a beat (synced with .title-glow::after). */
@keyframes title-flash {
  0%, 86%, 100% { filter: none; }
  87% { filter: brightness(1.45) contrast(1.05); }
  88% { filter: brightness(1.05); }
  89.5% { filter: brightness(1.32); }
  92% { filter: none; }
}

.title-rain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Storm light: red pulse off the fences, and the odd lightning flash. */
.title-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 16% 34% at 90% 46%, rgba(255, 30, 45, 0.24), transparent 70%),
    radial-gradient(ellipse 14% 20% at 20% 60%, rgba(255, 30, 45, 0.14), transparent 70%),
    radial-gradient(ellipse 40% 18% at 50% 92%, rgba(255, 30, 45, 0.16), transparent 70%);
  animation: title-pulse 3.6s ease-in-out infinite;
}
.title-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 62% 10%, rgba(200, 215, 255, 0.55), transparent 70%);
  opacity: 0;
  animation: title-lightning 11s linear infinite 2.5s;
}
@keyframes title-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } 62% { opacity: 0.7; } 66% { opacity: 1; } }
@keyframes title-lightning {
  0%, 86%, 100% { opacity: 0; }
  87% { opacity: 0.9; }
  88% { opacity: 0.1; }
  89.5% { opacity: 0.75; }
  92% { opacity: 0; }
}

/* Darken the corners the UI sits on, so it reads over any part of the art. */
.title-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.2) 16%, transparent 26%),
    radial-gradient(ellipse 34% 26% at 0% 0%, rgba(0, 0, 0, 0.6), transparent 100%),
    radial-gradient(ellipse 26% 26% at 100% 0%, rgba(0, 0, 0, 0.45), transparent 100%);
}

/* --- Menu, top left. */
.title-menu {
  position: absolute;
  left: max(calc(var(--ox) + var(--bw) * var(--a-mx)), var(--edge-l));
  top: max(calc(var(--oy) + var(--bh) * var(--a-my)), var(--edge-t));
  display: flex;
  flex-direction: column;
  gap: clamp(2px, calc(var(--bh) * 0.006), 10px);
}
.title-menu button {
  --fs: clamp(11px, calc(var(--bw) * 0.0108), 22px);
  position: relative;
  display: block;
  text-align: left;
  padding: 0.5em 1.4em 0.5em 1.35em;
  background: transparent;
  border: 0;
  margin: 0;
  cursor: pointer;
  color: rgba(222, 222, 222, 0.78);
  font: 500 var(--fs)/1 var(--t-font);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  outline: none;
  border-radius: 0;
  text-shadow: 0 0 6px #000, 0 0 2px #000;
  transition: color 0.15s;
}
.title-menu button::before {         /* the bar */
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: max(2px, 0.22em);
  background: var(--t-red-soft);
  transition: background 0.15s, box-shadow 0.15s;
}
.title-menu button::after {          /* the underline */
  content: "";
  position: absolute;
  left: 1.35em;
  right: 0.9em;
  bottom: 0.05em;
  height: max(1px, 0.08em);
  background: linear-gradient(90deg, var(--t-red), rgba(255, 36, 56, 0.15));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.title-menu button.sel {
  color: #fff;
  background: linear-gradient(90deg, rgba(255, 36, 56, 0.18), transparent 90%);
}
.title-menu button.sel::before {
  background: var(--t-red);
  box-shadow: 0 0 0.5em var(--t-red), 0 0 1.2em rgba(255, 36, 56, 0.6);
}
.title-menu button.sel::after { transform: scaleX(1); }
.title-menu button:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; }

/* --- SI-TELLIGENCE mark, top right. */
.title-logo {
  position: absolute;
  right: max(calc(var(--ox) + var(--bw) * var(--a-lr)), var(--edge-r));
  top: max(calc(var(--oy) + var(--bh) * var(--a-ly)), var(--edge-t));
  width: clamp(80px, calc(var(--bw) * 0.115), 210px);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.title-logo img {
  width: 62%;
  height: auto;
  filter: drop-shadow(0 0 0.6em rgba(255, 36, 56, 0.55));
}
.title-logo span {
  margin-top: 0.35em;
  font: 600 clamp(8px, calc(var(--bw) * 0.0092), 18px)/1 "Rajdhani", var(--t-font);
  letter-spacing: 0.08em;
  color: #f4f4f4;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
}
.title-logo span::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.4em;
  background: linear-gradient(90deg, transparent, var(--t-red), transparent);
  box-shadow: 0 0 6px var(--t-red);
}

/* --- Start button, bottom centre: load progress, then PRESS ENTER / TAP TO START. */
.title-cta {
  --p: 0;
  position: absolute;
  left: 50%;
  top: min(calc(var(--oy) + var(--bh) * var(--a-cy)), calc(100% - var(--ch) - var(--edge-b) - 3.2vh));
  transform: translateX(-50%);
  width: clamp(220px, calc(var(--bw) * var(--a-cw)), 46vw);
  height: var(--ch);
  padding: 0;
  border: 1.5px solid var(--t-red);
  border-radius: 2px;
  background: rgba(10, 4, 5, 0.94);
  color: var(--t-ink);
  font: 600 clamp(13px, calc(var(--bw) * 0.0145), 28px)/1 var(--t-font);
  letter-spacing: 0.42em;
  text-indent: 0.42em;          /* letter-spacing adds space after the last letter too */
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 0 14px rgba(255, 36, 56, 0.75), inset 0 0 22px rgba(255, 36, 56, 0.22);
  transition: box-shadow 0.2s, background 0.2s;
}
.cta-fill {
  position: absolute;
  inset: 0;
  width: calc(var(--p) * 100%);
  background: linear-gradient(90deg, rgba(255, 36, 56, 0.08), rgba(255, 36, 56, 0.42));
  transition: opacity 0.3s;
}
.cta-label { position: relative; }
#title[data-state="ready"] .cta-fill { opacity: 0; }
#title[data-state="ready"] .title-cta { animation: cta-pulse 1.8s ease-in-out infinite; }
#title[data-state="ready"] .title-cta:hover,
#title[data-state="ready"] .title-cta:focus-visible {
  background: rgba(40, 6, 10, 0.95);
  box-shadow: 0 0 22px var(--t-red), inset 0 0 30px rgba(255, 36, 56, 0.45);
  outline: none;
}
#title[data-state="ready"] .title-cta:active { background: rgba(60, 8, 14, 0.95); }
#title[data-state="loading"] .cta-label { opacity: 0.85; letter-spacing: 0.3em; }
#title[data-state="error"] .title-cta { border-color: #ff8d8d; letter-spacing: 0.18em; }
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 36, 56, 0.6), inset 0 0 18px rgba(255, 36, 56, 0.18); }
  50% { box-shadow: 0 0 26px rgba(255, 36, 56, 0.95), inset 0 0 34px rgba(255, 36, 56, 0.38); }
}

/* --- Credit (bottom left) and taglines (bottom right), on one line. */
.title-credit,
.title-tags {
  --fs: clamp(10px, calc(var(--bw) * 0.0088), 17px);
  position: absolute;
  top: min(calc(var(--oy) + var(--bh) * var(--a-fy)), calc(100% - var(--fs) - var(--edge-b) - 1.6vh));
  display: flex;
  align-items: center;
  gap: 0.9em;
  font: 600 var(--fs)/1 var(--t-font);
  letter-spacing: 0.3em;
  color: rgba(236, 236, 236, 0.88);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 4px #000, 0 0 10px #000;
}
.title-credit { left: max(calc(var(--ox) + var(--bw) * 0.012), calc(var(--safe-l, 0px))); }
.title-tags { right: max(calc(var(--ox) + var(--bw) * 0.012), calc(var(--safe-r, 0px))); }
.title-credit::before,
.title-tags::after {
  content: "";
  width: 2.2em;
  height: max(1px, 0.1em);
  background: var(--t-red);
  box-shadow: 0 0 0.4em var(--t-red);
}
.title-credit b { color: var(--t-red); font-weight: 600; }
.title-tags i { font-style: normal; color: var(--t-red); }

/* Small screens: tighter letters so the labels fit. */
@media (max-width: 760px), (max-height: 420px) {
  .title-cta { letter-spacing: 0.26em; text-indent: 0.26em; }
  .title-credit, .title-tags { letter-spacing: 0.18em; gap: 0.6em; }
}
/* Too narrow for the taglines beside the start button: keep the credit, drop them. */
@media (max-width: 1000px) {
  .title-tags { display: none; }
}
/* Wide screens (iPhone landscape and wider than 2:1): the wide art. Must
   match the <source media> in index.html. */
@media (orientation: landscape) and (min-aspect-ratio: 205/100) {
  #title {
    --ar: 2.3337;
    --a-mx: 0.027;  --a-my: 0.085;
    --a-lr: 0.012;  --a-ly: 0.067;
    --a-cy: 0.843;  --a-cw: 0.179;  --a-ch: 0.061;
    --a-fy: 0.935;
  }
}

/* Tall landscape screens (16:10 and squarer, e.g. iPad full screen): the art
   loses its sides, so the title runs nearly edge to edge. Menu and mark drop
   just below it instead of sitting on its letters. */
@media (orientation: landscape) and (max-aspect-ratio: 1.62) {
  .title-menu { top: calc(var(--oy) + var(--bh) * 0.265); }
  .title-logo { width: clamp(64px, calc(var(--bw) * 0.075), 150px); }
}
/* 4:3-ish: no room beside the title, and the art's own SI-TELLIGENCE
   billboard is right where the mark would drop to. */
@media (orientation: landscape) and (max-aspect-ratio: 1.45) {
  .title-logo { display: none; }
}

/* Portrait: the art fits the width, centred, over a blurred copy of itself. */
@media (orientation: portrait) {
  #title {
    --bw: 100vw;
    --oy: calc((100vh - var(--bh)) / 2);
    --oy: calc((100dvh - var(--bh)) / 2);
    --ch: clamp(26px, calc(var(--bh) * var(--a-ch)), 60px);
  }
  .title-fill { display: block; }
  .title-cta { width: clamp(150px, calc(var(--bw) * 0.32), 60vw); font-size: clamp(10px, 2.8vw, 18px); letter-spacing: 0.22em; text-indent: 0.22em; }
  .title-menu button { --fs: clamp(8px, 2.2vw, 14px); }
  .title-logo { width: clamp(52px, 13vw, 120px); }
}

/* iPhone Safari can't go full screen from a web page: point at Add to Home Screen. */
.title-hint {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 64%;                    /* over Ghost's coat, clear of the title and button */
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 36, 56, 0.6);
  background: rgba(8, 3, 4, 0.88);
  color: var(--t-ink);
  font: 600 11px/1 var(--t-font);
  letter-spacing: 0.16em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(255, 36, 56, 0.35);
  animation: hint-in 0.5s ease both 1s;
}
.title-hint[hidden] { display: none; }
.title-hint b { color: var(--t-red); font-weight: 700; }
.title-hint i { font-style: normal; opacity: 0.7; margin-left: 4px; font-size: 14px; }
.title-hint .share {
  width: 11px;
  height: 13px;
  border: 1.5px solid currentColor;
  border-top: 0;
  position: relative;
  display: inline-block;
}
.title-hint .share::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  width: 1.5px;
  height: 11px;
  background: currentColor;
  transform: translateX(-50%);
}
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* --- Extras sheet. */
.title-sheet {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: calc(16px + var(--safe-t, 0px)) calc(16px + var(--safe-r, 0px)) calc(16px + var(--safe-b, 0px)) calc(16px + var(--safe-l, 0px));
  background: rgba(3, 1, 2, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: default;
  overflow-y: auto;
  touch-action: pan-y;
}
.title-sheet[hidden] { display: none; }
.sheet-card {
  width: min(860px, 100%);
  background: linear-gradient(180deg, rgba(20, 8, 10, 0.96), rgba(8, 4, 5, 0.96));
  border: 1px solid rgba(255, 36, 56, 0.45);
  border-left: 3px solid var(--t-red);
  box-shadow: 0 0 40px rgba(255, 36, 56, 0.18);
  padding: 22px 26px 20px;
  color: var(--t-ink);
}
.sheet-kicker { font: 600 12px/1 var(--t-font); letter-spacing: 0.32em; color: var(--t-red); }
.sheet-card h2 { font: 700 34px/1 var(--t-font); letter-spacing: 0.14em; margin: 8px 0 14px; }
.sheet-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.sheet-card h3 { font: 600 15px/1 var(--t-font); letter-spacing: 0.24em; text-transform: uppercase; color: #ff6b78; margin: 4px 0 8px; }
.sheet-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; line-height: 1.3; }
.sheet-card dt { font: 600 14px/1.3 var(--t-font); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.sheet-card dd { margin: 0; color: #c9c3c4; }
.sheet-install { margin: 14px 0 0; font-size: 13px; line-height: 1.35; color: #c9c3c4; }
.sheet-install::before { content: "INSTALL  "; font: 600 13px/1 var(--t-font); letter-spacing: 0.24em; color: #ff6b78; }
.sheet-credit { margin: 16px 0 0; font: 500 13px/1 var(--t-font); letter-spacing: 0.22em; text-transform: uppercase; color: #8d8587; }
.sheet-back {
  margin-top: 16px;
  min-height: 44px;
  padding: 0 28px;
  background: transparent;
  color: var(--t-ink);
  border: 1px solid var(--t-red);
  font: 600 15px/1 var(--t-font);
  letter-spacing: 0.32em;
  cursor: pointer;
}
.sheet-back:hover, .sheet-back:focus-visible { background: rgba(255, 36, 56, 0.18); outline: none; }

/* Portrait phones: the art fits the width, so say how to play it. */
@media (orientation: portrait) and (max-width: 820px) {
  #title::after {
    content: "ROTATE TO LANDSCAPE TO PLAY";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(64px + var(--safe-b, 0px));
    text-align: center;
    font: 600 13px/1 var(--t-font);
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.7);
    pointer-events: none;
  }
}
@media (max-width: 740px), (max-height: 460px) {
  .sheet-card { padding: 14px 16px; }
  .sheet-card h2 { font-size: 24px; margin: 4px 0 8px; }
  .sheet-cols { grid-template-columns: 1fr 1fr; gap: 6px 16px; }
  .sheet-card dl { font-size: 12px; gap: 3px 10px; }
  .sheet-card dt { font-size: 12px; }
  .sheet-credit { margin-top: 8px; font-size: 11px; }
  .sheet-back { margin-top: 8px; min-height: 36px; }
}
@media (max-width: 560px) and (orientation: portrait) {
  .sheet-cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .title-art, .title-art img, .title-glow, .title-glow::after, #title[data-state="ready"] .title-cta { animation: none; }
}

/* --- The rest of the menus (briefing, pause, end) in the same dress. */
.screen { background: radial-gradient(ellipse at 50% 40%, rgba(40, 6, 10, 0.55), rgba(3, 1, 2, 0.88)); }
.screen .panel {
  background: linear-gradient(180deg, rgba(20, 8, 10, 0.96), rgba(8, 4, 5, 0.96));
  border: 1px solid rgba(255, 36, 56, 0.4);
  border-left: 3px solid var(--t-red);
  border-radius: 2px;
  box-shadow: 0 0 40px rgba(255, 36, 56, 0.15);
}
.screen .brand { color: var(--t-red); font-family: var(--t-font); font-weight: 600; letter-spacing: 0.3em; }
.screen h1 { font-family: var(--t-font); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.screen .primary, .screen .ghost-btn, #resume-lock .primary {
  border-radius: 2px;
  font-family: var(--t-font);
  font-size: 16px;
  letter-spacing: 0.3em;
  border-color: var(--t-red);
}
.screen .primary, #resume-lock .primary { background: linear-gradient(180deg, #c3162a, #8a0d1b); box-shadow: 0 0 18px rgba(255, 36, 56, 0.35); }
.screen .primary:hover { background: linear-gradient(180deg, #e01c32, #a0101f); }
.screen .brief li::marker { color: var(--t-red); }

/* --- Tester wall (Build 52). */
.sheet-card h2 small { font: 600 13px/1 var(--t-font); letter-spacing: 0.24em; color: var(--t-red); margin-left: 10px; vertical-align: middle; }
.wall-intro { margin: 0 0 12px; font-size: 14px; line-height: 1.35; color: #c9c3c4; }
.tester-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
  gap: 6px 14px;
  max-height: min(48vh, 420px);
  overflow-y: auto;
}
.tester-list li { display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); min-width: 0; }
.tester-list li.me { background: rgba(255, 36, 56, 0.12); }
.tester-list b { font: 600 15px/1.2 var(--t-font); letter-spacing: 0.06em; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.tester-list .diff { font: 600 10px/1 var(--t-font); letter-spacing: 0.18em; padding: 3px 5px; border: 1px solid currentColor; }
.tester-list .diff.easy { color: #6dff9a; }
.tester-list .diff.medium { color: #7ff0ff; }
.tester-list .diff.hard { color: #ff6b78; }
.tester-list time { font-size: 12px; color: #8d8587; white-space: nowrap; }
.tester-list li.muted { grid-column: 1 / -1; color: #c9c3c4; border: 0; font-size: 14px; }