/* ==================================================================
   Agent D — HUD, toasts, and full-screen menus.
   Palette (from ARCHITECTURE.md §Style):
     space:  #0b0b2a / #141440   accents: coral #ff5a5f, gold #ffc857, cyan #4cc9f0
   All theming vars local to this file's owned overlays.
   ================================================================== */
:root {
  --ssm-space-1: #080a24;
  --ssm-space-2: #101442;
  --ssm-coral:   #ff5d6c;
  --ssm-gold:    #ffc857;
  --ssm-cyan:    #43d9ff;
  --ssm-purple:  #9b6cff;
  --ssm-ink:     #f4f7ff;
  --ssm-muted:   rgba(200, 210, 242, 0.78);
  --ssm-radius:  16px;
}

/* ------------------------------------------------------------------ *
 * HUD top bar  (#hud is pointer-events:none from base.css — keep it)
 * ------------------------------------------------------------------ */
.hud-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 108px;
  display: block;
  padding: 0;
  background: url("../assets/ui/runtime/top-hud-frame-v1.jpg") no-repeat center top;
  background-size: 100% auto;
  border-bottom: none;
  box-shadow: none;
}

.hud-left,
.hud-center,
.hud-right {
  position: absolute;
  min-width: 0;
}

.hud-left {
  left: 104px;
  top: 27px;
  width: 82px;
  height: 58px;
}

.hud-center {
  left: 207px;
  top: 2px;
  width: 318px;
  height: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hud-right {
  right: 102px;
  top: 28px;
  width: 92px;
  height: 58px;
  text-align: left;
}

.hud-wave {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 100%;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--ssm-ink);
  text-shadow: 0 1px 6px rgba(76, 201, 240, 0.5);
  white-space: nowrap;
  background: none;
  padding: 0;
}

.hud-wave-kicker,
.hud-score-kicker {
  color: rgba(225, 246, 255, 0.78);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.4px;
  line-height: 1;
}

.hud-wave-num {
  color: #dffaff;
  font-size: 32px;
  line-height: 0.96;
  text-shadow: 0 0 12px rgba(67, 217, 255, 0.9), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.hud-wave-max { display: none; }

/* On very narrow screens drop the " / 10" suffix so "Level N" always fits. */
@media (max-width: 400px) {
  .hud-wave-max { display: none; }
}

.hud-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  font-weight: 800;
  font-size: 18px;
  color: var(--ssm-gold);
  text-shadow: 0 1px 8px rgba(255, 200, 87, 0.6);
  white-space: nowrap;
  transform-origin: center;
  background: none;
  padding: 0;
}

.hud-score-num {
  color: #f7fbff;
  font-size: 20px;
  line-height: 1;
  text-shadow: 0 0 9px rgba(255, 255, 255, 0.55), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.hud-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 0 8px rgba(67, 217, 255, 0.45));
}
.hud-mini-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: -3px;
  margin-right: 5px;
}
.hud-score.bump { animation: hud-score-bump 0.28s ease-out; }
@keyframes hud-score-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.28); color: #fff; }
  100% { transform: scale(1); }
}

.hud-integrity-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #dffaff;
  text-shadow: 0 0 12px rgba(67, 217, 255, 0.9), 0 2px 5px rgba(0, 0, 0, 0.85);
}
.hud-integrity-track {
  position: relative;
  width: 262px;
  height: 58px;
  background: none;
}
.hud-integrity-fill {
  position: absolute;
  left: 0;
  top: 27px;
  height: 13px;
  width: 0%; /* set dynamically from JS */
  transform-origin: left center;
  transform: none;
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s ease, box-shadow 0.5s ease;
  opacity: 0.92;
}
.hud-integrity-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  transform: translateZ(0);
  filter: drop-shadow(0 0 7px rgba(45, 226, 255, 0.46));
  transition: filter 0.28s ease, opacity 0.28s ease;
}
.hud-integrity-track::after {
  content: "";
  position: absolute;
  inset: 9% 3% 11%;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 35%, rgba(255, 255, 255, 0.08) 62%, transparent),
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.28), transparent 24%);
  mix-blend-mode: screen;
  opacity: 0.5;
}
/* Subtle pulse when integrity is dangerously low (< 30). */
.hud-integrity-track.danger {
  animation: hud-danger-pulse 0.9s ease-in-out infinite;
}
.hud-integrity-track.danger .hud-integrity-image {
  filter: drop-shadow(0 0 10px rgba(255, 61, 44, 0.82)) saturate(1.12);
}
@keyframes hud-danger-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,90,95,0)); }
  50%      { filter: drop-shadow(0 0 8px rgba(255,90,95,0.85)); }
}

/* Combo badge — floats just below the bar, centered. */
.hud-combo {
  position: absolute;
  top: 68px;
  right: 103px;
  left: auto;
  transform: none;
  padding: 0;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0;
  color: #ff6a38;
  background: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  box-shadow: none;
}
.hud-combo::before { content: none; }
.hud-combo.hidden { display: none; }
.hud-combo-num { font-size: 16px; }
.hud-combo.pop { animation: hud-combo-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes hud-combo-pop {
  0%   { transform: scale(0.6) rotate(-6deg); }
  55%  { transform: scale(1.35) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ------------------------------------------------------------------ *
 * Toasts  (#toast-layer, pointer-events:none) — stack, float, fade
 * ------------------------------------------------------------------ */
#toast-layer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 120px;
}
.toast {
  padding: 10px 24px;
  border-radius: var(--ssm-radius);
  font-weight: 900;
  font-size: clamp(20px, 4.5vw, 30px);
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, rgba(76, 201, 240, 0.95), rgba(255, 90, 95, 0.9));
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.45), 0 0 22px rgba(76, 201, 240, 0.5);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  will-change: transform, opacity;
  animation: toast-life 1.6s ease-out forwards;
}
.toast.toast-status {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(var(--bar-bottom) + 10px);
  margin-inline: auto;
  width: min(calc(100% - 28px), 430px);
  padding: 8px 14px 9px;
  border-radius: 999px;
  font-size: clamp(13px, 3.6vw, 17px);
  line-height: 1.25;
  letter-spacing: 0.015em;
  color: #eafcff;
  background:
    linear-gradient(180deg, rgba(9, 28, 55, 0.97), rgba(3, 11, 27, 0.98)),
    #06152c;
  border: 1px solid rgba(255, 218, 126, 0.72);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.52),
    0 0 18px rgba(53, 223, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.72);
  animation-name: toast-status-life;
}
@keyframes toast-life {
  0%   { transform: translateY(24px) scale(0.5); opacity: 0; }
  15%  { transform: translateY(0) scale(1.12); opacity: 1; }
  28%  { transform: translateY(0) scale(1); opacity: 1; }
  70%  { transform: translateY(-18px) scale(1); opacity: 1; }
  100% { transform: translateY(-70px) scale(0.96); opacity: 0; }
}
@keyframes toast-status-life {
  0%   { transform: translateY(10px) scale(0.96); opacity: 0; }
  16%  { transform: translateY(0) scale(1); opacity: 1; }
  72%  { transform: translateY(-4px) scale(1); opacity: 1; }
  100% { transform: translateY(-18px) scale(0.985); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}
html.prefers-reduced-motion .toast {
  animation: none !important;
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------ *
 * Screen layer — title / wave complete / game over
 * base.css handles z-index & pointer-events:none; JS toggles auto.
 * ------------------------------------------------------------------ */
#screen-layer.screen-active {
  /* Fixed to the full viewport (base.css sets position:fixed;inset:0) so a
     title / level-complete / game-over screen fully occludes the fixed HUD and
     ability bars too. (Was position:relative, which confined it to the canvas.) */
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(90% 80% at 50% 20%, rgba(67, 217, 255, 0.16), transparent 45%),
    radial-gradient(110% 90% at 50% 12%, rgba(27, 35, 104, 0.72), rgba(5, 6, 23, 0.96));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: screen-fade-in 0.3s ease-out;
}
#screen-layer.screen-active::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--screen-art, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.44;
  pointer-events: none;
}
#screen-layer.screen-state-title { --screen-art: url("../assets/screens/title-home.svg"); }
#screen-layer.screen-state-win { --screen-art: url("../assets/screens/level-won.svg"); }
#screen-layer.screen-state-lose { --screen-art: url("../assets/screens/level-lost-game-over.svg"); }
#screen-layer.screen-state-victory { --screen-art: url("../assets/screens/final-victory.svg"); }
@keyframes screen-fade-in { from { opacity: 0; } to { opacity: 1; } }

