:root { color-scheme: dark; --bg:#080a0f; --panel:#11151d; --line:#252c38; --text:#f4f7fb; --muted:#8c96a7; --amber:#f2a93b; --blue:#55a8ff; --red:#f05b62; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 15% 0%,#192332 0,#080a0f 42%),var(--bg); color:var(--text); font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.page-shell { max-width:1220px; margin:auto; padding:28px 24px 24px; }
.topbar,.hero,.team-head,.progress-label,.team-meta,.footer,.live-state { display:flex; align-items:center; }
.topbar,.hero,.footer { justify-content:space-between; }
.brand { display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:.12em; font-size:14px; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; color:#11151d; background:var(--amber); font-size:12px; letter-spacing:0; }
.muted,.team-caption,.eyebrow,.updated span { color:var(--muted); }
.live-state { gap:8px; color:#b7c0ce; font-size:13px; }
.live-dot { width:8px; height:8px; border-radius:50%; background:#667080; box-shadow:0 0 0 4px #66708018; }
.live-dot.online { background:#60db89; box-shadow:0 0 0 4px #60db8920; }
.live-dot.demo { background:var(--amber); box-shadow:0 0 0 4px #f2a93b20; }
.hero { padding:10px 0 10px; gap:24px; }
.eyebrow { margin:0 0 12px; font-size:11px; letter-spacing:.16em; font-weight:700; }
h1 { margin:0; font-size:clamp(30px,5vw,58px); letter-spacing:-.045em; line-height:1; }
.subline { color:var(--muted); margin:16px 0 0; font-size:16px; }.separator { margin:0 10px; color:#515b6b; }
.updated { min-width:118px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:#0f131a; }.updated span,.updated strong { display:block; }.updated span { font-size:11px; text-transform:uppercase; letter-spacing:.12em; }.updated strong { margin-top:4px; font-size:14px; }
.match-score { min-width:190px; margin-left:auto; margin-right:auto; text-align:center; }.score-label { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.14em; }.match-score strong { display:flex; justify-content:center; align-items:center; gap:15px; margin-top:2px; font-size:60px; line-height:.95; letter-spacing:.02em; }.match-score strong b:first-child { color:#ff9a9f; }.match-score strong b:last-child { color:#82c3ff; }.match-score strong span { color:#697487; font-size:38px; font-weight:400; }.score-detail { display:block; margin-top:10px; color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }.score-detail b { color:#dbe2ed; font-size:13px; }.score-detail span { margin:0 5px; color:#596476; }
.team-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.team-card { position:relative; overflow:hidden; padding:18px; background:linear-gradient(145deg,#171a1f,#101216); border:1px solid #3b414b; border-radius:5px; box-shadow:0 16px 50px #00000045; }.team-t { --level-color:#ff626c; border-top:2px solid var(--red); }.team-ct { --level-color:#55a8ff; border-top:2px solid var(--blue); }.team-card.level-up-flash { animation:team-level-up 1.8s cubic-bezier(.22,.61,.36,1); }.team-card.level-up-flash::after { content:"LEVEL UP"; position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; color:#fff; font-size:clamp(28px,4vw,54px); font-weight:900; letter-spacing:.12em; text-shadow:0 0 18px var(--level-color); background:radial-gradient(circle,#ffffffb8 0%,var(--level-color)55%,transparent 78%); animation:level-up-overlay 1.8s ease-out forwards; }
@keyframes team-level-up { 0%,100% { border-color:#3b414b; box-shadow:0 16px 50px #00000045; transform:scale(1); } 10% { border-color:var(--level-color); box-shadow:0 0 0 3px var(--level-color),0 0 42px 12px var(--level-color); transform:scale(1.012); } 28% { border-color:#fff; box-shadow:0 0 0 2px #fff,0 0 28px 8px var(--level-color); transform:scale(1.006); } 58% { border-color:var(--level-color); box-shadow:0 0 0 1px var(--level-color),0 0 18px 4px var(--level-color); transform:scale(1); } }
@keyframes level-up-overlay { 0% { opacity:0; transform:scale(.72); } 12% { opacity:.92; transform:scale(1); } 30% { opacity:.18; transform:scale(1.08); } 100% { opacity:0; transform:scale(1.18); } }
.team-card.level-down-flash { --level-color:#ff9b52; animation:team-level-down 1.8s cubic-bezier(.22,.61,.36,1); }.team-card.level-down-flash::after { content:"LEVEL DOWN"; }
@keyframes team-level-down { 0%,100% { border-color:#3b414b; box-shadow:0 16px 50px #00000045; transform:scale(1); } 12% { border-color:var(--level-color); box-shadow:0 0 0 3px var(--level-color),0 0 42px 12px var(--level-color); transform:scale(.988); } 30% { border-color:#fff; box-shadow:0 0 0 2px #fff,0 0 28px 8px var(--level-color); transform:scale(.994); } 60% { border-color:var(--level-color); box-shadow:0 0 0 1px var(--level-color),0 0 18px 4px var(--level-color); transform:scale(1); } }
.team-head { gap:12px; }.team-head h2 { margin:0; font-size:20px; }.team-caption { display:block; font-size:11px; letter-spacing:.14em; margin-top:2px; }.team-badge { display:grid; place-items:center; width:42px; height:42px; border-radius:10px; font-weight:800; }.team-t .team-badge { color:#ff9a9f; background:#f05b621c; }.team-ct .team-badge { color:#82c3ff; background:#55a8ff1c; }.team-score { margin-left:auto; font-size:36px; letter-spacing:-.04em; }
.progress-label { justify-content:space-between; margin-top:28px; color:var(--muted); font-size:12px; }.progress-track { height:20px; margin-top:9px; background:#252c38; border-radius:99px; overflow:hidden; }.progress-fill { height:100%; width:0; border-radius:inherit; transition:width .35s ease; }.team-t .progress-fill { background:var(--red); }.team-ct .progress-fill { background:var(--blue); }
.team-meta { gap:18px; flex-wrap:wrap; margin-top:15px; color:var(--muted); font-size:15px; }.team-meta b { color:var(--text); font-weight:600; }
.players { display:grid; gap:1px; margin-top:22px; border:1px solid #343a44; background:#0b0d10; }.player-table-head { display:grid; grid-template-columns:1fr 46px 46px 46px; gap:18px; padding:10px 10px; color:#aeb8c7; background:#252a32; border-bottom:1px solid #424954; font-size:20px; line-height:1; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.player-table-head span:not(:first-child) { text-align:center; }.player { display:grid; grid-template-columns:1fr 46px 46px 46px; gap:18px; align-items:center; min-height:39px; padding:8px 10px; background:#171a1e; border-top:1px solid #292e36; will-change:transform; }.player:nth-child(odd) { background:#1c2025; }.player-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; }.player-name.grenadier { color:#ffe4a8; font-weight:800; text-shadow:0 0 12px #f2a93b90; }.player-name.grenadier::after { content:"  HE"; color:#ffc247; font-size:11px; font-weight:900; letter-spacing:.1em; }.player.he-player { background:linear-gradient(90deg,#6a491a66,#2e2514); border-left:3px solid #ffc247; box-shadow:inset 0 0 20px #f2a93b18; }.stat { color:#cbd3df; font-size:14px; text-align:center; font-variant-numeric:tabular-nums; }.stat small { display:none; }.hp-stat { color:#8ee6a0; font-weight:700; }.he-player .stat { color:#ffe4a8; }.empty { color:var(--muted); padding:20px 10px 6px; font-size:14px; }
.footer { margin-top:18px; color:var(--muted); font-size:12px; }.footer span:last-child { letter-spacing:.12em; text-transform:uppercase; }
.event-sidebar { position:fixed; right:22px; bottom:22px; z-index:20; width:min(360px,calc(100vw - 28px)); padding:42px 0 0; transition:transform .65s cubic-bezier(.22,.61,.36,1); }.event-sidebar.collapsed { transform:translateX(calc(100% + 22px)); }.event-sidebar-close { position:absolute; top:0; right:0; display:flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid #3b4656; border-radius:9px; background:#151b25ee; color:#cbd3df; cursor:pointer; font:700 12px/1 inherit; letter-spacing:.08em; text-transform:uppercase; }.event-sidebar-close:hover,.event-sidebar-reopen:hover { color:#fff; border-color:#72b8ff; }.event-sidebar-reopen { position:fixed; right:14px; bottom:22px; z-index:21; display:none; padding:10px 13px; border:1px solid #3b4656; border-radius:9px 0 0 9px; background:#151b25f2; box-shadow:0 12px 34px #0009; color:#cbd3df; cursor:pointer; font:700 12px/1 inherit; letter-spacing:.08em; text-transform:uppercase; }.event-sidebar-reopen.visible { display:block; }.event-stack { display:grid; gap:10px; pointer-events:none; }
.event-bubble { padding:13px 15px; border:1px solid #3b4656; border-left:3px solid var(--amber); border-radius:12px; background:#151b25ee; box-shadow:0 12px 34px #0009; backdrop-filter:blur(12px); color:var(--text); will-change:opacity,transform; animation:bubble-rise 8.5s cubic-bezier(.25,.46,.45,.94) forwards; }
.event-bubble.kill { border-left-color:#ffcc66; }.event-bubble.level { border-left-color:#72b8ff; }.event-bubble strong { color:#ffe4a8; }.event-bubble.level strong { color:#91c9ff; }.event-bubble .event-icon { margin-right:8px; color:var(--amber); font-weight:900; }.event-bubble.level .event-icon { color:var(--blue); }.event-bubble small { display:block; margin-top:3px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.09em; }
@keyframes bubble-rise { 0% { opacity:0; transform:translateY(10px) scale(.985); } 8% { opacity:.22; transform:translateY(7px) scale(.989); } 18% { opacity:.72; transform:translateY(3px) scale(.996); } 28% { opacity:1; transform:translateY(0) scale(1); } 76% { opacity:1; transform:translateY(-4px) scale(1); } 100% { opacity:0; transform:translateY(-28vh) scale(.99); } }
@media (max-width:760px) { .page-shell { padding:18px 14px; }.hero { padding:54px 0 28px; align-items:flex-start; flex-direction:column; }.match-score { margin:0; width:100%; text-align:left; }.match-score strong { justify-content:flex-start; font-size:52px; }.match-score strong span { font-size:33px; }.updated { width:100%; }.team-grid { grid-template-columns:1fr; }.team-card { padding:19px; }.footer { gap:16px; align-items:flex-start; flex-direction:column; } }
/* Keep the level target visible beside the live point score. */
.score-detail { font-size:16px; }
.score-detail b { font-size:18px; }
:root { --score-side-size:30px; }
#t-players .hp-stat.dead-stat, #ct-players .hp-stat.dead-stat { color:#ff3948 !important; font-weight:900; text-shadow:0 0 10px #ff1f3580; }
.event-sidebar { border-left:1px solid #3b4656; padding-left:14px; }
.event-controls { position:fixed; top:22px; right:22px; z-index:22; }
.event-sidebar-close { position:static; }
.event-sidebar-close.hidden { display:none; }
.event-sidebar-reopen { position:static; }
.event-sidebar-reopen.visible { display:block; }
.event-sidebar { top:0; right:0; bottom:0; width:min(390px,100vw); box-sizing:border-box; padding:0 22px 22px 14px; display:flex; align-items:flex-end; background:linear-gradient(90deg,#0c1018a8 0%,#0c101866 70%,transparent 100%); }
.event-sidebar.collapsed { transform:translateX(100%); }
.event-stack { width:min(360px,calc(100vw - 28px)); margin-left:auto; }
.player.death-flash { animation:player-death-flash .85s ease-out; }
@keyframes player-death-flash { 0% { background:#ff334855; transform:translateX(0); box-shadow:inset 0 0 24px #ff334888; } 18% { transform:translateX(-4px); } 36% { transform:translateX(4px); } 54% { transform:translateX(-2px); } 72% { transform:translateX(2px); } 100% { background:#171a1e; transform:translateX(0); box-shadow:none; } }
#t-total-frags, #ct-total-frags { color:#8e9bad !important; font-size:var(--score-side-size) !important; font-weight:700; letter-spacing:0; }
#t-level-score { color:#ff9a9f !important; }
#ct-level-score { color:#82c3ff !important; }