/* HUNTER HUD · family: online
   Online play guides (online/**): online-play-guides.css
   Loaded after assets/css/hunter-hud.css on pages tagged data-hud-family="online" (scripts/build/apply-hunter-hud.cjs).
   Scope every rule under html.hunter-hud so the page CSS keeps working with ?nohud=1.

   Signature: a NETWORK OPERATIONS BOARD.
   - The hero art is a scope: recessed screen, graticule, reticle and a radar sweep whose echo blip lights exactly
     when the beam passes it (the page's one ambient loop).
   - Setup steps are a signal chain: numbered ports on a conduit, HOP nn / total readouts, output LEDs. Hovering a hop
     lights every earlier hop green (linked) and the hovered hop yellow (you are here).
   - Requirement cards are system checks (CHK nn / total, hollow yellow diamond = verify); system cards carry a BETA chip.
   - Fact tables are diagnostic readouts: indexed rows with pass / attention / fail diamonds taken from the row text.
   Plate weight follows importance: heavy (scope, readout table), medium (hops, system cards), light (checks, FAQ, notices).
   Colour meaning: visor green = ok, yellow = attention, red = critical / not provided, orange = neutral structure.
   Decorative generated text uses `content: "..." / ""` so screen readers skip it (plain fallback declared first). */

/* ---------- Tokens ---------- */
html.hunter-hud[data-hud-family="online"]{
  --og-bg:var(--hh-void);
  --og-panel:var(--hh-panel);
  --og-panel-strong:var(--hh-panel-2);
  --og-text:var(--hh-ink);
  --og-muted:var(--hh-dim);
  --og-border:var(--hh-edge-2);
  --og-cyan:var(--hh-orange);
  --og-violet:var(--hh-amber);
  --og-green:var(--hh-visor);
  --og-warning:var(--hh-yellow);
  /* status diamonds (inline SVG, no external assets) */
  --on-dia-yellow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M5 .6 9.4 5 5 9.4 .6 5Z' fill='%23ffc400'/%3E%3C/svg%3E");
  --on-dia-visor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M5 .6 9.4 5 5 9.4 .6 5Z' fill='%23a6ff4d'/%3E%3C/svg%3E");
  --on-dia-red:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M5 .6 9.4 5 5 9.4 .6 5Z' fill='%23ff3b24'/%3E%3C/svg%3E");
  --on-dia-orange:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M5 .6 9.4 5 5 9.4 .6 5Z' fill='%23ff7a00'/%3E%3C/svg%3E");
  --on-dia-dim:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M5 .6 9.4 5 5 9.4 .6 5Z' fill='%234d3514'/%3E%3C/svg%3E");
  --on-dia-hollow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M5 1.3 8.7 5 5 8.7 1.3 5Z' fill='none' stroke='%23ffc400' stroke-width='1.3'/%3E%3C/svg%3E");
  --on-dia-hollow-red:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M5 1.3 8.7 5 5 8.7 1.3 5Z' fill='none' stroke='%23ff3b24' stroke-width='1.3'/%3E%3C/svg%3E");
  --on-hazard:repeating-linear-gradient(-45deg,var(--hh-yellow) 0 5px,#140b02 5px 10px);
}
html.hunter-hud[data-hud-family="online"] body{
  font-family:var(--hh-font-text);
  color:var(--hh-ink);
  text-rendering:optimizeLegibility;
}
html.hunter-hud[data-hud-family="online"] a{color:var(--hh-orange-2);text-decoration-color:rgba(255,122,0,.4);text-underline-offset:3px;transition:color .18s,text-decoration-color .18s}
html.hunter-hud[data-hud-family="online"] a:hover{color:var(--hh-yellow-2);text-decoration-color:var(--hh-yellow)}
html.hunter-hud[data-hud-family="online"] strong{color:var(--hh-ink)}
html.hunter-hud[data-hud-family="online"] .skip-link{
  border-radius:0;color:#170900;background:var(--hh-yellow);
  font:700 12px/1.2 var(--hh-font-hud);letter-spacing:.1em;text-transform:uppercase;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
/* In-page anchors clear the sticky carbon bar so the // SEC eyebrow stays readable. */
html.hunter-hud[data-hud-family="online"] .section[id],
html.hunter-hud[data-hud-family="online"] .section > h2[id]{scroll-margin-top:92px}

/* ---------- Type scale: condensed HUD display, one weight per level, disciplined tracking ----------
   display h1 700 / .005em · section h2 600 / .015em · plate h3 700 / .035em · labels mono 700 / .22–.3em.
   Reading text keeps a ~65 character measure. */
html.hunter-hud[data-hud-family="online"] h1,
html.hunter-hud[data-hud-family="online"] h2,
html.hunter-hud[data-hud-family="online"] h3{
  font-family:var(--hh-font-hud);font-stretch:condensed;text-transform:uppercase;
  color:var(--hh-ink);text-wrap:balance;
}
html.hunter-hud[data-hud-family="online"] h1{
  margin-top:22px;max-width:15.5em;
  font-size:clamp(2.3rem,3.1vw + 1.3rem,4.1rem);
  font-weight:700!important;line-height:.97;letter-spacing:.005em!important;
  text-shadow:0 0 28px rgba(255,122,0,.26),0 2px 0 rgba(0,0,0,.6)!important;
}
html.hunter-hud[data-hud-family="online"] h2{
  font-size:clamp(1.7rem,1.6vw + 1.05rem,2.4rem);
  font-weight:600!important;line-height:1;letter-spacing:.015em!important;
  text-shadow:0 0 22px rgba(255,122,0,.22)!important;
}
html.hunter-hud[data-hud-family="online"] h3{
  font-size:clamp(1.08rem,.3vw + 1rem,1.2rem);
  font-weight:700;line-height:1.12;letter-spacing:.035em;
  text-shadow:0 0 16px rgba(255,122,0,.18);
}
html.hunter-hud[data-hud-family="online"] .section > p,
html.hunter-hud[data-hud-family="online"] .section-copy p{max-width:65ch;color:var(--hh-dim);line-height:1.7}
html.hunter-hud[data-hud-family="online"] .section > p strong{color:var(--hh-yellow-2)}

/* ---------- Header: sticky carbon bar, HUD wordmark with a mono // ONLINE sub-tag ---------- */
html.hunter-hud[data-hud-family="online"] .site-nav{
  /* keep the page's sticky geometry: the core .hh-header rule sets position:relative at 0,2,1 */
  position:sticky;top:0;z-index:20;
  border-bottom:1px solid var(--hh-edge);
  background:linear-gradient(180deg,rgba(15,11,8,.97),rgba(8,6,5,.97));
  /* the bar is ~97% opaque already; a full-width blur only costs paint time */
  backdrop-filter:none!important;
  /* the core beam under the bar (.hh-header:after) travels to translateX(560%) and, outside main's overflow:hidden,
     widened the document to ~2070px mid-cycle (horizontal scroll at 1440 and 390). clip (not hidden) keeps the
     energy lines drawn below the bar visible and creates no scroll container, so sticky still works. */
  overflow-x:clip;
}
html.hunter-hud[data-hud-family="online"] .brand{
  gap:10px;color:var(--hh-ink);
  font:700 15px/1 var(--hh-font-hud);letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 0 18px rgba(255,122,0,.25);
}
html.hunter-hud[data-hud-family="online"] .brand img{
  filter:drop-shadow(0 0 6px rgba(255,122,0,.55)) saturate(.2) sepia(1) hue-rotate(-12deg) saturate(3.2) brightness(1.05);
}
html.hunter-hud[data-hud-family="online"] .brand span span{color:var(--hh-yellow)}
html.hunter-hud[data-hud-family="online"] .brand::after{
  content:'// ONLINE';content:'// ONLINE' / '';margin-left:4px;padding-left:12px;border-left:1px solid var(--hh-edge-2);
  font:700 10px/1 var(--hh-font-mono);letter-spacing:.22em;color:var(--hh-orange);text-shadow:none;
}
html.hunter-hud[data-hud-family="online"] .site-nav-links{gap:6px}
html.hunter-hud[data-hud-family="online"] .site-nav-links a{padding:9px 12px;line-height:1}
html.hunter-hud[data-hud-family="online"] .site-nav-links a[aria-current="page"]{color:var(--hh-ink)}

/* ---------- Hero copy ---------- */
html.hunter-hud[data-hud-family="online"] .hero{position:relative;padding-top:64px}
/* Static base rail closing the hero (the ops strip below continues it), capped by a short hazard block. */
html.hunter-hud[data-hud-family="online"] .hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:4px;pointer-events:none;
  background:
    var(--on-hazard) right bottom/56px 4px no-repeat,
    linear-gradient(90deg,var(--hh-yellow) 0 44px,var(--hh-edge-hot) 44px 160px,rgba(255,122,0,.18) 42%,rgba(255,122,0,.10) calc(100% - 64px),transparent calc(100% - 64px)) left bottom/100% 1px no-repeat;
}
/* Eyebrow (hub) and status chip (guides): chamfered tags. The chip is a real status: every guide calls its relay
   experimental, so the diamond is attention-yellow and static (no "live" claim the page cannot back). */
html.hunter-hud[data-hud-family="online"] .eyebrow,
html.hunter-hud[data-hud-family="online"] .status-pill{
  gap:10px;padding:7px 12px;border:1px solid var(--hh-edge-2);border-radius:0;
  color:var(--hh-yellow);background:linear-gradient(180deg,rgba(20,14,8,.95),rgba(8,6,4,.95));
  font:700 10px/1.3 var(--hh-font-hud);letter-spacing:.28em;text-transform:uppercase;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  box-shadow:inset 0 1px rgba(255,190,100,.10),inset 0 -8px 14px -10px rgba(0,0,0,.8);
}
html.hunter-hud[data-hud-family="online"] .eyebrow::before{
  content:'';flex:0 0 18px;height:2px;background:var(--hh-orange);box-shadow:0 0 10px rgba(255,122,0,.8);
}
html.hunter-hud[data-hud-family="online"] .eyebrow::after{
  content:'';flex:0 0 5px;height:5px;background:var(--hh-yellow);transform:rotate(45deg);opacity:.8;
}
html.hunter-hud[data-hud-family="online"] .status-pill::before{
  width:8px;height:8px;border-radius:0;transform:rotate(45deg);
  background:var(--hh-yellow);box-shadow:0 0 10px rgba(255,196,0,.75);
}
html.hunter-hud[data-hud-family="online"] .status-pill::after{
  content:'// EXPERIMENTAL';content:'// EXPERIMENTAL' / '';margin-left:2px;padding-left:10px;border-left:1px solid var(--hh-edge-2);
  font:700 10px/1 var(--hh-font-mono);letter-spacing:.18em;color:var(--hh-yellow-2);
}
html.hunter-hud[data-hud-family="online"] .hero-copy > p{
  max-width:62ch;color:var(--hh-ink-2);
  font-size:clamp(1rem,.35vw + .95rem,1.17rem);line-height:1.64;
}
html.hunter-hud[data-hud-family="online"] .hero-copy > p strong{color:var(--hh-yellow-2)}

/* ---------- Hero actions: a command stack ----------
   Exactly one primary per view. With three actions the primary takes its own row and the two routes sit under it
   (a zero-height flex break reordered between them), so the wrap is designed instead of accidental. */
html.hunter-hud[data-hud-family="online"] .hero-actions{align-items:center;gap:12px 10px}
html.hunter-hud[data-hud-family="online"] .hero-actions:has(> .button:nth-child(3)){row-gap:0}
html.hunter-hud[data-hud-family="online"] .hero-actions:has(> .button:nth-child(3))::after{content:'';flex:0 0 100%;height:0;order:1}
html.hunter-hud[data-hud-family="online"] .hero-actions:has(> .button:nth-child(3)) > .button:first-child{order:0}
html.hunter-hud[data-hud-family="online"] .hero-actions:has(> .button:nth-child(3)) > .button:not(:first-child){order:2;margin-top:12px}
html.hunter-hud[data-hud-family="online"] .button{
  gap:9px;min-height:46px;padding:12px 18px;font-size:.84rem;
  letter-spacing:.075em!important;font-variant-numeric:tabular-nums;
  box-shadow:none;
  transition:color .18s,background-color .18s,border-color .2s,box-shadow .24s,transform .12s,translate .24s var(--hh-ease-out)!important;
}
html.hunter-hud[data-hud-family="online"] .button::before{
  content:'';width:6px;height:6px;flex:0 0 6px;transform:rotate(45deg);
  background:var(--hh-orange);opacity:.9;transition:transform .24s var(--hh-ease-out);
}
/* Routes (every non-primary button): quieter carbon, a stepping chevron as the "go" marker. */
html.hunter-hud[data-hud-family="online"] .button:not(.hh-primary)::after{
  content:'\203A';content:'\203A' / '';margin-left:4px;
  font:700 17px/1 var(--hh-font-mono);color:var(--hh-orange-2);
  transition:transform .24s var(--hh-ease-out),color .18s;
}
html.hunter-hud[data-hud-family="online"] .button.hh-btn:not(.hh-primary){
  background:linear-gradient(180deg,rgba(28,21,12,.92),rgba(10,8,5,.92))!important;
  box-shadow:inset 0 1px rgba(255,190,100,.08),inset 0 -10px 18px -14px rgba(0,0,0,.9)!important;
}
/* Hover moves three things together: edge light, inner glow, a 1 px lift (translate, so the core :active press
   and the reveal fill never fight it). */
html.hunter-hud[data-hud-family="online"] .button.hh-btn:hover{translate:0 -1px}
html.hunter-hud[data-hud-family="online"] .button.hh-btn:not(.hh-primary):hover{
  background:linear-gradient(180deg,rgba(44,29,12,.95),rgba(20,13,7,.95))!important;
  box-shadow:inset 0 0 0 1px rgba(255,122,0,.28),inset 0 -14px 22px -14px rgba(255,122,0,.5),inset 0 1px rgba(255,210,140,.18)!important;
}
html.hunter-hud[data-hud-family="online"] .button:not(.hh-primary):hover::after{transform:translateX(4px);color:var(--hh-yellow)}
html.hunter-hud[data-hud-family="online"] .button:hover::before{transform:rotate(225deg)}
/* The primary: a heavier power button (taller, wider tracking, a dark diamond seated in the yellow). */
html.hunter-hud[data-hud-family="online"] .button.hh-primary{
  min-height:52px;padding:14px 24px 14px 20px;font-size:.86rem;letter-spacing:.09em!important;
}
html.hunter-hud[data-hud-family="online"] .button.hh-primary::before{width:7px;height:7px;flex-basis:7px;background:#170900;opacity:.85}
/* Hero note (DS guide): a recessed well with an attention rail. */
html.hunter-hud[data-hud-family="online"] .hero-note{
  position:relative;max-width:62ch;margin-top:20px!important;padding:11px 16px 11px 34px;
  border:1px solid var(--hh-edge);border-left:2px solid var(--hh-yellow);
  color:var(--hh-dim)!important;font-size:.9rem!important;line-height:1.55;
  background:linear-gradient(180deg,rgba(3,3,2,.85),rgba(12,9,6,.8));
  box-shadow:inset 0 2px 10px rgba(0,0,0,.75),inset 0 -1px rgba(255,170,80,.06);
}
html.hunter-hud[data-hud-family="online"] .hero-note::before{
  content:'';position:absolute;left:13px;top:18px;width:9px;height:9px;
  background:var(--on-dia-yellow) center/9px 9px no-repeat;filter:drop-shadow(0 0 5px rgba(255,196,0,.6));
}

/* ---------- Plate material, three weights ----------
   The core .hh-plate background is one !important shorthand, so the family re-declares it with its own layers on top.
   --on-plate-core repeats the core layers (pointer light, lit diagonal cuts, orange brackets). It is declared on the
   plate itself so var(--mx/--my), written inline by hunter-hud.js, resolves per element. */
html.hunter-hud[data-hud-family="online"] :where(.card,.step,.faq details,.fact-table,.notice,.hero-art){
  --cut:12px;
  border:1px solid var(--panel-edge,var(--hh-edge-2))!important;
  --on-plate-core:
    radial-gradient(340px circle at var(--mx,-999px) var(--my,-999px),rgba(255,140,30,.10),transparent 65%),
    linear-gradient(to bottom right,transparent calc(50% - .9px),var(--panel-cut,var(--hh-edge-hot)) calc(50% - .9px) calc(50% + .9px),transparent calc(50% + .9px)) top left/var(--cut) var(--cut) no-repeat border-box,
    linear-gradient(to bottom right,transparent calc(50% - .9px),var(--panel-cut,var(--hh-edge-hot)) calc(50% - .9px) calc(50% + .9px),transparent calc(50% + .9px)) bottom right/var(--cut) var(--cut) no-repeat border-box,
    linear-gradient(var(--panel-accent,var(--hh-orange)),var(--panel-accent,var(--hh-orange))) top right/20px 3px no-repeat border-box,
    linear-gradient(var(--panel-accent,var(--hh-orange)),var(--panel-accent,var(--hh-orange))) top right/3px 20px no-repeat border-box,
    linear-gradient(var(--panel-accent,var(--hh-orange)),var(--panel-accent,var(--hh-orange))) bottom left/20px 3px no-repeat border-box,
    linear-gradient(var(--panel-accent,var(--hh-orange)),var(--panel-accent,var(--hh-orange))) bottom left/3px 20px no-repeat border-box;
  /* lit top edge: light catching the upper lip of the plate */
  --on-lip:linear-gradient(90deg,transparent 8px,rgba(255,206,140,.30) 18%,rgba(255,150,60,.10) 55%,transparent 85%) top left/100% 1px no-repeat padding-box;
  /* rivets seated in the crook of each orange bracket */
  --on-rivets:
    radial-gradient(circle at 50% 42%,#c08744 0 .7px,#4a3216 1.2px 1.9px,transparent 2.4px) right 6px top 6px/6px 6px no-repeat border-box,
    radial-gradient(circle at 50% 42%,#c08744 0 .7px,#4a3216 1.2px 1.9px,transparent 2.4px) left 6px bottom 6px/6px 6px no-repeat border-box;
  --on-base:linear-gradient(165deg,var(--panel-top,#19120a),var(--panel-bottom,#0a0807) 72%);
  --on-depth:inset 0 1px rgba(255,196,120,.09),inset 0 0 0 1px rgba(0,0,0,.42),inset 0 -30px 44px -34px rgba(0,0,0,.95);
  border-radius:0!important;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  box-shadow:var(--on-depth)!important;
  backdrop-filter:none!important;
}

/* ---------- Hero art: the scope (heavy plate) ---------- */
html.hunter-hud[data-hud-family="online"] .hero-art{
  --cut:16px;--panel-top:#130e09;--panel-bottom:#060504;
  isolation:isolate;
  border:1px solid var(--hh-edge-2)!important;
  /* per-page channel readouts are real values from each guide; this is the generic fallback */
  --on-scope-label:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='14'%3E%3Ctext x='0' y='10' font-family='Consolas,Share Tech Mono,monospace' font-size='9.5' font-weight='700' letter-spacing='2.3' fill='%23a58a66'%3E// BROWSER RELAY%3C/text%3E%3C/svg%3E");
  background:
    var(--on-plate-core),
    var(--on-rivets),
    radial-gradient(circle at 50% 42%,#c08744 0 .7px,#4a3216 1.2px 1.9px,transparent 2.4px) left 22px top 6px/6px 6px no-repeat border-box,
    radial-gradient(circle at 50% 42%,#c08744 0 .7px,#4a3216 1.2px 1.9px,transparent 2.4px) right 22px bottom 6px/6px 6px no-repeat border-box,
    var(--on-scope-label) left 28px top 24px/320px 14px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='14'%3E%3Ctext x='72' y='10' text-anchor='end' font-family='Consolas,Share Tech Mono,monospace' font-size='9.5' font-weight='700' letter-spacing='2.3' fill='%23ffc400'%3EBETA%3C/text%3E%3Cpath d='M84 2.5 88.5 7 84 11.5 79.5 7Z' fill='%23ffc400'/%3E%3C/svg%3E") right 26px bottom 22px/90px 14px no-repeat,
    /* crosshair through the screen */
    linear-gradient(90deg,transparent 15px,rgba(255,122,0,.13) 15px calc(100% - 15px),transparent calc(100% - 15px)) center/100% 1px no-repeat,
    linear-gradient(180deg,transparent 15px,rgba(255,122,0,.13) 15px calc(100% - 15px),transparent calc(100% - 15px)) center/1px 100% no-repeat,
    /* ruler ticks down the left edge of the screen */
    repeating-linear-gradient(180deg,rgba(255,150,50,.42) 0 1px,transparent 1px 9px) left 20px center/5px 46% no-repeat,
    repeating-linear-gradient(180deg,rgba(255,150,50,.42) 0 1px,transparent 1px 9px) right 20px center/5px 46% no-repeat,
    /* graticule */
    repeating-linear-gradient(90deg,rgba(255,122,0,.05) 0 1px,transparent 1px 30px) center/calc(100% - 30px) calc(100% - 30px) no-repeat,
    repeating-linear-gradient(180deg,rgba(255,122,0,.05) 0 1px,transparent 1px 30px) center/calc(100% - 30px) calc(100% - 30px) no-repeat,
    /* recessed screen: opaque well, inner shadow at the top lip, lit bottom lip, framed by a hairline bezel */
    linear-gradient(180deg,rgba(0,0,0,.75),transparent 12px,transparent calc(100% - 1px),rgba(255,170,80,.10) calc(100% - 1px)) center/calc(100% - 30px) calc(100% - 30px) no-repeat,
    radial-gradient(ellipse 70% 60% at 50% 45%,#120c07,#050403 80%) center/calc(100% - 30px) calc(100% - 30px) no-repeat,
    linear-gradient(rgba(255,150,60,.2),rgba(255,150,60,.2)) center/calc(100% - 28px) calc(100% - 28px) no-repeat,
    var(--on-lip),
    var(--on-base)!important;
  box-shadow:var(--on-depth)!important;
}
html.hunter-hud[data-hud-family="online"] .hero-art:has(img[src*="nds-v1"]){
  --on-scope-label:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='14'%3E%3Ctext x='0' y='10' font-family='Consolas,Share Tech Mono,monospace' font-size='9.5' font-weight='700' letter-spacing='2.3' fill='%23a58a66'%3E// NINTENDO WFC %C2%B7 melonAP%3C/text%3E%3C/svg%3E");
}
html.hunter-hud[data-hud-family="online"] .hero-art:has(img[src*="psp-v1"]){
  --on-scope-label:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='14'%3E%3Ctext x='0' y='10' font-family='Consolas,Share Tech Mono,monospace' font-size='9.5' font-weight='700' letter-spacing='2.3' fill='%23a58a66'%3E// AD HOC %C2%B7 OLDGAMES BROWSER RELAY%3C/text%3E%3C/svg%3E");
}
html.hunter-hud[data-hud-family="online"] .hero-art:has(img[src*="og-image"]){
  --on-scope-label:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='14'%3E%3Ctext x='0' y='10' font-family='Consolas,Share Tech Mono,monospace' font-size='9.5' font-weight='700' letter-spacing='2.3' fill='%23a58a66'%3E// DS WI-FI %C2%B7 PSP AD HOC%3C/text%3E%3C/svg%3E");
}
/* Reticle + radar sweep: dashed inner ring, solid outer ring (outline), a conic wedge that turns once every 5.6 s.
   This is the page's single ambient loop. */
html.hunter-hud[data-hud-family="online"] .hero-art::before{
  width:236px;height:236px;z-index:0;
  border:1px dashed rgba(255,196,0,.40);border-radius:50%;
  outline:1px solid rgba(255,122,0,.30);outline-offset:15px;
  background:conic-gradient(from 0deg,transparent 0deg 240deg,rgba(255,122,0,.04) 280deg,rgba(255,150,30,.17) 345deg,rgba(255,220,120,.55) 359deg,transparent 360deg);
  box-shadow:inset 0 0 60px rgba(255,122,0,.08),0 0 26px rgba(255,122,0,.08);
  animation:hh-spin 5.6s linear infinite;animation-play-state:var(--hud-play);
}
/* Echo blip: sits 48 deg clockwise from twelve o'clock, so it flares at 13.4% of the sweep period, exactly when the
   leading edge crosses it, then decays. */
html.hunter-hud[data-hud-family="online"] .hero-art::after{
  left:calc(50% + 58px);top:calc(50% - 52px);right:auto;bottom:auto;z-index:3;
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:0;transform:rotate(45deg);
  background:var(--hh-yellow-2);box-shadow:0 0 9px 1px rgba(255,196,0,.5);opacity:.85;
  animation:on-blip 5.6s linear infinite;animation-play-state:var(--hud-play);
}
/* Hub art is a 190 px square that would cover that spot: park the blip just outside it (80 deg, 0.5 s later). */
html.hunter-hud[data-hud-family="online"] .hero-art:has(img[src*="og-image"])::after{
  left:calc(50% + 105px);top:calc(50% - 18px);animation-delay:.5s;
}
@keyframes on-blip{
  0%,13.2%{opacity:.16;transform:rotate(45deg) scale(.75)}
  13.8%{opacity:1;transform:rotate(45deg) scale(1.45)}
  38%{opacity:.55;transform:rotate(45deg) scale(1)}
  72%,100%{opacity:.16;transform:rotate(45deg) scale(.75)}
}
html.hunter-hud[data-hud-family="online"] .hero-art img{position:relative;z-index:2}
/* The monitor holds still (no float); the picture acquires with one flicker when the page opens. */
html.hunter-hud[data-hud-family="online"] .hero-art img{
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(255,122,0,.25));
  animation:hh-flicker .9s linear .45s both;
}
/* The /online/ hero bitmap is generic collection art: chamfer + hairline edge and an ember duotone.
   og-image.png is 563x563, so the element is sized to the bitmap (not the 300x169 letterbox of the HTML attributes). */
html.hunter-hud[data-hud-family="online"] .hero-art img[src*="og-image"]{
  width:auto;height:min(190px,52vw);max-width:78%;max-height:none;aspect-ratio:1/1;object-fit:cover;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  border:1px solid var(--hh-edge-2);
  filter:grayscale(1) sepia(1) saturate(4.2) hue-rotate(-22deg) brightness(.82) contrast(1.12)
         drop-shadow(0 22px 26px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(255,122,0,.35));
}
/* The Nintendo DS / PSP wordmark SVGs keep their shape and take a light ember wash. */
html.hunter-hud[data-hud-family="online"] .hero-art img:not([src*="og-image"]){
  filter:sepia(.55) saturate(1.6) hue-rotate(-14deg) brightness(.96)
         drop-shadow(0 18px 22px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(255,122,0,.3));
}

/* ---------- Ops strip: the board's header row, built from facts all three guides state ---------- */
html.hunter-hud[data-hud-family="online"] .page-shell{counter-reset:hud-sec}
html.hunter-hud[data-hud-family="online"] .page-shell::before{
  content:'\25C6  RELAY // BETA     \2502     MATCHMAKING // NEEDS A SECOND PLAYER     \2502     AFFILIATION // INDEPENDENT';
  content:'\25C6  RELAY // BETA     \2502     MATCHMAKING // NEEDS A SECOND PLAYER     \2502     AFFILIATION // INDEPENDENT' / '';
  display:block;overflow:hidden;white-space:pre;text-overflow:ellipsis;
  margin:0 0 26px;padding:10px 0 10px 14px;
  border-top:1px solid var(--hh-edge);border-bottom:1px solid var(--hh-edge);border-left:2px solid var(--hh-yellow);
  font:700 10px/1.4 var(--hh-font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--hh-dim);
  background:
    linear-gradient(90deg,rgba(255,122,0,.08),rgba(255,122,0,.02) 45%,transparent 80%),
    linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0));
  box-shadow:inset calc(15 * (1ch + .2em) + 26px) 0 0 rgba(255,196,0,.07),inset 0 1px rgba(255,190,110,.05);
}
/* the first glyph of the strip is its status diamond: attention yellow */
html.hunter-hud[data-hud-family="online"] .page-shell::first-letter{color:var(--hh-yellow);text-shadow:0 0 8px rgba(255,196,0,.7)}

/* ---------- Notices: an advisory stack. Attention first (heavier, hazard rail), membership second (quiet) ---------- */
html.hunter-hud[data-hud-family="online"] .notice{
  --cut:10px;--panel-top:#1a1308;--panel-bottom:#0b0806;--panel-edge:rgba(255,171,31,.38);--panel-accent:var(--hh-amber);--panel-cut:#8a6512;
  position:relative;margin-bottom:10px;padding:16px 24px 17px 30px;color:var(--hh-ink-2);line-height:1.6;
  background:var(--on-plate-core),var(--on-lip),var(--on-base)!important;
}
html.hunter-hud[data-hud-family="online"] .notice + .notice{margin-bottom:40px}
html.hunter-hud[data-hud-family="online"] .notice::before{
  content:'ATTENTION // ADVISORY';content:'ATTENTION // ADVISORY' / '';
  display:block;width:fit-content;margin-bottom:7px;padding-left:15px;
  font:700 9.5px/1.2 var(--hh-font-mono);letter-spacing:.24em;color:var(--hh-yellow);
  background:var(--on-dia-yellow) left center/8px 8px no-repeat;
}
/* hazard rail down the left edge */
html.hunter-hud[data-hud-family="online"] .notice::after{
  content:'';position:absolute;left:10px;top:16px;bottom:16px;width:4px;opacity:.7;
  background:var(--on-hazard);
}
html.hunter-hud[data-hud-family="online"] .notice strong{color:var(--hh-yellow-2)}
html.hunter-hud[data-hud-family="online"] .notice:has(a[href*="subscription"]){
  --panel-top:#140f09;--panel-bottom:#0a0807;--panel-edge:var(--hh-edge-2);--panel-accent:var(--hh-orange);--panel-cut:var(--hh-edge-hot);
  color:var(--hh-dim);
}
html.hunter-hud[data-hud-family="online"] .notice:has(a[href*="subscription"])::before{
  content:'MEMBERS // RELAY FUNDING';content:'MEMBERS // RELAY FUNDING' / '';color:var(--hh-orange-2);
  background-image:var(--on-dia-orange);
}
html.hunter-hud[data-hud-family="online"] .notice:has(a[href*="subscription"])::after{
  width:2px;left:11px;opacity:1;background:linear-gradient(180deg,var(--hh-orange),rgba(255,122,0,.15))
}
html.hunter-hud[data-hud-family="online"] .notice:has(a[href*="subscription"]) strong{color:var(--hh-ink)}
html.hunter-hud[data-hud-family="online"] .notice a{font-weight:600;white-space:nowrap}
html.hunter-hud[data-hud-family="online"] .notice a::after{content:' \203A';content:' \203A' / ''}

/* ---------- Section headers: // SEC nn / total over the title, a bus bar under it with a real count readout ---------- */
html.hunter-hud[data-hud-family="online"] .page-shell:has(> section:nth-of-type(3):last-of-type){--sec-total:' / 03'}
html.hunter-hud[data-hud-family="online"] .page-shell:has(> section:nth-of-type(4):last-of-type){--sec-total:' / 04'}
html.hunter-hud[data-hud-family="online"] .page-shell:has(> section:nth-of-type(5):last-of-type){--sec-total:' / 05'}
html.hunter-hud[data-hud-family="online"] .page-shell:has(> section:nth-of-type(6):last-of-type){--sec-total:' / 06'}
html.hunter-hud[data-hud-family="online"] .section{counter-increment:hud-sec;position:relative;padding:44px 0}
html.hunter-hud[data-hud-family="online"] .section > h2::before{
  content:'// SEC ' counter(hud-sec,decimal-leading-zero) var(--sec-total,'');
  content:'// SEC ' counter(hud-sec,decimal-leading-zero) var(--sec-total,'') / '';
  display:block;margin-bottom:12px;
  font:700 10px/1.2 var(--hh-font-mono);letter-spacing:.3em;color:var(--hh-yellow);text-shadow:none;
  font-stretch:normal;
}
html.hunter-hud[data-hud-family="online"] .section > h2::after{
  content:var(--sec-readout,'');content:var(--sec-readout,'') / '';
  display:block;height:18px;margin-top:14px;padding-bottom:6px;
  font:700 9.5px/12px var(--hh-font-mono);letter-spacing:.22em;text-align:right;color:var(--hh-muted);text-shadow:none;
  font-stretch:normal;
  background:
    linear-gradient(90deg,var(--hh-yellow),var(--hh-orange)) left bottom/64px 2px no-repeat,
    repeating-linear-gradient(90deg,var(--hh-edge-hot) 0 1px,transparent 1px 6px) right bottom/48px 5px no-repeat,
    linear-gradient(90deg,var(--hh-edge-2),var(--hh-edge) 55%,rgba(51,36,15,.2)) left bottom/100% 1px no-repeat;
}
html.hunter-hud[data-hud-family="online"] .section:has(> .steps > .step:nth-child(3):last-child){--sec-readout:'03 HOPS // SIGNAL CHAIN'}
html.hunter-hud[data-hud-family="online"] .section:has(> .steps > .step:nth-child(4):last-child){--sec-readout:'04 HOPS // SIGNAL CHAIN'}
html.hunter-hud[data-hud-family="online"] .section:has(> .card-grid > .card:nth-child(2):last-child){--sec-readout:'02 SYSTEMS // BETA'}
html.hunter-hud[data-hud-family="online"] .section:has(> .card-grid > .card:nth-child(4):last-child){--sec-readout:'04 CHECKS'}
html.hunter-hud[data-hud-family="online"] .section:has(> .card-grid > .card:nth-child(5):last-child){--sec-readout:'05 CHECKS'}
html.hunter-hud[data-hud-family="online"] .section:has(> .fact-table tr:nth-child(4):last-child){--sec-readout:'04 LINES // READOUT'}
html.hunter-hud[data-hud-family="online"] .section:has(> .fact-table tr:nth-child(5):last-child){--sec-readout:'05 LINES // READOUT'}
html.hunter-hud[data-hud-family="online"] .section:has(> .faq > details:nth-child(3):last-child){--sec-readout:'03 QUERIES'}
html.hunter-hud[data-hud-family="online"] .section:has(> .faq > details:nth-child(4):last-child){--sec-readout:'04 QUERIES'}

/* ---------- DS test result: two log entries with the outcome each paragraph states ---------- */
html.hunter-hud[data-hud-family="online"] .section[aria-labelledby="mario-title"] > p{
  padding-left:18px;border-left:1px solid rgba(166,255,77,.35);
}
html.hunter-hud[data-hud-family="online"] .section[aria-labelledby="mario-title"] > p + p{border-left-color:rgba(255,196,0,.4)}
html.hunter-hud[data-hud-family="online"] .section[aria-labelledby="mario-title"] > p::before{
  display:block;width:fit-content;margin-bottom:8px;padding-left:15px;
  font:700 9.5px/1.3 var(--hh-font-mono);letter-spacing:.2em;
  background:left center/8px 8px no-repeat;
}
html.hunter-hud[data-hud-family="online"] .section[aria-labelledby="mario-title"] > p:nth-of-type(1)::before{
  content:'RELAY PATH // CONFIRMED';content:'RELAY PATH // CONFIRMED' / '';color:var(--hh-visor);background-image:var(--on-dia-visor);
}
html.hunter-hud[data-hud-family="online"] .section[aria-labelledby="mario-title"] > p:nth-of-type(2)::before{
  content:'RACE // NEEDS A SECOND PLAYER';content:'RACE // NEEDS A SECOND PLAYER' / '';color:var(--hh-yellow);background-image:var(--on-dia-yellow);
}

/* ---------- Steps: a signal chain ----------
   Geometry (desktop): 1px border + 24px padding + 38px port block, so the port centre sits on border-box rows 43-44.
   The conduit in the column gaps (.steps::before), the input stub (h3::before) and the in-plate rail (.step::after)
   all share those rows, so the chain reads as one line through every hop. */
html.hunter-hud[data-hud-family="online"] .steps{position:relative;--hop-total:'03';filter:drop-shadow(0 14px 16px rgba(0,0,0,.5))}
html.hunter-hud[data-hud-family="online"] .steps:has(> .step:nth-child(4)){--hop-total:'04'}
html.hunter-hud[data-hud-family="online"] .steps:has(> .step:nth-child(5)){--hop-total:'05'}
html.hunter-hud[data-hud-family="online"] .steps::before{
  content:'';position:absolute;left:0;right:0;top:43px;height:2px;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--hh-orange) 0 6px,transparent 6px 10px);opacity:.7;
}
html.hunter-hud[data-hud-family="online"] .step{
  --cut:12px;--panel-top:#1a120a;--panel-bottom:#090706;
  --rail-c:var(--hh-edge-hot);--hop-led:var(--on-dia-dim);
  background:var(--on-plate-core),var(--on-rivets),var(--on-lip),var(--on-base)!important;
  outline:1px solid rgba(255,150,60,.06);outline-offset:-6px;
  transition:border-color .22s,box-shadow .26s,translate .32s var(--hh-ease-out);
}
html.hunter-hud[data-hud-family="online"] .step:last-child{--hop-led:var(--on-dia-hollow)}
/* port block: idle carbon with orange digits; the first hop is the yellow "start here" port */
html.hunter-hud[data-hud-family="online"] .step::before{
  content:counter(guide-step,decimal-leading-zero);
  position:relative;z-index:1;width:38px;height:38px;margin-bottom:20px;border-radius:0;
  color:var(--hh-orange-2);background:linear-gradient(180deg,#140e08,#070504);
  font:700 16px/1 var(--hh-font-mono);letter-spacing:.02em;font-variant-numeric:tabular-nums;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  /* four inset layers in every state (ring, fill, glow, lip) so the fill closes in smoothly instead of snapping */
  box-shadow:inset 0 0 0 1px var(--hh-edge-hot),inset 0 0 0 0 rgba(255,152,32,0),inset 0 0 0 0 rgba(255,122,0,0),inset 0 3px 8px rgba(0,0,0,.8);
  transition:color .2s,box-shadow .3s var(--hh-ease-out);
}
html.hunter-hud[data-hud-family="online"] .step:hover::before,
html.hunter-hud[data-hud-family="online"] .steps:not(:has(> .step:hover)) > .step:first-child::before{
  color:#170900;
  box-shadow:inset 0 0 0 1px #ffd24d,inset 0 0 0 20px var(--hh-yellow),inset 0 -16px 14px -4px var(--hh-orange),inset 0 1px 0 rgba(255,255,255,.6);
}
html.hunter-hud[data-hud-family="online"] .step:has(~ .step:hover)::before{
  color:var(--hh-visor);
  box-shadow:inset 0 0 0 1px rgba(166,255,77,.55),inset 0 0 0 0 rgba(166,255,77,0),inset 0 0 14px rgba(166,255,77,.16),inset 0 3px 8px rgba(0,0,0,.8);
}
/* hop readout + rail + output LED */
html.hunter-hud[data-hud-family="online"] .step::after{
  content:'HOP ' counter(guide-step,decimal-leading-zero) ' / ' var(--hop-total);
  content:'HOP ' counter(guide-step,decimal-leading-zero) ' / ' var(--hop-total) / '';
  position:absolute;left:76px;right:12px;top:36px;height:14px;
  font:700 9.5px/14px var(--hh-font-mono);letter-spacing:.2em;color:var(--hh-muted);white-space:nowrap;
  background:
    var(--hop-led) right 3px center/10px 10px no-repeat,
    linear-gradient(90deg,var(--rail-c),rgba(138,82,18,.45)) right 19px center/calc(100% - 11 * (1ch + .2em) - 30px) 2px no-repeat;
  transition:color .2s;
}
/* input stub: from the plate edge into the port (the first hop has no input) */
html.hunter-hud[data-hud-family="online"] .step h3::before{
  content:'';position:absolute;left:0;top:42px;width:24px;height:2px;
  background:repeating-linear-gradient(90deg,var(--hh-orange) 0 6px,transparent 6px 10px);opacity:.7;
}
html.hunter-hud[data-hud-family="online"] .step:first-child h3::before{display:none}
/* LED overlay: green when the signal has passed this hop, yellow on the hop you are reading */
html.hunter-hud[data-hud-family="online"] .step h3::after{
  content:'';position:absolute;right:15px;top:38px;z-index:2;width:10px;height:10px;opacity:0;
  background:var(--on-dia-visor) center/10px 10px no-repeat;
  filter:drop-shadow(0 0 5px rgba(166,255,77,.9));
  transition:opacity .22s;
}
html.hunter-hud[data-hud-family="online"] .step:has(~ .step:hover){--rail-c:rgba(166,255,77,.6);--panel-edge:rgba(166,255,77,.26)}
html.hunter-hud[data-hud-family="online"] .step:has(~ .step:hover)::after{color:var(--hh-visor)}
html.hunter-hud[data-hud-family="online"] .step:has(~ .step:hover) h3::after{opacity:1}
html.hunter-hud[data-hud-family="online"] .step:hover{
  --rail-c:var(--hh-yellow);--panel-edge:var(--hh-orange);--panel-top:#21160a;
  translate:0 -2px;
  box-shadow:var(--on-depth),inset 0 0 44px rgba(255,122,0,.10)!important;
}
html.hunter-hud[data-hud-family="online"] .step:hover::after{color:var(--hh-yellow-2)}
html.hunter-hud[data-hud-family="online"] .step:hover h3::after{
  opacity:1;background-image:var(--on-dia-yellow);filter:drop-shadow(0 0 6px rgba(255,196,0,.9));
}
/* Four hops on a three-column grid: hop 04 wraps, so a return cable drops out of hop 03's output LED, runs back
   along the row gap and drops into hop 04's input. Pieces: hop 03 p::after (inside the plate), a grid-placed
   .steps::after (in the gap, painted under the positioned plates) and hop 04 p::before (inside the plate).
   Output LED centre = 21 px in from a plate's right border edge; the gap is the page's 16 px. */
@media (min-width:801px){
  html.hunter-hud[data-hud-family="online"] .steps:has(> .step:nth-child(4):last-child)::after{
    content:'';grid-row:2;grid-column:2 / 4;align-self:stretch;
    margin:-16px 0 0 calc(-50% - 8px);pointer-events:none;opacity:.7;
    background:
      linear-gradient(var(--hh-orange),var(--hh-orange)) right 20px top 0/2px 9px no-repeat,
      repeating-linear-gradient(270deg,var(--hh-orange) 0 6px,transparent 6px 10px) left 7px top 7px/calc(100% - 27px) 2px no-repeat,
      linear-gradient(var(--hh-orange),var(--hh-orange)) left 7px top 7px/2px 9px no-repeat;
  }
  html.hunter-hud[data-hud-family="online"] .steps:has(> .step:nth-child(4):last-child) > .step:nth-child(3) p::after{
    content:'';position:absolute;right:19px;top:50px;bottom:-1px;width:2px;opacity:.7;
    background:repeating-linear-gradient(180deg,var(--hh-orange) 0 6px,transparent 6px 10px);
  }
  html.hunter-hud[data-hud-family="online"] .steps:has(> .step:nth-child(4):last-child) > .step:nth-child(4) p::before{
    content:'';position:absolute;left:6px;top:-1px;width:2px;height:45px;opacity:.7;
    background:repeating-linear-gradient(180deg,var(--hh-orange) 0 6px,transparent 6px 10px);
  }
  html.hunter-hud[data-hud-family="online"] .steps:has(> .step:nth-child(4):last-child) > .step:nth-child(4) h3::before{left:6px;width:18px}
}
html.hunter-hud[data-hud-family="online"] .step:focus-within{--panel-edge:var(--hh-yellow)}
html.hunter-hud[data-hud-family="online"] .step h3{margin-bottom:9px}
html.hunter-hud[data-hud-family="online"] .step p{color:var(--hh-dim);line-height:1.62}
html.hunter-hud[data-hud-family="online"] .step p strong{color:var(--hh-ink)}

/* ---------- Cards: system checks ----------
   Troubleshooting cards are checks the reader has to verify: CHK nn / total and a hollow attention diamond that
   fills while the check is being read. Cards that route somewhere (a .button) are systems: SYS nn / total, BETA. */
html.hunter-hud[data-hud-family="online"] .card-grid{counter-reset:on-card;filter:drop-shadow(0 14px 16px rgba(0,0,0,.5))}
html.hunter-hud[data-hud-family="online"] .card-grid:has(> .card:nth-child(2):last-child){--card-total:' / 02'}
html.hunter-hud[data-hud-family="online"] .card-grid:has(> .card:nth-child(3):last-child){--card-total:' / 03'}
html.hunter-hud[data-hud-family="online"] .card-grid:has(> .card:nth-child(4):last-child){--card-total:' / 04'}
html.hunter-hud[data-hud-family="online"] .card-grid:has(> .card:nth-child(5):last-child){--card-total:' / 05'}
html.hunter-hud[data-hud-family="online"] .card-grid:has(> .card:nth-child(6):last-child){--card-total:' / 06'}
html.hunter-hud[data-hud-family="online"] .card{
  --cut:12px;--panel-top:#16100a;--panel-bottom:#090706;
  counter-increment:on-card;position:relative;overflow:hidden;
  background:var(--on-plate-core),var(--on-lip),var(--on-base)!important;
  transition:border-color .22s,box-shadow .26s,translate .32s var(--hh-ease-out);
}
html.hunter-hud[data-hud-family="online"] .card:has(> .button){
  --panel-top:#1c140b;
  background:var(--on-plate-core),var(--on-rivets),var(--on-lip),var(--on-base)!important;
  outline:1px solid rgba(255,150,60,.06);outline-offset:-6px;
}
html.hunter-hud[data-hud-family="online"] .card:hover{
  --panel-edge:var(--hh-orange);--panel-top:#22160a;
  translate:0 -2px;
  box-shadow:var(--on-depth),inset 0 0 44px rgba(255,122,0,.10)!important;
}
html.hunter-hud[data-hud-family="online"] .card:focus-within{--panel-edge:var(--hh-yellow)}
/* recessed header band (the second surface of the plate) */
html.hunter-hud[data-hud-family="online"] .card-kicker{
  display:flex;align-items:center;gap:12px;
  margin:-25px -25px 18px;padding:12px 22px 11px 25px;
  border-bottom:1px solid var(--hh-edge);
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.24));
  box-shadow:inset 0 -1px rgba(255,170,80,.06),inset 0 7px 10px -7px rgba(0,0,0,.9);
  font:700 10.5px/1.2 var(--hh-font-hud);letter-spacing:.22em;text-transform:uppercase;color:var(--hh-yellow-2);
}
html.hunter-hud[data-hud-family="online"] .card-kicker::before{
  content:'CHK ' counter(on-card,decimal-leading-zero) var(--card-total,'');
  content:'CHK ' counter(on-card,decimal-leading-zero) var(--card-total,'') / '';
  padding-right:12px;border-right:1px solid var(--hh-edge-2);
  font:700 9.5px/1.2 var(--hh-font-mono);letter-spacing:.16em;color:var(--hh-muted);white-space:nowrap;
}
html.hunter-hud[data-hud-family="online"] .card:has(> .button) .card-kicker::before{
  content:'SYS ' counter(on-card,decimal-leading-zero) var(--card-total,'');
  content:'SYS ' counter(on-card,decimal-leading-zero) var(--card-total,'') / '';
}
html.hunter-hud[data-hud-family="online"] .card-kicker::after{
  content:'CHECK';content:'CHECK' / '';
  margin-left:auto;padding-left:16px;
  font:700 9.5px/1.2 var(--hh-font-mono);letter-spacing:.2em;color:var(--hh-yellow);white-space:nowrap;
  background:var(--on-dia-hollow) left center/10px 10px no-repeat;
  transition:text-shadow .2s;
}
html.hunter-hud[data-hud-family="online"] .card:hover .card-kicker::after{
  background-image:var(--on-dia-yellow);text-shadow:0 0 10px rgba(255,196,0,.6);
}
html.hunter-hud[data-hud-family="online"] .card:has(> .button) .card-kicker::after{
  content:'BETA';content:'BETA' / '';background-image:var(--on-dia-yellow);
}
/* energy line along the top lip, drawn out to full width on hover */
html.hunter-hud[data-hud-family="online"] .card::after{
  content:'';position:absolute;left:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--hh-yellow),var(--hh-orange) 70%,transparent);
  box-shadow:0 0 12px rgba(255,122,0,.65);
  transform:scaleX(.08);transform-origin:left;transition:transform .5s var(--hh-ease-out);
}
html.hunter-hud[data-hud-family="online"] .card:hover::after{transform:scaleX(1)}
html.hunter-hud[data-hud-family="online"] .card h3{margin-bottom:10px}
html.hunter-hud[data-hud-family="online"] .card p{color:var(--hh-dim);line-height:1.62}
html.hunter-hud[data-hud-family="online"] .card p strong{color:var(--hh-ink)}
html.hunter-hud[data-hud-family="online"] .card .button{margin-top:auto}

/* ---------- Fact table: diagnostic readout (heavy plate) ----------
   Indexed lines; the th column is a recessed rail. Rows whose text states an outcome get a diamond and a state word
   (colour is never the only cue): green = confirmed / supported, yellow = partial / limited / required,
   red = not supported / not supplied. The mapping is keyed to each guide's own rows and guarded by structure
   (row count + a link or hero image unique to that guide), so an edited table falls back to neutral lines. */
html.hunter-hud[data-hud-family="online"] .fact-table{
  --cut:14px;--panel-top:#150f08;--panel-bottom:#080605;
  counter-reset:on-row;
  background:var(--on-plate-core),var(--on-rivets),var(--on-lip),var(--on-base)!important;
  outline:1px solid rgba(255,150,60,.06);outline-offset:-6px;
}
html.hunter-hud[data-hud-family="online"] .fact-table tr{counter-increment:on-row;--row-dia:var(--on-dia-orange)}
html.hunter-hud[data-hud-family="online"] .fact-table th,
html.hunter-hud[data-hud-family="online"] .fact-table td{border-bottom:1px solid var(--hh-edge);transition:background-color .2s}
html.hunter-hud[data-hud-family="online"] .fact-table th{
  position:relative;padding:16px 18px 16px 66px;
  color:var(--hh-yellow-2);
  background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.2));
  box-shadow:inset -1px 0 var(--hh-edge),inset -8px 0 12px -10px rgba(0,0,0,.9);
  font:700 12.5px/1.45 var(--hh-font-hud);letter-spacing:.13em;text-transform:uppercase;
}
html.hunter-hud[data-hud-family="online"] .fact-table th::before{
  content:counter(on-row,decimal-leading-zero);content:counter(on-row,decimal-leading-zero) / '';
  position:absolute;left:18px;top:18px;padding-right:17px;
  font:700 10px/14px var(--hh-font-mono);letter-spacing:.08em;color:var(--hh-muted);font-variant-numeric:tabular-nums;
  background:var(--row-dia) right center/9px 9px no-repeat;
}
html.hunter-hud[data-hud-family="online"] .fact-table th::after{
  content:var(--row-state,none);content:var(--row-state,none) / '';
  display:block;margin-top:6px;
  font:700 9.5px/1.2 var(--hh-font-mono);letter-spacing:.2em;color:var(--row-state-c,var(--hh-dim));
}
html.hunter-hud[data-hud-family="online"] .fact-table td{padding:16px 6% 16px 22px;color:var(--hh-ink-2);line-height:1.62}
html.hunter-hud[data-hud-family="online"] .fact-table td strong{color:var(--hh-yellow-2)}
html.hunter-hud[data-hud-family="online"] .fact-table tr:hover td{background:rgba(255,122,0,.035)}
html.hunter-hud[data-hud-family="online"] .fact-table tr:hover th{background:linear-gradient(90deg,rgba(255,122,0,.09),rgba(0,0,0,.2))}
html.hunter-hud[data-hud-family="online"] .fact-table tr:hover th::before{color:var(--hh-yellow)}
/* DS guide (5 lines, Pokémon Platinum on line 4) */
html.hunter-hud[data-hud-family="online"] .fact-table:has(> tbody > tr:nth-child(4) a[href*="pokemon-platinum"]):has(> tbody > tr:nth-child(5):last-child) tr:nth-child(1){--row-dia:var(--on-dia-visor);--row-state:'CONFIRMED';--row-state-c:var(--hh-visor)}
html.hunter-hud[data-hud-family="online"] .fact-table:has(> tbody > tr:nth-child(4) a[href*="pokemon-platinum"]):has(> tbody > tr:nth-child(5):last-child) tr:nth-child(2){--row-dia:var(--on-dia-yellow);--row-state:'PARTIAL \B7  RACE UNVERIFIED';--row-state-c:var(--hh-yellow)}
html.hunter-hud[data-hud-family="online"] .fact-table:has(> tbody > tr:nth-child(4) a[href*="pokemon-platinum"]):has(> tbody > tr:nth-child(5):last-child) tr:nth-child(3){--row-dia:var(--on-dia-yellow);--row-state:'LIMITED \B7  NO IPHONE / IPAD';--row-state-c:var(--hh-yellow)}
html.hunter-hud[data-hud-family="online"] .fact-table:has(> tbody > tr:nth-child(4) a[href*="pokemon-platinum"]):has(> tbody > tr:nth-child(5):last-child) tr:nth-child(4){--row-dia:var(--on-dia-yellow);--row-state:'EXPORT .SAV FIRST';--row-state-c:var(--hh-yellow)}
html.hunter-hud[data-hud-family="online"] .fact-table:has(> tbody > tr:nth-child(4) a[href*="pokemon-platinum"]):has(> tbody > tr:nth-child(5):last-child) tr:nth-child(5){--row-dia:var(--on-dia-red);--row-state:'NOT SUPPLIED';--row-state-c:#ff7a66}
/* PSP guide (5 lines) */
html.hunter-hud[data-hud-family="online"] main:has(.hero-art img[src*="psp-v1"]) .fact-table:has(> tbody > tr:nth-child(5):last-child) tr:nth-child(1){--row-dia:var(--on-dia-visor);--row-state:'SUPPORTED';--row-state-c:var(--hh-visor)}
html.hunter-hud[data-hud-family="online"] main:has(.hero-art img[src*="psp-v1"]) .fact-table:has(> tbody > tr:nth-child(5):last-child) tr:nth-child(2){--row-dia:var(--on-dia-red);--row-state:'NOT SUPPORTED';--row-state-c:#ff7a66}
html.hunter-hud[data-hud-family="online"] main:has(.hero-art img[src*="psp-v1"]) .fact-table:has(> tbody > tr:nth-child(5):last-child) tr:nth-child(3){--row-dia:var(--on-dia-yellow);--row-state:'SAME TITLE \B7  VERSION \B7  REGION';--row-state-c:var(--hh-yellow)}
html.hunter-hud[data-hud-family="online"] main:has(.hero-art img[src*="psp-v1"]) .fact-table:has(> tbody > tr:nth-child(5):last-child) tr:nth-child(4){--row-dia:var(--on-dia-red);--row-state:'NO BOTS \B7  NOT SUPPLIED';--row-state-c:#ff7a66}
html.hunter-hud[data-hud-family="online"] main:has(.hero-art img[src*="psp-v1"]) .fact-table:has(> tbody > tr:nth-child(5):last-child) tr:nth-child(5){--row-dia:var(--on-dia-yellow);--row-state:'DESKTOP / ANDROID';--row-state-c:var(--hh-yellow)}
/* hub comparison (4 lines) */
html.hunter-hud[data-hud-family="online"] main:has(.hero-art img[src*="og-image"]) .fact-table:has(> tbody > tr:nth-child(4):last-child) tr:nth-child(1){--row-state:'MELONDS \B7  NINTENDO WFC'}
html.hunter-hud[data-hud-family="online"] main:has(.hero-art img[src*="og-image"]) .fact-table:has(> tbody > tr:nth-child(4):last-child) tr:nth-child(2){--row-state:'PPSSPP \B7  AD HOC RELAY'}
html.hunter-hud[data-hud-family="online"] main:has(.hero-art img[src*="og-image"]) .fact-table:has(> tbody > tr:nth-child(4):last-child) tr:nth-child(3){--row-dia:var(--on-dia-yellow);--row-state:'EXPERIMENTAL';--row-state-c:var(--hh-yellow)}
html.hunter-hud[data-hud-family="online"] main:has(.hero-art img[src*="og-image"]) .fact-table:has(> tbody > tr:nth-child(4):last-child) tr:nth-child(4){--row-state:'INDEPENDENT'}

/* ---------- FAQ: query log (light plates, recessed answer well) ---------- */
html.hunter-hud[data-hud-family="online"] .faq{counter-reset:on-q;gap:10px}
html.hunter-hud[data-hud-family="online"] .faq details{
  --cut:9px;--panel-top:#140e08;--panel-bottom:#090706;
  counter-increment:on-q;
  background:var(--on-plate-core),var(--on-lip),var(--on-base)!important;
  transition:border-color .2s,box-shadow .24s,translate .3s var(--hh-ease-out);
}
html.hunter-hud[data-hud-family="online"] .faq details:hover{
  --panel-edge:var(--hh-edge-hot);translate:0 -1px;
  box-shadow:var(--on-depth),inset 0 0 36px rgba(255,122,0,.07)!important;
}
html.hunter-hud[data-hud-family="online"] .faq details[open]{
  --panel-edge:rgba(255,122,0,.7);--panel-top:#1a1209;
  background:var(--on-plate-core),
    linear-gradient(180deg,var(--hh-yellow),rgba(255,122,0,.2)) left 0 top 9px/2px calc(100% - 18px) no-repeat,
    var(--on-lip),var(--on-base)!important;
}
html.hunter-hud[data-hud-family="online"] .faq summary{
  display:flex;align-items:center;gap:14px;padding:17px 20px;list-style:none;
  font:700 15.5px/1.35 var(--hh-font-hud);letter-spacing:.04em;text-transform:uppercase;color:var(--hh-ink-2);
  /* the `font` shorthand resets font-stretch, so the family width is re-declared after it */
  font-stretch:condensed;
  transition:color .18s;
}
html.hunter-hud[data-hud-family="online"] .faq summary::-webkit-details-marker{display:none}
html.hunter-hud[data-hud-family="online"] .faq summary::before{
  content:'Q' counter(on-q,decimal-leading-zero);content:'Q' counter(on-q,decimal-leading-zero) / '';
  flex:0 0 auto;padding-left:17px;
  font:700 10px/1 var(--hh-font-mono);letter-spacing:.1em;color:var(--hh-muted);font-variant-numeric:tabular-nums;
  font-stretch:normal;
  background:var(--on-dia-hollow) left center/10px 10px no-repeat;
  transition:color .18s;
}
html.hunter-hud[data-hud-family="online"] .faq summary::after{
  content:'// OPEN';content:'// OPEN' / '';margin-left:auto;padding-left:12px;
  font:700 9.5px/1 var(--hh-font-mono);letter-spacing:.22em;color:var(--hh-muted);white-space:nowrap;font-stretch:normal;
}
html.hunter-hud[data-hud-family="online"] .faq summary:hover,
html.hunter-hud[data-hud-family="online"] .faq details[open] summary{color:var(--hh-yellow-2)}
html.hunter-hud[data-hud-family="online"] .faq summary:hover::before{color:var(--hh-dim)}
html.hunter-hud[data-hud-family="online"] .faq details[open] summary::before{background-image:var(--on-dia-yellow);color:var(--hh-yellow)}
html.hunter-hud[data-hud-family="online"] .faq details[open] summary::after{content:'// CLOSE';content:'// CLOSE' / '';color:var(--hh-orange-2)}
html.hunter-hud[data-hud-family="online"] .faq details p{
  margin:0 14px 14px;padding:14px max(18px,calc(100% - 72ch)) 15px 20px;
  color:var(--hh-dim);line-height:1.66;
  background:linear-gradient(180deg,rgba(0,0,0,.52),rgba(0,0,0,.28));
  border-left:1px solid var(--hh-edge-hot);
  box-shadow:inset 0 3px 9px rgba(0,0,0,.75),inset 0 -1px rgba(255,170,80,.06);
  animation:hh-drop-in .3s var(--hh-ease-out) backwards;
}

/* ---------- Related links: route chips, label read from the nav's own aria-label ---------- */
html.hunter-hud[data-hud-family="online"] .related-links{position:relative;gap:10px;padding-top:28px}
html.hunter-hud[data-hud-family="online"] .related-links::before{
  content:'// ' attr(aria-label);content:'// ' attr(aria-label) / '';
  position:absolute;left:0;top:0;
  font:700 10px/1 var(--hh-font-mono);letter-spacing:.28em;text-transform:uppercase;color:var(--hh-yellow);
}
html.hunter-hud[data-hud-family="online"] .related-links a{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:10px 15px 10px 13px;
  border:1px solid var(--hh-edge-2);border-radius:0;
  color:var(--hh-dim);background:linear-gradient(180deg,rgba(22,16,10,.96),rgba(8,6,4,.96));
  font:700 12px/1.3 var(--hh-font-mono);letter-spacing:.1em;text-transform:uppercase;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  box-shadow:inset 0 1px rgba(255,190,110,.07),inset 0 -8px 12px -10px rgba(0,0,0,.9);
  transition:color .18s,border-color .2s,box-shadow .24s,translate .28s var(--hh-ease-out);
}
html.hunter-hud[data-hud-family="online"] .related-links a::before{
  content:'\203A';content:'\203A' / '';color:var(--hh-orange);font-size:15px;line-height:1;
  transition:transform .24s var(--hh-ease-out),color .18s;
}
html.hunter-hud[data-hud-family="online"] .related-links a:hover{
  color:var(--hh-ink);border-color:var(--hh-orange);translate:0 -1px;
  box-shadow:inset 0 0 0 1px rgba(255,122,0,.22),inset 0 -12px 18px -12px rgba(255,122,0,.5),inset 0 1px rgba(255,210,140,.16);
}
html.hunter-hud[data-hud-family="online"] .related-links a:hover::before{transform:translateX(3px);color:var(--hh-yellow)}

/* ---------- Page end: hazard strip where the guide ends ---------- */
html.hunter-hud[data-hud-family="online"] .page-shell::after{
  content:'';display:block;height:6px;margin-top:64px;opacity:.8;
  background:var(--on-hazard);
  -webkit-mask-image:linear-gradient(90deg,#000 0 110px,rgba(0,0,0,.4) 110px 38%,transparent 72%);
  mask-image:linear-gradient(90deg,#000 0 110px,rgba(0,0,0,.4) 110px 38%,transparent 72%);
}

/* ---------- Footer: carbon slab with the energy line ---------- */
html.hunter-hud[data-hud-family="online"] .site-footer{
  position:relative;padding:38px 20px 44px;
  border-top:1px solid var(--hh-edge);color:var(--hh-muted);
  background:linear-gradient(180deg,rgba(10,8,6,.9),rgba(4,4,4,.96));
  font:600 12px/1.8 var(--hh-font-hud);letter-spacing:.08em;text-transform:uppercase;
}
html.hunter-hud[data-hud-family="online"] .site-footer::before{
  content:'';position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,var(--hh-yellow) 0 56px,var(--hh-orange) 56px 130px,rgba(255,122,0,.25) 130px 45%,transparent 80%);
}
html.hunter-hud[data-hud-family="online"] .site-footer strong{color:var(--hh-ink);letter-spacing:.14em}
html.hunter-hud[data-hud-family="online"] .site-footer nav{gap:6px 20px;margin-top:12px}
html.hunter-hud[data-hud-family="online"] .site-footer a{
  position:relative;display:inline-block;padding:6px 2px;color:var(--hh-dim);font-size:12.5px;letter-spacing:.1em;transition:color .18s;
}
html.hunter-hud[data-hud-family="online"] .site-footer a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--hh-yellow);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--hh-ease-out);
}
html.hunter-hud[data-hud-family="online"] .site-footer a:hover{color:var(--hh-ink)}
html.hunter-hud[data-hud-family="online"] .site-footer a:hover::after{transform:scaleX(1)}

/* ---------- Fixed HUD telemetry: shrunk into the right gutter ----------
   The content column ends 80px from the right edge at 1440, so only "◆ LOCAL hh:mm:ss" is kept. */
html.hunter-hud[data-hud-family="online"] .hud-telemetry span:last-child{display:none}
html.hunter-hud[data-hud-family="online"] .hud-telemetry{
  right:10px;bottom:10px;padding:5px 10px 5px 20px;font-variant-numeric:tabular-nums;
  background:linear-gradient(90deg,rgba(4,4,4,0),rgba(6,5,4,.9) 35%);
}

/* ---------- Focus: yellow, inset where a chamfer would clip an outline ---------- */
/* .button.hh-btn is repeated so the ring out-ranks the route and hover box-shadows (0,6,1) and, placed later, wins */
html.hunter-hud[data-hud-family="online"] .button.hh-btn.hh-btn:focus-visible,
html.hunter-hud[data-hud-family="online"] .button:focus-visible,
html.hunter-hud[data-hud-family="online"] .related-links a:focus-visible,
html.hunter-hud[data-hud-family="online"] .skip-link:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--hh-yellow),inset 0 0 16px rgba(255,196,0,.35)!important;
}
html.hunter-hud[data-hud-family="online"] .faq summary:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--hh-yellow),inset 0 0 16px rgba(255,196,0,.28);
}
/* a focused link inside a plate lights the plate's edge too */
html.hunter-hud[data-hud-family="online"] :is(.card,.step,.notice,.fact-table):has(a:focus-visible){--panel-edge:var(--hh-yellow)}