.screen {
  position: relative;
  z-index: 1;
  width: min(560px, 92%);
  max-height: 94%;
  overflow-y: auto;
  padding: 28px 26px 30px;
  text-align: center;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(67, 217, 255, 0.08), transparent 36%, rgba(255, 200, 87, 0.08)),
    linear-gradient(180deg, rgba(27, 35, 104, 0.96), rgba(8, 10, 36, 0.98));
  border: 2px solid rgba(67, 217, 255, 0.46);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.58), 0 0 34px rgba(67, 217, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  animation: screen-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes screen-pop-in {
  0%   { transform: scale(0.82) translateY(18px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ---- Title screen -------------------------------------------------- */
.title-hero { display: flex; flex-direction: column; align-items: center; }
.title-mouse {
  width: 130px;
  height: auto;
  margin-bottom: 6px;
  filter: drop-shadow(0 6px 16px rgba(76, 201, 240, 0.5));
  animation: mouse-float 3.2s ease-in-out infinite;
}
@keyframes mouse-float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-10px) rotate(1.5deg); }
}

.title-logo-img {
  width: min(420px, 92%);
  height: auto;
  margin-top: -4px;
  filter: drop-shadow(0 8px 22px rgba(67, 217, 255, 0.28));
  animation: mouse-float 4s ease-in-out infinite;
}
.title-word {
  font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(120deg, var(--ssm-gold), var(--ssm-coral) 65%, #ffdf8e);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ssm-gold); /* fallback for no background-clip */
  filter: drop-shadow(0 3px 8px rgba(255, 90, 95, 0.45));
}
.title-word-1 { font-size: clamp(30px, 7vw, 46px); }
.title-word-2 { font-size: clamp(26px, 6vw, 40px); opacity: 0.95; }
.title-word-3 { font-size: clamp(34px, 8vw, 54px); }
.title-icons { -webkit-text-fill-color: initial; filter: none; }

.title-tagline {
  margin: 14px auto 4px;
  max-width: 420px;
  font-size: clamp(14px, 3.5vw, 18px);
  font-weight: 700;
  color: var(--ssm-cyan);
  text-shadow: 0 1px 6px rgba(76, 201, 240, 0.5);
}

.howto-card {
  margin: 18px auto;
  max-width: 440px;
  padding: 14px 18px;
  text-align: left;
  border-radius: 12px;
  background: rgba(5, 6, 23, 0.48);
  border: 1px solid rgba(67, 217, 255, 0.22);
  box-shadow: inset 0 0 22px rgba(67, 217, 255, 0.06);
}
.howto-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ssm-gold);
  margin-bottom: 8px;
}
.howto-list { margin: 0; padding: 0; list-style: none; }
.howto-list li {
  padding: 5px 0;
  font-size: clamp(13px, 3.2vw, 15px);
  color: var(--ssm-ink);
}
.howto-list li + li { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.howto-key {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 8px;
  font-weight: 800;
  background: rgba(76, 201, 240, 0.22);
  border: 1px solid rgba(76, 201, 240, 0.5);
  color: #dff6ff;
}
.howto-icon { display: inline-block; width: 1.4em; }
.howto-sep { opacity: 0.5; }

/* ---- Result screens (win / lose) ---------------------------------- */
.result-heading {
  font-size: clamp(24px, 6vw, 38px);
  font-weight: 900;
  line-height: 1.1;
  color: var(--ssm-gold);
  text-transform: uppercase;
  text-shadow: 0 3px 10px rgba(255, 200, 87, 0.5);
}
.screen-win .result-heading { animation: result-cheer 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes result-cheer {
  0%   { transform: scale(0.6) rotate(-4deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.result-heading-lose { color: var(--ssm-coral); text-shadow: 0 3px 12px rgba(255, 90, 95, 0.55); }
.result-sub {
  margin: 14px auto 4px;
  max-width: 440px;
  font-size: clamp(14px, 3.5vw, 17px);
  font-weight: 600;
  color: rgba(244, 247, 255, 0.9);
}

.result-mark {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(67, 217, 255, 0.28), rgba(8, 10, 36, 0.72) 62%);
  border: 2px solid rgba(67, 217, 255, 0.42);
  box-shadow: 0 0 30px rgba(67, 217, 255, 0.26), inset 0 0 24px rgba(255, 255, 255, 0.08);
}
.result-mark::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  border: 3px dashed rgba(255, 200, 87, 0.35);
  animation: result-mark-spin 12s linear infinite;
}
.result-mark img {
  max-width: 82%;
  max-height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
}
.result-mark-lose {
  background: radial-gradient(circle, rgba(255, 93, 108, 0.26), rgba(8, 10, 36, 0.74) 62%);
  border-color: rgba(255, 93, 108, 0.46);
}
@keyframes result-mark-spin {
  to { transform: rotate(360deg); }
}

.result-score {
  margin: 22px auto;
  padding: 14px 20px;
  display: inline-block;
  border-radius: var(--ssm-radius);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 200, 87, 0.4);
  box-shadow: inset 0 0 18px rgba(255, 200, 87, 0.12);
}
.result-score-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  color: rgba(238, 240, 255, 0.7);
}
.result-score-num {
  margin-top: 4px;
  font-size: clamp(30px, 8vw, 46px);
  font-weight: 900;
  color: var(--ssm-gold);
  text-shadow: 0 2px 12px rgba(255, 200, 87, 0.6);
}

/* ---- Victory screen ----------------------------------------------- */
.screen-victory {
  border-color: rgba(255, 200, 87, 0.6);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6), 0 0 60px rgba(255, 200, 87, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ---- Buttons ------------------------------------------------------- */
.btn {
  display: inline-block;
  margin-top: 6px;
  padding: 16px 40px;
  min-width: 200px;
  min-height: 56px; /* touch-friendly target */
  border-radius: 14px;
  font-family: inherit;
  font-weight: 900;
  font-size: clamp(18px, 4.5vw, 24px);
  letter-spacing: 0;
  color: #1a0a12;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--ssm-gold), var(--ssm-coral));
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 22px rgba(255, 90, 95, 0.5);
}
.btn-glow { animation: btn-glow-pulse 1.8s ease-in-out infinite; }
@keyframes btn-glow-pulse {
  0%, 100% { box-shadow: 0 6px 22px rgba(255, 90, 95, 0.5); }
  50%      { box-shadow: 0 6px 30px rgba(255, 200, 87, 0.85), 0 0 44px rgba(255, 200, 87, 0.4); }
}
.btn:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.08); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(76, 201, 240, 0.9), 0 6px 26px rgba(255, 90, 95, 0.5);
}

/* ---- Confetti (win screen) ---------------------------------------- */
.confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: 18px;
}
.confetti-bit {
  position: absolute;
  top: -12px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.9;
  animation: confetti-fall 2.4s linear infinite;
}
.confetti-coral { background: var(--ssm-coral); }
.confetti-gold  { background: var(--ssm-gold); }
.confetti-cyan  { background: var(--ssm-cyan); }
@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.95; }
  100% { transform: translateY(560px) rotate(540deg); opacity: 0; }
}

/* ---- Compact layout for short game areas (portrait phones, landscape) ----
   The letterboxed game-root can be as short as ~500px on a 375-wide phone, so a
   viewport-height media query wouldn't catch it. ui.js measures #screen-layer and
   sets .is-short / .is-tiny; we compact vertical rhythm so tall cards (title,
   victory) fit without internal scroll. Cards still scroll as a last resort. */
#screen-layer.is-short.screen-active { padding: 12px; }
.is-short .screen { padding: 16px 20px 18px; }
.is-short .title-mouse { width: 62px; margin-bottom: 2px; }
.is-short .title-logo-img { width: min(320px, 88%); }
.is-short .title-word-1 { font-size: clamp(22px, 6vw, 38px); }
.is-short .title-word-2 { font-size: clamp(18px, 5vw, 32px); }
.is-short .title-word-3 { font-size: clamp(24px, 7vw, 44px); }
.is-short .title-tagline { margin: 6px auto 2px; font-size: 13px; }
.is-short .howto-card { margin: 8px auto; padding: 8px 14px; }
.is-short .howto-list li { padding: 2px 0; font-size: 13px; }
.is-short .howto-title { margin-bottom: 4px; }
.is-short .result-sub { margin: 8px auto 2px; }
.is-short .result-score { margin: 12px auto; padding: 10px 18px; }
.is-short .btn { margin-top: 4px; padding: 12px 34px; min-height: 48px; }

/* Very short (landscape phones): hide the big hero image and howto detail so the
   essentials (logo, tagline, button) always fit. */
.is-tiny .title-mouse { display: none; }
.is-tiny .howto-card { display: none; }
.is-tiny .title-tagline { margin: 6px auto 8px; }
.is-tiny .result-sub { font-size: 13px; }
.is-tiny .result-mark { width: 72px; height: 72px; margin-bottom: 6px; }

/* ---- Reduced motion: honour user preference ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .title-mouse, .title-logo-img, .btn-glow, .hud-integrity-track.danger,
  .confetti-bit, .hud-combo.pop, .screen, #screen-layer.screen-active,
  .result-mark::before {
    animation: none !important;
  }
  .hud-integrity-image { transition: none !important; }
}

/* ------------------------------------------------------------------ *
 * Pass 3 premium arcade art integration.
 * ------------------------------------------------------------------ */
/* Overrides removed to allow cockpit top console vector SVG to display cleanly */

.hud-left,
.hud-right,
.hud-center {
  position: relative;
  z-index: 1;
}

.hud-wave,
.hud-score {
  min-height: 50px;
  padding: 7px 12px;
  border-radius: 6px;
  color: #f8fbff;
  text-transform: uppercase;
}

.hud-wave {
  text-shadow: 0 0 10px rgba(51, 229, 255, 0.68);
}

.hud-score {
  color: #ffdb69;
  text-shadow: 0 0 13px rgba(255, 201, 67, 0.72);
}

.hud-icon {
  width: 38px;
  height: 38px;
  padding: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(51, 229, 255, 0.24), rgba(4, 7, 18, 0.92) 68%);
  border: 2px solid rgba(219, 158, 48, 0.72);
}

.hud-integrity-label {
  margin-top: 0;
  font-size: 11px;
  color: #d9f8ff;
  text-shadow: 0 0 9px rgba(51, 229, 255, 0.64);
}

/* Removed to allow premium SVG meter and custom aspect-locked layout to render cleanly */

.hud-combo {
  top: calc(79px + env(safe-area-inset-top, 0px));
  padding: 9px 24px 8px;
  border-radius: 6px;
  color: #fff5d0;
  background:
    linear-gradient(135deg, rgba(252, 64, 38, 0.94), rgba(104, 15, 18, 0.98)),
    #5a1116;
  border: 2px solid rgba(255, 208, 86, 0.88);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.58), 0 0 22px rgba(255, 73, 50, 0.58), inset 0 1px 0 rgba(255, 244, 194, 0.36);
}

#screen-layer.screen-active {
  background:
    radial-gradient(circle at 50% 62%, rgba(33, 219, 255, 0.2), transparent 24%),
    linear-gradient(180deg, rgba(1, 4, 13, 0.9), rgba(2, 5, 16, 0.98));
}

