/* HUNTER HUD · family: guides — "MISSION BRIEFING" pass Guides hub + walkthroughs (guides/**): re-skins assets/css/game-guides.css (--guide-* tokens, .guide-* classes). Loaded after assets/css/hunter-hud.css on pages tagged data-hud-family="guides" (scripts/build/apply-hunter-hud.cjs). Every rule is scoped under html.hunter-hud, so ?nohud=1 falls back to the untouched page CSS. Signature — a mission briefing: · Hub = route board. Numbered issues hang off a lit progress spine; the filter bank counts its systems; the results readout goes red when nothing matches; only the first route on the board carries a primary action. · Walkthrough = checkpoint plates on a lit track. Each chapter's sticky objective readout drags a lit trail down a dashed track; step checkboxes are nodes on a conduit that turns visor-green as steps are checked; finish lines, warnings (red hazard) and checkpoints are status plates; section heads carry live counts (CSS counters). Material tiers: 1 command (hot edge, machined rails, rivets) · 2 standard · 3 recessed. Motion budget: one ambient loop per page (hub: radar sweep that pings each featured frame as it passes; walkthrough: a scan pass over the hero frame). Entrances are short staggered sequences. Everything animates transform / opacity / background-position only, and the core disables it under prefers-reduced-motion. Map: cyan → orange, violet → yellow-2, pink → ember, lime → visor (status only), gold → yellow, bluish glass → carbon plates, radius → 0 + chamfer. Utility classes (.hh-*) come from guides.json classMap. */ /* ═══════════════ 1. Tokens ═══════════════ */ html.hunter-hud[data-hud-family="guides"]{ --guide-bg:var(--hh-void); --guide-panel:#100d0a; --guide-panel-2:#17120c; --guide-line:rgba(255,140,40,.16); --guide-line-strong:rgba(255,122,0,.42); --guide-text:var(--hh-ink); --guide-muted:var(--hh-dim); --guide-cyan:var(--hh-orange); --guide-violet:var(--hh-yellow-2); --guide-pink:var(--hh-ember); --guide-green:var(--hh-visor); --guide-gold:var(--hh-yellow); --guide-red:var(--hh-red); --guide-ink:#050403; --guide-radius:0px; --gd-energy:linear-gradient(90deg,var(--hh-yellow) 0 44px,var(--hh-orange) 44px 130px,rgba(255,122,0,.45) 130px 40%,rgba(255,122,0,.16) 70%,transparent 96%); --gd-eyebrow-tail:linear-gradient(var(--hh-orange),var(--hh-orange)) 0 50%/18px 2px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l4 4-4 4-4-4z' fill='%23ffc400'/%3E%3C/svg%3E") 100% 50%/8px 8px no-repeat; --gd-bracket: linear-gradient(var(--hh-orange),var(--hh-orange)) top left/18px 2px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) top left/2px 18px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) top right/18px 2px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) top right/2px 18px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom left/18px 2px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom left/2px 18px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom right/18px 2px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom right/2px 18px no-repeat; /* Viewfinder ticks at the middle of each edge; layered with --gd-bracket on imagery. */ --gd-reticle: linear-gradient(rgba(255,196,0,.8),rgba(255,196,0,.8)) 50% 0/1px 9px no-repeat, linear-gradient(rgba(255,196,0,.8),rgba(255,196,0,.8)) 50% 100%/1px 9px no-repeat, linear-gradient(rgba(255,196,0,.8),rgba(255,196,0,.8)) 0 50%/9px 1px no-repeat, linear-gradient(rgba(255,196,0,.8),rgba(255,196,0,.8)) 100% 50%/9px 1px no-repeat; /* Recessed well (second surface inside plates) and hazard bands for section ends. */ --gd-well:linear-gradient(180deg,#060504,#0e0b08); --gd-well-shadow:inset 0 2px 8px rgba(0,0,0,.85),inset 0 -1px rgba(255,170,80,.07); --gd-hazard:repeating-linear-gradient(-45deg,rgba(255,196,0,.86) 0 6px,rgba(10,8,5,.9) 6px 12px); --gd-hazard-red:repeating-linear-gradient(-45deg,rgba(255,59,36,.9) 0 5px,rgba(22,7,4,.95) 5px 10px); /* Type scale + reading measure. */ --gd-h2:clamp(30px,3.1vw,46px); --gd-h3:clamp(25px,2.5vw,34px); --gd-measure:68ch; } html.hunter-hud body.guide-site{font-family:var(--hh-font-text);color:var(--hh-ink)} /* Kill the Nexus atmosphere (blue radials + grid + centre seam); the core draws the carbon ground, hex field and embers. */ html.hunter-hud body.guide-site::before, html.hunter-hud body.guide-site::after, html.hunter-hud .guide-grid-glow{display:none!important} /* ═══════════════ 2. Plate material + weight tiers ═══════════════ The core .hh-plate stack plus: a lit top edge (1px bevel inside the border), four machined inner rails, two rivets inside the corner brackets, and a lower inner shade so the plate reads as raised off the ground (an outer shadow would be cut away by the chamfer clip-path). Tiers only change the custom properties. */ html.hunter-hud[data-hud-family="guides"] .hh-plate{ --gd-top:rgba(255,165,70,.3); --gd-rail:transparent; --gd-rivet:transparent; --gd-rivet-ring:transparent; background: radial-gradient(340px circle at var(--mx,-999px) var(--my,-999px),rgba(255,140,30,.1),transparent 65%), linear-gradient(90deg,transparent calc(var(--cut) + 2px),var(--gd-top) calc(var(--cut) + 36px),rgba(255,122,0,0) 76%) 0 0/100% 1px no-repeat, linear-gradient(var(--gd-rail),var(--gd-rail)) calc(var(--cut) + 7px) 6px/calc(100% - var(--cut) - 14px) 1px no-repeat, linear-gradient(var(--gd-rail),var(--gd-rail)) 7px calc(100% - 7px)/calc(100% - var(--cut) - 14px) 1px no-repeat, linear-gradient(var(--gd-rail),var(--gd-rail)) 6px calc(var(--cut) + 7px)/1px calc(100% - var(--cut) - 14px) no-repeat, linear-gradient(var(--gd-rail),var(--gd-rail)) calc(100% - 7px) 7px/1px calc(100% - var(--cut) - 14px) no-repeat, radial-gradient(circle,var(--gd-rivet) 0 1.4px,var(--gd-rivet-ring) 1.7px 2.4px,transparent 2.7px) calc(100% - 12px) 12px/6px 6px no-repeat, radial-gradient(circle,var(--gd-rivet) 0 1.4px,var(--gd-rivet-ring) 1.7px 2.4px,transparent 2.7px) 12px calc(100% - 12px)/6px 6px no-repeat, 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, linear-gradient(165deg,var(--panel-top,#19120a),var(--panel-bottom,#0a0807) 72%)!important; box-shadow:inset 0 -26px 32px -28px rgba(0,0,0,.9),inset 0 1px rgba(255,190,110,.04)!important; } /* Tier 1 — command plates: the sticky contents HUD, field photos, sources, the lightbox and the first route on the board. */ html.hunter-hud[data-hud-family="guides"] :is(.guide-toc,.chapter-visual,.guide-sources,.guide-image-lightbox,.guide-card:nth-child(1 of :not([hidden]))){ --panel-edge:var(--hh-edge-hot);--gd-top:rgba(255,212,105,.72);--gd-rail:rgba(255,150,60,.12);--gd-rivet:#8f621d;--gd-rivet-ring:rgba(0,0,0,.8); } /* Tier 3 — recessed plates: they sit into the page (top inner shadow, no brackets until hovered). */ html.hunter-hud[data-hud-family="guides"] :is(.chapter-brief,.guide-route-map a,.related-grid > a,.guide-empty){ --panel-edge:var(--hh-edge);--gd-top:rgba(255,165,70,.12);--panel-accent:transparent;--panel-top:#0e0b08;--panel-bottom:#070605; box-shadow:inset 0 2px 12px rgba(0,0,0,.6),inset 0 -1px rgba(255,170,80,.05)!important; } /* ═══════════════ 3. Type system ═══════════════ */ html.hunter-hud :is(.guide-hub-hero h1,.guide-detail-hero h1,.guide-section-heading h2,.section-title-row h2,.guide-method h2,.guide-method h3,.guide-card h2,.chapter-content h2,.chapter-content h3,.secret-grid h3,.guide-sources h2,.guide-briefing-grid strong,.related-grid strong,.guide-route-map strong,.guide-hero-stats strong,.guide-route-meter b,.controls-section td strong){font-family:var(--hh-font-hud);font-stretch:condensed;font-weight:700;text-transform:uppercase;color:var(--hh-ink);text-shadow:0 0 22px rgba(255,122,0,.2)} html.hunter-hud :is(.guide-section-heading h2,.section-title-row h2,.guide-method h2){font-size:var(--gd-h2);line-height:.95;letter-spacing:.015em;text-wrap:balance} html.hunter-hud :is(.guide-card h2,.chapter-content h3,.secret-grid h3,.guide-method h3){letter-spacing:.03em;text-wrap:balance} html.hunter-hud :is(.guide-cover-copy > p,.guide-detail-copy > p,.guide-route-step p,.chapter-brief p,.guide-faq details p,.guide-sources p,.guide-card p,.secret-grid p,.guide-method p,.chapter-warning p,.chapter-checkpoint p){text-wrap:pretty} /* Digits that line up (counters, stats, keycaps, dates) use tabular lining figures. */ html.hunter-hud :is(.guide-hero-stats strong,.guide-results strong,.guide-route-meter b,.chapter-number,.guide-section-index,.guide-step-label,.gameplay-shot-number,.gameplay-shot-route span,.chapter-visual-heading span,.guide-route-map > a > span,.secret-grid article > span,.guide-method article > strong,.guide-card-eyebrow,.guide-quick-facts dd,.guide-issue-line > *,.guide-byline,.guide-toc nav a > span,.related-grid small,.related-grid em,.guide-faq summary,kbd){font-variant-numeric:tabular-nums lining-nums} html.hunter-hud :is(.guide-hub-hero,.guide-detail-hero) h1{position:relative;letter-spacing:.01em;text-shadow:0 0 34px rgba(255,122,0,.3),0 2px 0 rgba(0,0,0,.6)} html.hunter-hud :is(.guide-hub-hero,.guide-detail-hero) h1 em{color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:0;paint-order:normal;text-shadow:none;background:linear-gradient(180deg,var(--hh-yellow-2),var(--hh-yellow) 45%,var(--hh-orange));-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 14px rgba(255,122,0,.35))} html.hunter-hud .guide-card h2 a:hover{color:var(--hh-yellow)} /* Eyebrows / kickers: lit orange dash + yellow diamond (static: the page's loop budget is spent elsewhere). */ html.hunter-hud .guide-kicker{color:var(--hh-yellow);font-family:var(--hh-font-hud);font-weight:700;letter-spacing:.3em} html.hunter-hud .guide-kicker > span{width:22px;height:2px;background:var(--hh-orange);box-shadow:0 0 10px rgba(255,122,0,.9)} html.hunter-hud .guide-kicker::after{content:'';width:5px;height:5px;background:var(--hh-yellow);transform:rotate(45deg);box-shadow:0 0 8px var(--hh-yellow)} html.hunter-hud .guide-section-index{color:var(--hh-yellow);font-family:var(--hh-font-hud);letter-spacing:.3em} html.hunter-hud .guide-section-heading .guide-section-index, html.hunter-hud .guide-method .guide-section-index, html.hunter-hud .guide-toc > span{display:flex;align-items:center;gap:0;color:var(--hh-yellow);font-family:var(--hh-font-hud);font-weight:700;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase} html.hunter-hud .guide-section-heading .guide-section-index::before, html.hunter-hud .guide-method .guide-section-index::before, html.hunter-hud .guide-toc > span::before{content:'// ';white-space:pre;font-family:var(--hh-font-mono);color:var(--hh-orange);letter-spacing:.08em} html.hunter-hud .guide-section-heading .guide-section-index::after, html.hunter-hud .guide-method .guide-section-index::after, html.hunter-hud .guide-toc > span::after{content:'';flex:0 0 32px;height:8px;margin-left:10px;background:var(--gd-eyebrow-tail);filter:drop-shadow(0 0 4px rgba(255,122,0,.8))} html.hunter-hud .guide-toc > span{font-size:9.5px;letter-spacing:.18em;white-space:nowrap} html.hunter-hud .guide-toc > span::after{flex:0 0 8px;margin-left:auto;padding-left:8px;background:var(--gd-eyebrow-tail);background-position:-40px 50%,100% 50%} /* Mono "// TAG" labels wherever the page has a small label. */ html.hunter-hud :is(.chapter-label,.guide-briefing-grid span,.chapter-brief span,.chapter-visual-heading span,.guide-step-label,.guide-manual-link > span,.related-grid small,.gameplay-shot-number,.gameplay-shot-zoom,.chapter-visual button > span,.guide-hero-gameplay > span,.chapter-visual figcaption strong,.visual-checkpoint-notes dt,.gameplay-shot-route span,.chapter-rail small,.guide-quick-facts dt,.controls-section thead th,.guide-toc nav a > span,.guide-card-eyebrow,.guide-route-meter small,.guide-cover-frame b,.gameplay-shot-source,.chapter-warning strong,.chapter-checkpoint strong,.gameplay-capture-note strong){font-family:var(--hh-font-mono);letter-spacing:.16em;text-transform:uppercase} html.hunter-hud :is(.chapter-label,.guide-briefing-grid span,.chapter-brief span,.chapter-visual-heading span,.guide-step-label,.related-grid small,.chapter-visual figcaption strong,.guide-manual-link > span){color:var(--hh-orange)} html.hunter-hud :is(.chapter-label,.guide-briefing-grid span,.chapter-brief span,.chapter-visual figcaption strong,.guide-manual-link > span,.guide-step-label)::before{content:'// '} html.hunter-hud :is(.guide-cover-frame b,.gameplay-shot-route span){color:var(--hh-yellow)} /* Functional labels read in dim, never muted (contrast at 10px). */ html.hunter-hud :is(.chapter-rail small,.guide-quick-facts dt,.controls-section thead th,.guide-hero-stats span,.related-grid em){color:var(--hh-dim)} /* ═══════════════ 4. Header / nav ═══════════════ */ /* .hh-header:after (the travelling beam) is 22% wide and animates to translateX(560%): clip sideways only so the document never grows a horizontal scrollbar, keep overflow-y visible for the 2px overhang. .hh-header also sets position:relative and outranks the page's sticky rule, so pin sticky back (the page drops it under 780px). */ html.hunter-hud .guide-header{position:sticky;top:0;z-index:50;min-height:72px;padding:12px clamp(20px,5vw,72px);overflow-x:clip;overflow-y:visible} html.hunter-hud .guide-magazine .guide-header{border-bottom-color:var(--hh-edge)} html.hunter-hud .guide-brand-mark{position:relative;width:40px;aspect-ratio:1;border:0;border-radius:0;background:linear-gradient(160deg,#2a1a08,#0c0906);box-shadow:inset 0 0 0 1px var(--hh-orange),0 0 22px rgba(255,122,0,.25);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)} html.hunter-hud .guide-brand-mark::before{content:'';position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--hh-yellow);transform:rotate(45deg);box-shadow:0 0 10px var(--hh-yellow)} html.hunter-hud .guide-brand-mark::after{content:'';position:absolute;inset:6px;border:1px dashed rgba(255,122,0,.7);border-radius:50%} html.hunter-hud .guide-brand strong{font-family:var(--hh-font-hud);font-weight:700;letter-spacing:.14em;color:var(--hh-ink);text-shadow:0 0 18px rgba(255,122,0,.35)} html.hunter-hud .guide-brand small{font-family:var(--hh-font-mono);color:var(--hh-orange);letter-spacing:.3em;font-size:9px} html.hunter-hud .guide-brand small::before{content:'// '} html.hunter-hud .guide-nav a{padding:9px 14px} /* ═══════════════ 5. Hub hero: cover copy, stat gauges, radar ═══════════════ */ html.hunter-hud .guide-hub-hero{border-bottom:1px solid var(--hh-edge)} html.hunter-hud .guide-hub-hero::before{background:linear-gradient(90deg,var(--hh-void),transparent 30%),radial-gradient(circle at 62% 47%,transparent 0 18%,rgba(255,122,0,.28) 18.3% 18.8%,transparent 19.2% 27%,rgba(255,196,0,.2) 27.3% 27.8%,transparent 28.2% 35%,rgba(255,122,0,.12) 35.2% 35.5%,transparent 35.8%),repeating-conic-gradient(from 18deg at 62% 47%,rgba(255,122,0,.09) 0 2deg,transparent 2deg 17deg);opacity:.6} html.hunter-hud .guide-hub-hero::after{content:'// COMPLETE ROUTES / SECRETS / CONTROLS';color:var(--hh-faint);font-family:var(--hh-font-mono);font-weight:700;letter-spacing:.3em} html.hunter-hud :is(.guide-hub-hero > p,.guide-cover-copy > p,.guide-detail-copy > p){color:var(--hh-dim);line-height:1.62} html.hunter-hud .guide-cover-copy > p{max-width:58ch} /* Issue line chips: yellow chip, orange mono, dim date. */ html.hunter-hud .guide-issue-line{color:var(--hh-dim)} html.hunter-hud .guide-issue-line > span{color:#170900!important;border-color:var(--hh-yellow)!important;background:linear-gradient(180deg,var(--hh-yellow),var(--hh-orange-2))!important;font-weight:700!important} html.hunter-hud .guide-issue-line > b{color:var(--hh-orange)!important;border-color:var(--hh-edge-hot)!important} /* Hero stats: small gauge plates — tabular yellow value, dim mono label, a baseline that powers on with the sequence. */ html.hunter-hud .guide-hero-stats > div{position:relative;padding:16px 22px 20px;--panel-top:#18110a;--panel-bottom:#090706} html.hunter-hud .guide-hero-stats strong{font-size:30px;line-height:1;letter-spacing:.01em;color:var(--hh-yellow);text-shadow:0 0 16px rgba(255,196,0,.35)} html.hunter-hud .guide-hero-stats span{display:block;margin-top:8px;font:700 10px/1.2 var(--hh-font-mono);letter-spacing:.18em} html.hunter-hud .guide-hero-stats > div::after{content:'';position:absolute;left:22px;right:22px;bottom:10px;height:2px;pointer-events:none;background:linear-gradient(90deg,var(--hh-yellow),var(--hh-orange) 45%,rgba(255,122,0,.12));transform-origin:left} /* Radar: one sweep every 12s behind the collage — the hub's single ambient loop. */ html.hunter-hud .guide-cover-collage::before{content:'';position:absolute;z-index:-1;left:50%;top:50%;width:min(46vw,560px);aspect-ratio:1;margin:calc(min(46vw,560px)/-2) 0 0 calc(min(46vw,560px)/-2);border-radius:50%;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,122,0,.05) 85%,rgba(255,150,40,.14) 98%,rgba(255,196,0,.22) 99.6%,transparent 100%);-webkit-mask-image:radial-gradient(circle closest-side,#000 35%,transparent 92%);mask-image:radial-gradient(circle closest-side,#000 35%,transparent 92%);animation:hh-spin 12s linear infinite,gd-fade 1.6s ease-out .45s both;animation-play-state:var(--hud-play)} html.hunter-hud .guide-cover-frame{border:1px solid var(--hh-edge-2);border-radius:0;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);box-shadow:0 32px 80px rgba(0,0,0,.65)} html.hunter-hud .guide-cover-frame::after{background:linear-gradient(180deg,transparent 50%,rgba(6,4,2,.94)),var(--gd-bracket);background-color:transparent} /* Each featured frame lights up as the sweep's leading edge crosses it. The frames sit at roughly 36°, 152° and 290° around the radar centre at every breakpoint, so the ping delays are 36/360, 152/360 and 290/360 of the 12s revolution (the sweep starts pointing up and turns clockwise). */ html.hunter-hud .guide-cover-frame::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 1px rgba(255,214,110,.95),inset 0 0 44px rgba(255,160,40,.3);background:linear-gradient(115deg,transparent 30%,rgba(255,205,100,.1) 50%,transparent 70%);animation:gd-ping 12s linear infinite;animation-play-state:var(--hud-play)} html.hunter-hud .guide-cover-frame.frame-2::before{animation-delay:1.1s} html.hunter-hud .guide-cover-frame.frame-3::before{animation-delay:4.95s} html.hunter-hud .guide-cover-frame.frame-1::before{animation-delay:9.55s} html.hunter-hud .guide-cover-frame > span{font-family:var(--hh-font-hud);letter-spacing:.04em;text-shadow:0 2px 6px rgba(0,0,0,.8)} html.hunter-hud .guide-cover-frame:hover, html.hunter-hud .guide-cover-frame:focus-visible{border-color:var(--hh-orange);box-shadow:0 32px 80px rgba(0,0,0,.65),0 0 0 1px rgba(255,122,0,.4),0 0 40px rgba(255,122,0,.2)} /* ═══════════════ 6. Walkthrough hero: readout, reticle frame, scan pass ═══════════════ */ html.hunter-hud .guide-detail-copy > p{max-width:60ch} html.hunter-hud .guide-breadcrumb{color:var(--hh-dim);font-family:var(--hh-font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase} html.hunter-hud .guide-breadcrumb > span{color:var(--hh-orange)} html.hunter-hud .guide-breadcrumb a:hover{color:var(--hh-yellow)} html.hunter-hud .guide-byline{color:var(--hh-dim);font-size:11px} html.hunter-hud .guide-byline a{color:var(--hh-ink);text-decoration-color:rgba(255,122,0,.55)} html.hunter-hud .guide-byline span + span::before, html.hunter-hud .guide-byline time::before{color:var(--hh-orange)} html.hunter-hud .guide-hero-gameplay{border:1px solid var(--hh-edge-hot);border-radius:0;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);box-shadow:0 35px 80px rgba(0,0,0,.6)} html.hunter-hud .guide-hero-gameplay::before{content:'';position:absolute;inset:10px;z-index:3;pointer-events:none;background:var(--gd-bracket),var(--gd-reticle);opacity:.95;filter:drop-shadow(0 0 3px rgba(0,0,0,.95))} html.hunter-hud .guide-hero-gameplay::after{background:linear-gradient(180deg,transparent 58%,rgba(6,4,2,.86)),repeating-linear-gradient(0deg,rgba(255,200,120,.02) 0 1px,transparent 1px 4px)} html.hunter-hud .guide-hero-gameplay > span{color:var(--hh-yellow)} /* Scan pass: a thin beam crosses the capture top to bottom, then rests — the walkthrough's single ambient loop. */ html.hunter-hud .guide-hero-gameplay picture{position:relative;overflow:hidden} html.hunter-hud .guide-hero-gameplay picture::after{content:'';position:absolute;left:0;right:0;top:0;height:16%;pointer-events:none;opacity:0;transform:translateY(-100%);background:linear-gradient(180deg,transparent,rgba(255,200,90,.06) 55%,rgba(255,214,120,.2) 93%,rgba(255,240,190,.72) 99%,transparent);animation:gd-scan-y 9s var(--hh-ease-io) 1.8s infinite;animation-play-state:var(--hud-play)} html.hunter-hud .guide-hero-gameplay:hover, html.hunter-hud .guide-hero-gameplay:focus-visible{border-color:var(--hh-orange);box-shadow:0 35px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,122,0,.45),0 0 44px rgba(255,122,0,.22)} html.hunter-hud .guide-detail-cover{border:1px solid var(--hh-edge-hot);border-radius:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);background:radial-gradient(circle,rgba(255,122,0,.2),transparent 63%),var(--hh-hex) 0 0/45px 26px,#0a0807;box-shadow:0 26px 70px rgba(0,0,0,.6)} html.hunter-hud .guide-detail-cover::before{border:1px solid rgba(255,196,0,.3);border-radius:0} html.hunter-hud .guide-cover-mini.guide-detail-cover{border-radius:0;box-shadow:-12px 18px 45px rgba(0,0,0,.65),0 0 0 1px rgba(255,122,0,.2)} html.hunter-hud .cover-scan{border-radius:0} html.hunter-hud .cover-scan::after{animation:none;opacity:0} /* Quick facts: a recessed readout strip; Difficulty reads as a yellow (attention) status value. */ html.hunter-hud .guide-quick-facts{border:1px solid var(--hh-edge-2);border-radius:0;background:var(--hh-edge);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)} html.hunter-hud .guide-quick-facts > div{padding:12px 14px 13px;background:linear-gradient(180deg,#130e09,#080605);box-shadow:inset 0 1px rgba(255,180,90,.07),inset 0 -10px 14px -10px rgba(0,0,0,.8)} html.hunter-hud .guide-quick-facts dt{font-size:9.5px;font-weight:700;letter-spacing:.2em} html.hunter-hud .guide-quick-facts dd{margin-top:6px;color:var(--hh-ink);font:700 14px/1.15 var(--hh-font-hud);font-stretch:condensed;letter-spacing:.04em;text-transform:uppercase} html.hunter-hud .guide-quick-facts > div:first-child dd{display:flex;align-items:center;gap:7px;color:var(--hh-yellow)} html.hunter-hud .guide-quick-facts > div:first-child dd::before{content:'';flex:0 0 6px;height:6px;background:var(--hh-yellow);transform:rotate(45deg);box-shadow:0 0 8px rgba(255,196,0,.7)} /* ═══════════════ 7. Library = route board ═══════════════ */ html.hunter-hud .guide-library{background:var(--gd-hazard) left clamp(20px,4vw,56px) bottom 34px/180px 5px no-repeat} html.hunter-hud .guide-section-heading{padding-bottom:0} html.hunter-hud .guide-section-heading p{color:var(--hh-dim);max-width:60ch} /* Search: a recessed well; focus lights a beam along its lower edge. */ html.hunter-hud .guide-search{position:relative;border-radius:0!important;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);background-color:#070605!important;background-image:var(--gd-well)!important;box-shadow:inset 0 2px 10px rgba(0,0,0,.85),inset 0 -1px rgba(255,170,80,.06)!important} html.hunter-hud .guide-search::after{content:'';position:absolute;left:10px;right:10px;bottom:0;height:2px;pointer-events:none;background:linear-gradient(90deg,var(--hh-yellow),var(--hh-orange) 60%,rgba(255,122,0,.2));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--hh-ease-out)} html.hunter-hud .guide-search:focus-within{border-color:var(--hh-orange)!important;box-shadow:inset 0 2px 10px rgba(0,0,0,.85),0 0 0 1px rgba(255,122,0,.35),0 0 18px rgba(255,122,0,.2)!important} html.hunter-hud .guide-search:focus-within::after{transform:scaleX(1)} html.hunter-hud .guide-search > span:not(.sr-only){color:var(--hh-orange);text-shadow:0 0 12px rgba(255,122,0,.6)} html.hunter-hud .guide-search input{color:var(--hh-ink);font-family:var(--hh-font-text)} html.hunter-hud .guide-search input::placeholder{color:var(--hh-dim);opacity:.8} /* Filter bank: mono label, chamfered chips, and a live count of the systems it offers (CSS counter). */ html.hunter-hud .guide-filters{align-items:center;counter-reset:gd-sys} html.hunter-hud .guide-filter:not([data-guide-filter="all"]){counter-increment:gd-sys} html.hunter-hud .guide-filters::before{content:'// FILTER';flex:0 0 auto;align-self:center;margin-right:6px;color:var(--hh-dim);font:700 10px/1 var(--hh-font-mono);letter-spacing:.22em;white-space:nowrap} html.hunter-hud .guide-filters::after{content:counter(gd-sys,decimal-leading-zero) ' SYSTEMS';margin-left:auto;padding-left:12px;color:var(--hh-dim);font:700 10px/1 var(--hh-font-mono);letter-spacing:.22em;white-space:nowrap} html.hunter-hud .guide-filter{min-height:38px;padding:0 16px;font-size:11.5px!important;letter-spacing:.12em!important} html.hunter-hud .guide-filter.is-active, html.hunter-hud .guide-filter.is-active:hover{color:var(--hh-yellow)!important;border-color:var(--hh-orange)!important;background:linear-gradient(180deg,rgba(255,122,0,.28),rgba(255,122,0,.08))!important;box-shadow:inset 0 0 0 1px rgba(255,122,0,.35),inset 0 -12px 20px -12px rgba(255,122,0,.6),0 0 18px rgba(255,122,0,.18)!important;text-shadow:0 0 10px rgba(255,196,0,.5)!important} /* Results readout: status diamond (visor = routes ready, red = nothing matches), tabular count, fading tick rule. */ html.hunter-hud .guide-results{position:relative;display:flex;align-items:center;gap:10px;padding-left:18px;color:var(--hh-dim);font:700 11px/1 var(--hh-font-mono);letter-spacing:.2em} html.hunter-hud .guide-results::before{content:'';position:absolute;left:2px;top:calc(50% - 3px);width:6px;height:6px;background:var(--hh-visor);transform:rotate(45deg);box-shadow:0 0 8px rgba(166,255,77,.8);animation:hh-pulse 2s ease-in-out infinite;animation-play-state:var(--hud-play)} html.hunter-hud .guide-results::after{content:'';flex:1 1 auto;min-width:40px;height:7px;margin-left:6px;background:repeating-linear-gradient(90deg,rgba(255,122,0,.5) 0 1px,transparent 1px 8px);-webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000 10%,transparent)} html.hunter-hud .guide-results strong{color:var(--hh-yellow);font:700 22px/1 var(--hh-font-hud);letter-spacing:0;text-shadow:0 0 14px rgba(255,196,0,.35)} html.hunter-hud .guide-library:has(.guide-empty:not([hidden])) .guide-results::before{background:var(--hh-red);box-shadow:0 0 10px rgba(255,59,36,.85)} html.hunter-hud .guide-library:has(.guide-empty:not([hidden])) .guide-results strong{color:#ff6a50;text-shadow:0 0 14px rgba(255,59,36,.4)} /* Progress spine. Desktop: a lit rail down the centre of the two-column board; each card reaches it with a node. The node sits outside the card box, so the card's chamfer clip-path grows a small tab to let it show, and the card's overflow opens (its cover bay still clips its own sheen). Hidden (filtered-out) cards are skipped by :nth-child(... of :not([hidden])), so left/right nodes stay correct while filtering. */ html.hunter-hud .guide-card-grid{position:relative} html.hunter-hud .guide-card-grid::before{content:'';position:absolute;z-index:0;top:-6px;bottom:-30px;left:calc(50% - 5px);width:10px;pointer-events:none;transform-origin:top; background:linear-gradient(180deg,var(--hh-yellow),var(--hh-orange) 60px,rgba(255,122,0,.5) 320px,rgba(255,122,0,.26)) 50% 0/2px 100% no-repeat,repeating-linear-gradient(180deg,rgba(255,196,0,.4) 0 1px,transparent 1px 26px) 50% 0/10px 100% no-repeat; -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 120px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 120px),transparent)} html.hunter-hud .guide-card-grid:has(> .hh-will-reveal)::before{transform:scaleY(0)} html.hunter-hud .guide-card-grid:has(> .hh-reveal)::before{animation:gd-draw-y 1.6s var(--hh-ease-out) both} html.hunter-hud .guide-card{--panel-top:#1a130b;--panel-bottom:#0a0807;overflow:visible;transition:translate .3s var(--hh-ease-out),border-color .25s ease,box-shadow .25s ease} html.hunter-hud .guide-card::after{content:'';position:absolute;z-index:3;top:30px;width:24px;height:12px;pointer-events:none;background:linear-gradient(90deg,var(--hh-orange),var(--hh-yellow))} @media (min-width:1051px){ html.hunter-hud .guide-card-grid{column-gap:34px} html.hunter-hud .guide-card:nth-child(odd of :not([hidden])){clip-path:polygon(var(--cut) 0,100% 0,100% 26px,calc(100% + 26px) 26px,calc(100% + 26px) 46px,100% 46px,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))} html.hunter-hud .guide-card:nth-child(odd of :not([hidden]))::after{left:100%;clip-path:polygon(0 5px,13px 5px,18px 0,100% 6px,18px 12px,13px 7px,0 7px)} html.hunter-hud .guide-card:nth-child(even of :not([hidden])){clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 46px,-26px 46px,-26px 26px,0 26px,0 var(--cut))} html.hunter-hud .guide-card:nth-child(even of :not([hidden]))::after{right:100%;background:linear-gradient(90deg,var(--hh-yellow),var(--hh-orange));clip-path:polygon(0 6px,6px 0,11px 5px,100% 5px,100% 7px,11px 7px,6px 12px)} } html.hunter-hud .guide-card:hover{transform:none;translate:0 -2px;border-color:var(--hh-orange)!important;box-shadow:inset 0 0 0 1px rgba(255,122,0,.18),inset 0 -50px 60px -46px rgba(255,122,0,.42),inset 0 -26px 32px -28px rgba(0,0,0,.9)!important} html.hunter-hud .guide-magazine .guide-card::before{color:rgba(255,150,60,.3);font-family:var(--hh-font-mono);letter-spacing:.3em} /* Cover bay: a recessed hex well with a tick strip and a reticle that locks on when the card is hovered. */ html.hunter-hud .guide-card-cover{border-right:1px solid var(--hh-edge);background:radial-gradient(circle at 50% 42%,rgba(255,122,0,.17),transparent 58%),var(--hh-hex) 0 0/45px 26px,linear-gradient(180deg,#060504,#0b0907);box-shadow:inset -12px 0 20px -14px rgba(0,0,0,.95),inset 0 2px 12px rgba(0,0,0,.6)} html.hunter-hud .guide-card-cover::after{background:linear-gradient(115deg,transparent 44%,rgba(255,200,120,.16) 50%,transparent 56%)} html.hunter-hud .guide-card-cover::before{content:'';position:absolute;z-index:1;inset:12px 14px 50px;pointer-events:none;opacity:.5;transition:opacity .3s ease,transform .45s var(--hh-ease-out);transform:scale(1.04); background:repeating-linear-gradient(90deg,rgba(255,122,0,.65) 0 2px,transparent 2px 9px) 0 0/100% 5px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) 0 18px/10px 1px no-repeat,linear-gradient(var(--hh-orange),var(--hh-orange)) 0 18px/1px 10px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) 100% 18px/10px 1px no-repeat,linear-gradient(var(--hh-orange),var(--hh-orange)) 100% 18px/1px 10px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) 0 100%/10px 1px no-repeat,linear-gradient(var(--hh-orange),var(--hh-orange)) 0 100%/1px 10px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) 100% 100%/10px 1px no-repeat,linear-gradient(var(--hh-orange),var(--hh-orange)) 100% 100%/1px 10px no-repeat} html.hunter-hud .guide-card:hover .guide-card-cover::before{opacity:1;transform:none} html.hunter-hud .guide-card-cover img{filter:drop-shadow(0 16px 18px rgba(0,0,0,.7));transition:translate .45s var(--hh-ease-out)} html.hunter-hud .guide-card:hover .guide-card-cover img{translate:0 -3px} html.hunter-hud .guide-card-cover > span{color:var(--hh-yellow)!important;border-color:rgba(255,196,0,.45)!important} html.hunter-hud .guide-card-eyebrow{align-items:center;color:var(--hh-dim);font-size:10px;font-weight:700} html.hunter-hud .guide-magazine .guide-card-eyebrow > span:first-child, html.hunter-hud .guide-card-eyebrow > span:first-child{color:var(--hh-yellow)} html.hunter-hud .guide-card-eyebrow > span:first-child::before{content:'// '} html.hunter-hud .guide-card h2{margin:12px 0 8px;font-size:26px;line-height:1.02} html.hunter-hud .guide-card p{color:var(--hh-dim);font-size:13.5px;line-height:1.6} html.hunter-hud .guide-tags span{padding:3px 7px!important;font-size:10px!important} html.hunter-hud .guide-tags span:first-child{color:var(--hh-ink-2)!important;border-color:var(--hh-edge-hot)!important} html.hunter-hud .guide-card-actions{gap:18px} /* Card CTA: a strong secondary plate (one primary per view — only the first route on the board gets the power button). */ html.hunter-hud .guide-card .guide-btn.primary{min-height:42px;padding:0 16px;color:var(--hh-ink)!important;border-color:var(--hh-edge-hot)!important;background:linear-gradient(180deg,#24180b,#110c07)!important;box-shadow:inset 0 1px rgba(255,200,110,.12),inset 0 -12px 18px -14px rgba(255,122,0,.35)!important} html.hunter-hud .guide-card .guide-btn.primary:hover{color:#fff!important;border-color:var(--hh-orange)!important;background:linear-gradient(180deg,#2e1e0c,#170f07)!important;box-shadow:inset 0 0 0 1px rgba(255,122,0,.25),inset 0 -14px 22px -14px rgba(255,122,0,.6)!important} html.hunter-hud .guide-card .guide-btn.primary > span{color:var(--hh-orange);transition:translate .28s var(--hh-ease-out)} html.hunter-hud .guide-card .guide-btn.primary:hover > span{translate:3px 0;color:var(--hh-yellow)} html.hunter-hud .guide-card:nth-child(1 of :not([hidden])) .guide-btn.primary{position:relative;overflow:hidden;color:#170900!important;border:1px solid #ffd24d!important;background:linear-gradient(180deg,var(--hh-yellow) 0%,var(--hh-orange-2) 55%,var(--hh-orange) 100%)!important;box-shadow:inset 0 1px rgba(255,255,255,.6),inset 0 -3px rgba(130,45,0,.45)!important;font-weight:700!important} html.hunter-hud .guide-card:nth-child(1 of :not([hidden])) .guide-btn.primary > span{color:inherit} html.hunter-hud .guide-card:nth-child(1 of :not([hidden])) .guide-btn.primary::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.65) 48%,transparent 62%);transform:translateX(-120%);transition:transform .7s var(--hh-ease-out)} html.hunter-hud .guide-card:nth-child(1 of :not([hidden])) .guide-btn.primary:hover{color:#000!important;border-color:#fff0b3!important;background:linear-gradient(180deg,#ffe066 0%,var(--hh-yellow) 45%,var(--hh-orange-2) 100%)!important;box-shadow:inset 0 1px rgba(255,255,255,.8),inset 0 -3px rgba(130,45,0,.35),inset 0 0 24px rgba(255,255,255,.25)!important} html.hunter-hud .guide-card:nth-child(1 of :not([hidden])) .guide-btn.primary:hover::after{transform:translateX(120%)} html.hunter-hud .guide-text-link{position:relative;color:var(--hh-orange);font-family:var(--hh-font-hud);letter-spacing:.1em;text-transform:uppercase} html.hunter-hud .guide-text-link::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--hh-yellow);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--hh-ease-out)} html.hunter-hud .guide-text-link:hover{color:var(--hh-yellow);text-decoration:none} html.hunter-hud .guide-text-link:hover::after{transform:scaleX(1)} html.hunter-hud .guide-empty{--panel-edge:var(--hh-red);border-style:dashed!important;color:var(--hh-ink-2)} /* ═══════════════ 8. Method / editorial standard ═══════════════ */ html.hunter-hud .guide-method{border-top:0;background:var(--gd-energy) top/100% 2px no-repeat} html.hunter-hud .guide-method article{padding:24px 26px 28px} html.hunter-hud .guide-method article > strong{display:inline-block;min-width:56px;height:30px;padding:0 10px;line-height:30px;text-align:center;white-space:nowrap;color:var(--hh-yellow);background:var(--gd-well);box-shadow:var(--gd-well-shadow);font:700 12px/1 var(--hh-font-mono);letter-spacing:.14em;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)} html.hunter-hud .guide-method article > strong::before{content:'// ';color:var(--hh-orange)} html.hunter-hud .guide-method h3{margin:22px 0 8px;font-size:21px} html.hunter-hud .guide-method p{color:var(--hh-dim);font-size:14px;line-height:1.6} /* ═══════════════ 9. Walkthrough layout: contents HUD + section heads ═══════════════ */ html.hunter-hud .guide-detail-layout{border-top:0;background:var(--gd-energy) top/100% 2px no-repeat,var(--gd-hazard) left clamp(20px,4vw,56px) bottom 26px/180px 5px no-repeat} html.hunter-hud .guide-toc{--panel-top:#17110a;--panel-bottom:#090706} html.hunter-hud .guide-toc > span{margin-bottom:14px} /* Route meter: a recessed well; the status diamond follows the live aria-label the page script writes (yellow = not started, orange = en route, visor = all steps checked) and the bar is segmented. */ html.hunter-hud .guide-route-meter{--gd-status:var(--hh-orange-2);margin-bottom:16px;padding:12px 12px 11px;border:1px solid var(--hh-edge);border-radius:0;background:var(--gd-well);box-shadow:var(--gd-well-shadow);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)} html.hunter-hud .guide-route-meter:has(progress[aria-label^="0%"]){--gd-status:var(--hh-yellow)} html.hunter-hud .guide-route-meter:has(progress[aria-label^="100%"]){--gd-status:var(--hh-visor);border-color:rgba(166,255,77,.4)} html.hunter-hud .guide-route-meter b{font-size:24px;line-height:1;letter-spacing:.02em;color:var(--hh-yellow)} html.hunter-hud .guide-route-meter:has(progress[aria-label^="100%"]) b{color:var(--hh-visor)} html.hunter-hud .guide-route-meter small{position:relative;padding-left:12px;color:var(--hh-dim);font-size:9px;font-weight:700;letter-spacing:.14em} html.hunter-hud .guide-route-meter small::before{content:'';position:absolute;left:0;top:calc(50% - 3px);width:5px;height:5px;background:var(--gd-status);transform:rotate(45deg);box-shadow:0 0 7px var(--gd-status)} html.hunter-hud .guide-route-meter progress{height:6px;margin-top:10px;border-radius:0;background:rgba(255,255,255,.05);box-shadow:inset 0 1px 2px rgba(0,0,0,.7)} html.hunter-hud .guide-route-meter progress::-webkit-progress-bar{background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 6px,transparent 6px 8px)} html.hunter-hud .guide-route-meter progress::-webkit-progress-value{background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(6,5,4,.9) 6px 8px),linear-gradient(90deg,var(--hh-yellow),var(--hh-orange))} html.hunter-hud .guide-route-meter:has(progress[aria-label^="100%"]) progress::-webkit-progress-value{background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(6,5,4,.9) 6px 8px),linear-gradient(90deg,#c4ff7a,var(--hh-visor))} html.hunter-hud .guide-route-meter progress::-moz-progress-bar{background:linear-gradient(90deg,var(--hh-yellow),var(--hh-orange))} /* Contents list: plain rows (no clip, so group labels can sit above), a lit rail + diamond on the current objective, and dividers that separate the briefing sections, the chapter route and the field notes (their numbers repeat). */ html.hunter-hud .guide-toc nav a{position:relative;padding:6px 20px 6px 8px;border-radius:0;color:var(--hh-dim);transition:background-color .2s,color .2s,translate .25s var(--hh-ease-out)} html.hunter-hud .guide-toc nav a > span{color:var(--hh-dim);font-size:10px;opacity:.75} html.hunter-hud .guide-toc nav a[href^="#chapter-"] > span{color:var(--hh-orange);opacity:1} html.hunter-hud .guide-toc nav a:hover{color:var(--hh-ink);background:linear-gradient(90deg,rgba(255,122,0,.12),rgba(255,122,0,.02));translate:2px 0} html.hunter-hud .guide-toc nav a.is-active{color:var(--hh-ink);background:linear-gradient(90deg,rgba(255,122,0,.2),rgba(255,122,0,.03) 85%);box-shadow:inset 2px 0 var(--hh-yellow)} html.hunter-hud .guide-toc nav a.is-active > span{color:var(--hh-yellow);opacity:1} html.hunter-hud .guide-toc nav a.is-active::after{content:'';position:absolute;right:8px;top:calc(50% - 3px);width:6px;height:6px;background:var(--hh-yellow);transform:rotate(45deg);box-shadow:0 0 8px rgba(255,196,0,.85)} html.hunter-hud .guide-toc nav a:focus-visible{outline:2px solid var(--hh-yellow);outline-offset:-2px} html.hunter-hud .guide-toc nav a:is([href="#chapter-1"],[href="#secrets"]){margin-top:17px} html.hunter-hud .guide-toc nav a:is([href="#chapter-1"],[href="#secrets"])::before{position:absolute;left:0;right:0;top:-12px;padding-left:8px;color:var(--hh-orange);font:700 8.5px/9px var(--hh-font-mono);letter-spacing:.24em;background:linear-gradient(90deg,var(--hh-edge-2),rgba(77,53,20,0)) right 0 top 50%/calc(100% - 82px) 1px no-repeat;pointer-events:none} html.hunter-hud .guide-toc nav a[href="#chapter-1"]::before{content:'// ROUTE'} html.hunter-hud .guide-toc nav a[href="#secrets"]::before{content:'// NOTES'} html.hunter-hud .guide-progress-reset{margin-top:12px;font-size:9px!important;letter-spacing:.16em!important} html.hunter-hud .guide-progress-reset:hover{border-color:var(--hh-red)!important;color:#ffd0c4!important;box-shadow:inset 0 0 0 1px rgba(255,59,36,.25),inset 0 -14px 22px -14px rgba(255,59,36,.45)!important} html.hunter-hud .guide-manual-link{border:1px solid var(--hh-edge-2);border-radius:0;color:var(--hh-dim);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);background:var(--gd-well);box-shadow:var(--gd-well-shadow);transition:border-color .2s,color .2s} html.hunter-hud .guide-manual-link:hover{border-color:var(--hh-orange);color:var(--hh-ink)} html.hunter-hud .guide-content-section{border-bottom-color:var(--hh-edge)} /* Section heads: number plate aligned to the heading's cap line, measured deck, energy line. */ /* The h2 sits inside a wrapper div, so the page's `.section-title-row > *{margin:0}` never reached it and it kept a ~38px UA margin above and below: zero it so the plate aligns with the cap line and the deck sits under the title. */ html.hunter-hud .section-title-row{position:relative;align-items:start;gap:16px;padding:8px 0 20px;margin-bottom:30px} html.hunter-hud .section-title-row::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gd-energy)} html.hunter-hud .section-title-row .guide-section-index{display:grid;place-items:center;width:44px;height:44px;margin:1px 0 0;padding:0;color:#170900;background:linear-gradient(180deg,var(--hh-yellow),var(--hh-orange-2) 55%,var(--hh-orange));font:700 15px/1 var(--hh-font-mono);letter-spacing:.05em;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,255,255,.6),inset 0 -3px rgba(130,45,0,.45)} html.hunter-hud .section-title-row h2{margin:0;padding-top:1px} html.hunter-hud .section-title-row p{max-width:60ch;margin-top:10px!important;color:var(--hh-dim);font-size:15px;line-height:1.55} /* Counters that descendants read (chapter/step totals at the end of the route, FAQ query badges). */ html.hunter-hud .walkthrough-section{counter-reset:gd-ch gd-step} html.hunter-hud .walkthrough-chapter{counter-increment:gd-ch} html.hunter-hud .chapter-content .guide-route-step{counter-increment:step gd-step} html.hunter-hud .guide-content-section[id="faq"]{counter-reset:gd-faq} html.hunter-hud .guide-faq details{counter-increment:gd-faq} /* Live section counts pinned to the head's right edge on wide screens. These sections carry the page's content-visibility:auto, and its style containment hides descendant counters from the section's own ::after (they read 00), so each count is matched with :has() + :nth-child over the real markup instead. */ @media (min-width:1200px){ html.hunter-hud .guide-content-section:is(.controls-section,.gameplay-section,.walkthrough-section,[id="secrets"],[id="faq"]){position:relative} html.hunter-hud .guide-content-section:is(.controls-section,.gameplay-section,.walkthrough-section,[id="secrets"],[id="faq"])::after{content:none;position:absolute;top:58px;right:0;padding:7px 10px 6px 22px;color:var(--hh-dim);background:linear-gradient(var(--hh-orange),var(--hh-orange)) 9px 50%/5px 5px no-repeat,#080605;border:1px solid var(--hh-edge-2);font:700 10px/1 var(--hh-font-mono);letter-spacing:.2em;font-variant-numeric:tabular-nums;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);pointer-events:none} html.hunter-hud .controls-section:has(tbody > tr:last-child:nth-child(1))::after{content:'01 INPUT'} html.hunter-hud .controls-section:has(tbody > tr:last-child:nth-child(2))::after{content:'02 INPUTS'} html.hunter-hud .controls-section:has(tbody > tr:last-child:nth-child(3))::after{content:'03 INPUTS'} html.hunter-hud .controls-section:has(tbody > tr:last-child:nth-child(4))::after{content:'04 INPUTS'} html.hunter-hud .controls-section:has(tbody > tr:last-child:nth-child(5))::after{content:'05 INPUTS'} html.hunter-hud .controls-section:has(tbody > tr:last-child:nth-child(6))::after{content:'06 INPUTS'} html.hunter-hud .controls-section:has(tbody > tr:last-child:nth-child(7))::after{content:'07 INPUTS'} html.hunter-hud .controls-section:has(tbody > tr:last-child:nth-child(8))::after{content:'08 INPUTS'} html.hunter-hud .controls-section:has(tbody > tr:last-child:nth-child(9))::after{content:'09 INPUTS'} html.hunter-hud .controls-section:has(tbody > tr:last-child:nth-child(10))::after{content:'10 INPUTS'} html.hunter-hud .gameplay-section:has(.gameplay-shot:last-child:nth-child(1))::after{content:'01 FRAME'} html.hunter-hud .gameplay-section:has(.gameplay-shot:last-child:nth-child(2))::after{content:'02 FRAMES'} html.hunter-hud .gameplay-section:has(.gameplay-shot:last-child:nth-child(3))::after{content:'03 FRAMES'} html.hunter-hud .gameplay-section:has(.gameplay-shot:last-child:nth-child(4))::after{content:'04 FRAMES'} html.hunter-hud .gameplay-section:has(.gameplay-shot:last-child:nth-child(5))::after{content:'05 FRAMES'} html.hunter-hud .gameplay-section:has(.gameplay-shot:last-child:nth-child(6))::after{content:'06 FRAMES'} html.hunter-hud .walkthrough-section:has(> .walkthrough-chapter:last-child:nth-child(2))::after{content:'01 CHAPTER'} html.hunter-hud .walkthrough-section:has(> .walkthrough-chapter:last-child:nth-child(3))::after{content:'02 CHAPTERS'} html.hunter-hud .walkthrough-section:has(> .walkthrough-chapter:last-child:nth-child(4))::after{content:'03 CHAPTERS'} html.hunter-hud .walkthrough-section:has(> .walkthrough-chapter:last-child:nth-child(5))::after{content:'04 CHAPTERS'} html.hunter-hud .walkthrough-section:has(> .walkthrough-chapter:last-child:nth-child(6))::after{content:'05 CHAPTERS'} html.hunter-hud .walkthrough-section:has(> .walkthrough-chapter:last-child:nth-child(7))::after{content:'06 CHAPTERS'} html.hunter-hud .walkthrough-section:has(> .walkthrough-chapter:last-child:nth-child(8))::after{content:'07 CHAPTERS'} html.hunter-hud .walkthrough-section:has(> .walkthrough-chapter:last-child:nth-child(9))::after{content:'08 CHAPTERS'} html.hunter-hud .walkthrough-section:has(> .walkthrough-chapter:last-child:nth-child(10))::after{content:'09 CHAPTERS'} html.hunter-hud .walkthrough-section:has(> .walkthrough-chapter:last-child:nth-child(11))::after{content:'10 CHAPTERS'} html.hunter-hud .guide-content-section[id="secrets"]:has(.secret-grid > :last-child:nth-child(1))::after{content:'01 FIELD NOTE'} html.hunter-hud .guide-content-section[id="secrets"]:has(.secret-grid > :last-child:nth-child(2))::after{content:'02 FIELD NOTES'} html.hunter-hud .guide-content-section[id="secrets"]:has(.secret-grid > :last-child:nth-child(3))::after{content:'03 FIELD NOTES'} html.hunter-hud .guide-content-section[id="secrets"]:has(.secret-grid > :last-child:nth-child(4))::after{content:'04 FIELD NOTES'} html.hunter-hud .guide-content-section[id="secrets"]:has(.secret-grid > :last-child:nth-child(5))::after{content:'05 FIELD NOTES'} html.hunter-hud .guide-content-section[id="secrets"]:has(.secret-grid > :last-child:nth-child(6))::after{content:'06 FIELD NOTES'} html.hunter-hud .guide-content-section[id="faq"]:has(.guide-faq > details:last-child:nth-child(1))::after{content:'01 QUERY'} html.hunter-hud .guide-content-section[id="faq"]:has(.guide-faq > details:last-child:nth-child(2))::after{content:'02 QUERIES'} html.hunter-hud .guide-content-section[id="faq"]:has(.guide-faq > details:last-child:nth-child(3))::after{content:'03 QUERIES'} html.hunter-hud .guide-content-section[id="faq"]:has(.guide-faq > details:last-child:nth-child(4))::after{content:'04 QUERIES'} html.hunter-hud .guide-content-section[id="faq"]:has(.guide-faq > details:last-child:nth-child(5))::after{content:'05 QUERIES'} html.hunter-hud .guide-content-section[id="faq"]:has(.guide-faq > details:last-child:nth-child(6))::after{content:'06 QUERIES'} html.hunter-hud .guide-content-section[id="faq"]:has(.guide-faq > details:last-child:nth-child(7))::after{content:'07 QUERIES'} html.hunter-hud .guide-content-section[id="faq"]:has(.guide-faq > details:last-child:nth-child(8))::after{content:'08 QUERIES'} } /* ═══════════════ 10. Briefing: scope plates, coverage ribbon, route map ═══════════════ */ html.hunter-hud .guide-briefing-grid{gap:14px} html.hunter-hud .guide-briefing-grid article{padding:20px 20px 22px;--panel-top:#18120a;--panel-bottom:#0a0807} html.hunter-hud .guide-briefing-grid article:first-child{--panel-edge:var(--hh-edge-hot);--gd-top:rgba(255,212,105,.66)} html.hunter-hud .guide-briefing-grid span{font-size:9.5px;font-weight:700;letter-spacing:.2em} html.hunter-hud .guide-briefing-grid strong{margin:10px 0 6px;font-size:23px;letter-spacing:.03em} html.hunter-hud .guide-briefing-grid article:first-child strong{color:var(--hh-yellow);text-shadow:0 0 18px rgba(255,196,0,.3)} html.hunter-hud .guide-briefing-grid p{color:var(--hh-dim);font-size:13px;line-height:1.55} html.hunter-hud .guide-tag-ribbon > span:first-child{color:#170900!important;border-color:var(--hh-yellow)!important;background:linear-gradient(180deg,var(--hh-yellow),var(--hh-orange-2))!important} /* Route map: numbered objectives in a recessed bay; hover lifts the plate, lights the edge and brackets, slides the arrow. */ html.hunter-hud .guide-route-map{gap:10px} html.hunter-hud .guide-route-map a{--cut:8px;grid-template-columns:44px minmax(0,1fr) 20px;gap:14px;padding:11px 14px 11px 11px;transition:translate .28s var(--hh-ease-out),border-color .2s ease,box-shadow .25s ease} html.hunter-hud .guide-route-map > a > span{display:grid;place-items:center;height:42px;color:var(--hh-yellow);-webkit-text-stroke:0;background:var(--gd-well);box-shadow:var(--gd-well-shadow);font:700 21px/1 var(--hh-font-hud);font-stretch:condensed;letter-spacing:.02em;text-shadow:0 0 12px rgba(255,196,0,.3);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)} html.hunter-hud .guide-route-map strong{font-size:14.5px;letter-spacing:.04em} html.hunter-hud .guide-route-map small{margin-top:4px;color:var(--hh-dim);font-size:11px} html.hunter-hud .guide-route-map i{color:var(--hh-orange);font-size:16px;transition:translate .28s var(--hh-ease-out),color .2s} html.hunter-hud .guide-route-map a:hover, html.hunter-hud .guide-route-map a:focus-visible{--panel-accent:var(--hh-orange);translate:0 -2px;border-color:var(--hh-orange)!important;background-color:transparent;box-shadow:inset 0 0 0 1px rgba(255,122,0,.18),inset 0 -22px 30px -22px rgba(255,122,0,.45)!important} html.hunter-hud .guide-route-map a:hover i, html.hunter-hud .guide-route-map a:focus-visible i{translate:3px 0;color:var(--hh-yellow)} /* ═══════════════ 11. Controls table + keycaps ═══════════════ */ html.hunter-hud .control-table-wrap{--panel-top:#120e09;--panel-bottom:#0a0807;--panel-accent:transparent} html.hunter-hud .controls-section table{background:transparent} html.hunter-hud .controls-section th, html.hunter-hud .controls-section td{border-bottom-color:var(--hh-edge)} html.hunter-hud .controls-section thead th{background:linear-gradient(180deg,rgba(255,122,0,.09),rgba(255,122,0,.02));font-size:10px;font-weight:700;letter-spacing:.2em} html.hunter-hud .controls-section tbody tr{transition:background-color .2s ease} html.hunter-hud .controls-section tbody tr:hover{background-color:rgba(255,122,0,.05)} html.hunter-hud .controls-section tbody th{background:linear-gradient(90deg,rgba(0,0,0,.4),transparent)} html.hunter-hud .controls-section td strong{font-size:15px;line-height:1.25;letter-spacing:.04em} html.hunter-hud .controls-section td span{max-width:62ch;color:var(--hh-dim);font-size:13.5px;line-height:1.55} html.hunter-hud kbd{min-width:56px;padding:8px 11px 7px;border:1px solid rgba(255,140,40,.5);border-bottom:4px solid #6a3c0c;border-radius:0;color:var(--hh-yellow);background:linear-gradient(180deg,#2c1e0e,#140e08 72%);font:700 12px/1 var(--hh-font-mono);letter-spacing:.06em;text-shadow:0 0 8px rgba(255,196,0,.35);clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);box-shadow:inset 0 1px rgba(255,225,160,.25),inset 0 -1px rgba(0,0,0,.5)} /* ═══════════════ 12. Gallery: field photos, status-coded checkpoint notes, lightbox ═══════════════ */ html.hunter-hud .gameplay-gallery{gap:18px} html.hunter-hud .gameplay-shot{--panel-top:#120e09;--panel-bottom:#080605} html.hunter-hud .gameplay-shot-route{border-bottom:1px solid var(--hh-edge);background:linear-gradient(90deg,rgba(255,122,0,.1),transparent 70%)} html.hunter-hud .gameplay-shot-route span{display:grid;place-items:center;height:22px;color:#170900;background:linear-gradient(180deg,var(--hh-yellow),var(--hh-orange-2));font-size:9.5px;font-weight:700;letter-spacing:.08em;clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)} html.hunter-hud .gameplay-shot-route strong, html.hunter-hud .chapter-visual-heading strong{font-family:var(--hh-font-hud);font-stretch:condensed;letter-spacing:.04em;color:var(--hh-ink)} html.hunter-hud .gameplay-shot-route strong{font-size:14px} html.hunter-hud .gameplay-shot button{border:1px solid var(--hh-edge-2);border-radius:0;background:#050403;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:border-color .2s,box-shadow .2s} html.hunter-hud .gameplay-shot button::after{background:repeating-linear-gradient(0deg,rgba(255,200,120,.024) 0 1px,transparent 1px 4px),linear-gradient(180deg,transparent 58%,rgba(6,4,2,.75))} html.hunter-hud .gameplay-shot button::before, html.hunter-hud .chapter-visual button::before{content:'';position:absolute;inset:10px;z-index:3;pointer-events:none;background:var(--gd-bracket),var(--gd-reticle);opacity:.7;filter:drop-shadow(0 0 3px rgba(0,0,0,.95));transition:opacity .3s ease,transform .45s var(--hh-ease-out);transform:scale(1.02)} html.hunter-hud :is(.gameplay-shot,.chapter-visual) button:is(:hover,:focus-visible)::before{opacity:1;transform:none} /* Imagery scan pass on hover: the beam crosses once; returning the pointer resets it instantly while hidden. */ html.hunter-hud :is(.gameplay-shot,.chapter-visual) button picture{position:relative;overflow:hidden} html.hunter-hud :is(.gameplay-shot,.chapter-visual) button picture::after{content:'';position:absolute;left:0;right:0;top:0;height:18%;pointer-events:none;opacity:0;transform:translateY(-100%);background:linear-gradient(180deg,transparent,rgba(255,200,90,.08) 60%,rgba(255,225,150,.55) 98%,transparent);transition:transform 0s linear .25s,opacity .25s ease} html.hunter-hud :is(.gameplay-shot,.chapter-visual) button:hover picture::after{opacity:1;transform:translateY(560%);transition:transform 1.1s var(--hh-ease-io),opacity .15s ease} html.hunter-hud .gameplay-shot button:hover, html.hunter-hud .gameplay-shot button:focus-visible{border-color:var(--hh-orange);box-shadow:0 0 0 1px rgba(255,122,0,.35),0 0 30px rgba(255,122,0,.2),0 22px 50px rgba(0,0,0,.4)} html.hunter-hud .gameplay-shot button:focus-visible{outline:2px solid var(--hh-yellow);outline-offset:-4px} html.hunter-hud .gameplay-shot-number{color:var(--hh-orange)} html.hunter-hud .gameplay-shot-zoom{color:var(--hh-yellow);opacity:.9} html.hunter-hud .gameplay-shot figcaption{color:var(--hh-dim);font-size:12px;line-height:1.55} html.hunter-hud .gameplay-shot figcaption .gameplay-caption-line{background:var(--hh-orange);box-shadow:0 0 8px rgba(255,122,0,.7)} html.hunter-hud .gameplay-shot-source{color:var(--hh-orange);letter-spacing:.1em} /* OBJECTIVE = yellow (attention), LOOK FOR = amber, DO THIS = visor (ok), AVOID = red (critical). The order is the same in every checkpoint list on all 18 walkthroughs. */ html.hunter-hud .visual-checkpoint-notes{border-top:1px solid var(--hh-edge);background:var(--hh-edge)} html.hunter-hud .visual-checkpoint-notes > div{--gd-status:var(--hh-yellow);padding:12px 14px 13px 16px;background:linear-gradient(180deg,#0e0b08,#080605);box-shadow:inset 2px 0 var(--gd-status)} html.hunter-hud .visual-checkpoint-notes > div:nth-child(2){--gd-status:var(--hh-orange-2)} html.hunter-hud .visual-checkpoint-notes > div:nth-child(3){--gd-status:var(--hh-visor)} html.hunter-hud .visual-checkpoint-notes > div:nth-child(4){--gd-status:#ff5a40} html.hunter-hud .visual-checkpoint-notes dt{display:flex;align-items:center;gap:7px;color:var(--gd-status);font-size:9.5px;font-weight:700;letter-spacing:.2em} html.hunter-hud .visual-checkpoint-notes dt::before{content:'';flex:0 0 5px;height:5px;background:currentColor;transform:rotate(45deg)} html.hunter-hud .visual-checkpoint-notes dd{color:var(--hh-ink-2);font-size:12px;line-height:1.5} html.hunter-hud .gameplay-capture-note{max-width:none;border:1px solid rgba(166,255,77,.22);border-left:3px solid var(--hh-visor);border-radius:0;color:var(--hh-dim);background:linear-gradient(90deg,rgba(166,255,77,.06),rgba(166,255,77,.01) 70%);font-size:12.5px;line-height:1.6;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)} html.hunter-hud .gameplay-capture-note strong{color:var(--hh-visor)} html.hunter-hud .guide-image-lightbox{--cut:16px;--panel-top:#0e0b08;--panel-bottom:#050403;color:var(--hh-ink);box-shadow:0 35px 110px rgba(0,0,0,.85),0 0 0 1px rgba(255,122,0,.25)!important} html.hunter-hud .guide-image-lightbox::backdrop{background:rgba(3,2,1,.9)} html.hunter-hud .guide-image-lightbox img{border-radius:0} html.hunter-hud .guide-image-lightbox figcaption{color:var(--hh-dim);border-top:1px solid var(--hh-edge);background:var(--gd-energy) top/100% 2px no-repeat} html.hunter-hud .guide-image-lightbox-close{width:42px;height:42px;padding:0!important;border:1px solid var(--hh-edge-hot)!important;border-radius:0!important;color:var(--hh-yellow)!important;background:linear-gradient(180deg,rgba(24,17,10,.96),rgba(6,5,4,.96))!important;font:400 24px/1 var(--hh-font-hud)!important;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);box-shadow:0 0 0 1px rgba(255,122,0,.18),0 6px 22px rgba(0,0,0,.7)!important;transition:color .2s,border-color .2s,background .2s} html.hunter-hud .guide-image-lightbox-close:hover, html.hunter-hud .guide-image-lightbox-close:focus-visible{color:#180500!important;border-color:var(--hh-red)!important;background:linear-gradient(180deg,var(--hh-orange-2),var(--hh-ember))!important;outline:0} /* ═══════════════ 13. Chapters: sticky objective readout on a lit track, checkpoint plates ═══════════════ */ html.hunter-hud .walkthrough-chapter{position:relative;border-top:0;background:var(--gd-energy) top/100% 2px no-repeat} /* The section head already draws an energy line right above the first chapter / the FAQ list: no double rule. */ html.hunter-hud .section-title-row + :is(.walkthrough-chapter,.guide-faq){background-image:none} /* Route end: a hazard band and the real totals (descendant counters), closing the last chapter. */ html.hunter-hud .walkthrough-chapter:last-child .chapter-content::after{content:'// END OF ROUTE \00B7 ' counter(gd-ch,decimal-leading-zero) ' CHAPTERS \00B7 ' counter(gd-step,decimal-leading-zero) ' STEPS';display:block;margin-top:30px;padding:8px 0 8px 148px;color:var(--hh-dim);background:var(--gd-hazard) 0 50%/130px 6px no-repeat;font:700 10px/1.3 var(--hh-font-mono);letter-spacing:.2em;font-variant-numeric:tabular-nums} /* Readout: chamfered numeral plate + step-count chip. A chapter whose steps are all checked flips to visor "CLR". */ html.hunter-hud .chapter-rail{z-index:1} html.hunter-hud .chapter-number{position:relative;display:block;padding:19px 0 9px;color:var(--hh-yellow);-webkit-text-stroke:0;font:700 38px/1 var(--hh-font-hud);font-stretch:condensed;letter-spacing:.02em;text-align:center;text-shadow:0 0 18px rgba(255,196,0,.35);background:linear-gradient(180deg,#18110a,#0a0807);border:1px solid var(--hh-edge-hot);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);box-shadow:inset 0 1px rgba(255,200,110,.2),inset 0 -14px 18px -14px rgba(0,0,0,.85)} html.hunter-hud .chapter-number::before{content:'CH';position:absolute;top:7px;left:0;right:0;color:var(--hh-orange);font:700 8.5px/1 var(--hh-font-mono);letter-spacing:.3em;text-shadow:none} html.hunter-hud .chapter-rail small{margin-top:6px;padding:5px 2px 4px;background:#080605;border:1px solid var(--hh-edge);font-size:9px;font-weight:700;letter-spacing:.12em} html.hunter-hud .walkthrough-chapter:has(.guide-route-step):not(:has(.guide-route-step:not(.is-complete))) .chapter-number{color:var(--hh-visor);border-color:rgba(166,255,77,.55);text-shadow:0 0 18px rgba(166,255,77,.4)} html.hunter-hud .walkthrough-chapter:has(.guide-route-step):not(:has(.guide-route-step:not(.is-complete))) .chapter-number::before{content:'CLR';color:var(--hh-visor)} html.hunter-hud .walkthrough-chapter:has(.guide-route-step):not(:has(.guide-route-step:not(.is-complete))) .chapter-rail small{color:var(--hh-visor);border-color:rgba(166,255,77,.35)} /* Track (desktop, where the readout is sticky): a dashed rail down the chapter, and a lit trail that hangs above the readout. The chapter clips vertically (overflow-y:clip keeps sticky working, unlike hidden), so the trail always runs exactly from the chapter's top to wherever the readout currently is — the distance read so far. */ @media (min-width:781px){ html.hunter-hud .walkthrough-chapter{overflow-y:clip} html.hunter-hud .walkthrough-chapter::before{content:'';position:absolute;left:36px;top:150px;bottom:60px;width:2px;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,122,0,.34) 0 8px,transparent 8px 14px)} html.hunter-hud .walkthrough-chapter::after{content:'';position:absolute;left:32px;bottom:52px;width:10px;height:10px;pointer-events:none;background:var(--hh-edge-hot);transform:rotate(45deg);box-shadow:inset 0 0 0 2px #0a0807} html.hunter-hud .chapter-rail::before{content:'';position:absolute;left:calc(50% - 1px);bottom:100%;width:2px;height:6000px;pointer-events:none;background:linear-gradient(0deg,var(--hh-yellow),var(--hh-orange) 70px,rgba(255,122,0,.5) 320px,rgba(255,122,0,.22) 1400px,rgba(255,122,0,.12))} html.hunter-hud .walkthrough-chapter:has(.guide-route-step):not(:has(.guide-route-step:not(.is-complete)))::after{background:var(--hh-visor)} html.hunter-hud .walkthrough-chapter:has(.guide-route-step):not(:has(.guide-route-step:not(.is-complete))) .chapter-rail::before{background:linear-gradient(0deg,#c4ff7a,var(--hh-visor) 70px,rgba(166,255,77,.45) 320px,rgba(166,255,77,.16))} } html.hunter-hud .chapter-content > header{margin-bottom:18px} html.hunter-hud .chapter-label{font-size:10.5px;font-weight:700;letter-spacing:.24em} html.hunter-hud .chapter-content h3{margin:8px 0 0;font-size:var(--gd-h3);line-height:1} html.hunter-hud .chapter-summary{color:var(--hh-dim)} /* Brief: a recessed two-cell plate; FINISH LINE is the objective, so it carries the yellow attention accent. */ html.hunter-hud .chapter-brief{--cut:8px;margin-bottom:20px;background:var(--hh-edge)} html.hunter-hud .chapter-brief > div{padding:15px 18px 16px;background:transparent} html.hunter-hud .chapter-brief > div + div{border-left:1px solid var(--hh-edge);background:linear-gradient(90deg,rgba(255,196,0,.06),transparent 75%)} html.hunter-hud .chapter-brief span{font-size:9.5px;font-weight:700;letter-spacing:.2em} html.hunter-hud .chapter-brief > div + div span{color:var(--hh-yellow)} html.hunter-hud .chapter-brief p{margin-top:6px;color:var(--hh-ink-2);font-size:14px;line-height:1.55} /* Steps = checkpoint plates on a conduit. Each plate draws its own segment through the checkbox column: the part above the checkbox crosses the gap from the previous plate (a narrow tab in the chamfer clip lets it show), the part below runs to the plate's bottom. A checked step lights its outgoing segment and the next step's incoming one, so the lit conduit always reaches exactly the next unchecked checkpoint. */ html.hunter-hud .guide-route-steps{gap:10px} html.hunter-hud .chapter-content .guide-route-step{--cut:8px;--gd-pad:16px;--gd-in:rgba(255,122,0,.3);--gd-out:rgba(255,122,0,.3);--panel-accent:transparent;--panel-top:#120e09;--panel-bottom:#0a0807;position:relative;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:var(--gd-pad) 20px var(--gd-pad) var(--gd-pad); clip-path:polygon(var(--cut) 0,calc(var(--gd-pad) + 13px) 0,calc(var(--gd-pad) + 13px) -12px,calc(var(--gd-pad) + 19px) -12px,calc(var(--gd-pad) + 19px) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)); transition:translate .28s var(--hh-ease-out),border-color .2s ease,box-shadow .25s ease} html.hunter-hud .chapter-content .guide-route-step::after{content:'';position:absolute;z-index:0;left:calc(var(--gd-pad) + 14px);top:-11px;bottom:0;width:2px;pointer-events:none;background:linear-gradient(180deg,var(--gd-in) 0 calc(var(--gd-pad) + 11px),transparent calc(var(--gd-pad) + 11px) calc(var(--gd-pad) + 41px),var(--gd-out) calc(var(--gd-pad) + 41px))} html.hunter-hud .chapter-content .guide-route-step.is-complete{--gd-out:var(--hh-visor)} html.hunter-hud .chapter-content .guide-route-step.is-complete + .guide-route-step{--gd-in:var(--hh-visor)} html.hunter-hud .chapter-content .guide-route-step:first-child{--gd-in:transparent} html.hunter-hud .chapter-content .guide-route-step:last-child{--gd-out:transparent} html.hunter-hud .chapter-content .guide-route-step:hover{translate:0 -1px;border-color:var(--hh-edge-hot)!important;box-shadow:inset 0 0 0 1px rgba(255,122,0,.12),inset 0 -26px 34px -26px rgba(255,122,0,.34)!important} html.hunter-hud .chapter-content .guide-route-step:has(input:focus-visible){border-color:var(--hh-yellow)!important} html.hunter-hud .guide-step-check{z-index:1} html.hunter-hud .guide-step-check > span[aria-hidden]{position:relative;border:1px solid var(--hh-edge-hot);border-radius:0;background:linear-gradient(180deg,#1b130a,#0a0807);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,200,120,.14),inset 0 -8px 12px -8px rgba(0,0,0,.85);transition:border-color .18s,background .18s,box-shadow .18s} html.hunter-hud .guide-step-check > span[aria-hidden]::before{content:'';position:absolute;left:calc(50% - 3px);top:calc(50% - 3px);width:6px;height:6px;background:rgba(255,122,0,.55);transform:rotate(45deg);transition:opacity .18s ease,transform .25s var(--hh-ease-out),background-color .2s ease} html.hunter-hud .guide-route-step:hover .guide-step-check > span[aria-hidden]{border-color:var(--hh-orange)} html.hunter-hud .guide-route-step:hover .guide-step-check > span[aria-hidden]::before{background-color:var(--hh-yellow)} html.hunter-hud .guide-step-check input:focus-visible + span{outline:2px solid var(--hh-yellow)} html.hunter-hud .guide-step-check input:checked + span{border-color:var(--hh-visor);background:linear-gradient(180deg,#c4ff7a,var(--hh-visor));box-shadow:inset 0 1px rgba(255,255,255,.5)} html.hunter-hud .guide-step-check input:checked + span::before{opacity:0;transform:rotate(45deg) scale(.2)} html.hunter-hud .guide-step-label{font-size:10px;font-weight:700;letter-spacing:.22em} html.hunter-hud .guide-route-step p{max-width:var(--gd-measure);margin-top:7px;color:var(--hh-ink-2);font-size:15px;line-height:1.62} html.hunter-hud .chapter-content .guide-route-step.is-complete{opacity:1;--panel-top:#0e1409;--panel-bottom:#080a06;--panel-edge:rgba(166,255,77,.3);--panel-cut:rgba(166,255,77,.5);--gd-top:rgba(166,255,77,.3)} html.hunter-hud .guide-route-step.is-complete .guide-step-label{color:var(--hh-visor)} html.hunter-hud .guide-route-step.is-complete .guide-step-label::after{content:' \00B7 CLEARED'} html.hunter-hud .guide-route-step.is-complete p{color:var(--hh-dim);text-decoration-color:rgba(166,255,77,.3)} html.hunter-hud .guide-step-note strong{color:var(--hh-yellow)} /* Visual checkpoint (tier 1 plate). */ html.hunter-hud .chapter-visual{--panel-top:#120e09;--panel-bottom:#080605;margin-top:18px} html.hunter-hud .chapter-visual-heading{grid-template-columns:auto minmax(0,1fr);gap:14px;padding:12px 16px;border-bottom:1px solid var(--hh-edge);background:linear-gradient(90deg,rgba(255,122,0,.14),rgba(255,196,0,.02) 75%)} html.hunter-hud .chapter-visual-heading span{font-size:9.5px;font-weight:700;letter-spacing:.18em} html.hunter-hud .chapter-visual-heading strong{font-size:13px} html.hunter-hud .chapter-visual button::after{background:linear-gradient(180deg,transparent 62%,rgba(6,4,2,.86))} html.hunter-hud .chapter-visual button > span{color:var(--hh-yellow)} html.hunter-hud .chapter-visual button:focus-visible{outline-color:var(--hh-yellow)} html.hunter-hud .chapter-visual figcaption{color:var(--hh-dim);border-top:1px solid var(--hh-edge);font-size:12px;line-height:1.55} html.hunter-hud .chapter-visual figcaption strong{font-size:9.5px;font-weight:700;letter-spacing:.18em} html.hunter-hud .chapter-visual figcaption a{color:var(--hh-yellow)} /* Warning = critical: a red hazard band instead of a plain rule, a drawn warning triangle, a measured line. */ html.hunter-hud .chapter-warning{position:relative;margin-top:14px;padding:15px 18px 15px 30px;border:1px solid rgba(255,59,36,.34);border-left:0;border-radius:0;background:var(--gd-hazard-red) 0 0/11px 100% no-repeat,linear-gradient(90deg,rgba(255,59,36,.11),rgba(255,59,36,.02) 70%);clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)} html.hunter-hud .chapter-warning strong{display:flex;align-items:center;gap:9px;color:#ff6a50;font-size:10.5px;font-weight:700;letter-spacing:.24em} html.hunter-hud .chapter-warning strong::before{content:'';flex:0 0 11px;height:10px;background:linear-gradient(#ff5a40,#ff5a40) 5px 3px/1px 4px no-repeat,linear-gradient(#170500,#170500) 5px 3px/1px 4px no-repeat,var(--hh-red);clip-path:polygon(50% 0,100% 100%,0 100%)} html.hunter-hud .chapter-warning p{max-width:var(--gd-measure);margin-top:7px;color:var(--hh-ink-2);font-size:14px;line-height:1.55} /* Checkpoint = ok: outlined while the chapter still has unchecked steps, fully lit once every step is checked. */ html.hunter-hud .chapter-checkpoint{align-items:center;gap:14px;margin-top:14px;padding:14px 18px;border:1px solid rgba(166,255,77,.34);border-radius:0;background:linear-gradient(90deg,rgba(166,255,77,.09),rgba(166,255,77,.015) 75%);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);box-shadow:inset 0 1px rgba(200,255,150,.12)} html.hunter-hud .chapter-checkpoint > span{width:30px;height:30px;border-radius:0;color:#07120b;background:linear-gradient(180deg,#c4ff7a,var(--hh-visor));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,255,255,.5)} html.hunter-hud .chapter-checkpoint strong{color:var(--hh-visor);font-size:10.5px;font-weight:700;letter-spacing:.22em} html.hunter-hud .chapter-checkpoint p{max-width:var(--gd-measure);margin-top:4px;color:var(--hh-ink-2);font-size:14px;line-height:1.5} html.hunter-hud .walkthrough-chapter:has(.guide-route-step:not(.is-complete)) .chapter-checkpoint{border-color:rgba(166,255,77,.2);background:linear-gradient(90deg,rgba(166,255,77,.04),transparent 75%);box-shadow:none} html.hunter-hud .walkthrough-chapter:has(.guide-route-step:not(.is-complete)) .chapter-checkpoint > span{color:var(--hh-visor);background:#0a0f07;box-shadow:inset 0 0 0 1px rgba(166,255,77,.6)} /* ═══════════════ 14. Secrets, FAQ, sources, related ═══════════════ */ html.hunter-hud .secret-grid{gap:14px} html.hunter-hud .secret-grid article{padding:22px 22px 24px;--panel-top:#1a120a;--panel-bottom:#0a0807} html.hunter-hud .guide-magazine .secret-grid article > span{-webkit-text-stroke:1px rgba(255,100,40,.72);font-family:var(--hh-font-hud);font-size:44px;line-height:1;text-shadow:0 0 20px rgba(255,77,0,.22)} html.hunter-hud .secret-grid h3{margin:16px 0 8px;font-size:19px;line-height:1.1} html.hunter-hud .secret-grid p{color:var(--hh-dim);font-size:13.5px;line-height:1.6} /* FAQ: numbered query badges (counter), a lit rail on the open answer, measured answer lines. */ html.hunter-hud .guide-faq{border-top:0;background:var(--gd-energy) top/100% 2px no-repeat} html.hunter-hud .guide-faq details{border-bottom-color:var(--hh-edge);transition:background-color .25s ease} html.hunter-hud .guide-faq details[open]{background-color:rgba(255,122,0,.04);box-shadow:inset 2px 0 var(--hh-orange)} html.hunter-hud .guide-faq summary{position:relative;min-height:60px;padding:16px 4px 16px 54px!important;font-family:var(--hh-font-text);font-size:16px;line-height:1.35;color:var(--hh-ink-2);transition:color .2s} html.hunter-hud .guide-faq summary::before{content:counter(gd-faq,decimal-leading-zero);position:absolute;left:8px;top:50%;width:32px;height:24px;margin-top:-12px;display:grid;place-items:center;color:var(--hh-dim);background-color:#0a0806;border:1px solid var(--hh-edge-2);font:700 11px/1 var(--hh-font-mono);letter-spacing:.06em;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);transition:color .2s,background-color .2s,border-color .2s} html.hunter-hud .guide-faq summary:hover::before, html.hunter-hud .guide-faq details[open] summary::before{color:#170900;background-color:var(--hh-yellow);border-color:var(--hh-yellow)} html.hunter-hud .guide-faq summary:hover, html.hunter-hud .guide-faq details[open] summary{color:var(--hh-yellow)} html.hunter-hud .guide-faq summary span{color:var(--hh-orange);text-shadow:0 0 10px rgba(255,122,0,.6)} html.hunter-hud .guide-faq details p{max-width:calc(var(--gd-measure) + 54px);padding:0 34px 22px 54px;color:var(--hh-dim);font-size:15px;line-height:1.65} /* Sources: tier 1 plate with the editorial seal. */ html.hunter-hud .guide-sources{--panel-top:#15100a;--panel-bottom:#0a0807;padding:24px 26px} html.hunter-hud .guide-sources h2{font-size:20px;letter-spacing:.05em} html.hunter-hud .guide-sources h2::before{content:'// ';font-family:var(--hh-font-mono);color:var(--hh-orange);font-size:.72em;letter-spacing:.08em} html.hunter-hud .guide-sources p, html.hunter-hud .guide-sources li{color:var(--hh-dim);font-size:13px;line-height:1.6} html.hunter-hud .guide-sources p{max-width:72ch} html.hunter-hud .guide-sources a{color:var(--hh-orange)} html.hunter-hud .guide-sources a:hover{color:var(--hh-yellow)} html.hunter-hud .guide-sources ul{padding-left:0;list-style:none} html.hunter-hud .guide-sources li{position:relative;padding-left:16px} html.hunter-hud .guide-sources li::before{content:'';position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--hh-orange);box-shadow:0 0 6px rgba(255,122,0,.85)} /* Editorial seal: solid yellow octagon with a carbon octagon inset on top — a clean 2px ring. (A border + clip-path only paints the four straight sides, which reads as broken slashes.) */ html.hunter-hud .guide-editorial-stamp{position:relative;border:0;border-radius:0;color:var(--hh-yellow);clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%);background:var(--hh-yellow);box-shadow:none;text-shadow:0 0 8px rgba(255,196,0,.3)} html.hunter-hud .guide-editorial-stamp::before{content:'';position:absolute;inset:2px;z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(255,196,0,.06),transparent 60%),#0b0907;clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%)} html.hunter-hud .guide-editorial-stamp b, html.hunter-hud .guide-editorial-stamp span{position:relative;z-index:1} html.hunter-hud .guide-editorial-stamp b{font-family:var(--hh-font-hud)} html.hunter-hud .guide-editorial-stamp span{display:block;font-family:var(--hh-font-mono);font-size:6px;font-weight:700;letter-spacing:.04em;max-width:78%;margin-inline:auto;text-shadow:none} @media (min-width:781px){ html.hunter-hud .guide-editorial-stamp{width:104px} html.hunter-hud .guide-editorial-stamp span{font-size:7px;letter-spacing:.02em} } /* Related / next issue: recessed link plates with a counter and an arrow that slides on hover. */ html.hunter-hud .related-guides{border-top:0;counter-reset:gd-next;background:var(--gd-energy) top/100% 2px no-repeat} html.hunter-hud .related-grid > a{position:relative;counter-increment:gd-next;padding-right:40px;--panel-top:#15100a;--panel-bottom:#0a0807;transition:translate .28s var(--hh-ease-out),border-color .2s ease,box-shadow .25s ease} html.hunter-hud .related-grid > a::after{content:'\2192';position:absolute;right:16px;top:calc(50% - 10px);color:var(--hh-orange);font:700 16px/20px var(--hh-font-hud);transition:translate .28s var(--hh-ease-out),color .2s} html.hunter-hud .related-grid > a:hover, html.hunter-hud .related-grid > a:focus-visible{--panel-accent:var(--hh-orange);translate:0 -2px;border-color:var(--hh-orange)!important;box-shadow:inset 0 0 0 1px rgba(255,122,0,.2),inset 0 -24px 40px -24px rgba(255,122,0,.4)!important} html.hunter-hud .related-grid > a:hover::after, html.hunter-hud .related-grid > a:focus-visible::after{translate:4px 0;color:var(--hh-yellow)} html.hunter-hud .related-grid img{background:#080605} html.hunter-hud .related-grid small{font-size:9.5px;font-weight:700} html.hunter-hud .related-grid small::before{content:counter(gd-next,decimal-leading-zero) ' // ';color:var(--hh-yellow)} html.hunter-hud .related-grid em{font-family:var(--hh-font-mono);font-size:10.5px;letter-spacing:.1em} /* Reading progress: sits just under the HUD top line, yellow → orange → ember. */ html.hunter-hud .reading-progress{top:2px;height:3px;background:linear-gradient(90deg,var(--hh-yellow),var(--hh-orange) 60%,var(--hh-ember));box-shadow:0 0 14px rgba(255,122,0,.9)} /* ═══════════════ 15. Footer + mobile CTA ═══════════════ */ html.hunter-hud .guide-footer{position:relative;border-top:1px solid var(--hh-edge);background:var(--gd-hazard) left clamp(20px,5vw,72px) top 0/180px 5px no-repeat,linear-gradient(180deg,#0b0907,#050403)} html.hunter-hud .guide-footer::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--gd-energy)} html.hunter-hud .guide-footer strong{font-family:var(--hh-font-hud);letter-spacing:.14em;color:var(--hh-ink);text-shadow:0 0 16px rgba(255,122,0,.3)} html.hunter-hud .guide-footer strong::before{content:'// ';font-family:var(--hh-font-mono);color:var(--hh-orange)} html.hunter-hud .guide-footer span{color:var(--hh-dim)} html.hunter-hud .guide-footer a{position:relative;color:var(--hh-dim);font-family:var(--hh-font-hud);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:color .2s} html.hunter-hud .guide-footer a::before{content:'';position:absolute;left:0;bottom:-3px;width:0;height:2px;background:var(--hh-yellow);box-shadow:0 0 10px var(--hh-orange);transition:width .3s var(--hh-ease-out)} html.hunter-hud .guide-footer a:hover{color:var(--hh-ink)} html.hunter-hud .guide-footer a:hover::before{width:100%} /* Floating "Play now": a strong carbon plate with a yellow edge, so the hero's power button stays the one primary. */ html.hunter-hud .guide-mobile-play{border-radius:0!important;font-size:12px!important;letter-spacing:.12em!important;color:var(--hh-ink)!important;border:1px solid var(--hh-yellow)!important;background:linear-gradient(180deg,rgba(38,26,12,.97),rgba(12,9,6,.97))!important;box-shadow:inset 0 1px rgba(255,220,140,.22),inset 0 -12px 18px -12px rgba(255,122,0,.5)!important} html.hunter-hud .guide-mobile-play > span{color:var(--hh-yellow)} /* ═══════════════ 16. Choreography ═══════════════ */ /* Load sequence (above the fold): issue chips → kicker → title → deck → actions → readouts, 40-70ms apart. Elements the core will scroll-reveal instead are left to it (:not(.hh-will-reveal)). */ html.hunter-hud .guide-issue-line > *{animation:gd-slide .5s var(--hh-ease-out) both} html.hunter-hud .guide-issue-line > :nth-child(2){animation-delay:.05s} html.hunter-hud .guide-issue-line > :nth-child(3){animation-delay:.1s} html.hunter-hud .guide-kicker{animation:gd-slide .5s var(--hh-ease-out) .14s both} html.hunter-hud :is(.guide-hub-hero,.guide-detail-hero) h1{animation:gd-rise .7s var(--hh-ease-out) .2s both} html.hunter-hud :is(.guide-hub-hero,.guide-detail-hero) h1 em{animation:gd-rise .7s var(--hh-ease-out) .27s both} /* One scan pass acquires the title; it travels inside the h1 box, so it never widens the page. */ html.hunter-hud :is(.guide-hub-hero,.guide-detail-hero) h1::after{content:'';position:absolute;left:0;top:-4%;bottom:-4%;width:18%;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,rgba(255,215,120,.22) 70%,rgba(255,236,180,.5) 96%,transparent);animation:gd-title-scan 1s var(--hh-ease-io) .4s both} html.hunter-hud :is(.guide-cover-copy > p,.guide-detail-copy > p){animation:gd-rise-sm .6s var(--hh-ease-out) .36s both} html.hunter-hud .guide-cover-copy > .guide-btn, html.hunter-hud .guide-byline{animation:gd-rise-sm .6s var(--hh-ease-out) .42s both} html.hunter-hud .guide-detail-actions{animation:gd-rise-sm .6s var(--hh-ease-out) .48s both} html.hunter-hud .guide-hero-stats > div:not(.hh-will-reveal):not(.hh-reveal){animation:gd-rise-sm .6s var(--hh-ease-out) .5s both} html.hunter-hud .guide-hero-stats > div:not(.hh-will-reveal):not(.hh-reveal):nth-child(2){animation-delay:.56s} html.hunter-hud .guide-hero-stats > div:not(.hh-will-reveal):not(.hh-reveal):nth-child(3){animation-delay:.62s} html.hunter-hud .guide-hero-stats > div:not(.hh-will-reveal)::after{animation:gd-draw-x .9s var(--hh-ease-out) .75s both} html.hunter-hud .guide-hero-stats > div:not(.hh-will-reveal):nth-child(2)::after{animation-delay:.81s} html.hunter-hud .guide-hero-stats > div:not(.hh-will-reveal):nth-child(3)::after{animation-delay:.87s} html.hunter-hud .guide-quick-facts:not(.hh-will-reveal):not(.hh-reveal){animation:gd-rise-sm .6s var(--hh-ease-out) .54s both} html.hunter-hud .guide-breadcrumb{animation:gd-fade .5s ease-out both} html.hunter-hud .guide-cover-frame{animation:gd-frame-in .8s var(--hh-ease-out) both} html.hunter-hud .guide-cover-frame.frame-1{animation-delay:.3s} html.hunter-hud .guide-cover-frame.frame-2{animation-delay:.38s} html.hunter-hud .guide-cover-frame.frame-3{animation-delay:.46s} html.hunter-hud .guide-hero-gameplay{animation:gd-frame-in .9s var(--hh-ease-out) .3s both} html.hunter-hud .guide-cover-mini.guide-detail-cover{animation:gd-frame-in .8s var(--hh-ease-out) .5s both} /* Scroll reveal: siblings follow their row partner 55-60ms later. */ html.hunter-hud[data-hud-family="guides"] .hh-reveal{animation-duration:.62s} html.hunter-hud :is(.guide-card-grid,.gameplay-gallery,.guide-route-map) > .hh-reveal:nth-child(2n){animation-delay:60ms} html.hunter-hud :is(.guide-briefing-grid,.secret-grid,.guide-method-grid,.related-grid,.guide-hero-stats) > .hh-reveal:nth-child(3n+2){animation-delay:55ms} html.hunter-hud :is(.guide-briefing-grid,.secret-grid,.guide-method-grid,.related-grid,.guide-hero-stats) > .hh-reveal:nth-child(3n){animation-delay:110ms} html.hunter-hud .guide-faq > details.hh-reveal:nth-child(2){animation-delay:50ms} html.hunter-hud .guide-faq > details.hh-reveal:nth-child(3){animation-delay:100ms} html.hunter-hud .guide-faq > details.hh-reveal:nth-child(4){animation-delay:150ms} html.hunter-hud .guide-faq > details.hh-reveal:nth-child(n+5){animation-delay:200ms} html.hunter-hud .guide-hero-stats > .hh-reveal::after{animation:gd-draw-x .9s var(--hh-ease-out) .3s both} /* A chapter arrives as a sequence: readout, heading, brief, then its first checkpoints. */ html.hunter-hud .walkthrough-chapter.hh-reveal :is(.chapter-rail,.chapter-content > header,.chapter-brief,.guide-route-step:nth-child(-n+4)){animation:gd-rise-sm .55s var(--hh-ease-out) both} html.hunter-hud .walkthrough-chapter.hh-reveal .chapter-content > header{animation-delay:60ms} html.hunter-hud .walkthrough-chapter.hh-reveal .chapter-brief{animation-delay:120ms} html.hunter-hud .walkthrough-chapter.hh-reveal .guide-route-step:nth-child(1){animation-delay:170ms} html.hunter-hud .walkthrough-chapter.hh-reveal .guide-route-step:nth-child(2){animation-delay:220ms} html.hunter-hud .walkthrough-chapter.hh-reveal .guide-route-step:nth-child(3){animation-delay:270ms} html.hunter-hud .walkthrough-chapter.hh-reveal .guide-route-step:nth-child(4){animation-delay:320ms} /* Buttons and chips: lift 1px with the core's border light + inner glow (translate composes with the core's transform rules, and the transition list has to be restated because the core's is !important). */ html.hunter-hud :is(.guide-btn,.guide-filter,.guide-progress-reset){transition:color .18s,background-color .18s,border-color .18s,box-shadow .22s,transform .12s,translate .25s var(--hh-ease-out)!important} html.hunter-hud :is(.guide-btn,.guide-filter,.guide-progress-reset):hover{translate:0 -1px} /* Focus: controls clipped by a chamfer would lose an outside ring, so the yellow ring moves inside them. */ html.hunter-hud :is(.guide-btn,.guide-filter,.guide-progress-reset,.guide-manual-link,.guide-route-map a,.related-grid > a,.guide-cover-frame,.guide-hero-gameplay,.guide-card-cover,.guide-mobile-play):focus-visible{outline:2px solid var(--hh-yellow)!important;outline-offset:-5px!important} html.hunter-hud :is(.guide-hub-hero .guide-btn.primary,.guide-detail-actions .guide-btn.primary,.guide-card:nth-child(1 of :not([hidden])) .guide-btn.primary):focus-visible{outline-color:#170900!important} html.hunter-hud .guide-card:has(:focus-visible){border-color:var(--hh-orange)!important} @keyframes gd-rise{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}} @keyframes gd-rise-sm{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}} @keyframes gd-slide{0%{opacity:0;transform:translateX(-10px)}100%{opacity:1;transform:none}} @keyframes gd-fade{0%{opacity:0}100%{opacity:1}} @keyframes gd-frame-in{0%{opacity:0;translate:0 24px;scale:.95}100%{opacity:1;translate:0 0;scale:1}} @keyframes gd-draw-y{0%{transform:scaleY(0)}100%{transform:scaleY(1)}} @keyframes gd-draw-x{0%{transform:scaleX(0)}100%{transform:scaleX(1)}} @keyframes gd-title-scan{0%{opacity:0;transform:translateX(-100%)}12%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translateX(455%)}} @keyframes gd-scan-y{0%{opacity:0;transform:translateY(-100%)}4%{opacity:1}34%{opacity:1;transform:translateY(625%)}38%,100%{opacity:0;transform:translateY(625%)}} @keyframes gd-ping{0%{opacity:0}1.5%{opacity:1}11%{opacity:0}100%{opacity:0}} /* ═══════════════ 17. HUD chrome on a long reading page ═══════════════ Guides scroll for thousands of pixels, so the fixed telemetry read-out ends up over body copy: a small, mostly opaque carbon plate keeps it legible while the text underneath still shows through faintly. */ html.hunter-hud[data-hud-family="guides"] .hud-telemetry{ padding:6px 12px;border:1px solid var(--hh-edge); background:linear-gradient(180deg,rgba(18,13,9,.8),rgba(6,5,4,.8)); clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); } /* ═══════════════ 18. Responsive ═══════════════ */ /* One column board: the spine moves to the left gutter and every card reaches it from its left edge. */ @media (max-width:1050px){ html.hunter-hud .guide-card-grid{--gd-spine:-20px} html.hunter-hud .guide-card-grid::before{left:calc(var(--gd-spine) - 5px)} html.hunter-hud .guide-card{clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 46px,calc(var(--gd-spine,-20px) - 9px) 46px,calc(var(--gd-spine,-20px) - 9px) 26px,0 26px,0 var(--cut))} html.hunter-hud .guide-card::after{right:100%;width:calc(7px - var(--gd-spine,-20px));background:linear-gradient(90deg,var(--hh-yellow),var(--hh-orange));clip-path:polygon(0 6px,6px 0,11px 5px,100% 5px,100% 7px,11px 7px,6px 12px)} } @media (max-width:780px){ html.hunter-hud[data-hud-family="guides"]{--hh-cut:8px} /* The page drops the sticky bar on phones (min-height 64px); keep that. */ html.hunter-hud .guide-header{position:relative;top:auto;min-height:64px;padding:10px 18px} /* .hh-btn (classMap) sets position:relative and wins the tie against the page's rule, which drops the floating play pill to the end of the document and pushes it off the left edge. Pin it back. */ html.hunter-hud .guide-mobile-play{position:fixed!important;z-index:65!important;right:12px!important;left:auto!important;bottom:max(12px,env(safe-area-inset-bottom))!important} html.hunter-hud[data-hud-family="guides"] .hud-telemetry{display:none} html.hunter-hud .guide-hero-gameplay{clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)} html.hunter-hud .guide-cover-collage::before{width:90vw;margin:-45vw 0 0 -45vw} html.hunter-hud .guide-brand small{letter-spacing:.22em} html.hunter-hud .guide-kicker{font-size:11px;letter-spacing:.2em} html.hunter-hud .guide-section-heading .guide-section-index, html.hunter-hud .guide-method .guide-section-index{letter-spacing:.22em} html.hunter-hud .guide-card-grid{--gd-spine:-12px} html.hunter-hud .guide-filters::after{flex-basis:100%;margin-left:0;padding:6px 0 0;text-align:right} /* Chapter readout is static here (the page un-sticks it), so it is a compact header instead of a track. */ html.hunter-hud .chapter-number{padding:15px 0 6px;font-size:24px} html.hunter-hud .chapter-number::before{top:5px;font-size:7.5px;letter-spacing:.2em} html.hunter-hud .chapter-rail small{font-size:8.5px;letter-spacing:.06em} html.hunter-hud .chapter-brief > div + div{border-left:0;border-top:1px solid var(--hh-edge)} html.hunter-hud .guide-route-step p{font-size:14.5px} html.hunter-hud .guide-faq summary{font-size:15px} } @media (max-width:480px){ html.hunter-hud .section-title-row .guide-section-index{width:38px;height:38px;font-size:13px} html.hunter-hud .guide-hub-hero::after{display:none} html.hunter-hud .guide-card-cover{border-right:0;border-bottom:1px solid var(--hh-edge)} html.hunter-hud .guide-card-grid{--gd-spine:-8px} html.hunter-hud .guide-card-cover::before{inset:12px 16px 46px} html.hunter-hud .chapter-content .guide-route-step{--gd-pad:13px;padding-right:14px} html.hunter-hud .chapter-rail{align-items:center} html.hunter-hud .chapter-number{min-width:58px;padding:14px 10px 5px} html.hunter-hud .chapter-rail small{margin-top:0;padding:5px 8px 4px} html.hunter-hud .guide-faq summary{padding-left:48px!important} html.hunter-hud .guide-faq summary::before{left:4px} html.hunter-hud .guide-faq details p{padding-left:48px;padding-right:12px} html.hunter-hud .chapter-warning{padding-left:26px} html.hunter-hud .walkthrough-chapter:last-child .chapter-content::after{padding:16px 0 0;background-position:0 0;background-size:130px 5px;line-height:1.6} } @media print{ html.hunter-hud .hud-atmos,html.hunter-hud .hud-scanlines,html.hunter-hud .hud-topline,html.hunter-hud .hud-corner,html.hunter-hud .hud-telemetry{display:none!important} html.hunter-hud .walkthrough-chapter::before,html.hunter-hud .walkthrough-chapter::after,html.hunter-hud .chapter-rail::before,html.hunter-hud .guide-route-step::after,html.hunter-hud .guide-card-grid::before,html.hunter-hud .guide-card::after{display:none!important} }