/* Core Run HUD. Layout and game states only: colors, type, spacing, borders and the shared
   component recipes come from the Space Wars 3 design system (shared/ui/hud-tokens.css first,
   shared/ui/hud-components.css last; apps/space-wars/docs/hud-design-system.md). The --cr-* names
   below are aliases of --hud-* tokens, never a second palette. */
:root{
  --safe-left:env(safe-area-inset-left, 0px); --safe-right:env(safe-area-inset-right, 0px);
  --cr-bg:var(--hud-surface-canvas);
  --cr-panel:var(--hud-surface-glass);
  --cr-inset:var(--hud-surface-inset);
  --cr-border:var(--hud-border-subtle);
  --cr-edge:var(--hud-edge-glow);
  --cr-text:var(--hud-text);
  --cr-muted:var(--hud-text-muted);
  --cr-accent:var(--hud-accent);
  --cr-focus:var(--hud-focus);
  --cr-danger:var(--hud-danger);
  --cr-good:var(--hud-health);
  --safe-left:env(safe-area-inset-left, 0px); --safe-right:env(safe-area-inset-right, 0px);
  --safe-top:env(safe-area-inset-top, 0px); --safe-bottom:env(safe-area-inset-bottom, 0px);
}
/* Never double-tap zoom: sticks, canvases and the HUD override this with touch-action:none.
   engine/touch-zoom.js also blocks the pinch and double-tap gestures Safari keeps to itself. */
*{ box-sizing:border-box; touch-action:manipulation; }
html,body{ margin:0; height:100%; overflow:hidden; background:var(--cr-bg); color:var(--cr-text); font:var(--hud-text-body)/1.35 var(--hud-font-body); user-select:none; -webkit-user-select:none; touch-action:none; }
[hidden]{ display:none !important; }
#crGame{ position:fixed; inset:0; width:100vw; height:100vh; display:block; image-rendering:pixelated; }
body.is-running #crGame{ cursor:none; }
.cr-chrome{ background:var(--hud-surface-glass); border:var(--hud-border-hairline) solid var(--hud-border-subtle); border-radius:var(--hud-radius); box-shadow:var(--hud-shadow); backdrop-filter:blur(4px); }
.cr-muted{ color:var(--cr-muted); font-size:var(--hud-text-sm); }
.cr-accent{ color:var(--cr-accent); font:var(--hud-weight-strong) var(--hud-text-sm) var(--hud-font-label); }
.cr-label{ font:var(--hud-weight-label) var(--hud-text-sm)/var(--hud-leading) var(--hud-font-label); letter-spacing:var(--hud-tracking-label); text-transform:uppercase; }
.cr-kicker{ font:var(--hud-weight-label) var(--hud-text-xs)/var(--hud-leading) var(--hud-font-label); letter-spacing:.16em; text-transform:uppercase; color:var(--cr-edge); }
.cr-btn{ font:var(--hud-weight-label) var(--hud-text-sm)/1.2 var(--hud-font-label); letter-spacing:var(--hud-tracking-label); text-transform:uppercase; color:var(--hud-text); background:var(--hud-surface-control); border:var(--hud-border-hairline) solid var(--hud-border); border-radius:var(--hud-radius); padding:var(--hud-space-2) var(--hud-space-3); cursor:pointer; min-height:36px; transition:border-color var(--hud-motion-fast), color var(--hud-motion-fast), background-color var(--hud-motion-fast); }
.cr-btn:hover:not(:disabled){ border-color:var(--hud-focus); color:var(--hud-focus); }
.cr-btn:active:not(:disabled){ background:var(--hud-surface-inset); }
.cr-btn:disabled{ opacity:var(--hud-disabled-opacity); cursor:not-allowed; }
.cr-btn-ghost{ background:transparent; border-color:var(--hud-border-subtle); color:var(--cr-muted); } .cr-btn-xs{ min-height:28px; padding:var(--hud-space-1) var(--hud-space-2); font-size:var(--hud-text-xs); } .cr-btn-big{ font-size:var(--hud-text-body); padding:var(--hud-space-3) var(--hud-space-6); min-height:var(--hud-target); } .cr-btn-sq{ min-width:var(--hud-target); min-height:var(--hud-target); font-size:18px; }
.cr-btn.is-active{ background:var(--cr-accent); border-color:var(--cr-accent); color:var(--hud-text-on-accent); }
.cr-primary{ background:var(--hud-launch-bright); color:var(--hud-text-on-accent); border:var(--hud-border-width) solid var(--hud-launch-edge); box-shadow:var(--hud-launch-shadow); font-family:var(--hud-font-label); font-weight:var(--hud-weight-strong); letter-spacing:var(--hud-tracking-label); text-transform:uppercase; }
.cr-primary:hover:not(:disabled){ border-color:var(--hud-launch-light); color:var(--hud-text-on-accent); }
.cr-primary:active:not(:disabled){ box-shadow:var(--hud-launch-pressed); background:var(--hud-launch-bright); }
.cr-input{ font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body); color:var(--hud-text); background:var(--hud-surface-inset); border:var(--hud-border-hairline) solid var(--hud-border); border-radius:var(--hud-radius); padding:var(--hud-space-2) var(--hud-space-3); user-select:text; -webkit-user-select:text; }
.cr-input::placeholder{ color:var(--hud-text-muted); opacity:1; }
:focus-visible{ outline:var(--hud-border-width) solid var(--hud-focus); outline-offset:var(--hud-focus-offset); }
kbd{ font:var(--hud-weight-strong) var(--hud-text-xs) var(--hud-font-label); padding:1px 4px; border-radius:var(--hud-radius); background:var(--hud-surface-inset); border:var(--hud-border-hairline) solid var(--hud-border-subtle); color:var(--hud-text-muted); }

