/* ==================================================================
   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: var(--k-type-kicker, 10px);
  font-weight: 900;
  letter-spacing: var(--k-type-kicker-track, 0.14em);
  line-height: 1;
  text-transform: uppercase;
}

.hud-wave-num {
  color: #dffaff;
  font-size: 32px;
  font-weight: 900;
  line-height: 0.96;
  /* Dominant HUD number glow — integrity/combo yield when quiet */
  text-shadow: 0 0 10px rgba(67, 217, 255, 0.55), 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;
  font-weight: 900;
  line-height: 1;
  /* Number weight over glow — soft white lift only */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.hud-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  vertical-align: middle;
  /* Phase 4 glow budget: idle chrome stays quiet */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}
.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);
  /* One soft lift — not a second maxed cyan bloom on top of HUD glows */
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.52), 0 0 14px rgba(76, 201, 240, 0.28);
  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: var(--k-screen-pad-x, 16px);
  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: var(--k-screen-pad-y, 24px) var(--k-screen-pad-x, 16px) calc(var(--k-screen-pad-y, 24px) + 2px);
  text-align: center;
  border-radius: var(--k-screen-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 (Phase 1 — single lacquer console family) -------------
   One definition for primary / secondary / danger. Later blocks may size
   contextual controls (start shelf, pause width) but must not re-skin .btn. */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  min-width: min(240px, 100%);
  min-height: 56px; /* touch-friendly target — contract floor for primary CTAs */
  padding: var(--k-btn-pad-y, 13px) var(--k-btn-pad-x, 34px);
  overflow: hidden;
  border: 1px solid rgba(255, 232, 160, 0.95);
  border-radius: var(--k-btn-radius, 6px);
  color: #fff9e4;
  font-family: var(--kuriosi-ui-font, inherit);
  font-size: clamp(15px, 3vw, 20px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: none;
  text-shadow: 0 1px 0 rgba(255, 240, 180, 0.18), 0 2px 5px rgba(0, 0, 0, 0.95);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background:
    linear-gradient(180deg, rgba(255, 236, 180, 0.22) 0%, transparent 38%),
    linear-gradient(90deg, rgba(255, 222, 132, 0.22), transparent 14% 86%, rgba(255, 222, 132, 0.18)),
    linear-gradient(180deg, #c9422c 0%, #8f1a12 42%, #4a0a0c 78%, #2a0508 100%);
  box-shadow: var(--k-shadow-btn);
  transition:
    transform var(--k-press-ms, 90ms) var(--k-ease-out, ease),
    filter 180ms ease,
    box-shadow 180ms ease;
}
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3px;
  border: 1px solid rgba(255, 226, 140, 0.38);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 240, 200, 0.08), transparent 40%);
  box-shadow: inset 0 0 0 1px rgba(20, 2, 6, 0.35);
  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.32), transparent);
  pointer-events: none;
  transition: left 360ms ease;
}
.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1) saturate(1.1);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.7),
    0 2px 0 rgba(255, 236, 180, 0.2),
    0 0 28px rgba(255, 82, 48, 0.4),
    inset 0 0 0 2px rgba(28, 4, 8, 0.82),
    inset 0 1px 0 rgba(255, 248, 214, 0.55);
}
.btn:hover::after { left: 112%; }
.btn:active { transform: translateY(1px) scale(var(--k-press-scale, 0.98)); }
.btn:focus-visible {
  outline: 3px solid var(--kuriosi-cyan, #35dfff);
  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, 230, 140, 1);
  color: #fff9e0;
  background:
    linear-gradient(180deg, rgba(255, 240, 190, 0.28) 0%, transparent 36%),
    linear-gradient(90deg, rgba(255, 221, 119, 0.24), transparent 14% 86%, rgba(255, 221, 119, 0.2)),
    linear-gradient(180deg, #e05330 0%, #a41f14 42%, #52090c 78%, #2e0508 100%);
  box-shadow: var(--k-shadow-btn-primary);
}
/* Secondary / navigation: quieter cyan instrument chips so primary keeps focus. */
.btn-secondary,
.start-continue-btn,
.start-help-btn {
  border-color: rgba(90, 230, 255, 0.78);
  color: #e8fcff;
  background:
    linear-gradient(180deg, rgba(120, 230, 255, 0.16) 0%, transparent 40%),
    linear-gradient(90deg, rgba(50, 218, 255, 0.14), transparent 14% 86%, rgba(50, 218, 255, 0.12)),
    linear-gradient(180deg, rgba(16, 42, 72, 0.99), rgba(4, 14, 30, 0.99) 55%, rgba(1, 6, 16, 1) 100%);
  box-shadow: var(--k-shadow-btn-secondary);
  text-shadow: 0 1px 0 rgba(180, 245, 255, 0.12), 0 2px 5px rgba(0, 0, 0, 0.9);
}
.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; }

