/* The missing page is the court. Shared navigation and activity remain above it. */
body:has(#route-not-found:not([hidden])) { padding-bottom: var(--status-h, 32px); }
.main-layout:has(#route-not-found:not([hidden])) { min-height: 0; }
.aera-route-not-found {
  --nf-violet: #b99aff;
  --nf-cyan: #78dce8;
  --nf-watermark-size: min(44vw, 48dvh);
  position: fixed;
  inset: var(--aera-sticky-height, 56px) 0 var(--status-h, 32px);
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  color: var(--text);
  background: var(--ground-fill);
}
.aera-route-not-found[hidden], .aera-route-not-found [hidden] { display: none !important; }
.aera-route-not-found .nf-watermark {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 26px; margin: 0;
  color: var(--terminal-rule); pointer-events: none; user-select: none;
}
.nf-watermark > span { font: 900 var(--nf-watermark-size)/.76 var(--font-display); font-stretch: 75%; letter-spacing: -.04em; opacity: .65; }
.nf-watermark > small { color: var(--rule-bright); font: 500 .875rem/1.3 var(--font-display); font-stretch: 80%; letter-spacing: .22em; text-transform: uppercase; }
.nf-court { position: absolute; inset: 0; }
#nf-canvas { display: block; width: 100%; height: 100%; touch-action: none; outline-offset: -3px; }
#nf-canvas:focus-visible { outline: 1px solid var(--rule-bright); }
.aera-route-not-found[data-game-state="playing"] #nf-canvas,
.aera-route-not-found[data-game-state="serve"] #nf-canvas { cursor: none; }
.nf-score { position: absolute; left: clamp(16px, 3vw, 44px); display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.nf-score > span { color: var(--text-muted); font: 600 .6875rem/1.2 var(--font-display); font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; }
.nf-score > strong { font: 750 2.375rem/1 var(--font-display); font-stretch: 65%; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.nf-sentinel { top: 18px; color: var(--danger-soft); }
.nf-you { bottom: 46px; color: var(--positive); }
.nf-overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(var(--nf-watermark-size) * .46 + 34px)); text-align: center; }
#nf-start { position: relative; min-width: 156px; white-space: nowrap; color: var(--text); font: 700 .8125rem/1 var(--font-display); font-stretch: 85%; letter-spacing: .13em; text-transform: uppercase; border-color: var(--rule-strong); border-radius: 0; }
#nf-start::before, #nf-start::after { content: ""; position: absolute; width: 8px; height: 8px; border-color: var(--positive); border-style: solid; pointer-events: none; }
#nf-start::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
#nf-start::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
#nf-start svg { margin-left: 10px; vertical-align: -1px; }
#nf-overlay-title { color: var(--text-soft); font: 700 .875rem/1.4 var(--font-display); font-stretch: 75%; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 12px; white-space: nowrap; }
.nf-pause.btn { position: absolute; top: 8px; right: 12px; width: 44px; min-height: 44px; padding: 0; border-color: transparent; color: var(--text-muted); }
.nf-pause svg { vertical-align: middle; }
.nf-callout { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--nf-violet); font: 500 1.25rem/1 var(--font-display); pointer-events: none; }
.nf-hint, .nf-record { position: absolute; bottom: 14px; margin: 0; color: var(--text-muted); font: 600 .6875rem/1.2 var(--font-display); font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; pointer-events: none; }
.nf-hint { left: clamp(16px, 3vw, 44px); }
.nf-hint span[aria-hidden] { padding: 0 5px; }
.nf-record { right: clamp(16px, 3vw, 44px); font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.nf-record b { font-weight: 400; }
.nf-touch-help { display: none; }
.nf-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (pointer: coarse), (max-width: 760px) {
  .nf-desktop-help { display: none; }
  .nf-touch-help { display: inline; }
}
@media (max-width: 520px) {
  .aera-route-not-found { --nf-watermark-size: min(53vw, 38dvh); }
  .aera-route-not-found .nf-watermark { gap: 20px; }
  .nf-watermark > small { font-size: .75rem; letter-spacing: .08em; }
  .nf-score > strong { font-size: 1.875rem; }
  .nf-sentinel { top: 16px; }
  .nf-you { bottom: 44px; }
  .nf-hint, .nf-record { bottom: 12px; }
  .nf-record { max-width: 50%; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .aera-route-not-found { --nf-watermark-size: min(26vw, 20dvh); }
  .aera-route-not-found .nf-watermark { gap: 10px; bottom: 20%; }
  .nf-watermark > small { font-size: .6875rem; }
  .aera-route-not-found:has(#nf-overlay-title:not([hidden])) .nf-watermark > small { opacity: 0; }
  .nf-overlay { transform: translate(-50%, 32px); }
  #nf-overlay-title { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 10px; }
  .nf-score { flex-direction: row; align-items: center; gap: 8px; }
  .nf-score > strong { font-size: 1.5rem; }
  .nf-sentinel { top: 10px; }
  .nf-you { bottom: 34px; }
  .nf-hint, .nf-record { bottom: 8px; }
}