/* ---------- Inputs / native controls (none in today's markup; kept so any added control is HUD material) ---------- */
html.hunter-hud[data-hud-family="online"] input:not([type=checkbox]):not([type=radio]),
html.hunter-hud[data-hud-family="online"] textarea,
html.hunter-hud[data-hud-family="online"] select{
  font-family:var(--hh-font-hud);color:var(--hh-ink);
  background:linear-gradient(180deg,#0a0806,#130f0a);
  border:1px solid var(--hh-edge-2);border-radius:0;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.65);
}
html.hunter-hud[data-hud-family="online"] input:focus,
html.hunter-hud[data-hud-family="online"] textarea:focus,
html.hunter-hud[data-hud-family="online"] select:focus{border-color:var(--hh-orange);outline:none;box-shadow:inset 0 2px 8px rgba(0,0,0,.65),0 0 0 1px rgba(255,122,0,.35)}

/* ---------- Choreography ----------
   Load: chip → title wipe → lead → actions (60 ms apart) → scope. Scroll: siblings stagger 50–60 ms; readout lines
   print in; the signal chain runs one handshake (LEDs flash green hop by hop) as it arrives.
   Entrance fills are `backwards`, so a finished entrance never holds transform/opacity against hover states.
   Reduced motion: the core removes every animation and transition; all end states are the resting styles. */
