/*
 * BRO RUN: WICKSTORM v9 — Spieloberflaeche.
 *
 * HERKUNFT: BRO_RUN_WICKSTORM_v9_SIDE_RUNNER_FINAL.html (Stilbloecke
 * final / v4 / v6-jump-fix / v7 / v8 / v9-side-runner-final). Woertlich
 * uebernommen; nichts neu ausgemessen.
 *
 * NICHT UEBERNOMMEN:
 *   * Regeln der Demo-Vorschauseite (:root, html/body, .app, .topbar …).
 *   * ALLE Regeln fuer `#robotHost` — das alte DOM-Rig des Dashboards. V9
 *     hat eine eigene Seitenansicht (`.bro-v9-character`), und das
 *     Dashboard-Rig wird im Spiel bewusst nicht gerendert. Damit sind
 *     nebenbei die gestapelten drop-shadow-Filter und `perspective` weg,
 *     die vorher Bildrate gekostet haben.
 *
 * Erzeugt von build-v9-css.py — nicht von Hand pflegen.
 */
#broGame{--bro-cyan:#00ffdc;--bro-red:#ff4d67;--bro-green:#32e58f;--bro-gold:#ffd166;--bro-orange:#f7931a;--bro-bg:#03060b}
#broGame{position:fixed;inset:0;z-index:2;background:#02050a;color:#eaffff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden}
#broCanvas,#broFxCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#broCanvas{z-index:1}#broFxCanvas{z-index:45;pointer-events:none}
.bro-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 48% 42%,transparent 38%,rgba(0,0,0,.62) 100%);z-index:4}
.bro-scan{position:absolute;inset:0;pointer-events:none;opacity:.07;background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(255,255,255,.07) 4px);mix-blend-mode:soft-light;z-index:5}
.bro-speedlines{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;background:repeating-linear-gradient(100deg,transparent 0 60px,rgba(0,255,220,.035) 61px 62px,transparent 63px 120px);transform:translateX(-8%);transition:opacity .2s}.bro-speedlines.on{opacity:1;animation:broLines .45s linear infinite}
.bro-flash{position:absolute;inset:0;z-index:50;pointer-events:none;opacity:0;background:radial-gradient(circle at 35% 65%,rgba(247,147,26,.36),transparent 32%),rgba(255,255,255,.07);transition:opacity .2s}.bro-flash.on{opacity:1}
/* Character: runner pose. Same fixed mascot, but no longer flat front-facing. */
@keyframes broRunBody{0%,100%{transform:translate(8px,4px) rotate(-5deg)}25%{transform:translate(11px,-6px) rotate(-6deg)}50%{transform:translate(8px,4px) rotate(-4deg)}75%{transform:translate(10px,-7px) rotate(-5.5deg)}}
@keyframes broRunHead{0%,100%{transform:translate(4px,1px) rotate(2deg)}50%{transform:translate(9px,-3px) rotate(4deg)}}
@keyframes broRunLA{0%,100%{transform:rotate(34deg)}50%{transform:rotate(-32deg)}}@keyframes broRunRA{0%,100%{transform:rotate(-38deg)}50%{transform:rotate(35deg)}}
@keyframes broRunLF{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-15deg)}}@keyframes broRunRF{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(15deg)}}
@keyframes broRunLL{0%,100%{transform:rotate(-21deg)}50%{transform:rotate(24deg)}}@keyframes broRunRL{0%,100%{transform:rotate(24deg)}50%{transform:rotate(-21deg)}}
@keyframes broRunLS{0%,100%{transform:rotate(29deg)}50%{transform:rotate(-12deg)}}@keyframes broRunRS{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(29deg)}}
@keyframes broRunShadow{0%,50%,100%{transform:translateX(13px) scaleX(.92);opacity:.3}25%,75%{transform:translateX(13px) scaleX(.72);opacity:.18}}
@keyframes broDamage{from{margin-left:-8px;filter:brightness(1.5)}to{margin-left:8px;filter:brightness(.95)}}
@keyframes broBounceTilt{0%{rotate:0deg}35%{rotate:-7deg}65%{rotate:6deg}100%{rotate:0deg}}
@keyframes shieldPulse{0%,100%{opacity:.5;transform:scale(.98)}50%{opacity:1;transform:scale(1.035)}}
@keyframes broLines{from{transform:translateX(-12%)}to{transform:translateX(0)}}
.bro-hud{position:absolute;top:14px;left:14px;right:14px;z-index:20;display:flex;gap:10px;align-items:flex-start;justify-content:space-between;pointer-events:none}
.bro-hud-left,.bro-hud-right{display:flex;gap:7px;flex-wrap:wrap}.bro-pill{min-width:92px;padding:8px 10px;border:1px solid rgba(0,255,220,.18);border-radius:12px;background:rgba(4,11,19,.77);backdrop-filter:blur(10px);box-shadow:0 8px 28px rgba(0,0,0,.24)}.bro-pill span{display:block;font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:#73929b}.bro-pill b{display:block;margin-top:2px;font-size:16px;color:#f2ffff}.bro-pill b.cyan{color:var(--bro-cyan)}.bro-pill b.orange{color:var(--bro-orange)}.bro-hearts{letter-spacing:2px;color:#ff6c7e}
.bro-title{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:18;text-align:center;pointer-events:none}.bro-title strong{font-size:13px;letter-spacing:.2em}.bro-title small{display:block;margin-top:1px;color:#67838e;font-size:8px;letter-spacing:.22em}.bro-zone{margin-top:5px;color:var(--bro-cyan);font-size:9px;letter-spacing:.15em;transition:color .3s}
.bro-mode-meter{position:absolute;top:72px;left:14px;width:min(310px,calc(100vw - 28px));z-index:20;pointer-events:none}.bro-mode-label{display:flex;justify-content:space-between;font-size:9px;color:#83a1aa;margin-bottom:5px}.bro-mode-track{height:9px;border:1px solid rgba(0,255,220,.2);background:rgba(0,0,0,.38);border-radius:999px;overflow:hidden}.bro-mode-fill{height:100%;width:0;background:linear-gradient(90deg,#00a994,#00ffdc);box-shadow:0 0 14px rgba(0,255,220,.55);transition:width .16s ease}
.bro-message{position:absolute;top:104px;left:50%;transform:translate(-50%,-8px);z-index:22;min-width:220px;max-width:min(560px,calc(100vw - 28px));text-align:center;padding:9px 14px;border-radius:12px;border:1px solid rgba(0,255,220,.22);background:rgba(3,10,17,.84);backdrop-filter:blur(10px);color:#d7f7f1;font-size:12px;opacity:0;transition:.22s;pointer-events:none}.bro-message.show{opacity:1;transform:translate(-50%,0)}
.bro-storm{position:absolute;top:111px;right:16px;z-index:23;padding:7px 10px;border:1px solid rgba(255,77,103,.38);border-radius:999px;background:rgba(30,5,11,.7);color:#ff7b89;font-size:9px;letter-spacing:.14em;opacity:0;transform:translateY(-6px);transition:.2s;pointer-events:none}.bro-storm.on{opacity:1;transform:none;box-shadow:0 0 20px rgba(255,77,103,.12)}
.bro-overlay{position:absolute;inset:0;z-index:60;display:grid;place-items:center;background:linear-gradient(180deg,rgba(2,6,11,.42),rgba(2,5,9,.86));backdrop-filter:blur(4px)}
.bro-panel{width:min(690px,calc(100vw - 28px));padding:24px;border-radius:22px;border:1px solid rgba(0,255,220,.25);background:linear-gradient(145deg,rgba(8,18,30,.97),rgba(3,9,16,.97));box-shadow:0 30px 90px rgba(0,0,0,.52),0 0 60px rgba(0,255,220,.05)}
.bro-logo{display:flex;align-items:center;gap:12px;margin-bottom:16px}.bro-logo-mark{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:#08131e;border:1px solid rgba(0,255,220,.45);color:var(--bro-cyan);font-weight:900;font-size:20px;box-shadow:0 0 24px rgba(0,255,220,.12)}.bro-logo h1{font-size:24px;margin:0}.bro-logo p{margin:3px 0 0;color:#7d9aa4;font-size:11px}.bro-copy{color:#a9c0c7;font-size:13px;line-height:1.55}.bro-copy b{color:#eaffff}.bro-copy em{color:var(--bro-gold);font-style:normal}
.bro-controls-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:18px 0}.bro-control{padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);text-align:center}.bro-control b{display:block;color:#eaffff;font-size:11px}.bro-control small{display:block;color:#6f8993;font-size:9px;margin-top:2px}.bro-btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.bro-button{border:1px solid rgba(255,255,255,.11);border-radius:11px;background:#0b1723;color:#dff5f4;padding:10px 15px;font-weight:700;cursor:pointer}.bro-button.primary{background:var(--bro-cyan);border-color:var(--bro-cyan);color:#00211b}.bro-button:hover{filter:brightness(1.08)}
.bro-mobile{display:none;position:absolute;left:10px;right:10px;bottom:10px;z-index:30;justify-content:space-between;align-items:end;pointer-events:none}.bro-mobile-group{display:flex;gap:8px;pointer-events:auto}.bro-touch{width:56px;height:56px;border-radius:17px;border:1px solid rgba(0,255,220,.22);background:rgba(5,14,22,.8);backdrop-filter:blur(10px);color:#dcffff;font-size:18px;font-weight:800;touch-action:none}.bro-touch.jump{width:74px;height:74px;border-radius:24px;border-color:rgba(0,255,220,.45);color:#001c18;background:var(--bro-cyan);font-size:11px}.bro-touch.slide{color:#ffd9a2;border-color:rgba(255,209,102,.28)}
.bro-paused{position:absolute;right:14px;bottom:14px;z-index:24;display:flex;gap:7px}.bro-mini{border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(5,12,20,.72);color:#9cb2b8;padding:7px 9px;font-size:10px;cursor:pointer}.bro-gameover-score{font-size:46px;color:var(--bro-cyan);font-weight:900;line-height:1;margin:10px 0 4px}.bro-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}.bro-stat{padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.025)}.bro-stat small{display:block;color:#6f8993;font-size:9px;text-transform:uppercase;letter-spacing:.1em}.bro-stat b{display:block;font-size:18px;margin-top:2px}
.bro-title{display:none}.bro-hud-right .bro-pill:nth-child(2){display:none}.bro-controls-grid{grid-template-columns:repeat(2,1fr)}.bro-stats{grid-template-columns:repeat(2,1fr)}.bro-mobile{display:flex}.bro-paused{bottom:92px}.bro-pill{min-width:73px;padding:7px 8px}.bro-pill b{font-size:13px}.bro-mode-meter{top:66px}
.bro-speedlines{animation:none!important}
.bro-noautorun{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:18;padding:6px 10px;border-radius:999px;border:1px solid rgba(0,255,220,.18);background:rgba(3,10,17,.72);color:#7fa5a8;font-size:9px;letter-spacing:.1em;pointer-events:none}
.bro-controls-grid{grid-template-columns:repeat(4,1fr)!important}
.bro-respawn{position:absolute;left:50%;top:47%;z-index:58;transform:translate(-50%,-50%) scale(.9);min-width:260px;padding:16px 20px;border:1px solid rgba(255,77,103,.45);border-radius:18px;background:rgba(10,5,12,.92);backdrop-filter:blur(12px);text-align:center;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .22s ease;box-shadow:0 18px 65px rgba(0,0,0,.5)}
.bro-respawn.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.bro-respawn strong{display:block;font-size:20px;letter-spacing:.14em;color:#ff8190}
.bro-respawn span{display:block;margin:9px 0 5px;font-size:25px;letter-spacing:7px;color:#ff5d70;text-shadow:0 0 14px rgba(255,77,103,.45)}
.bro-respawn small{display:block;color:#b8cbd0;font-size:11px}
.bro-hearts{display:flex!important;gap:4px;align-items:center;white-space:nowrap}
.bro-hearts .heart{display:inline!important;color:#ff5d70;font-size:17px;line-height:1;filter:drop-shadow(0 0 5px rgba(255,77,103,.28));transition:transform .18s ease,opacity .18s ease,filter .18s ease}
.bro-hearts .heart.lost{color:#45242c;opacity:.42;filter:none;transform:scale(.72)}
.bro-hearts.life-hit .heart:not(.lost){animation:broHeartHit .18s linear 3 alternate}
@keyframes broHeartHit{from{transform:scale(1)}to{transform:scale(1.35)}}
@keyframes broInvuln{from{opacity:.48}to{opacity:1}}
@keyframes broBlocked{from{transform:translate3d(var(--rx),var(--ry),0) translateX(0)}to{transform:translate3d(var(--rx),var(--ry),0) translateX(-10px)}}
.bro-touch.boost{font-size:10px;color:#001d19;background:#00ffdc;border-color:#00ffdc}
.bro-touch.boost.active{filter:brightness(1.2);transform:scale(.96)}
.bro-noautorun{border-color:rgba(0,255,220,.30);color:#b8dedb;background:rgba(3,10,17,.82)}
@media(max-width:820px){.bro-hud-right .bro-pill:nth-child(3){display:none}.bro-controls-grid{grid-template-columns:1fr 1fr!important}.bro-respawn{min-width:220px}}
/* v6: higher, clearer arcade jump poses and more readable airborne silhouette */
/* v7 vertical camera / double-jump feedback */
@keyframes broDoubleKick{0%{transform:translate(10px,-4px) rotate(-5deg)}45%{transform:translate(20px,-30px) rotate(-12deg)}100%{transform:translate(15px,-18px) rotate(-5deg)}}
@keyframes broJumpRing{0%{opacity:1;transform:scale(.45)}100%{opacity:0;transform:scale(1.65) translateY(12px)}}
@keyframes broBullLaunch{0%{transform:translate(8px,4px) rotate(-4deg)}45%{transform:translate(22px,-34px) rotate(-9deg)}100%{transform:translate(16px,-20px) rotate(-5deg)}}
.bro-pill #broJumpState{white-space:nowrap}
@media(max-width:820px){.bro-hud-left .bro-pill:nth-child(5){display:none}}
/* v8: readable PS1-era-inspired arcade flow: side-facing character, stable camera and strong telegraphing. */
.bro-v8-start{width:min(780px,calc(100vw - 28px))}
.bro-v8-intro{display:grid;gap:4px;margin:2px 0 14px;padding:12px 14px;border:1px solid rgba(0,255,220,.18);border-radius:14px;background:rgba(0,255,220,.035)}
.bro-v8-intro b{font-size:11px;letter-spacing:.16em;color:#79fff0}.bro-v8-intro span{font-size:12px;line-height:1.5;color:#bed1d6}
.bro-v8-tutorial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.bro-v8-rule{min-height:76px;padding:11px 12px;border:1px solid rgba(255,255,255,.075);border-radius:13px;background:rgba(255,255,255,.025)}
.bro-v8-rule strong{display:block;font-size:10px;letter-spacing:.1em;color:#eaffff;margin-bottom:5px}.bro-v8-rule span{display:block;font-size:10px;line-height:1.42;color:#829ca4}
.bro-v8-rule.green{border-color:rgba(50,229,143,.25);background:rgba(50,229,143,.045)}.bro-v8-rule.green strong{color:#7cf5bc}
.bro-v8-rule.red{border-color:rgba(255,77,103,.25);background:rgba(255,77,103,.045)}.bro-v8-rule.red strong{color:#ff91a0}
.bro-v8-tip{font-size:10px;line-height:1.45;color:#78969e;margin-top:11px}.bro-v8-tip b{color:#ffd166}
/* Face the direction of travel. Keep the TB artwork unmirrored; use perspective, not scaleX(-1). */
/* New run cycle: lower vertical bob, longer stride, planted feet and a steadier head. */
@keyframes v8RunBody{0%,100%{transform:translate(14px,2px) rotate(-7deg)}25%{transform:translate(17px,-2px) rotate(-8deg)}50%{transform:translate(14px,1px) rotate(-6.5deg)}75%{transform:translate(17px,-2px) rotate(-8deg)}}
@keyframes v8RunHead{0%,100%{transform:translate(8px,1px) rotate(1deg)}50%{transform:translate(10px,-1px) rotate(2deg)}}
@keyframes v8RunLA{0%,100%{transform:rotate(42deg)}50%{transform:rotate(-37deg)}}
@keyframes v8RunRA{0%,100%{transform:rotate(-44deg)}50%{transform:rotate(39deg)}}
@keyframes v8RunLF{0%,100%{transform:rotate(24deg)}50%{transform:rotate(-20deg)}}
@keyframes v8RunRF{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(20deg)}}
@keyframes v8RunLL{0%,100%{transform:rotate(-31deg)}50%{transform:rotate(33deg)}}
@keyframes v8RunRL{0%,100%{transform:rotate(33deg)}50%{transform:rotate(-31deg)}}
@keyframes v8RunLS{0%,100%{transform:rotate(42deg)}50%{transform:rotate(-18deg)}}
@keyframes v8RunRS{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(42deg)}}
@keyframes v8RunShadow{0%,50%,100%{transform:translateX(18px) scaleX(.88);opacity:.30}25%,75%{transform:translateX(18px) scaleX(.74);opacity:.21}}
/* Landing response and safe Bull Box feedback. */
@keyframes v8Land{0%{transform:translate(15px,-4px) rotate(-6deg) scaleY(1.02)}45%{transform:translate(15px,7px) rotate(-5deg) scaleY(.96)}100%{transform:translate(15px,1px) rotate(-7deg) scaleY(1)}}
.bro-message{transition:opacity .14s ease,transform .14s ease!important}
.bro-speedlines{transition:opacity .12s ease!important}
@media(max-width:760px){.bro-v8-tutorial-grid{grid-template-columns:1fr}.bro-v8-rule{min-height:0}.bro-v8-start{max-height:calc(100vh - 20px);overflow:auto}.bro-v8-intro span{font-size:11px}}
/* V9 uses a dedicated game-side T.B.A.R.T. sprite set. The dashboard rig is NOT distorted into profile. */
.bro-v9-character{position:absolute;z-index:41;width:208px;height:252px;pointer-events:none;will-change:transform;transform:translate3d(0,0,0)}
.bro-v9-character img{position:absolute;left:50%;bottom:1px;max-width:238px;max-height:246px;transform:translateX(-50%);object-fit:contain;image-rendering:auto;filter:drop-shadow(0 12px 13px rgba(0,0,0,.58));will-change:contents,filter}
.bro-v9-character .bro-v9-shadow{position:absolute;left:36px;right:30px;bottom:2px;height:14px;border-radius:50%;background:rgba(0,0,0,.40);filter:blur(6px);opacity:.62;transform-origin:center;transition:opacity .1s,transform .1s}
.bro-v9-character.air .bro-v9-shadow{opacity:.16;transform:scaleX(.62)}
.bro-v9-character.boost img{filter:drop-shadow(-10px 0 9px rgba(0,255,220,.36)) drop-shadow(0 12px 13px rgba(0,0,0,.58))}
.bro-v9-character.invuln{animation:v9Invuln .13s linear infinite alternate}
.bro-v9-character.hit img{filter:drop-shadow(0 0 12px rgba(255,65,94,.9)) drop-shadow(0 12px 13px rgba(0,0,0,.58))}
.bro-v9-character.bull img{filter:drop-shadow(-10px 2px 13px rgba(50,229,143,.72)) drop-shadow(0 12px 13px rgba(0,0,0,.58))}
.bro-v9-boost-trail{position:absolute;z-index:-1;left:-32px;bottom:68px;width:90px;height:34px;opacity:0;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(0,255,220,.13),rgba(0,255,220,.55));filter:blur(5px);transition:opacity .1s}
.bro-v9-character.boost .bro-v9-boost-trail,.bro-v9-character.bull .bro-v9-boost-trail{opacity:1}
@keyframes v9Invuln{from{opacity:.48}to{opacity:1}}
.bro-v9-countdown{position:absolute;inset:0;z-index:57;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .12s;background:radial-gradient(circle at center,rgba(0,255,220,.035),transparent 30%)}
.bro-v9-countdown.on{opacity:1}
.bro-v9-countdown b{font-size:clamp(54px,10vw,112px);letter-spacing:.04em;color:#eaffff;text-shadow:0 0 28px rgba(0,255,220,.5),0 10px 38px rgba(0,0,0,.8);transform:scale(.82);animation:v9Count .42s cubic-bezier(.2,.8,.2,1)}
.bro-v9-countdown.go b{color:#00ffdc}
@keyframes v9Count{0%{opacity:0;transform:scale(.6)}35%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
.bro-v9-start-layout{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:center}
.bro-v9-start-mascot{display:grid;place-items:center;min-height:230px;border:1px solid rgba(0,255,220,.14);border-radius:18px;background:radial-gradient(circle at 50% 44%,rgba(0,255,220,.08),transparent 60%)}
.bro-v9-start-mascot img{max-height:220px;max-width:175px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.56))}
.bro-v9-objective{display:flex;gap:8px;flex-wrap:wrap;margin:9px 0 2px}
.bro-v9-objective span{padding:5px 8px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.025);font-size:9px;color:#91abb2}
.bro-v9-objective .safe{border-color:rgba(50,229,143,.25);color:#73edb2}.bro-v9-objective .danger{border-color:rgba(255,77,103,.25);color:#ff8796}
.bro-v9-kicker{font-size:10px;letter-spacing:.16em;color:#63f8e7;margin-bottom:5px}.bro-v9-lead{font-size:13px;line-height:1.55;color:#bad0d5}
.bro-v9-lead b{color:#efffff}.bro-v9-highscore-note{display:none;margin-top:8px;color:#ffd166;font-weight:800;font-size:12px}.bro-v9-highscore-note.on{display:block}
.bro-v9-best{font-size:11px;color:#91aab1;margin-top:4px}.bro-v9-best b{color:#dffcff}
.bro-v9-gameover-layout{display:grid;grid-template-columns:1fr 160px;gap:16px;align-items:center}.bro-v9-gameover-pose{display:grid;place-items:center;min-height:200px}.bro-v9-gameover-pose img{max-height:190px;max-width:155px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.56))}
@media(max-width:760px){
.bro-v9-character{width:160px;height:198px}.bro-v9-character img{max-width:180px;max-height:192px}.bro-v9-character .bro-v9-shadow{left:30px;right:25px}
.bro-v9-start-layout{grid-template-columns:1fr}.bro-v9-start-mascot{min-height:145px}.bro-v9-start-mascot img{max-height:140px}.bro-v9-gameover-layout{grid-template-columns:1fr}.bro-v9-gameover-pose{min-height:125px}.bro-v9-gameover-pose img{max-height:120px}
}
.bro-v9-character.landing img{animation:v92LandImage .18s cubic-bezier(.18,.75,.25,1)}
.bro-v9-character.perfect img{filter:drop-shadow(0 0 14px rgba(255,209,102,.92)) drop-shadow(0 0 22px rgba(0,255,220,.45)) drop-shadow(0 12px 13px rgba(0,0,0,.58))}
.bro-v9-character.perfect:after{content:"";position:absolute;left:37px;right:31px;bottom:14px;height:62px;border:2px solid rgba(255,209,102,.88);border-radius:50%;box-shadow:0 0 22px rgba(255,209,102,.38),inset 0 0 20px rgba(0,255,220,.14);animation:v92PerfectRing .46s ease-out forwards;pointer-events:none}
@keyframes v92LandImage{0%{transform:translateX(-50%) scaleY(1) scaleX(1)}38%{transform:translateX(-50%) scaleY(.94) scaleX(1.035)}100%{transform:translateX(-50%) scaleY(1) scaleX(1)}}
@keyframes v92PerfectRing{0%{opacity:1;transform:scale(.55)}100%{opacity:0;transform:scale(1.45) translateY(-9px)}}
@media(prefers-reduced-motion:reduce){.bro-v9-character.landing img,.bro-v9-character.perfect:after{animation:none!important}}

/* =====================================================================
 * TradeButtons-Integration und Fluessigkeit
 *
 * Gehoert nicht zur Spielvorlage, sondern zum Einbau. Wird von
 * build-v9-css.py an die erzeugte Spiel-CSS angehaengt.
 * ===================================================================== */

/* Verborgen heisst verborgen. Das `hidden`-Attribut wirkt nur, solange
   keine Regel ein `display` setzt — `.bro-overlay` tut das aber
   (`display:grid`). Ohne diese Zeile laege das leere Ranglisten-Panel
   dauerhaft ueber dem Startbildschirm. */
#broGame[hidden],
#broGame [hidden],
.bro-overlay[hidden] { display: none !important; }

/* Das Spiel liegt ueber der Seite, aber unter dem Onboarding-Overlay
   (2147482500). */
#broGame { position: fixed; inset: 0; z-index: 2147480000; }

/*
 * DAS DASHBOARD-MASKOTTCHEN WIRD NUR AUSGEBLENDET, NICHT ANGEFASST.
 *
 * V9 bringt seine eigene Seitenansicht mit (.bro-v9-character). Der globale
 * BRO wird waehrend einer Runde ausgeblendet und kommt danach unveraendert
 * zurueck — kein rotateY, kein scaleX, keine Klasse, kein Inline-Stil.
 */
html.tbrun-aktiv #tbbro-host { display: none !important; }

/*
 * Die Seite HINTER dem Spiel ruht. `content-visibility` ueberspringt
 * Zeichnen UND Layout des Inhalts, ohne ihn aus dem Dokument zu nehmen:
 * keine fremden Skripte werden gestoppt, kein Zustand geht verloren.
 */
html.tbrun-aktiv body > *:not(#broGame):not(#tbbro-host):not(script):not(style) {
	content-visibility: hidden;
}

/*
 * KEIN backdrop-filter UEBER DER LAUFENDEN LEINWAND.
 *
 * Waehrend eines Runs liegen die HUD-Kacheln, die Meldung, die
 * Respawn-Anzeige und auf Touch-Geraeten drei Steuerknoepfe ueber der
 * Leinwand — jedes mit `blur(10px)`. Die Leinwand darunter wird in JEDEM
 * Bild neu gezeichnet, also muss der Browser auch jeden Weichzeichner in
 * jedem Bild neu berechnen. Ersatz: kraeftigere Deckfarbe.
 *
 * Die grossen Tafeln (.bro-overlay) behalten ihren Weichzeichner — sie
 * erscheinen nur, wenn das Spiel NICHT laeuft.
 */
#broGame .bro-pill,
#broGame .bro-message,
#broGame .bro-respawn,
#broGame .bro-touch,
#broGame .bro-mini { backdrop-filter: none !important; }

#broGame .bro-pill { background: rgba(4, 11, 19, .93); }
#broGame .bro-message { background: rgba(4, 11, 19, .93); }
#broGame .bro-respawn { background: rgba(10, 5, 12, .97); }
#broGame .bro-touch { background: rgba(4, 11, 19, .88); }

/* Sparsame Stufen — von der Guete-Regelung der Engine gesetzt, wenn das
   Geraet die Bildrate nicht haelt. */
#broGame.tbrun-sparsam .bro-scan,
#broGame.tbrun-sparsam .bro-speedlines { display: none !important; }
#broGame.tbrun-sparsam .bro-vignette { opacity: .35; }
#broGame.tbrun-sehr-sparsam .bro-vignette { display: none !important; }
#broGame.tbrun-sehr-sparsam .bro-v9-boost-trail { display: none !important; }
#broGame.tbrun-sehr-sparsam .bro-v9-character img { filter: none !important; }

@media (prefers-reduced-motion: reduce) {
	#broGame .bro-scan,
	#broGame .bro-speedlines { display: none !important; }
}

/*
 * KNOEPFE MUESSEN LESBAR SEIN.
 *
 * `.bro-button.primary` setzt `color:#00211b` (fast schwarz) und holt sein
 * Cyan aus `var(--bro-cyan)`. Faellt die Variable aus, steht schwarze
 * Schrift auf dunklem Grund — der Knopf ist dann praktisch unsichtbar.
 * Genau das ist einmal passiert. Deshalb hier eine Farbe, die auch ohne
 * Variable haelt, plus ein sichtbarer Gesperrt-Zustand.
 */
#broGame .bro-button.primary {
	background: var(--bro-cyan, #00ffdc);
	border-color: var(--bro-cyan, #00ffdc);
	color: #00211b;
	box-shadow: 0 6px 20px rgba(0, 255, 220, .22);
}
#broGame .bro-button.primary:hover { filter: brightness(1.1); }

#broGame .bro-button:disabled,
#broGame .bro-button[disabled] {
	opacity: .5;
	cursor: progress;
	filter: none;
}

/* Schliessen-Knopf (gibt es in der Vorlage nicht — dort ist das Spiel die
   ganze Seite). */
.tbrun-close {
	position: absolute;
	top: 12px; right: 14px;
	z-index: 60;
	width: 38px; height: 38px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 11px;
	background: rgba(6, 12, 20, .72);
	color: #eaffff;
	font-size: 20px; line-height: 1;
	cursor: pointer;
}
.tbrun-close:hover { background: rgba(0, 255, 220, .16); border-color: rgba(0, 255, 220, .4); }

/* Messanzeige (F2 oder ?bro-run-debug=1). Standardmaessig nicht vorhanden. */
.tbrun-mess {
	position: absolute;
	left: 14px; bottom: 62px;
	z-index: 55;
	padding: 8px 10px;
	border: 1px solid rgba(0, 255, 220, .3);
	border-radius: 9px;
	background: rgba(4, 11, 19, .93);
	color: #9fe9df;
	font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
	white-space: pre;
	pointer-events: none;
}

/* ---------------------------------------------------------------------
 * Rekord-Hinweis, Ergebnisvergleich, Ranglisten und Herausforderungen.
 * Gibt es in der Spielvorlage nicht — gehoert zur TradeButtons-Funktion.
 * ------------------------------------------------------------------- */

.tbrun-rekord {
	margin: 6px 0 10px; padding: 10px 14px;
	border: 1px solid rgba(255, 209, 102, .5); border-radius: 12px;
	background: rgba(255, 209, 102, .10); color: #ffd166;
	font-size: 14px; font-weight: 700; letter-spacing: .12em; text-align: center;
}

.tbrun-vorstand {
	margin: 4px 0 14px; padding: 12px 14px;
	border: 1px solid rgba(0, 255, 220, .28); border-radius: 12px;
	background: rgba(0, 255, 220, .07);
}
.tbrun-vorstand strong { display: block; font-size: 11px; letter-spacing: .14em; color: #00ffdc; }
.tbrun-vorstand p { margin: 6px 0 0; font-size: 13px; color: #cfe6ec; }

.tbrun-status { min-height: 18px; margin: 10px 0 4px; font-size: 12.5px; color: #8fa6b4; }
.tbrun-status.is-ok { color: #32e58f; }
.tbrun-status.is-warn { color: #ffc14f; }
.tbrun-status.is-info { color: #00ffdc; }

.tbrun-duell {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
	margin: 14px 0 4px; padding: 14px;
	border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px;
	background: rgba(10, 14, 23, .7);
}
.tbrun-duell__seite { text-align: center; }
.tbrun-duell__seite.is-sieger { color: #ffd166; }
.tbrun-duell__name { display: block; font-size: 11px; letter-spacing: .1em; color: #8fa6b4; }
.tbrun-duell__seite.is-sieger .tbrun-duell__name { color: inherit; }
.tbrun-duell__score { display: block; font-size: 26px; font-weight: 800; }
.tbrun-duell__vs { font-size: 11px; letter-spacing: .18em; color: #7e94a2; }
.tbrun-duell__ausgang {
	grid-column: 1 / -1; padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: 13px; font-weight: 700; letter-spacing: .1em; text-align: center;
}

.tbrun-panel .bro-panel { max-height: 86vh; overflow-y: auto; }
.tbrun-panel__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tbrun-panel__kopf h1 { margin: 0; font-size: 18px; letter-spacing: .06em; }

.tbrun-reiter { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tbrun-reiter .bro-mini.is-aktiv { border-color: rgba(0, 255, 220, .5); background: rgba(0, 255, 220, .14); color: #00ffdc; }

.tbrun-unter { margin: 16px 0 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #7e94a2; }
.tbrun-liste { display: flex; flex-direction: column; gap: 4px; }

.tbrun-zeile {
	display: flex; align-items: center; gap: 10px; padding: 9px 12px;
	border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px;
	background: rgba(17, 24, 39, .6); font-size: 13px;
}
.tbrun-zeile.is-ich { border-color: rgba(0, 255, 220, .45); background: rgba(0, 255, 220, .10); }
.tbrun-zeile.is-ungewertet { opacity: .55; }
.tbrun-zeile__rang { min-width: 46px; color: #7e94a2; font-variant-numeric: tabular-nums; }
.tbrun-zeile__avatar { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.tbrun-zeile__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbrun-zeile__score { font-variant-numeric: tabular-nums; color: #00ffdc; }
.tbrun-zeile__dist { min-width: 84px; text-align: right; color: #8fa6b4; font-size: 12px; }
.tbrun-liste__trenner { padding: 4px 12px; color: #7e94a2; letter-spacing: .3em; }

.tbrun-hinweis { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: #8fa6b4; }

.tbrun-code { margin-top: 16px; }
.tbrun-code__wert {
	margin: 10px 0 0; padding: 12px;
	border: 1px dashed rgba(0, 255, 220, .45); border-radius: 10px;
	background: rgba(0, 255, 220, .07); color: #00ffdc;
	font-size: 22px; font-weight: 800; letter-spacing: .28em; text-align: center;
}

.tbrun-fussnote { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: #6f8593; }

@media (max-width: 620px) {
	.tbrun-duell { grid-template-columns: 1fr; }
	.tbrun-duell__vs { text-align: center; }
	.tbrun-zeile__dist { min-width: 0; }
}