/* Lacquer menu icons — embossed instrument sockets, not flat emoji glyphs. */
.btn-with-icon {
  gap: 10px;
  justify-content: center;
  padding-inline: clamp(12px, 2.4vw, 22px);
}
.btn-with-icon .btn-ico {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: clamp(30px, 5.6vw, 36px);
  height: clamp(30px, 5.6vw, 36px);
  padding: 5px;
  object-fit: contain;
  border-radius: 9px;
  border: 1px solid rgba(255, 224, 140, 0.72);
  background:
    radial-gradient(ellipse at 32% 28%, rgba(120, 230, 255, 0.22), transparent 55%),
    linear-gradient(160deg, rgba(18, 42, 72, 0.98), rgba(2, 8, 18, 0.99) 62%, rgba(0, 3, 10, 1));
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 0 10px rgba(53, 223, 255, 0.18),
    inset 0 1px 0 rgba(200, 250, 255, 0.28),
    inset 0 -2px 4px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(0, 4, 12, 0.55);
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  pointer-events: none;
}
.btn-with-icon .btn-label {
  min-width: 0;
  line-height: 1.1;
}
.start-help-btn.btn-with-icon,
.start-row .btn-with-icon {
  gap: 8px;
  padding-inline: clamp(10px, 2vw, 16px);
}
.start-help-btn.btn-with-icon .btn-ico {
  width: clamp(28px, 5.2vw, 32px);
  height: clamp(28px, 5.2vw, 32px);
  padding: 4px;
  border-radius: 8px;
}
.screen-menu .btn-with-icon {
  width: min(350px, 94%);
  justify-content: flex-start;
  padding-left: clamp(16px, 3vw, 22px);
}
.home-stage .btn-with-icon .btn-ico {
  width: clamp(28px, 5vw, 32px);
  height: clamp(28px, 5vw, 32px);
  padding: 4px;
}
/* Primary CTA icons (Start Game) keep gold-rim sockets. */
.btn-primary.btn-with-icon .btn-ico,
.start-btn.btn-with-icon .btn-ico {
  border-color: rgba(255, 220, 120, 0.85);
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255, 220, 120, 0.28), transparent 52%),
    linear-gradient(160deg, rgba(72, 22, 18, 0.98), rgba(18, 4, 8, 0.99) 65%, rgba(8, 2, 4, 1));
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(255, 120, 60, 0.22),
    inset 0 1px 0 rgba(255, 236, 180, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(30, 4, 8, 0.55);
}

@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);
  }
}

/* ---- 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: var(--k-screen-gap, 12px); }
.is-short .screen {
  padding:
    var(--k-space-4, 16px)
    var(--k-space-5, 20px)
    calc(var(--k-space-4, 16px) + 2px);
}
.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: var(--k-screen-pad-y, 24px) var(--k-screen-pad-x, 16px) calc(var(--k-screen-pad-y, 24px) + 4px);
  border-radius: var(--k-screen-radius, 18px);
  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;
}

/* Pass-3 button re-skin removed — Phase 1 canonical lacquer family owns .btn. */

@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;
}

/* Combo hangs just under the score plate (hud-right), not overlapping it.
   Percentages are of the width-capped .hud-bar frame (combo is a child of it). */
.hud-combo {
  top: auto !important;
  bottom: -6px !important;
  right: 12.8% !important;
  left: auto !important;
  transform: none !important;
  padding: 0 !important;
  font-size: clamp(8px, 1.9cqw, 13px) !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-align: right !important;
  color: #ff6a38 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow:
    0 0 8px rgba(255, 80, 40, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.85) !important;
  white-space: nowrap !important;
  z-index: 2 !important;
  pointer-events: 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);
}

/* Intermediate .btn-primary shadow override removed — uses --k-shadow-btn-primary. */