html.hunter-hud[data-hud-family="online"] :is(.steps,.card-grid,.faq,.hero-actions) > :nth-child(2),
html.hunter-hud[data-hud-family="online"] .fact-table tr:nth-child(2){--on-i:1}
html.hunter-hud[data-hud-family="online"] :is(.steps,.card-grid,.faq,.hero-actions) > :nth-child(3),
html.hunter-hud[data-hud-family="online"] .fact-table tr:nth-child(3){--on-i:2}
html.hunter-hud[data-hud-family="online"] :is(.steps,.card-grid,.faq) > :nth-child(4),
html.hunter-hud[data-hud-family="online"] .fact-table tr:nth-child(4){--on-i:3}
html.hunter-hud[data-hud-family="online"] :is(.steps,.card-grid,.faq) > :nth-child(5),
html.hunter-hud[data-hud-family="online"] .fact-table tr:nth-child(5){--on-i:4}
html.hunter-hud[data-hud-family="online"] :is(.steps,.card-grid,.faq) > :nth-child(6),
html.hunter-hud[data-hud-family="online"] .fact-table tr:nth-child(6){--on-i:5}

html.hunter-hud[data-hud-family="online"] .hero-copy > :is(.eyebrow,.status-pill){animation:hh-slide-in .5s var(--hh-ease-out) backwards}
html.hunter-hud[data-hud-family="online"] .hero-copy h1{animation:hh-reveal-x .8s var(--hh-ease-out) .06s backwards}
html.hunter-hud[data-hud-family="online"] .hero-copy > p:not(.hero-note){animation:hh-panel-in .6s var(--hh-ease-out) .2s backwards}
html.hunter-hud[data-hud-family="online"] .hero-actions > .button{animation:hh-panel-in .5s var(--hh-ease-out) backwards;animation-delay:calc(.3s + var(--on-i,0) * 60ms)}
html.hunter-hud[data-hud-family="online"] .hero-copy > .hero-note{animation:hh-panel-in .5s var(--hh-ease-out) .5s backwards}
html.hunter-hud[data-hud-family="online"] .hero-art{animation:on-scope-in .9s var(--hh-ease-out) .14s backwards}
@keyframes on-scope-in{0%{opacity:0;transform:scale(.965)}}