#screen-layer.screen-active::before {
  opacity: 0.62;
  filter: saturate(1.26) contrast(1.08);
}

.screen {
  width: min(600px, 92%);
  padding: 24px 24px 28px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 205, 77, 0.11), transparent 28%, rgba(51, 229, 255, 0.08)),
    linear-gradient(180deg, rgba(8, 16, 36, 0.94), rgba(2, 6, 17, 0.98));
  border: 3px solid rgba(207, 145, 42, 0.86);
  box-shadow:
    0 22px 66px rgba(0, 0, 0, 0.74),
    0 0 42px rgba(51, 229, 255, 0.24),
    inset 0 0 0 3px rgba(1, 4, 12, 0.84),
    inset 0 1px 0 rgba(255, 239, 184, 0.24);
}

.screen::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(51, 229, 255, 0.28);
  border-radius: 4px;
  pointer-events: none;
}

.title-mouse {
  width: 124px;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(51, 229, 255, 0.46));
}

.title-mouse-animated {
  width: clamp(112px, 18vw, 156px);
  aspect-ratio: 1;
  object-fit: contain;
}

.title-logo-img {
  width: min(430px, 96%);
  margin-top: -8px;
  filter: drop-shadow(0 11px 20px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 18px rgba(51, 229, 255, 0.48));
}

.title-tagline,
.result-sub {
  color: #e7faff;
  text-shadow: 0 0 10px rgba(51, 229, 255, 0.36);
}

.howto-card,
.result-score {
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(51, 229, 255, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(2, 8, 21, 0.82), rgba(0, 2, 8, 0.9));
  border: 2px solid rgba(207, 145, 42, 0.52);
  box-shadow: inset 0 0 28px rgba(51, 229, 255, 0.08), 0 0 18px rgba(0, 0, 0, 0.28);
}

.howto-title,
.result-score-label {
  color: #ffdc68;
  text-shadow: 0 0 8px rgba(255, 207, 75, 0.42);
}

.howto-key {
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(34, 218, 255, 0.28), rgba(5, 14, 32, 0.8));
  border-color: rgba(51, 229, 255, 0.72);
}

.result-heading {
  color: #ffdc68;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.64), 0 0 18px rgba(255, 207, 75, 0.62);
}

.result-heading-lose {
  color: #ff5d4e;
  text-shadow: 0 0 18px rgba(255, 73, 50, 0.72);
}

.result-mark {
  background:
    radial-gradient(circle, rgba(51, 229, 255, 0.3), rgba(8, 17, 35, 0.92) 62%);
  border: 3px solid rgba(207, 145, 42, 0.78);
}

.result-mark .result-hero-anim {
  width: 96%;
  height: 96%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.btn {
  border-radius: 7px;
  color: #fff5d0;
  text-transform: uppercase;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
}

.btn-primary {
  background:
    linear-gradient(180deg, rgba(255, 215, 102, 0.95), rgba(169, 47, 31, 0.95) 36%, rgba(84, 13, 17, 0.98)),
    #7d171b;
  border: 2px solid rgba(255, 233, 154, 0.86);
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.52), 0 0 24px rgba(255, 73, 50, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

@media (max-width: 480px) {
  .hud-bar { min-height: 72px; padding-left: 8px; padding-right: 8px; }
  .hud-bar::before,
  .hud-bar::after { opacity: 0.54; width: 116px; }
  .hud-wave,
  .hud-score { font-size: 15px; padding-inline: 4px; }
  .hud-icon { width: 30px; height: 30px; }
  .hud-integrity-track { width: min(210px, 40vw); }
  .hud-integrity-label { font-size: 9px; letter-spacing: 1px; }
}

@media (max-height: 760px) {
  .screen {
    padding: 16px 22px 18px;
    max-height: 92vh;
  }

  .title-mouse {
    width: 88px;
    margin-bottom: 0;
  }

  .title-logo-img {
    width: min(350px, 92%);
    margin-top: -14px;
  }

  .title-tagline {
    margin: 6px auto 2px;
    font-size: 14px;
  }

  .howto-card {
    margin: 10px auto;
    padding: 9px 14px;
  }

  .howto-list li {
    padding: 2px 0;
    font-size: 13px;
  }

  .btn {
    min-height: 48px;
    padding: 11px 34px;
    font-size: 18px;
  }
}

/* ------------------------------------------------------------------ *
 * Pass 3 chrome polish: lacquer panels, brass bevels, observatory glass.
 * ------------------------------------------------------------------ */
/* Overrides removed to allow cockpit capsules and capsules borders to render cleanly */

.hud-wave-num,
.hud-score-num {
  color: #fff0a4;
  text-shadow: 0 0 12px rgba(255, 207, 75, 0.72);
}

.hud-center {
  padding-top: 2px;
}

/* Removed late-file overrides to allow premium SVG meter styles to shine */

.hud-combo {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.toast {
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(255, 216, 101, 0.98), rgba(232, 71, 43, 0.96) 48%, rgba(98, 14, 18, 0.98)),
    #7e171c;
  border-color: rgba(255, 235, 165, 0.86);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.62),
    0 0 28px rgba(255, 78, 52, 0.48),
    inset 0 0 0 2px rgba(57, 5, 8, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ------------------------------------------------------------------ *
 * Raster v1 HUD integration. Keep this after legacy chrome overrides.
 * ------------------------------------------------------------------ */
/* Phase 4 (Agent LAYOUT): the frame now EXACTLY fills its reserved band
   (var(--hud-h)) — no dead gap on phones, no edge-to-edge stretch on desktop.
   Its width is capped to ~7.1x its height (the art's ~6.93:1 native aspect) and
   centered, so on a 1920 monitor it becomes a tidy centered console instead of a
   288px-tall banner. .hud-bar carries the container context so its % children
   (left/center/right, integrity, combo) scale with the FRAME width via cqw. */
.hud-bar {
  top: var(--safe-top, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--hud-h) !important;
  width: min(100%, calc(var(--hud-h) * 7.1)) !important;
  margin-inline: auto !important;
  min-height: 0 !important;
  display: block !important;
  padding: 0 !important;
  container-type: inline-size;
  background: url("../assets/ui/runtime/top-hud-frame-v1.jpg") no-repeat center / 100% 100% !important;
}

.hud-left,
.hud-center,
.hud-right {
  position: absolute !important;
  z-index: 1;
  min-width: 0 !important;
}

.hud-left {
  left: 14.44% !important;
  top: 25% !important;
  width: 11.39% !important;
  height: 53.7% !important;
}

.hud-center {
  left: 28.75% !important;
  top: 1.85% !important;
  width: 44.17% !important;
  height: 79.63% !important;
  padding-top: 0 !important;
}

.hud-right {
  right: 14.17% !important;
  top: 25.93% !important;
  width: 12.78% !important;
  height: 53.7% !important;
}

.hud-wave,
.hud-score {
  min-height: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}

.hud-wave-num {
  color: #dffaff !important;
  font-size: clamp(18px, 4.45cqw, 32px) !important;
  line-height: 0.96 !important;
  text-shadow: 0 0 12px rgba(67, 217, 255, 0.9), 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.hud-score-num {
  color: #f7fbff !important;
  font-size: clamp(11px, 2.78cqw, 20px) !important;
  line-height: 1 !important;
  text-shadow: 0 0 9px rgba(255, 255, 255, 0.55), 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.hud-integrity-label {
  height: 27.91% !important;
  margin-top: 0 !important;
  font-size: clamp(8px, 1.95cqw, 14px) !important;
  letter-spacing: clamp(1.4px, 0.42cqw, 3px) !important;
}

.hud-integrity-track {
  width: 100% !important;
  height: 67.44% !important;
  background: none !important;
  overflow: visible !important;
}

.hud-wave-kicker,
.hud-score-kicker {
  font-size: clamp(6px, 1.25cqw, 9px) !important;
  letter-spacing: clamp(0.8px, 0.2cqw, 1.4px) !important;
}

.hud-integrity-fill {
  display: none !important;
}

.hud-integrity-image {
  inset: 0 !important;
}

.hud-combo {
  top: 62.96% !important;
  right: 14.31% !important;
  left: auto !important;
  transform: none !important;
  padding: 0 !important;
  font-size: clamp(7px, 1.8cqw, 13px) !important;
  color: #ff6a38 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.screen {
  background:
    linear-gradient(135deg, rgba(255, 215, 103, 0.14), transparent 26%, rgba(51, 229, 255, 0.09)),
    radial-gradient(circle at 50% 0, rgba(51, 229, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(12, 24, 43, 0.96), rgba(1, 5, 14, 0.99));
}

.screen::after {
  content: "";
  position: absolute;
  inset: -14px 42px auto;
  height: 28px;
  border-radius: 0 0 18px 18px;
  background:
    linear-gradient(180deg, rgba(255, 216, 101, 0.9), rgba(98, 14, 18, 0.96));
  border: 2px solid rgba(255, 227, 139, 0.74);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  pointer-events: none;
}

.title-tagline {
  max-width: 460px;
}

.howto-card {
  position: relative;
}

.howto-card::before,
.result-score::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(51, 229, 255, 0.18);
  border-radius: 3px;
  pointer-events: none;
}

.result-score {
  position: relative;
}

.screen-lose {
  border-color: rgba(255, 84, 58, 0.88);
  box-shadow:
    0 22px 66px rgba(0, 0, 0, 0.74),
    0 0 44px rgba(255, 73, 50, 0.28),
    inset 0 0 0 3px rgba(1, 4, 12, 0.84),
    inset 0 1px 0 rgba(255, 202, 176, 0.22);
}

.btn-primary {
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.56),
    0 0 26px rgba(255, 73, 50, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -4px 0 rgba(68, 7, 10, 0.42);
}

@media (max-width: 480px) {
  .hud-bar {
    min-height: 78px;
    gap: 6px;
  }

/* Responsive integrity overrides removed */

  .screen::after {
    inset-inline: 36px;
  }
}

/* ------------------------------------------------------------------ *
 * Raster v1 result screens: observatory reward / breach cards.
 * ------------------------------------------------------------------ */
#screen-layer.screen-state-win::before,
#screen-layer.screen-state-victory::before,
#screen-layer.screen-state-lose::before {
  background:
    linear-gradient(180deg, rgba(2, 8, 20, 0.15), rgba(2, 4, 12, 0.72)),
    url("../assets/ui/runtime/observatory-banner-v1.jpg") center 16% / min(1200px, 120vw) auto no-repeat,
    url("../assets/ui/runtime/shield-horizon-banner-v1.jpg") center bottom / min(1200px, 120vw) auto no-repeat,
    url("../assets/ui/runtime/deep-space-banner-v1.jpg") center top / cover no-repeat;
  opacity: 0.92;
  filter: saturate(1.12) contrast(1.04);
}

.screen.screen-result {
  width: min(690px, 92vw) !important;
  max-height: min(92vh, 720px) !important;
  overflow: hidden !important;
  padding: clamp(14px, 2.5vw, 18px) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(255, 220, 104, 0.16), transparent 30%, rgba(51, 229, 255, 0.12)),
    radial-gradient(circle at 50% 0, rgba(51, 229, 255, 0.28), transparent 42%),
    linear-gradient(180deg, rgba(4, 14, 28, 0.96), rgba(1, 4, 12, 0.98)) !important;
  border: 3px solid rgba(218, 162, 62, 0.92) !important;
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.74),
    0 0 46px rgba(51, 229, 255, 0.26),
    inset 0 0 0 3px rgba(0, 2, 8, 0.78),
    inset 0 1px 0 rgba(255, 239, 184, 0.28) !important;
}

.screen.screen-result::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(91, 232, 255, 0.34);
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}

.screen.screen-result::after {
  inset: -9px 76px auto !important;
  height: 24px !important;
  z-index: 3;
}

.screen-result > * {
  position: relative;
  z-index: 2;
}

.result-art-card {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 202;
  margin: 0 auto clamp(10px, 1.8vw, 16px);
  border-radius: 6px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.48),
    0 0 32px rgba(51, 229, 255, 0.16);
  overflow: hidden;
}