@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 / danger skins live with the Phase 1 button family above.
   Contextual size tweaks for menu rows only: */
.screen-menu .btn-secondary {
  font-size: clamp(15px, 3.6vw, 19px);
  min-height: 50px;
  padding: 12px 30px;
}

/* 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(var(--k-press-scale, 0.98)); }
.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: var(--k-screen-gap-tight, 8px);
  margin-top: var(--k-space-4, 16px);
}
.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: var(--k-type-sm, 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)); }

/* Both identity mounts are top-corner overlays sitting on the key art, and the
   original rule below (max-width: 560px) suppressed the full-width
   "Sign in with Google" button there so it could not cover the logo. That
   concern is not width-specific — the same button covers the wordmark in
   landscape once the mount is actually pinned to the corner — and suppressing
   it alone is exactly what left a phone with no visible sign-in control at all,
   because the anonymous chip then rendered as nothing but a name.
   So the full button stays suppressed in these two mounts at every width, and
   the chip carries the Google-branded control itself (.meta-chip-signin: G mark
   + "Sign in" on Google's white surface). One branded control, corner-sized,
   never over the logo. .meta-google-btn keeps its styles for any future mount
   that has room for the full-width form. */
#home-profile .meta-google-btn,
#start-profile .meta-google-btn { display: none; }
@media (max-width: 560px) {
  /* Phone: the compact home card is the primary action surface. Drop the
     anonymous placeholder name — it tells a first-time player nothing — so the
     avatar + "Sign in" pill fits the corner down to 320px. */
  #home-profile,
  #start-profile { top: calc(8px + env(safe-area-inset-top, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); }
  #home-profile .meta-profile-chip,
  #start-profile .meta-profile-chip { max-width: 52vw; min-height: 44px; }
  #home-profile .meta-profile-anon,
  #start-profile .meta-profile-anon { max-width: min(240px, 70vw); }
  #home-profile .meta-profile-anon .meta-chip-name,
  #start-profile .meta-profile-anon .meta-chip-name { display: none; }
  #home-profile .meta-chip-avatar,
  #start-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;
  /* Phase 6 living home: slight scale so drift/pointer parallax has room */
  transform: scale(1.06) translate(
    calc(var(--home-px, 0) * 10px),
    calc(var(--home-py, 0) * 8px)
  );
  transform-origin: center center;
  will-change: transform, background-position;
  animation: home-parallax-drift 22s ease-in-out infinite;
}

@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 home-parallax-drift {
  0%, 100% {
    background-position: 50% 48%, 50% 48%;
  }
  50% {
    background-position: 52% 51%, 52% 51%;
  }
}
#screen-layer.screen-state-title.home-parallax-live::before {
  transition: transform 120ms var(--k-ease-out, ease-out);
}
@media (prefers-reduced-motion: reduce) {
  #screen-layer.screen-state-title::before {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}
html.prefers-reduced-motion #screen-layer.screen-state-title::before {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

@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: var(--k-screen-pad-y) var(--k-screen-pad-x);
  border: 2px solid var(--kuriosi-gold);
  border-radius: var(--k-screen-radius);
  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: var(--k-space-2, 8px);
  margin-top: var(--k-space-4, 16px);
}
.screen-menu .btn {
  width: min(350px, 94%);
  min-height: 50px;
  margin-top: 0;
  font-size: clamp(15px, 2.6vw, 18px);
}
.screen-menu .result-sub {
  margin-bottom: 2px;
  font-size: clamp(13px, 2.4vw, 16px);
}

/* 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;
}

/* Button family is defined once above (Phase 1). Launch/shelf sizing only. */

/* Launch and loading screens keep the approved full-bleed art dominant while
   grounding controls on a restrained console shelf. */
