@import url('/stream-finish.css');
@import url('/stream-transition.css');
.competition-stream{position:relative;max-width:1560px;margin:28px auto;padding:18px;border:1px solid #376692;border-radius:18px;background:linear-gradient(130deg,#101b30,#080b15);color:#f4f7ff;box-shadow:0 0 32px #188cf51a;box-sizing:border-box}
.competition-stream[hidden],.competition-stream [hidden]{display:none!important}.stream-receiver-head{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:16px}.stream-receiver-head>div:first-child{display:flex;align-items:center;gap:12px}.stream-receiver-head h2{margin:0;font-size:22px;color:#e8f4ff}.stream-live-badge{font-size:12px;font-weight:900;letter-spacing:1px;color:#80ccff;background:#124774;border:1px solid #54bfff;padding:7px 10px;border-radius:6px}.stream-receiver-actions{display:flex;gap:10px;flex-wrap:wrap}.competition-stream button{font-family:inherit;font-size:14px;font-weight:700;color:#f4f7ff;min-height:44px;padding:10px 16px;background:#17314e;border:1px solid #457eac;border-radius:8px;cursor:pointer}.competition-stream button:focus-visible{outline:3px solid #7fceff;outline-offset:3px}.competition-stream button:hover{background:#214b78}
.stream-camera-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.stream-single-camera .stream-camera-grid{grid-template-columns:1fr}.stream-camera-tile{min-width:0;overflow:hidden;border:1px solid #355c85;border-radius:12px;background:#0a1120}.stream-camera-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px}.stream-camera-heading>div{display:flex;align-items:center;gap:10px;min-width:0}.stream-camera-heading strong{font-size:15px;overflow-wrap:anywhere}.stream-camera-heading span{border:1px solid #347cac;border-radius:5px;padding:4px 7px;color:#a7dcff;font-size:12px;white-space:nowrap}.stream-camera-heading span:empty{display:none}.competition-stream .stream-camera-expand{padding:4px 9px;min-width:42px;min-height:36px;font-size:22px}
.stream-screen{position:relative;isolation:isolate;aspect-ratio:16/9;overflow:hidden;background:#02040a;border-top:1px solid #284a6b}.stream-screen video{width:100%;height:100%;object-fit:contain;display:block;position:absolute;inset:0}.stream-video-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;font-family:"Segoe UI",Arial,sans-serif}.stream-video-brand{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:7px;background:#030912a6}.stream-video-brand img{width:48px;height:30px;object-fit:contain}.stream-video-brand span{color:#e8f4ff;font-size:12px;font-weight:800}.stream-match-banner{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:12px;max-width:70%;width:max-content;padding:9px 18px;background:linear-gradient(100deg,#651d33ed,#09182aef 45%,#114780ed);border:1px solid #81cfff80;border-radius:5px 15px 5px 15px;box-shadow:0 5px 18px #0008;color:#fff;font-size:clamp(14px,1.7vw,28px);font-weight:800;line-height:1.3;text-align:center}.stream-match-banner>span{min-width:0;overflow-wrap:anywhere}.stream-match-banner>i{font-size:.7em;color:#b0dbff;font-style:italic;flex-shrink:0}.stream-match-group{position:absolute;top:70px;left:50%;transform:translateX(-50%);max-width:76%;padding:4px 10px;background:#050c19c9;border:1px solid #52779d80;border-radius:5px;color:#cfe7ff;font-size:12px;line-height:1.3;overflow-wrap:anywhere;text-align:center}.stream-match-waiting .stream-match-group{top:16px;font-size:16px;max-width:60%}
.stream-match-scoreboard{position:absolute;bottom:0;left:0;right:0;display:grid;grid-template-columns:minmax(72px,1fr) minmax(0,1.5fr) minmax(72px,1fr);align-items:end;gap:12px;padding:28px 18px 14px;background:linear-gradient(transparent,#000b 35%,#000e)}.stream-player-score{position:relative;display:flex;align-items:center;gap:12px;padding:8px 13px;min-width:0;border:1px solid #ff678c80;border-radius:5px 16px 5px 16px;background:linear-gradient(110deg,#761e39db,#24101bdd);box-shadow:0 0 18px #fa396328;color:#fff}.stream-player-score>span{font-size:12px;font-weight:800;min-width:0;line-height:1.3;overflow-wrap:anywhere}.stream-player-score>b{margin-left:auto;font-size:clamp(34px,4.7vw,80px);line-height:1;font-weight:900;font-variant-numeric:tabular-nums;text-shadow:0 0 20px #ff759166}.stream-blue-score{flex-direction:row-reverse;border-color:#5abfff90;background:linear-gradient(250deg,#154f86e3,#0b1a33ed);box-shadow:0 0 18px #319fff28}.stream-blue-score>b{margin-left:0;margin-right:auto;text-shadow:0 0 20px #7cd8ff66}.stream-score-winner{border-color:#b2e4ff;box-shadow:0 0 22px #68caff66,inset 0 0 16px #6bd1ff30}.stream-match-outcome{min-width:0;align-self:end;padding:0 0 4px;text-align:center;text-shadow:0 2px 7px #000}.stream-match-outcome>span{display:block;margin-bottom:5px;color:#c9dbef;font-size:12px;line-height:1.35;overflow-wrap:anywhere}.stream-match-outcome>strong{display:block;font-size:clamp(12px,1.5vw,23px);font-weight:800;line-height:1.3;color:#e4f3ff;overflow-wrap:anywhere}.stream-match-live .stream-match-outcome>strong{color:#ffc16b}.stream-match-complete .stream-match-outcome>strong{color:#a9e0ff}.stream-match-waiting .stream-match-scoreboard{display:block;padding:34px 16px 18px}.stream-match-waiting .stream-match-outcome>strong{font-size:clamp(16px,2vw,24px);color:#b8d8f5}
.stream-video-placeholder{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:22px;background:radial-gradient(ellipse,#13305566,#030610);color:#cadcf2}.stream-video-placeholder strong{font-size:clamp(18px,2vw,28px)}.stream-video-placeholder p{font-size:12px;line-height:1.6;max-width:380px;color:#98b3d1;margin:0}.stream-connected .stream-video-placeholder{display:none}.stream-connected.stream-needs-play .stream-video-placeholder{display:flex;z-index:3}.stream-camera-status{padding:8px 12px;font-size:12px;color:#9ac4ed;margin:0}.stream-receiver-status{font-size:13px;color:#9ac4ed;margin:12px 0 0}.stream-no-cameras{padding:40px 15px;text-align:center;font-size:20px;color:#c5dcf5}.stream-collapsed .stream-camera-grid,.stream-collapsed .stream-no-cameras{display:none}.competition-stream .stream-exit{display:none;position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:5;min-width:44px;font-size:24px;background:#111c2dcc;color:white}.competition-stream .stream-grid-exit{z-index:10}
.competition-stream.stream-immersive,.competition-stream:fullscreen{position:fixed;inset:0;z-index:1000;max-width:none;width:100%;height:100dvh;margin:0;padding:0;border:0;border-radius:0;display:flex;flex-direction:column;background:#02040a}.stream-immersive>.stream-receiver-head,.stream-immersive>.stream-receiver-status,.competition-stream:fullscreen>.stream-receiver-head,.competition-stream:fullscreen>.stream-receiver-status{display:none}.stream-immersive .stream-camera-grid,.competition-stream:fullscreen .stream-camera-grid{flex:1;min-height:0;overflow:auto;align-content:center;padding:12px;gap:12px}.stream-immersive .stream-camera-heading,.stream-immersive .stream-camera-status{display:none}.stream-immersive .stream-camera-tile{border-radius:6px}.stream-immersive.stream-single-camera .stream-camera-grid{padding:0;align-content:stretch}.stream-immersive.stream-single-camera .stream-screen{height:100%;aspect-ratio:auto;border:0}.stream-immersive.stream-single-camera .stream-camera-tile{border:0;border-radius:0}.competition-stream.stream-immersive>.stream-grid-exit,.competition-stream:fullscreen>.stream-grid-exit{display:block}.stream-immersive:has(.stream-camera-immersive) .stream-camera-grid{grid-template-columns:1fr;padding:0;align-content:stretch}.stream-immersive:has(.stream-camera-immersive) .stream-camera-tile:not(.stream-camera-immersive){display:none}.stream-camera-immersive{border:0;border-radius:0}.stream-camera-immersive .stream-screen{height:100%;aspect-ratio:auto;border:0}.stream-camera-immersive .stream-match-banner{font-size:clamp(22px,3vw,48px);top:max(18px,env(safe-area-inset-top))}.stream-camera-immersive .stream-match-group{top:100px;font-size:18px}.stream-camera-immersive.stream-match-waiting .stream-match-group{top:18px}.stream-camera-immersive .stream-player-score>b{font-size:clamp(70px,10vw,150px)}.stream-camera-immersive .stream-player-score>span{font-size:clamp(15px,2vw,26px)}.stream-camera-immersive .stream-match-outcome>strong{font-size:clamp(20px,2.7vw,36px)}
#host-competition-stream{max-width:calc(100% - 60px);margin-top:54px}.expanded #host-competition-stream{display:none!important}
@media(max-width:760px){.competition-stream{margin:16px 12px;padding:12px;border-radius:12px}.stream-receiver-head{align-items:flex-start;flex-wrap:wrap;gap:12px}.stream-receiver-head h2{font-size:18px}.stream-receiver-actions{width:100%}.stream-receiver-actions button{flex:1}.stream-camera-grid{grid-template-columns:1fr;gap:14px}.stream-camera-heading{padding:7px 9px}.stream-camera-heading strong{font-size:14px}.stream-video-brand{top:8px;left:8px;padding:3px 5px}.stream-video-brand img{width:30px;height:22px}.stream-video-brand span{font-size:9px}.stream-match-banner{top:8px;gap:6px;max-width:72%;padding:6px 9px;font-size:14px}.stream-match-group{top:56px;font-size:10px;padding:3px 7px}.stream-match-scoreboard{grid-template-columns:minmax(54px,1fr) minmax(0,1.25fr) minmax(54px,1fr);gap:7px;padding:24px 8px 9px}.stream-player-score{padding:6px 8px;gap:5px}.stream-player-score>span{font-size:9px}.stream-player-score>b{font-size:34px}.stream-match-outcome>span{font-size:9px}.stream-match-outcome>strong{font-size:11px}.stream-video-placeholder{padding:16px 14px}.stream-video-placeholder strong{font-size:18px}.stream-video-placeholder p{font-size:11px}.competition-stream.stream-immersive{margin:0;padding:0}.stream-immersive .stream-camera-grid{align-content:start}#host-competition-stream{max-width:calc(100% - 24px);margin-top:52px}.stream-camera-immersive .stream-match-banner{font-size:20px;max-width:82%;padding:7px 12px}.stream-camera-immersive .stream-match-group{top:76px;font-size:14px}.stream-camera-immersive.stream-match-waiting .stream-match-group{top:18px}.stream-camera-immersive .stream-player-score>b{font-size:60px}.stream-camera-immersive .stream-player-score>span{font-size:13px}.stream-camera-immersive .stream-match-outcome>strong{font-size:17px}}
@media(max-height:520px) and (orientation:landscape){.stream-immersive .stream-camera-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-content:center}.stream-immersive.stream-single-camera .stream-camera-grid,.stream-immersive:has(.stream-camera-immersive) .stream-camera-grid{grid-template-columns:1fr}.stream-camera-immersive .stream-match-banner{top:10px;font-size:20px;max-width:72%;padding:6px 12px}.stream-camera-immersive .stream-match-group{top:55px;font-size:12px}.stream-camera-immersive .stream-match-scoreboard{padding-bottom:max(9px,env(safe-area-inset-bottom))}.stream-camera-immersive .stream-player-score>b{font-size:54px}.stream-camera-immersive .stream-match-outcome>strong{font-size:17px}}

/* Keep group tags below names even when long names wrap over several lines. */
.stream-video-brand>span{display:none}.stream-match-identification{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:70%;display:flex;flex-direction:column;align-items:center;gap:6px}.stream-match-identification .stream-match-banner{position:relative;top:auto;left:auto;transform:none;width:100%;max-width:100%}.stream-match-identification .stream-match-group{position:relative;top:auto;left:auto;transform:none;max-width:100%;width:max-content}.stream-camera-immersive .stream-match-identification{top:max(18px,env(safe-area-inset-top));width:78%}.stream-camera-immersive .stream-match-identification .stream-match-banner{max-width:100%}.stream-camera-immersive .stream-match-identification .stream-match-group{top:auto}.stream-camera-tile{container-type:inline-size}.stream-match-banner{font-size:clamp(14px,3cqw,28px)}.stream-player-score>b{font-size:clamp(34px,9cqw,80px)}
@media(max-width:760px){.stream-match-identification{top:8px;width:70%;gap:5px}.stream-camera-immersive .stream-match-identification{width:78%;top:12px}.stream-match-identification .stream-match-group{max-width:100%}.stream-match-waiting .stream-match-identification{width:65%}}
@media(max-height:520px) and (orientation:landscape){.stream-camera-immersive .stream-match-identification{top:10px;width:72%}}

/* Larger player labels retain the existing score-panel footprint. Long names
   are fitted by the receiver so the complete ID/name remains visible. */
.stream-player-score>[data-score-name]{flex:1;display:block;min-width:0;font-size:30px;white-space:normal;overflow-wrap:anywhere;overflow:hidden;line-height:1.15}
.stream-camera-immersive .stream-player-score>[data-score-name]{font-size:clamp(37.5px,5vw,65px)}
.stream-shop-credit{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);max-width:70%;color:#c8d8eb;font-size:10px;line-height:1.2;text-align:center;text-shadow:0 1px 4px #000;white-space:nowrap}
.stream-shop-battle .stream-match-outcome{padding-bottom:12px}
@media(max-width:760px){.stream-player-score>[data-score-name]{font-size:22.5px}.stream-camera-immersive .stream-player-score>[data-score-name]{font-size:32.5px}.stream-shop-credit{font-size:8px;bottom:3px}}
@media(max-height:520px) and (orientation:landscape){.stream-shop-credit{bottom:max(4px,env(safe-area-inset-bottom))}}

/* Broadcast labels need to remain readable on a projector and phone alike. */
.stream-video-brand{padding:0;background:transparent}
.stream-video-brand img{width:clamp(54px,9cqw,120px);height:auto;aspect-ratio:1.6;filter:drop-shadow(0 2px 5px #000b)}
.stream-overview-heading img{width:76px;height:50px;flex-shrink:0}
.stream-launch-fault-count{display:flex;align-items:center;gap:.3em;max-width:calc(100% - 24px);bottom:7px;font-size:22px;line-height:1.15;text-shadow:0 1px 3px #000}
.stream-launch-fault-count>span{font-size:clamp(12px,1.8cqw,22px);min-width:0;overflow-wrap:anywhere}
.stream-launch-fault-count>b{font-size:clamp(22px,2.8cqw,32px);line-height:1.1;font-variant-numeric:tabular-nums;flex-shrink:0;padding:0 .2em;border:1px solid #ffa95f80;border-radius:5px;background:#332115;color:#ffe5c4}
.stream-player-score:has(.stream-launch-fault-count:not([hidden])){padding-bottom:50px}
.stream-shop-credit{font-size:25px;line-height:1.15;width:80%;max-width:80%;box-sizing:border-box;white-space:normal;bottom:6px;padding:0 6px}
.stream-shop-battle .stream-match-scoreboard{bottom:42px}
.stream-shop-battle .stream-match-outcome{padding-bottom:0}
@media(max-width:760px){
 .stream-video-brand{left:6px;top:8px}
 .stream-match-identification,.stream-camera-immersive .stream-match-identification{width:66%}
 .stream-overview-heading img{width:60px;height:40px}
 .stream-launch-fault-count{left:6px;bottom:6px;max-width:calc(100% - 12px);gap:4px}
 .stream-blue-score .stream-launch-fault-count{right:6px;left:auto}
 .stream-player-score:has(.stream-launch-fault-count:not([hidden])){padding-bottom:38px}
 .stream-shop-credit{font-size:20px;bottom:4px}
 .stream-shop-battle .stream-match-scoreboard{bottom:54px}
}