/* Afterhours 16 v0.3 — UI */
:root {
  --bg: #07090c; --panel: rgba(12, 15, 20, 0.82); --panel2: rgba(22, 27, 35, 0.9); --line: rgba(255, 255, 255, 0.09);
  --text: #f1f0ea; --muted: #9aa3ad; --dim: #66707b; --accent: #ffd84a; --accent2: #ff5a36; --good: #3ddc84; --bad: #ff5b57; --blue: #3fa0ff;
  --font: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --display: "Bahnschrift", "Impact", "Arial Black", "Roboto Condensed", sans-serif;
  --r: 10px;
  /* v0.4.7.5 Hall of Fame vibrance: one living gradient, used everywhere a HOF badge appears */
  --hof-grad: linear-gradient(115deg, #ff2fb3, #a63bff, #3d7bff, #00e5ff, #38ff9c, #ff2fb3);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); overflow: hidden; -webkit-font-smoothing: antialiased; user-select: none; }
canvas#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select { font: inherit; }
/* v0.4.7.5 quick patch: an open dropdown's list is drawn by the system (light by default on Windows), and the options
   inherited the menus' light text, so they were invisible on it (the bug report's bug type most of all) */
select { color-scheme: dark; }
select option, select optgroup { background-color: #161a22; color: #f1f0ea; }
[hidden] { display: none !important; }
.layer { position: fixed; inset: 0; pointer-events: none; }
.layer > * { pointer-events: auto; }

/* ---------- HUD ---------- */
#hud { z-index: 5; pointer-events: none; }
#hud * { pointer-events: none; }
.hud-score { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: stretch; gap: 0; background: linear-gradient(180deg, rgba(14,17,22,.92), rgba(8,10,13,.95)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.sb-team { display: flex; align-items: center; gap: 12px; padding: 8px 16px; min-width: 150px; border-bottom: 3px solid var(--c); position: relative; }
.sb-team.right { justify-content: flex-end; }
.sb-abbr { font-family: var(--display); font-size: 18px; letter-spacing: .06em; color: var(--muted); }
.sb-team b { font-family: var(--display); font-size: 34px; line-height: 1; }
.sb-poss { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.sb-mid { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 6px 18px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); min-width: 130px; }
.sb-clock { font-family: var(--display); font-size: 18px; letter-spacing: .04em; }
.sb-sub { font-size: 11px; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; white-space: nowrap; }
.sb-shot { display: flex; align-items: center; justify-content: center; min-width: 46px; font-family: var(--display); font-size: 22px; color: var(--accent); background: rgba(255,216,74,.06); }
.sb-shot.low { color: var(--bad); background: rgba(255,91,87,.12); }
/* v0.4.5 quick patch shot meter: one slim track with the green window drawn to scale (hud.js setMeter). Solid green
   core = the build's own ratings; the gradient out to yellow = boosts; outlined = perfect timing, not an automatic make */
.hud-meter { position: absolute; left: 0; top: 0; width: 10px; height: 128px; opacity: 0; transition: opacity .12s; pointer-events: none; }
.hud-meter.on { opacity: 1; }
.hm-track { position: absolute; inset: 0; border-radius: 5px; overflow: hidden; background: rgba(10, 12, 16, .62); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.62), 0 3px 12px rgba(0,0,0,.45); }
.hm-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, rgba(255,255,255,.05), rgba(255,255,255,.36)); }
.hm-win, .hm-edge { position: absolute; left: -3px; right: -3px; border-radius: 2px; }
.hm-win { box-shadow: 0 0 9px rgba(31,224,122,.45); }
.hm-edge { display: none; padding: 1.5px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.hm-win[hidden], .hm-edge[hidden] { display: none; }
.hud-meter.luck .hm-win { opacity: .3; box-shadow: none; }
.hud-meter.luck .hm-edge:not([hidden]) { display: block; }
.hm-cursor { position: absolute; left: -5px; right: -5px; height: 2px; margin-bottom: -1px; border-radius: 1px; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.85); }
.hud-meter[data-grade="excellent"] .hm-cursor { background: #fff; box-shadow: 0 0 0 1px #1fe07a, 0 0 12px 2px #1fe07a; }
.hud-meter[data-grade="excellent"] .hm-win { filter: brightness(1.3); }
.hud-meter[data-grade="early"] .hm-cursor, .hud-meter[data-grade="late"] .hm-cursor { background: #ff9d42; box-shadow: 0 0 8px #ff9d42; }
.hud-meter[data-grade="vearly"] .hm-cursor, .hud-meter[data-grade="vlate"] .hm-cursor { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.hud-feedback { position: absolute; left: 0; top: 0; width: 240px; text-align: center; opacity: 0; transition: opacity .2s; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.hud-feedback.on { opacity: 1; }
.hud-feedback b { display: block; font-family: var(--display); font-size: 22px; letter-spacing: .03em; }
.hud-feedback small { display: block; font-size: 12px; color: #e8e8e8; letter-spacing: .08em; text-transform: uppercase; }
.hud-tags { position: absolute; inset: 0; }
.ptag { position: absolute; left: 0; top: 0; font-size: 11px; letter-spacing: .06em; color: rgba(255,255,255,.88); text-shadow: 0 1px 4px rgba(0,0,0,.9); white-space: nowrap; text-transform: uppercase; display: flex; align-items: center; gap: 4px; }
.ptag.opp { color: rgba(255,190,180,.8); }
.ptag.friend { color: #7fd3ff; font-weight: 700; } .ptag.friend.opp { color: #ff8a96; } /* (qp3 online: the other people playing) */
.ptag.me b { font-family: var(--display); color: var(--accent); font-size: 13px; }
.ptag i { font-style: normal; display: inline-flex; width: 17px; height: 17px; align-items: center; justify-content: center; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--display); font-size: 11px; }
/* v0.4.5 quick patch: icon pass inputs over teammates' heads (the key, or the modifier + face button) */
.ptag .tag-in { display: inline-flex; align-items: center; gap: 2px; text-transform: none; letter-spacing: 0; }
.ptag .tag-in kbd { min-width: 18px; text-align: center; padding: 1px 5px; font-weight: 700; color: #fff; background: rgba(63,160,255,.85); border-color: rgba(255,255,255,.5); }
.ptag .tag-in .pad-glyph { min-width: 18px; height: 18px; font-size: 10px; padding: 0 4px; }
.ptag .tag-in .pad-glyph.b-lb, .ptag .tag-in .pad-glyph.b-rb { min-width: 0; height: 14px; font-size: 8px; padding: 0 3px; opacity: .85; }
.ptag.calling::after { content: '!'; color: var(--accent); font-family: var(--display); margin-left: 2px; }
.hud-feed { position: absolute; left: 22px; top: 86px; display: flex; flex-direction: column; gap: 6px; }
.feed-item { background: rgba(10,12,16,.78); border-left: 3px solid var(--muted); padding: 6px 12px; font-size: 13px; border-radius: 0 6px 6px 0; transition: opacity .6s, transform .6s; max-width: 360px; }
.feed-item.good { border-color: var(--good); } .feed-item.bad { border-color: var(--bad); }
.feed-item.fade { opacity: 0; transform: translateX(-12px); }
.hud-center { position: absolute; left: 0; right: 0; top: 26%; text-align: center; pointer-events: none; }
.hud-center span { display: inline-block; font-family: var(--display); font-size: 64px; letter-spacing: .04em; font-style: italic; color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.6); opacity: 0; transform: scale(.6); }
.hud-center span.hot { color: var(--accent); } .hud-center span.cold { color: #a9e4ff; } .hud-center span.good { color: var(--good); } .hud-center span.bad { color: var(--bad); }
.hud-center.pop span { animation: pop 1.8s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes pop { 0% { opacity: 0; transform: scale(.5) skewX(-6deg); } 12% { opacity: 1; transform: scale(1.08) skewX(-6deg); } 22% { transform: scale(1) skewX(-6deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05) skewX(-6deg); } }
.hud-stamina { position: absolute; left: 0; top: 0; width: 52px; height: 5px; background: rgba(0,0,0,.6); border-radius: 3px; overflow: hidden; }
.hud-stamina i { display: block; height: 100%; background: linear-gradient(90deg, #3fa0ff, #7fd0ff); }
.hud-stamina.low i { background: var(--bad); }
.hud-cam { position: absolute; right: 24px; top: 128px; padding: 6px 12px; background: rgba(0,0,0,.6); border-radius: 6px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .3s; }
.hud-cam.on { opacity: 1; }
.hud-hint { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); font-size: 13px; color: #ddd; background: rgba(0,0,0,.5); padding: 6px 12px; border-radius: 6px; }
.hud-hint b { color: var(--accent); }

/* v0.4.1 Locked-In grade (top-right) */
.hud-grade { position: absolute; right: 22px; top: 18px; width: 132px; padding: 8px 12px 9px; text-align: center; background: linear-gradient(180deg, rgba(14,17,22,.9), rgba(8,10,13,.92)); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.4); --gc: #ffd84a; }
.hud-grade[data-tier="a"] { --gc: #3ddc84; } .hud-grade[data-tier="b"] { --gc: #6fc3ff; } .hud-grade[data-tier="c"] { --gc: #ffd84a; } .hud-grade[data-tier="d"] { --gc: #ff9b4a; } .hud-grade[data-tier="f"] { --gc: #ff5a5a; }
.lg-k { font-size: 10px; letter-spacing: .22em; color: var(--muted); }
.lg-letter { font-family: var(--display); font-size: 36px; line-height: 1.05; color: var(--gc); text-shadow: 0 0 18px color-mix(in srgb, var(--gc) 45%, transparent); }
.lg-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 3px; }
.lg-bar i { display: block; height: 100%; background: var(--gc); transition: width .35s; }
.lg-pop { position: absolute; right: 0; top: calc(100% + 6px); white-space: nowrap; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 6px; background: rgba(10,12,16,.85); opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; }
.lg-pop.on { opacity: 1; transform: none; }
.lg-pop.good { color: #3ddc84; } .lg-pop.bad { color: #ff6b57; }
.hud-grade.bump .lg-letter { animation: lgbump .45s ease-out; }
@keyframes lgbump { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* v0.4.7.5 quick patch: your line (PTS REB AST / STL BLK TO) attached to the right of the grade. The panel is 1.2x the
   grade's width (132px -> 158px) at the same height; the grade keeps its size and moves left to make room. */
.hud-grade.with-stats { right: calc(22px + 158px); border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* v0.4.7.5 qp3: the line sits inside the grade's height (values 16px, labels 9px like the grade's own caption), so
   nothing spills past the box; two rows of 16 + 1 + 10 with a 5px gap and 5px padding fit the 74px grade box */
.lg-stats { position: absolute; left: 100%; top: -1px; height: calc(100% + 2px); width: 158px; display: grid; grid-template-columns: repeat(3, 1fr); align-content: center; row-gap: 5px; padding: 5px 8px; overflow: hidden; background: linear-gradient(180deg, rgba(14,17,22,.9), rgba(8,10,13,.92)); border: 1px solid var(--line); border-radius: 0 12px 12px 0; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.lg-stats[hidden] { display: none; }
.lg-st { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.lg-st b { font-family: var(--display); font-size: 16px; line-height: 1; font-weight: 600; color: #f2f4f7; font-variant-numeric: tabular-nums; }
.lg-st span { font-size: 9px; line-height: 1.1; letter-spacing: .14em; color: var(--muted); }
.lg-st.up b { animation: lgstat .6s ease-out; }
@keyframes lgstat { 0% { transform: scale(1.4); color: var(--gc); } 100% { transform: scale(1); } }
/* the shot meter legend (Tab overlay) */
.meter-legend { display: flex; flex-direction: column; gap: 6px; font-size: 13px; margin-bottom: 8px; }
.meter-legend i { display: inline-block; width: 18px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; }
.meter-legend .ml-core { background: #1fe07a; }
.meter-legend .ml-boost { background: linear-gradient(90deg, #7fe25e, #ffc23a); }
.meter-legend .ml-ring { background: rgba(127, 226, 94, .25); box-shadow: inset 0 0 0 1.5px #7fe25e; }
.hud-meter.smothered .hm-track { box-shadow: inset 0 0 0 1.5px #ff5a5a, 0 0 12px rgba(255,90,90,.55); }
.hud-meter.smothered .hm-win, .hud-meter.smothered .hm-edge { display: none !important; }

/* v0.4.2 badge activation banner (top center) */
.hud-badges { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.badge-pop { display: flex; align-items: center; gap: 12px; padding: 7px 18px 7px 8px; border-radius: 40px; background: linear-gradient(180deg, rgba(16,19,24,.94), rgba(8,10,13,.94)); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.45); opacity: 0; transform: translateY(-14px) scale(.96); transition: opacity .28s, transform .28s; --tc: #c98b4f; }
.badge-pop.on { opacity: 1; transform: none; } .badge-pop.off { opacity: 0; transform: translateY(-10px); }
.badge-pop.tier2 { --tc: #c9d1d9; } .badge-pop.tier3 { --tc: #f2c14e; } .badge-pop.tier4 { --tc: #b48cff; }
.bp-art { width: 42px; height: 42px; display: grid; place-items: center; flex: none; }
.bp-art svg { display: block; }
.badge-pop.tier4 { border: 1.5px solid transparent; background: linear-gradient(180deg, rgba(22,10,38,.96), rgba(10,6,20,.96)) padding-box, var(--hof-grad) border-box; background-size: 100% 100%, 300% 100%; animation: hofShift 5s linear infinite, hofGlow 2.4s ease-in-out infinite; }
.badge-pop.tier4 .bp-text small { background: var(--hof-grad); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hofShift 5s linear infinite; font-weight: 700; }
.bp-text { display: flex; flex-direction: column; line-height: 1.15; }
.bp-text small { font-size: 10px; letter-spacing: .18em; color: var(--tc); }
.bp-text b { font-size: 16px; letter-spacing: .02em; }
/* qp3: an Icon badge's activation (Hash-Slinging, after every dunk): the same window 20% bigger (every measure x1.2), the
   badge's full-size art (77 px = 64 x 1.2, its own gradients animating) and the spectrum border */
.badge-pop.icon { gap: 14.4px; padding: 8.4px 21.6px 8.4px 9.6px; border-radius: 48px; border: 1.8px solid transparent; background: linear-gradient(180deg, rgba(22,10,38,.96), rgba(10,6,20,.96)) padding-box, var(--hof-grad) border-box; background-size: 100% 100%, 300% 100%; animation: hofShift 5s linear infinite, hofGlow 2.4s ease-in-out infinite; --tc: #ffd84a; }
.badge-pop.icon .bp-art { width: 77px; height: 77px; }
.badge-pop.icon .bp-text small { font-size: 12px; letter-spacing: .216em; background: var(--hof-grad); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hofShift 5s linear infinite; font-weight: 700; }
.badge-pop.icon .bp-text b { font-size: 19.2px; letter-spacing: .024em; }

/* v0.4.3 pre-game intro (lower third) */
#hud.intro-on .hud-score, #hud.intro-on .hud-grade, #hud.intro-on .hud-feed, #hud.intro-on .hud-stamina { opacity: 0; }
.hud-intro { position: absolute; left: 0; right: 0; bottom: 34px; display: flex; justify-content: center; pointer-events: none; padding: 0 18px; }
.intro-card { width: min(1180px, 100%); --tc: #ffd84a; animation: introIn .45s cubic-bezier(.2,.8,.2,1) both; }
.intro-team { display: flex; align-items: baseline; gap: 14px; padding: 10px 18px; background: linear-gradient(90deg, var(--tc), rgba(0,0,0,0) 85%); border-radius: 12px 12px 0 0; color: #0d0f12; }
.intro-team b { font-family: var(--display); font-size: 30px; letter-spacing: .02em; text-transform: uppercase; }
.intro-k { font-size: 11px; letter-spacing: .24em; font-weight: 700; }
.intro-step { margin-left: auto; font-size: 11px; letter-spacing: .2em; color: rgba(255,255,255,.7); text-shadow: 0 1px 3px #000; }
.intro-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; padding: 10px; background: linear-gradient(180deg, rgba(12,15,20,.93), rgba(7,9,12,.95)); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 16px 50px rgba(0,0,0,.5); }
.intro-card.five .intro-players { grid-template-columns: repeat(5, 1fr); }
.intro-p { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,.035); border-left: 3px solid var(--tc); animation: introP .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d); }
.intro-p.me { background: rgba(255,216,74,.08); box-shadow: inset 0 0 0 1px rgba(255,216,74,.35); }
.intro-ovr { display: flex; flex-direction: column; align-items: center; min-width: 44px; }
.intro-ovr b { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--tc); }
.intro-ovr small { font-size: 9px; letter-spacing: .2em; color: var(--muted); }
.intro-who { display: flex; flex-direction: column; min-width: 0; }
.intro-who > b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intro-who > b em { font-style: normal; font-size: 10px; letter-spacing: .15em; background: var(--accent); color: #111; padding: 1px 5px; border-radius: 4px; vertical-align: 2px; }
.intro-who > small { font-size: 11px; color: var(--muted); letter-spacing: .04em; margin: 2px 0 5px; }
.intro-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.ib { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; letter-spacing: .03em; padding: 2px 8px 2px 3px; border-radius: 20px; background: #3a414b; color: #e9ecef; white-space: nowrap; }
.ib > svg { flex: none; display: block; } .ib.none { padding-left: 8px; }
.ib.bronze { background: linear-gradient(160deg, #c98652, #7c4a24); } .ib.silver { background: linear-gradient(160deg, #d9e0e8, #8794a3); color: #14171b; }
.ib.gold { background: linear-gradient(160deg, #f5d36a, #b8860b); color: #1d1606; }
.ib.hof, .tag.hof { background: var(--hof-grad); background-size: 300% 100%; color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(20,0,40,.55); animation: hofShift 6s linear infinite, hofGlow 2.4s ease-in-out infinite; }
/* the same Hall of Fame vibrance wherever it shows: badge art glows and the gradients keep moving */
@keyframes hofShift { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
@keyframes hofGlow { 0%, 100% { box-shadow: 0 0 8px rgba(255,47,179,.55), 0 0 1px rgba(255,255,255,.4) inset; } 50% { box-shadow: 0 0 14px rgba(0,229,255,.55), 0 0 1px rgba(255,255,255,.4) inset; } }
@keyframes hofArt { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255,47,179,.75)) drop-shadow(0 0 6px rgba(166,59,255,.35)); } 50% { filter: drop-shadow(0 0 4px rgba(0,229,255,.8)) drop-shadow(0 0 8px rgba(56,255,156,.3)); } }
svg.bart.hof-vibe { animation: hofArt 2.4s ease-in-out infinite; overflow: visible; }
svg.icon-art { overflow: visible; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
svg.icon-art.locked { filter: grayscale(.85) brightness(.75); opacity: .8; }
@media (prefers-reduced-motion: reduce) { .ib.hof, .tag.hof, .badge-pop.tier4, .badge-pop.icon, .badge-pop.icon .bp-text small, svg.bart.hof-vibe { animation: none; } }
.ib.none { background: rgba(255,255,255,.06); color: var(--muted); }
@keyframes introIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes introP { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .intro-card.five .intro-players { grid-template-columns: repeat(2, 1fr); } .intro-team b { font-size: 22px; } }

/* v0.4.4 now-playing ticker (early-2000s sports game style) */
.np-ticker { position: fixed; left: 18px; bottom: 18px; z-index: 60; display: flex; align-items: stretch; max-width: min(520px, 70vw); pointer-events: none; transform: translateX(-120%) skewX(-12deg); opacity: 0; transition: transform .45s cubic-bezier(.2,.9,.2,1), opacity .3s; filter: drop-shadow(0 8px 18px rgba(0,0,0,.55)); }
.np-ticker.on { transform: translateX(0) skewX(-12deg); opacity: 1; }
.np-ticker.out { transform: translateX(-120%) skewX(-12deg); opacity: 0; transition-duration: .5s; }
.np-k { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: linear-gradient(180deg, #ffd84a, #e9a91b); color: #121212; font: 900 12px/1 var(--display); letter-spacing: .16em; white-space: nowrap; }
.np-k i { font-style: normal; font-size: 16px; transform: skewX(12deg); display: inline-block; animation: npNote 1.1s ease-in-out infinite; }
.np-body { overflow: hidden; background: linear-gradient(180deg, rgba(14,17,22,.96), rgba(6,8,11,.96)); border: 1px solid rgba(255,216,74,.45); border-left: 0; padding: 7px 16px 6px; min-width: 200px; }
.np-scroll { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; transform: skewX(12deg); }
.np-scroll.long { animation: npScroll 6.5s linear .8s both; }
.np-scroll b { font-family: var(--display); font-size: 17px; letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.np-scroll span { font-size: 13px; color: var(--accent); font-weight: 700; }
.np-scroll em { font-style: normal; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
@keyframes npScroll { 0%, 12% { transform: skewX(12deg) translateX(0); } 100% { transform: skewX(12deg) translateX(-45%); } }
@keyframes npNote { 50% { transform: skewX(12deg) translateY(-2px) rotate(-8deg); } }
#hud:not([hidden]) ~ .np-ticker { bottom: 96px; }
.intro-who > b em.sq { background: #36e07a; } .intro-who > b em.fr { background: rgba(255,216,74,.25); color: var(--accent); }
/* v0.4.5 takeover / hot / cold status */
.hud-status { position: absolute; left: 18px; bottom: 132px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; pointer-events: none; font-family: var(--display); letter-spacing: .06em; }
.hud-status > span { background: rgba(10,12,18,.72); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 5px 10px; font-size: 13px; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.hud-status .st-hot { color: #ffb347; border-color: rgba(255,140,40,.6); box-shadow: 0 0 14px rgba(255,110,20,.35); }
.hud-status .st-cold { color: #a9e4ff; border-color: rgba(120,200,255,.6); box-shadow: 0 0 14px rgba(90,170,255,.3); }
.hud-status .st-to small { font-size: 11px; opacity: .8; }
.hud-status .st-to i { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #f2c14e var(--p), rgba(255,255,255,.15) var(--p)); }
.hud-status .st-to.on { color: #111; background: linear-gradient(90deg, #f2c14e, #ff8a3d); border-color: transparent; box-shadow: 0 0 18px rgba(255,170,60,.55); }


/* ---------- v0.4.7.5 park: court overview, court bounty seals, the Got Next ticker ---------- */
.court-tags { position: fixed; inset: 0; pointer-events: none !important; z-index: 3; }
.court-tag { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.ic-flame { width: 11px; height: 14px; color: #ff9a2e; vertical-align: -2px; margin-right: 3px; filter: drop-shadow(0 0 4px rgba(255,140,40,.6)); }
.ic-bounty { width: 18px; height: 18px; color: #f5c542; flex: none; filter: drop-shadow(0 0 6px rgba(245,197,66,.55)); }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; margin-left: 6px; vertical-align: 1px; animation: liveDot 1.4s ease-in-out infinite; }
@keyframes liveDot { 50% { opacity: .35; } }
.court-tag.ov { min-width: 168px; padding: 9px 12px 10px; border-radius: 12px; background: linear-gradient(180deg, rgba(16,19,25,.9), rgba(9,11,14,.93)); border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(0,0,0,.5); text-align: center; }
.court-tag.ov::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: rgba(9,11,14,.93); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.court-tag.ov.has-bounty { border-color: rgba(245,197,66,.55); box-shadow: 0 0 0 1px rgba(245,197,66,.18), 0 12px 34px rgba(0,0,0,.5), 0 0 26px rgba(245,197,66,.18); }
.court-tag.ov.mine { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.ct-name { font-family: var(--display); font-size: 12px; letter-spacing: .14em; color: var(--muted); }
.ct-score { display: flex; align-items: baseline; justify-content: center; gap: 7px; margin-top: 3px; }
.ct-score span { font-family: var(--display); font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.ct-score b { font-family: var(--display); font-size: 28px; line-height: 1; color: #fff; }
.ct-score i { font-style: normal; color: var(--dim); }
.ct-open { font-family: var(--display); font-size: 15px; letter-spacing: .1em; color: var(--dim); margin-top: 4px; }
.ct-meta { font-size: 11px; color: var(--muted); margin-top: 3px; letter-spacing: .04em; }
.ct-streak { display: inline-flex; align-items: center; margin-top: 6px; padding: 2px 8px; border-radius: 99px; background: rgba(255,140,40,.12); color: #ffb366; font-family: var(--display); font-size: 12px; letter-spacing: .08em; }
.ct-bounty { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; padding: 4px 8px; border-radius: 8px; background: linear-gradient(90deg, rgba(245,197,66,.18), rgba(245,197,66,.06)); color: #f8d26a; font-family: var(--display); font-size: 13px; letter-spacing: .06em; }
.ct-you { margin-top: 6px; font-family: var(--display); font-size: 12px; letter-spacing: .12em; color: #111; background: var(--accent); border-radius: 6px; padding: 2px 6px; }
.court-tag.roam .ct-seal { display: flex; align-items: center; gap: 8px; padding: 6px 11px 6px 8px; border-radius: 99px; background: rgba(12,10,4,.82); border: 1px solid rgba(245,197,66,.5); box-shadow: 0 0 22px rgba(245,197,66,.25); animation: sealBob 2.4s ease-in-out infinite; }
.court-tag.roam .ct-seal .ic-bounty { width: 26px; height: 26px; }
.court-tag.roam .ct-seal b { display: block; font-family: var(--display); font-size: 14px; letter-spacing: .06em; color: #f8d26a; white-space: nowrap; }
.court-tag.roam .ct-seal small { display: block; font-size: 11px; color: #e9d9a8; white-space: nowrap; }
@keyframes sealBob { 50% { transform: translateY(-5px); } }
.ov-head { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 9px 18px; border-radius: 12px; background: rgba(10,12,16,.86); border: 1px solid var(--line); z-index: 4; }
.ov-head b { font-family: var(--display); font-size: 18px; letter-spacing: .16em; }
.ov-head small { font-family: var(--display); font-size: 12px; letter-spacing: .14em; color: #ff6b6b; margin-left: 3px; }
.ov-head em { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 14px; }
body.overview-on #prompt, body.overview-on .toast-wrap { opacity: 0; }
.gn-ticker { position: fixed; right: 22px; bottom: 22px; width: 300px; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, rgba(15,18,24,.94), rgba(8,10,13,.96)); border: 1px solid var(--line); box-shadow: 0 12px 36px rgba(0,0,0,.5); z-index: 4; animation: tickIn .28s ease-out; }
@keyframes tickIn { from { transform: translateY(14px); opacity: 0; } }
.gt-head { display: flex; align-items: flex-end; gap: 8px; padding: 7px 12px 6px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.03); }
.gt-head span { display: block; font-size: 9px; letter-spacing: .18em; color: var(--dim); }
.gt-head b { display: block; font-family: var(--display); font-size: 14px; letter-spacing: .08em; white-space: nowrap; }
.gt-head em { font-style: normal; margin-left: auto; font-family: var(--display); font-size: 11px; letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
.gt-row { display: flex; align-items: center; gap: 9px; padding: 6px 12px; }
.gt-row i { width: 4px; height: 18px; border-radius: 2px; background: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent); }
.gt-row span { flex: 1; font-family: var(--display); font-size: 14px; letter-spacing: .06em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-row small { font-family: var(--display); font-size: 12px; color: #ffb366; }
.gt-row b { font-family: var(--display); font-size: 22px; min-width: 28px; text-align: right; color: var(--muted); }
.gt-row.lead span, .gt-row.lead b { color: #fff; }
.gt-empty { padding: 10px 12px; font-size: 12px; color: var(--muted); }
.gt-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 12px 7px; border-top: 1px solid var(--line); font-family: var(--display); font-size: 11px; letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
.gt-foot.go { color: var(--accent); }
.gt-bounty { display: inline-flex; align-items: center; gap: 4px; color: #f8d26a; }
.gt-bounty .ic-bounty { width: 14px; height: 14px; }
.bounty-result { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; padding: 10px 14px; border-radius: 12px; background: linear-gradient(90deg, rgba(245,197,66,.2), rgba(245,197,66,.04)); border: 1px solid rgba(245,197,66,.45); }
.bounty-result .ic-bounty { width: 34px; height: 34px; }
.bounty-result b { display: block; font-family: var(--display); font-size: 20px; letter-spacing: .05em; color: #f8d26a; }
.bounty-result small { color: #e9d9a8; }

/* ---------- v0.4.7.5 HUD polish (same look, tighter): name tags on a soft plate, cleaner feed, sharper scoreboard ---------- */
.ptag { padding: 2px 7px 2px 6px; border-radius: 6px; background: rgba(8,10,13,.42); text-shadow: 0 1px 3px rgba(0,0,0,.85); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.ptag.me { background: rgba(20,16,4,.55); box-shadow: inset 0 0 0 1px rgba(255,216,74,.35); }
.feed-item { background: linear-gradient(90deg, rgba(12,14,19,.88), rgba(12,14,19,.66)); box-shadow: 0 6px 18px rgba(0,0,0,.28); letter-spacing: .01em; }
.hud-score { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 40px rgba(0,0,0,.5); }
.hud-cam { border: 1px solid var(--line); background: rgba(10,12,16,.8); border-radius: 8px; }

/* v0.4.7.5 qp3: the alley-oop button press */
.hud-oop { position: absolute; left: 0; top: 0; width: 88px; height: 88px; opacity: 0; transition: opacity .1s; pointer-events: none; text-align: center; }
.hud-oop.on { opacity: 1; }
.hud-oop .ho-ring { position: absolute; left: 10px; top: 0; width: 68px; height: 68px; border-radius: 50%; background: rgba(8,10,13,.55); box-shadow: 0 0 0 2px rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.45); }
.hud-oop .ho-ring i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--oop, #ffd84a) calc(var(--f, 1) * 360deg), transparent 0); -webkit-mask: radial-gradient(circle, transparent 27px, #000 28px); mask: radial-gradient(circle, transparent 27px, #000 28px); }
.hud-oop .ho-btn { position: absolute; left: 10px; top: 0; width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 22px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.hud-oop .ho-btn .pad-glyph { min-width: 34px; height: 34px; font-size: 18px; padding: 0 8px; }
.hud-oop .ho-btn kbd { font-size: 18px; padding: 4px 10px; }
.hud-oop .ho-k { position: absolute; left: 0; right: 0; top: 72px; font-family: var(--display); font-size: 11px; letter-spacing: .14em; color: #ffd84a; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.hud-oop[data-state="wait"] { --oop: #9aa3ad; }
.hud-oop[data-state="wait"] .ho-btn { opacity: .75; transform: scale(.9); }
.hud-oop[data-state="open"] { --oop: #3ddc84; }
.hud-oop[data-state="open"] .ho-btn { animation: oop-pulse .35s ease-in-out infinite alternate; }
.hud-oop[data-state="hit"] .ho-btn { color: #3ddc84; font-size: 20px; } .hud-oop[data-state="hit"] .ho-ring { box-shadow: 0 0 0 2px #3ddc84, 0 0 18px #3ddc84; }
.hud-oop[data-state="miss"] .ho-btn { color: #ff5a5a; font-size: 11px; letter-spacing: .06em; } .hud-oop[data-state="miss"] .ho-ring { box-shadow: 0 0 0 2px #ff5a5a; }
@keyframes oop-pulse { from { transform: scale(1); } to { transform: scale(1.14); } }

/* v0.4.7.5 qp3: everyone else's shot feedback (Settings → Shot feedback → Everyone) */
.hud-feedback.other b { font-size: 16px; }
.hud-feedback.other small { font-size: 10px; }
.hud-feedback.other { opacity: 0; } .hud-feedback.other.on { opacity: .9; }