.result-art-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 235, 155, 0.16), transparent 20%, transparent 80%, rgba(255, 80, 50, 0.16)),
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.18), transparent 28%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.result-art-card::before {
  position: absolute;
  left: 50%;
  bottom: 7.5%;
  transform: translateX(-50%);
  min-width: 190px;
  text-align: center;
  color: #ffe17a;
  font-size: clamp(10px, 1.7vw, 14px);
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 216, 101, 0.68), 0 2px 5px rgba(0, 0, 0, 0.92);
  z-index: 1;
}

.result-art-win,
.result-art-victory {
  background-image: url("../assets/ui/runtime/result-victory-card-v1.jpg");
}

.result-art-win::before {
  content: "Observatory Secured";
}

.result-art-victory::before {
  content: "Full Clear Secured";
}

.result-art-lose {
  background-image: url("../assets/ui/runtime/result-breach-card-v1.jpg");
}

.result-art-lose::before {
  content: "Observatory Breached";
  color: #ff7358;
  text-shadow: 0 0 10px rgba(255, 73, 50, 0.8), 0 2px 5px rgba(0, 0, 0, 0.92);
}

.screen-result > .result-mark {
  position: absolute;
  top: clamp(30px, 5vw, 48px);
  right: clamp(28px, 6vw, 58px);
  width: clamp(74px, 12vw, 98px);
  height: clamp(74px, 12vw, 98px);
  margin: 0;
  z-index: 4;
  border-color: rgba(255, 226, 128, 0.9);
  background:
    radial-gradient(circle, rgba(51, 229, 255, 0.34), rgba(5, 13, 28, 0.92) 62%);
  box-shadow:
    0 0 26px rgba(51, 229, 255, 0.38),
    0 0 18px rgba(255, 216, 101, 0.24),
    inset 0 0 18px rgba(255, 255, 255, 0.12);
}

.screen-result > .result-mark img {
  max-width: 86%;
  max-height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.58));
}

.screen-result > .result-mark .result-hero-anim {
  width: 96%;
  height: 96%;
  max-width: none;
  max-height: none;
}

.screen-result .result-heading {
  margin: 0 auto;
  font-size: clamp(28px, 5.4vw, 46px);
  line-height: 0.98;
  letter-spacing: 0;
}

.screen-result .result-sub {
  max-width: 560px;
  margin: clamp(8px, 1.4vw, 12px) auto clamp(14px, 2vw, 18px);
  color: #e9fbff;
  font-size: clamp(15px, 2.2vw, 20px);
  font-weight: 800;
}

.result-actions {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(10px, 2vw, 16px);
}

.screen-result .result-score {
  flex: 0 0 clamp(150px, 24vw, 210px);
  margin: 0;
  padding: clamp(10px, 2vw, 16px);
}

.screen-result .result-score-num {
  font-size: clamp(38px, 7vw, 64px);
  line-height: 0.95;
}

.screen-result .btn {
  flex: 1 1 300px;
  min-height: clamp(64px, 8vw, 84px);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(22px, 3.6vw, 34px);
}

.screen-victory .result-art-card {
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.5),
    0 0 42px rgba(255, 216, 101, 0.28),
    0 0 34px rgba(51, 229, 255, 0.2);
}

.screen-lose .result-art-card {
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.54),
    0 0 42px rgba(255, 73, 50, 0.3);
}

@media (max-width: 620px) {
  .result-actions {
    flex-direction: column;
  }

  .screen-result .result-score,
  .screen-result .btn {
    flex-basis: auto;
  }

  .screen-result > .result-mark {
    top: 28px;
    right: 28px;
  }
}

/* ============================================================
   Pre-boot start screen (director, 2026-07-08)
   Full-bleed art + "Start Game". The ONLY animation here is the
   button glow (btn-glow) and a small bounce — nothing else moves.
   ============================================================ */
#start-layer {
  position: fixed;
  inset: 0;
  z-index: 60; /* above every game overlay (screen-layer is 40) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-bottom: calc(clamp(30px, 9vh, 110px) + env(safe-area-inset-bottom, 0px));
  background: #06061a url("../assets/ui/start-bg-desktop.jpg") center / cover no-repeat;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
@media (orientation: portrait) {
  #start-layer { background-image: url("../assets/ui/start-bg-mobile.jpg"); }
}
#start-layer.start-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms ease;
}

/* Bounce lives on a wrapper so it never fights .btn's hover/active
   transforms; glow pulse stays on the button itself via .btn-glow. */
.start-btn-bounce { animation: start-btn-bounce 2.6s ease-in-out infinite; }
@keyframes start-btn-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.start-btn {
  font-size: clamp(20px, 3.2vw, 30px);
  padding: clamp(14px, 2.2vh, 20px) clamp(40px, 8vw, 76px);
  min-height: 48px;
  cursor: pointer;
}

/* "Continue — Level N": quieter sibling under Start Game, only rendered when
   saved progress exists (js/main.js unhides it and fills in the level). */
.start-continue-btn {
  font-size: clamp(15px, 2.2vw, 20px);
  padding: clamp(10px, 1.6vh, 14px) clamp(26px, 5vw, 44px);
  min-height: 48px;
  cursor: pointer;
  background: rgba(11, 11, 42, 0.72);
  border: 2px solid #4cc9f0;
  color: #4cc9f0;
  text-shadow: none;
}
.start-continue-btn[hidden] { display: none; }

/* Tiny privacy-policy link pinned under the start buttons. The glyph stays
   small, but the tappable box is centred inside the contract's 44px touch
   floor so the link is not the one sub-floor control on the start screen. */
.start-privacy-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font: 600 12px/1 'Baloo 2', 'Comic Sans MS', system-ui, sans-serif;
  letter-spacing: 0.08em;
  color: rgba(232, 236, 255, 0.55);
  text-decoration: none;
}
.start-privacy-link:hover { color: #4cc9f0; text-decoration: underline; }

/* Loading state: button is replaced by a draining-in-reverse progress bar. */
.start-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(420px, 78vw);
}
.start-loading[hidden] { display: none; }
.start-loading-track {
  width: 100%;
  height: clamp(14px, 2.2vh, 20px);
  border-radius: 999px;
  border: 2px solid rgba(255, 200, 87, 0.85);
  background: rgba(6, 6, 26, 0.72);
  box-shadow: 0 0 18px rgba(76, 201, 240, 0.35), inset 0 0 8px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.start-loading-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4cc9f0, #7ddcff);
  box-shadow: 0 0 12px rgba(76, 201, 240, 0.8);
}
.start-loading-label {
  font: 700 clamp(13px, 1.8vw, 16px) / 1 'Baloo 2', 'Comic Sans MS', system-ui, sans-serif;
  letter-spacing: 0.22em;
  color: #cfeaff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .start-btn-bounce { animation: none; }
}

/* ------------------------------------------------------------------ *
 * Game menu, home/help screens, HUD MENU button (director, 2026-07-08).
 * ------------------------------------------------------------------ */

/* Secondary action buttons (Continue / Retry / Guide / Quit): quieter cyan
   chips so the primary gold button keeps the spotlight. */
.btn-secondary {
  background: linear-gradient(180deg, rgba(27, 35, 104, 0.95), rgba(8, 10, 36, 0.98));
  border: 2px solid rgba(67, 217, 255, 0.55);
  color: #dffaff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 14px rgba(67, 217, 255, 0.2);
  font-size: clamp(15px, 3.6vw, 19px);
  min-height: 50px;
  padding: 12px 30px;
}
.btn-secondary.btn-danger {
  border-color: rgba(255, 93, 108, 0.6);
  color: #ffd9dd;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 14px rgba(255, 93, 108, 0.22);
}

