:root{--bg:#0A0A0A;--bg2:#111111;--cd:#191919;--bd:#2A2A2A;--tx:#FFFFFF;--dm:#C8C8C8;--dm2:#777777;--ac:#EFF923;--red:#EF4444;--green:#22C55E;--cyan:#22ccdd;--blue:#3B82F6;--text:#f5f7fb;--line:rgba(255,255,255,.105);--ease:cubic-bezier(.4,0,.2,1);--fd:'Barlow Condensed',sans-serif;--fb:'Barlow',sans-serif;--fm:'JetBrains Mono',monospace;--topbar-h:72px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Pretendard',sans-serif;background:var(--bg);color:var(--tx);height:100vh;overflow:hidden}
.topbar{position:sticky;top:0;z-index:200;height:var(--topbar-h);display:flex;align-items:center;gap:28px;padding:0 36px;border-bottom:1px solid var(--line);background:#06080b;overflow:hidden}
.topbar:after{content:'';position:absolute;right:0;bottom:0;left:0;height:1px;background:linear-gradient(90deg,transparent,var(--ac),transparent);background-size:200% 100%;animation:header-shimmer 5s ease-in-out infinite;opacity:.35}
@keyframes header-shimmer{0%{background-position:-100% 0}100%{background-position:200% 0}}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--fd);font-size:34px;line-height:1;font-weight:900;text-transform:uppercase;letter-spacing:0;word-spacing:-.08em;color:var(--text);flex-shrink:0;text-decoration:none;white-space:nowrap;padding-right:26px;border-right:1px solid rgba(255,255,255,.08)}
.brand-wordmark{color:inherit;text-shadow:none}.brand .brand-initial{color:var(--ac)}
.nav-primary{display:flex;gap:0;flex:1;overflow-x:auto;scrollbar-width:none;min-width:0;align-items:center}.nav-primary::-webkit-scrollbar{display:none}
.nav-primary a{display:flex;align-items:center;height:var(--topbar-h);padding:0 20px;color:rgba(255,255,255,.58);font-family:var(--fd);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;white-space:nowrap;text-decoration:none;transition:color .16s var(--ease)}
.nav-primary a:hover{color:var(--text)}.nav-primary a.active{color:var(--ac)}

