/* Match HUD — mockup-1: manga score card, KIZUNA portraits, callout bursts. Scales with --hud-scale. */
.kk-hud {
  --ink: #2b1b33; --s: var(--hud-scale, 1);
  position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden;
  font-family: 'M PLUS Rounded 1c', system-ui, sans-serif; font-weight: 800; color: #fff;
  font-size: max(8px, min(1.481vh, 0.8333vw));
}
.kk-hud * { box-sizing: border-box; }

/* ---------- score card ---------- */
.hud-score {
  position: absolute; left: 1.6em; top: 1.4em; transform-origin: 0 0; scale: var(--s);
  display: flex; align-items: center; gap: .8em; padding: .55em 2.6em .5em 4.6em; min-width: 25em;
  background: linear-gradient(180deg, #2b2f55, #171a35 70%); border: .28em solid #f3ecff; outline: .2em solid var(--ink);
  clip-path: polygon(1.6em 0, 100% 0, calc(100% - 1.6em) 100%, 0 100%);
  box-shadow: inset 0 0 0 .2em rgba(255,255,255,.08);
  animation: hud-drop .6s cubic-bezier(.34,1.56,.64,1) both;
}
.hud-score::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, transparent 0 1.6em, rgba(255,255,255,.035) 1.6em 1.9em); }
.hud-score-petals { position: absolute; left: -.6em; top: -1em; width: 6em; height: 6em; background: url('../assets/ui/stickers/sakura.png') center/contain no-repeat; transform: rotate(-14deg); z-index: 2; filter: drop-shadow(0 .1em .1em rgba(0,0,0,.4)); }
.hud-ball { position: absolute; left: 1.6em; top: 50%; width: 2.9em; height: 2.9em; transform: translateY(-50%); z-index: 3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28' fill='%23ffe14a' stroke='%232b1b33' stroke-width='4'/%3E%3Cg fill='%23c98a00'%3E%3Ccircle cx='24' cy='20' r='4'/%3E%3Ccircle cx='40' cy='20' r='4'/%3E%3Ccircle cx='32' cy='33' r='4'/%3E%3Ccircle cx='20' cy='42' r='4'/%3E%3Ccircle cx='44' cy='42' r='4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; }
.hud-digits { position: relative; z-index: 1; display: flex; align-items: center; gap: .35em; font-family: 'Dela Gothic One', 'Bangers', sans-serif; font-size: 4em; line-height: 1; letter-spacing: .02em; }
.hud-digits b { font-weight: 400; display: inline-block; min-width: .7em; text-align: center; -webkit-text-stroke: .07em var(--ink); paint-order: stroke fill; filter: drop-shadow(0 .05em 0 rgba(0,0,0,.5)); }
.hud-digits .d0 { background: linear-gradient(180deg, #fff27a, #ffb020 55%, #ff7a1a); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; filter: drop-shadow(.04em .04em 0 var(--ink)) drop-shadow(-.03em -.03em 0 var(--ink)) drop-shadow(.03em -.03em 0 var(--ink)) drop-shadow(-.03em .03em 0 var(--ink)); }
.hud-digits .d1 { background: linear-gradient(180deg, #ffffff, #b7dcff 60%, #6fb2ff); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; filter: drop-shadow(.04em .04em 0 var(--ink)) drop-shadow(-.03em -.03em 0 var(--ink)) drop-shadow(.03em -.03em 0 var(--ink)) drop-shadow(-.03em .03em 0 var(--ink)); }
.hud-digits .d2 { background: linear-gradient(180deg, #ffd0dc, #ff6f96 55%, #ff3d6e); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; filter: drop-shadow(.04em .04em 0 var(--ink)) drop-shadow(-.03em -.03em 0 var(--ink)) drop-shadow(.03em -.03em 0 var(--ink)) drop-shadow(-.03em .03em 0 var(--ink)); }
.hud-digits .sep { font-style: normal; color: #f3ecff; font-size: .7em; }
.hud-digits b.pop { animation: digit-pop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes digit-pop { 0% { transform: scale(1.8) rotate(-10deg); } 100% { transform: none; } }
.hud-sub { position: absolute; left: 4.8em; bottom: -1.75em; display: flex; gap: .6em; align-items: center; font-size: .95em; }
.hud-games { display: inline-flex; gap: .3em; align-items: center; padding: .1em .7em; background: var(--ink); border-radius: 99px; color: #ffd23f; letter-spacing: .1em; }
.hud-games em { font-style: normal; color: #fff; font-size: .85em; }
.hud-games i { font-style: normal; display: none; }
.kk-hud.cb .hud-games i { display: inline; } .hud-games .sh0 { color: #ff8a5a; } .hud-games .sh1 { color: #9a9bff; }
.hud-gp { color: #ff5f8f; font-family: 'Bangers', sans-serif; font-size: 1.4em; letter-spacing: .06em; -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; animation: blink-hud .7s steps(2) infinite; }
@keyframes blink-hud { 50% { opacity: .35; } }
.hud-score.flash0, .hud-score.flash1 { animation: score-flash .6s ease-out; }
@keyframes score-flash { 0% { filter: brightness(1.8); transform: scale(1.06); } }
.kk-hud.calm .hud-score.flash0, .kk-hud.calm .hud-score.flash1 { animation: none; }

.hud-logo { position: absolute; right: 1.6em; top: 1em; width: 13em; filter: drop-shadow(0 .2em .3em rgba(0,0,0,.35)); transform: rotate(-3deg); scale: var(--s); transform-origin: 100% 0; }

/* ---------- portraits ---------- */
.hud-team { position: absolute; bottom: 1.2em; display: flex; gap: .5em; align-items: flex-end; scale: var(--s); }
.hud-team.t0 { left: 1.2em; transform-origin: 0 100%; }
.hud-team.t1 { right: 1.2em; transform-origin: 100% 100%; }
.hud-card { position: relative; width: 14.4em; animation: hud-rise .6s cubic-bezier(.34,1.56,.64,1) both; }
.hud-team.t1 .hud-card { animation-name: hud-rise; }
.hud-face { position: relative; height: 10em; margin: 0 .8em -1.2em 1.4em; clip-path: polygon(10% 0, 100% 3%, 92% 100%, 0 100%); background: #2b1b33; }
.hud-face-bg { position: absolute; inset: .3em; clip-path: polygon(10% 0, 100% 3%, 92% 100%, 0 100%); background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 70%, #fff), color-mix(in srgb, var(--cc) 60%, #5a2a7a)); }
.hud-face img { position: absolute; inset: .3em; width: calc(100% - .6em); height: calc(100% - .6em); object-fit: cover; object-position: 50% 18%; clip-path: polygon(10% 0, 100% 3%, 92% 100%, 0 100%); }
.hud-petal { position: absolute; width: 2.4em; height: 2.4em; background: url('../assets/ui/stickers/sakura.png') center/contain no-repeat; z-index: 2; }
.hud-petal.a { right: -.2em; top: .6em; transform: rotate(18deg); } .hud-petal.b { left: .4em; bottom: 1.6em; width: 1.8em; height: 1.8em; transform: rotate(-20deg); }
.hud-ptag { position: absolute; left: 1.4em; top: .5em; z-index: 3; padding: 0 .45em; background: #ffd23f; color: var(--ink); border: .14em solid var(--ink); border-radius: .3em; font-family: 'Bangers', sans-serif; font-size: 1.1em; letter-spacing: .05em; }
.hud-inj { position: absolute; right: 1.4em; bottom: 1.6em; z-index: 3; font-size: 1.4em; }
.hud-items { position: absolute; left: 1.2em; bottom: 1.5em; z-index: 3; display: flex; gap: .2em; }
.hud-items img { width: 2.4em; height: 2.4em; object-fit: contain; filter: drop-shadow(0 .1em .1em rgba(0,0,0,.5)); animation: digit-pop .4s both; }
.hud-plate { position: relative; z-index: 4; padding: .45em 1em .4em 1.1em; background: linear-gradient(90deg, #1b1630, #2b1f45); clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%); border-bottom: .22em solid var(--gc); }
.hud-plate::before { content: ''; position: absolute; left: -10%; right: -10%; top: 0; height: .25em; background: var(--gc); opacity: .9; }
.hud-name { display: block; font-family: 'Bangers', sans-serif; font-weight: 400; font-size: min(1.7em, calc(15em / var(--len, 6))); letter-spacing: .06em; font-style: italic; line-height: 1.1; text-shadow: .08em .08em 0 #000; white-space: nowrap; padding-right: 1.4em; }
.hud-shape { position: absolute; right: .9em; top: .35em; font-size: 1.1em; display: none; }
.kk-hud.cb .hud-shape { display: block; } .hud-team.t0 .hud-shape { color: #ff8a5a; } .hud-team.t1 .hud-shape { color: #9a9bff; }
.hud-gauge { display: flex; gap: .3em; margin: .25em 0 .1em; }
.hud-gauge i { position: relative; flex: 1; height: .95em; border-radius: .3em; background: rgba(255,255,255,.12); border: .12em solid rgba(255,255,255,.35); overflow: hidden; transform: skewX(-14deg); }
.hud-gauge s { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(180deg, color-mix(in srgb, var(--gc), #fff 55%), var(--gc)); transition: transform .25s ease-out; }
.hud-gauge i.full { border-color: #fff; box-shadow: 0 0 .7em .1em var(--gc); }
.hud-card.maxed .hud-gauge i { animation: gauge-glow .8s ease-in-out infinite alternate; }
@keyframes gauge-glow { to { box-shadow: 0 0 1.2em .35em var(--gc); filter: brightness(1.25); } }
.kk-hud.calm .hud-card.maxed .hud-gauge i { animation: none; }
.hud-kizuna { display: block; font-family: 'Bangers', sans-serif; font-style: italic; font-size: 1em; letter-spacing: .12em; color: var(--gc); text-shadow: .06em .06em 0 #000; }
.hud-strain { position: absolute; left: 1.4em; right: 1.6em; bottom: -.5em; height: .3em; background: rgba(0,0,0,.3); display: none; }
.hud-strain s { position: absolute; inset: 0; background: #ff5f5f; transform-origin: 0 50%; transform: scaleX(0); }
.hud-card.serving .hud-plate::after { content: 'SERVE'; position: absolute; right: .8em; bottom: .45em; padding: 0 .4em; font-size: .7em; letter-spacing: .1em; background: #ffd23f; color: var(--ink); border-radius: .2em; }
.hud-card.pop { animation: card-pop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes card-pop { 0% { transform: scale(1.12); filter: brightness(1.6); } }
.hud-card.hurt { animation: card-hurt .5s ease-out; }
@keyframes card-hurt { 0%,100% { transform: none; } 20% { transform: translateX(-.5em) rotate(-3deg); filter: sepia(1) hue-rotate(-50deg) saturate(3); } 40% { transform: translateX(.5em) rotate(2deg); } 60% { transform: translateX(-.3em); } }
.hud-tag { position: absolute; left: 50%; top: -1em; z-index: 6; transform: translateX(-50%); padding: .1em .7em; border-radius: .3em; border: .16em solid var(--ink); font-family: 'Bangers', sans-serif; font-size: 1.6em; letter-spacing: .05em; white-space: nowrap; animation: tag-float 1.3s ease-out both; }
.hud-tag.good { background: #ffd23f; color: var(--ink); } .hud-tag.bad { background: #ff4f6b; color: #fff; } .hud-tag.flash { background: #8fe3ff; color: var(--ink); }
@keyframes tag-float { 0% { opacity: 0; transform: translate(-50%, 1em) scale(.5); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -2em); } }

/* ---------- callouts ---------- */
.hud-callouts { position: absolute; inset: 0; }
.hud-burst { position: absolute; top: 30%; width: 34em; height: 15em; display: grid; place-items: center; animation: burst-in .35s cubic-bezier(.34,1.56,.64,1) both; }
.hud-burst.side0 { right: -.6em; } .hud-burst.side1 { left: -.6em; }
.hud-burst .lines { position: absolute; inset: 1em -2em; background: repeating-linear-gradient(170deg, transparent 0 .9em, rgba(255,95,143,.85) .9em 1.25em, transparent 1.25em 2.4em);
  mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); transform: skewY(-8deg); animation: lines-slide .5s linear infinite; }
@keyframes lines-slide { to { background-position: -6em 0; } }
.hud-burst .burst { position: relative; padding: 2.4em 3.2em; background: #fff; transform: rotate(-8deg);
  clip-path: polygon(0% 32%, 9% 26%, 4% 8%, 20% 17%, 26% 0%, 36% 15%, 50% 3%, 57% 17%, 72% 4%, 74% 20%, 92% 10%, 86% 30%, 100% 34%, 89% 47%, 100% 62%, 85% 66%, 93% 86%, 73% 78%, 66% 100%, 55% 82%, 42% 97%, 37% 80%, 20% 94%, 21% 75%, 3% 80%, 11% 63%, 0% 52%, 10% 44%);
  filter: drop-shadow(0 0 0 #000); }
.hud-burst .burst::before { content: ''; position: absolute; inset: .45em; background: linear-gradient(180deg, #fff, #fff0f6); clip-path: inherit; z-index: -1; }
.hud-burst { filter: drop-shadow(.35em .35em 0 var(--ink)) drop-shadow(-.15em -.15em 0 var(--ink)) drop-shadow(.15em -.15em 0 var(--ink)) drop-shadow(-.15em .15em 0 var(--ink)); }
.hud-burst span { display: block; max-width: 11em; text-align: center; font-family: 'Bangers', sans-serif; font-size: 3.6em; line-height: .95; letter-spacing: .03em; color: var(--ink); font-style: italic; }
.hud-burst.special span { color: #d6204f; }
.hud-burst.special .burst { background: #ffe14a; }
.hud-burst.power span { color: #e23a4e; font-size: 4.4em; }
.hud-burst.duel .burst { background: #b9f0ff; }
.hud-burst.out { animation: burst-out .35s ease-in both; }
@keyframes burst-in { from { opacity: 0; transform: translateX(var(--bx, 6em)) scale(.4) rotate(12deg); } }
.hud-burst.side1 { --bx: -6em; }
@keyframes burst-out { to { opacity: 0; transform: translateX(var(--bx, 6em)) scale(.8); } }
.kk-hud.calm .hud-burst .lines { animation: none; }

.hud-bubble { position: absolute; left: 50%; top: 13%; padding: .3em 1.2em .35em; background: #fff; color: var(--ink); border: .25em solid var(--ink); border-radius: 2em;
  font-family: 'Dela Gothic One', 'Bangers', sans-serif; font-size: 3em; white-space: nowrap; opacity: 0; transform: translate(-50%, -.5em) scale(.6); pointer-events: none; transition: opacity .2s, transform .3s cubic-bezier(.34,1.56,.64,1); box-shadow: .15em .15em 0 var(--ink); }
.hud-bubble::after { content: ''; position: absolute; bottom: -.62em; left: 30%; width: .9em; height: .7em; background: #fff; border: .25em solid var(--ink); border-top: 0; border-left: 0; transform: skewX(30deg) rotate(30deg); }
.hud-bubble.right::after { left: auto; right: 30%; transform: skewX(-30deg) rotate(-30deg); }
.hud-bubble.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.hud-ribbon { position: absolute; left: 50%; top: 21%; padding: .25em 1.6em; background: #2b1b33; color: #ffd23f; font-family: 'Bangers', sans-serif; font-size: 2.2em; letter-spacing: .1em; transform: translateX(-50%) skewX(-12deg) scaleX(0); transition: transform .25s cubic-bezier(.34,1.56,.64,1); border: .12em solid #ffd23f; }
.hud-ribbon.show { transform: translateX(-50%) skewX(-12deg) scaleX(1); }
.hud-banner { position: absolute; left: 50%; top: 38%; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%) scale(0); opacity: 0; }
.hud-banner b { font-family: 'Bangers', sans-serif; font-weight: 400; font-size: 9em; line-height: .9; letter-spacing: .04em; color: #ffd23f; -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; text-shadow: .08em .08em 0 #ff4f87, .14em .14em 0 var(--ink); transform: rotate(-6deg); }
.hud-banner small { margin-top: .4em; font-size: 2em; padding: .1em .8em; background: var(--ink); border-radius: .3em; }
.hud-banner.fault b { color: #ff4f6b; font-size: 6.5em; text-shadow: .08em .08em 0 #fff, .14em .14em 0 var(--ink); }
.hud-banner.show { animation: banner-in .4s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes banner-in { from { transform: translate(-50%, -50%) scale(2.4) rotate(8deg); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.hud-timeout { position: absolute; left: 0; right: 0; top: 40%; padding: 1em 0; display: flex; flex-direction: column; align-items: center; background: linear-gradient(90deg, transparent, rgba(43,27,51,.85) 20%, rgba(43,27,51,.85) 80%, transparent); transform: scaleY(0); transition: transform .3s; }
.hud-timeout b { font-family: 'Bangers', sans-serif; font-weight: 400; font-size: 5em; color: #8fe3ff; letter-spacing: .08em; -webkit-text-stroke: .04em var(--ink); paint-order: stroke fill; }
.hud-timeout small { font-size: 1.6em; }
.hud-timeout.show { transform: scaleY(1); }
.kk-hud.paused .hud-callouts { opacity: 0; }
@keyframes hud-drop { from { transform: translateY(-140%); } }
@keyframes hud-rise { from { transform: translateY(130%); } }
@media (prefers-reduced-motion: reduce) { .kk-hud * { animation-duration: .01ms !important; } }
.hud-card.armed .hud-gauge i { animation: gauge-glow .35s ease-in-out infinite alternate; }
.hud-card.armed .hud-plate { box-shadow: 0 0 1.2em .2em var(--gc); }
.hud-card.charging .hud-face { filter: brightness(1.12) saturate(1.2); }
.hud-coach { position: absolute; left: 50%; bottom: 14.5em; display: flex; gap: .9em; align-items: center; max-width: 46em; padding: .7em 1.2em .7em .7em; transform: translate(-50%, 2em); opacity: 0;
  background: #fffaf0; color: #2b1b33; border: .22em solid #2b1b33; border-radius: 1em; box-shadow: .35em .4em 0 #2b1b33; transition: opacity .25s, transform .35s cubic-bezier(.34,1.56,.64,1); font-size: 1.15em; }
.hud-coach.show { opacity: 1; transform: translate(-50%, 0); }
.hud-coach img { width: 4.2em; height: 4.2em; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: .2em solid #3a6fb0; flex: none; }
.hud-coach b { display: block; font-family: 'Permanent Marker', sans-serif; font-weight: 400; color: #3a6fb0; } .hud-coach span { font-weight: 800; line-height: 1.3; }

/* ---------- audit round 1 ---------- */
/* KK-044 / KK-082: slimmer cards, aspect-aware scale, fade when a player is behind a card */
.hud-card { width: 13em; transition: opacity .25s ease; }
.hud-face { height: 8.8em; }
.hud-card.behind { opacity: .38; }
@media (max-aspect-ratio: 3/2) { .kk-hud { --s: calc(var(--hud-scale, 1) * .74); } .hud-coach { bottom: 11em; } }
/* KK-048: a team's cards follow its side of the screen */
.hud-team.t0.swap { left: auto; right: 1.2em; transform-origin: 100% 100%; flex-direction: row-reverse; }
.hud-team.t1.swap { right: auto; left: 1.2em; transform-origin: 0 100%; }
/* KK-083: bright glowing gauge pills, pulse on gain */
.hud-gauge { gap: .35em; margin: .3em 0 .15em; }
.hud-gauge i { height: 1.25em; border-radius: 99px; background: rgba(10,6,25,.65); border: .16em solid rgba(255,255,255,.7); box-shadow: inset 0 .12em .2em rgba(0,0,0,.6); }
.hud-gauge s { background: linear-gradient(180deg, #fff 0 18%, color-mix(in srgb, var(--gc), #fff 35%) 30%, var(--gc) 75%, color-mix(in srgb, var(--gc), #000 15%)); box-shadow: 0 0 .6em var(--gc); }
.hud-gauge i.full { border-color: #fff; box-shadow: 0 0 .9em .2em var(--gc), inset 0 0 .3em rgba(255,255,255,.6); }
.hud-card.maxed .hud-kizuna::after { content: ' MAX'; color: #fff; text-shadow: 0 0 .5em var(--gc), .06em .06em 0 #000; animation: blink-hud .6s steps(2) infinite; }
.hud-gauge.gain { animation: gauge-gain .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes gauge-gain { 0% { transform: scale(1.12); filter: brightness(1.8); } }
.kk-hud.calm .hud-gauge.gain { animation: none; }
/* KK-010: no specials, no gauges */
.kk-hud.no-specials .hud-gauge, .kk-hud.no-specials .hud-kizuna { display: none; }
/* KK-011: serve prompt */
.hud-serve { position: absolute; left: 50%; bottom: 15em; padding: .45em 1.3em .5em; background: #fffaf0; color: var(--ink); border: .22em solid var(--ink); border-radius: 99px; box-shadow: .3em .35em 0 var(--ink);
  font-size: 1.9em; font-weight: 900; white-space: nowrap; transform: translate(-50%, 1em) scale(.8); opacity: 0; transition: opacity .2s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.hud-serve.show { opacity: 1; transform: translate(-50%, 0) scale(1); animation: serve-bob 1.2s ease-in-out .4s infinite; }
.hud-serve kbd { display: inline-block; min-width: 1.6em; padding: 0 .35em; margin: 0 .15em; text-align: center; background: #ffd23f; border: .14em solid var(--ink); border-radius: .3em; box-shadow: 0 .15em 0 var(--ink); font-family: 'Bangers', sans-serif; font-weight: 400; letter-spacing: .04em; }
.hud-serve .hs-who { color: #e23a4e; }
@keyframes serve-bob { 50% { transform: translate(-50%, -.25em) scale(1); } }
.kk-hud.calm .hud-serve.show { animation: none; }
.hud-ptag.named { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 900; font-size: .85em; letter-spacing: 0; max-width: 11em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* KK-046: digit pop in sync with the spoken score call */
.hud-digits b.call { animation: digit-call .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes digit-call { 0% { transform: scale(1); } 35% { transform: scale(1.45) translateY(-.08em); filter: brightness(1.5) drop-shadow(0 0 .25em #fff6b0); } 100% { transform: none; } }
.kk-hud.calm .hud-digits b.call { animation-duration: .25s; }

/* ---------- camera view label (match start + view changes) ---------- */
.hud-cam { position: absolute; left: 50%; top: 1.5em; display: flex; align-items: center; gap: .6em; padding: .45em 1.3em .45em .5em;
  background: #fff8ec; color: var(--ink); border: .18em solid var(--ink); border-radius: 99em; box-shadow: .22em .22em 0 var(--ink);
  transform: translate(-50%, -160%) rotate(-1deg); opacity: 0; transition: transform .38s cubic-bezier(.34,1.56,.64,1), opacity .25s; scale: var(--s); transform-origin: 50% 0; white-space: nowrap; }
.hud-cam.show { transform: translate(-50%, 0) rotate(-1deg); opacity: 1; }
.hud-cam b { font-family: 'Permanent Marker', sans-serif; font-weight: 400; font-size: 1.35em; letter-spacing: .02em; }
.hud-cam small { font-size: .9em; color: rgba(43,27,51,.62); padding-left: .6em; border-left: .14em solid rgba(43,27,51,.25); }
.hud-cam-ico { width: 2.1em; height: 2.1em; border-radius: 50%; border: .16em solid var(--ink); flex: none; background: #3f8cff center/62% no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='14' height='11' rx='2'/%3E%3Cpath d='M16 11l6-3.5v10L16 14z'/%3E%3C/svg%3E"); }
.hud-cam-ico.broadcast { background-color: #ff4f87; }
.hud-cam.broadcast { border-color: var(--ink); }
body.reduced-motion .hud-cam { transition: opacity .2s; transform: translate(-50%, 0) rotate(-1deg); }