/* Floating MENU button: top-right, just below the HUD bar, always tappable
   mid-level (it lives on #game-root, not the pointer-events:none #hud). The
   trivia backdrop (z 30) deliberately covers it — no menu during a question. */
.hud-menu-btn {
  position: absolute;
  top: calc(var(--bar-top) + 8px);
  right: calc(8px + env(safe-area-inset-right, 0px));
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 200, 87, 0.75);
  background: linear-gradient(180deg, rgba(27, 35, 104, 0.92), rgba(8, 10, 36, 0.95));
  color: #ffe9b0;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.14em;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
  touch-action: manipulation;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 200, 87, 0.25);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.hud-menu-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 200, 87, 0.45); }
.hud-menu-btn:active { transform: scale(0.96); }
.hud-menu-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.9); }
.hud-menu-icon { font-size: 14px; line-height: 1; }
@media (max-width: 480px) {
  .hud-menu-btn .hud-menu-label { display: none; } /* icon-only chip on phones */
  .hud-menu-btn { min-width: 44px; justify-content: center; padding: 7px 10px; }
}

/* ---- In-game pause menu card ---- */
.screen-menu .menu-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.screen-menu .btn { margin-top: 0; width: min(320px, 88%); }

/* ---- Game guide / bonuses overlay (#help-layer) ----
   Own top layer (above #start-layer's 60) so the same guide serves the
   pre-boot start screen, the in-game menu and the home screen. */
#help-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3vh 4vw;
  background: rgba(2, 4, 16, 0.78);
  backdrop-filter: blur(3px);
}
#help-layer.help-active { display: flex; }
.help-card {
  width: min(560px, 100%);
  max-height: 94svh;
  max-height: 94dvh;
  overflow-y: auto;
  padding: 22px 24px 24px;
  text-align: left;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(67, 217, 255, 0.08), transparent 36%, rgba(255, 200, 87, 0.08)),
    linear-gradient(180deg, rgba(27, 35, 104, 0.97), rgba(8, 10, 36, 0.99));
  border: 2px solid rgba(67, 217, 255, 0.46);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.6), 0 0 34px rgba(67, 217, 255, 0.22);
  animation: screen-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.help-heading {
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 900;
  text-align: center;
  color: #ffe9b0;
  text-shadow: 0 0 14px rgba(255, 200, 87, 0.45), 0 2px 6px rgba(0, 0, 0, 0.7);
}
.help-section { margin-top: 14px; }
.help-section-title {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.22em;
  color: #7ddcff;
  margin-bottom: 6px;
}
.help-bonus {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(6, 10, 34, 0.6);
  border: 1px solid rgba(67, 217, 255, 0.22);
}
.help-bonus + .help-bonus { margin-top: 8px; }
.help-bonus-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(76, 201, 240, 0.45));
}
.help-bonus-name { font-weight: 900; font-size: 15px; color: #eef0ff; }
.help-bonus-key {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 200, 87, 0.6);
  background: rgba(255, 200, 87, 0.14);
  color: #ffe9b0;
  font-size: 11px;
  font-weight: 900;
  vertical-align: 1px;
}
.help-bonus-desc { margin-top: 2px; font-size: 13px; line-height: 1.45; color: #c9d2ff; }
.help-close-btn { display: block; margin: 18px auto 0; }

/* ---- "How to Play" on the pre-boot start screen ---- */
.start-help-btn {
  margin-top: 12px;
  min-width: 0;
  min-height: 44px;
  padding: 9px 26px;
  font-size: 15px;
  border-radius: 999px;
  border: 2px solid rgba(67, 217, 255, 0.6);
  background: rgba(8, 10, 36, 0.72);
  color: #dffaff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 14px rgba(67, 217, 255, 0.25);
}
.start-help-btn[hidden] { display: none; }

/* ---- Phase 6: start-layer meta row + profile chip mount ---- */
.start-row { display: flex; gap: 10px; align-items: center; }
.start-row[hidden] { display: none; }
.start-row .start-help-btn { margin-top: 0; }
#start-profile {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  z-index: 2;
}

/* Home screen: two-per-row meta buttons under the primary actions. */
.home-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.home-row .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; }
#home-profile { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); }
@media (max-width: 560px) {
  /* The compact home card is the primary action surface. Keep the anonymous
     chip usable without letting a second full Google button cover the logo. */
  #home-profile .meta-google-btn { display: none; }
  #start-profile .meta-google-btn { display: none; }
  #home-profile { top: calc(8px + env(safe-area-inset-top, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); }
  #home-profile .meta-profile-chip { max-width: 52vw; min-height: 38px; }
  #home-profile .meta-chip-avatar { width: 27px; height: 27px; }
  #screen-layer.screen-state-title {
    align-items: flex-start;
    padding: calc(54px + env(safe-area-inset-top, 0px)) 8px 8px;
  }
  .screen-state-title .screen-title {
    width: 100%;
    max-height: calc(100dvh - 62px - env(safe-area-inset-top, 0px));
    padding: 14px 12px 16px;
  }
  .screen-state-title .title-mouse { width: 54px; margin-bottom: 0; }
  .screen-state-title .title-logo-img { width: min(270px, 82%); }
  .screen-state-title .title-tagline { margin: 6px auto 4px; font-size: 13px; line-height: 1.25; }
  .screen-state-title .screen-title > .btn,
  .screen-state-title .home-row { width: min(330px, 100%); }
  .screen-state-title .screen-title > .btn {
    min-height: 46px;
    padding: 10px 12px;
    font-size: clamp(15px, 4vw, 18px);
  }
  .screen-state-title .home-row {
    flex-direction: column;
    gap: 6px;
    margin: 0 auto;
  }
  .screen-state-title .home-row .btn {
    width: 100%;
    white-space: normal;
  }
}

/* ==================================================================
   Premium screens pass — one lacquer / brass / observatory system.
   This cascade-edge layer consolidates earlier visual passes without changing
   screen copy, callbacks, focus behavior, or DOM contracts.
   ================================================================== */

#screen-layer.screen-active {
  isolation: isolate;
  padding: clamp(12px, 3vw, 28px);
  background:
    radial-gradient(ellipse at 50% 45%, rgba(38, 216, 255, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(1, 5, 14, 0.72), rgba(0, 2, 7, 0.96));
  backdrop-filter: blur(7px) saturate(1.08);
  -webkit-backdrop-filter: blur(7px) saturate(1.08);
  animation: premium-screen-arrive 360ms ease-out both;
}

#screen-layer.screen-active::before {
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(1, 5, 15, 0.16), rgba(1, 4, 12, 0.76)),
    url("../assets/ui/runtime/observatory-banner-v1.jpg") center 68% / min(1200px, 130vw) auto no-repeat,
    url("../assets/ui/runtime/shield-horizon-banner-v1.jpg") center 82% / min(1200px, 130vw) auto no-repeat,
    url("../assets/ui/runtime/deep-space-banner-v1.jpg") center top / cover no-repeat;
  opacity: 1;
  filter: saturate(1.13) contrast(1.06);
}

#screen-layer.screen-active::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(67, 225, 255, 0.1) 50%, transparent 50.3%),
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(110, 226, 255, 0.018) 6px);
  box-shadow: inset 0 0 130px rgba(0, 0, 0, 0.82);
}

#screen-layer.screen-state-title::before {
  background:
    linear-gradient(180deg, rgba(0, 3, 10, 0.2), rgba(0, 3, 10, 0.75)),
    url("../assets/ui/start-bg-desktop.jpg") center / cover no-repeat;
}

@media (orientation: portrait) {
  #screen-layer.screen-state-title::before {
    background-image:
      linear-gradient(180deg, rgba(0, 3, 10, 0.16), rgba(0, 3, 10, 0.78)),
      url("../assets/ui/start-bg-mobile.jpg");
  }
}

@keyframes premium-screen-arrive {
  from { opacity: 0; filter: brightness(0.72); }
  to { opacity: 1; filter: brightness(1); }
}

.screen {
  --screen-accent: var(--kuriosi-cyan);
  width: min(600px, 94vw);
  max-height: min(92dvh, 800px);
  padding: clamp(22px, 4vw, 34px);
  border: 2px solid var(--kuriosi-gold);
  border-radius: 7px;
  color: #f4fbff;
  background:
    linear-gradient(135deg, rgba(255, 225, 143, 0.13), transparent 18% 77%, rgba(50, 225, 255, 0.1)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(9, 22, 39, 0.98), rgba(2, 7, 16, 0.99));
  box-shadow:
    var(--kuriosi-screen-shadow),
    0 0 42px rgba(53, 223, 255, 0.24),
    inset 0 0 0 4px rgba(0, 2, 8, 0.88),
    inset 0 0 0 5px rgba(255, 224, 133, 0.18),
    inset 0 1px 0 rgba(255, 246, 213, 0.38);
  scrollbar-color: rgba(54, 221, 255, 0.65) rgba(0, 0, 0, 0.2);
  animation: premium-console-deploy 520ms cubic-bezier(0.16, 0.88, 0.24, 1.12) both;
}

.screen::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 0;
  border: 1px solid rgba(53, 223, 255, 0.34);
  border-radius: 3px;
  pointer-events: none;
  box-shadow: inset 0 0 28px rgba(53, 223, 255, 0.045);
}