.main{display:flex;height:calc(100vh - var(--topbar-h))}
/* LEFT */
.lp{width:250px;background:#0b0c10;border-right:1px solid var(--bd);display:flex;flex-direction:column;flex-shrink:0;font-family:var(--fb)}
.lp h2{display:flex;align-items:center;gap:8px;font-family:var(--fd);font-size:14px;text-transform:uppercase;letter-spacing:.12em;color:var(--text);padding:12px 12px 8px;font-weight:800;border-bottom:1px solid rgba(255,255,255,.055)}
.lp h2::before{content:'';width:3px;height:15px;background:var(--ac);border-radius:2px;flex:0 0 auto}
.lp-search{width:calc(100% - 24px);height:32px;margin:10px 12px 8px;padding:0 10px 0 29px;font-size:12px;background:#07080c;color:var(--tx);border:1px solid rgba(255,255,255,.12);border-radius:0;font-family:var(--fb);font-weight:600;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236a6a7a' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center}
.lp-search:focus{outline:none;border-color:rgba(239,249,35,.58);box-shadow:0 0 0 2px rgba(239,249,35,.08)}.lp-search::placeholder{color:#98a0ad}
.replay-filters{margin:0 12px 10px;display:grid;gap:8px}
.replay-filters label{display:grid;grid-template-columns:46px 1fr;align-items:center;gap:8px}
.replay-filters span{font-family:var(--fd);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dm);text-shadow:none}
.replay-filters select{width:100%;height:30px;padding:0 26px 0 9px;border:1px solid rgba(255,255,255,.12);border-radius:5px;background-color:#0c0d12;color:#f5f7fb;font-family:var(--fb);font-size:12px;font-weight:600;appearance:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.38);transition:border-color .15s,box-shadow .15s,background-color .15s;color-scheme:dark;background-image:linear-gradient(45deg,transparent 50%,#8b93a3 50%),linear-gradient(135deg,#8b93a3 50%,transparent 50%);background-position:calc(100% - 13px) 12px,calc(100% - 8px) 12px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.replay-filters select:hover{border-color:rgba(255,255,255,.24);background-color:#0b0d12}
.replay-filters select:focus{outline:none;border-color:var(--ac);box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 0 0 2px rgba(239,249,35,.12)}
.replay-filters select:disabled{cursor:not-allowed;color:#6f7480;border-color:rgba(255,255,255,.12);background-color:#07080b;opacity:1;background-image:linear-gradient(45deg,transparent 50%,#666 50%),linear-gradient(135deg,#666 50%,transparent 50%)}
.replay-filters select option{background:#090b10;color:#f5f7fb;font-weight:700}
.replay-filter-count{font-family:var(--fd);font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--dm);margin-top:2px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.replay-pagination{display:flex;align-items:center;justify-content:space-between;gap:6px}
.replay-pagination button{height:25px;padding:0 8px;border:1px solid rgba(255,255,255,.14);background:#07080c;color:#d9deea;font-family:var(--fd);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;cursor:pointer}
.replay-pagination button:hover{border-color:var(--ac);background:#0b0d12}
.replay-pagination button:disabled{cursor:not-allowed;color:#646978;border-color:rgba(255,255,255,.12);background:#07080b}
.replay-pagination span{font-family:var(--fd);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#eef2ff;white-space:nowrap}
.lp-clear{width:calc(100% - 24px);margin:0 12px 8px;padding:5px;font-size:10px;font-family:var(--fb);background:var(--bg);color:var(--dm);border:1px solid var(--bd);border-radius:0;cursor:pointer;transition:.15s}
.lp-clear:hover{border-color:var(--red);color:var(--red)}
.ml{flex:1;overflow-y:auto;padding:0 9px 10px}
.mi-loading{margin:2px 0 8px;padding:12px 10px;border:1px solid var(--bd);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));color:var(--dm);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:9px}
.mi-loading:before{content:"";width:18px;height:18px;background:url(/static/image/global-events-logo-clean.png) center/contain no-repeat;animation:replay-spin .8s linear infinite,replay-pin-glow 1.1s ease-in-out infinite;flex:0 0 auto}
.replay-filter-empty:before,.mi-waiting:before{display:none}
.mi-waiting{color:#eef2ff;gap:0}
@keyframes replay-spin{to{transform:rotate(360deg)}}
@keyframes replay-pin-glow{0%,100%{filter:grayscale(1) brightness(1.05) contrast(1.65) drop-shadow(0 0 6px rgba(255,255,255,.25))}50%{filter:grayscale(1) brightness(1.45) contrast(1.8) drop-shadow(0 0 22px rgba(255,255,255,.7))}}
.mi{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:15px;padding:10px;min-height:62px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:#0d0d0d;cursor:pointer;margin-bottom:6px;transition:border-color .15s var(--ease),background .15s var(--ease)}
.mi:hover{border-color:rgba(255,255,255,.16);background:#121319}
.mi.on{position:relative;border-color:rgba(239,249,35,.5);background:rgba(239,249,35,.06)}
.mi.on:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--ac)}
.mi-thumb{position:relative;width:64px;height:42px;border-radius:5px;overflow:hidden;background-size:cover;background-position:center;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.mi-thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.62))}
.mi-num{position:absolute;left:5px;bottom:4px;z-index:1;font-family:var(--fm);font-size:10px;font-weight:700;color:#fff;letter-spacing:.02em}
.mi-main{min-width:0;display:flex;flex-direction:column;gap:5px}
.mi-map{font-family:var(--fd);font-size:18px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;line-height:1;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-event{min-width:0;font-family:var(--fb);font-size:11.5px;font-weight:600;line-height:1;color:#aab3c2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* CENTER */
.center{flex:1;display:flex;flex-direction:column;min-width:0}
.cv-wrap{flex:1;position:relative;background:#050508;overflow:hidden;display:flex;align-items:center;justify-content:center}
canvas#replay{display:none;cursor:grab}canvas#replay.dragging{cursor:grabbing}
.ov{position:absolute;z-index:10}
/* Toolbar */
.vtb{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:3px;z-index:10}
.vtb.collapsed .vtb-btns{display:none}
.vtb-toggle{width:38px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(10,10,16,.88);border:1px solid var(--bd);border-radius:0;cursor:pointer;color:var(--dm);font-size:14px;transition:.15s}
.vtb-toggle:hover{color:var(--tx);border-color:#555}
.vtb-btns{display:flex;flex-direction:column;gap:3px}
.vbtn{width:38px;height:34px;display:flex;align-items:center;justify-content:center;background:rgba(10,10,16,.88);border:1px solid var(--bd);border-radius:0;cursor:pointer;color:var(--dm);font-size:14px;transition:.15s;position:relative}
.vbtn:hover{color:var(--tx);border-color:#555}
.vtb-toggle svg,.tool-ico svg{width:22px;height:22px;display:block;stroke:#fff;fill:none;stroke-width:2.65;stroke-linecap:round;stroke-linejoin:round;opacity:1}.tool-ico .fill{fill:#fff;stroke:none}.tool-ico{display:flex;align-items:center;justify-content:center}
.vbtn.on{border-color:var(--ac);color:var(--ac);background:rgba(239,249,35,.08)}
.vtb-sep{height:1px;background:rgba(255,255,255,.13);margin:4px 6px}
.vbtn.draw-tool.on{border-color:var(--cyan);color:var(--cyan);background:rgba(34,204,221,.10)}
.vbtn.draw-danger:hover{border-color:var(--red);color:var(--red)}
.draw-color,.draw-size{overflow:visible}.draw-swatch{width:17px;height:17px;border-radius:50%;border:2px solid rgba(255,255,255,.82);background:var(--ac)}
.draw-palette{position:absolute;left:48px;top:50%;transform:translateY(-50%);z-index:60;display:none;grid-template-columns:repeat(4,18px);gap:6px;padding:8px;background:rgba(10,10,16,.97);border:1px solid var(--bd);border-radius:0;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.draw-color.open .draw-palette{display:grid}.draw-pick{width:19px;height:19px;border-radius:50%;border:1px solid rgba(255,255,255,.8);cursor:pointer}.draw-pick.on{outline:2px solid var(--ac);outline-offset:2px}
.draw-size-label{font:11px var(--fb);color:#fff}.draw-size-badge{position:absolute;right:4px;bottom:3px;min-width:13px;height:13px;padding:0 2px;border-radius:0;background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.26);font:9px var(--fb);color:#fff;line-height:12px;text-align:center}.draw-size-pop{position:absolute;left:48px;top:50%;transform:translateY(-50%);z-index:60;display:none;align-items:center;gap:8px;width:168px;padding:8px;background:rgba(10,10,16,.97);border:1px solid var(--bd);border-radius:0;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.draw-size.open .draw-size-pop{display:flex}.draw-size-pop input{width:116px;accent-color:var(--ac)}.draw-size-pop span{font:12px var(--fb);color:#fff;min-width:18px;text-align:right}
.toolbar-menu{overflow:visible}.toolbar-menu.open{border-color:var(--ac);color:var(--ac);background:rgba(239,249,35,.08)}.toolbar-menu.sandbox-on{border-color:var(--green);box-shadow:0 0 10px rgba(34,197,94,.12)}.toolbar-menu.open .tip{display:none}
.toolbar-pop{position:absolute;left:48px;top:50%;transform:translateY(-50%);z-index:65;display:none;min-width:156px;padding:9px;background:rgba(10,10,16,.98);border:1px solid var(--bd);border-radius:0;box-shadow:0 6px 22px rgba(0,0,0,.42);cursor:default}
.toolbar-menu.open .toolbar-pop{display:grid;gap:7px}.toolbar-pop-title{font-family:var(--fd);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--dm);line-height:1}
.toolbar-pop-btn{height:28px;width:100%;display:flex;align-items:center;gap:8px;padding:0 8px;border:1px solid rgba(255,255,255,.12);background:#07080c;color:#eef2f7;font-family:var(--fb);font-size:11px;font-weight:700;text-align:left;cursor:pointer;transition:.15s}
.toolbar-pop-btn:hover{border-color:rgba(255,255,255,.24);color:#fff;background:#0b0d12}.toolbar-pop-btn.on{border-color:var(--ac);color:var(--ac);background:rgba(239,249,35,.08)}.toolbar-pop-btn.draw-tool.on{border-color:var(--cyan);color:var(--cyan);background:rgba(34,204,221,.10)}
.toolbar-pop-btn .tool-ico svg{width:17px;height:17px;stroke-width:2.4}.toolbar-pop-dot{width:9px;height:9px;border-radius:50%;background:#30333b;border:1px solid rgba(255,255,255,.18);flex:0 0 auto}.toolbar-pop-btn.on .toolbar-pop-dot{background:var(--ac);border-color:var(--ac);box-shadow:0 0 8px rgba(239,249,35,.25)}.toolbar-pop-btn.on .sandbox-dot{background:var(--green);border-color:var(--green);box-shadow:0 0 8px rgba(34,197,94,.25)}
.toolbar-circle-grid{display:grid;grid-template-columns:repeat(3,44px);gap:5px}.toolbar-circle-btn,.toolbar-circle-reset{height:28px;padding:0}.toolbar-circle-reset{grid-column:span 2}
.draw-text-input{position:absolute;z-index:220;display:none;min-width:32px;max-width:420px;width:auto;background:transparent;border:0;border-radius:0;color:#fff;padding:0;font-family:'Pretendard',sans-serif;font-weight:700;outline:none;box-shadow:none;pointer-events:auto;text-shadow:none;caret-color:#fff}.draw-text-input::placeholder{color:transparent}.draw-text-input.editing{border-left:2px solid currentColor;padding-left:4px;animation:textCaretPulse .9s infinite}@keyframes textCaretPulse{0%,100%{border-left-color:currentColor}50%{border-left-color:transparent}}
canvas#replay.draw-mode{cursor:crosshair}

.vbtn .tip{position:absolute;left:44px;top:50%;transform:translateY(-50%);background:rgba(10,10,16,.95);border:1px solid var(--bd);border-radius:0;padding:3px 10px;font-size:11px;font-family:var(--fb);font-weight:600;color:var(--tx);white-space:nowrap;display:none;pointer-events:none}
.vbtn:hover .tip{display:block}
/* Overlays */
/* Top bars (phase-bar + match-info) - unified visual pattern */
.phase-bar,.match-info{display:none;flex-direction:row;align-items:center;gap:0;padding:4px 0;background:rgba(0,0,0,.82);border:1px solid rgba(255,255,255,.07);border-radius:0;white-space:nowrap}
.pb-chunk,.mi-chunk{display:inline-flex;align-items:center;gap:6px;padding:2px 14px}
.pb-chunk+.pb-chunk,.mi-chunk+.mi-chunk{border-left:1px solid rgba(255,255,255,.08)}
.pb-label,.mi-label{font-family:'Pretendard',sans-serif;font-size:9px;color:var(--dm2);text-transform:uppercase;font-weight:700;letter-spacing:.15em}
.pb-val,.mi-val{font-family:'Pretendard',sans-serif;font-size:14px;font-weight:800;color:#fff;letter-spacing:.02em}
.pb-phase{color:var(--ac);font-weight:900}
.mi-val.mi-map{color:var(--ac);font-size:15px;font-weight:900;letter-spacing:.04em}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--dm);padding:40px}
.empty-state h3{font-size:18px;color:var(--tx)}.empty-state p{font-size:13px}
.replay-start-loading{position:absolute;z-index:35;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid rgba(239,249,35,.28);background:rgba(5,6,9,.82);box-shadow:0 18px 60px rgba(0,0,0,.4),0 0 22px rgba(239,249,35,.08);pointer-events:none}
.replay-start-loading[hidden]{display:none}
.replay-start-loading span{width:36px;height:36px;background:url(/static/image/global-events-logo-clean.png) center/contain no-repeat;animation:replay-spin .8s linear infinite,replay-pin-glow 1.1s ease-in-out infinite}
.replay-start-loading strong{font-family:var(--fd);font-size:24px;line-height:1;text-transform:uppercase;letter-spacing:.08em;color:#fff}
/* TIMELINE */
.bp{height:46px;background:var(--bg2);border-top:1px solid var(--bd);padding:0 16px;display:none;align-items:center;gap:12px}
.speeds{width:154px;display:flex;align-items:center}
.speed-slider{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:9px}
.speed-value{display:flex;align-items:center;justify-content:center;height:24px;border:1px solid rgba(239,249,35,.6);background:rgba(239,249,35,.12);color:var(--ac);font:800 11px 'Pretendard',sans-serif}
.speed-slider input{width:100%;height:18px;margin:0;appearance:none;background:transparent;cursor:pointer}
.speed-slider input::-webkit-slider-runnable-track{height:3px;border-radius:999px;background:linear-gradient(90deg,var(--ac),rgba(255,255,255,.22))}
.speed-slider input::-webkit-slider-thumb{appearance:none;width:16px;height:16px;margin-top:-6.5px;border-radius:50%;border:2px solid #111;background:var(--ac);box-shadow:0 0 10px rgba(239,249,35,.35)}
.speed-slider input::-moz-range-track{height:3px;border-radius:999px;background:linear-gradient(90deg,var(--ac),rgba(255,255,255,.22))}
.speed-slider input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:2px solid #111;background:var(--ac);box-shadow:0 0 10px rgba(239,249,35,.35)}
.cbtn{width:34px;height:34px;border:1px solid var(--bd);border-radius:0;background:var(--bg);color:var(--tx);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:.15s;font-family:'Pretendard',sans-serif}
.cbtn svg{width:20px;height:20px;display:block;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.cbtn .play-fill{fill:currentColor;stroke:none}
.cbtn:hover{border-color:var(--ac);color:var(--ac)}.cbtn.act{background:var(--ac);color:#000;border-color:var(--ac)}
.cbtn.disabled{opacity:.45;cursor:wait;pointer-events:none}
.tl-wrap{flex:1;position:relative;height:22px;cursor:pointer}
.tl-bg{position:absolute;top:9px;left:0;right:0;height:4px;background:var(--bd);border-radius:2px}
.tl-prog{position:absolute;top:9px;left:0;height:4px;background:var(--ac);border-radius:2px;width:0%}
.tl-head{position:absolute;top:4px;width:14px;height:14px;background:var(--ac);border-radius:50%;transform:translateX(-7px);left:0%;box-shadow:0 0 8px rgba(239,249,35,.5)}
.tl-kills{position:absolute;top:8px;left:0;right:0;height:7px}.tl-kills .tk{position:absolute;width:1px;height:7px;background:var(--red);opacity:.4}
.time-lbl{font-family:'Pretendard',sans-serif;font-size:12px;color:var(--dm);min-width:95px;text-align:right}
/* RIGHT */
.rp{width:247px;background:var(--bg2);border-left:1px solid var(--bd);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;font-family:var(--fb)}
.rp-sec{padding:10px 0 6px;border-bottom:1px solid var(--bd)}.rp-sec:last-child{border-bottom:none}
.rp-sec h2{display:flex;align-items:center;gap:8px;font-family:var(--fd);font-size:14px;text-transform:uppercase;letter-spacing:.12em;color:var(--text);font-weight:800;margin-bottom:8px;padding:0 10px}
.rp-sec h2::before{content:'';width:3px;height:15px;background:var(--ac);border-radius:2px;flex:0 0 auto}
/* Phase + Status bar - horizontal inline at top */
/* Ranking */

.rt{position:relative;margin-bottom:5px;border:1px solid rgba(255,255,255,.06);background:#0d0d0d;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.rt.open{border-color:rgba(239,249,35,.26);box-shadow:none}
.rt-hdr{display:grid;grid-template-columns:20px 35px minmax(0,1fr) auto 7px;gap:6px;align-items:center;min-height:40px;padding:4px 8px 4px 6px;cursor:pointer;transition:.15s;background:rgba(255,255,255,.015)}
.rt-hdr:hover{background:rgba(255,255,255,.045)}
.rt-hdr.sel{background:rgba(239,249,35,.06)}
.rt-hdr.rt-hover{background:rgba(239,249,35,.13);box-shadow:inset 3px 0 0 #eff923,0 0 12px rgba(239,249,35,.22)}
.rt-pos{font-family:var(--fd);font-size:12px;letter-spacing:0;color:#8b919c;text-align:center;font-weight:900;text-shadow:none}
.rt-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 3px currentColor}
.rt-logo{position:relative;width:33px;height:33px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.rt-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.rt-logo:has(img) .rt-logo-fallback{display:none}
.rt-logo-fallback{font-family:var(--fd);font-size:15px;font-weight:900;color:#eef2fb}
.rt-name{font-family:var(--fd);font-size:15px;line-height:1;font-weight:800;letter-spacing:.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f3f6fb}
.rt-arr{width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid var(--ac);transition:transform .2s;justify-self:end}.rt.open .rt-arr{transform:rotate(90deg)}
.rt-body{display:none;padding:0 0 8px;background:rgba(1,1,5,.30);overflow-x:hidden}.rt.open .rt-body{display:block}
.nt-btn{padding:2px 8px;font-size:9px;font-family:var(--fb);border:1px solid rgba(255,255,255,.2);border-radius:0;background:transparent;color:#eef3fc;cursor:pointer;transition:.15s}
.nt-btn:hover{border-color:rgba(242,169,0,.62);color:#fff}.nt-btn.on{border-color:var(--cyan);color:var(--cyan);background:linear-gradient(180deg,rgba(34,199,221,.14),rgba(12,16,24,.96))}
.rt-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px 10px 8px}
.rt-actions .nt-btn{display:flex;align-items:center;justify-content:center;height:23px;padding:0;font-family:var(--fd);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.rt-team-meta{display:inline-flex;align-items:center;justify-content:flex-end;min-width:24px;padding:0 2px;border:0;background:none;font-family:var(--fd);font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--green);white-space:nowrap}
.rt-squad{display:grid}
.pl-card{border-top:1px solid rgba(255,255,255,.045);padding:0 0 10px;transition:.15s;cursor:pointer}
.pl-top{display:grid;grid-template-columns:9px minmax(0,1fr) auto 10px;gap:8px;align-items:center;padding:12px 12px 6px;min-height:20px}
.pl-state{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 3px rgba(34,204,102,.28)}
.pl-card.knock .pl-state{background:var(--red);box-shadow:0 0 3px rgba(255,68,68,.28)}
.pl-card.dead .pl-state{background:#596072;box-shadow:none}
.pl-name{font-family:var(--fb);font-size:12px;color:#f2f4fb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-kd{color:#dce2ef;font:10px var(--fb);white-space:nowrap}
.pl-caret{color:var(--dm);font-size:10px;text-align:right}
.pl-stats{display:flex;gap:12px;padding:0 12px 6px;color:#d5dbea;font:11px var(--fb)}
.pl-stats span{display:flex;align-items:center;gap:5px}
.pl-stats b{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:16px;padding:0 4px;border:1px solid rgba(255,255,255,.18);border-radius:0;background:rgba(255,255,255,.04);color:#fff;font-size:9px;line-height:1}
.pl-bars{display:flex;flex-direction:column;gap:5px;padding:0 12px 8px}
.pl-bar{height:5px;background:#05070c;border:1px solid rgba(255,255,255,.06);border-radius:99px;overflow:hidden}
.pl-fill{display:block;height:100%;background:linear-gradient(90deg,#c7f5d9,#2ad27e)}
.pl-card.knock .pl-fill{background:linear-gradient(90deg,#ffd8d8,#ff5f5f)}
.pl-card.dead .pl-fill{width:0!important;background:transparent}
.pl-boost{background:linear-gradient(90deg,#f9e9b8,#f2c34d)}
.pl-expanded{padding:4px 12px 0}
.pl-empty{font-size:10px;color:var(--dm);line-height:1.25;padding:4px 0}
.pl-weapon{display:grid;grid-template-columns:64px minmax(0,1fr) 10px;gap:8px;align-items:center;padding:5px 0}
.pl-weapon+.pl-weapon{border-top:1px solid rgba(255,255,255,.03)}
.pl-weapon-ico{width:58px;height:16px;display:flex;align-items:center;justify-content:center}
.pl-weapon-ico img{width:58px;height:16px;object-fit:contain;display:block;filter:brightness(0) invert(1)}
.pl-weapon-ico img.compact{width:28px;height:28px}
.pl-weapon-name{min-width:0;font-family:var(--fb);font-size:14px;color:#f7f8ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-weapon-caret{font-size:10px;color:#d8dde9;padding-top:1px}
.pl-attachments{grid-column:2/4;color:#eef2fb;font-size:11px;line-height:1.25}
.pl-divider{margin:10px 0 0;padding-top:10px}
.pl-inventory{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 4px}
.pl-slot{display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;min-height:50px;min-width:0}
.pl-slot .ico{width:100%;height:24px;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1}
.pl-slot .ico img{width:28px;height:28px;object-fit:contain;display:block}
.pl-slot strong{font:700 12px var(--fb);line-height:1;color:#fff}
.pl-slot label{font-size:8px;color:#d4dbe9;text-transform:uppercase;line-height:1.05;font-weight:700;max-width:100%;white-space:normal;text-align:center;overflow-wrap:anywhere}
.pl-slot.zero{opacity:.32}

/* Circle sim */
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.cs-btn{padding:6px 0;text-align:center;font-size:12px;font-weight:600;font-family:'Pretendard',sans-serif;border:1px solid var(--bd);border-radius:0;background:var(--bg);color:var(--dm);cursor:pointer;transition:.2s}
.cs-btn:hover{border-color:#555;color:var(--tx)}.cs-btn.on{border-color:var(--cyan);color:var(--cyan);background:rgba(34,204,221,.08);box-shadow:0 0 6px rgba(34,204,221,.2)}.cs-btn.sel{border-color:var(--ac);color:var(--ac);background:rgba(239,249,35,.1);box-shadow:0 0 8px rgba(239,249,35,.25)}
.cs-reset{font-size:10px;color:var(--red);border-color:rgba(255,68,68,.35)}
.cs-reset:hover{border-color:var(--red);color:var(--red);background:rgba(255,68,68,.08)}
.cs-hint{font-size:10px;color:var(--dm);margin-top:4px;line-height:1.3}
/* Sandbox */
.sb-toggle{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:0;cursor:pointer;border:1px solid var(--bd);background:var(--bg);transition:.15s}
.sb-toggle:hover{border-color:#555}.sb-toggle.on{border-color:var(--green);background:rgba(34,204,102,.06)}
.sb-toggle .sbd{width:10px;height:10px;border-radius:50%;background:var(--bd);transition:.2s}.sb-toggle.on .sbd{background:var(--green)}
.sb-toggle span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--dm)}.sb-toggle.on span{color:var(--green)}
/* Fullscreen mode */
body.fs .topbar{display:none}
body.fs .lp{display:none}
body.fs .main{height:100vh}
/* Keep the ranking/teams panel visible in fullscreen */
body.fs .rp{display:flex}

/* Readability pass: compact operational text stays sharp on dense screens. */
.nav-primary a,
.lp h2,
.replay-filters span,
.replay-filter-count,
.replay-pagination button,
.replay-pagination span,
.mi-map,
.toolbar-pop-title,
.pb-label,
.mi-label,
.rp-sec h2,
.rt-pos,
.rt-logo-fallback,
.rt-name,
.rt-actions .nt-btn,
.rt-team-meta,
.replay-start-loading strong{
font-family:var(--fb);
font-weight:800;
letter-spacing:.035em;
}

@media (max-width: 767px) {
  :root { --topbar-h: auto; }

  body {
    height: auto;
    min-height: 100vh;
    overflow: auto;
    background: #050609;
  }

  .main {
    display: grid;
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    overflow-x: hidden;
  }

  .lp {
    width: 100%;
    max-height: 166px;
    overflow: hidden;
    background: #07090d;
    border-right: 0;
    border-bottom: 1px solid rgba(239, 249, 35, .28);
  }

  .lp h2 {
    min-height: 30px;
    padding: 8px 10px 4px;
    font-size: 11px;
    letter-spacing: .02em;
  }

  .lp-search {
    width: calc(100% - 20px);
    height: 30px;
    margin: 4px 10px 6px;
    padding: 0 10px 0 28px;
    font-size: 12px;
  }

  .replay-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 8px;
    margin: 0 10px 6px;
    padding: 0 0 5px;
    overflow: visible;
  }

  .replay-filters::-webkit-scrollbar,
  .ml::-webkit-scrollbar,
  body.replay-has-canvas .vtb::-webkit-scrollbar,
  body.replay-has-canvas .vtb-btns::-webkit-scrollbar {
    display: none;
  }

  .replay-filters label {
    grid-template-columns: 1fr;
    gap: 4px;
    min-width: 0;
  }

  .replay-date-filter-row {
    grid-column: 1 / -1;
  }

  .replay-filters span {
    font-size: 9px;
    line-height: 1;
  }

  .replay-filters select {
    width: 100%;
    height: 29px;
    min-width: 0;
    padding: 0 22px 0 8px;
    font-size: 11px;
  }

  .replay-filter-count,
  .replay-pagination {
    display: none;
  }

  .ml {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(218px, 72vw);
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 10px 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .mi {
    scroll-snap-align: start;
    min-height: 50px;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 8px;
    padding: 7px;
    margin-bottom: 0;
  }

  .mi-thumb {
    width: 52px;
    height: 34px;
  }

  .mi-map {
    font-size: 13px;
    line-height: 1;
  }

  .mi-event,
  .mi-meta,
  .mi-date {
    font-size: 10px;
    line-height: 1.15;
  }

  .center {
    min-height: 0;
    background: #050508;
  }

  .cv-wrap {
    height: calc(100svh - 294px);
    min-height: 430px;
    background:
      radial-gradient(circle at 50% 18%, rgba(239, 249, 35, .045), transparent 38%),
      #020305;
  }

  body.replay-empty .center {
    flex: 0 0 calc(100svh - 309px);
    height: calc(100svh - 309px);
    min-height: 0;
  }

  body.replay-empty .cv-wrap {
    flex: 0 0 100%;
    height: 100%;
    min-height: 0;
  }

  .empty-state {
    width: calc(100% - 36px);
    max-width: 300px;
    padding: 18px 16px;
    text-align: center;
    border: 1px solid rgba(239, 249, 35, .22);
    background: rgba(12, 14, 18, .72);
  }

  .empty-state h3 {
    font-size: 18px;
    margin-bottom: 3px;
  }

  .empty-state p {
    font-size: 12px;
  }

  body.replay-empty .vtb,
  body.replay-empty .bp {
    display: none;
  }

  body.replay-has-canvas .vtb {
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    display: flex;
    max-width: calc(100vw - 16px);
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0;
    background: rgba(6, 7, 10, .88);
    border: 1px solid rgba(255, 255, 255, .13);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
    scrollbar-width: none;
  }

  body.replay-has-canvas .vtb-btns {
    display: flex;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.replay-has-canvas .vtb.collapsed .vtb-btns {
    display: none;
  }

  .vtb-toggle,
  .vbtn {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    background: rgba(5, 6, 10, .86);
    backdrop-filter: blur(6px);
  }

  .toolbar-pop,
  .draw-palette,
  .draw-size-pop {
    top: auto;
    bottom: 46px;
    left: 0;
    max-width: calc(100vw - 64px);
    transform: none;
  }

  .phase-bar,
  .match-info {
    top: 8px;
    right: 8px;
    left: 58px;
    max-width: none;
    flex-wrap: wrap;
    white-space: normal;
    border-radius: 6px;
    background: rgba(5, 6, 10, .84);
    backdrop-filter: blur(6px);
  }

  .pb-chunk,
  .mi-chunk {
    padding: 3px 8px;
  }

  .pb-label,
  .mi-label {
    font-size: 8px;
  }

  .pb-val,
  .mi-val {
    font-size: 12px;
  }

  .bp {
    position: sticky;
    bottom: 0;
    z-index: 40;
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    gap: 8px;
    padding: 7px 8px;
    background: rgba(12, 13, 17, .98);
    box-shadow: 0 -10px 26px rgba(0, 0, 0, .38);
  }

  .cbtn {
    width: 38px;
    height: 38px;
  }

  .speeds {
    width: calc(100% - 88px);
    gap: 4px;
  }

  .speeds button {
    min-width: 32px;
    height: 30px;
    font-size: 10px;
  }

  .speed-slider {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .tl-wrap {
    order: 3;
    flex: 1 0 100%;
    min-width: 0;
    height: 26px;
  }

  .time-lbl {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-size: 10px;
  }

  .rp {
    width: 100%;
    max-height: 44px;
    overflow: hidden;
    background: #07090d;
    border-left: 0;
    border-top: 1px solid rgba(239, 249, 35, .22);
  }

  body.replay-has-canvas .rp {
    max-height: 260px;
    overflow: auto;
  }

  .rp-sec {
    padding-top: 0;
  }

  .rp-sec h2 {
    min-height: 42px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 10px;
    background: #07090d;
    font-size: 12px;
  }

  .rt {
    margin: 0 8px 6px;
    border-radius: 6px;
    overflow: hidden;
  }

  .rt-hdr {
    min-height: 38px;
    grid-template-columns: 20px 30px minmax(0, 1fr) auto 7px;
    padding: 4px 8px;
  }

  .rt-logo {
    width: 28px;
    height: 28px;
  }

  .rt-name {
    font-size: 13px;
  }

  .rt-actions {
    padding: 6px 8px 8px;
  }

  .pl-top {
    padding: 9px 10px 5px;
  }

  .pl-expanded {
    padding: 2px 10px 0;
  }

  .pl-inventory {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .replay-start-loading {
    width: calc(100vw - 28px);
    justify-content: center;
    border-radius: 7px;
    padding: 12px;
  }

  .replay-start-loading strong {
    font-size: 18px;
  }
}