#start-layer {
  /* One column for every launch control — Start, Continue, 2-up rows, How to Play.
     Earlier rules used three different min-widths (340 / 310 / 420) which is why
     the shelf looked "slightly off" on phone. */
  --start-shelf-w: min(360px, 88vw);
  isolation: isolate;
  gap: clamp(6px, 1.1vh, 10px);
  padding-inline: max(14px, env(safe-area-inset-left, 0px));
  /* Keep the shelf tight under the hero; long empty footer felt unfinished. */
  padding-bottom: calc(clamp(14px, 3.2vh, 36px) + 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);
}
/* Lift the start layer's controls above #start-layer::before.
   #start-profile is excluded deliberately. It is the absolutely positioned
   top-corner identity mount declared at "Phase 6: start-layer meta row +
   profile chip mount" above, and this blanket rule carries exactly the same
   specificity (one ID) while sitting later in the sheet — so it silently won,
   turned the mount back into a flex item of the bottom-aligned column, and
   dropped `z-index: 2` to 1. That is why the sign-in chip rendered mid-screen
   inside the button stack instead of in the corner. The mount already
   establishes its own stacking context via `position: absolute; z-index: 2`,
   so it needs nothing from this rule; narrowing the selector is the fix, not
   an `!important` on either side. */
#start-layer > *:not(#start-profile) { 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); }
}
/* Shared shelf column: every control is exactly --start-shelf-w. */
#start-layer .start-btn-bounce,
#start-layer .start-continue-btn,
#start-layer .start-row,
#start-layer #start-help-btn,
#start-layer .start-loading {
  width: var(--start-shelf-w);
  max-width: 100%;
  box-sizing: border-box;
}
#start-layer .start-btn {
  width: 100%;
  min-width: 0;
  min-height: 60px;
  padding: 15px 24px;
  font-size: clamp(19px, 3vw, 26px);
  letter-spacing: 0.09em;
}
#start-layer .start-continue-btn {
  min-width: 0;
  min-height: 48px;
  padding: 11px 20px;
  font-size: clamp(14px, 2.2vw, 18px);
}
#start-layer .start-row {
  justify-content: center;
  gap: 8px;
}
.start-help-btn {
  min-height: 48px;
  margin-top: 2px;
  padding: 10px 16px;
  border-radius: var(--k-btn-radius, 6px);
  font-size: clamp(13px, 2.2vw, 16px);
  letter-spacing: 0.03em;
  text-transform: none;
}
#start-layer .start-row .start-help-btn {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
#start-layer #start-help-btn {
  margin-top: 2px;
  min-width: 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 {
  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: var(--k-type-xs, 12px);
  font-weight: 900;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* Phase 4 — when COMBO is visible, integrity is secondary (one glow region).
   Class toggled from HUD.setCombo — avoid :has() so the CSS cascade test
   harness can still parse screens.css. */
.hud-bar.combo-active .hud-integrity-track:not(.danger) .hud-integrity-image {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55)) !important;
}

/* 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) {
  /* Keep the shared shelf width. Only stack the upper meta row; Packs+Badges
     stay 2-up so five full-width rows do not bury the painted hero. */
  #start-layer #start-row { flex-direction: column; }
  #start-layer #start-row .start-help-btn { width: 100%; flex: 0 0 auto; }
  #start-layer #start-row-meta { flex-direction: row; }
  #start-layer #start-row-meta .start-help-btn { width: auto; flex: 1 1 0; }
}
@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;
}

/* Phase 3 — screen overlay exit (paired with Screens.hideAll) */
#screen-layer.screen-active.screen-exiting {
  animation: k-screen-exit var(--k-overlay-exit-ms, 180ms) var(--k-ease-out, ease) both;
  pointer-events: none !important;
}
#screen-layer.screen-active.screen-exiting .screen {
  animation: k-screen-card-exit var(--k-overlay-exit-ms, 180ms) var(--k-ease-out, ease) both;
}
@keyframes k-screen-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes k-screen-card-exit {
  from { transform: scale(1) translateY(0); opacity: 1; }
  to { transform: scale(0.96) translateY(10px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #screen-layer.screen-active.screen-exiting,
  #screen-layer.screen-active.screen-exiting .screen {
    animation: none !important;
  }
}
html.prefers-reduced-motion #screen-layer.screen-active.screen-exiting,
html.prefers-reduced-motion #screen-layer.screen-active.screen-exiting .screen {
  animation: none !important;
}