.screen::after {
  inset: -8px clamp(46px, 14%, 84px) auto;
  height: 18px;
  border: 1px solid rgba(255, 224, 138, 0.82);
  border-radius: 0 0 5px 5px;
  background:
    linear-gradient(90deg, transparent 6%, rgba(255, 224, 138, 0.6) 6% 8%, transparent 8% 92%, rgba(255, 224, 138, 0.6) 92% 94%, transparent 94%),
    linear-gradient(180deg, #a92b20, #35070a 72%);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 240, 190, 0.34);
}

.screen > * { position: relative; z-index: 1; }

@keyframes premium-console-deploy {
  0% { opacity: 0; transform: translateY(26px) scale(0.94); }
  58% { opacity: 1; transform: translateY(-3px) scale(1.008); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.screen-title {
  width: min(630px, 94vw);
  background:
    radial-gradient(circle at 50% 14%, rgba(45, 224, 255, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(255, 222, 125, 0.13), transparent 23% 78%, rgba(38, 217, 255, 0.09)),
    linear-gradient(180deg, rgba(6, 18, 34, 0.97), rgba(1, 6, 14, 0.99));
}

.title-hero { margin: -8px auto 2px; }
.title-mouse {
  width: clamp(116px, 22vw, 166px);
  margin-bottom: -4px;
  filter: drop-shadow(0 12px 15px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 16px rgba(45, 224, 255, 0.48));
  transform-origin: 50% 88%;
  animation: premium-hero-ready 3.2s ease-in-out 1.8s infinite;
}
.title-logo-img {
  width: min(470px, 94%);
  margin-top: -8px;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.64)) drop-shadow(0 0 14px rgba(52, 219, 255, 0.28));
  animation: none;
}
@keyframes premium-hero-ready {
  0%, 100% { transform: scale(1) rotate(-0.15deg); }
  50% { transform: scale(1.012, 1.006) rotate(0.15deg); }
}

.title-tagline,
.result-sub {
  color: #dff9ff;
  font-family: var(--kuriosi-ui-font);
  font-weight: 800;
  line-height: 1.38;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 12px rgba(51, 222, 255, 0.22);
}
.title-tagline { margin: 8px auto 12px; max-width: 490px; font-size: clamp(14px, 3vw, 18px); }

.screen-menu {
  width: min(520px, 94vw);
  padding: 0;
  overflow: hidden;
  --screen-accent: var(--kuriosi-cyan);
}
.screen-menu-content {
  position: relative;
  z-index: 1;
  max-height: calc(min(92dvh, 800px) - 4px);
  padding: clamp(22px, 4vw, 34px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(54, 221, 255, 0.65) rgba(0, 0, 0, 0.2);
}
.screen-menu .result-heading,
.result-heading {
  color: var(--kuriosi-gold-hot);
  font-family: var(--kuriosi-ui-font);
  font-weight: 900;
  letter-spacing: 0.035em;
  text-shadow: 0 3px 0 rgba(78, 36, 10, 0.72), 0 0 20px rgba(255, 205, 74, 0.46);
}
.screen-menu .result-heading { margin-top: 4px; }
.screen-menu .result-sub { max-width: 410px; margin-top: 8px; }
.screen-menu .menu-actions { gap: 9px; margin-top: 20px; }
.screen-menu .btn { width: min(350px, 94%); }

/* Approved responsive pause frame. The existing card remains the complete
   no-image fallback underneath; this non-interactive layer supplies only the
   high-fidelity nine-slice skin. The 190px source guides preserve every corner
   while the center and straight rails stretch to the live card geometry. */
.screen-menu::after {
  --pause-frame-slice: clamp(60px, 12vw, 82px);
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  box-sizing: border-box;
  height: auto;
  border: var(--pause-frame-slice) solid transparent;
  border-image-source: url("../assets/ui/runtime/pause-menu-nine-slice-v1.webp");
  border-image-slice: 190 fill;
  border-image-width: var(--pause-frame-slice);
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
}

/* Buttons are miniature control consoles: red lacquer for commitment and
   black/cyan for navigation. */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(240px, 100%);
  min-height: 54px;
  padding: 13px 34px;
  overflow: hidden;
  border: 1px solid rgba(255, 226, 143, 0.9);
  border-radius: 6px;
  color: #fff7dc;
  font-family: var(--kuriosi-ui-font);
  font-size: clamp(15px, 3vw, 20px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.92);
  background:
    linear-gradient(90deg, rgba(255, 222, 132, 0.2), transparent 12% 88%, rgba(255, 222, 132, 0.16)),
    linear-gradient(180deg, #b83825 0%, #7d160f 48%, #3a090b 100%);
  box-shadow:
    0 9px 22px rgba(0, 0, 0, 0.56), 0 0 18px rgba(255, 78, 48, 0.2),
    inset 0 0 0 2px rgba(34, 5, 8, 0.78), inset 0 1px 0 rgba(255, 245, 202, 0.38),
    inset 0 -4px 0 rgba(15, 2, 5, 0.42);
  transition: transform 150ms ease, filter 180ms ease, box-shadow 180ms ease;
}
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px;
  border: 1px solid rgba(255, 218, 118, 0.28);
  border-radius: 3px;
  pointer-events: none;
}
.btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -38%;
  width: 28%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.26), transparent);
  pointer-events: none;
  transition: left 360ms ease;
}
.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.12) saturate(1.08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.66), 0 0 25px rgba(255, 82, 48, 0.34), inset 0 0 0 2px rgba(34, 5, 8, 0.78), inset 0 1px 0 rgba(255, 245, 202, 0.48);
}
.btn:hover::after { left: 112%; }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn:focus-visible {
  outline: 3px solid var(--kuriosi-cyan);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(53, 223, 255, 0.22), 0 10px 28px rgba(0, 0, 0, 0.68);
}
.btn-primary {
  border-color: rgba(255, 224, 126, 0.98);
  color: #fff7d8;
  background:
    linear-gradient(90deg, rgba(255, 221, 119, 0.2), transparent 13% 87%, rgba(255, 221, 119, 0.18)),
    linear-gradient(180deg, #d24928 0%, #8b1c12 48%, #41080a 100%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.62), 0 0 26px rgba(255, 70, 43, 0.38), 0 0 12px rgba(255, 204, 74, 0.2), inset 0 0 0 2px rgba(47, 7, 8, 0.8), inset 0 1px 0 rgba(255, 246, 205, 0.46), inset 0 -4px 0 rgba(20, 2, 4, 0.5);
}
.btn-secondary,
.start-continue-btn,
.start-help-btn {
  border-color: rgba(75, 224, 255, 0.7);
  color: #dcfaff;
  background:
    linear-gradient(90deg, rgba(50, 218, 255, 0.12), transparent 12% 88%, rgba(50, 218, 255, 0.1)),
    linear-gradient(180deg, rgba(13, 35, 62, 0.98), rgba(3, 11, 25, 0.99));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.56), 0 0 18px rgba(53, 223, 255, 0.16), inset 0 0 0 2px rgba(0, 4, 12, 0.84), inset 0 1px 0 rgba(177, 245, 255, 0.22);
}
.btn-secondary.btn-danger {
  border-color: rgba(255, 84, 61, 0.84);
  color: #ffd8ce;
  background: linear-gradient(180deg, rgba(73, 18, 23, 0.98), rgba(22, 5, 10, 0.99));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.58), 0 0 18px rgba(255, 65, 45, 0.18), inset 0 0 0 2px rgba(13, 1, 4, 0.84);
}
.btn-glow { animation: premium-primary-breathe 2.5s ease-in-out infinite; }
@keyframes premium-primary-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.1); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.64), 0 0 30px rgba(255, 71, 42, 0.48), 0 0 16px rgba(255, 213, 91, 0.3), inset 0 0 0 2px rgba(47, 7, 8, 0.8); }
}

/* Launch and loading screens keep the approved full-bleed art dominant while
   grounding controls on a restrained console shelf. */