html.hunter-hud[data-hud-family="online"] .hh-reveal{animation-fill-mode:backwards}
html.hunter-hud[data-hud-family="online"] :is(.step,.card,.faq details).hh-reveal{animation-delay:calc(var(--on-i,0) * 60ms)}
html.hunter-hud[data-hud-family="online"] .section > h2.hh-reveal{animation:hh-slide-in .55s var(--hh-ease-out) backwards}
html.hunter-hud[data-hud-family="online"] .fact-table tr.hh-reveal{animation:on-line-in .5s var(--hh-ease-out) backwards;animation-delay:calc(80ms + var(--on-i,0) * 50ms)}
@keyframes on-line-in{0%{opacity:0;transform:translateX(-12px)}}
html.hunter-hud[data-hud-family="online"] .step.hh-reveal h3::after{animation:on-handshake 1s ease-out backwards;animation-delay:calc(450ms + var(--on-i,0) * 170ms)}
@keyframes on-handshake{0%{opacity:0}16%{opacity:1}100%{opacity:0}}

/* ---------- Mobile ---------- */
@media (max-width:800px){
  html.hunter-hud[data-hud-family="online"] :is(.card,.step,.notice,.fact-table){--cut:9px}
  html.hunter-hud[data-hud-family="online"] .hero-art{--cut:10px}
  html.hunter-hud[data-hud-family="online"] .hero-art::before{width:196px;height:196px;outline-offset:12px}
  html.hunter-hud[data-hud-family="online"] .brand::after{display:none}
  html.hunter-hud[data-hud-family="online"] .site-nav-links a{padding:9px 6px}
  /* the readout stacks: label line, then value */
  html.hunter-hud[data-hud-family="online"] .fact-table th{padding:15px 18px 5px 62px;border-bottom:0;box-shadow:none;background:linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,.08))}
  html.hunter-hud[data-hud-family="online"] .fact-table th::before{top:17px}
  html.hunter-hud[data-hud-family="online"] .fact-table td{padding:6px 18px 16px 62px}
  /* the chain runs down the port column */
  html.hunter-hud[data-hud-family="online"] .steps::before{
    left:43px;right:auto;top:44px;bottom:44px;width:2px;height:auto;
    background:repeating-linear-gradient(180deg,var(--hh-orange) 0 6px,transparent 6px 10px);
  }
  html.hunter-hud[data-hud-family="online"] .step h3::before{
    left:42px;top:-1px;width:2px;height:25px;
    background:repeating-linear-gradient(180deg,var(--hh-orange) 0 6px,transparent 6px 10px);
  }
  html.hunter-hud[data-hud-family="online"] .page-shell::before{
    content:'\25C6  RELAY // BETA   \2502   NEEDS A SECOND PLAYER';
    content:'\25C6  RELAY // BETA   \2502   NEEDS A SECOND PLAYER' / '';
    letter-spacing:.14em;
    box-shadow:inset calc(15 * (1ch + .14em) + 24px) 0 0 rgba(255,196,0,.07);
  }
}
@media (max-width:430px){
  html.hunter-hud[data-hud-family="online"] h1{font-size:2.2rem}
  html.hunter-hud[data-hud-family="online"] .brand{font-size:13px;letter-spacing:.1em}
  html.hunter-hud[data-hud-family="online"] .faq summary{gap:12px;padding:15px 16px;font-size:14.5px}
  html.hunter-hud[data-hud-family="online"] .faq summary::after{display:none}
  html.hunter-hud[data-hud-family="online"] .faq details p{margin:0 10px 10px;padding:12px 14px 13px 16px}
  html.hunter-hud[data-hud-family="online"] .card-kicker{gap:10px;padding:11px 16px 10px 20px;letter-spacing:.16em}
  html.hunter-hud[data-hud-family="online"] .card-kicker::before{padding-right:10px;letter-spacing:.1em}
  html.hunter-hud[data-hud-family="online"] .notice{padding:15px 18px 16px 28px}
  html.hunter-hud[data-hud-family="online"] .section > h2::after{letter-spacing:.16em}
}