/* Phase 6 — level-clear stinger (tiny runtime mp4, fail-soft) */
.k-level-stinger {
  position: absolute;
  z-index: 6;
  top: 8px;
  right: 8px;
  width: min(168px, 38vw);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 214, 118, 0.72);
  border-radius: 6px;
  background: #020914;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.62),
    0 0 18px rgba(53, 223, 255, 0.22),
    inset 0 0 0 2px rgba(0, 2, 8, 0.72);
  opacity: 0;
  transform: translateY(-8px) scale(0.94);
  pointer-events: none;
  transition:
    opacity 220ms var(--k-ease-out, ease),
    transform 220ms var(--k-ease-out, ease);
}
.k-level-stinger.is-live {
  opacity: 1;
  transform: none;
}
.k-level-stinger.is-done {
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
}
.k-level-stinger.is-victory {
  width: min(210px, 46vw);
  top: 12px;
  right: 12px;
}
.k-level-stinger-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #020914;
}
@media (max-width: 380px) {
  .k-level-stinger { width: min(132px, 42vw); top: 6px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .k-level-stinger { display: none !important; }
}
html.prefers-reduced-motion .k-level-stinger { display: none !important; }


/* Phase: menu chrome density — Game Guide as premium instrument panel. */
.help-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px 16px 18px;
  max-height: min(92svh, 720px);
  max-height: min(92dvh, 720px);
}
.help-heading {
  margin-bottom: 2px;
  font-size: clamp(18px, 4.2vw, 24px);
  letter-spacing: 0.12em;
}
.help-section { margin-top: 10px; }
.help-section-title {
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.18em;
}
.help-lede {
  margin-bottom: 6px;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(220, 236, 255, 0.88);
}

/* PLAY chips — scannable grid instead of long bullet list */
.help-chip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.help-chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 9px;
  border-radius: var(--k-radius-sm, 6px);
  border: 1px solid rgba(53, 223, 255, 0.28);
  background:
    linear-gradient(160deg, rgba(53, 223, 255, 0.1), transparent 55%),
    rgba(1, 7, 18, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(180, 245, 255, 0.12),
    inset 0 0 0 1px rgba(0, 4, 12, 0.4);
}
.help-chip:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.help-chip-key {
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--kuriosi-cyan-soft, #bff8ff);
}
.help-chip-text {
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 700;
  color: #e8f0ff;
}

.howto-list { gap: 6px; }
.howto-key {
  min-width: 4.6em;
  padding: 4px 9px;
  border-radius: var(--k-radius-sm, 6px);
  font-size: 11px;
  letter-spacing: 0.08em;
  box-shadow: 0 0 10px rgba(53, 223, 255, 0.16), inset 0 0 0 1px rgba(53, 223, 255, 0.25);
}

.help-levers { gap: 5px; }
.help-lever {
  padding: 7px 9px;
  border-radius: var(--k-radius-sm, 6px);
  background:
    linear-gradient(90deg, rgba(53, 223, 255, 0.1), transparent 54%),
    rgba(1, 7, 18, 0.82);
  box-shadow: inset 0 0 0 1px rgba(53, 223, 255, 0.12);
}
.help-lever-desc {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
}

/* Bonuses: 2-up instrument tiles */
.help-bonus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.help-bonus {
  margin: 0;
  padding: 8px 8px 7px;
  border-radius: var(--k-radius-sm, 6px);
  border: 1px solid rgba(53, 223, 255, 0.22);
  background:
    linear-gradient(160deg, rgba(255, 200, 87, 0.06), transparent 50%),
    rgba(2, 8, 18, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 230, 160, 0.08);
}
.help-bonus + .help-bonus { margin-top: 0; }
.help-bonus-icon {
  width: 28px;
  height: 28px;
  padding: 3px;
  border-radius: 7px;
  border: 1px solid rgba(255, 220, 120, 0.45);
  background: linear-gradient(160deg, rgba(12, 28, 48, 0.95), rgba(2, 6, 14, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(180, 245, 255, 0.18),
    0 0 8px rgba(53, 223, 255, 0.14);
  filter: none;
}
.help-bonus-name { font-size: 13px; line-height: 1.2; }
.help-bonus-key {
  margin-left: 4px;
  padding: 0 6px;
  font-size: 10px;
}
.help-bonus-desc {
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.32;
  color: rgba(190, 210, 245, 0.92);
}
.help-close-btn { margin: 12px auto 0; min-width: min(200px, 100%); }

@media (max-width: 400px) {
  .help-chip-grid,
  .help-bonus-grid { grid-template-columns: 1fr; }
  .help-chip:last-child:nth-child(odd) { grid-column: auto; }
  .help-card { padding: 14px 12px 16px; }
}

/* help-card-polish marker */