/* HUNTER HUD · family: misc Root pages: 404, oldgames.html, tournaments (tournaments.css), pokemon-lobby (cable-voice.css), network-room (multiplayer-game.css, nds-wireless.css), cable-club (cable-club.css + the auth gate), subscription-success, pages/guides, pages/pokemon-kanto, pages/pokemon-gb-link. Loaded after assets/css/hunter-hud.css on pages tagged data-hud-family="misc" (scripts/build/apply-hunter-hud.cjs). Every rule is scoped under html.hunter-hud and keyed by a body class or a unique root element, so the page CSS keeps working with ?nohud=1. Utility classes (hh-plate, hh-btn, hh-input …) are attached by misc.json classMap. */ /* ═══════════════════════════════ 0 · shared ═══════════════════════════════ */ /* Keyed on the family attribute (not the class): cable-club.html's own boot script replaces the class with theme-dmg/theme-cgb/theme-gba, which throws away "hunter-hud" before the HUD script runs. Sections 6 and 7 therefore accept html.theme-* as well and carry their own copy of the tokens and of the plate/button/input material. */ html[data-hud-family="misc"]{ --mc-cut-sm:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); --mc-cut-xs:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px); --mc-cut-md:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); --mc-ticks:repeating-linear-gradient(90deg,var(--hh-orange) 0 13px,transparent 13px 17px); --mc-brackets: linear-gradient(var(--hh-orange),var(--hh-orange)) top left/22px 3px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) top left/3px 22px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) top right/22px 3px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) top right/3px 22px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom left/22px 3px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom left/3px 22px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom right/22px 3px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom right/3px 22px no-repeat; } /* Pages with their own bottom-right UI (room chat, emulator dock) drop the telemetry tag; the fixed viewport brackets step aside where the page is itself a fixed full-screen console. */ html.hunter-hud body:has(.mp-room-chat) .hud-telemetry, html.hunter-hud body:has(#landing.card) .hud-telemetry, html.hunter-hud body:has(.app-shell > .topbar) .hud-telemetry, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc .hud-telemetry, html.hunter-hud body.cc-embed .hud-corner, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc .hud-scanlines, html.hunter-hud body:has(.mp-game-container) .hud-corner{display:none!important} @keyframes hh-mc-dot{0%,100%{opacity:1;transform:rotate(45deg) scale(1)}50%{opacity:.35;transform:rotate(45deg) scale(.6)}} @keyframes hh-mc-glow{0%,100%{opacity:.25}50%{opacity:.7}} /* ─────────── 0b · elevation layer (shared by every page block below) ─────────── Plate weight follows importance: HEAVY (the one hero plate per page: rivets, inner rail, lit top edge, recessed second surface), PANEL (lit top edge + shaded foot), WELL (recessed readouts and list rows). Status colour is semantic everywhere: visor green = ok, yellow = attention, red = live / critical. Entrances use fill-mode "backwards" so hover transforms still work once they finish, and they are never bound to --hud-play (a calm page must not freeze a panel at opacity 0). Ambient loops are, and stay at one per page. */ html[data-hud-family="misc"]{ --mx-stretch:87.5%; --mx-ok:#a6ff4d;--mx-ok-bg:rgba(166,255,77,.08);--mx-ok-edge:rgba(166,255,77,.4); --mx-warn:#ffc400;--mx-warn-bg:rgba(255,196,0,.08);--mx-warn-edge:rgba(255,196,0,.42); --mx-live:#ff3b24;--mx-live-ink:#ffb4a5;--mx-live-bg:rgba(255,59,36,.1);--mx-live-edge:rgba(255,59,36,.48); --mx-rivet:#9a6419; --mx-hazard:repeating-linear-gradient(135deg,rgba(255,196,0,.8) 0 6px,transparent 6px 12px); --mx-panel-shadow:inset 0 1px rgba(255,200,120,.16),inset 0 -1px rgba(0,0,0,.7),inset 0 26px 44px -40px rgba(255,140,40,.32); --mx-panel-shadow-hot:inset 0 1px rgba(255,210,130,.3),inset 0 -1px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,122,0,.2),inset 0 -22px 36px -26px rgba(255,122,0,.34); --mx-well:linear-gradient(180deg,#060504,#0b0907); --mx-well-shadow:inset 0 2px 8px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,122,0,.07); --mx-diamond-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M4 0 8 4 4 8 0 4Z' fill='%23a6ff4d'/%3E%3C/svg%3E"); --mx-diamond-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M4 0 8 4 4 8 0 4Z' fill='%23ffc400'/%3E%3C/svg%3E"); --mx-diamond-live:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M4 0 8 4 4 8 0 4Z' fill='%23ff3b24'/%3E%3C/svg%3E"); --mx-diamond-hot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M4 0 8 4 4 8 0 4Z' fill='%23ff7a00'/%3E%3C/svg%3E"); } @keyframes mx-rise{0%{opacity:0;transform:translate3d(0,14px,0)}100%{opacity:1;transform:none}} @keyframes mx-drop{0%{opacity:0;transform:translate3d(0,-12px,0)}100%{opacity:1;transform:none}} @keyframes mx-slide{0%{opacity:0;transform:translate3d(-16px,0,0)}100%{opacity:1;transform:none}} @keyframes mx-fade{0%{opacity:0}100%{opacity:1}} @keyframes mx-blink-in{0%{opacity:0}18%{opacity:1}28%{opacity:.15}42%{opacity:1}52%{opacity:.3}66%,100%{opacity:1}} @keyframes mx-live{0%,100%{opacity:1}50%{opacity:.35}} /* HEAVY plate: re-declares the core plate stack (pointer light, cuts, brackets) and adds rivets, an inner rail, a lit top edge and a recessed second surface. One per page. */ html.hunter-hud :is(.container:has(> .code.glitch),.ogt-command-main,#landing.card,.mp-arena-v6 > .mp-left-rail).hh-plate{ background: radial-gradient(340px circle at var(--mx,-999px) var(--my,-999px),rgba(255,140,30,.1),transparent 65%), linear-gradient(to bottom right,transparent calc(50% - .9px),var(--panel-cut,var(--hh-edge-hot)) calc(50% - .9px) calc(50% + .9px),transparent calc(50% + .9px)) top left/var(--cut) var(--cut) no-repeat border-box, linear-gradient(to bottom right,transparent calc(50% - .9px),var(--panel-cut,var(--hh-edge-hot)) calc(50% - .9px) calc(50% + .9px),transparent calc(50% + .9px)) bottom right/var(--cut) var(--cut) no-repeat border-box, linear-gradient(var(--panel-accent,var(--hh-orange)),var(--panel-accent,var(--hh-orange))) top right/20px 3px no-repeat border-box, linear-gradient(var(--panel-accent,var(--hh-orange)),var(--panel-accent,var(--hh-orange))) top right/3px 20px no-repeat border-box, linear-gradient(var(--panel-accent,var(--hh-orange)),var(--panel-accent,var(--hh-orange))) bottom left/20px 3px no-repeat border-box, linear-gradient(var(--panel-accent,var(--hh-orange)),var(--panel-accent,var(--hh-orange))) bottom left/3px 20px no-repeat border-box, radial-gradient(circle,#ffcf7a 0 .8px,var(--mx-rivet) 1.2px 2px,rgba(0,0,0,.85) 2.5px,transparent 3.2px) var(--mx-rv-tl,left calc(var(--cut) + 9px) top 9px)/8px 8px no-repeat, radial-gradient(circle,#ffcf7a 0 .8px,var(--mx-rivet) 1.2px 2px,rgba(0,0,0,.85) 2.5px,transparent 3.2px) var(--mx-rv-tr,right 32px top 9px)/8px 8px no-repeat, radial-gradient(circle,#ffcf7a 0 .8px,var(--mx-rivet) 1.2px 2px,rgba(0,0,0,.85) 2.5px,transparent 3.2px) var(--mx-rv-bl,left 32px bottom 9px)/8px 8px no-repeat, radial-gradient(circle,#ffcf7a 0 .8px,var(--mx-rivet) 1.2px 2px,rgba(0,0,0,.85) 2.5px,transparent 3.2px) var(--mx-rv-br,right calc(var(--cut) + 9px) bottom 9px)/8px 8px no-repeat, linear-gradient(90deg,transparent calc(var(--cut) - 1px),rgba(255,214,130,.75) calc(var(--cut) + 14px),rgba(255,122,0,.35) 38%,transparent 72%) left top/100% 1px no-repeat border-box, linear-gradient(90deg,transparent,rgba(255,150,50,.16) 7%,rgba(255,150,50,.16) 93%,transparent) left 0 top 5px/100% 1px no-repeat, linear-gradient(90deg,transparent,rgba(255,150,50,.1) 7%,rgba(255,150,50,.1) 93%,transparent) left 0 bottom 5px/100% 1px no-repeat, linear-gradient(180deg,transparent,rgba(255,150,50,.1) 9%,rgba(255,150,50,.1) 91%,transparent) left 5px top 0/1px 100% no-repeat, linear-gradient(180deg,transparent,rgba(255,150,50,.1) 9%,rgba(255,150,50,.1) 91%,transparent) right 5px top 0/1px 100% no-repeat, linear-gradient(180deg,rgba(255,170,80,.05),transparent 34%,rgba(0,0,0,.34)), linear-gradient(165deg,var(--panel-top,#1d140b),var(--panel-bottom,#080605) 72%)!important; box-shadow:inset 0 1px rgba(255,205,130,.12),inset 0 -2px rgba(0,0,0,.75),inset 0 0 0 1px rgba(0,0,0,.4),inset 0 40px 70px -60px rgba(255,140,40,.45)!important; } /* hot secondary: the demoted call to action (orange edge, yellow ink) so each view keeps one power button */ html.hunter-hud :is(body:has(#mainNav) .nav-btn-play,.ogt-auth button:not(.ogt-ghost-auth),.mp-arena-v6 .mp-chat-send).hh-btn:not(.hh-primary){ color:var(--hh-yellow)!important;border-color:var(--hh-edge-hot)!important; background:linear-gradient(180deg,rgba(255,122,0,.2),rgba(255,122,0,.05) 60%),linear-gradient(180deg,#1c150c,#0f0b07)!important; box-shadow:inset 0 1px rgba(255,196,0,.22),inset 2px 0 var(--hh-orange)!important; transition:color .18s,border-color .18s,box-shadow .25s,transform .25s var(--hh-ease-out)!important; } html.hunter-hud :is(body:has(#mainNav) .nav-btn-play,.ogt-auth button:not(.ogt-ghost-auth),.mp-arena-v6 .mp-chat-send).hh-btn:not(.hh-primary):hover{ color:var(--hh-yellow-2)!important;border-color:var(--hh-orange)!important;transform:translateY(-1px)!important; box-shadow:inset 0 1px rgba(255,226,122,.4),inset 3px 0 var(--hh-yellow),inset 0 -16px 24px -14px rgba(255,122,0,.55)!important; } html.hunter-hud :is(body:has(#mainNav) .nav-btn-play,.ogt-auth button:not(.ogt-ghost-auth),.mp-arena-v6 .mp-chat-send).hh-btn:not(.hh-primary):active{transform:translateY(1px)!important} /* focus on the yellow power button: a dark inner frame (a yellow ring would vanish on the yellow face) */ html.hunter-hud[data-hud-family="misc"] .hh-primary:focus-visible{outline:2px solid #1a0900!important;outline-offset:-5px!important} /* ═══════════════════════════════ 1 · 404.html ═══════════════════════════════ */ /* Signature: a lost-signal readout. The fault plate is a receiver console: a header rail with the channel and a red ERR chip (0x194 is 404 in hex), the code on a recessed scope with a graticule and a flatline trace, the HTTP status as the readout line, one power button, and a hazard strip closing the console. The only ambient loop is the scope sweep. */ html.hunter-hud body:has(.code.glitch){font-family:var(--hh-font-text);color:var(--hh-ink)} /* the violet/red blob layer becomes static range rings centred behind the console (no loop, no olive tint) */ html.hunter-hud body:has(.code.glitch) .bg{ display:block;position:fixed;inset:0;z-index:0;pointer-events:none;animation:none; background: radial-gradient(circle at 50% 50%,transparent 0 179px,rgba(255,122,0,.075) 180px 181px,transparent 182px 329px,rgba(255,122,0,.055) 330px 331px,transparent 332px 489px,rgba(255,122,0,.04) 490px 491px,transparent 492px), linear-gradient(90deg,transparent calc(50% - .5px),rgba(255,122,0,.045) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)), linear-gradient(180deg,transparent calc(50% - .5px),rgba(255,122,0,.045) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)); } html.hunter-hud body:has(.code.glitch) .bg::before{display:none} html.hunter-hud body:has(.code.glitch) .container{ --panel-edge:var(--hh-edge-hot);--cut:18px;--panel-top:#1e150b;--panel-bottom:#070504; --mx-rv-tl:left 10px top 17px;--mx-rv-tr:right 12px top 17px; position:relative;width:calc(100% - 32px);max-width:600px;padding:64px 46px 26px; animation:mx-rise .6s var(--hh-ease-out) backwards; } /* header rail: channel label left, ERR chip right (the chip is ::after) */ html.hunter-hud body:has(.code.glitch) .container::before{ content:'// SIGNAL LOST · CH 404';position:absolute;left:0;right:0;top:0;height:42px;margin:0;padding:0 0 0 32px; display:flex;align-items:center;justify-content:flex-start;gap:0; font:700 10px/1 var(--hh-font-mono);letter-spacing:.28em;text-transform:uppercase;color:var(--hh-yellow); background:linear-gradient(90deg,rgba(255,122,0,.16),rgba(255,122,0,.04) 55%,transparent),linear-gradient(var(--hh-edge-2),var(--hh-edge-2)) left bottom/100% 1px no-repeat; animation:mx-fade .45s ease-out .12s backwards; } html.hunter-hud body:has(.code.glitch) .container::after{ content:'ERR 0x194';position:absolute;top:11px;right:36px;height:20px;max-width:none;margin:0;opacity:1; display:flex;align-items:center;padding:0 9px 0 23px; font:700 10px/1 var(--hh-font-mono);letter-spacing:.16em;color:var(--mx-live-ink); background:var(--mx-diamond-live) 9px 50%/7px 7px no-repeat,var(--mx-live-bg); border:1px solid var(--mx-live-edge);clip-path:var(--mc-cut-xs); animation:mx-blink-in .9s linear .35s backwards; } /* the scope: recessed well, graticule, flatline with one dead blip, and a sweep beam (the page's ambient loop) */ html.hunter-hud body:has(.code.glitch) .code{ position:relative;display:block;max-width:440px;margin:0 auto 22px; font-family:var(--hh-font-mono);font-weight:700;font-size:clamp(5.2rem,17vw,8.6rem);line-height:1.34; letter-spacing:.08em;text-indent:.08em;font-variant-numeric:tabular-nums; -webkit-text-fill-color:var(--hh-yellow);color:var(--hh-yellow);filter:none; text-shadow:0 0 30px rgba(255,122,0,.55),0 0 2px rgba(255,196,0,.9); background: linear-gradient(90deg,transparent,rgba(255,106,0,.2) 50%,transparent) -60% 0/34% 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'%3E%3Cpath d='M0 15H322l4-8 5 17 5-13 3 4H400' fill='none' stroke='%23ff7a00' stroke-opacity='.6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 80%/100% 26px no-repeat, linear-gradient(rgba(255,122,0,.075) 1px,transparent 1px) 0 0/100% 25%, linear-gradient(90deg,rgba(255,122,0,.075) 1px,transparent 1px) 0 0/10% 100%, radial-gradient(ellipse 62% 74% at 50% 50%,rgba(255,122,0,.13),transparent 72%), #050403; -webkit-background-clip:border-box;background-clip:border-box; box-shadow:inset 0 2px 16px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,122,0,.2); clip-path:var(--mc-cut-md); animation:mx-rise .55s var(--hh-ease-out) .08s backwards,mx-scope-sweep 5.6s linear 1.2s infinite; animation-play-state:running,var(--hud-play); } @keyframes mx-scope-sweep{0%{background-position:-60% 0,0 80%,0 0,0 0,0 0}100%{background-position:160% 0,0 80%,0 0,0 0,0 0}} html.hunter-hud body:has(.code.glitch) .glitch::before{-webkit-text-fill-color:rgba(255,77,0,.6);animation-play-state:var(--hud-play)} html.hunter-hud body:has(.code.glitch) .glitch::after{-webkit-text-fill-color:rgba(255,226,122,.55);animation-play-state:var(--hud-play)} /* readout line (real status) over the condensed display title */ html.hunter-hud body:has(.code.glitch) .title{ font-size:2rem!important;font-weight:700!important;font-stretch:var(--mx-stretch);letter-spacing:.2em!important;text-indent:.2em; line-height:1;margin-bottom:14px;animation:mx-rise .5s var(--hh-ease-out) .14s backwards; } html.hunter-hud body:has(.code.glitch) .title::before{ content:'HTTP 404 · ROUTE NOT FOUND';display:block;margin:0 0 12px;text-indent:.26em; font:700 10px/1.2 var(--hh-font-mono);font-stretch:normal;letter-spacing:.26em;color:var(--hh-dim);text-shadow:none; } html.hunter-hud body:has(.code.glitch) .desc{ max-width:46ch;margin:0 auto 26px;font-size:1rem;line-height:1.65;color:var(--hh-dim); animation:mx-rise .5s var(--hh-ease-out) .2s backwards; } html.hunter-hud body:has(.code.glitch) .btn{padding:15px 34px;font-size:.85rem;letter-spacing:.14em!important;clip-path:var(--mc-cut-md);animation:mx-rise .5s var(--hh-ease-out) .26s backwards} html.hunter-hud body:has(.code.glitch) .btn.hh-primary:hover{transform:translateY(-2px)!important} html.hunter-hud body:has(.code.glitch) .btn.hh-primary:active{transform:translateY(1px)!important} /* closing rail: hazard strip, then the legal links in mono */ html.hunter-hud body:has(.code.glitch) .container p:last-child{ position:relative;margin-top:26px!important;padding-top:20px;color:var(--hh-faint)!important; animation:mx-fade .5s ease-out .32s backwards; } html.hunter-hud body:has(.code.glitch) .container p:last-child::before{ content:'';position:absolute;left:8%;right:8%;top:0;height:6px;background:var(--mx-hazard);opacity:.5; -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); } html.hunter-hud body:has(.code.glitch) .container p:last-child a{ color:var(--hh-dim)!important;font:700 10px/1 var(--hh-font-mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none; display:inline-block;padding:6px 4px;transition:color .2s; } html.hunter-hud body:has(.code.glitch) .container p:last-child a:hover{color:var(--hh-yellow)!important} @media (max-width:520px){ /* phone: the console stays short enough that the legal links clear the docked consent bar */ html.hunter-hud body:has(.code.glitch) .container{padding:56px 18px 16px;--cut:14px} html.hunter-hud body:has(.code.glitch) .container::before{content:'// SIGNAL LOST';padding-left:26px;letter-spacing:.22em} html.hunter-hud body:has(.code.glitch) .container::after{right:28px} html.hunter-hud body:has(.code.glitch) .code{font-size:4.4rem;line-height:1.16;margin-bottom:14px} html.hunter-hud body:has(.code.glitch) .title{font-size:1.55rem!important;margin-bottom:10px} html.hunter-hud body:has(.code.glitch) .title::before{margin-bottom:9px;letter-spacing:.18em} html.hunter-hud body:has(.code.glitch) .desc{font-size:.94rem;line-height:1.55;margin-bottom:18px} html.hunter-hud body:has(.code.glitch) .btn{padding:13px 28px} html.hunter-hud body:has(.code.glitch) .container p:last-child{margin-top:16px!important;padding-top:14px} } /* ═══════════════════════════════ 2 · oldgames.html ═══════════════════════════════ */ html.hunter-hud body:has(.games-grid){font-family:var(--hh-font-text);color:var(--hh-ink-2)} html.hunter-hud body:has(.games-grid) header{ position:relative;overflow:hidden; background:linear-gradient(180deg,rgba(22,15,8,.9),rgba(8,6,5,.55)); border-bottom:1px solid var(--hh-edge-2);padding:64px 24px 56px;margin-bottom:56px; } html.hunter-hud body:has(.games-grid) header::before{ content:'';position:absolute;left:0;right:0;bottom:0;height:2px; background:linear-gradient(90deg,var(--hh-yellow) 0 56px,var(--hh-orange) 56px 130px,rgba(255,122,0,.25) 130px 45%,transparent 80%); } html.hunter-hud body:has(.games-grid) header::after{ content:'';position:absolute;left:0;bottom:0;width:22%;height:3px; background:linear-gradient(90deg,transparent,rgba(255,196,0,.95),transparent); animation:hh-scan-x 7.5s var(--hh-ease-io) infinite;animation-play-state:var(--hud-play); } html.hunter-hud body:has(.games-grid) header h1{ font-family:var(--hh-font-hud);font-weight:700;font-stretch:var(--mx-stretch);font-size:clamp(2.2rem,5.2vw,4rem);line-height:.98; text-transform:uppercase;letter-spacing:.02em;color:var(--hh-ink);text-shadow:0 0 30px rgba(255,122,0,.35);text-wrap:balance; animation:hh-reveal-x .8s var(--hh-ease-out) backwards; } html.hunter-hud body:has(.games-grid) header h1::before{ content:'// OLDGAMES // ARCHIVE';display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px; font:700 10px/1.2 var(--hh-font-mono);letter-spacing:.32em;color:var(--hh-yellow);text-shadow:none; } html.hunter-hud body:has(.games-grid) header h1::after{ content:'';display:block;width:120px;height:3px;margin:18px auto 0;background:var(--hh-orange);box-shadow:0 0 14px rgba(255,122,0,.8); } html.hunter-hud body:has(.games-grid) .subtitle{color:var(--hh-yellow);font-family:var(--hh-font-hud);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:1rem;text-wrap:balance;animation:mx-rise .5s var(--hh-ease-out) .12s backwards} html.hunter-hud body:has(.games-grid) .hero-text{color:var(--hh-dim);max-width:62ch;line-height:1.7;text-wrap:pretty;animation:mx-rise .5s var(--hh-ease-out) .19s backwards} html.hunter-hud body:has(.games-grid) .cta-button{padding:16px 36px;font-size:.95rem;letter-spacing:.1em!important;clip-path:var(--mc-cut-md)} html.hunter-hud body:has(.games-grid) header .cta-button{animation:mx-rise .5s var(--hh-ease-out) .26s backwards} html.hunter-hud body:has(.games-grid) .cta-button.hh-primary:hover{transform:translateY(-2px)!important} html.hunter-hud body:has(.games-grid) .content-section{padding:44px 40px;box-shadow:var(--mx-panel-shadow)!important} /* reading measure: long copy stops at ~68 characters instead of running the full 1100px plate */ html.hunter-hud body:has(.games-grid) .content-section > p{max-width:68ch;margin-left:auto;margin-right:auto;line-height:1.72;text-wrap:pretty} html.hunter-hud body:has(.games-grid) h2{font-size:2.1rem!important;font-weight:700!important;font-stretch:var(--mx-stretch);letter-spacing:.03em!important;margin-bottom:1.6rem;text-wrap:balance} html.hunter-hud body:has(.games-grid) h2::before{ content:'// SECTION';display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px; font:700 10px/1.2 var(--hh-font-mono);letter-spacing:.32em;color:var(--hh-yellow);text-shadow:none; } html.hunter-hud body:has(.games-grid) h2::after{content:'';display:block;width:64px;height:2px;margin:14px auto 0;background:var(--hh-orange);box-shadow:0 0 10px rgba(255,122,0,.8)} html.hunter-hud body:has(.games-grid) .content-section:nth-of-type(1) h2::before{content:'// 01 · ARCHIVE'} html.hunter-hud body:has(.games-grid) .content-section:nth-of-type(2) h2::before{content:'// 02 · SYSTEMS'} html.hunter-hud body:has(.games-grid) .content-section:nth-of-type(3) h2::before{content:'// 03 · LIBRARY'} html.hunter-hud body:has(.games-grid) .content-section:nth-of-type(4) h2::before{content:'// 04 · HARDWARE'} html.hunter-hud body:has(.games-grid) .content-section:nth-of-type(5) h2::before{content:'// 05 · FAQ'} html.hunter-hud body:has(.games-grid) .content-section:nth-of-type(6) h2::before{content:'// 06 · LAUNCH'} html.hunter-hud body:has(.games-grid) h3{font-family:var(--hh-font-hud);text-transform:uppercase;letter-spacing:.05em;color:var(--hh-orange)} html.hunter-hud body:has(.games-grid) p{color:var(--hh-ink-2)} html.hunter-hud body:has(.games-grid) strong{color:var(--hh-ink)} /* feature wells: recessed, indexed F.01–F.06; hover lights the edge, glows inside and lifts 2px */ html.hunter-hud body:has(.games-grid) .features-list{counter-reset:mx-feat} html.hunter-hud body:has(.games-grid) .feature{ counter-increment:mx-feat;position:relative;padding:1.5rem 1.5rem 1.4rem; background:var(--mx-well);border:1px solid var(--hh-edge);border-left:3px solid var(--hh-orange);border-radius:0; box-shadow:var(--mx-well-shadow); clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%); transition:border-color .2s,box-shadow .3s,transform .3s var(--hh-ease-out); } html.hunter-hud body:has(.games-grid) .feature::after{ content:'F.' counter(mx-feat,decimal-leading-zero);position:absolute;top:12px;right:14px; font:700 10px/1 var(--hh-font-mono);letter-spacing:.14em;color:var(--hh-muted);transition:color .2s; } html.hunter-hud body:has(.games-grid) .feature:hover{ border-color:var(--hh-edge-hot);border-left-color:var(--hh-yellow);transform:translateY(-2px); box-shadow:inset 0 1px rgba(255,200,120,.12),inset 0 0 34px rgba(255,122,0,.1),inset 0 0 0 1px rgba(255,122,0,.12); } html.hunter-hud body:has(.games-grid) .feature:hover::after{color:var(--hh-orange)} html.hunter-hud body:has(.games-grid) .feature h4{padding-right:34px} html.hunter-hud body:has(.games-grid) .feature p{font-size:1rem;line-height:1.6;color:var(--hh-dim)} html.hunter-hud body:has(.games-grid) .feature h4, html.hunter-hud body:has(.games-grid) .game-category h4, html.hunter-hud body:has(.games-grid) .faq h4{font-family:var(--hh-font-hud);font-weight:700;font-stretch:var(--mx-stretch);text-transform:uppercase;letter-spacing:.05em;color:var(--hh-yellow)} /* cartridge slots: SLOT 01–06 index, 2px lift with a lit edge and inner glow */ html.hunter-hud body:has(.games-grid) .games-grid{counter-reset:mx-slot} html.hunter-hud body:has(.games-grid) .game-category{counter-increment:mx-slot;position:relative;box-shadow:var(--mx-panel-shadow)!important;transition:transform .3s var(--hh-ease-out),border-color .2s,box-shadow .3s} html.hunter-hud body:has(.games-grid) .game-category::after{ content:'SLOT ' counter(mx-slot,decimal-leading-zero);position:absolute;top:13px;right:28px; font:700 10px/1 var(--hh-font-mono);letter-spacing:.16em;color:var(--hh-muted);transition:color .2s; } html.hunter-hud body:has(.games-grid) .game-category h4{font-size:1.35rem} html.hunter-hud body:has(.games-grid) .game-category:hover{--panel-edge:var(--hh-orange);transform:translateY(-2px)!important;box-shadow:var(--mx-panel-shadow-hot)!important} html.hunter-hud body:has(.games-grid) .game-category:hover::after{color:var(--hh-yellow)} html.hunter-hud body:has(.games-grid) .game-category p{color:var(--hh-dim);font-size:1rem;line-height:1.6} /* systems roster: chamfered tags with an orange index diamond; the count after the list is computed from the tags */ html.hunter-hud body:has(.games-grid) .console-list{counter-reset:mx-sys;gap:.7rem} html.hunter-hud body:has(.games-grid) .console-tag{ counter-increment:mx-sys;padding:9px 14px 9px 26px;font-size:11px!important;letter-spacing:.12em!important; background:var(--mx-diamond-hot) 11px 50%/6px 6px no-repeat,linear-gradient(180deg,#0f0b08,#080605)!important; transition:color .2s,border-color .2s,transform .25s var(--hh-ease-out),box-shadow .25s; } html.hunter-hud body:has(.games-grid) .console-tag:hover{color:var(--hh-ink)!important;border-color:var(--hh-orange)!important;transform:translateY(-2px);box-shadow:inset 0 -10px 16px -10px rgba(255,122,0,.5)} html.hunter-hud body:has(.games-grid) .console-list::after{ content:counter(mx-sys,decimal-leading-zero) ' SYSTEMS INDEXED';flex-basis:100%;margin-top:1rem;text-align:center; font:700 10px/1.2 var(--hh-font-mono);letter-spacing:.3em;color:var(--hh-dim); } /* FAQ as a numbered log */ html.hunter-hud body:has(.games-grid) .content-section:has(> .faq){counter-reset:mx-faq} html.hunter-hud body:has(.games-grid) .faq{ counter-increment:mx-faq;position:relative;padding:1.6rem 2rem 1.5rem; background:var(--mx-well);border:1px solid var(--hh-edge);border-left:3px solid var(--hh-yellow);border-radius:0;box-shadow:var(--mx-well-shadow); clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);transition:border-color .2s; } html.hunter-hud body:has(.games-grid) .faq:hover{border-color:var(--hh-edge-2);border-left-color:var(--hh-yellow-2)} html.hunter-hud body:has(.games-grid) .faq::after{ content:'LOG ' counter(mx-faq,decimal-leading-zero);position:absolute;top:14px;right:16px; font:700 10px/1 var(--hh-font-mono);letter-spacing:.16em;color:var(--hh-muted); } html.hunter-hud body:has(.games-grid) .faq h4{font-size:1.2rem;padding-right:40px} html.hunter-hud body:has(.games-grid) .faq p{margin-bottom:0;max-width:74ch;color:var(--hh-ink-2);line-height:1.68} /* scroll reveals keep hover transforms usable afterwards, and siblings enter as a short left-to-right sequence */ html.hunter-hud[data-hud-family="misc"] .hh-reveal{animation-fill-mode:backwards} html.hunter-hud body:has(.games-grid) :is(.feature,.game-category,.faq).hh-reveal:nth-child(2){animation-delay:55ms} html.hunter-hud body:has(.games-grid) :is(.feature,.game-category,.faq).hh-reveal:nth-child(3){animation-delay:110ms} html.hunter-hud body:has(.games-grid) :is(.feature,.game-category).hh-reveal:nth-child(4){animation-delay:165ms} html.hunter-hud body:has(.games-grid) :is(.feature,.game-category).hh-reveal:nth-child(5){animation-delay:220ms} html.hunter-hud body:has(.games-grid) :is(.feature,.game-category).hh-reveal:nth-child(6){animation-delay:275ms} html.hunter-hud body:has(.games-grid) footer{position:relative;border-top:1px solid var(--hh-edge-2);color:var(--hh-dim)} /* the archive closes on a hazard rail */ html.hunter-hud body:has(.games-grid) footer::before{ content:'// END OF ARCHIVE';display:block;height:auto;max-width:720px;margin:-2rem auto 2rem;opacity:1; font:700 10px/12px var(--hh-font-mono);letter-spacing:.3em;color:var(--hh-dim);text-align:center; background:var(--mx-hazard) left center/calc(50% - 110px) 6px no-repeat,var(--mx-hazard) right center/calc(50% - 110px) 6px no-repeat; } html.hunter-hud body:has(.games-grid) footer a{color:var(--hh-orange);font-family:var(--hh-font-hud);text-transform:uppercase;letter-spacing:.08em;font-size:.9rem} html.hunter-hud body:has(.games-grid) footer a:hover{color:var(--hh-yellow)} html.hunter-hud body:has(.games-grid) footer p{color:var(--hh-dim);font-size:.95rem} /* ═══════════════════════════════ 3 · tournaments.html ═══════════════════════════════ */ html.hunter-hud body.tourney-page{ --ogt-bg:var(--hh-void);--ogt-panel:rgba(16,13,10,.92);--ogt-panel-strong:rgba(14,11,8,.98); --ogt-line:var(--hh-edge-2);--ogt-line-strong:var(--hh-edge-hot); --ogt-text:var(--hh-ink);--ogt-muted:var(--hh-dim); --ogt-cyan:var(--hh-orange);--ogt-magenta:var(--hh-ember);--ogt-lime:var(--hh-visor);--ogt-amber:var(--hh-amber);--ogt-red:var(--hh-red); --ogt-radius:0;--ogt-font:var(--hh-font-text);--ogt-display:var(--hh-font-hud); color:var(--hh-ink); } html.hunter-hud body.tourney-page .ogt-topbar{position:sticky;top:12px;border:1px solid var(--hh-edge-2)!important;padding:10px 14px} html.hunter-hud body.tourney-page .ogt-logo{ border-radius:0;clip-path:var(--mc-cut-sm);color:#1a0900;font-weight:800;font-size:.8rem; background:linear-gradient(135deg,var(--hh-yellow),var(--hh-orange));box-shadow:0 0 22px rgba(255,122,0,.35); } html.hunter-hud body.tourney-page .ogt-brand strong{letter-spacing:.1em;color:var(--hh-ink);font-weight:700} html.hunter-hud body.tourney-page .ogt-brand strong span{color:var(--hh-orange);font-family:var(--hh-font-mono);font-size:.78em;letter-spacing:.12em} html.hunter-hud body.tourney-page .ogt-navlinks a{padding:10px 14px} html.hunter-hud body.tourney-page .ogt-auth button{min-height:42px;padding:0 16px} html.hunter-hud body.tourney-page .ogt-auth .ogt-account img{border-radius:0;clip-path:var(--mc-cut-xs);border-color:var(--hh-orange)} /* Signature: a bracket console. The hero plate is the heavy console with a ghost 8-4-2-1 bracket schematic whose lines carry a travelling signal toward the final (the page's one ambient loop); stats are indexed readout wells with semantic rails (open = visor, active = live red, prize = yellow); the queue, sections and chips follow. */ html.hunter-hud body.tourney-page{--mx-bracket-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 136' fill='none' stroke='%23fff' stroke-width='1.5'%3E%3Cpath d='M2 7h58v14H2zM2 33h58v14H2zM2 89h58v14H2zM2 115h58v14H2zM94 20h54v14H94zM94 102h54v14H94z'/%3E%3Cpath d='M60 14h16v26H60M76 27h18M60 96h16v26H60M76 109h18M148 27h18v82h-18M166 68h18'/%3E%3Cpath d='M184 59h54v18h-54z' stroke-width='2.4'/%3E%3C/svg%3E")} html.hunter-hud body.tourney-page .ogt-command-main{--panel-edge:var(--hh-edge-hot);--cut:18px;--panel-top:#1f160c;--panel-bottom:#080605;animation:mx-rise .6s var(--hh-ease-out) .04s backwards} html.hunter-hud body.tourney-page .ogt-command-main::after{ content:'';position:absolute;top:62px;right:28px;width:204px;height:116px;pointer-events:none;display:none; background: linear-gradient(90deg,transparent,rgba(255,236,170,.95) 50%,transparent) -45% 0/30% 100% no-repeat, linear-gradient(90deg,rgba(255,122,0,.4),rgba(255,122,0,.4) 74%,rgba(255,196,0,.9) 77%); -webkit-mask:var(--mx-bracket-mask) 0 0/100% 100% no-repeat;mask:var(--mx-bracket-mask) 0 0/100% 100% no-repeat; animation:mx-fade .8s ease-out .5s backwards,mx-bracket-signal 5.8s var(--hh-ease-io) 1.8s infinite; animation-play-state:running,var(--hud-play); } @keyframes mx-bracket-signal{0%{background-position:-45% 0,0 0}58%,100%{background-position:145% 0,0 0}} @media (min-width:1400px),(min-width:900px) and (max-width:1120px){ html.hunter-hud body.tourney-page .ogt-command-main::after{display:block} } html.hunter-hud body.tourney-page .ogt-command-main::before{ background: linear-gradient(90deg,rgba(255,122,0,.14),transparent 42%,rgba(255,196,0,.05)), var(--hh-hex) 0 0/45px 26px, repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 5px); -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35));mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35)); } /* the hex/scanline overlay (::before) also carries the schematic's caption, only where the schematic is shown */ html.hunter-hud body.tourney-page .ogt-command-main::before{display:flex;justify-content:flex-end;align-items:flex-start;padding:42px 30px 0 0;font:700 9px/1 var(--hh-font-mono);letter-spacing:.24em;color:var(--hh-muted);white-space:pre} @media (min-width:1400px),(min-width:900px) and (max-width:1120px){ html.hunter-hud body.tourney-page .ogt-command-main::before{content:'// BRACKET · QF SF F'} } html.hunter-hud body.tourney-page .ogt-kicker{margin-bottom:20px;animation:mx-fade .5s ease-out .1s backwards} html.hunter-hud body.tourney-page .ogt-kicker i{display:none} html.hunter-hud body.tourney-page .ogt-command h1{font-size:4.9rem!important;line-height:.92!important;letter-spacing:.01em!important;font-weight:700!important;font-stretch:var(--mx-stretch);animation:hh-reveal-x .7s var(--hh-ease-out) .12s backwards} html.hunter-hud body.tourney-page .ogt-command h1 em, html.hunter-hud body.tourney-page .ogt-section-title em{color:var(--hh-yellow);text-shadow:0 0 26px rgba(255,196,0,.5)} /* the display title is always stacked (TOURNAMENT / ARENA), which also keeps the schematic's column clear */ html.hunter-hud body.tourney-page .ogt-command h1 em{display:block} html.hunter-hud body.tourney-page .ogt-command-copy{color:var(--hh-dim);max-width:62ch;line-height:1.7;text-wrap:pretty;animation:mx-rise .5s var(--hh-ease-out) .2s backwards} html.hunter-hud body.tourney-page .ogt-command-actions{animation:mx-rise .5s var(--hh-ease-out) .27s backwards} html.hunter-hud body.tourney-page .ogt-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;font-size:.78rem!important;letter-spacing:.12em!important} html.hunter-hud body.tourney-page .ogt-btn.hh-primary:hover{transform:translateY(-2px)!important} html.hunter-hud body.tourney-page .ogt-btn:not(.hh-primary):hover{transform:translateY(-1px)!important} /* stats: indexed readout wells; the rail and diamond carry the status colour, digits stay tabular */ html.hunter-hud body.tourney-page .ogt-command-stats{counter-reset:mx-stat;gap:12px} html.hunter-hud body.tourney-page .ogt-stat{ --mx-sc:var(--hh-orange);counter-increment:mx-stat;position:relative;padding:16px 16px 13px 19px; border:1px solid var(--hh-edge);border-radius:0;clip-path:var(--mc-cut-sm); background:var(--mx-well);box-shadow:var(--mx-well-shadow),inset 3px 0 var(--mx-sc); } html.hunter-hud body.tourney-page .ogt-stat:nth-child(1){--mx-sc:var(--mx-ok)} html.hunter-hud body.tourney-page .ogt-stat:nth-child(2){--mx-sc:var(--mx-live)} html.hunter-hud body.tourney-page .ogt-stat:nth-child(3){--mx-sc:var(--mx-warn)} html.hunter-hud body.tourney-page .ogt-stat::before{content:'// ' counter(mx-stat,decimal-leading-zero);position:absolute;top:11px;right:13px;font:700 9px/1 var(--hh-font-mono);letter-spacing:.14em;color:var(--hh-muted)} html.hunter-hud body.tourney-page .ogt-stat b{font-family:var(--hh-font-mono);font-weight:700;color:var(--hh-ink);font-size:2rem;line-height:1;font-variant-numeric:tabular-nums;text-shadow:none} html.hunter-hud body.tourney-page .ogt-stat:nth-child(3) b{color:var(--hh-yellow);text-shadow:0 0 16px rgba(255,196,0,.35)} html.hunter-hud body.tourney-page .ogt-stat span{display:flex;align-items:center;gap:8px;margin-top:9px;color:var(--hh-dim);font-family:var(--hh-font-hud);font-weight:600;letter-spacing:.22em;font-size:.66rem} html.hunter-hud body.tourney-page .ogt-stat span::before{content:'';flex:0 0 6px;height:6px;transform:rotate(45deg);background:var(--mx-sc);box-shadow:0 0 8px var(--mx-sc)} html.hunter-hud body.tourney-page .ogt-stat:not(.hh-will-reveal):not(.hh-reveal){animation:mx-rise .5s var(--hh-ease-out) .34s backwards} html.hunter-hud body.tourney-page .ogt-stat:nth-child(2):not(.hh-will-reveal):not(.hh-reveal){animation-delay:.4s} html.hunter-hud body.tourney-page .ogt-stat:nth-child(3):not(.hh-will-reveal):not(.hh-reveal){animation-delay:.46s} html.hunter-hud body.tourney-page .ogt-stat.hh-reveal:nth-child(2){animation-delay:60ms} html.hunter-hud body.tourney-page .ogt-stat.hh-reveal:nth-child(3){animation-delay:120ms} html.hunter-hud body.tourney-page .ogt-command-media{box-shadow:var(--mx-panel-shadow)!important;animation:mx-rise .6s var(--hh-ease-out) .12s backwards} html.hunter-hud body.tourney-page .ogt-prize-panel{ border:1px solid var(--hh-edge-hot);border-radius:0;clip-path:var(--mc-cut-sm); background:linear-gradient(135deg,rgba(255,122,0,.16),rgba(255,196,0,.04) 60%,rgba(9,8,7,.6)); box-shadow:inset 0 1px rgba(255,210,130,.18),inset 3px 0 var(--hh-yellow); } html.hunter-hud body.tourney-page .ogt-prize-panel small{font-family:var(--hh-font-hud);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:.66rem;color:var(--hh-dim)} html.hunter-hud body.tourney-page .ogt-prize-panel b{font-family:var(--hh-font-mono);font-size:2.4rem;line-height:1.05;color:var(--hh-yellow);font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,196,0,.45)} /* payout status: manual payout needs an operator, so it is an attention (yellow) chip, not a live one */ html.hunter-hud body.tourney-page .ogt-prize-panel span:last-child{ display:inline-flex;align-items:center;gap:7px; border-radius:0;clip-path:var(--mc-cut-xs);border:1px solid var(--mx-warn-edge); background:var(--mx-warn-bg);color:var(--hh-yellow);font-family:var(--hh-font-mono);letter-spacing:.12em; box-shadow:none; } /* tournament-competitors.css (match rooms) uses literal cyan/magenta/indigo values, not the --ogt-* tokens */ html.hunter-hud body.tourney-page .ogtc-room-hub::before{ background:linear-gradient(90deg,rgba(255,122,0,.07),transparent 46%,rgba(255,196,0,.06)), repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,122,0,.04) 22px 23px); } html.hunter-hud body.tourney-page .ogtc-match-room{ border:1px solid var(--hh-edge-2);border-radius:0;clip-path:var(--mc-cut-sm); background:linear-gradient(150deg,#15100b,#0a0807);transition:border-color .2s; } html.hunter-hud body.tourney-page .ogtc-match-room:hover{border-color:var(--hh-edge-hot)} html.hunter-hud body.tourney-page .ogtc-room-top{font-family:var(--hh-font-hud);color:var(--hh-muted);letter-spacing:.18em} html.hunter-hud body.tourney-page .ogtc-room-top b{color:var(--hh-yellow);font-family:var(--hh-font-mono)} html.hunter-hud body.tourney-page .ogtc-room-player{border:1px solid var(--hh-edge);border-radius:0;clip-path:var(--mc-cut-xs);background:rgba(255,122,0,.035)} html.hunter-hud body.tourney-page .ogtc-room-player small{color:var(--hh-orange);font-family:var(--hh-font-mono)} html.hunter-hud body.tourney-page .ogtc-room-player b{color:var(--hh-ink);font-family:var(--hh-font-hud);letter-spacing:.04em} html.hunter-hud body.tourney-page .ogtc-vs{ border:0;border-radius:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); background:var(--hh-yellow);color:#140a00;font-family:var(--hh-font-mono); } /* P1 and P2 are equal-weight actions for two different people: both are hot secondaries, keyed by a side rail (P1 orange, P2 yellow), so a row of rooms never turns into a wall of power buttons */ html.hunter-hud body.tourney-page .ogtc-room-btn{ --mx-rb:var(--hh-orange); border:1px solid var(--hh-edge-hot);border-radius:0;clip-path:var(--mc-cut-xs); background:linear-gradient(180deg,rgba(255,122,0,.18),rgba(255,122,0,.04) 60%),linear-gradient(180deg,#1c150c,#0f0b07); color:var(--hh-yellow);box-shadow:inset 3px 0 var(--mx-rb),inset 0 1px rgba(255,196,0,.18); font-family:var(--hh-font-hud);font-weight:700;letter-spacing:.14em; transition:color .18s,border-color .18s,box-shadow .25s,transform .25s var(--hh-ease-out); } html.hunter-hud body.tourney-page .ogtc-room-btn.alt{--mx-rb:var(--hh-yellow);color:var(--hh-ink);border-color:var(--hh-edge-2);background:linear-gradient(180deg,#1c150c,#0f0b07)} html.hunter-hud body.tourney-page .ogtc-room-btn:hover{color:#fff;border-color:var(--hh-orange);transform:translateY(-1px);box-shadow:inset 4px 0 var(--mx-rb),inset 0 1px rgba(255,226,122,.35),inset 0 -16px 24px -14px rgba(255,122,0,.55)} html.hunter-hud body.tourney-page .ogtc-room-btn:active{transform:translateY(1px)} html.hunter-hud body.tourney-page :is(.ogtc-room-btn,.ogt-filter):focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--hh-yellow)!important} @media (max-width:560px){ html.hunter-hud body.tourney-page .ogtc-vs{clip-path:var(--mc-cut-xs)} } html.hunter-hud body.tourney-page .ogt-prize-panel span:last-child::before{ content:'';flex:0 0 6px;width:6px;height:6px;background:var(--mx-warn);transform:rotate(45deg);box-shadow:0 0 8px rgba(255,196,0,.7); } /* the cover fallback is a remote placehold.co plate painted navy + cyan — burn it down to the HUD ember ramp */ html.hunter-hud body.tourney-page img[src*="placehold.co"]{ filter:grayscale(1) sepia(1) saturate(4.4) hue-rotate(-14deg) brightness(.92) contrast(1.05); } html.hunter-hud body.tourney-page .ogt-media-card{background:#090807;--panel-edge:var(--hh-edge-2);animation:mx-fade .5s ease-out .36s backwards} html.hunter-hud body.tourney-page .ogt-media-card:nth-child(2){animation-delay:.41s} html.hunter-hud body.tourney-page .ogt-media-card:nth-child(3){animation-delay:.46s} html.hunter-hud body.tourney-page .ogt-media-card:nth-child(4){animation-delay:.51s} html.hunter-hud body.tourney-page .ogt-media-card:nth-child(5){animation-delay:.56s} html.hunter-hud body.tourney-page .ogt-media-card:nth-child(6){animation-delay:.61s} html.hunter-hud body.tourney-page .ogt-media-card img{opacity:.85;transition:transform .6s var(--hh-ease-out),opacity .3s} html.hunter-hud body.tourney-page .ogt-media-card:hover img{transform:scale(1.06);opacity:1} html.hunter-hud body.tourney-page .ogt-media-card:hover{border-color:var(--hh-orange)!important} html.hunter-hud body.tourney-page .ogt-media-card span{z-index:3;border-radius:0;border-left:2px solid var(--hh-orange);background:rgba(8,6,4,.86);letter-spacing:.08em;font-weight:700} /* covers: a static CRT line texture, and a target reticle that locks on when the cover is hovered or focused */ html.hunter-hud body.tourney-page .ogt-media-card::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px)} html.hunter-hud body.tourney-page .ogt-media-card::before{ content:'';position:absolute;inset:10px 10px 46px;z-index:2;pointer-events:none;opacity:0;transform:scale(1.12); transition:opacity .22s ease,transform .45s var(--hh-ease-out); background: linear-gradient(var(--hh-yellow),var(--hh-yellow)) top left/12px 2px no-repeat,linear-gradient(var(--hh-yellow),var(--hh-yellow)) top left/2px 12px no-repeat, linear-gradient(var(--hh-yellow),var(--hh-yellow)) top right/12px 2px no-repeat,linear-gradient(var(--hh-yellow),var(--hh-yellow)) top right/2px 12px no-repeat, linear-gradient(var(--hh-yellow),var(--hh-yellow)) bottom left/12px 2px no-repeat,linear-gradient(var(--hh-yellow),var(--hh-yellow)) bottom left/2px 12px no-repeat, linear-gradient(var(--hh-yellow),var(--hh-yellow)) bottom right/12px 2px no-repeat,linear-gradient(var(--hh-yellow),var(--hh-yellow)) bottom right/2px 12px no-repeat, linear-gradient(rgba(255,196,0,.8),rgba(255,196,0,.8)) center/16px 1px no-repeat,linear-gradient(rgba(255,196,0,.8),rgba(255,196,0,.8)) center/1px 16px no-repeat; } html.hunter-hud body.tourney-page .ogt-media-card:is(:hover,:focus-visible)::before{opacity:1;transform:none} html.hunter-hud body.tourney-page .ogt-media-card:focus-visible{outline:2px solid var(--hh-yellow);outline-offset:-3px} @media (max-width:760px){html.hunter-hud body.tourney-page .ogt-media-card::before{inset:7px 7px 34px}} html.hunter-hud body.tourney-page .ogt-sidebar-head, html.hunter-hud body.tourney-page .ogt-stage-head{border-bottom-color:var(--hh-edge)} html.hunter-hud body.tourney-page .ogt-sidebar-head h2{display:flex;align-items:center;gap:10px;font-size:.95rem!important;letter-spacing:.14em!important} html.hunter-hud body.tourney-page .ogt-sidebar-head h2::before{content:'';flex:0 0 18px;height:2px;background:var(--hh-orange);box-shadow:0 0 10px rgba(255,122,0,.8)} html.hunter-hud body.tourney-page .ogt-sidebar-head h2::after{content:'';flex:0 0 5px;height:5px;background:var(--hh-yellow);transform:rotate(45deg);opacity:.8} html.hunter-hud body.tourney-page .ogt-stage-head h2{font-size:2.2rem!important;letter-spacing:.02em!important} html.hunter-hud body.tourney-page .ogt-stage-head p{color:var(--hh-dim)} /* filters: a tight segmented bar; each state filter carries its status diamond (open visor, active live, done neutral) */ html.hunter-hud body.tourney-page .ogt-filter-row{gap:5px} html.hunter-hud body.tourney-page .ogt-filter{ --mx-fc:var(--hh-dim);display:inline-flex;align-items:center;gap:7px;padding:0 12px; border:1px solid var(--hh-edge-2);border-radius:0;clip-path:var(--mc-cut-xs);color:var(--hh-dim);background:var(--mx-well); box-shadow:inset 0 1px rgba(255,200,120,.06); font-family:var(--hh-font-mono);font-size:.66rem;letter-spacing:.12em; transition:color .18s,border-color .18s,box-shadow .25s,transform .25s var(--hh-ease-out); } html.hunter-hud body.tourney-page .ogt-filter[data-filter="open"]{--mx-fc:var(--mx-ok)} html.hunter-hud body.tourney-page .ogt-filter[data-filter="active"]{--mx-fc:var(--mx-live)} html.hunter-hud body.tourney-page .ogt-filter[data-filter]:not([data-filter="all"])::before{content:'';flex:0 0 5px;height:5px;transform:rotate(45deg);background:var(--mx-fc)} html.hunter-hud body.tourney-page .ogt-filter:hover{color:var(--hh-ink);border-color:var(--hh-orange);transform:translateY(-1px);box-shadow:inset 0 -10px 16px -10px rgba(255,122,0,.5)} html.hunter-hud body.tourney-page .ogt-filter.is-active{color:#1a0900;border-color:var(--hh-yellow);background:linear-gradient(180deg,var(--hh-yellow),var(--hh-orange-2));box-shadow:inset 0 1px rgba(255,255,255,.5)} html.hunter-hud body.tourney-page .ogt-filter.is-active::before{background:#1a0900!important} /* queue cards: indexed 01, 02…, slide in as a sequence whenever the list renders (filter changes replay it) */ html.hunter-hud body.tourney-page .ogt-list{counter-reset:mx-queue} html.hunter-hud body.tourney-page .ogt-tournament-card{ counter-increment:mx-queue;position:relative; border:1px solid var(--hh-edge);border-radius:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); background:linear-gradient(165deg,#120e09,#090807);box-shadow:inset 0 1px rgba(255,200,120,.08); transition:border-color .2s,background-color .2s,box-shadow .3s,transform .3s var(--hh-ease-out); animation:mx-slide .45s var(--hh-ease-out) .1s backwards; } html.hunter-hud body.tourney-page .ogt-tournament-card:nth-child(2){animation-delay:.16s} html.hunter-hud body.tourney-page .ogt-tournament-card:nth-child(3){animation-delay:.22s} html.hunter-hud body.tourney-page .ogt-tournament-card:nth-child(n+4){animation-delay:.28s} html.hunter-hud body.tourney-page .ogt-tournament-card::after{content:counter(mx-queue,decimal-leading-zero);position:absolute;top:8px;right:11px;font:700 9px/1 var(--hh-font-mono);letter-spacing:.12em;color:var(--hh-muted)} html.hunter-hud body.tourney-page .ogt-tournament-card > span{padding-right:18px;min-width:0} html.hunter-hud body.tourney-page .ogt-tournament-card:hover, html.hunter-hud body.tourney-page .ogt-tournament-card.is-selected{border-color:var(--hh-orange);background:linear-gradient(90deg,rgba(255,122,0,.13),rgba(255,122,0,.03) 70%),#0b0907} html.hunter-hud body.tourney-page .ogt-tournament-card:hover{transform:translateY(-2px);box-shadow:inset 0 1px rgba(255,210,130,.24),inset 0 0 28px rgba(255,122,0,.1)} html.hunter-hud body.tourney-page .ogt-tournament-card.is-selected{box-shadow:inset 3px 0 var(--hh-yellow),inset 0 1px rgba(255,210,130,.2),inset 0 0 30px rgba(255,196,0,.07)} html.hunter-hud body.tourney-page .ogt-tournament-card.is-selected::after{color:var(--hh-yellow)} html.hunter-hud body.tourney-page .ogt-tournament-card.is-preview{border-style:dashed;border-color:var(--hh-edge-hot);background:linear-gradient(135deg,rgba(255,122,0,.07),rgba(255,196,0,.03)),#090807} html.hunter-hud body.tourney-page .ogt-tournament-card:focus-visible{outline:2px solid var(--hh-yellow);outline-offset:-4px} html.hunter-hud body.tourney-page .ogt-card-title{font-family:var(--hh-font-hud);font-weight:700;font-stretch:var(--mx-stretch);font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase} /* chips: status colour is semantic (open ok, active live, pending attention, done neutral, cancelled struck) */ html.hunter-hud body.tourney-page .ogt-chip{ display:inline-flex;align-items:center;gap:6px; border-radius:0;clip-path:var(--mc-cut-xs);border-color:var(--hh-edge-2);color:var(--hh-dim);background:rgba(8,6,4,.9); font-family:var(--hh-font-mono);letter-spacing:.1em;font-variant-numeric:tabular-nums; } html.hunter-hud body.tourney-page .ogt-chip:is(.open,.active,.pending,.completed)::before{content:'';flex:0 0 5px;height:5px;transform:rotate(45deg);background:currentColor} html.hunter-hud body.tourney-page .ogt-chip.open{color:var(--mx-ok);background:var(--mx-ok-bg);border-color:var(--mx-ok-edge)} html.hunter-hud body.tourney-page .ogt-chip.active{color:var(--mx-live-ink);background:var(--mx-live-bg);border-color:var(--mx-live-edge)} html.hunter-hud body.tourney-page .ogt-chip.active::before{background:var(--mx-live);box-shadow:0 0 8px rgba(255,59,36,.8)} html.hunter-hud body.tourney-page .ogt-stage-head .ogt-chip.active::before{animation:mx-live 1.3s ease-in-out infinite;animation-play-state:var(--hud-play)} html.hunter-hud body.tourney-page .ogt-chip.completed{color:var(--hh-ink-2);background:rgba(255,243,223,.05);border-color:var(--hh-edge-2)} html.hunter-hud body.tourney-page .ogt-chip.completed::before{background:var(--hh-dim)} html.hunter-hud body.tourney-page .ogt-chip.pending{color:var(--hh-yellow);background:var(--mx-warn-bg);border-color:var(--mx-warn-edge)} html.hunter-hud body.tourney-page .ogt-chip.preview{color:var(--hh-yellow-2);border-color:var(--hh-edge-hot);border-style:dashed;background:rgba(255,122,0,.1)} html.hunter-hud body.tourney-page .ogt-chip.cancelled{color:var(--hh-muted);border-color:rgba(255,59,36,.3);background:rgba(255,59,36,.05);text-decoration:line-through} html.hunter-hud body.tourney-page .ogt-game-panel, html.hunter-hud body.tourney-page .ogt-fact, html.hunter-hud body.tourney-page .ogt-participant, html.hunter-hud body.tourney-page .ogt-match, html.hunter-hud body.tourney-page .ogt-admin-card, html.hunter-hud body.tourney-page .ogt-approval-card, html.hunter-hud body.tourney-page .ogt-request-card, html.hunter-hud body.tourney-page .ogt-seed-card, html.hunter-hud body.tourney-page .ogt-test-step, html.hunter-hud body.tourney-page .ogt-test-metrics span, html.hunter-hud body.tourney-page .ogt-test-room-card, html.hunter-hud body.tourney-page .ogt-advanced-fields, html.hunter-hud body.tourney-page .ogt-preset-card, html.hunter-hud body.tourney-page .ogt-pair-card{border-radius:0;border-color:var(--hh-edge);background:linear-gradient(165deg,#120e09,#090807);clip-path:var(--mc-cut-sm)} html.hunter-hud body.tourney-page .ogt-match{clip-path:none} html.hunter-hud body.tourney-page .ogt-game-panel h3{font-size:1.35rem!important} html.hunter-hud body.tourney-page .ogt-fact small, html.hunter-hud body.tourney-page .ogt-field label, html.hunter-hud body.tourney-page .ogt-pair-card small, html.hunter-hud body.tourney-page .ogt-preset-head span, html.hunter-hud body.tourney-page .ogt-admin-subhead b, html.hunter-hud body.tourney-page .ogt-pairing-head span{font-family:var(--hh-font-hud);font-weight:600;letter-spacing:.16em;color:var(--hh-muted)} html.hunter-hud body.tourney-page .ogt-preset-head span, html.hunter-hud body.tourney-page .ogt-admin-subhead b, html.hunter-hud body.tourney-page .ogt-pairing-head span{color:var(--hh-yellow)} html.hunter-hud body.tourney-page .ogt-champion-panel{border-radius:0;border-color:rgba(255,196,0,.4);background:linear-gradient(135deg,rgba(255,196,0,.13),rgba(255,122,0,.04) 60%,rgba(9,8,7,.5));clip-path:var(--mc-cut-sm)} html.hunter-hud body.tourney-page .ogt-champion-panel h3{color:var(--hh-yellow)!important;font-size:.9rem!important;letter-spacing:.18em!important} html.hunter-hud body.tourney-page .ogt-champion-body span{color:var(--hh-amber);font-family:var(--hh-font-mono)} html.hunter-hud body.tourney-page .ogt-avatar{border-radius:0;clip-path:var(--mc-cut-xs);border-color:var(--hh-orange);background:#090807} /* every cover/thumb slot in tournaments.css falls back to a navy plate colour — repaint them carbon */ html.hunter-hud body.tourney-page .ogt-card-cover, html.hunter-hud body.tourney-page .ogt-game-panel img, html.hunter-hud body.tourney-page .ogt-preset-card img{background:#0a0807;border-color:var(--hh-edge);border-radius:0;clip-path:var(--mc-cut-xs)} html.hunter-hud body.tourney-page .ogt-game-panel{background:rgba(9,8,7,.55)} html.hunter-hud body.tourney-page .ogt-avatar.lg{border-color:var(--hh-yellow);box-shadow:0 0 18px rgba(255,196,0,.35)} html.hunter-hud body.tourney-page .ogt-section-title{font-size:.95rem!important;letter-spacing:.12em!important} html.hunter-hud body.tourney-page .ogt-round h3{color:var(--hh-orange);font-family:var(--hh-font-mono);letter-spacing:.14em} html.hunter-hud body.tourney-page .ogt-round h3::before{content:'// ';color:var(--hh-yellow)} html.hunter-hud body.tourney-page .ogt-match-head{border-bottom-color:var(--hh-edge);color:var(--hh-muted);font-family:var(--hh-font-mono)} html.hunter-hud body.tourney-page .ogt-slot + .ogt-slot{border-top-color:var(--hh-edge)} html.hunter-hud body.tourney-page .ogt-slot.is-winner{background:linear-gradient(90deg,rgba(166,255,77,.14),rgba(255,196,0,.04))} html.hunter-hud body.tourney-page .ogt-slot-name span{color:var(--hh-muted)} html.hunter-hud body.tourney-page .ogt-winner-btn{min-height:30px;padding:0 9px;font-size:.62rem!important;color:var(--hh-visor)!important;border-color:rgba(166,255,77,.4)!important} html.hunter-hud body.tourney-page .ogt-winner-btn:hover{color:#e2f6cf!important;border-color:var(--hh-visor)!important} html.hunter-hud body.tourney-page .ogt-winner-btn.danger-mini{color:#ffb39a!important;border-color:#6e2614!important} html.hunter-hud body.tourney-page .ogt-match-admin{border-top-color:var(--hh-edge)} html.hunter-hud body.tourney-page .ogt-match-admin button{min-height:28px;padding:0 9px;font-size:.6rem!important;color:var(--hh-orange)!important} html.hunter-hud body.tourney-page .ogt-admin-panel{border-radius:0;border-color:rgba(255,77,0,.4);background:linear-gradient(165deg,rgba(255,77,0,.08),rgba(9,8,7,.4));clip-path:var(--mc-cut-md)} html.hunter-hud body.tourney-page .ogt-admin-panel h3{color:var(--hh-yellow)!important;font-size:1rem!important;letter-spacing:.16em!important} html.hunter-hud body.tourney-page .ogt-create-card{border-color:var(--hh-edge-hot);background:linear-gradient(135deg,rgba(255,122,0,.09),rgba(255,196,0,.03)),#0b0907} html.hunter-hud body.tourney-page .ogt-game-picker select{border-color:var(--hh-edge-hot)!important;font-size:.9rem!important;letter-spacing:.06em!important;text-transform:uppercase} html.hunter-hud body.tourney-page .ogt-preset-head, html.hunter-hud body.tourney-page .ogt-pairing-head{border-top-color:var(--hh-edge)} html.hunter-hud body.tourney-page .ogt-preset-card{background:linear-gradient(135deg,rgba(255,122,0,.09),rgba(255,196,0,.03)),#0b0907;transition:border-color .2s,transform .2s} html.hunter-hud body.tourney-page .ogt-preset-card:hover{border-color:var(--hh-orange);transform:translateY(-2px)} html.hunter-hud body.tourney-page .ogt-preset-card img{border-radius:0;border-color:var(--hh-edge-2)} html.hunter-hud body.tourney-page .ogt-preset-card small{color:var(--hh-orange);font-family:var(--hh-font-mono)} html.hunter-hud body.tourney-page .ogt-admin-bracket-control{border-radius:0;border-color:var(--hh-edge-hot);background:rgba(255,122,0,.05);clip-path:var(--mc-cut-sm)} html.hunter-hud body.tourney-page .ogt-approval-panel, html.hunter-hud body.tourney-page .ogt-entry-requests{border-radius:0;border-color:rgba(255,196,0,.32);background:linear-gradient(135deg,rgba(255,196,0,.08),rgba(255,122,0,.03)),rgba(9,8,7,.6);clip-path:var(--mc-cut-sm)} html.hunter-hud body.tourney-page .ogt-request-card.is-pending{border-color:rgba(255,196,0,.5);background:rgba(255,196,0,.08)} html.hunter-hud body.tourney-page .ogt-request-card.is-accepted{border-color:rgba(166,255,77,.4);background:rgba(166,255,77,.07)} html.hunter-hud body.tourney-page .ogt-request-card small{color:var(--hh-orange);font-family:var(--hh-font-mono)} html.hunter-hud body.tourney-page .ogt-request-card em{color:var(--hh-dim)} html.hunter-hud body.tourney-page .ogt-test-panel{border-radius:0;border-color:rgba(166,255,77,.3);background:linear-gradient(135deg,rgba(166,255,77,.06),rgba(255,122,0,.04)),#0b0907;clip-path:var(--mc-cut-sm)} html.hunter-hud body.tourney-page .ogt-test-panel summary, html.hunter-hud body.tourney-page .ogt-advanced-fields summary{color:var(--hh-orange);letter-spacing:.14em} html.hunter-hud body.tourney-page .ogt-test-note{border-radius:0;color:var(--hh-amber);border-color:rgba(255,171,31,.35);background:rgba(255,171,31,.08);clip-path:var(--mc-cut-xs)} html.hunter-hud body.tourney-page .ogt-test-step strong{border-radius:0;clip-path:var(--mc-cut-xs);background:var(--hh-orange);color:#1a0900;font-family:var(--hh-font-mono)} html.hunter-hud body.tourney-page .ogt-test-step.needs-action strong{background:var(--hh-amber)} html.hunter-hud body.tourney-page .ogt-test-step.is-ready strong{background:var(--hh-visor);color:#0c1a02} html.hunter-hud body.tourney-page .ogt-test-step a{color:var(--hh-orange)} html.hunter-hud body.tourney-page .ogt-test-metrics b{color:var(--hh-visor);font-family:var(--hh-font-mono)} html.hunter-hud body.tourney-page .ogt-test-steps{color:var(--hh-ink-2)} html.hunter-hud body.tourney-page .ogt-test-link{min-height:38px;padding:0 12px;font-size:.62rem!important} html.hunter-hud body.tourney-page .ogt-test-link.mini{min-height:32px;font-size:.58rem!important} html.hunter-hud body.tourney-page .ogt-seed-input{width:64px;text-align:center;font-family:var(--hh-font-mono)!important} html.hunter-hud body.tourney-page .ogt-pair-card{border-color:rgba(255,171,31,.25);background:linear-gradient(165deg,rgba(255,171,31,.07),#090807)} html.hunter-hud body.tourney-page .ogt-status.ok{color:var(--hh-visor)} html.hunter-hud body.tourney-page .ogt-status.err{color:#ffb4a5} html.hunter-hud body.tourney-page .ogt-empty{ border:1px dashed var(--hh-edge-hot);border-radius:0;background:rgba(255,122,0,.03);color:var(--hh-dim); font-family:var(--hh-font-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase; } html.hunter-hud body.tourney-page .ogt-empty::before{content:'// ';color:var(--hh-orange)} html.hunter-hud body.tourney-page .ogt-toast{--panel-edge:var(--hh-edge-hot);font-family:var(--hh-font-hud);letter-spacing:.04em} /* ── 3b · stage + queue material ── */ html.hunter-hud body.tourney-page .ogt-topbar{animation:mx-drop .5s var(--hh-ease-out) backwards} html.hunter-hud body.tourney-page :is(.ogt-sidebar,.ogt-stage){box-shadow:var(--mx-panel-shadow)!important} html.hunter-hud body.tourney-page .ogt-layout:not(.hh-will-reveal):not(.hh-reveal) > .ogt-sidebar{animation:mx-rise .6s var(--hh-ease-out) .3s backwards} html.hunter-hud body.tourney-page .ogt-layout:not(.hh-will-reveal):not(.hh-reveal) > .ogt-stage{animation:mx-rise .6s var(--hh-ease-out) .38s backwards} html.hunter-hud body.tourney-page .ogt-sidebar-head{background:linear-gradient(180deg,rgba(255,122,0,.07),transparent)} html.hunter-hud body.tourney-page .ogt-stage-head{position:relative;background:linear-gradient(90deg,rgba(255,122,0,.09),rgba(255,122,0,.02) 55%,transparent)} html.hunter-hud body.tourney-page .ogt-stage-head h2{font-size:2.5rem!important;font-weight:700!important;font-stretch:var(--mx-stretch);line-height:.95!important;letter-spacing:.01em!important;margin-top:10px!important;text-wrap:balance} html.hunter-hud body.tourney-page .ogt-stage-head p{font-family:var(--hh-font-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase} /* game panel: the cover gets the same reticle frame as the hero covers (static), facts become readout wells */ html.hunter-hud body.tourney-page .ogt-game-panel{box-shadow:var(--mx-panel-shadow)} html.hunter-hud body.tourney-page .ogt-game-panel h3{font-weight:700!important;font-stretch:var(--mx-stretch);letter-spacing:.02em!important} html.hunter-hud body.tourney-page .ogt-game-facts{gap:8px} html.hunter-hud body.tourney-page .ogt-fact{background:var(--mx-well);box-shadow:var(--mx-well-shadow);min-height:64px;transition:border-color .2s,box-shadow .25s} html.hunter-hud body.tourney-page .ogt-fact:hover{border-color:var(--hh-edge-2);box-shadow:var(--mx-well-shadow),inset 2px 0 var(--hh-orange)} html.hunter-hud body.tourney-page .ogt-fact small{color:var(--hh-dim)!important;font-size:.62rem;letter-spacing:.2em!important} html.hunter-hud body.tourney-page .ogt-fact b{font-family:var(--hh-font-hud);font-weight:700;font-stretch:var(--mx-stretch);font-size:1.1rem;letter-spacing:.02em;color:var(--hh-ink);font-variant-numeric:tabular-nums} /* champion: an empty trophy slot until a result lands */ html.hunter-hud body.tourney-page .ogt-champion-panel{ position:relative;box-shadow:var(--mx-panel-shadow); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23ffc400' stroke-opacity='.26' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M21 9h22v15a11 11 0 0 1-22 0zM21 13h-8v5a8 8 0 0 0 8 8M43 13h8v5a8 8 0 0 1-8 8M32 35v9M25 44h14v7H25zM21 55h22'/%3E%3C/svg%3E") 50% calc(50% + 30px)/112px 112px no-repeat, radial-gradient(ellipse 50% 40% at 50% 62%,rgba(255,196,0,.08),transparent 70%), linear-gradient(135deg,rgba(255,196,0,.13),rgba(255,122,0,.04) 60%,rgba(9,8,7,.5)); } html.hunter-hud body.tourney-page .ogt-champion-panel:has(.ogt-champion-body){background:radial-gradient(ellipse 60% 70% at 20% 50%,rgba(255,196,0,.12),transparent 70%),linear-gradient(135deg,rgba(255,196,0,.13),rgba(255,122,0,.04) 60%,rgba(9,8,7,.5))} html.hunter-hud body.tourney-page .ogt-champion-body b{font-family:var(--hh-font-hud);font-weight:700;font-stretch:var(--mx-stretch);font-size:1.5rem;letter-spacing:.02em;text-transform:uppercase} /* numbered sections: 01 MATCH ROOMS, 02 PLAYERS, 03 BRACKET (entry requests slot in when present) */ html.hunter-hud body.tourney-page .ogt-content{counter-reset:mx-sec} html.hunter-hud body.tourney-page .ogt-section-block{counter-increment:mx-sec} html.hunter-hud body.tourney-page .ogt-section-title{font-size:1.05rem!important;font-weight:700!important;letter-spacing:.14em!important;padding-bottom:10px;border-bottom:1px solid var(--hh-edge);background:linear-gradient(var(--hh-orange),var(--hh-orange)) left bottom/42px 1px no-repeat} html.hunter-hud body.tourney-page .ogt-section-title > span:first-child::before{content:counter(mx-sec,decimal-leading-zero);display:inline-block;margin-right:12px;padding:3px 6px;vertical-align:2px;font:700 10px/1 var(--hh-font-mono);letter-spacing:.08em;color:#1a0900;background:var(--hh-orange);clip-path:var(--mc-cut-xs)} /* the empty Bracket block (the block right after Players) shows the ghost of the bracket it will become */ html.hunter-hud body.tourney-page .ogt-section-block:not(.ogtc-room-hub):not(.ogt-entry-requests) + .ogt-section-block > .ogt-empty{ min-height:176px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 136' fill='none' stroke='%23ff7a00' stroke-opacity='.34' stroke-width='1.5'%3E%3Cpath d='M2 7h58v14H2zM2 33h58v14H2zM2 89h58v14H2zM2 115h58v14H2zM94 20h54v14H94zM94 102h54v14H94z'/%3E%3Cpath d='M60 14h16v26H60M76 27h18M60 96h16v26H60M76 109h18M148 27h18v82h-18M166 68h18' stroke-dasharray='3 3'/%3E%3Cpath d='M184 59h54v18h-54z' stroke='%23ffc400' stroke-opacity='.5' stroke-width='2'/%3E%3C/svg%3E") right 28px center/240px 136px no-repeat, rgba(255,122,0,.03); } /* the stage closes on a hazard rail */ html.hunter-hud body.tourney-page .ogt-stage .ogt-content::after{ content:'';display:block;height:6px;margin:26px 6% 2px;background:var(--mx-hazard);opacity:.42; -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); } /* match rooms: readout head with a visor READY diamond, 2px lift on hover */ html.hunter-hud body.tourney-page .ogtc-match-room{box-shadow:inset 0 1px rgba(255,200,120,.1);transition:border-color .2s,transform .3s var(--hh-ease-out),box-shadow .3s} html.hunter-hud body.tourney-page .ogtc-match-room:hover{transform:translateY(-2px);box-shadow:inset 0 1px rgba(255,210,130,.24),inset 0 0 30px rgba(255,122,0,.08)} html.hunter-hud body.tourney-page .ogtc-room-top span{font-family:var(--hh-font-mono);letter-spacing:.12em;color:var(--hh-dim)} html.hunter-hud body.tourney-page .ogtc-room-top b{display:inline-flex;align-items:center;gap:6px;color:var(--mx-ok)} html.hunter-hud body.tourney-page .ogtc-room-top b::before{content:'';width:5px;height:5px;transform:rotate(45deg);background:currentColor;box-shadow:0 0 6px currentColor} @media (max-width:760px){ html.hunter-hud body.tourney-page .ogt-topbar{position:relative;top:auto} html.hunter-hud body.tourney-page .ogt-command h1{font-size:3.3rem!important} html.hunter-hud body.tourney-page .ogt-stage-head h2{font-size:1.8rem!important} html.hunter-hud body.tourney-page .ogt-section-block:not(.ogtc-room-hub):not(.ogt-entry-requests) + .ogt-section-block > .ogt-empty{min-height:150px;background-position:center 58px;background-size:190px 108px;padding-bottom:10px} } /* ═══════════════════════════════ 4 · pokemon-lobby.html ═══════════════════════════════ */ html.hunter-hud body:has(#landing.card){ --nx-void:var(--hh-void);--nx-deep:var(--hh-carbon); --nx-glass:rgba(25,18,10,.92);--nx-glass2:rgba(10,8,7,.95); --nx-stroke:var(--hh-edge-2);--nx-stroke2:var(--hh-edge-hot); --nx-cyan:var(--hh-orange);--nx-violet:var(--hh-yellow);--nx-magenta:var(--hh-ember);--nx-lime:var(--hh-visor);--nx-amber:var(--hh-amber); --nx-txt:var(--hh-ink);--nx-txt2:var(--hh-dim);--nx-txt3:var(--hh-muted); --nx-disp:var(--hh-font-hud);--nx-ui:var(--hh-font-text); font-family:var(--hh-font-text);color:var(--hh-ink); } html.hunter-hud body:has(#landing.card)::before, html.hunter-hud body:has(#landing.card)::after{display:none} html.hunter-hud body:has(#landing.card) .hdr h1{ background:none;color:var(--hh-ink);-webkit-text-fill-color:currentColor; font-family:var(--hh-font-hud);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:20px;text-shadow:0 0 22px rgba(255,122,0,.3); } html.hunter-hud body:has(#landing.card) .hdr h1::after{ content:'// CABLE LINK';display:inline-block;margin-left:12px;vertical-align:middle; font:700 10px/1 var(--hh-font-mono);letter-spacing:.26em;color:var(--hh-orange);text-shadow:none; } html.hunter-hud body:has(#landing.card) .hdr .pill{ font:700 10px/1 var(--hh-font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--hh-dim); padding:7px 11px;border:1px solid var(--hh-edge-2);background:rgba(8,6,4,.9);clip-path:var(--mc-cut-xs); } html.hunter-hud body:has(#landing.card) .dot{border-radius:0;transform:rotate(45deg);width:7px;height:7px;background:var(--hh-faint)} html.hunter-hud body:has(#landing.card) .dot.on{background:var(--hh-visor);box-shadow:0 0 8px var(--hh-visor);animation:hh-mc-dot 2.2s ease-in-out infinite;animation-play-state:var(--hud-play)} html.hunter-hud body:has(#landing.card) .card{padding:26px} html.hunter-hud body:has(#landing.card) #landing h2{color:var(--hh-yellow);font-family:var(--hh-font-hud);letter-spacing:.1em;text-transform:uppercase;font-size:16px;font-weight:700} html.hunter-hud body:has(#landing.card) #landing h2::before{ content:'// MATCHMAKING';display:flex;align-items:center;gap:10px;margin-bottom:10px; font:700 10px/1.2 var(--hh-font-mono);letter-spacing:.3em;color:var(--hh-orange); } html.hunter-hud body:has(#landing.card) #landing h2::after{content:'';display:block;width:64px;height:2px;margin-top:10px;background:var(--hh-orange);box-shadow:0 0 10px rgba(255,122,0,.8)} html.hunter-hud body:has(#landing.card) label{color:var(--hh-muted);font-family:var(--hh-font-hud);font-weight:600;letter-spacing:.2em} html.hunter-hud body:has(#landing.card) .btn{padding:12px 18px;font-size:12px!important;text-decoration:none} html.hunter-hud body:has(#landing.card) a.btn:hover{text-decoration:none} html.hunter-hud body:has(#landing.card) .btn.violet{border-color:var(--hh-yellow)!important;color:var(--hh-yellow)!important} html.hunter-hud body:has(#landing.card) .divider{color:var(--hh-muted);font-family:var(--hh-font-mono);letter-spacing:.3em} html.hunter-hud body:has(#landing.card) .divider::before, html.hunter-hud body:has(#landing.card) .divider::after{background:var(--hh-edge-2)} html.hunter-hud body:has(#landing.card) .err{color:#ffb4a5} html.hunter-hud body:has(#landing.card) .codechip{border-radius:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);background:#0b0907;border-color:var(--hh-edge-hot);box-shadow:inset 3px 0 var(--hh-orange)} html.hunter-hud body:has(#landing.card) .codechip .lbl{color:var(--hh-muted);font-family:var(--hh-font-hud);font-weight:600;letter-spacing:.2em} html.hunter-hud body:has(#landing.card) .codechip .code{color:var(--hh-yellow);font-family:var(--hh-font-mono);text-shadow:0 0 14px rgba(255,196,0,.5)} html.hunter-hud body:has(#landing.card) .copybtn{padding:6px 10px;font-size:10px!important} html.hunter-hud body:has(#landing.card) .mechip{border-radius:0;clip-path:var(--mc-cut-sm);background:#0b0907;border-color:var(--hh-edge-2);color:var(--hh-ink-2)} html.hunter-hud body:has(#landing.card) .mechip .av, html.hunter-hud body:has(#landing.card) .players .av{border-radius:0;clip-path:var(--mc-cut-xs);background:linear-gradient(135deg,var(--hh-yellow),var(--hh-orange));color:#1a0900} html.hunter-hud body:has(#landing.card) .stage{ border-radius:0;border-color:var(--hh-edge-hot);background:#000; clip-path:var(--mc-cut-md);box-shadow:0 0 0 1px #000,0 18px 40px rgba(0,0,0,.6); } html.hunter-hud body:has(#landing.card) .panel{padding:14px} html.hunter-hud body:has(#landing.card) .panel h3{ display:flex;align-items:center;gap:10px;color:var(--hh-yellow); font:700 10px/1.2 var(--hh-font-hud);letter-spacing:.3em;text-transform:uppercase;margin:0 0 12px; } html.hunter-hud body:has(#landing.card) .panel h3::before{content:'';flex:0 0 18px;height:2px;background:var(--hh-orange);box-shadow:0 0 10px rgba(255,122,0,.8)} html.hunter-hud body:has(#landing.card) .panel h3::after{content:'';flex:0 0 5px;height:5px;background:var(--hh-yellow);transform:rotate(45deg);opacity:.8} html.hunter-hud body:has(#landing.card) .players .host{color:var(--hh-yellow);border-color:var(--hh-yellow);border-radius:0;font-family:var(--hh-font-mono);letter-spacing:.1em} html.hunter-hud body:has(#landing.card) .roomitem{border-radius:0;clip-path:var(--mc-cut-sm);border-color:var(--hh-edge);background:#0b0907;transition:border-color .2s,box-shadow .2s,background-color .2s} html.hunter-hud body:has(#landing.card) .roomitem:hover{border-color:var(--hh-orange);background:#120d08;box-shadow:inset 0 0 0 1px rgba(255,122,0,.25),inset 0 -14px 22px -14px rgba(255,122,0,.45)} html.hunter-hud body:has(#landing.card) .roomitem b{font-family:var(--hh-font-hud);text-transform:uppercase;letter-spacing:.05em;font-size:12px} html.hunter-hud body:has(#landing.card) .roomitem small{color:var(--hh-muted)} html.hunter-hud body:has(#landing.card) .roomitem .roomcode{color:var(--hh-yellow);font-family:var(--hh-font-mono)} html.hunter-hud body:has(#landing.card) .roomempty, html.hunter-hud body:has(#landing.card) .hint{color:var(--hh-dim)} html.hunter-hud body:has(#landing.card) .hint b{color:var(--hh-ink)} html.hunter-hud body:has(#landing.card) .msg .who{color:var(--hh-orange)} html.hunter-hud body:has(#landing.card) .msg.me .who{color:var(--hh-visor)} html.hunter-hud body:has(#landing.card) .msg.sys{color:var(--hh-muted)} html.hunter-hud body:has(#landing.card) .steps > div > b{border-radius:0;clip-path:var(--mc-cut-xs);background:rgba(255,122,0,.14);border-color:rgba(255,122,0,.45);color:var(--hh-yellow);font-family:var(--hh-font-mono)} html.hunter-hud body:has(#landing.card) .steps div{color:var(--hh-dim)} html.hunter-hud body:has(#landing.card) #room-status, html.hunter-hud body:has(#landing.card) #copy-status{color:var(--hh-amber)} html.hunter-hud body:has(#landing.card) .chatform .btn{padding:9px 14px} /* cable-voice panel (cable-voice.css) */ html.hunter-hud body:has(#landing.card) #ccv-status{color:var(--hh-dim)} html.hunter-hud body:has(#landing.card) .ccv-member{background:#0b0907;border-radius:0;border-color:var(--hh-edge);clip-path:var(--mc-cut-xs)} html.hunter-hud body:has(#landing.card) .ccv-member span{color:var(--hh-muted)} html.hunter-hud body:has(#landing.card) .ccv-member.is-speaking, html.hunter-hud body:has(#landing.card) #ccv-push.is-speaking{border-color:var(--hh-visor)!important;background:rgba(166,255,77,.08)!important;box-shadow:inset 3px 0 var(--hh-visor)!important} html.hunter-hud body:has(#landing.card) .ccv-field{color:var(--hh-dim)} html.hunter-hud body:has(#landing.card) .ccv-field input{accent-color:var(--hh-orange)} html.hunter-hud body:has(#landing.card) .ccv-note{color:var(--hh-muted)} /* phone: the wordmark + // tag stop fighting the auth pill in the corner */ @media (max-width:520px){ html.hunter-hud body:has(#landing.card) .hdr h1{font-size:15px;letter-spacing:.05em} html.hunter-hud body:has(#landing.card) .hdr h1::after{display:block;margin:5px 0 0;letter-spacing:.22em} } html.hunter-hud body:has(#landing.card) .ccv-panel button:focus-visible, html.hunter-hud body:has(#landing.card) .ccv-panel select:focus-visible, html.hunter-hud body:has(#landing.card) .ccv-panel input:focus-visible{outline-color:var(--hh-yellow)} /* ── 4b · live ops panel ── Signature: the lobby is an operations desk. A header bar with a link-status chip (yellow = not linked yet, visor = connected), the matchmaking card as the heavy console with a header rail and the supported link formats, a carrier pulse running along the PLEASE WAIT divider (the page's one ambient loop), a mono status prompt, and in the room view indexed panels with a player count computed from the roster. */ html.hunter-hud body:has(#landing.card) .hdr{position:relative;padding:2px 0 14px;margin-bottom:26px;border-bottom:1px solid var(--hh-edge);animation:mx-drop .5s var(--hh-ease-out) backwards} html.hunter-hud body:has(#landing.card) .hdr::after{content:'';position:absolute;left:0;bottom:-1px;width:200px;height:1px;background:linear-gradient(90deg,var(--hh-yellow) 0 44px,var(--hh-orange) 44px 110px,transparent);box-shadow:0 0 10px rgba(255,122,0,.5)} html.hunter-hud body:has(#landing.card) .hdr h1{font-stretch:var(--mx-stretch);font-size:22px;letter-spacing:.06em} html.hunter-hud body:has(#landing.card) .hdr .pill{gap:9px;padding:8px 12px 8px 11px;color:var(--hh-yellow);border-color:var(--mx-warn-edge);background:var(--mx-warn-bg);transition:color .3s,border-color .3s,background-color .3s} html.hunter-hud body:has(#landing.card) .hdr .pill:has(.dot.on){color:var(--mx-ok);border-color:var(--mx-ok-edge);background:var(--mx-ok-bg)} html.hunter-hud body:has(#landing.card) .dot{background:var(--mx-warn);box-shadow:0 0 8px rgba(255,196,0,.6)} html.hunter-hud body:has(#landing.card) #landing.card{ --cut:18px;--panel-edge:var(--hh-edge-hot);--panel-top:#1f160c;--panel-bottom:#080605; --mx-rv-tl:left 10px top 17px;--mx-rv-tr:right 12px top 17px; position:relative;padding:62px 30px 26px;animation:mx-rise .6s var(--hh-ease-out) .06s backwards; } /* header rail: the channel on the left, the link formats the Cable Link emulates (GB and GBC) on the right */ html.hunter-hud body:has(#landing.card) #landing h2::before{ content:'// MATCHMAKING · CABLE LINK';position:absolute;left:0;right:0;top:0;height:42px;margin:0;padding:0 0 0 32px; display:flex;align-items:center;gap:0;font:700 10px/1 var(--hh-font-mono);letter-spacing:.28em;color:var(--hh-yellow); background:linear-gradient(90deg,rgba(255,122,0,.16),rgba(255,122,0,.04) 55%,transparent),linear-gradient(var(--hh-edge-2),var(--hh-edge-2)) left bottom/100% 1px no-repeat; } html.hunter-hud body:has(#landing.card) #landing.card::after{ content:'GB · GBC';position:absolute;top:11px;right:36px;height:20px;display:flex;align-items:center;padding:0 9px 0 23px; font:700 10px/1 var(--hh-font-mono);letter-spacing:.16em;color:var(--hh-ink-2); background:var(--mx-diamond-hot) 9px 50%/7px 7px no-repeat,rgba(255,122,0,.08);border:1px solid var(--hh-edge-hot);clip-path:var(--mc-cut-xs); } html.hunter-hud body:has(#landing.card) #landing h2{font-size:22px;font-stretch:var(--mx-stretch);letter-spacing:.08em;animation:mx-rise .5s var(--hh-ease-out) .14s backwards} html.hunter-hud body:has(#landing.card) #landing p.sub{max-width:54ch;color:var(--hh-dim);font-size:15px;line-height:1.6;text-wrap:pretty;animation:mx-rise .5s var(--hh-ease-out) .2s backwards} /* PLEASE WAIT: a carrier pulse travels in from both ends of the divider */ html.hunter-hud body:has(#landing.card) .divider{animation:mx-fade .5s ease-out .26s backwards} html.hunter-hud body:has(#landing.card) .divider::before, html.hunter-hud body:has(#landing.card) .divider::after{ height:1px;background:linear-gradient(90deg,transparent,rgba(255,210,110,.95),transparent) -60% 0/38% 100% no-repeat,var(--hh-edge-2); animation:mx-carrier 2.8s var(--hh-ease-io) 1s infinite;animation-play-state:var(--hud-play); } html.hunter-hud body:has(#landing.card) .divider::after{animation-direction:reverse} @keyframes mx-carrier{0%{background-position:-60% 0,0 0}100%{background-position:160% 0,0 0}} html.hunter-hud body:has(#landing.card) #landing-status{ display:flex;align-items:center;gap:8px;color:var(--hh-yellow-2);font:700 11px/1.4 var(--hh-font-mono);letter-spacing:.12em;text-transform:uppercase; animation:mx-rise .5s var(--hh-ease-out) .32s backwards; } html.hunter-hud body:has(#landing.card) #landing-status::before{content:'>';color:var(--hh-orange)} html.hunter-hud body:has(#landing.card) .err:not(:empty){display:flex;align-items:center;gap:8px;color:var(--mx-live-ink);font-family:var(--hh-font-mono);font-size:12px;letter-spacing:.06em} html.hunter-hud body:has(#landing.card) .err:not(:empty)::before{content:'';flex:0 0 6px;height:6px;transform:rotate(45deg);background:var(--mx-live)} html.hunter-hud body:has(#landing.card) #cable-signin, html.hunter-hud body:has(#landing.card) #landing-actions{animation:mx-rise .5s var(--hh-ease-out) .38s backwards} html.hunter-hud body:has(#landing.card) #landing .btn.hh-primary:hover{transform:translateY(-2px)!important} html.hunter-hud body:has(#landing.card) #landing .btn.hh-btn:not(.hh-primary):hover{transform:translateY(-1px)!important} /* room view: indexed panels with lit edges, a count computed from the roster, a reticle frame on the stage */ html.hunter-hud body:has(#landing.card) .side{counter-reset:mx-panel} html.hunter-hud body:has(#landing.card) .side > .panel{counter-increment:mx-panel;box-shadow:var(--mx-panel-shadow)!important} html.hunter-hud body:has(#landing.card) #room:not([style*="none"]) .side > .panel{animation:mx-rise .5s var(--hh-ease-out) backwards} html.hunter-hud body:has(#landing.card) .side > .panel:nth-child(2){animation-delay:.06s} html.hunter-hud body:has(#landing.card) .side > .panel:nth-child(3){animation-delay:.12s} html.hunter-hud body:has(#landing.card) .side > .panel:nth-child(4){animation-delay:.18s} html.hunter-hud body:has(#landing.card) .panel h3::before{ content:counter(mx-panel,decimal-leading-zero);flex:none;height:auto;padding:3px 5px;box-shadow:none; font:700 9px/1 var(--hh-font-mono);letter-spacing:.06em;color:#1a0900;background:var(--hh-orange);clip-path:var(--mc-cut-xs); } html.hunter-hud body:has(#landing.card) .players{counter-reset:mx-player} html.hunter-hud body:has(#landing.card) .players li{counter-increment:mx-player;padding:6px 8px;background:var(--mx-well);box-shadow:var(--mx-well-shadow);clip-path:var(--mc-cut-xs)} html.hunter-hud body:has(#landing.card) .players::after{content:counter(mx-player,decimal-leading-zero) ' IN ROOM';margin-top:2px;font:700 10px/1 var(--hh-font-mono);letter-spacing:.2em;color:var(--hh-dim)} html.hunter-hud body:has(#landing.card) .roombar{padding:10px 12px;border:1px solid var(--hh-edge);background:linear-gradient(90deg,rgba(255,122,0,.08),transparent 60%),#0a0807;clip-path:var(--mc-cut-sm);box-shadow:var(--mx-panel-shadow)} html.hunter-hud body:has(#landing.card) .codechip .code{font-size:22px;letter-spacing:.2em;font-variant-numeric:tabular-nums} html.hunter-hud body:has(#landing.card) .stage::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--mc-brackets);opacity:.8} html.hunter-hud body:has(#landing.card) .msgs{padding:8px;background:var(--mx-well);box-shadow:var(--mx-well-shadow)} html.hunter-hud body:has(#landing.card) .roomitem{transition:border-color .2s,box-shadow .3s,background-color .2s,transform .3s var(--hh-ease-out)} html.hunter-hud body:has(#landing.card) .roomitem:hover{transform:translateY(-1px)} @media (max-width:520px){ html.hunter-hud body:has(#landing.card) #landing.card{padding:58px 20px 22px;--cut:14px} html.hunter-hud body:has(#landing.card) #landing h2::before{content:'// MATCHMAKING';padding-left:26px;letter-spacing:.22em} html.hunter-hud body:has(#landing.card) #landing.card::after{right:28px} html.hunter-hud body:has(#landing.card) .hdr h1{font-size:17px} } /* ═══════════════════════════════ 5 · network-room.html (multiplayer-game.css, already amber) ═══════════════════════════════ */ html.hunter-hud .mp-game-container.mp-arena-v6{ --mp-line:var(--hh-edge-2);--mp-line-strong:var(--hh-edge-hot);--mp-cyan:var(--hh-orange-2);--mp-blue:var(--hh-yellow); --mp-lime:var(--hh-visor);--mp-amber:var(--hh-yellow-2);--mp-muted:var(--hh-dim);--mp-text:var(--hh-ink);--mp-danger:var(--hh-red); background:transparent; } html.hunter-hud .mp-game-container::before{display:none} html.hunter-hud .mp-arena-v6 > .mp-left-rail{--panel-edge:var(--hh-edge-hot);--cut:14px} html.hunter-hud .mp-arena-v6 .mp-room-brand span{color:var(--hh-orange);font-family:var(--hh-font-mono);letter-spacing:.12em} html.hunter-hud .mp-arena-v6 > .mp-left-rail .mp-room-brand strong{color:var(--hh-yellow);font-family:var(--hh-font-hud);letter-spacing:.14em;text-shadow:0 0 18px rgba(255,196,0,.35)} html.hunter-hud .mp-arena-v6 > .mp-left-rail .mp-game-cover{border-radius:0;border-color:var(--hh-edge-hot);clip-path:var(--mc-cut-sm)} html.hunter-hud .mp-arena-v6 .mp-game-cover img, html.hunter-hud .mp-arena-v6 .mp-game-cover-placeholder{border-radius:0} html.hunter-hud .mp-arena-v6 > .mp-left-rail .mp-game-title{font-family:var(--hh-font-hud);text-transform:uppercase;letter-spacing:.04em;text-shadow:0 0 18px rgba(255,122,0,.25)} html.hunter-hud .mp-arena-v6 .mp-game-system{border-radius:0;border-color:var(--hh-edge-2);clip-path:var(--mc-cut-xs);background:rgba(8,6,4,.9)} html.hunter-hud .mp-arena-v6 .mp-network-card{border-radius:0;border-color:var(--hh-edge-2);background:linear-gradient(150deg,#1b150e,#0c0a08);clip-path:var(--mc-cut-sm);box-shadow:inset 3px 0 var(--hh-orange)} html.hunter-hud .mp-arena-v6 .mp-network-card small{color:var(--hh-orange);font-family:var(--hh-font-mono);letter-spacing:.14em} html.hunter-hud .mp-arena-v6 .mp-network-card strong{color:var(--hh-ink)} html.hunter-hud .mp-arena-v6 .mp-network-card span{color:var(--hh-dim)} html.hunter-hud .mp-arena-v6 .mp-network-status{color:var(--hh-dim)!important;font-family:var(--hh-font-mono);letter-spacing:.06em} html.hunter-hud .mp-arena-v6 .mp-network-status::before{background:var(--hh-visor)!important;box-shadow:0 0 8px rgba(166,255,77,.7);border-radius:0;transform:rotate(45deg);animation:hh-mc-dot 2.2s ease-in-out infinite;animation-play-state:var(--hud-play)} html.hunter-hud .mp-arena-v6 .mp-network-status.is-error{color:#ffb4a5!important} html.hunter-hud .mp-arena-v6 .mp-network-status.is-error::before{background:var(--hh-red)!important;box-shadow:0 0 8px rgba(255,59,36,.7)} html.hunter-hud .mp-arena-v6 .mp-header{border-radius:0;border-color:var(--hh-edge-2);clip-path:var(--mc-cut-sm)} /* the v6 shells still carry the old 14–20px pill radii: square them off (no clip-path on the big shells — they host fixed-position dialogs, and a clipped ancestor would trap them) */ html.hunter-hud .mp-arena-v6 .mp-main-content, html.hunter-hud .mp-arena-v6 .mp-right-rail{border-radius:0} html.hunter-hud .mp-arena-v6 .mp-room-brand, html.hunter-hud .mp-arena-v6 .mp-game-info, html.hunter-hud .mp-arena-v6 .mp-room-info{border-radius:0;clip-path:var(--mc-cut-xs)} html.hunter-hud .mp-arena-v6 .mp-room-brand::before{border-radius:0;clip-path:var(--mc-cut-xs);font-family:var(--hh-font-hud);letter-spacing:.08em} html.hunter-hud .mp-arena-v6 .mp-room-brand strong{border-radius:0;clip-path:var(--mc-cut-xs);font-family:var(--hh-font-mono);letter-spacing:.12em;border-color:var(--hh-edge-hot)!important;background:linear-gradient(150deg,rgba(255,122,0,.10),rgba(10,8,7,.9))!important;box-shadow:inset 2px 0 var(--hh-orange)} html.hunter-hud .mp-arena-v6 .mp-chat-input-row, html.hunter-hud .mp-arena-v6 .mp-voice-member{border-radius:0} html.hunter-hud .mp-arena-v6 .mp-voice-avatar{border-radius:0;clip-path:var(--mc-cut-xs)} html.hunter-hud .mp-arena-v6 .mp-voice-avatar::after{border-radius:0} html.hunter-hud .mp-arena-v6 .mp-voice-member.is-speaking{background:linear-gradient(90deg,rgba(166,255,77,.13),rgba(166,255,77,.03));box-shadow:inset 2px 0 var(--hh-visor)} html.hunter-hud .mp-arena-v6 .mp-mode-badge, html.hunter-hud .mp-arena-v6 .mp-stat, html.hunter-hud .mp-arena-v6 .mp-streaming-indicator{border-radius:0;border-color:var(--hh-edge);clip-path:var(--mc-cut-xs)} html.hunter-hud .mp-arena-v6 .mp-mode-icon{border-radius:0;clip-path:var(--mc-cut-xs);background:linear-gradient(135deg,var(--hh-yellow),var(--hh-orange))} html.hunter-hud .mp-arena-v6 .mp-stat-value{color:var(--hh-yellow)} html.hunter-hud .mp-arena-v6 .mp-streaming-dot{border-radius:0;transform:rotate(45deg)} /* game stage: black glass with orange corner brackets painted over the frame edge (pointer-events:none) */ html.hunter-hud .mp-arena-v6 .mp-native-stage, html.hunter-hud .mp-arena-v6 .mp-game-display{border-radius:0!important;border-color:var(--hh-edge-hot)!important;box-shadow:0 0 0 1px #000,0 18px 40px rgba(0,0,0,.6)!important;position:relative} html.hunter-hud .mp-arena-v6 .mp-native-stage::after, html.hunter-hud .mp-arena-v6 .mp-game-display::after{content:'';position:absolute;inset:0;z-index:9;pointer-events:none;background:var(--mc-brackets);opacity:.85} html.hunter-hud .mp-arena-v6 .mp-native-stage iframe{border-radius:0} html.hunter-hud .mp-native-network .ds-wireless{border-radius:0} html.hunter-hud .mp-native-network .ds-controls button, html.hunter-hud .mp-native-network .ds-retry{border-radius:0;clip-path:var(--mc-cut-xs);border-color:var(--hh-edge-2);background:#21180e;color:var(--hh-ink)} html.hunter-hud .mp-native-network .ds-controls button.is-active{background:#3c260b;border-color:var(--hh-yellow);box-shadow:0 0 12px rgba(255,196,0,.35)} html.hunter-hud .mp-native-network .ds-hostrun-hint{color:var(--hh-visor)} html.hunter-hud .mp-arena-v6 .mp-action-dock{--cut:10px;max-height:none} html.hunter-hud .mp-arena-v6 .mp-action-dock .mp-btn{min-height:66px;padding:9px 7px} html.hunter-hud .mp-arena-v6 .mp-btn span:first-child{border-radius:0;clip-path:var(--mc-cut-xs);color:var(--hh-yellow);background:rgba(255,122,0,.12);font-family:var(--hh-font-mono)} html.hunter-hud .mp-arena-v6 .mp-btn-primary span:first-child{color:#1a0900;background:rgba(255,255,255,.3)} html.hunter-hud .mp-arena-v6 .mp-btn-danger span:first-child{color:#ffb4a5;background:rgba(255,59,36,.14)} html.hunter-hud .mp-arena-v6 .mp-native-game-action, html.hunter-hud .mp-arena-v6 .mp-native-game-action span:not(:first-child){border-color:var(--hh-edge-hot)!important;color:var(--hh-ink)!important} html.hunter-hud .mp-arena-v6 .mp-native-game-action span:first-child{color:var(--hh-yellow)!important;background:rgba(255,122,0,.12)!important} /* Voice Lounge: HUD caps heading + chamfered mono now-strip, like ROOM MEMBERS / ROOM CHAT */ html.hunter-hud .mp-arena-v6 .mp-voice-now{border-radius:0;clip-path:var(--mc-cut-xs);border-color:var(--hh-edge);background:rgba(255,122,0,.04);color:var(--hh-dim);font-family:var(--hh-font-mono);letter-spacing:.08em;text-transform:uppercase} html.hunter-hud .mp-arena-v6 .mp-voice-now.is-active{color:var(--hh-yellow-2);border-color:var(--hh-edge-hot);background:rgba(255,122,0,.08)} html.hunter-hud .mp-arena-v6 .mp-voice-heading strong{font-family:var(--hh-font-hud);text-transform:uppercase;letter-spacing:.2em;font-size:.78rem;color:var(--hh-yellow);text-shadow:0 0 12px rgba(255,196,0,.3)} html.hunter-hud .mp-arena-v6 .mp-voice-heading small{font-family:var(--hh-font-mono);color:var(--hh-orange)} html.hunter-hud .mp-arena-v6 .mp-voice-heading-icon{border-radius:0;clip-path:var(--mc-cut-xs)} html.hunter-hud .mp-arena-v6 .mp-voice-member-name{font-family:var(--hh-font-hud);letter-spacing:.06em;text-transform:uppercase} html.hunter-hud .mp-arena-v6 .mp-game-volume{color:var(--hh-muted);font-family:var(--hh-font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase} html.hunter-hud .mp-arena-v6 .mp-game-volume input[type=range]{accent-color:var(--hh-orange)} /* the FPS · Debug toggle is built by nds-performance.js without the little mono chip the other dock buttons carry */ html.hunter-hud .mp-arena-v6 #native-game-performance{flex-wrap:wrap;gap:6px} html.hunter-hud .mp-arena-v6 #native-game-performance::before{ content:'FPS';display:grid;place-items:center;flex:0 0 auto;min-width:31px;height:21px;padding:0 5px; border-radius:0;clip-path:var(--mc-cut-xs);color:var(--hh-yellow);background:rgba(255,122,0,.12); font:700 9px/1 var(--hh-font-mono);letter-spacing:.14em; } html.hunter-hud .mp-arena-v6 #native-game-mute{border:1px solid var(--hh-edge-2);background:#21180e;color:var(--hh-ink);border-radius:0;clip-path:var(--mc-cut-xs);cursor:pointer;font-family:var(--hh-font-hud)} html.hunter-hud .mp-arena-v6 #native-game-volume{font-family:var(--hh-font-mono)} html.hunter-hud .mp-arena-v6 #native-game-mute:hover{border-color:var(--hh-orange)} html.hunter-hud .mp-arena-v6 .mp-section-title{ color:var(--hh-yellow);font:700 10px/1.2 var(--hh-font-hud);letter-spacing:.32em;text-transform:uppercase; } html.hunter-hud .mp-arena-v6 .mp-section-title::before{width:18px;flex:0 0 18px;height:2px;border-radius:0;background:var(--hh-orange);box-shadow:0 0 10px rgba(255,122,0,.8)} html.hunter-hud .mp-arena-v6 .mp-section-title::after{flex:0 0 5px;width:5px;height:5px;background:var(--hh-yellow);transform:rotate(45deg);opacity:.8} html.hunter-hud .mp-arena-v6 .mp-player-card{border-radius:0;clip-path:var(--mc-cut-xs);border-color:var(--hh-edge);background:#090807} html.hunter-hud .mp-arena-v6 .mp-player-card.is-host{border-color:rgba(255,196,0,.35)} html.hunter-hud .mp-arena-v6 .mp-player-card.is-you{border-color:rgba(255,122,0,.45)} html.hunter-hud .mp-arena-v6 .mp-player-avatar{border-radius:0;clip-path:var(--mc-cut-xs);border-color:var(--hh-edge-hot);background:linear-gradient(135deg,var(--hh-yellow),var(--hh-orange));color:#1a0900} html.hunter-hud .mp-arena-v6 .mp-player-avatar img{border-radius:0} html.hunter-hud .mp-arena-v6 .mp-player-status-dot{border-radius:0;transform:rotate(45deg);border-color:#0a0806;background:var(--hh-visor)} html.hunter-hud .mp-arena-v6 .mp-player-badge{border-radius:0;font-family:var(--hh-font-mono);border-color:var(--hh-edge-2);color:var(--hh-orange);background:rgba(255,122,0,.08)} html.hunter-hud .mp-arena-v6 .mp-badge-host{color:var(--hh-yellow);border-color:rgba(255,196,0,.35);background:rgba(255,196,0,.08)} html.hunter-hud .mp-arena-v6 .mp-player-meta{color:var(--hh-dim)} html.hunter-hud .mp-arena-v6 .mp-chat-messages{border-radius:0;border-color:var(--hh-edge);background:rgba(5,4,3,.72)} html.hunter-hud .mp-arena-v6 .mp-chat-empty{color:var(--hh-muted);font-family:var(--hh-font-mono);font-size:11px;letter-spacing:.06em} html.hunter-hud .mp-arena-v6 .mp-chat-message{border-radius:0;border-color:var(--hh-edge);border-left:2px solid var(--hh-orange);background:#090807} html.hunter-hud .mp-arena-v6 .mp-chat-message.is-own, html.hunter-hud .mp-arena-v6 .mp-chat-message.is-self{border-left-color:var(--hh-visor);background:rgba(166,255,77,.05)} html.hunter-hud .mp-arena-v6 .mp-chat-message-head, html.hunter-hud .mp-arena-v6 .mp-chat-meta{color:var(--hh-orange);font-family:var(--hh-font-mono);font-size:11px} html.hunter-hud .mp-arena-v6 .mp-chat-message-head span{color:var(--hh-muted)} html.hunter-hud .mp-arena-v6 .mp-chat-input{height:42px;padding:0 11px!important} html.hunter-hud .mp-arena-v6 .mp-chat-send{font-size:11px!important;padding:0!important} html.hunter-hud .mp-arena-v6 .mp-chat-status{color:var(--hh-amber)} html.hunter-hud .mp-arena-v6 .mp-network-guide{--cut:10px;color:var(--hh-dim);padding:12px 14px} html.hunter-hud .mp-arena-v6 .mp-network-guide summary{color:var(--hh-yellow);font-family:var(--hh-font-hud);letter-spacing:.1em;text-transform:uppercase;font-size:12px} html.hunter-hud .mp-arena-v6 .mp-network-guide summary::before{content:'// ';color:var(--hh-orange);font-family:var(--hh-font-mono)} html.hunter-hud .mp-arena-v6 .mp-network-guide label{display:block;margin-top:10px;color:var(--hh-muted);font:600 10px/1.4 var(--hh-font-hud);letter-spacing:.2em;text-transform:uppercase} html.hunter-hud .mp-arena-v6 .mp-network-guide strong{color:var(--hh-ink)} html.hunter-hud .mp-arena-v6 .mp-network-limitation{border-left-color:var(--hh-yellow);color:var(--hh-yellow-2);background:rgba(255,196,0,.05)} html.hunter-hud .mp-arena-v6 .mp-native-preview{border-radius:0;background:radial-gradient(circle at 50% 0,rgba(255,122,0,.2),transparent 55%),#0a0806} html.hunter-hud .mp-arena-v6 .mp-native-preview-copy > span{color:var(--hh-orange);font-family:var(--hh-font-mono);letter-spacing:.24em} html.hunter-hud .mp-arena-v6 .mp-native-preview-copy h1{font-family:var(--hh-font-hud);text-transform:uppercase;letter-spacing:.04em;color:var(--hh-ink);text-shadow:0 0 22px rgba(255,122,0,.3)} html.hunter-hud .mp-arena-v6 .mp-native-preview-copy p{color:var(--hh-dim)} html.hunter-hud .mp-arena-v6 .mp-native-console{border-radius:0;clip-path:var(--mc-cut-md);border-color:var(--hh-edge-hot);background:linear-gradient(165deg,#2a1c0e,#0c0a08)} html.hunter-hud .mp-arena-v6 .mp-native-console[data-system="psp"]{border-radius:0} html.hunter-hud .mp-arena-v6 .mp-native-screen{border-radius:0;color:var(--hh-muted);font-family:var(--hh-font-mono);background:radial-gradient(circle at 50% 30%,rgba(255,122,0,.16),transparent 60%),#050403;border-color:#000} html.hunter-hud .mp-arena-v6 .mp-native-mode-pill{border-radius:0;clip-path:var(--mc-cut-xs);border-color:rgba(166,255,77,.3);color:var(--hh-visor)!important;background:rgba(166,255,77,.07);font-family:var(--hh-font-mono);font-size:11px;letter-spacing:.1em} html.hunter-hud #nds-performance-panel{--panel-edge:var(--hh-edge-hot);border-radius:0!important;color:var(--hh-ink-2)!important} html.hunter-hud #nds-performance-panel > strong{color:var(--hh-yellow);font-family:var(--hh-font-hud);letter-spacing:.1em;text-transform:uppercase} html.hunter-hud .mp-share-overlay, html.hunter-hud .mp-control-settings-overlay, html.hunter-hud .mp-voice-settings-overlay, html.hunter-hud body .mpc-overlay{background:rgba(4,4,4,.86)} html.hunter-hud .mp-share-modal, html.hunter-hud .mp-control-settings-modal, html.hunter-hud .mp-voice-settings-modal, html.hunter-hud .mp-cover-dialog, html.hunter-hud .mpc-overlay .mpc-modal{--panel-edge:var(--hh-edge-hot);--cut:16px} html.hunter-hud .mp-share-title, html.hunter-hud .mp-control-settings-title h3, html.hunter-hud .mp-voice-settings-head h3, html.hunter-hud .mpc-overlay .mpc-title-copy h2{font-family:var(--hh-font-hud);text-transform:uppercase;letter-spacing:.06em;color:var(--hh-ink);text-shadow:0 0 22px rgba(255,122,0,.25)} html.hunter-hud .mp-share-qr{border-radius:0;border-color:var(--hh-edge-hot);color:var(--hh-orange);background:rgba(255,122,0,.05)} html.hunter-hud .mp-binding-item, html.hunter-hud .mp-binding-row, html.hunter-hud .mp-controller-status, html.hunter-hud .mp-mapping-info-bar, html.hunter-hud .mp-voice-field, html.hunter-hud .mp-voice-toggle, html.hunter-hud .mpc-overlay .mpc-row, html.hunter-hud .mpc-overlay :is(.mpc-status,.mpc-controller-layout,.mpc-controller-summary,.mpc-group,.mpc-audio-card,.mpc-audio-row){border-radius:0;clip-path:var(--mc-cut-xs);border-color:var(--hh-edge)} html.hunter-hud .mp-controller-status-dot{border-radius:0;transform:rotate(45deg)} html.hunter-hud .mp-notification{border-radius:0;clip-path:var(--mc-cut-sm);border-color:var(--hh-edge-hot);background:linear-gradient(165deg,#21180e,#100d0a);box-shadow:0 18px 44px rgba(0,0,0,.6),inset 3px 0 var(--hh-orange)} html.hunter-hud .mpc-overlay .mpc-tab{border-radius:0;clip-path:var(--mc-cut-xs);font-family:var(--hh-font-hud);letter-spacing:.1em;text-transform:uppercase} html.hunter-hud .mpc-overlay .mpc-tab.active{color:var(--hh-yellow);box-shadow:inset 0 -2px var(--hh-yellow)} html.hunter-hud .mpc-overlay .mpc-icon, html.hunter-hud .mpc-overlay .mpc-role-badge, html.hunter-hud .mpc-overlay .mpc-close, html.hunter-hud .mpc-overlay .mpc-row .mpc-row-value, html.hunter-hud .mpc-overlay .mpc-audio-icon, html.hunter-hud .mpc-overlay .mpc-controller-role{border-radius:0;clip-path:var(--mc-cut-xs)} html.hunter-hud .mp-arena-v6 :is(button,input,select,summary):focus-visible{outline-color:var(--hh-yellow)} /* ── 5b · live ops panel ── Signature: the room is a live operations console. The room bar is the heavy plate; the stage is a viewfinder (corner brackets plus mid-edge ticks, all outside the picture); dock keys light their mono chip on hover; the rail panels are indexed 01-03 and the members panel reads its own roster (connected / slots). The page is calm while a game runs, so no new ambient loop is added here: the status diamonds are the only motion. */ html.hunter-hud .mp-arena-v6 > .mp-left-rail{animation:mx-drop .5s var(--hh-ease-out) backwards} html.hunter-hud .mp-arena-v6 > .mp-left-rail .mp-game-title{font-weight:700;font-stretch:var(--mx-stretch);font-size:21px;letter-spacing:.03em} html.hunter-hud .mp-arena-v6 .mp-network-card{position:relative;box-shadow:inset 3px 0 var(--hh-orange),inset 0 1px rgba(255,210,130,.16),inset 0 -12px 20px -16px rgba(0,0,0,.8)} html.hunter-hud .mp-arena-v6 .mp-network-card strong{font-weight:700;font-stretch:var(--mx-stretch);letter-spacing:.01em} html.hunter-hud .mp-arena-v6 .mp-network-status{font-variant-numeric:tabular-nums} html.hunter-hud .mp-arena-v6 .mp-native-stage{animation:mx-fade .7s ease-out .12s backwards} html.hunter-hud .mp-arena-v6 .mp-native-stage::after, html.hunter-hud .mp-arena-v6 .mp-game-display::after{ background:var(--mc-brackets), linear-gradient(var(--hh-orange),var(--hh-orange)) top center/30px 2px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom center/30px 2px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) left center/2px 30px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) right center/2px 30px no-repeat; } html.hunter-hud .mp-arena-v6 .mp-action-dock{box-shadow:var(--mx-panel-shadow)!important;animation:mx-rise .55s var(--hh-ease-out) .2s backwards} /* dock keys: border light + inner glow + 2px lift, and the mono chip lights up */ html.hunter-hud .mp-arena-v6 .mp-action-dock .mp-btn.hh-btn{transition:color .18s,border-color .18s,box-shadow .25s,transform .25s var(--hh-ease-out)!important} html.hunter-hud .mp-arena-v6 .mp-action-dock .mp-btn.hh-btn:hover:not(:disabled){transform:translateY(-2px)!important} html.hunter-hud .mp-arena-v6 .mp-action-dock .mp-btn.hh-btn:active:not(:disabled){transform:translateY(1px)!important} html.hunter-hud .mp-arena-v6 .mp-btn span:first-child{transition:color .18s,background-color .18s,box-shadow .25s} html.hunter-hud .mp-arena-v6 .mp-btn:not(.mp-btn-primary):not(.mp-btn-danger):hover:not(:disabled) span:first-child{color:#1a0900;background:var(--hh-yellow);box-shadow:0 0 12px rgba(255,196,0,.45)} html.hunter-hud .mp-arena-v6 .mp-btn-danger:hover:not(:disabled) span:first-child{color:#fff;background:var(--hh-red)} html.hunter-hud .mp-arena-v6 .mp-action-dock .mp-btn:focus-visible{outline:2px solid var(--hh-yellow)!important;outline-offset:-3px!important} /* game volume label: readable dim, not muted */ html.hunter-hud .mp-arena-v6 .mp-game-volume{color:var(--hh-dim);font-size:10.5px} /* right rail: indexed panels that enter as a sequence */ html.hunter-hud .mp-arena-v6 > .mp-right-rail{counter-reset:mx-rail} html.hunter-hud .mp-arena-v6 :is(.mp-players-section,.mp-voice-channel,.mp-room-chat){counter-increment:mx-rail;position:relative;box-shadow:var(--mx-panel-shadow)!important;animation:mx-rise .5s var(--hh-ease-out) .26s backwards} html.hunter-hud .mp-arena-v6 .mp-voice-channel{animation-delay:.32s} html.hunter-hud .mp-arena-v6 .mp-room-chat{animation-delay:.38s} html.hunter-hud .mp-arena-v6 :is(.mp-players-section,.mp-room-chat) .mp-section-title > span::before, html.hunter-hud .mp-arena-v6 .mp-voice-heading strong::before{ content:counter(mx-rail,decimal-leading-zero);display:inline-block;margin-right:9px;padding:3px 5px;vertical-align:1px; font:700 9px/1 var(--hh-font-mono);letter-spacing:.06em;color:#1a0900;background:var(--hh-orange);clip-path:var(--mc-cut-xs);text-shadow:none; } /* members readout, computed from the roster: connected cards / all slots */ html.hunter-hud .mp-arena-v6 #mp-players-list{counter-reset:mx-linked mx-slots} html.hunter-hud .mp-arena-v6 #mp-players-list .mp-player-card{counter-increment:mx-slots} html.hunter-hud .mp-arena-v6 #mp-players-list .mp-player-card:not(.mp-empty-slot){counter-increment:mx-slots mx-linked} html.hunter-hud .mp-arena-v6 #mp-players-list::after{ content:counter(mx-linked,decimal-leading-zero) ' / ' counter(mx-slots,decimal-leading-zero) ' LINKED'; position:static;display:table;margin:10px 0 0 auto;padding:4px 8px 4px 20px; font:700 10px/1 var(--hh-font-mono);letter-spacing:.14em;color:var(--mx-ok);font-variant-numeric:tabular-nums; background:var(--mx-diamond-ok) 8px 50%/6px 6px no-repeat,var(--mx-ok-bg);border:1px solid var(--mx-ok-edge);clip-path:var(--mc-cut-xs); } html.hunter-hud .mp-arena-v6 #mp-players-list:empty::after{content:none} html.hunter-hud .mp-arena-v6 .mp-player-card{transition:border-color .2s,box-shadow .25s,transform .25s var(--hh-ease-out)} html.hunter-hud .mp-arena-v6 .mp-player-card:not(.mp-empty-slot):hover{border-color:var(--hh-edge-hot);transform:translateY(-1px);box-shadow:inset 0 0 22px rgba(255,122,0,.1)} html.hunter-hud .mp-arena-v6 .mp-empty-slot{border-style:dashed;background:repeating-linear-gradient(135deg,rgba(255,122,0,.035) 0 6px,transparent 6px 12px),#080706} html.hunter-hud .mp-arena-v6 .mp-player-name{font-weight:700;font-stretch:var(--mx-stretch);letter-spacing:.02em} /* voice: the round mint dot becomes a visor diamond, and turns live red while someone speaks */ html.hunter-hud .mp-arena-v6 .mp-voice-live-dot{border-radius:0;transform:rotate(45deg);background:var(--mx-ok);box-shadow:0 0 10px rgba(166,255,77,.7)} html.hunter-hud .mp-arena-v6 .mp-voice-channel.is-speaking .mp-voice-live-dot{background:var(--mx-live);box-shadow:0 0 12px rgba(255,59,36,.85)} html.hunter-hud .mp-arena-v6 .mp-voice-hint.is-error{color:var(--mx-live-ink)} html.hunter-hud .mp-arena-v6 .mp-chat-messages{background:var(--mx-well);box-shadow:var(--mx-well-shadow)} @media (max-width:1000px){ html.hunter-hud .mp-game-container.mp-arena-v6{background:transparent} html.hunter-hud .mp-arena-v6 .mp-action-dock .mp-btn{min-height:56px} } /* ═══════════════════════════════ 6 · cable-club.html (GBmulator + Cable Club HUD) ═══════════════════════════════ */ /* The page script rewrites the class (theme-dmg/cgb/gba), so hunter-hud.js never runs here: no atmosphere layer, no classMap. This block therefore carries its own tokens, ground and plate/button/input material. */ html:is(.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"]{ color-scheme:dark; --hh-void:#040404;--hh-carbon:#0a0908;--hh-panel:#100d0a;--hh-panel-2:#17120c;--hh-panel-3:#21180e; --hh-edge:#33240f;--hh-edge-2:#4d3514;--hh-edge-hot:#8a5212; --hh-orange:#ff7a00;--hh-orange-2:#ff9820;--hh-ember:#ff4d00;--hh-red:#ff3b24; --hh-yellow:#ffc400;--hh-yellow-2:#ffe27a;--hh-amber:#ffab1f; --hh-ink:#fff3df;--hh-ink-2:#f0dcc0;--hh-dim:#c2ab8b;--hh-muted:#8d785c;--hh-faint:#5e4d38; --hh-visor:#a6ff4d;--hh-stroke:rgba(255,122,0,.18);--hh-stroke-2:rgba(255,122,0,.34); --hh-font-hud:'Bahnschrift','Rajdhani','Segoe UI',sans-serif; --hh-font-text:'Segoe UI','Inter','Rajdhani',system-ui,sans-serif; --hh-font-mono:Consolas,'Share Tech Mono','Cascadia Mono',monospace; --hh-ease-out:cubic-bezier(.16,1,.3,1);--hh-ease-io:cubic-bezier(.65,0,.35,1);--hud-play:running; --hh-hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='26' viewBox='0 0 45 26'%3E%3Cpath d='M0 13 7.5 0h15L30 13l-7.5 13h-15ZM30 13h15' fill='none' stroke='%23ff8c1a' stroke-opacity='.10'/%3E%3C/svg%3E"); --hh-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6Z' fill='%23ff9820'/%3E%3C/svg%3E"); background:var(--hh-void); scrollbar-color:#61400f #070605; } html:is(.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body{background:transparent!important;color:var(--hh-ink)} html:is(.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] :focus-visible{outline:2px solid var(--hh-yellow);outline-offset:3px} html:is(.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] ::selection{background:rgba(255,122,0,.45);color:#fff} /* ground: ember radial + hex field (replaces the cyan/violet blobs and the blue grid of body.cc::before/::after) */ html:is(.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body::before{ content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;filter:none; background: radial-gradient(ellipse 55% 42% at 88% -8%,rgba(255,122,0,.17),transparent 70%), radial-gradient(ellipse 45% 38% at 12% 108%,rgba(255,196,0,.07),transparent 70%), linear-gradient(180deg,#080706,#030303); } html:is(.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body::after{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.9; background:var(--hh-hex) 0 0/45px 26px; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 20%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 70% 20%,#000 10%,transparent 75%); } /* material (same values as the core hh-btn / hh-primary / hh-input / hh-plate, written out because classMap cannot run here) */ html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud button:not(.cc-gm-item):not(.cc-gamepick-btn), html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings button:not(.ccpad-row):not(.auth-pass-toggle){ font-family:var(--hh-font-hud);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--hh-ink-2); background:linear-gradient(180deg,#1c150c,#0f0b07);border:1px solid var(--hh-edge-2);border-radius:0; clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); box-shadow:inset 0 1px rgba(255,190,100,.07);text-shadow:none;filter:none; transition:color .18s,background-color .18s,border-color .18s,box-shadow .22s,transform .12s; } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud button:not(.cc-gm-item):not(.cc-gamepick-btn):hover:not(:disabled), html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings button:not(.ccpad-row):not(.auth-pass-toggle):hover{ color:#fff;border-color:var(--hh-orange);background:linear-gradient(180deg,#2c1d0c,#170f07);filter:none;transform:none; box-shadow:inset 0 0 0 1px rgba(255,122,0,.25),inset 0 -14px 22px -14px rgba(255,122,0,.55); } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud #cc-connect{ position:relative;overflow:hidden;color:#170900;font-weight:700; background:linear-gradient(180deg,var(--hh-yellow) 0%,var(--hh-orange-2) 55%,var(--hh-orange) 100%); border:1px solid #ffd24d;box-shadow:inset 0 1px rgba(255,255,255,.6),inset 0 -3px rgba(130,45,0,.45); } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud #cc-connect::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:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud #cc-connect:hover:not(:disabled){ color:#000;border-color:#fff0b3;background:linear-gradient(180deg,#ffe066 0%,var(--hh-yellow) 45%,var(--hh-orange-2) 100%); 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); } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud #cc-connect:hover:not(:disabled)::after{transform:translateX(120%)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud select, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud input:not([type=file]), html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings select, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings input:not([type=range]):not([type=file]){ font-family:var(--hh-font-hud);color:var(--hh-ink); background-color:#0c0a07;background-image:linear-gradient(180deg,#0a0806,#130f0a); border:1px solid var(--hh-edge-2);border-radius:0;box-shadow:inset 0 2px 8px rgba(0,0,0,.65);transition:border-color .18s,box-shadow .2s; } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud select:focus, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud input:focus, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings select:focus, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings input:not([type=range]):focus{ border-color:var(--hh-orange);box-shadow:inset 0 2px 8px rgba(0,0,0,.65),0 0 0 1px rgba(255,122,0,.35),0 0 18px rgba(255,122,0,.2);outline:none; } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud select, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings select{ -webkit-appearance:none;appearance:none;padding-right:30px; background-image:var(--hh-chevron),linear-gradient(180deg,#0a0806,#130f0a);background-repeat:no-repeat,no-repeat;background-position:right 11px center,0 0;background-size:10px 6px,100% 100%; } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .cc-settings-dialog{ border:1px solid var(--hh-edge-hot);border-radius:0; clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); background: linear-gradient(to bottom right,transparent calc(50% - .9px),var(--hh-edge-hot) calc(50% - .9px) calc(50% + .9px),transparent calc(50% + .9px)) top left/16px 16px no-repeat border-box, linear-gradient(to bottom right,transparent calc(50% - .9px),var(--hh-edge-hot) calc(50% - .9px) calc(50% + .9px),transparent calc(50% + .9px)) bottom right/16px 16px no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) top right/20px 3px no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) top right/3px 20px no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom left/20px 3px no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom left/3px 20px no-repeat border-box, linear-gradient(165deg,#19120a,#0a0807 72%); box-shadow:0 22px 70px rgba(0,0,0,.6),inset 0 1px rgba(255,180,90,.06);color:var(--hh-ink); } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body:has(#gb-screen-border){font-family:var(--hh-font-text)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body:has(#gb-screen-border) #emscripten-status{color:var(--hh-dim);font:700 12px/1.6 var(--hh-font-mono);letter-spacing:.16em;text-transform:uppercase;z-index:5} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body:has(#gb-screen-border) #status::before{content:'// ';color:var(--hh-orange)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body:has(#gb-screen-border) .spinner{ width:44px;height:44px;border:4px solid rgba(255,122,0,.18);border-top-color:var(--hh-orange);background-color:transparent; box-shadow:0 0 18px rgba(255,122,0,.25);animation-play-state:var(--hud-play); } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body:has(#gb-screen-border) #progress{accent-color:var(--hh-orange)} /* Signature (signed-out / loading, before cable-club-ui.js adds body.cc): a link-standby readout. The loader becomes a chamfered console with a header rail, a slowly turning reticle (the page's one ambient loop), the page's own status line as the readout, the emulator's real link modes (GB · GBC · GBA, from the mode selector) and a hazard foot. body.cc keeps the in-game layout untouched. */ html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body:has(#gb-screen-border):not(.cc) #emscripten-status{ box-sizing:border-box;width:min(430px,calc(100vw - 32px));padding:62px 26px 30px;text-align:center; border:1px solid var(--hh-edge-hot); clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); background: linear-gradient(to bottom right,transparent calc(50% - .9px),var(--hh-edge-hot) calc(50% - .9px) calc(50% + .9px),transparent calc(50% + .9px)) top left/18px 18px no-repeat border-box, linear-gradient(to bottom right,transparent calc(50% - .9px),var(--hh-edge-hot) calc(50% - .9px) calc(50% + .9px),transparent calc(50% + .9px)) bottom right/18px 18px no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) top right/20px 3px no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) top right/3px 20px no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom left/20px 3px no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom left/3px 20px no-repeat border-box, radial-gradient(circle,#ffcf7a 0 .8px,var(--mx-rivet) 1.2px 2px,rgba(0,0,0,.85) 2.5px,transparent 3.2px) left 10px top 17px/8px 8px no-repeat, radial-gradient(circle,#ffcf7a 0 .8px,var(--mx-rivet) 1.2px 2px,rgba(0,0,0,.85) 2.5px,transparent 3.2px) right 12px top 17px/8px 8px no-repeat, linear-gradient(90deg,transparent 17px,rgba(255,214,130,.75) 32px,rgba(255,122,0,.35) 38%,transparent 72%) left top/100% 1px no-repeat border-box, radial-gradient(ellipse 70% 55% at 50% 40%,rgba(255,122,0,.1),transparent 70%), linear-gradient(165deg,#1d140b,#080605 72%); box-shadow:inset 0 1px rgba(255,205,130,.12),inset 0 -2px rgba(0,0,0,.75),inset 0 0 0 1px rgba(0,0,0,.4); animation:mx-standby-in .6s var(--hh-ease-out) backwards; } @keyframes mx-standby-in{0%{opacity:0;transform:translate(-50%,-46%)}100%{opacity:1;transform:translate(-50%,-50%)}} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body:has(#gb-screen-border):not(.cc) #emscripten-status::before{ content:'// CABLE LINK · STANDBY';position:absolute;left:0;right:0;top:0;height:42px;padding:0 0 0 32px;box-sizing:border-box; display:flex;align-items:center;font:700 10px/1 var(--hh-font-mono);letter-spacing:.28em;color:var(--hh-yellow);text-align:left; background:linear-gradient(90deg,rgba(255,122,0,.16),rgba(255,122,0,.04) 55%,transparent),linear-gradient(var(--hh-edge-2),var(--hh-edge-2)) left bottom/100% 1px no-repeat; } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body:has(#gb-screen-border):not(.cc) #emscripten-status::after{ content:'';position:absolute;left:14%;right:14%;bottom:12px;height:6px;background:var(--mx-hazard);opacity:.45; -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body:has(#gb-screen-border):not(.cc) #spinner{margin:0 auto 18px} /* reticle: a slow ring with a bright leading arc and a fixed crosshair feel (the ring turns, the ticks stay square to it) */ html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body:has(#gb-screen-border):not(.cc) .spinner{ width:74px;height:74px;box-sizing:border-box;border:2px solid rgba(255,122,0,.18);border-top-color:var(--hh-yellow);border-right-color:rgba(255,122,0,.6); background: linear-gradient(rgba(255,196,0,.7),rgba(255,196,0,.7)) center top 8px/1px 10px no-repeat, linear-gradient(rgba(255,196,0,.35),rgba(255,196,0,.35)) center bottom 8px/1px 10px no-repeat, linear-gradient(90deg,rgba(255,196,0,.35),rgba(255,196,0,.35)) left 8px center/10px 1px no-repeat, linear-gradient(90deg,rgba(255,196,0,.35),rgba(255,196,0,.35)) right 8px center/10px 1px no-repeat, radial-gradient(circle,rgba(255,196,0,.9) 0 2px,rgba(255,122,0,.16) 3px 14px,transparent 15px); box-shadow:0 0 22px rgba(255,122,0,.22),inset 0 0 18px rgba(255,122,0,.12); animation-duration:2.6s;animation-timing-function:linear; } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body:has(#gb-screen-border):not(.cc) #status{color:var(--hh-ink-2);max-width:32ch;margin:0 auto;line-height:1.7;text-wrap:balance} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body:has(#gb-screen-border):not(.cc) div.emscripten:has(> #progress)::after{ content:'LINK MODES GB · GBC · GBA';display:block;margin-top:6px;white-space:pre; font:700 10px/1.2 var(--hh-font-mono);letter-spacing:.22em;color:var(--hh-dim); } /* top HUD bar (#cc-hud is rendered by cable-club-ui.js; no clip-path here so the game dropdown can overflow it) */ html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud{ --nx-cyan:var(--hh-orange);--nx-violet:var(--hh-yellow);--nx-magenta:var(--hh-ember);--nx-lime:var(--hh-visor);--nx-amber:var(--hh-amber); --nx-txt:var(--hh-ink);--nx-txt2:var(--hh-dim);--nx-txt3:var(--hh-muted);--nx-stroke:var(--hh-edge-2);--nx-stroke2:var(--hh-edge-hot); --nx-disp:var(--hh-font-hud);--nx-ui:var(--hh-font-text); border-radius:0;border-color:var(--hh-edge-2); background:linear-gradient(180deg,rgba(15,11,8,.96),rgba(8,6,5,.94)); box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud::before{ left:0;right:0;border-radius:0;height:2px;opacity:1; background:linear-gradient(90deg,var(--hh-yellow) 0 56px,var(--hh-orange) 56px 130px,rgba(255,122,0,.25) 130px 45%,transparent 80%); box-shadow:0 0 12px rgba(255,122,0,.45); } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-emblem{border-radius:0;clip-path:var(--mc-cut-sm);background:linear-gradient(135deg,rgba(255,196,0,.22),rgba(255,122,0,.1));border-color:var(--hh-edge-hot);box-shadow:0 4px 14px rgba(255,122,0,.2)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-emblem svg{filter:drop-shadow(0 0 5px rgba(255,122,0,.6));animation-play-state:var(--hud-play)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-emblem svg stop:nth-child(1){stop-color:var(--hh-yellow)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-emblem svg stop:nth-child(2){stop-color:var(--hh-orange)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-emblem svg stop:nth-child(3){stop-color:var(--hh-ember)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-kicker{color:var(--hh-orange);font-family:var(--hh-font-mono);opacity:1;letter-spacing:.26em} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-brand strong{background:none;color:var(--hh-ink);animation:none;font-family:var(--hh-font-hud);font-weight:700;letter-spacing:.08em;text-shadow:0 0 18px rgba(255,122,0,.35)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-field, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-gamefield{color:var(--hh-muted);font-family:var(--hh-font-hud);font-weight:600;letter-spacing:.2em} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-gamepick-btn{border-radius:0;clip-path:var(--mc-cut-xs);background:#0c0a07;border-color:var(--hh-edge-2);color:var(--hh-ink);font-family:var(--hh-font-hud);font-weight:600} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-gamepick.open .cc-gamepick-btn, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-gamepick-btn:hover{border-color:var(--hh-orange);box-shadow:0 0 0 1px rgba(255,122,0,.35),0 0 18px rgba(255,122,0,.2)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-gp-cover, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-gm-cover{border-radius:0} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-gp-cv{color:var(--hh-muted)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-gamemenu{border-radius:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);background:linear-gradient(180deg,#17120c,#0c0a07);border-color:var(--hh-edge-hot);box-shadow:0 18px 44px rgba(0,0,0,.6);backdrop-filter:none;-webkit-backdrop-filter:none} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-gamemenu::-webkit-scrollbar-thumb{background:#61400f;border-radius:0} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-gm-item{border-radius:0;color:var(--hh-ink);font-family:var(--hh-font-hud);font-weight:600} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-gm-item:hover{background:rgba(255,122,0,.12)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-gm-item.on{background:rgba(255,196,0,.16);box-shadow:inset 2px 0 var(--hh-yellow)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-gm-sys{background:var(--hh-orange);color:#1a0900;border-radius:0;font-family:var(--hh-font-mono)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud button{height:38px;padding:0 12px;font-size:11px!important} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud #cc-load{border-color:var(--hh-orange)!important;color:var(--hh-yellow)!important} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud #cc-connect{animation:none} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud #cc-connect:not(:disabled)::before{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(70% 120% at 50% 100%,rgba(255,255,255,.5),transparent 70%); animation:hh-mc-glow 2.4s ease-in-out infinite;animation-play-state:var(--hud-play); } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud button:disabled{opacity:.42;filter:grayscale(.45)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud button.has-save, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud #cc-sound.cc-sound-on{color:var(--hh-visor)!important;border-color:rgba(166,255,77,.45)!important;background:linear-gradient(180deg,#172410,#0d130a)!important} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-savebar button{padding:0 6px} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-status{border-radius:0;clip-path:var(--mc-cut-xs);background:rgba(8,6,4,.86);border-color:var(--hh-edge-2);color:var(--hh-dim);font:700 11px var(--hh-font-mono);letter-spacing:.06em} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-dot{border-radius:0;transform:rotate(45deg);width:8px;height:8px;background:var(--hh-faint)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud.is-idle .cc-dot, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud.is-linked .cc-dot{background:var(--hh-visor);box-shadow:0 0 10px rgba(166,255,77,.75)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud.is-waiting .cc-dot{background:var(--hh-amber);animation:hh-mc-dot 1s infinite;animation-play-state:var(--hud-play)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud.is-busy .cc-dot{background:var(--hh-orange);animation:hh-mc-dot .8s infinite;animation-play-state:var(--hud-play)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud.is-error .cc-dot{background:var(--hh-red);box-shadow:0 0 10px rgba(255,59,36,.75)} /* settings modal */ html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings{font-family:var(--hh-font-text)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .cc-settings-backdrop{background:rgba(4,4,4,.72);backdrop-filter:blur(4px)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .cc-settings-dialog{--panel-edge:var(--hh-edge-hot);--cut:16px;color:var(--hh-ink)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings h2{font-family:var(--hh-font-hud);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--hh-ink);text-shadow:0 0 22px rgba(255,122,0,.25)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings h2::before{content:'// CABLE LINK';display:block;margin-bottom:6px;font:700 10px/1.2 var(--hh-font-mono);letter-spacing:.3em;color:var(--hh-yellow);text-shadow:none} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings p{color:var(--hh-dim);font-family:var(--hh-font-text);font-weight:400} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings h3{display:flex;align-items:center;gap:10px;color:var(--hh-yellow);font:700 10px/1.2 var(--hh-font-hud);letter-spacing:.3em} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings h3::before{content:'';flex:0 0 18px;height:2px;background:var(--hh-orange);box-shadow:0 0 10px rgba(255,122,0,.8)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings h3::after{content:'';flex:0 0 5px;height:5px;background:var(--hh-yellow);transform:rotate(45deg);opacity:.8} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .cc-icon-btn{width:34px;height:34px;padding:0;font-size:11px!important} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .cc-setting-field{color:var(--hh-muted);font-family:var(--hh-font-hud);letter-spacing:.2em} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings input[type="range"]{accent-color:var(--hh-orange);background:none!important;border:0!important;box-shadow:none!important} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings output{color:var(--hh-yellow);font-family:var(--hh-font-mono)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .cc-keymap span{border-radius:0;clip-path:var(--mc-cut-xs);background:#0b0907;border-color:var(--hh-edge);color:var(--hh-ink-2);font-family:var(--hh-font-mono);font-size:11px} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .cc-action-row button{height:38px;font-size:11px!important} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .ccpad-panel-title{color:var(--hh-ink-2);font-family:var(--hh-font-hud);letter-spacing:.14em} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .ccpad-panel-tip{color:var(--hh-muted)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .ccpad-panel-tip b{color:var(--hh-orange)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .ccpad-row{border-radius:0;clip-path:var(--mc-cut-xs);background:#0b0907;border-color:var(--hh-edge);color:var(--hh-ink-2);font-family:var(--hh-font-hud)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .ccpad-row:hover{border-color:var(--hh-orange);background:#120d08} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .ccpad-glyph{color:var(--hh-orange)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .ccpad-key{border-radius:0;background:#050403;border-color:var(--hh-edge);color:var(--hh-yellow);font-family:var(--hh-font-mono)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .ccpad-key.is-default{color:var(--hh-muted)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .ccpad-gp{border-radius:0;background:rgba(255,122,0,.12);border-color:var(--hh-edge-2);color:var(--hh-orange);font-family:var(--hh-font-mono)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .ccpad-clear{border-radius:0;color:var(--hh-muted);border-color:var(--hh-edge)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .ccpad-clear:hover{color:var(--hh-red);border-color:var(--hh-red)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .ccpad-row.is-listening{border-color:var(--hh-yellow);background:linear-gradient(135deg,rgba(255,196,0,.22),rgba(255,122,0,.12))} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] #cc-settings .ccpad-row.is-listening .ccpad-key{background:var(--hh-yellow);color:#1a0900;border-color:#fff} /* screen bezel + touch pad */ html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body #gb-screen-border{ border-radius:0!important;border-color:var(--hh-edge-hot); background:linear-gradient(145deg,#1b150e,#0a0807)!important; box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,122,0,.16); } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body #gb-screen-border::before{background:radial-gradient(60% 60% at 50% 45%,rgba(255,122,0,.22),rgba(255,196,0,.08) 55%,transparent 75%)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body #gb-screen-border::after{content:'';position:absolute;inset:0;pointer-events:none;background:var(--mc-brackets);opacity:.9} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body canvas.emscripten{border-radius:0;background:#050403} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body #gb-controls{ border-radius:0;border-color:var(--hh-edge-2); background:linear-gradient(180deg,rgba(20,14,8,.86),rgba(8,6,4,.72)); clip-path:var(--mc-cut-md);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--hh-dim); } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body .gb-direction-button, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body #gb-center, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body .gb-round-button, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body .gb-rectangle-button{background:#17120c!important;border-color:var(--hh-edge-2)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body .gb-direction-button, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body #gb-center{background:#120e09!important} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body .gb-direction-button-circle{background:rgba(255,122,0,.2)!important} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body .gb-round-button{color:var(--hh-ink-2)!important;background:linear-gradient(145deg,#2a1c0c,#140e08)!important} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body .gb-button-label{color:var(--hh-muted)!important;font:700 11px var(--hh-font-mono);letter-spacing:.14em;text-transform:uppercase} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body .gb-round-button.cc-pressed, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body .gb-rectangle-button.cc-pressed{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 14px rgba(255,122,0,.6),0 0 0 1px rgba(255,196,0,.55)!important} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body .gb-direction-button.cc-pressed{box-shadow:inset 0 0 14px rgba(0,0,0,.5),0 0 14px rgba(255,122,0,.55)!important} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body .gb-direction-button.cc-pressed .gb-direction-button-circle{background:rgba(255,196,0,.6)!important} /* ═══════════════════════════════ 7 · account gate (mobile-auth-gate.js, shown on cable-club / pokemon-lobby) ═══════════════════════════════ */ html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate{ --og-cyan:var(--hh-orange);--og-magenta:var(--hh-ember);--og-violet:var(--hh-yellow);--og-lime:var(--hh-visor); --og-text:var(--hh-ink);--og-muted:var(--hh-dim);font-family:var(--hh-font-text); } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .back{ background:linear-gradient(180deg,rgba(4,4,4,.84),rgba(4,4,4,.92)),repeating-linear-gradient(90deg,rgba(255,122,0,.05) 0 1px,transparent 1px 72px); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .authcard{--panel-edge:var(--hh-edge-hot);--cut:18px} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .authcard:before{background:linear-gradient(115deg,transparent 36%,rgba(255,220,150,.07) 48%,transparent 60%);background-size:240% 100%;animation-play-state:var(--hud-play)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .authcard:after{border-radius:0;box-shadow:inset 0 1px 0 rgba(255,190,100,.1),inset 0 -1px 0 rgba(255,122,0,.14)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-visual{ background:linear-gradient(145deg,rgba(255,122,0,.15),transparent 42%),linear-gradient(315deg,rgba(255,196,0,.08),transparent 48%),rgba(8,6,4,.5); border-right-color:var(--hh-edge); } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-visual:before{background:var(--hh-hex) 0 0/45px 26px;opacity:1;animation-play-state:var(--hud-play)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .emblem.xs{border-radius:0;clip-path:var(--mc-cut-sm);background:linear-gradient(135deg,var(--hh-yellow),var(--hh-orange));border-color:var(--hh-yellow-2);box-shadow:0 0 22px rgba(255,122,0,.4)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .emblem.xs:before{color:#1a0900;text-shadow:none;font-family:var(--hh-font-hud)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-brand b{font-family:var(--hh-font-hud);letter-spacing:.22em;color:var(--hh-ink)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-brand span:not(.emblem){color:var(--hh-orange);font-family:var(--hh-font-mono)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-core{ color:var(--hh-yellow);font-family:var(--hh-font-hud);border-color:var(--hh-edge-hot); background:radial-gradient(circle,rgba(255,122,0,.16),rgba(5,4,3,.9) 72%); box-shadow:0 18px 46px rgba(0,0,0,.5),inset 0 0 38px rgba(255,122,0,.16); } html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-core:before{border-color:rgba(255,122,0,.3);border-top-color:var(--hh-yellow);animation-play-state:var(--hud-play)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-core:after{border-color:rgba(255,255,255,.1);border-bottom-color:var(--hh-visor);animation-play-state:var(--hud-play)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-core i{background:repeating-linear-gradient(0deg,rgba(255,122,0,.16) 0 2px,transparent 2px 7px)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-core span{text-shadow:0 0 24px rgba(255,122,0,.6)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-benefits span{color:var(--hh-ink-2);font-family:var(--hh-font-hud)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-benefits span:before{border-radius:0;transform:rotate(45deg);width:7px;height:7px;background:var(--hh-visor);box-shadow:0 0 10px rgba(166,255,77,.7)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-kicker{display:flex;align-items:center;gap:10px;color:var(--hh-yellow);font-family:var(--hh-font-mono)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-kicker:before{content:'';width:18px;height:2px;background:var(--hh-orange);box-shadow:0 0 10px rgba(255,122,0,.8)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate h3{font-family:var(--hh-font-hud);font-weight:700;color:var(--hh-ink);text-shadow:0 0 22px rgba(255,122,0,.3)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate h3 em{background:none;color:var(--hh-yellow);-webkit-text-fill-color:var(--hh-yellow);text-shadow:0 0 22px rgba(255,196,0,.45)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .sub2{color:var(--hh-dim)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-tabs{border-radius:0;clip-path:var(--mc-cut-xs);background:rgba(5,4,3,.85);border-color:var(--hh-edge-2)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-tabs:before{border-radius:0;background:linear-gradient(135deg,rgba(255,122,0,.28),rgba(255,196,0,.14));border-color:var(--hh-edge-hot);box-shadow:inset 0 -2px var(--hh-yellow)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-tabs button{border-radius:0;font-family:var(--hh-font-hud);letter-spacing:.16em;font-size:.68rem;color:var(--hh-dim)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-tabs button.active{color:var(--hh-yellow)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .nxerr, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .nxok{border-radius:0} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .nxerr.show{background:rgba(255,59,36,.12);border-color:rgba(255,59,36,.4);color:#ffb4a5} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .nxok.show{background:rgba(166,255,77,.1);border-color:rgba(166,255,77,.35);color:#d9ffb0} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-label{color:var(--hh-muted);font-family:var(--hh-font-hud);letter-spacing:.2em;font-size:.62rem} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate input{font-size:.95rem!important;padding:12px 16px} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-input-row input{padding-right:74px} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .auth-pass-toggle{height:30px;min-height:30px;padding:0 9px;font-size:.5rem!important;font-family:var(--hh-font-mono)!important} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .nxbtn{font-size:.72rem!important;letter-spacing:.18em!important} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .nxbtn.google{color:var(--hh-ink)!important} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .nxor{color:var(--hh-muted);font-family:var(--hh-font-mono);font-size:.7rem} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .nxor:before, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .nxor:after{background:var(--hh-edge-2)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .nxforgot button, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .nxswap button{background:none;border:0;padding:0;cursor:pointer;color:var(--hh-orange);font:800 .85rem var(--hh-font-text)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .nxforgot button{color:var(--hh-dim);font-weight:600;font-size:.8rem} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .nxforgot button:hover, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .nxswap button:hover, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .nxforgot a:hover, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .nxswap a:hover{color:var(--hh-yellow)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .nxswap{border-top-color:var(--hh-edge);color:var(--hh-dim)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .x{width:36px;height:36px;padding:0;font-size:.7rem!important;backdrop-filter:none} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .x:hover{border-color:var(--hh-red)!important;color:#fff!important} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .og-auth-status{color:var(--hh-ink-2);font-family:var(--hh-font-hud)} html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] .og-auth-gate .og-auth-spinner{border-color:rgba(255,122,0,.24);border-top-color:var(--hh-orange);animation-play-state:var(--hud-play)} /* ═══════════════════════════════ 8 · pages/pokemon-kanto.html ═══════════════════════════════ */ html.hunter-hud body:has(#mainNav){ --bg:var(--hh-void);--bg2:#0a0806;--surface:var(--hh-panel);--surface2:var(--hh-panel-2); --border:var(--hh-edge);--border-h:var(--hh-edge-hot); --text:var(--hh-ink);--text2:var(--hh-ink-2);--dim:var(--hh-dim); --accent:var(--hh-orange);--accent-glow:rgba(255,122,0,.14); --gold:var(--hh-yellow);--gold-glow:rgba(255,196,0,.14); --red:var(--hh-ember);--green:var(--hh-visor);--green-glow:rgba(255,122,0,.25); font-family:var(--hh-font-text); } html.hunter-hud body:has(#mainNav) .nav{position:fixed;padding:14px 32px} html.hunter-hud body:has(#mainNav) .nav.scrolled{padding:10px 32px} html.hunter-hud body:has(#mainNav) .nav-logo{font-family:var(--hh-font-hud);font-weight:700;font-size:15px;letter-spacing:.16em;color:var(--hh-ink);text-shadow:0 0 16px rgba(255,122,0,.3)} html.hunter-hud body:has(#mainNav) .nav-logo:hover{color:var(--hh-yellow)} html.hunter-hud body:has(#mainNav) .nav-divider{background:var(--hh-edge-2)} html.hunter-hud body:has(#mainNav) .nav-title{font:700 10px/1 var(--hh-font-mono);letter-spacing:.26em;text-transform:uppercase;color:var(--hh-orange)} html.hunter-hud body:has(#mainNav) .nav-title::before{content:'// '} html.hunter-hud body:has(#mainNav) .nav-status{ border-radius:0;clip-path:var(--mc-cut-xs);background:rgba(8,6,4,.9);border-color:var(--hh-edge-2); font:700 10px/1 var(--hh-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hh-dim);padding:8px 12px; } html.hunter-hud body:has(#mainNav) .nav-dot{border-radius:0;transform:rotate(45deg);width:6px;height:6px;background:var(--hh-faint)} html.hunter-hud body:has(#mainNav) .nav-dot.online{background:var(--hh-visor);box-shadow:0 0 8px var(--hh-visor);animation:hh-mc-dot 2s infinite;animation-play-state:var(--hud-play)} html.hunter-hud body:has(#mainNav) .nav-btn{padding:9px 18px;font-size:11.5px!important} html.hunter-hud body:has(#mainNav) .hero-bg{filter:blur(3px) grayscale(1) sepia(1) saturate(2.2) hue-rotate(-18deg) brightness(.16) contrast(1.15)} html.hunter-hud body:has(#mainNav) .hero-bg::after{background:linear-gradient(180deg,rgba(4,4,4,.55),rgba(4,4,4,.82) 60%,var(--hh-void))} /* the ember ground lives on .hero::before, outside the filtered .hero-bg (a filter also greys its pseudo-elements) */ html.hunter-hud body:has(#mainNav) .hero::before{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(ellipse at 78% 12%,rgba(255,77,0,.22),transparent 55%),radial-gradient(ellipse at 20% 90%,rgba(255,122,0,.08),transparent 50%); background-size:130% 130%;background-position:50% 50%; animation:hh-misc-ember-drift 16s ease-in-out infinite alternate;animation-play-state:var(--hud-play); } html.hunter-hud body:has(#mainNav) .hero-content{position:relative;z-index:2} @keyframes hh-misc-ember-drift{0%{background-position:40% 45%}100%{background-position:62% 58%}} html.hunter-hud body:has(#mainNav) .hero-grid{ background-image:var(--hh-hex);background-size:45px 26px;opacity:.9; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 10%,transparent 75%); } html.hunter-hud body:has(#mainNav) .hero-chip{ border-radius:0;clip-path:var(--mc-cut-xs);background:rgba(255,122,0,.1);border-color:var(--hh-edge-hot);color:var(--hh-yellow); font:700 10px/1.2 var(--hh-font-hud);letter-spacing:.28em;text-transform:uppercase;padding:9px 16px; } html.hunter-hud body:has(#mainNav) .hero-chip svg{color:var(--hh-orange)} html.hunter-hud body:has(#mainNav) .hero h1{font-weight:700!important;letter-spacing:.03em!important;animation:hh-reveal-x .8s var(--hh-ease-out) .15s backwards} html.hunter-hud body:has(#mainNav) .hero h1 .grad{background:none;-webkit-text-fill-color:var(--hh-yellow);color:var(--hh-yellow);text-shadow:0 0 30px rgba(255,196,0,.5)} html.hunter-hud body:has(#mainNav) .hero-sub{color:var(--hh-dim);font-weight:400} html.hunter-hud body:has(#mainNav) .btn-primary{animation:none;padding:16px 36px;font-size:13px!important;clip-path:var(--mc-cut-md)} html.hunter-hud body:has(#mainNav) .btn-secondary{padding:16px 32px;font-size:12px!important;clip-path:var(--mc-cut-md)} html.hunter-hud body:has(#mainNav) .hero-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px} html.hunter-hud body:has(#mainNav) .stats{position:relative;background:linear-gradient(180deg,#0e0b08,#080606);border-color:var(--hh-edge-2)} html.hunter-hud body:has(#mainNav) .stats::before{content:'';position:absolute;left:32px;top:-1px;height:3px;width:120px;background:var(--mc-ticks)} html.hunter-hud body:has(#mainNav) .stats::after{content:'';position:absolute;right:32px;bottom:-1px;height:3px;width:120px;background:var(--mc-ticks)} html.hunter-hud body:has(#mainNav) .stat-val{background:none;-webkit-text-fill-color:var(--hh-yellow);color:var(--hh-yellow);font-family:var(--hh-font-mono);text-shadow:0 0 18px rgba(255,196,0,.35)} html.hunter-hud body:has(#mainNav) .stat-label{color:var(--hh-muted);font-family:var(--hh-font-hud);letter-spacing:.24em} html.hunter-hud body:has(#mainNav) .showcase-title h2, html.hunter-hud body:has(#mainNav) .features-header h2, html.hunter-hud body:has(#mainNav) .preview-text h2, html.hunter-hud body:has(#mainNav) .cta-inner h2{font-weight:700!important} html.hunter-hud body:has(#mainNav) .showcase-title h2::before, html.hunter-hud body:has(#mainNav) .features-header h2::before, html.hunter-hud body:has(#mainNav) .preview-text h2::before, html.hunter-hud body:has(#mainNav) .cta-inner h2::before{ display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px; font:700 10px/1.2 var(--hh-font-mono);letter-spacing:.32em;color:var(--hh-yellow);text-shadow:none; } html.hunter-hud body:has(#mainNav) .showcase-title h2::before{content:'// 01 · REGION MAP'} html.hunter-hud body:has(#mainNav) .features-header h2::before{content:'// 02 · SYSTEMS'} html.hunter-hud body:has(#mainNav) .preview-text h2::before{content:'// 03 · AUTHENTIC';justify-content:flex-start} html.hunter-hud body:has(#mainNav) .cta-inner h2::before{content:'// 04 · LAUNCH'} html.hunter-hud body:has(#mainNav) .showcase-title p, html.hunter-hud body:has(#mainNav) .features-header p{color:var(--hh-dim)} html.hunter-hud body:has(#mainNav) .showcase-card{transition:transform .3s var(--hh-ease-out)} html.hunter-hud body:has(#mainNav) .showcase-card:hover{--panel-edge:var(--hh-orange);transform:translateY(-4px)} html.hunter-hud body:has(#mainNav) .showcase-info span{color:var(--hh-ink-2);font-family:var(--hh-font-hud);text-transform:uppercase;letter-spacing:.06em} html.hunter-hud body:has(#mainNav) .feat::before{background:linear-gradient(90deg,transparent,var(--hh-yellow),transparent);height:2px} html.hunter-hud body:has(#mainNav) .feat:hover{--panel-edge:var(--hh-edge-hot);transform:translateY(-4px)} html.hunter-hud body:has(#mainNav) .feat-icon{border-radius:0;clip-path:var(--mc-cut-sm);background:rgba(255,122,0,.12);color:var(--hh-orange);border:1px solid var(--hh-edge-2)} html.hunter-hud body:has(#mainNav) .feat-icon.gold{background:rgba(255,196,0,.12);color:var(--hh-yellow)} html.hunter-hud body:has(#mainNav) .feat-icon.green{background:rgba(166,255,77,.1);color:var(--hh-visor)} html.hunter-hud body:has(#mainNav) .feat-icon.red{background:rgba(255,77,0,.14);color:var(--hh-ember)} html.hunter-hud body:has(#mainNav) .feat h3{font-size:15px!important;letter-spacing:.06em!important} html.hunter-hud body:has(#mainNav) .feat p{color:var(--hh-dim)} html.hunter-hud body:has(#mainNav) .preview{background:#080606;border-color:var(--hh-edge)} html.hunter-hud body:has(#mainNav) .preview-visual{background:#090807} html.hunter-hud body:has(#mainNav) .preview-visual-label{ border-radius:0;clip-path:var(--mc-cut-xs);background:rgba(8,6,4,.88);border-color:var(--hh-edge-2);color:var(--hh-ink-2); font:700 10px/1.2 var(--hh-font-mono);letter-spacing:.12em;text-transform:uppercase;backdrop-filter:none; } html.hunter-hud body:has(#mainNav) .preview-text p{color:var(--hh-dim)} html.hunter-hud body:has(#mainNav) .preview-list li{color:var(--hh-ink-2)} html.hunter-hud body:has(#mainNav) .pokemon-bar{background:linear-gradient(180deg,var(--hh-void),#0a0806)} html.hunter-hud body:has(#mainNav) .cta-section::before{background:radial-gradient(ellipse at center,rgba(255,122,0,.16) 0%,transparent 60%)} html.hunter-hud body:has(#mainNav) .cta-inner p{color:var(--hh-dim)} html.hunter-hud body:has(#mainNav) .footer{border-top-color:var(--hh-edge-2);color:var(--hh-muted);font:700 11px/1.6 var(--hh-font-mono);letter-spacing:.08em;text-transform:uppercase} html.hunter-hud body:has(#mainNav) .footer a{color:var(--hh-orange)} html.hunter-hud body:has(#mainNav) .footer a:hover{color:var(--hh-yellow)} /* ── 8b · Kanto elevation ── The hero content sits inside a viewfinder frame; the display title is condensed and larger; stats are indexed readout wells (ONLINE NOW is the live feed, so its marker is red); map imagery gets reticle corners and a line texture; features are indexed modules with the lift/edge/glow hover; the page closes on a hazard rail. The ember drift behind the hero stays the page's single ambient loop. */ html.hunter-hud body:has(#mainNav) .nav{animation:mx-drop .5s var(--hh-ease-out) backwards} html.hunter-hud body:has(#mainNav) .nav-logo{font-stretch:var(--mx-stretch);font-size:17px} html.hunter-hud body:has(#mainNav) .hero-content{max-width:760px;animation:none} html.hunter-hud body:has(#mainNav) .hero-content::before{ content:'';position:absolute;inset:-34px -48px -30px;pointer-events:none;opacity:.55; background: linear-gradient(var(--hh-orange),var(--hh-orange)) top left/26px 2px no-repeat,linear-gradient(var(--hh-orange),var(--hh-orange)) top left/2px 26px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) top right/26px 2px no-repeat,linear-gradient(var(--hh-orange),var(--hh-orange)) top right/2px 26px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom left/26px 2px no-repeat,linear-gradient(var(--hh-orange),var(--hh-orange)) bottom left/2px 26px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom right/26px 2px no-repeat,linear-gradient(var(--hh-orange),var(--hh-orange)) bottom right/2px 26px no-repeat, linear-gradient(rgba(255,122,0,.5),rgba(255,122,0,.5)) top center/40px 1px no-repeat,linear-gradient(rgba(255,122,0,.5),rgba(255,122,0,.5)) bottom center/40px 1px no-repeat; animation:mx-fade .8s ease-out .5s backwards; } html.hunter-hud body:has(#mainNav) .hero-chip{animation:mx-fade .5s ease-out .08s backwards} html.hunter-hud body:has(#mainNav) .hero h1{font-size:clamp(2.7rem,6.2vw,5.3rem)!important;line-height:.94!important;font-stretch:var(--mx-stretch);letter-spacing:.02em!important;margin-bottom:22px} html.hunter-hud body:has(#mainNav) .hero-sub{max-width:54ch;text-wrap:pretty;animation:mx-rise .5s var(--hh-ease-out) .24s backwards} html.hunter-hud body:has(#mainNav) .hero-actions{animation:mx-rise .5s var(--hh-ease-out) .31s backwards} html.hunter-hud body:has(#mainNav) .btn-primary.hh-primary:hover{transform:translateY(-2px)!important} html.hunter-hud body:has(#mainNav) .btn-secondary.hh-btn:hover{transform:translateY(-1px)!important} html.hunter-hud body:has(#mainNav) .hero-tag{animation:mx-rise .45s var(--hh-ease-out) .38s backwards} html.hunter-hud body:has(#mainNav) .hero-tag:nth-child(2){animation-delay:.43s} html.hunter-hud body:has(#mainNav) .hero-tag:nth-child(3){animation-delay:.48s} html.hunter-hud body:has(#mainNav) .hero-tag:nth-child(4){animation-delay:.53s} /* stats: indexed readout wells, tabular digits, the live feed marked red */ html.hunter-hud body:has(#mainNav) .stats-row{counter-reset:mx-kstat;gap:12px;max-width:1040px} html.hunter-hud body:has(#mainNav) .stat{ --mx-sc:var(--hh-orange);counter-increment:mx-kstat;position:relative;flex:1 1 150px;max-width:196px;padding:22px 18px 16px; background:var(--mx-well);box-shadow:var(--mx-well-shadow),inset 0 2px var(--mx-sc);clip-path:var(--mc-cut-sm); } html.hunter-hud body:has(#mainNav) .stat:last-child{--mx-sc:var(--mx-live)} html.hunter-hud body:has(#mainNav) .stat::before{content:'// ' counter(mx-kstat,decimal-leading-zero);position:absolute;top:8px;left:10px;font:700 9px/1 var(--hh-font-mono);letter-spacing:.12em;color:var(--hh-muted)} html.hunter-hud body:has(#mainNav) .stat-val{font-variant-numeric:tabular-nums;font-size:clamp(26px,3.4vw,38px)} html.hunter-hud body:has(#mainNav) .stat-label{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--hh-dim)} html.hunter-hud body:has(#mainNav) .stat:last-child .stat-label::before{content:'';flex:0 0 6px;height:6px;transform:rotate(45deg);background:var(--mx-live);box-shadow:0 0 8px rgba(255,59,36,.8)} html.hunter-hud body:has(#mainNav) .stat.hh-reveal:nth-child(2){animation-delay:55ms} html.hunter-hud body:has(#mainNav) .stat.hh-reveal:nth-child(3){animation-delay:110ms} html.hunter-hud body:has(#mainNav) .stat.hh-reveal:nth-child(4){animation-delay:165ms} html.hunter-hud body:has(#mainNav) .stat.hh-reveal:nth-child(5){animation-delay:220ms} html.hunter-hud body:has(#mainNav) .stats::after{width:180px;height:6px;bottom:-3px;background:var(--mx-hazard);opacity:.6} /* map imagery: reticle corners and a line texture over each screenshot */ html.hunter-hud body:has(#mainNav) .showcase-card{position:relative;box-shadow:var(--mx-panel-shadow)!important} html.hunter-hud body:has(#mainNav) .showcase-card::after{ content:'';position:absolute;left:10px;right:10px;top:10px;height:180px;pointer-events:none; background: linear-gradient(var(--hh-yellow),var(--hh-yellow)) top left/12px 2px no-repeat,linear-gradient(var(--hh-yellow),var(--hh-yellow)) top left/2px 12px no-repeat, linear-gradient(var(--hh-yellow),var(--hh-yellow)) top right/12px 2px no-repeat,linear-gradient(var(--hh-yellow),var(--hh-yellow)) top right/2px 12px no-repeat, linear-gradient(var(--hh-yellow),var(--hh-yellow)) bottom left/12px 2px no-repeat,linear-gradient(var(--hh-yellow),var(--hh-yellow)) bottom left/2px 12px no-repeat, linear-gradient(var(--hh-yellow),var(--hh-yellow)) bottom right/12px 2px no-repeat,linear-gradient(var(--hh-yellow),var(--hh-yellow)) bottom right/2px 12px no-repeat, repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px); opacity:.75;transition:opacity .25s; } html.hunter-hud body:has(#mainNav) .showcase-card:hover::after{opacity:1} html.hunter-hud body:has(#mainNav) .showcase-card:hover{box-shadow:var(--mx-panel-shadow-hot)!important;transform:translateY(-2px)!important} html.hunter-hud body:has(#mainNav) .showcase-info span{font-weight:700;font-stretch:var(--mx-stretch)} @media (max-width:768px){html.hunter-hud body:has(#mainNav) .showcase-card::after{height:140px}} /* feature modules: indexed, icon in a recessed well, lift + lit edge + inner glow on hover */ html.hunter-hud body:has(#mainNav) .features-grid{counter-reset:mx-feat} html.hunter-hud body:has(#mainNav) .feat{counter-increment:mx-feat;box-shadow:var(--mx-panel-shadow)!important;transition:transform .3s var(--hh-ease-out),box-shadow .3s,border-color .2s} html.hunter-hud body:has(#mainNav) .feat::after{content:'// ' counter(mx-feat,decimal-leading-zero);position:absolute;top:16px;right:24px;font:700 10px/1 var(--hh-font-mono);letter-spacing:.14em;color:var(--hh-muted);transition:color .2s} html.hunter-hud body:has(#mainNav) .feat:hover{transform:translateY(-2px)!important;box-shadow:var(--mx-panel-shadow-hot)!important} html.hunter-hud body:has(#mainNav) .feat:hover::after{color:var(--hh-yellow)} html.hunter-hud body:has(#mainNav) .feat-icon{box-shadow:inset 0 2px 8px rgba(0,0,0,.6)} html.hunter-hud body:has(#mainNav) .feat h3{font-size:17px!important;font-weight:700!important;font-stretch:var(--mx-stretch)} html.hunter-hud body:has(#mainNav) .feat p{font-size:14px;line-height:1.65} html.hunter-hud body:has(#mainNav) .feat.hh-reveal:nth-child(3n+2){animation-delay:60ms} html.hunter-hud body:has(#mainNav) .feat.hh-reveal:nth-child(3n){animation-delay:120ms} html.hunter-hud body:has(#mainNav) :is(.showcase-title h2,.features-header h2,.preview-text h2,.cta-inner h2){font-size:clamp(26px,3.6vw,40px)!important;font-stretch:var(--mx-stretch);letter-spacing:.03em!important;line-height:1.02} html.hunter-hud body:has(#mainNav) .preview-text p{max-width:56ch} /* preview capture: a viewfinder over the in-game screenshot */ html.hunter-hud body:has(#mainNav) .preview-visual::after{ content:'';position:absolute;inset:12px;pointer-events:none; background: 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 right/18px 2px no-repeat,linear-gradient(var(--hh-orange),var(--hh-orange)) bottom right/2px 18px no-repeat, linear-gradient(rgba(255,196,0,.6),rgba(255,196,0,.6)) center/22px 1px no-repeat,linear-gradient(rgba(255,196,0,.6),rgba(255,196,0,.6)) center/1px 22px no-repeat, repeating-linear-gradient(180deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px); } html.hunter-hud body:has(#mainNav) .preview-visual-label{z-index:1} html.hunter-hud body:has(#mainNav) .preview-list li{font-size:14px} /* close: hazard rail over the footer */ html.hunter-hud body:has(#mainNav) .footer{position:relative} html.hunter-hud body:has(#mainNav) .footer::before{content:'';position:absolute;left:50%;top:-4px;width:min(520px,70%);height:6px;transform:translateX(-50%);background:var(--mx-hazard);opacity:.5;-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)} @media (max-width:768px){ html.hunter-hud body:has(#mainNav) .nav{padding:12px 16px} html.hunter-hud body:has(#mainNav) .nav.scrolled{padding:10px 16px} html.hunter-hud body:has(#mainNav) .nav-btn{padding:9px 12px} html.hunter-hud body:has(#mainNav) .stats::before, html.hunter-hud body:has(#mainNav) .stats::after{width:72px;left:16px;right:16px} html.hunter-hud body:has(#mainNav) .hero-content::before{inset:-22px -8px -20px} html.hunter-hud body:has(#mainNav) .stat{flex:1 1 128px;padding:20px 10px 14px} } /* ═══════════════════════════════ 9 · pages/pokemon-gb-link.html + redirect stubs ═══════════════════════════════ */ html.hunter-hud body:has(.app-shell > .topbar){ --bg:var(--hh-void);--panel:var(--hh-panel);--panel-2:var(--hh-panel-2);--line:var(--hh-edge-2); --text:var(--hh-ink);--muted:var(--hh-dim);--green:var(--hh-visor);--yellow:var(--hh-yellow);--red:var(--hh-red);--blue:var(--hh-orange);--ink:#1a0900; font-family:var(--hh-font-text); } html.hunter-hud body:has(.app-shell > .topbar) .topbar{background:linear-gradient(180deg,rgba(15,11,8,.96),rgba(8,6,5,.96));border-bottom-color:var(--hh-edge);backdrop-filter:blur(8px)} html.hunter-hud body:has(.app-shell > .topbar) .brand-mark{border-radius:0;clip-path:var(--mc-cut-xs);background:linear-gradient(135deg,var(--hh-yellow),var(--hh-orange))} html.hunter-hud body:has(.app-shell > .topbar) .brand h1{font-family:var(--hh-font-hud);text-transform:uppercase;letter-spacing:.08em} html.hunter-hud body:has(.app-shell > .topbar) .brand span{font-family:var(--hh-font-mono);font-size:10px;letter-spacing:.14em;color:var(--hh-orange)} html.hunter-hud body:has(.app-shell > .topbar) .status-pill{border-radius:0;clip-path:var(--mc-cut-xs);font:700 10px/1.4 var(--hh-font-mono);letter-spacing:.14em;text-transform:uppercase} html.hunter-hud body:has(.app-shell > .topbar) .panel-head h2{font-family:var(--hh-font-hud);text-transform:uppercase;letter-spacing:.14em;color:var(--hh-yellow)} html.hunter-hud body:has(.app-shell > .topbar) .panel-head small{font-family:var(--hh-font-mono);color:var(--hh-muted)} html.hunter-hud body:has(.app-shell > .topbar) .btn.primary{color:#1a0900;background:linear-gradient(180deg,var(--hh-yellow),var(--hh-orange))} html.hunter-hud body:has(.app-shell > .topbar) .room-code{border-radius:0;border-color:var(--hh-edge-hot);color:var(--hh-yellow);font-family:var(--hh-font-mono);background:#090807} html.hunter-hud body:has(.app-shell > .topbar) .member, html.hunter-hud body:has(.app-shell > .topbar) .room-card, html.hunter-hud body:has(.app-shell > .topbar) .poke-card, html.hunter-hud body:has(.app-shell > .topbar) .offer-slot, html.hunter-hud body:has(.app-shell > .topbar) .chat-line{border-radius:0;background:#090807;clip-path:var(--mc-cut-xs)} html.hunter-hud body:has(.app-shell > .topbar) .poke-card.selected{border-color:var(--hh-yellow)} html.hunter-hud body:has(.app-shell > .topbar) input[type=file]{background:linear-gradient(#15100b,#0a0807);border:1px solid var(--hh-edge-2);border-radius:0;clip-path:var(--mc-cut-xs);color:var(--hh-dim);font-family:var(--hh-font-mono)} html.hunter-hud body:has(.app-shell > .topbar) input[type=file]::file-selector-button{border:1px solid var(--hh-edge-hot);border-radius:0;background:linear-gradient(#2a1c0c,#140e08);color:var(--hh-yellow);font:700 11px var(--hh-font-hud);letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;margin-right:10px;cursor:pointer} html.hunter-hud body:has(.app-shell > .topbar) input[type=file]:focus-visible{outline:2px solid var(--hh-yellow);outline-offset:-3px} html.hunter-hud body:has(.app-shell > .topbar) input[type=file]::file-selector-button:hover{border-color:var(--hh-orange);color:var(--hh-yellow-2)} html.hunter-hud body:has(.app-shell > .topbar) .toast{border-radius:0;background:#100d0a;border-color:var(--hh-edge-hot)} html.hunter-hud body > p:only-child{color:var(--hh-dim);font:700 12px/1.8 var(--hh-font-mono);letter-spacing:.16em;text-transform:uppercase;padding:48px 24px} html.hunter-hud body > p:only-child a{color:var(--hh-orange)} /* ═══════════════════════════════ 10 · cookie consent (cookie-consent.css, on 404 + oldgames.html) ═══════════════════════════════ */ /* Carbon console bar docked to the bottom with the top energy line; Accept is the one power button. The telemetry tag steps aside while the bar is up so the two never overlap in the bottom-right corner. */ html.hunter-hud body:has(.cookie-consent-overlay.visible) .hud-telemetry{opacity:0;pointer-events:none} html.hunter-hud .cookie-consent-overlay{ border-top:1px solid var(--hh-edge-hot);color:var(--hh-ink-2);font-family:var(--hh-font-text); background:linear-gradient(180deg,rgba(16,12,8,.98),rgba(7,6,5,.985)); box-shadow:0 -14px 44px rgba(0,0,0,.65);padding:18px 20px; } html.hunter-hud .cookie-consent-overlay::before{ content:'';position:absolute;left:0;right:0;top:-1px;height:2px; background:linear-gradient(90deg,var(--hh-yellow) 0 56px,var(--hh-orange) 56px 130px,rgba(255,122,0,.25) 130px 45%,transparent 80%); box-shadow:0 0 12px rgba(255,122,0,.4); } /* static hazard segment on the right end of the bar (the viewport top line already carries the travelling beam) */ html.hunter-hud .cookie-consent-overlay::after{ content:'';position:absolute;right:18px;top:-4px;width:84px;height:5px;background:var(--mx-hazard);opacity:.55; -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%); } html.hunter-hud .cookie-consent-text{font-size:13.5px;line-height:1.6;color:var(--hh-dim)} html.hunter-hud .cookie-consent-text::before{ content:'// DATA CONSENT · TRACKING';display:flex;align-items:center;gap:9px;margin-bottom:7px; font:700 9.5px/1.2 var(--hh-font-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--hh-yellow); } html.hunter-hud .cookie-consent-text a{color:var(--hh-orange);text-decoration:none;border-bottom:1px solid rgba(255,122,0,.4)} html.hunter-hud .cookie-consent-text a:hover{color:var(--hh-yellow);border-bottom-color:var(--hh-yellow)} html.hunter-hud .cookie-consent-btn{ min-height:40px;padding:0 20px;border-radius:0;font-size:11px!important; font-family:var(--hh-font-hud);font-weight:600;letter-spacing:.14em;text-transform:uppercase; clip-path:var(--mc-cut-sm); } html.hunter-hud .cookie-consent-btn:hover{transform:none} html.hunter-hud .cookie-consent-btn.settings{font-size:10.5px!important;padding:0 16px} /* settings modal */ html.hunter-hud .cookie-settings-modal{background:rgba(3,2,1,.78)} html.hunter-hud .cookie-settings-box{--panel-edge:var(--hh-edge-hot);--cut:16px;color:var(--hh-ink-2);font-family:var(--hh-font-text)} html.hunter-hud .cookie-settings-box h3{ display:flex;align-items:center;gap:10px;color:var(--hh-ink);font:700 1.05rem/1.2 var(--hh-font-hud); letter-spacing:.1em;text-transform:uppercase;text-shadow:0 0 22px rgba(255,122,0,.25); } html.hunter-hud .cookie-settings-box h3::before{content:'';flex:0 0 18px;height:2px;background:var(--hh-orange);box-shadow:0 0 10px rgba(255,122,0,.8)} html.hunter-hud .cookie-settings-box h3::after{content:'';flex:0 0 5px;height:5px;background:var(--hh-yellow);transform:rotate(45deg);opacity:.85} html.hunter-hud .cookie-category{ border-radius:0;clip-path:var(--mc-cut-sm);border:1px solid var(--hh-edge); background:linear-gradient(165deg,#120e09,#090807);box-shadow:inset 3px 0 var(--hh-orange); } html.hunter-hud .cookie-category-header strong{font-family:var(--hh-font-hud);text-transform:uppercase;letter-spacing:.1em;color:var(--hh-yellow)} html.hunter-hud .cookie-category p{color:var(--hh-dim)} html.hunter-hud .cookie-toggle-slider{border-radius:0;clip-path:var(--mc-cut-xs);background:#2a1f12;border:1px solid var(--hh-edge)} html.hunter-hud .cookie-toggle-slider:before{border-radius:0;background:var(--hh-dim)} html.hunter-hud .cookie-toggle input:checked + .cookie-toggle-slider{background:linear-gradient(180deg,var(--hh-yellow),var(--hh-orange));border-color:var(--hh-edge-hot)} html.hunter-hud .cookie-toggle input:checked + .cookie-toggle-slider:before{background:#1a0900} html.hunter-hud .cookie-settings-actions .cookie-consent-btn{min-height:38px} @media (max-width:600px){ html.hunter-hud .cookie-consent-text::before{justify-content:center} html.hunter-hud .cookie-consent-btn{padding:0 16px;font-size:10.5px!important} } /* ═══════════════════════════════ 10b · "Live Now" card (og-live-v2.js via live-now-global.js, on pages/pokemon-kanto) ═══════════════════════════════ */ /* Recolour only, never hide; same treatment as the other families. It appears only while someone is streaming. Live markers are red (live), room markers yellow; the telemetry tag steps aside while the card is mounted. */ html.hunter-hud body:has(#ogliveV2) .hud-telemetry{display:none!important} html.hunter-hud #ogliveV2{font-family:var(--hh-font-hud)} html.hunter-hud #ogliveV2-card{ border-radius:0;background:linear-gradient(165deg,#19120a,#0a0807 72%);border:1px solid var(--hh-edge-hot); box-shadow:0 24px 56px rgba(0,0,0,.62),inset 0 1px rgba(255,205,130,.14); clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); } html.hunter-hud #ogliveV2-pill{ border-radius:0;background:linear-gradient(180deg,#1c150c,#0f0b07);border:1px solid var(--mx-live-edge);color:var(--hh-ink); clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); font-family:var(--hh-font-mono);letter-spacing:.12em;text-transform:uppercase;font-weight:700;box-shadow:inset 0 1px rgba(255,205,130,.12); } html.hunter-hud #ogliveV2-pill:hover{border-color:var(--mx-live);box-shadow:inset 0 -12px 20px -12px rgba(255,59,36,.45)} html.hunter-hud #ogliveV2-pill .dot, html.hunter-hud .ogliveV2-badge b{border-radius:0;transform:rotate(45deg);background:var(--mx-live);box-shadow:0 0 10px var(--mx-live)} html.hunter-hud .ogliveV2-badge{border-radius:0;border-color:var(--mx-live-edge);background:rgba(8,6,4,.6);color:var(--hh-ink);font-family:var(--hh-font-mono);letter-spacing:.14em} html.hunter-hud :is(#ogliveV2-card .cnt,#ogliveV2-min,.ogliveV2-arw,.ogliveV2-chip-cov,.ogliveV2-fbtn,.ogliveV2-av,.ogliveV2-av img){border-radius:0} html.hunter-hud #ogliveV2-card .cnt{font-family:var(--hh-font-mono);letter-spacing:.08em;background:rgba(8,6,4,.6)} html.hunter-hud #ogliveV2-min{border-color:var(--hh-edge-2);background:rgba(8,6,4,.6)} html.hunter-hud #ogliveV2-min:hover{background:rgba(255,122,0,.35)} html.hunter-hud .ogliveV2-feat{background:linear-gradient(135deg,#1a1209,#0a0807 60%,#160f08)} html.hunter-hud .ogliveV2-feat video{background:#070503} html.hunter-hud .ogliveV2-feat-scrim{background:linear-gradient(transparent,rgba(12,8,5,.55) 55%,rgba(8,5,3,.95))} html.hunter-hud .ogliveV2-av{clip-path:var(--mc-cut-xs);background:linear-gradient(135deg,var(--hh-yellow),var(--hh-orange),var(--hh-ember));box-shadow:none} html.hunter-hud .ogliveV2-av img{border-color:#0a0807;background:#140f0a} html.hunter-hud .ogliveV2-fbtn{ font-family:var(--hh-font-hud);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#170900; background:linear-gradient(180deg,var(--hh-yellow),var(--hh-orange));box-shadow:inset 0 1px rgba(255,255,255,.5); clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); } html.hunter-hud :is(.ogliveV2-fgm,.ogliveV2-slbl,.ogliveV2-arw,.ogliveV2-feat-cover[data-name]::before){font-family:var(--hh-font-hud)} html.hunter-hud .ogliveV2-fgm{font-weight:700;font-stretch:var(--mx-stretch);letter-spacing:.03em;text-transform:uppercase;color:var(--hh-ink)} html.hunter-hud .ogliveV2-feat-cover[data-name]::before{color:var(--hh-ink-2);text-transform:uppercase;letter-spacing:.04em} html.hunter-hud .ogliveV2-slbl{color:var(--hh-dim);font-family:var(--hh-font-mono);letter-spacing:.2em} html.hunter-hud .ogliveV2-slbl::before{content:'// ';color:var(--hh-orange)} html.hunter-hud .ogliveV2-fwh{color:var(--hh-dim)} html.hunter-hud .ogliveV2-strip-wrap{background:#0c0a07;border-top-color:var(--hh-edge)} html.hunter-hud .ogliveV2-chip{color:var(--hh-ink-2)} html.hunter-hud .ogliveV2-chip-cov{border-color:var(--hh-edge-2);background-color:#0c0a07;background-image:linear-gradient(135deg,#1e150a,#0c0a07)} html.hunter-hud .ogliveV2-chip:hover .ogliveV2-chip-cov{border-color:var(--hh-orange)} html.hunter-hud .ogliveV2-chip.active .ogliveV2-chip-cov{border-color:var(--hh-orange);box-shadow:inset 0 0 0 1px var(--hh-orange)} html.hunter-hud .ogliveV2-chip-dot{border-radius:0;transform:rotate(45deg);background:var(--mx-live);box-shadow:0 0 6px var(--mx-live)} html.hunter-hud .ogliveV2-chip-dot.room{background:var(--mx-warn);box-shadow:0 0 6px var(--mx-warn)} html.hunter-hud .ogliveV2-chip-avatar{border-color:#0a0807!important} html.hunter-hud .ogliveV2-chip-nm{color:var(--hh-dim);font-family:var(--hh-font-hud);letter-spacing:.04em} html.hunter-hud .ogliveV2-chip.active .ogliveV2-chip-nm{color:var(--hh-yellow)} html.hunter-hud .ogliveV2-arw{border-color:var(--hh-edge-hot);background:rgba(12,8,5,.6);color:var(--hh-ink)} html.hunter-hud .ogliveV2-arw:hover{background:rgba(255,122,0,.5)} /* ═══════════════════════════════ 11 · reduced motion (cable-club only) ═══════════════════════════════ */ /* The core kills every animation under html.hunter-hud; cable-club swaps that class for theme-dmg/cgb/gba, so the ambient loops this file adds there need their own switch-off. */ @media (prefers-reduced-motion:reduce){ html:is(.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"], html:is(.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] *, html:is(.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] *::before, html:is(.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] *::after{animation:none!important;transition:none!important} } /* focus rings on chamfered controls: clip-path also clips outlines drawn outside the box, so pull them inside (yellow power buttons get the dark inner frame from section 0b instead) */ html.hunter-hud body:has(.code.glitch) .btn:not(.hh-primary):focus-visible, html.hunter-hud body:has(.games-grid) .cta-button:not(.hh-primary):focus-visible, html.hunter-hud body:has(#mainNav) :is(.btn-primary,.btn-secondary):not(.hh-primary):focus-visible, html.hunter-hud .mp-native-network .ds-retry:focus-visible, html.hunter-hud .mp-arena-v6 #native-game-mute:focus-visible, html.hunter-hud .mpc-overlay .mpc-tab:focus-visible, html:is(.hunter-hud,.theme-dmg,.theme-cgb,.theme-gba)[data-hud-family="misc"] body.cc #cc-hud .cc-gamepick-btn:focus-visible{outline:2px solid var(--hh-yellow)!important;outline-offset:-3px!important}