#start-layer {
  isolation: isolate;
  gap: 9px;
  padding-inline: max(14px, env(safe-area-inset-left, 0px));
  padding-bottom: calc(clamp(20px, 5.5vh, 68px) + env(safe-area-inset-bottom, 0px));
}
#start-layer::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 48%, rgba(0, 3, 9, 0.18) 62%, rgba(0, 3, 10, 0.9) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(40, 219, 255, 0.16), transparent 42%);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.26);
}
#start-layer > * { position: relative; z-index: 1; }
.start-btn-bounce { animation: premium-launch-ready 2.8s ease-in-out infinite; }
@keyframes premium-launch-ready {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.start-btn { min-width: min(340px, 84vw); min-height: 60px; padding: 15px 48px; font-size: clamp(19px, 3vw, 26px); letter-spacing: 0.09em; }
.start-continue-btn { min-width: min(310px, 80vw); padding: 11px 30px; font-size: clamp(14px, 2.2vw, 18px); }
.start-row { width: min(520px, 94vw); justify-content: center; gap: 8px; }
.start-help-btn { min-height: 44px; margin-top: 4px; padding: 9px 20px; border-radius: 5px; font-size: clamp(12px, 2.1vw, 15px); letter-spacing: 0.025em; text-transform: none; }
.start-row .start-help-btn { flex: 1 1 0; }
.start-privacy-link { padding: 5px 10px; color: rgba(220, 244, 255, 0.66); font-family: var(--kuriosi-ui-font); text-shadow: 0 2px 6px #000; }
.start-loading {
  width: min(460px, 82vw);
  gap: 9px;
  padding: 13px 14px 10px;
  border: 1px solid rgba(218, 162, 61, 0.72);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(8, 20, 36, 0.92), rgba(1, 6, 15, 0.96));
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.68), inset 0 0 0 3px rgba(0, 2, 8, 0.72), 0 0 22px rgba(51, 221, 255, 0.16);
}
.start-loading-track {
  height: 18px;
  padding: 3px;
  border: 1px solid rgba(255, 224, 133, 0.82);
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(67, 220, 255, 0.08) 0 8%, transparent 8% 10%), #020914;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.9), 0 0 18px rgba(53, 223, 255, 0.16);
}
.start-loading-fill {
  border-radius: 1px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.38) 0 2px, transparent 2px 20px), linear-gradient(90deg, #1689b5, #31e5ff 72%, #e8ffff);
  box-shadow: 0 0 13px rgba(53, 223, 255, 0.88);
  transition: width 150ms ease-out;
}
.start-loading-label { color: #dffbff; font-family: var(--kuriosi-ui-font); font-size: 12px; font-weight: 900; letter-spacing: 0.28em; }

/* Approved raster result cards become cinematic headers. */
.screen.screen-result {
  --screen-accent: var(--kuriosi-cyan);
  width: min(700px, 94vw) !important;
  max-height: min(94dvh, 760px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-radius: 7px !important;
  animation: premium-result-deploy 580ms cubic-bezier(0.18, 0.9, 0.23, 1.1) both;
}
.screen.screen-result.screen-lose { --screen-accent: var(--kuriosi-danger); }
@keyframes premium-result-deploy {
  0% { opacity: 0; transform: translateY(30px) scale(0.95); filter: brightness(0.6); }
  62% { opacity: 1; transform: translateY(-3px) scale(1.006); filter: brightness(1.12); }
  100% { opacity: 1; transform: none; filter: brightness(1); }
}
.result-art-card { animation: premium-result-art-reveal 720ms ease-out 120ms both; }
@keyframes premium-result-art-reveal {
  from { opacity: 0; transform: scale(1.025); filter: brightness(1.7) saturate(0.7); }
  to { opacity: 1; transform: scale(1); filter: brightness(1) saturate(1); }
}
.screen-result > .result-mark { overflow: visible; animation: premium-medallion-land 720ms cubic-bezier(0.18, 0.9, 0.23, 1.25) 180ms both; }
.screen-result > .result-mark::before { animation: result-mark-spin 18s linear infinite; }
@keyframes premium-medallion-land {
  from { opacity: 0; transform: translateY(-18px) rotate(-10deg) scale(0.58); }
  to { opacity: 1; transform: none; }
}
.screen-result .result-heading { margin-top: 2px; font-size: clamp(27px, 5.2vw, 44px); }
.screen-lose .result-heading,
.result-heading-lose { color: #ff735d; text-shadow: 0 3px 0 rgba(72, 6, 8, 0.82), 0 0 22px rgba(255, 66, 40, 0.56); }
.result-score {
  border: 1px solid rgba(221, 166, 62, 0.78);
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(53, 223, 255, 0.08), transparent 42%), linear-gradient(180deg, rgba(3, 13, 27, 0.94), rgba(0, 4, 11, 0.98));
  box-shadow: inset 0 0 0 3px rgba(0, 2, 8, 0.76), inset 0 0 22px rgba(53, 223, 255, 0.08);
}
.result-score-label { color: rgba(203, 243, 255, 0.72); font-family: var(--kuriosi-ui-font); font-weight: 900; }
.result-score-num { color: var(--kuriosi-gold-hot); }

/* Guide and menu chrome. */
#help-layer {
  background: linear-gradient(180deg, rgba(0, 3, 10, 0.82), rgba(0, 3, 10, 0.96)), url("../assets/ui/runtime/deep-space-banner-v1.jpg") center / cover no-repeat;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.help-card {
  border: 2px solid var(--kuriosi-gold);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(255, 224, 136, 0.11), transparent 24% 78%, rgba(53, 223, 255, 0.08)), linear-gradient(180deg, rgba(8, 21, 39, 0.99), rgba(1, 6, 15, 0.99));
  box-shadow: var(--kuriosi-screen-shadow), inset 0 0 0 4px rgba(0, 2, 8, 0.78), 0 0 36px rgba(53, 223, 255, 0.22);
  animation: premium-console-deploy 420ms cubic-bezier(0.16, 0.88, 0.24, 1.12) both;
}
.help-heading { color: var(--kuriosi-gold-hot); font-family: var(--kuriosi-ui-font); letter-spacing: 0.04em; text-transform: uppercase; }
.help-section-title { color: var(--kuriosi-cyan-soft); font-family: var(--kuriosi-ui-font); }
.help-bonus { border-color: rgba(53, 223, 255, 0.24); border-radius: 5px; background: linear-gradient(90deg, rgba(53, 223, 255, 0.06), transparent 54%), rgba(1, 7, 18, 0.75); }
.hud-menu-btn {
  border: 1px solid rgba(255, 220, 122, 0.86);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(18, 37, 60, 0.96), rgba(2, 10, 22, 0.98));
  color: #fff0bd;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.58), inset 0 0 0 2px rgba(0, 3, 9, 0.72), 0 0 14px rgba(53, 223, 255, 0.15);
}
.home-row { width: min(460px, 100%); margin-inline: auto; }

@media (max-width: 620px) {
  .screen { padding: 20px 16px 18px; }
  .screen::after { inset-inline: 54px; }
  .title-mouse { width: clamp(92px, 28vw, 132px); }
  .screen-title .btn { width: min(390px, 100%); }
  .home-row { gap: 7px; }
  .home-row .btn { flex-basis: 100%; }
  .result-actions { gap: 8px; }
  .screen-result .result-score { padding: 9px 12px; }
  .screen-result .btn { min-height: 56px; font-size: clamp(17px, 5vw, 23px); }
}
@media (max-width: 540px) {
  .start-row { flex-direction: column; width: min(330px, 88vw); }
  .start-row .start-help-btn { width: 100%; }
  .start-btn { min-width: min(320px, 86vw); }
}
@media (max-height: 720px) {
  #start-layer { gap: 6px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .start-btn { min-height: 52px; padding-block: 11px; }
  .start-help-btn { min-height: 44px; padding-block: 7px; }
  .start-privacy-link { padding-block: 2px; }
  .screen-title { padding-top: 16px; padding-bottom: 14px; }
  .screen-title .title-mouse { width: 78px; }
  .screen-title .title-logo-img { width: min(330px, 88%); }
  .screen-title .title-tagline { margin-block: 4px 7px; }
  .screen-title .btn { min-height: 45px; padding-block: 9px; }
  .screen-menu .menu-actions { gap: 6px; margin-top: 10px; }
  .screen-menu .btn { min-height: 44px; padding-block: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #screen-layer.screen-active,
  .screen,
  .title-mouse,
  .start-btn-bounce,
  .btn-glow,
  .result-art-card,
  .screen-result > .result-mark,
  .screen-result > .result-mark::before,
  .help-card { animation: none !important; }
  .btn, .btn::after, .start-loading-fill { transition: none !important; }
}

/* ==================================================================
   Home recomposition — the key art IS the title; the console is the UI.
   ------------------------------------------------------------------
   assets/ui/start-bg-{desktop,mobile}.jpg (see `#screen-layer.screen-state-title
   ::before` above) already contain the Kuriosi wordmark, the painted hero and
   the world — and both deliberately leave an empty arena floor across their
   lower third for controls. The old home ignored all of that: it painted an
   opaque ~600x800 console card dead centre — directly over the wordmark and the
   hero — and then redrew a second, smaller copy of BOTH inside it. That
   duplication is what "the artwork is being covered" meant.

   So home no longer paints a card. The art runs full-bleed, the DOM logo/hero
   drop out once the art is confirmed loaded (ui.js `home-art-ready`; they stay
   as the fail-soft title if a file 404s), and the actions ride the arena floor
   behind a scrim that fades UP into the painting instead of butting a hard card
   edge across it.

   The console's HEIGHT is the whole ballgame — it is exactly how much hero you
   lose — so the rows wrap to stay short:
     phone portrait  -> console bottom, 2-up rows, lands on the arena floor
     landscape phone -> console right, art zoomed + biased so the hero clears it
     desktop         -> console bottom, meta row goes 4-up => ~3 short rows
   ================================================================== */

/* Let the painting carry the mood: no full-bleed wash or blur over it. The
   ::before art rule already bakes in its own top-to-bottom darkening ramp, and
   the ::after vignette/scanlines still frame the edges. */
#screen-layer.screen-state-title.screen-active {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#screen-layer.screen-state-title #home-profile { z-index: 3; }

/* The card becomes a transparent stage. Beats the earlier
   `#screen-layer.screen-state-title .screen-title` sizing rules by coming last
   at equal specificity. */
#screen-layer.screen-state-title .home-stage {
  width: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
}
.screen-title.home-stage {
  --home-gap: clamp(6px, 1.1vh, 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: none;
}
/* Drop the console-card chrome (inner hairline + brass top tab). */
.screen-title.home-stage::before,
.screen-title.home-stage::after { content: none; }

/* The key art already shows this logo and a far larger hero, so the DOM pair
   would just be duplicates sitting on the painted originals. Hidden by DEFAULT
   (not on an "art loaded" class) so the normal path never flashes a second
   wordmark over the first while ui.js's probe resolves. */
.home-stage > .title-hero { display: none; }

/* Art genuinely missing -> ui.js sets `home-art-missing` and the DOM title
   returns, centred in the space above the console (auto block margins absorb
   the free space on both sides). */
#screen-layer.home-art-missing .home-stage > .title-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block: auto;
  padding: calc(clamp(48px, 8vh, 92px) + env(safe-area-inset-top, 0px)) 12px 0;
}

/* A scrim, not a panel. The long transparent top ramp is what removes the hard
   card edge that used to slice across the hero; the opaque foot is only as tall
   as the buttons actually need. */
.home-stage > .home-console {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.2vh, 12px);
  width: 100%;
  /* Fail-soft: if a future button set ever outgrows the viewport the console
     scrolls internally rather than clipping or scrolling the page. */
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding:
    clamp(26px, 6vh, 64px)
    calc(clamp(12px, 3vw, 24px) + env(safe-area-inset-right, 0px))
    calc(clamp(14px, 2.6vh, 26px) + env(safe-area-inset-bottom, 0px))
    calc(clamp(12px, 3vw, 24px) + env(safe-area-inset-left, 0px));
  background: linear-gradient(
    180deg,
    rgba(2, 7, 18, 0) 0%,
    rgba(2, 7, 18, 0.55) 30%,
    rgba(1, 4, 12, 0.88) 62%,
    rgba(0, 2, 8, 0.96) 100%
  );
}

.home-stage .title-tagline {
  margin: 0 auto;
  max-width: 460px;
  font-size: clamp(13px, 2.6vw, 17px);
}

