body.live{background:var(--bg);color:var(--text)}.live-toolbar{flex-wrap:wrap;align-items:center;gap:12px;max-width:2400px;margin:0 auto;padding:10px 14px 0;display:flex}.live-grid{grid-template-columns:repeat(auto-fit, minmax(var(--tile-min-w,360px), 1fr));gap:14px;max-width:2400px;margin:0 auto;padding:14px;display:grid}.tile{background:var(--card);border:1px solid var(--line-2);border-radius:10px;flex-direction:column;gap:6px;width:100%;max-width:960px;min-height:0;margin-inline:auto;padding:8px;display:flex;container:tile/inline-size}.tile.stale{opacity:.6}.tile header{flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:13px;line-height:1.2;display:flex}.tile header .head-row{display:contents}.tile header .spacer-main{display:none}.tile header .spacer-chips{flex:1;order:50}.tile header .score{order:90}.tile header .shot-btn{order:100}.tile header .clip-btn{order:101}.tile header .share-btn{order:102}.tile header .pin-btn{order:103}.tile header .focus-btn{order:104}@container tile (width<=520px){.tile header .head-row{flex:100%;align-items:baseline;gap:8px;min-width:0;display:flex}.tile header .head-row.main{flex-wrap:nowrap}.tile header .head-row.main .name{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.tile header .head-row.chips{flex-wrap:wrap}.tile header .score,.tile header .shot-btn,.tile header .clip-btn,.tile header .share-btn,.tile header .pin-btn,.tile header .focus-btn,.tile header .spacer-chips{order:0}.tile header .spacer-main{flex:1;display:block}}.tile .name{color:var(--text);font-weight:700}.tile .meta,.tile .players-count{color:var(--muted);font-size:12px}.tile .watchers-count,.tile .tickrate{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.tile .rink-dims{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px}.tile .rink-dims.custom{color:var(--muted)}.tile .rink-dims.warn{color:#f5c542;cursor:help;font-weight:600}.tile.idle .rink-dims{display:none}.tile .buffer-fill{align-self:center;width:14px;height:14px;display:none}.tile .buffer-fill svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}.tile .buffer-fill svg .bg{fill:none;stroke:#f5c54240;stroke-width:2.25px}.tile .buffer-fill svg .fg{fill:none;stroke:#f5c542;stroke-width:2.25px;stroke-linecap:round;transition:stroke-dashoffset .12s linear}.tile.buffering .buffer-fill{display:inline-block}body.live.fullscreen .tile .buffer-fill{display:none}.live-controls{flex-wrap:wrap;align-items:center;gap:4px 12px;min-width:0;display:flex}.live-controls>*{white-space:nowrap}.live-controls .toggle{color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;font-size:12px;display:inline-flex}.live-controls .toggle input{cursor:pointer;accent-color:var(--accent);margin:0}.live-controls .tile-size{color:var(--muted);-webkit-user-select:none;user-select:none;align-items:center;gap:6px;font-size:12px;display:inline-flex}.live-controls .tile-size input[type=range]{cursor:pointer;accent-color:var(--accent);width:clamp(96px,30vw,160px);min-width:0}.live-controls .buffer-size,.live-controls .clip-buffer,.live-controls .tile-sort,.live-controls .tile-search{color:var(--muted);-webkit-user-select:none;user-select:none;align-items:center;gap:6px;font-size:12px;display:inline-flex}.live-controls .buffer-size select,.live-controls .clip-buffer select,.live-controls .tile-sort select{cursor:pointer;color:var(--text);border:1px solid var(--line-2);font:inherit;background:0 0;border-radius:4px;padding:1px 4px}.live-controls .tile-search input{color:var(--text);border:1px solid var(--line-2);font:inherit;background:0 0;border-radius:4px;width:clamp(80px,18vw,160px);min-width:0;padding:1px 6px}.live-controls .rink-mode{color:var(--muted);-webkit-user-select:none;user-select:none;align-items:center;gap:6px;font-size:12px;display:inline-flex}.live-controls .rink-mode select{cursor:pointer;color:var(--text);border:1px solid var(--line-2);font:inherit;background:0 0;border-radius:4px;padding:1px 4px}.live-controls .fs-btn{border:1px solid var(--line-2);color:var(--muted);cursor:pointer;background:0 0;border-radius:4px;padding:2px 8px;font-size:14px;line-height:1}.live-controls .fs-btn:hover{background:color-mix(in srgb, var(--text) 8%, transparent);color:var(--text)}.live-controls .fs-btn:before{content:"⛶"}body.live.fullscreen .live-controls .fs-btn:before{content:"✕"}@media (width<=720px){.live-toolbar{gap:8px;padding:8px 10px 0}.live-controls{gap:4px 8px}.live-toolbar .navspacer{flex-basis:100%;height:0}.status-bar{gap:12px;width:100%;padding:4px 10px 0}}@media (width<=480px){.live-controls .tile-size{display:none}.live-toolbar{padding:6px 8px 0}.live-controls .toggle,.live-controls .buffer-size,.live-controls .clip-buffer,.live-controls .tile-sort,.live-controls .rink-mode{font-size:11px}}.tile .spacer{flex:1}.tile .score{font-variant-numeric:tabular-nums}.tile .score .b{color:var(--team-blue);font-weight:700}.tile .score .r{color:var(--team-red);font-weight:700}.tile .focus-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:4px;flex:none;padding:2px 6px;font-size:13px;line-height:1}.tile .focus-btn:hover{background:color-mix(in srgb, var(--text) 8%, transparent);color:var(--text)}.tile .focus-btn:before{content:"⤢"}.tile.focused .focus-btn:before{content:"✕"}.tile .shot-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:4px;flex:none;padding:2px 6px;font-size:13px;line-height:1}.tile .shot-btn:hover{background:color-mix(in srgb, var(--text) 8%, transparent);color:var(--text)}.tile .shot-btn:before{content:"📷"}.tile .clip-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:4px;flex:none;padding:2px 6px;font-size:13px;line-height:1;position:relative}.tile .clip-btn:hover:not([disabled]){background:color-mix(in srgb, var(--text) 8%, transparent);color:var(--text)}.tile .clip-btn:before{content:"🎬"}.tile .clip-btn[disabled]{cursor:not-allowed;opacity:.45}.tile .clip-btn.recording{color:#f5c542}.tile .clip-btn.recording:before{content:"⏺"}.tile .clip-btn .clip-progress{pointer-events:none;display:none;position:absolute;inset:0}.tile .clip-btn.recording .clip-progress{display:block}.tile .clip-btn .clip-progress svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}.tile .clip-btn .clip-progress .bg{fill:none;stroke:#f5c54240;stroke-width:1.5px}.tile .clip-btn .clip-progress .fg{fill:none;stroke:#f5c542;stroke-width:1.5px;stroke-linecap:round;transition:stroke-dashoffset 80ms linear}.tile .pin-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:4px;flex:none;padding:2px 6px;font-size:13px;line-height:1}.tile .pin-btn:hover{background:color-mix(in srgb, var(--text) 8%, transparent);color:var(--text)}.tile .pin-btn:before{content:"📌"}.tile.pinned .pin-btn{color:var(--gold)}.tile.pinned{border-top:2px solid color-mix(in srgb, var(--gold) 70%, transparent)}.tile .share-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:4px;flex:none;padding:2px 6px;font-size:13px;line-height:1}.tile .share-btn:hover{background:color-mix(in srgb, var(--text) 8%, transparent);color:var(--text)}.tile .share-btn:before{content:"🔗"}.tile .share-btn.copied{color:var(--gold)}.tile .share-btn.copied:before{content:"✔"}.tile.featured{border-top:2px solid color-mix(in srgb, var(--gold) 70%, transparent)}.tile.featured .pin-btn{color:var(--gold)}.live-grid.has-focused{grid-template-columns:1fr}.live-grid.has-focused .tile:not(.focused){display:none}.tile.focused,body.live.fullscreen .tile.focused{max-width:var(--focused-max-w,none)}.live-grid.populated-only .tile.empty,.tile.tile-search-hidden,.live-grid.rink-only .tile .roster,.live-grid.rink-only .tile .reaction-bar,.live-grid.rink-only .tile .reaction-trigger{display:none}.tile .reaction-bar{flex-wrap:wrap;justify-content:center;gap:4px;display:none}.tile.reactions-open .reaction-bar{display:flex}.tile .reaction-bar button{border:1px solid var(--line-2);background:var(--card-2);cursor:pointer;border-radius:6px;padding:4px 8px;font-size:18px;line-height:1;transition:background-color .12s,transform 80ms}.tile .reaction-bar button:hover{background:color-mix(in srgb, var(--text) 10%, var(--card-2))}.tile .reaction-bar button:active{transform:scale(.92)}.tile.idle .reaction-bar,.tile.stale .reaction-bar{opacity:.45}.tile .reaction-trigger{border:1px solid var(--line-2);background:var(--card-2);color:inherit;cursor:pointer;border-radius:6px;align-self:center;padding:4px 12px;font-size:18px;line-height:1;transition:background-color .12s,transform 80ms;display:inline-flex}.tile .reaction-trigger:hover{background:color-mix(in srgb, var(--text) 10%, var(--card-2))}.tile .reaction-trigger:active{transform:scale(.96)}.tile.idle .reaction-trigger,.tile.stale .reaction-trigger{opacity:.45}.tile.reactions-open .reaction-trigger{background:color-mix(in srgb, var(--text) 10%, var(--card-2))}.reactions-overlay{pointer-events:none;border-radius:6px;position:absolute;inset:0;overflow:hidden}.reaction-float{will-change:transform, opacity;-webkit-user-select:none;user-select:none;font-size:28px;line-height:1;animation:2.5s ease-out forwards reaction-rise;position:absolute;bottom:8%;transform:translate(-50%)}@keyframes reaction-rise{0%{opacity:0;transform:translate(-50%)scale(.7)}12%{opacity:1;transform:translate(-50%,-10%)scale(1.1)}to{transform:translate(calc(-50% + var(--reaction-drift,0px)), -140%) scale(.9);opacity:0}}.chat-overlay{pointer-events:none;opacity:.5;border-radius:6px;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:3px;max-height:45%;padding:4px 8px 8px;transition:opacity .18s ease-out;display:flex;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.tile:hover .chat-overlay{opacity:.95}.chat-bubble{background:color-mix(in srgb, var(--bg2) 78%, transparent);max-width:70%;color:var(--text);border-left:2px solid color-mix(in srgb, var(--muted) 55%, transparent);word-wrap:break-word;overflow-wrap:anywhere;text-shadow:0 1px 1px #0000008c;border-radius:3px;padding:2px 6px;font-size:11px;line-height:1.25;transition:opacity .35s ease-out;animation:.18s ease-out chat-bubble-in}.chat-bubble-blue{border-left-color:color-mix(in srgb, var(--team-blue) 70%, transparent)}.chat-bubble-red{border-left-color:color-mix(in srgb, var(--team-red) 70%, transparent)}.chat-bubble-team{background:color-mix(in srgb, var(--bg2) 65%, transparent);font-style:italic}.chat-bubble-system{border-left-color:color-mix(in srgb, var(--gold) 85%, transparent);background:color-mix(in srgb, var(--bg2) 55%, transparent);color:var(--gold);font-weight:600}.chat-bubble-system .chat-bubble-message{color:var(--gold)}.chat-bubble-username{color:var(--text);font-weight:600}.chat-bubble-blue .chat-bubble-username{color:var(--team-blue)}.chat-bubble-red .chat-bubble-username{color:var(--team-red)}.chat-bubble-tag{color:var(--gold);margin-right:4px;font-weight:700}.chat-bubble-fade{opacity:0}@keyframes chat-bubble-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.tile.idle .chat-overlay,.tile.stale .chat-overlay{opacity:0}.ref-overlay{pointer-events:none;z-index:3;opacity:.5;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:3px;max-height:30%;transition:opacity .18s ease-out;display:flex;position:absolute;bottom:22%;right:6px;overflow:hidden}.tile:hover .ref-overlay{opacity:.95}.ref-bubble{background:color-mix(in srgb, var(--bg2) 78%, transparent);color:var(--gold);text-align:right;border-right:2px solid color-mix(in srgb, var(--gold) 55%, transparent);text-shadow:0 1px 1px #0000008c;border-radius:3px;padding:2px 6px;font-size:11px;font-weight:600;line-height:1.25;transition:opacity .35s ease-out}.ref-bubble.fading,.tile.idle .ref-overlay,.tile.stale .ref-overlay{opacity:0}.canvas-wrap{position:relative}.tile canvas{aspect-ratio:1000/620;background:var(--bg2);border-radius:6px;width:100%;height:auto;display:block}.tile-overlay{background:color-mix(in srgb, var(--bg) 72%, transparent);color:var(--text);letter-spacing:.02em;text-transform:uppercase;pointer-events:none;border-radius:6px;justify-content:center;align-items:center;font-size:16px;font-weight:700;display:none;position:absolute;inset:0}.tile.idle .tile-overlay,.tile.stale .tile-overlay{display:flex}.tile.idle{opacity:1}.status-bar{color:var(--muted);align-items:center;gap:16px;padding:10px 14px;font-size:13px;display:flex}.status-bar .dot{background:var(--muted);border-radius:50%;width:10px;height:10px;display:inline-block}.status-bar.ok .dot{background:var(--good)}.status-bar.warn .dot{background:var(--gold)}.status-bar.err .dot{background:var(--bad)}.status-bar .viewer-count{color:var(--muted);font-variant-numeric:tabular-nums}.status-bar .viewer-count[hidden]{display:none}.empty-hint{text-align:center;color:var(--muted);grid-column:1/-1;padding:48px 16px}.tile .roster{grid-template-columns:1fr 1fr;gap:4px 10px;font-size:12px;line-height:1.35;display:grid}.tile .roster-col{flex-direction:column;gap:2px;min-width:0;display:flex}.tile .roster-col.blue{border-left:2px solid var(--team-blue);padding-left:6px}.tile .roster-col.red{border-left:2px solid var(--team-red);padding-left:6px}.tile .roster-row{min-width:0;color:var(--text);cursor:pointer;border-radius:3px;align-items:center;gap:6px;padding:0 2px;display:flex}.tile .roster-row:hover{background:color-mix(in srgb, var(--text) 6%, transparent)}.tile .roster-row.selected{background:color-mix(in srgb, var(--gold) 14%, transparent)}.tile .roster-row.selected .pname{color:var(--gold);font-weight:700}.tile .roster-row .flag{object-fit:cover;border-radius:2px;flex:none;width:14px;height:10px;box-shadow:0 0 0 1px #00000059}.tile .roster-row .flag-spacer{flex:none;width:14px;height:10px;display:inline-block}.tile .roster-row .num{color:var(--muted);font-variant-numeric:tabular-nums;flex:none;min-width:22px}.tile .roster-row .pos-chip{background:color-mix(in srgb, var(--gold) 18%, transparent);color:var(--gold);border-radius:3px;flex:none;padding:1px 4px;font-size:10px;font-weight:700}.tile .roster-row .pname{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:inherit;flex:auto;overflow:hidden}.tile .roster-row .plink{color:var(--muted);border-radius:3px;flex:none;padding:1px 4px;font-size:11px;line-height:1;text-decoration:none}.tile .roster-row .plink:hover{color:var(--accent-2);background:color-mix(in srgb, var(--accent-2) 10%, transparent)}.tile .roster-row.selected .plink{color:var(--muted)}.tile .roster-row .ga{font-variant-numeric:tabular-nums;color:var(--muted);text-align:right;flex:none;min-width:26px}.tile .roster-row .ping{font-variant-numeric:tabular-nums;text-align:right;flex:none;min-width:40px;font-size:11px}.tile .roster-row .ping.ok{color:var(--good)}.tile .roster-row .ping.warn{color:var(--gold)}.tile .roster-row .ping.bad{color:var(--bad)}@media (width<=560px){.tile .roster{grid-template-columns:1fr}}body.live.fullscreen .live-grid{grid-template-columns:repeat(var(--fs-cols,3), 1fr);gap:6px;max-width:none;padding:6px}body.live.fullscreen .tile{gap:3px;max-width:none;padding:4px}body.live.fullscreen .tile header{gap:8px;font-size:12px}body.live.fullscreen .tile .meta,body.live.fullscreen .tile .players-count,body.live.fullscreen .tile .watchers-count,body.live.fullscreen .tile .tickrate,body.live.fullscreen .tile .rink-dims.custom,body.live.fullscreen .tile .reaction-bar,body.live.fullscreen .tile .roster{display:none}.kbd-hint{z-index:50;background:color-mix(in srgb, var(--bg) 92%, transparent);color:var(--text);border:1px solid var(--line-2);border-radius:8px;max-width:280px;padding:10px 12px;font-size:12px;line-height:1.4;display:none;position:fixed;bottom:16px;right:16px;box-shadow:0 6px 24px #00000059}.kbd-hint.open{display:block}.kbd-hint h4{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px;font-size:12px;font-weight:700}.kbd-hint dl{grid-template-columns:auto 1fr;gap:3px 10px;margin:0;display:grid}.kbd-hint dt{background:var(--card-2);border:1px solid var(--line-2);color:var(--gold);text-align:center;border-radius:3px;min-width:22px;padding:0 5px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.kbd-hint dd{color:var(--text);margin:0}