/* LASTCALL — over RIDGE's own sheet (the boot screen, the .screen overlays and the type all come from there). */
:root { --accent: #e7a44a; }
body { cursor: crosshair; }
#hud { font-family: var(--mono); }

#cross { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%); }
#cross i { position: absolute; background: #fff; box-shadow: 0 0 4px #000; opacity: .85; }
#cross i:nth-child(1) { left: 12px; top: 0; width: 2px; height: 8px; }
#cross i:nth-child(2) { left: 12px; bottom: 0; width: 2px; height: 8px; }
#cross i:nth-child(3) { top: 12px; left: 0; width: 8px; height: 2px; }
#cross i:nth-child(4) { top: 12px; right: 0; width: 8px; height: 2px; }
#cross u { position: absolute; left: 12px; top: 12px; width: 2px; height: 2px; background: var(--accent); }
#marker { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%) rotate(45deg); opacity: 0; }
#marker:before, #marker:after { content: ""; position: absolute; background: #ff9a5a; box-shadow: 0 0 6px #000; }
#marker:before { left: 14px; top: 0; width: 2px; height: 30px; }
#marker:after { top: 14px; left: 0; width: 30px; height: 2px; }
#marker.on { opacity: 1; transition: opacity .28s; }
#marker.kill:before, #marker.kill:after { background: #ffd24a; }

#task { position: absolute; left: 26px; top: 22px; max-width: 30vw; }
#task .kicker { margin: 0 0 2px; font-size: 10px; letter-spacing: .26em; color: var(--dim); }
#task h2 { margin: 0; font-size: 24px; letter-spacing: .05em; color: var(--ink); font-weight: 700; }
#task #sub { margin: 3px 0 0; font-size: 12px; letter-spacing: .05em; color: var(--dim); }
/* RIDGE's sheet gives #way an absolute position, a dark pill and a place at the top of the screen (its own HUD's
   arrow, since 22 Sep 2026); this one lives under the leg's title, in the flow. Everything RIDGE sets is unset here,
   or the range floats up and sits across the title — which it did, the morning after RIDGE changed. */
#way { position: static; transform: none; background: none; padding: 0; border-radius: 0; white-space: normal;
       display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: inherit; font-weight: inherit; letter-spacing: 0; }
#way i { display: block; width: 26px; height: 26px; position: relative; }
#way i:after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-50%, -50%) rotate(var(--a, 0deg));
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 16px solid var(--accent); transform-origin: 50% 50%; }
#way b { font-size: 17px; color: var(--accent); letter-spacing: .08em; }

#clock { position: absolute; right: 26px; top: 22px; text-align: right; }
#clock i { display: block; font-size: 10px; letter-spacing: .26em; color: var(--dim); }
#clock b { font-size: 26px; letter-spacing: .04em; color: var(--ink); }
#depart { position: absolute; right: 26px; top: 84px; text-align: right; }
#depart i { display: block; font-size: 10px; letter-spacing: .24em; color: var(--accent); }
#depart b { font-size: 34px; letter-spacing: .02em; color: var(--accent); line-height: 1; }
#depart.soon b { color: #ff6b4a; animation: pulse .7s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

#vitals { position: absolute; left: 26px; bottom: 54px; display: flex; align-items: flex-end; gap: 24px; }
#hpwrap { width: 210px; height: 7px; background: rgba(255, 255, 255, .13); border-radius: 4px; overflow: hidden; }
#hpwrap i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff6b4a, var(--accent)); transition: width .12s; }
#ammo { line-height: 1; position: relative; }
#ammo b { font-size: 36px; color: var(--ink); font-weight: 700; }
#ammo i { font-size: 15px; color: var(--dim); }
#ammo b.empty { color: #ff6b4a; }
#ammo u { position: absolute; left: 0; top: -16px; font-size: 10px; letter-spacing: .24em; color: var(--accent); text-decoration: none; opacity: 0; }
#ammo u.on { opacity: 1; }

#big { position: absolute; left: 50%; top: 61%; transform: translateX(-50%); font-size: 15px; letter-spacing: .3em; color: var(--accent); text-shadow: 0 2px 6px #000; text-align: center; }
#big.count { font-size: 64px; letter-spacing: .02em; color: #fff; }
#vig { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,50,30,0) 40%, rgba(255,50,30,.72) 100%); transition: opacity .12s; }
#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: #fff; }

/* THREAT ARROWS — a ring about the crosshair showing what is near and behind you. A swarm that arrives out of shot is
   a swarm that reads as the game cheating; this is the cheapest honest answer there is. */
#threats { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#threats i { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0;
  transform: rotate(var(--a)) translateY(calc(-1 * var(--r, 13vh))); }
#threats i:after { content: ""; position: absolute; left: -9px; top: -8px; width: 0; height: 0;
  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 13px solid var(--c, rgba(255,255,255,.55)); }
#threats i.near:after { border-bottom-color: #ff5a3c; }
#threats i.ground:after { border-bottom-width: 9px; border-left-width: 11px; border-right-width: 11px; }

/* THE TITLE SCREEN is the one screen with something worth looking at behind it, so it does not get RIDGE's blur and
   its full curtain: a gradient that is dark at the top and the bottom and all but clear across the middle, with the
   name and the menu in the lower third where the dark is. (It did get them, and the island came out as a lump of
   grey behind six millimetres of frosted glass.) */
#screen-title {
  align-items: flex-end;
  backdrop-filter: none;
  background: linear-gradient(180deg, rgba(6, 10, 14, .62) 0%, rgba(6, 10, 14, .08) 30%, rgba(6, 10, 14, .14) 48%, rgba(6, 10, 14, .9) 100%);
}
#screen-title .wrap { padding-bottom: 7vh; }
#screen-title h1 { text-shadow: 0 3px 22px rgba(0, 0, 0, .75); }
#screen-title .tag, #screen-title .foot { text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }

/* the countdown while the machine is away rather than alongside: the same clock, said the other way round, and dimmer
   because it is not yet anything to hurry for (src/main.js `back`) */
#depart.waiting b { color: var(--dim); }
#depart.waiting i { opacity: .7; }