.home-stage .home-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--home-gap);
  width: min(520px, 100%);
}

.home-stage .home-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--home-gap);
  width: 100%;
  margin: 0;
}
/* Percentage bases wrap DETERMINISTICALLY (a content-width basis gave a ragged
   3+1 split on tablets): 2-up here, 4-up once the desktop console widens. */
.home-stage .home-row > .btn {
  flex: 1 1 calc(50% - var(--home-gap) / 2);
  min-width: 0;
  width: auto;
  white-space: normal;
}

/* 48px floor holds at every size in the matrix; the CTA stays dominant. */
.home-stage .btn {
  margin-top: 0;
  min-width: 0;
  min-height: 48px;
  padding: clamp(9px, 1.4vh, 14px) 12px;
  font-size: clamp(15px, 1.4vh + 0.6vw, 19px);
}
.home-stage .home-cta {
  width: 100%;
  min-height: clamp(52px, 7vh, 62px);
  font-size: clamp(19px, 2.1vh + 0.7vw, 26px);
}
.home-stage .home-row-meta > .btn {
  font-size: clamp(13px, 1.1vh + 0.5vw, 16px);
}

/* ---- Landscape phones --------------------------------------------------
   Stacking the console under the art here would leave the hero ~25% of the
   height, which is why the old rule "fixed" landscape by deleting the hero
   (`.is-tiny .title-mouse { display: none }`). Go two-column instead: console
   right, art zoomed 165% and biased so the painted hero sits clear in the left
   third. (At 812x375 the desktop art cover-fits with no horizontal slack, so a
   bare background-position could not move the hero — the zoom is what creates
   the room to shift it.) */
@media (orientation: landscape) and (max-height: 520px) {
  #screen-layer.screen-state-title::before {
    background-size: auto 165%;
    background-position: 92% 34%;
  }
  .screen-title.home-stage {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
  }
  /* Matches the `#screen-layer.home-art-missing ...` specificity above, or the
     fallback title would keep that rule's portrait padding in landscape. */
  #screen-layer.home-art-missing .home-stage > .title-hero {
    margin: auto;
    padding: 0 12px;
  }
  .home-stage > .home-console {
    width: min(56%, 420px);
    justify-content: center;
    padding-top: clamp(10px, 3vh, 18px);
    padding-left: clamp(20px, 5vw, 44px);
    background: linear-gradient(
      90deg,
      rgba(2, 7, 18, 0) 0%,
      rgba(2, 7, 18, 0.62) 24%,
      rgba(1, 4, 12, 0.9) 58%,
      rgba(0, 2, 8, 0.96) 100%
    );
  }
  .home-stage .home-actions { width: 100%; }
  .home-stage .btn { font-size: clamp(13px, 3.2vh, 17px); }
  .home-stage .home-cta { min-height: 48px; font-size: clamp(16px, 4.2vh, 21px); }
}
/* Under ~400px tall the tagline yields first — the hero and the buttons both
   earn their space more than the strapline does. */
@media (orientation: landscape) and (max-height: 400px) {
  .home-stage .title-tagline { display: none; }
}

/* ---- Desktop -----------------------------------------------------------
   Widen the console so the meta row goes 4-up. That collapses it to ~3 short
   rows, so the painted hero keeps his head, torso, cape and blade — only his
   boots and the arena floor go behind the console, which reads as him standing
   behind it rather than being cropped by a card. */
@media (min-width: 1024px) and (orientation: landscape) {
  .home-stage .home-actions { width: min(760px, 92%); }
  .home-stage .home-row > .btn { flex-basis: calc(25% - var(--home-gap) * 3 / 4); }
  .home-stage > .home-console { padding-top: clamp(48px, 9vh, 96px); }
  .home-stage .home-cta { width: min(420px, 100%); align-self: center; }
}

/* High contrast: the art is now visible behind the copy, so deepen the scrim
   and harden the text rather than relying on the painting staying dark. */
html.high-contrast-mode .home-stage > .home-console {
  background: linear-gradient(
    180deg,
    rgba(0, 2, 8, 0) 0%,
    rgba(0, 2, 8, 0.86) 22%,
    rgba(0, 1, 5, 0.98) 60%,
    rgba(0, 0, 3, 1) 100%
  );
}
html.high-contrast-mode .home-stage .title-tagline,
html.high-contrast-mode .home-stage .btn {
  text-shadow: 0 2px 6px #000, 0 0 2px #000;
}

/* ==================================================================
   Game Guide — scoring levers + boss explainer.
   Compact, scannable rows; every number is derived in ui.js from config.js /
   experience.js. Must stay readable and scroll cleanly at 320px wide.
   ================================================================== */
.help-lede {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: #dceaff;
}
.help-levers { display: flex; flex-direction: column; gap: 6px; }
.help-lever {
  padding: 7px 9px;
  border-radius: 5px;
  border: 1px solid rgba(53, 223, 255, 0.24);
  background: linear-gradient(90deg, rgba(53, 223, 255, 0.06), transparent 54%), rgba(1, 7, 18, 0.75);
}
.help-lever-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.help-lever-tag {
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #7ddcff;
}
.help-lever-value {
  font-weight: 900;
  font-size: 14px;
  color: #ffdc68;
  text-shadow: 0 0 8px rgba(255, 207, 75, 0.35);
}
.help-lever-desc {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #c9d2ff;
}
.help-notes {
  margin: 8px 0 0;
  padding-left: 17px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.help-notes li {
  font-size: 12.5px;
  line-height: 1.45;
  color: #c9d2ff;
}
.help-notes li::marker { color: #7ddcff; }

/* ==================================================================
   Saved accessibility preferences — DOM chrome only.
   These selectors intentionally live behind the persisted root classes so
   standard presentation and Phaser rendering remain unchanged. Scrollable
   cards keep their existing height contracts when copy grows.
   ================================================================== */
html.large-text-mode .hud-wave-num {
  font-size: clamp(20px, 4.8cqw, 34px) !important;
}
html.large-text-mode .hud-score-num {
  font-size: clamp(13px, 3.08cqw, 22px) !important;
}
html.large-text-mode .hud-wave-kicker,
html.large-text-mode .hud-score-kicker {
  font-size: clamp(7px, 1.45cqw, 10px) !important;
}
html.large-text-mode .hud-integrity-label {
  font-size: clamp(9px, 2.15cqw, 15px) !important;
}
html.large-text-mode .hud-combo {
  font-size: clamp(8px, 2cqw, 14px) !important;
}
html.large-text-mode .hud-menu-btn {
  min-width: 44px;
  min-height: 44px;
  font-size: 14px;
}
html.large-text-mode .screen-menu .result-sub,
html.large-text-mode .screen-result .result-sub {
  font-size: clamp(16px, 4vw, 20px);
  line-height: 1.45;
}
html.large-text-mode .screen-menu .btn,
html.large-text-mode .screen-result .btn {
  min-height: 48px;
  font-size: clamp(17px, 4.2vw, 22px);
  white-space: normal;
}
html.large-text-mode .screen-menu-content {
  overflow-y: auto;
}
html.large-text-mode .result-score-label {
  font-size: 14px;
}
html.large-text-mode .help-section-title {
  font-size: 14px;
  letter-spacing: 0.16em;
}
html.large-text-mode .howto-list li,
html.large-text-mode .help-lede,
html.large-text-mode .help-bonus-desc,
html.large-text-mode .help-lever-desc,
html.large-text-mode .help-notes li {
  font-size: clamp(14px, 3.5vw, 16px);
}
html.large-text-mode .help-bonus-name,
html.large-text-mode .help-lever-value {
  font-size: clamp(16px, 3.8vw, 18px);
}
html.large-text-mode .help-bonus-key,
html.large-text-mode .help-lever-tag {
  font-size: 13px;
}
html.large-text-mode .result-sub,
html.large-text-mode .help-card,
html.large-text-mode .help-bonus-body,
html.large-text-mode .help-lever,
html.large-text-mode .help-notes {
  overflow-wrap: anywhere;
}

html.high-contrast-mode #screen-layer.screen-active,
html.high-contrast-mode #help-layer {
  background-color: rgba(0, 0, 0, 0.97);
}
html.high-contrast-mode .screen-menu,
html.high-contrast-mode .screen-result,
html.high-contrast-mode .help-card {
  color: #fff;
  border-color: #ffe08a;
  background: #020711;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #8eefff;
}
html.high-contrast-mode .screen-menu::after {
  content: none;
}
html.high-contrast-mode .result-sub,
html.high-contrast-mode .result-score-label,
html.high-contrast-mode .help-lede,
html.high-contrast-mode .help-bonus-desc,
html.high-contrast-mode .help-lever-desc,
html.high-contrast-mode .help-notes li {
  color: #fff;
  text-shadow: 0 2px 4px #000;
}
html.high-contrast-mode .hud-wave-kicker,
html.high-contrast-mode .hud-score-kicker,
html.high-contrast-mode .hud-integrity-label,
html.high-contrast-mode .hud-wave-num,
html.high-contrast-mode .hud-score-num {
  color: #fff !important;
  text-shadow: 0 2px 4px #000, 0 0 6px #000 !important;
}
html.high-contrast-mode .help-bonus,
html.high-contrast-mode .help-lever,
html.high-contrast-mode .result-score {
  color: #fff;
  border-color: #8eefff;
  background: #000;
}
html.high-contrast-mode .btn-secondary,
html.high-contrast-mode .hud-menu-btn {
  color: #fff;
  border-color: #8eefff;
  background: #020711;
  text-shadow: 0 2px 4px #000;
}
html.high-contrast-mode .btn-primary {
  color: #fff;
  border-color: #fff0a8;
  background: #7a1717;
  text-shadow: 0 2px 4px #000;
}
html.high-contrast-mode .btn:focus-visible,
html.high-contrast-mode .hud-menu-btn:focus-visible,
html.high-contrast-mode .help-close-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}