/* shelter */
.cr-title{ position:fixed; inset:0; display:grid; grid-template-rows:auto 1fr auto; gap:10px; padding:calc(12px + var(--safe-top)) 20px calc(12px + var(--safe-bottom)); background:
  radial-gradient(ellipse at 20% 20%, color-mix(in srgb, var(--hud-edge-glow) 14%, transparent), transparent 55%), radial-gradient(ellipse at 80% 70%, color-mix(in srgb, var(--hud-focus) 10%, transparent), transparent 55%),
  repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px), rgba(5,3,10,.96); z-index:30; overflow:auto; touch-action:auto; }
.cr-title-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; } .cr-langs{ display:flex; gap:4px; }
.cr-title-grid{ display:grid; grid-template-columns:minmax(300px, 420px) minmax(0, 1fr); gap:20px; max-width:1200px; width:100%; justify-self:center; align-items:start; }
.cr-hero-col{ display:grid; gap:12px; }
/* first visit: no shelter yet, so the one column sits centred; pieces pulse once when a run opens them */
.cr-title.is-first .cr-title-grid{ grid-template-columns:minmax(300px, 420px); justify-content:center; }
.cr-firstlinks{ display:flex; flex-wrap:wrap; gap:6px 16px; flex:1 1 100%; } .cr-firstlinks:not(:has(> :not([hidden]))){ display:none; }
.cr-link{ background:none; border:0; padding:4px 0; font:inherit; font-size:var(--hud-text-sm); color:var(--cr-muted); text-decoration:underline; cursor:pointer; } .cr-link:hover, .cr-link:focus-visible{ color:var(--cr-focus); }
[data-menu].is-new{ animation:crMenuNew 1.1s ease-in-out 3; }
@keyframes crMenuNew{ 50%{ box-shadow:0 0 0 2px var(--cr-focus), 0 0 18px var(--cr-focus); } }
@media (prefers-reduced-motion:reduce){ [data-menu].is-new{ animation:none; outline:2px solid var(--cr-focus); } }
.cr-logo{ font:800 64px/0.9 var(--hud-font-display); letter-spacing:.06em; margin:0; color:#fff; text-shadow:0 0 28px color-mix(in srgb, var(--hud-focus) 45%, transparent), 3px 3px 0 color-mix(in srgb, var(--hud-edge-glow) 55%, transparent); } .cr-logo span{ display:block; color:var(--cr-focus); }
.cr-tagline{ color:var(--cr-muted); margin:0; font-size:15px; }
.cr-pick{ display:grid; grid-template-columns:112px 1fr; gap:12px; padding:12px; align-items:center; }
.cr-pick canvas{ width:112px; height:112px; image-rendering:pixelated; background:radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--hud-focus) 25%, transparent), #1c1820 70%); border-radius:8px; border:1px solid var(--cr-border); }
.cr-pick h3{ margin:0; font:800 22px var(--hud-font-display); letter-spacing:.06em; } .cr-pick small{ color:var(--cr-muted); display:block; }
.cr-pick .cr-stat{ font-size:12px; color:var(--cr-muted); margin-top:6px; } .cr-pick .cr-ab{ margin-top:6px; font-size:12px; } .cr-pick .cr-ab b{ color:var(--cr-focus); }
.cr-heat{ padding:10px 12px; display:grid; gap:6px; }
.cr-heat-btns{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
.cr-heat-btns .cr-btn{ font:800 16px var(--hud-font-display); min-height:38px; } .cr-heat-btns .cr-btn.is-active{ background:linear-gradient(180deg, #ff8a3d, #b3401a); color:#fff; border-color:#ff8a3d; box-shadow:0 0 14px rgba(255,138,61,.5); }
.cr-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.cr-actions .cr-primary{ flex:1 1 100%; font-size:20px; padding:14px; }
.cr-seed{ flex-basis:100%; } .cr-input.is-bad{ border-color:var(--hud-danger, #ff4f6a); } .cr-endseed{ margin:0 auto 6px; letter-spacing:.08em; }
.cr-join{ display:flex; gap:6px; flex:1; } .cr-join .cr-input{ flex:1; min-width:0; }
.cr-shelter{ padding:10px; text-align:left; display:grid; gap:10px; min-width:0; }
.cr-tabs{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; } .cr-tab{ min-width:80px; } .cr-scrap{ margin-left:auto; font:700 15px var(--hud-font-display); color:var(--cr-accent); }
.cr-tabpane{ display:grid; gap:8px; }
.cr-tab-account{ display:grid; gap:1px; line-height:1.1; } .cr-tab-account small{ font-size:10px; color:var(--cr-muted); text-transform:none; letter-spacing:0; } .cr-tab-account.is-on small{ color:var(--cr-accent); } .cr-tab-account.is-active small{ color:var(--hud-text-on-accent); }
.cr-account{ display:grid; gap:10px; } .cr-account p{ margin:0; }
.cr-account-row{ display:flex; gap:6px; flex-wrap:wrap; } .cr-account-row .cr-input{ flex:1; min-width:180px; }
.cr-account .gf-google{ min-height:44px; display:flex; justify-content:center; }
.cr-email-page{ display:grid; place-items:center; min-height:100vh; padding:24px; box-sizing:border-box; }
.cr-email-page main{ display:grid; gap:12px; width:min(420px, 100%); padding:20px; text-align:center; }
.cr-email-page h1{ margin:0; font:800 22px var(--hud-font-display); letter-spacing:.06em; text-transform:uppercase; }
.cr-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:4px 0; }
.cr-name{ width:100%; }
.cr-pilots{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:8px; }
.cr-pilot{ position:relative; display:grid; grid-template-columns:56px 1fr; gap:8px; align-items:center; padding:6px; background:var(--cr-inset); border:1px solid var(--cr-border); border-radius:6px; color:var(--cr-text); text-align:left; cursor:pointer; font:inherit; transition:border-color .12s, transform .08s; }
.cr-pilot:hover{ border-color:color-mix(in srgb, var(--cr-focus) 60%, transparent); transform:translateY(-1px); }
.cr-pilot canvas{ width:56px; height:56px; image-rendering:pixelated; background:var(--hud-surface-raised); border-radius:6px; }
.cr-pilot b{ font:700 14px var(--hud-font-display); letter-spacing:.04em; display:block; } .cr-pilot small{ display:block; color:var(--cr-muted); font-size:11px; } .cr-pilot span{ display:block; font-size:11px; color:var(--cr-focus); margin-top:2px; } .cr-pilot em{ display:block; font-style:normal; color:var(--cr-accent); font-size:11px; margin-top:2px; }
.cr-pilot.is-active{ border-color:var(--cr-focus); box-shadow:0 0 0 1px var(--cr-focus) inset, 0 0 14px color-mix(in srgb, var(--hud-focus) 20%, transparent); } .cr-pilot.is-locked canvas{ filter:grayscale(1) brightness(.6); } .cr-pilot.is-afford em{ color:var(--cr-good); }
.cr-ups{ display:grid; gap:6px; } .cr-up{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 10px; background:var(--cr-inset); border:1px solid var(--cr-border); border-radius:6px; } .cr-up small{ display:block; }
.cr-pips{ color:var(--cr-accent); letter-spacing:2px; font-size:11px; }
.cr-kititem{ display:grid; grid-template-columns:auto 1fr auto; } .cr-kititem.is-active{ border-color:var(--cr-focus); }
.cr-kitpick{ width:38px; height:38px; font-size:18px; } .cr-kitpick.is-active{ background:var(--cr-focus); color:var(--hud-text-on-accent); border-color:var(--cr-focus); }
.cr-mods-head{ margin:14px 0 0; font:700 14px/1.2 var(--hud-font-display); color:var(--cr-text); letter-spacing:.04em; text-transform:uppercase; }
/* one cell per mod, in CR_MODS order: --i is the mod's index and --n the pool size, both set by cr-main.js */
.cr-modicon{ display:block; width:40px; height:40px; background:url(assets/mods/mod-capsules.png) calc(var(--i, 0) / (var(--n, 3) - 1) * 100%) 0/calc(var(--n, 3) * 100%) 100% no-repeat; image-rendering:pixelated; }
.cr-modicon[data-n]::after{ content:'×' attr(data-n); position:absolute; right:-3px; bottom:-4px; font:700 10px/1 var(--hud-font-display); color:var(--cr-text); text-shadow:0 0 3px #000, 0 0 3px #000; }
.cr-mods .cr-modicon{ position:relative; }
.cr-moditem{ align-items:center; gap:10px; } .cr-moditem.is-empty .cr-modicon{ filter:grayscale(1) brightness(.55); }
.cr-mods{ position:fixed; left:50%; bottom:calc(104px + var(--safe-bottom)); transform:translateX(-50%); display:flex; gap:4px; padding:3px 6px; z-index:12; pointer-events:none; }
.cr-mods .cr-modicon{ width:30px; height:30px; animation:crModIn .45s ease-out; }
.cr-mods{ display:block; pointer-events:auto; max-width:calc(100vw - 24px); }
.cr-mods summary{ display:flex; align-items:center; gap:5px; min-height:38px; cursor:pointer; font:var(--hud-weight-strong) 12px var(--hud-font-label); }
.cr-mods summary:focus-visible{ outline:2px solid var(--hud-focus); outline-offset:3px; }
#crBuildInfo{ width:330px; max-width:calc(100vw - 48px); max-height:32vh; overflow:auto; touch-action:pan-y; overscroll-behavior:contain; font:12px/1.45 var(--hud-font-label); }
#crBuildInfo p{ margin:6px 0; }
.cr-build-recap{ padding:12px; border:1px solid var(--cr-border); border-radius:6px; background:var(--cr-inset); text-align:left; }
.cr-build-recap p{ margin:7px 0; line-height:1.45; }
#crEndBuild{ white-space:pre-line; }
.cr-cache-choice{ position:fixed; z-index:16; left:50%; bottom:calc(104px + var(--safe-bottom)); transform:translateX(-50%); width:min(560px, calc(100vw - 24px)); padding:10px; max-height:calc(100dvh - 128px - var(--safe-bottom)); overflow:auto; touch-action:pan-y; overscroll-behavior:contain; }
.cr-cache-choice summary{ cursor:pointer; font:var(--hud-weight-strong) 14px/1.4 var(--hud-font-label); color:var(--cr-focus); }
.cr-cache-choice p{ margin:6px 0; font-size:12px; color:var(--cr-muted); }
#crCacheOptions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cr-cache-option{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; white-space:normal; gap:6px; min-height:48px; padding:10px; }
.cr-cache-option small{ font:12px/1.4 var(--hud-font-body); color:var(--cr-text); text-transform:none; letter-spacing:normal; }
.cr-loss-recap{ margin:0; font-size:13px; line-height:1.4; color:var(--cr-muted); }
.cr-cache-option:focus-visible,.cr-cache-choice summary:focus-visible{ outline:2px solid var(--hud-focus); outline-offset:2px; }
.cr-feed{ max-width:min(560px, calc(100vw - 24px)); width:max-content; }
@media (max-height:500px){ #crBuildInfo{ max-height:24vh; } }
@media (prefers-reduced-motion:reduce){ .cr-mods .cr-modicon{ animation:none; } }
@keyframes crModIn{ from{ transform:scale(2.2); filter:brightness(2.5); } to{ transform:scale(1); filter:none; } }
.cr-endfeat.is-mod{ color:var(--cr-focus); }
.cr-insure .cr-set{ grid-template-columns:auto auto 1fr; gap:10px; } .cr-kit-intro{ margin:0; font-size:12px; }
.cr-rankbox{ display:grid; gap:6px; padding:8px 10px; background:var(--cr-inset); border:1px solid var(--cr-border); border-radius:6px; }
.cr-rankbar{ height:6px; background:rgba(0,0,0,.5); border-radius:3px; overflow:hidden; } .cr-rankbar i{ display:block; height:100%; width:calc(var(--fill, 0) * 100%); background:linear-gradient(90deg, var(--cr-focus), var(--cr-accent)); transition:width .3s; }
.cr-streak{ color:#ff8a3d; font:700 13px var(--hud-font-display); letter-spacing:.04em; }
.cr-contract b{ color:var(--cr-focus); } .is-danger{ color:var(--cr-danger); } .cr-bring{ color:var(--cr-accent); }
.cr-points{ text-align:left; color:var(--cr-muted); font-size:var(--hud-text-sm); display:grid; gap:4px; } .cr-points b{ color:var(--cr-text); }
.cr-point summary{ cursor:pointer; padding:4px 0; } .cr-point.is-done summary{ color:var(--cr-focus); } .cr-point p{ margin:0 0 6px 18px; }
.cr-heat-btns .is-locked{ opacity:var(--hud-disabled-opacity); cursor:help; }
.cr-controls{ margin:0; font-size:13px; color:var(--cr-muted); line-height:1.7; } .cr-controls b{ color:var(--cr-focus); font-weight:700; }
.cr-settings{ display:grid; gap:6px; }
.cr-set{ display:grid; grid-template-columns:140px 1fr auto; gap:10px; align-items:center; padding:4px 0; font-size:13px; }
.cr-set input[type=range]{ width:100%; accent-color:var(--cr-edge); } .cr-set input[type=checkbox]{ width:18px; height:18px; accent-color:var(--cr-edge); justify-self:start; }
.cr-set output{ font:700 12px var(--hud-font-pixel); color:var(--cr-muted); min-width:34px; text-align:right; }
.cr-title-foot{ display:flex; justify-content:space-between; gap:12px; color:var(--cr-muted); font-size:11px; flex-wrap:wrap; max-width:1200px; width:100%; justify-self:center; }
/* The feedback link opens a mail draft, so it must be an <a>; this gives it the button shape. */
a.cr-btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.cr-title-foot .cr-feedback{ color:var(--cr-muted); text-underline-offset:3px; }
.cr-title-foot .cr-feedback:hover{ color:var(--hud-focus); }

/* hud */
.cr-top{ position:fixed; top:calc(8px + var(--safe-top)); left:8px; right:8px; display:flex; justify-content:space-between; gap:8px; z-index:10; pointer-events:none; }
.cr-clockbox{ padding:6px 12px; display:grid; min-width:120px; max-width:min(52vw, 420px); } .cr-clockbox #crClock{ font:800 30px/1 var(--hud-font-display); letter-spacing:.06em; } .cr-clockbox b.is-surge{ color:var(--cr-danger); animation:crPulse .5s infinite alternate; }
.cr-meta{ font:700 11px var(--hud-font-display); letter-spacing:.08em; text-transform:uppercase; color:#ffae4f; }
@keyframes crPulse{ from{ opacity:.6; } to{ opacity:1; } }
.cr-info{ padding:6px 12px; display:grid; text-align:right; font-size:12px; min-width:150px; height:max-content; }
.cr-carry{ font:700 14px var(--hud-font-display); color:var(--cr-focus); letter-spacing:.04em; }
.cr-codebox{ position:fixed; top:calc(84px + var(--safe-top)); left:8px; padding:6px 10px; display:flex; gap:8px; align-items:center; font:700 12px var(--hud-font-pixel); z-index:10; }
.cr-zero{ position:fixed; left:50%; top:calc(8px + var(--safe-top)); transform:translateX(-50%); max-width:min(560px, 56vw); font:12px/1.4 var(--hud-font-pixel); color:#b8ffd0; text-shadow:0 0 6px rgba(63,191,111,.5); text-align:center; pointer-events:none; z-index:10; transition:opacity .6s; padding:4px 10px; background:rgba(3,10,6,.55); border-radius:4px; }
.cr-zero:empty{ display:none; } .cr-zero.is-new{ animation:crGlitch .35s steps(3) 1; } .cr-zero.is-fade{ opacity:0; }
@keyframes crGlitch{ 0%{ transform:translateX(-52%); clip-path:inset(0 0 60% 0); } 50%{ transform:translateX(-48%); clip-path:inset(40% 0 0 0); } 100%{ transform:translateX(-50%); clip-path:inset(0); } }
.cr-scan{ position:fixed; left:50%; top:calc(70px + var(--safe-top)); transform:translateX(-50%); z-index:11; pointer-events:none; font:800 18px var(--hud-font-display); letter-spacing:.1em; color:#fff; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--hud-edge-glow) 85%, transparent), transparent); padding:8px 60px; text-shadow:0 0 8px var(--hud-edge-glow); white-space:nowrap; animation:crPulse .22s infinite alternate; }
.cr-scan.is-live{ animation:none; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--hud-focus) 50%, transparent), transparent); text-shadow:0 0 8px var(--hud-focus); }
.cr-feed{ position:fixed; left:50%; top:calc(116px + var(--safe-top)); transform:translateX(-50%); display:grid; gap:4px; z-index:10; pointer-events:none; text-align:center; }
.cr-feed-line{ padding:4px 10px; background:rgba(11,10,13,.72); border-radius:4px; font-size:13px; animation:crIn .25s ease-out; } .cr-feed-line.is-warn{ color:var(--cr-danger); } .cr-feed-line.is-good{ color:var(--cr-focus); } .cr-feed-line.is-coop{ color:var(--cr-accent); }
@keyframes crIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.cr-tip{ position:fixed; left:50%; bottom:calc(112px + var(--safe-bottom)); transform:translateX(-50%); padding:8px 14px; font-size:13px; z-index:10; pointer-events:none; max-width:min(520px, 92vw); text-align:center; border-color:var(--cr-focus); animation:crIn .3s ease-out; }
/* the standing objective, under the clock: what to do right now, every run */
.cr-goal{ display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; line-height:1.3; font:var(--hud-weight-strong) var(--hud-text-sm) var(--hud-font-label); color:var(--cr-focus); }
.cr-goal-label{ font:var(--hud-weight-label) var(--hud-text-xs)/1 var(--hud-font-label); letter-spacing:.16em; text-transform:uppercase; color:var(--cr-muted); }
/* first-run coach: a card that points at the control it is teaching, and a ring around it */
.cr-coach{ --arrow:50%; position:fixed; z-index:14; width:min(340px, calc(100vw - 24px)); padding:10px 12px; border-color:var(--cr-focus); box-shadow:var(--hud-shadow), 0 0 24px color-mix(in srgb, var(--hud-focus) 30%, transparent); animation:crFade .3s ease-out; }
.cr-coach::after{ content:''; position:absolute; left:var(--arrow); bottom:-7px; width:12px; height:12px; background:var(--hud-surface-glass); border-right:var(--hud-border-hairline) solid var(--cr-focus); border-bottom:var(--hud-border-hairline) solid var(--cr-focus); transform:translateX(-50%) rotate(45deg); }
.cr-coach.is-below::after{ bottom:auto; top:-7px; border:var(--hud-border-hairline) solid var(--cr-focus); border-right:0; border-bottom:0; }
.cr-coach.is-free{ left:50%; top:auto; bottom:calc(150px + var(--safe-bottom)); transform:translateX(-50%); }
.cr-coach.is-free::after{ display:none; }
.cr-coach-text{ margin:6px 0 8px; font-size:13px; line-height:1.45; } .cr-coach-text b{ color:var(--cr-focus); }
.cr-coach-actions{ display:flex; justify-content:flex-end; }
@keyframes crFade{ from{ opacity:0; } to{ opacity:1; } }
.cr-spot{ position:fixed; z-index:13; border:2px solid var(--cr-focus); border-radius:10px; pointer-events:none; box-shadow:0 0 0 3px rgba(0,0,0,.35), 0 0 18px var(--cr-focus); animation:crSpot 1.2s ease-in-out infinite; }
@keyframes crSpot{ 50%{ opacity:.45; } }
.cr-state{ position:fixed; left:50%; bottom:calc(160px + var(--safe-bottom)); transform:translateX(-50%); padding:8px 14px; font-weight:600; z-index:10; pointer-events:none; text-align:center; max-width:90vw; }
.cr-actionbar{ position:fixed; left:50%; bottom:calc(10px + var(--safe-bottom)); transform:translateX(-50%); display:flex; gap:8px; z-index:12; align-items:flex-end; }
.cr-act{ position:relative; overflow:hidden; width:64px; height:64px; border-radius:10px; border:1px solid var(--cr-border); background:linear-gradient(180deg, #221c27, #0f0c12); color:var(--cr-text); display:grid; place-items:center; align-content:center; gap:0; padding:0; cursor:pointer; font:inherit; touch-action:none; }
.cr-act i{ position:absolute; inset:0; background:conic-gradient(rgba(0,0,0,.72) calc(var(--cd, 0) * 360deg), transparent 0); pointer-events:none; }
.cr-act b{ position:relative; font:800 20px/1 var(--hud-font-display); } .cr-act span{ position:relative; font-size:10px; color:var(--cr-muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 3px; } .cr-act kbd{ position:absolute; top:3px; right:3px; font-size:8px; padding:0 3px; }
.cr-act.is-ready{ border-color:var(--cr-focus); box-shadow:0 0 12px color-mix(in srgb, var(--hud-focus) 25%, transparent); }
.cr-act.is-off{ opacity:.4; }
.cr-act-big{ width:84px; height:84px; } .cr-act-big b{ font-size:26px; color:var(--cr-focus); } .cr-act-big span{ color:var(--cr-text); font-weight:600; }
.cr-act.is-over{ border-color:var(--cr-edge); box-shadow:0 0 16px color-mix(in srgb, var(--hud-edge-glow) 45%, transparent); }
.cr-act-burn.is-hot{ border-color:var(--cr-edge); } .cr-act-burn.is-hot b{ color:var(--cr-edge); animation:crPulse .6s infinite alternate; }
.cr-bottom{ position:fixed; right:8px; bottom:calc(10px + var(--safe-bottom)); display:flex; gap:6px; align-items:center; z-index:12; }
.cr-stick{ position:fixed; width:112px; height:112px; border-radius:50%; border:2px solid rgba(255,255,255,.25); background:rgba(255,255,255,.05); z-index:9; pointer-events:none; }
.cr-stick i{ position:absolute; left:36px; top:36px; width:40px; height:40px; border-radius:50%; background:color-mix(in srgb, var(--hud-focus) 60%, transparent); } .cr-stick-r i{ background:color-mix(in srgb, var(--hud-edge-glow) 60%, transparent); }
.cr-modal{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(5,3,10,.72); z-index:40; padding:16px; overflow:auto; animation:crIn .2s ease-out; }
.cr-card{ max-width:460px; width:100%; display:grid; gap:10px; padding:20px; text-align:center; } .cr-card h2{ margin:0; font:800 30px var(--hud-font-display); letter-spacing:.06em; }
.cr-card .cr-settings{ text-align:left; padding:8px 0; border-top:1px solid var(--cr-border); border-bottom:1px solid var(--cr-border); }
.cr-endcard{ max-width:540px; } .cr-endbig{ margin:0; font:800 26px var(--hud-font-display); color:var(--cr-focus); }
.cr-heatup{ font:800 18px var(--hud-font-display); letter-spacing:.12em; color:#fff; background:linear-gradient(90deg, #b3401a, #ff8a3d, #b3401a); padding:6px; border-radius:6px; animation:crPulse .5s infinite alternate; }
.cr-stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.cr-stats div{ background:var(--cr-inset); border:1px solid var(--cr-border); border-radius:6px; padding:6px 4px; } .cr-stats b{ display:block; font:800 20px var(--hud-font-display); } .cr-stats small{ color:var(--cr-muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.cr-zero-inline{ margin:0; font:12px/1.4 var(--hud-font-pixel); color:#b8ffd0; }
.cr-status{ position:fixed; left:50%; bottom:calc(100px + var(--safe-bottom)); transform:translateX(-50%); padding:8px 14px; background:var(--cr-panel); border:1px solid var(--cr-border); border-radius:6px; z-index:50; max-width:90vw; text-align:center; }
/* pilot roster filter */
.cr-filter{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.cr-filter .cr-muted{ margin-left:auto; }
/* daily block and feats */
.cr-daily{ flex:1 1 100%; display:grid; gap:2px; text-align:center; font-family:var(--hud-font-display); letter-spacing:.06em; text-transform:uppercase; border-color:#ff8a3d; background:linear-gradient(180deg, rgba(255,138,61,.35), #13121b); }
.cr-daily small{ font:400 11px var(--hud-font-body); letter-spacing:0; text-transform:none; color:var(--cr-muted); }
.cr-feats{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:6px; }
.cr-feat{ position:relative; padding:8px 54px 8px 10px; background:var(--cr-inset); border:1px solid var(--cr-border); border-radius:6px; opacity:.72; }
.cr-feat b{ display:block; font:700 13px var(--hud-font-display); } .cr-feat small{ display:block; color:var(--cr-muted); font-size:11px; } .cr-feat em{ position:absolute; top:8px; right:8px; font-style:normal; font-size:11px; color:var(--cr-accent); }
.cr-feat.is-done{ opacity:1; border-color:var(--cr-good); } .cr-feat.is-done b{ color:var(--cr-good); }
.cr-endfeats{ display:grid; gap:4px; } .cr-endfeats:empty{ display:none; }
.cr-endrank{ text-align:left; animation:crIn .45s .5s both; }
.cr-endfeat{ font:700 13px var(--hud-font-display); letter-spacing:.06em; color:var(--hud-text-on-accent); background:var(--cr-accent); padding:5px; border-radius:5px; animation:crIn .4s ease-out both; } .cr-endfeat.is-daily{ background:#ff8a3d; color:#fff; } .cr-endfeat.is-contract{ background:var(--cr-focus); } .cr-endfeat.is-streak{ background:linear-gradient(90deg, #b3401a, #ff8a3d); color:#fff; } .cr-endfeat.is-kit{ background:var(--cr-good); color:#0b0a0d; } .cr-endfeat.is-lost{ background:var(--cr-danger); color:#fff; }
@media (max-width:860px){ .cr-title-grid{ grid-template-columns:1fr; } .cr-logo{ font-size:56px; } }
@media (max-width:640px){ .cr-goal{ font-size:11px; } .cr-goal-label{ display:none; } .cr-logo{ font-size:44px; } .cr-clockbox #crClock{ font-size:22px; } .cr-zero{ top:calc(84px + var(--safe-top)); max-width:92vw; font-size:11px; } .cr-scan{ top:calc(130px + var(--safe-top)); font-size:13px; padding:6px 20px; } .cr-feed{ top:calc(170px + var(--safe-top)); } .cr-codebox{ top:calc(84px + var(--safe-top)); }
  .cr-act{ width:52px; height:52px; } .cr-act-big{ width:66px; height:66px; } .cr-act span{ display:none; } .cr-actionbar{ gap:5px; left:8px; transform:none; } .cr-stats{ grid-template-columns:repeat(2, 1fr); } .cr-set{ grid-template-columns:110px 1fr auto; } .cr-pick{ grid-template-columns:80px 1fr; } .cr-pick canvas{ width:80px; height:80px; } }

/* Combat readout layout; surfaces and focus come from shared HUD components. */
.cr-clockbox{gap:var(--hud-space-1);padding:var(--hud-space-2) var(--hud-space-3);}
.cr-clockbox .cr-goal-label{font:var(--hud-weight-label) var(--hud-text-xs)/var(--hud-leading) var(--hud-font-label);letter-spacing:var(--hud-tracking-label);color:var(--hud-text-muted);}
.cr-goal{display:flex;flex-wrap:wrap;column-gap:var(--hud-space-2);align-items:baseline;}
.cr-info{gap:var(--hud-space-1);padding:var(--hud-space-2) var(--hud-space-3);}
.cr-carry{font:var(--hud-weight-strong) var(--hud-text-count)/var(--hud-leading-title) var(--hud-font-display);}
.cr-act{background-image:var(--hud-panel-fill);}
.cr-act span{font-size:var(--hud-text-xs);}
.cr-top{left:max(var(--hud-space-2),var(--safe-left));right:max(var(--hud-space-2),var(--safe-right));}
@media(max-width:640px){.cr-clockbox{min-width:0;}.cr-info{min-width:0;}.cr-carry{font-size:var(--hud-text-body);}}
@media(pointer:coarse){
 .cr-btn{min-height:var(--hud-target);min-width:var(--hud-target);}
 .cr-input,.cr-settings select{min-height:var(--hud-target);}
 .cr-title{padding-top:calc(var(--hud-space-4) + var(--safe-top));padding-bottom:calc(var(--hud-space-4) + var(--safe-bottom));}
}

@media(pointer:coarse){
 .cr-act kbd{display:none;}
 .cr-act span{display:block;font-size:var(--hud-text-xs);}
 .cr-actionbar{left:auto;right:calc(var(--safe-right) + var(--hud-space-2));bottom:calc(var(--safe-bottom) + 68px);transform:none;display:grid;grid-template-columns:repeat(3,var(--hud-control-comfortable));gap:var(--hud-space-1);}
 .cr-act,.cr-act-big{width:var(--hud-control-comfortable);height:var(--hud-control-comfortable);}
 .cr-act b,.cr-act-big b{font-size:var(--hud-text-count);}
 .cr-bottom{right:calc(var(--safe-right) + var(--hud-space-2));}
}
@media(pointer:coarse) and (orientation:landscape){
 .cr-actionbar{grid-template-columns:repeat(6,var(--hud-target));right:calc(var(--safe-right) + 112px);bottom:calc(var(--safe-bottom) + var(--hud-space-2));}
 .cr-act,.cr-act-big{width:var(--hud-target);height:var(--hud-target);}
 .cr-act span{max-width:var(--hud-target);font-size:var(--hud-text-caption);}
}