:root {
  color-scheme: dark;
  --bg: #101115;
  --panel: #17191f;
  --line: #2a2d36;
  --text: #eff1f6;
  --muted: #a5adbe;
  --red: #ff5367;
  font-family: "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
header { min-height: 68px; padding: 0 clamp(20px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.brand { font-size: 21px; font-weight: 850; letter-spacing: .16em; text-decoration: none; color: var(--text); white-space: nowrap; }
.mark { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 6px; background: var(--red); color: #101115; letter-spacing: 0; font-weight: 900; }
.status { color: var(--muted); border: 1px solid var(--line); padding: 7px 11px; font-size: 12px; border-radius: 3px; }
main { width: min(1320px, 94vw); margin: 38px auto 70px; min-height: 73vh; }
.hero { max-width: 920px; margin: 56px auto 30px; }
.eyebrow { color: var(--red); margin: 0 0 8px; font-weight: 750; letter-spacing: .14em; font-size: .72rem; overflow-wrap: anywhere; }
h1, h2, h3 { margin: 0 0 9px; }
h1 { font-size: clamp(2.5rem, 7vw, 5rem); line-height: 1; letter-spacing: -.065em; }
h1 span { color: var(--red); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
p { color: var(--muted); line-height: 1.6; }
.drop { position: relative; min-height: 240px; padding: 28px 12px; margin-top: 28px; display: grid; place-items: center; align-content: center; gap: 10px; background: #17191f; border: 1px dashed #515461; border-radius: 7px; cursor: pointer; text-align: center; }
.drop > span:not(.button, .upload-icon) { font-size: 13px; color: var(--muted); }
.drop:is(:hover, :focus-within, .hover) { border-color: var(--red); background: #211a22; }
.upload-icon { color: var(--red); font-size: 36px; line-height: 1; margin-bottom: 5px; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.button, button, select { display: inline-block; border: 1px solid #3a3d48; border-radius: 4px; padding: 8px 12px; color: var(--text); background: #22252d; font: inherit; text-decoration: none; }
button { cursor: pointer; }
button:hover, button[aria-pressed=true] { border-color: var(--red); }
:focus-visible { outline: 2px solid #ffd368; outline-offset: 3px; }
.primary { margin-top: 7px; border-color: var(--red); background: var(--red); color: #130c10; font-weight: 800; }
progress { width: 100%; margin-top: 16px; accent-color: var(--red); }
#notice { white-space: pre-wrap; overflow-wrap: anywhere; }
details { padding: 14px 16px; border: 1px solid var(--line); border-radius: 4px; }
summary { cursor: pointer; font-weight: 650; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; color: #dfd9eb; }
.panel { padding: 19px; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; min-width: 0; }
.history { max-width: 920px; margin-inline: auto; }
.history-row { width: 100%; display: grid; grid-template-columns: 1fr auto auto; text-align: left; gap: 18px; margin-top: 8px; }
.history-row span, .muted { color: var(--muted); font-size: 13px; }
.match-heading { margin: 21px 0; display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.match-heading h1 { font-size: clamp(2rem, 6vw, 3.75rem); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.stat { border: 1px solid var(--line); border-top: 2px solid #643842; border-radius: 4px; background: var(--panel); padding: 12px 14px; min-width: 0; }
.stat span { display: block; color: var(--muted); font-size: 12px; }
.stat strong { display: block; margin-top: 5px; font-size: clamp(1.1rem, 2.5vw, 2rem); }
.workspace { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 14px; align-items: start; }
.section-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 8px; }
.section-head label { font-size: 12px; color: var(--muted); }
nav { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 12px; }
nav button { padding: 5px 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
nav button[aria-pressed=true] { color: #fff; background: #633441; }
.map-wrap { max-width: 720px; margin-inline: auto; border: 1px solid #393d48; }
.minimap-head, .map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 13px; }
.minimap-head { justify-content: space-between; margin-bottom: 8px; }
.minimap-head h3 { margin: 0; }
.minimap-head span, .map-legend { color: var(--muted); font-size: 12px; }
.map-legend { margin-top: 9px; }
.map-legend label { margin-left: auto; }
.map-legend input { accent-color: var(--red); }
.map-legend .red-team { color: #ff8190; }
.map-legend .blue-team { color: #65d8eb; }
.map-legend .route-key { color: #ffd368; }
canvas { width: 100%; height: auto; display: block; }
.map-controls { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.map-controls span { font-variant-numeric: tabular-nums; }
.map-controls input { flex: 1; min-width: 40px; accent-color: var(--red); }
.map-import { display: block; color: var(--muted); font-size: 12px; }
.map-import input { max-width: 100%; }
aside { display: grid; gap: 14px; }
.feed { display: grid; gap: 5px; max-height: 310px; overflow: auto; }
.feed-item { display: grid; grid-template-columns: 3rem 1fr; gap: 2px 8px; text-align: left; font-size: 13px; background: #1c1f27; }
.feed-item time { color: #ff8190; font-variant-numeric: tabular-nums; }
.feed-item strong { overflow-wrap: anywhere; }
.feed-item span { grid-column: 2; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.feed-item span:empty { display: none; }
.report { margin-top: 14px; }
.report li { line-height: 1.65; margin-bottom: 7px; }
.action-title { margin-top: 18px; }
.view-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:12px 0; }
.view-tabs { display:flex; background:#0d1017; padding:4px; border:1px solid #303849; border-radius:8px; }
.view-tabs button { border:0; background:transparent; font-size:13px; }
.view-tabs button[aria-pressed=true] { background:#344052; color:#fff; }
#scene { width:100%; height:clamp(340px, 52vw, 700px); cursor:grab; touch-action:none; }
#scene:active { cursor:grabbing; }
#scene canvas { width:100%; height:100%; }
.hero { position:relative; padding:36px; border:1px solid #2e3543; border-radius:16px; background:radial-gradient(ellipse at 100% 0%,#45202c 0%,transparent 55%),#141820; }
.hero h1 { font-size:clamp(2.4rem,6vw,4.6rem); letter-spacing:-.05em; }
.drop { background:#0e121bcc; border-color:#4c5362; min-height:260px; }
.panel { background:linear-gradient(150deg,#1a202b,#141820); border-color:#2d3543; border-radius:10px; }
.stat { background:#171d27; border-top:2px solid #ff5367; padding:17px 19px; }
.match-heading { padding:16px 0; }
.workspace { grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr); }
.feed-item { border-color:transparent; border-bottom-color:#2a3342; background:#121824; padding:11px 9px; }
.feed-item:hover { background:#232d3c; }
.map-wrap { border-radius:8px; overflow:hidden; box-shadow:0 12px 35px #0004; }
#rounds { padding-bottom:12px; border-bottom:1px solid #2d3543; }
.report { padding:26px; }
.history-row { padding:16px; background:#131a25; }
@media(max-width:820px) { .workspace { grid-template-columns:1fr; } .hero { padding:22px; } }
footer { padding: 20px; color: var(--muted); border-top: 1px solid var(--line); text-align: center; font-size: 12px; }
@media (max-width: 820px) {
  .workspace { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 450px) {
  main { width: 94vw; margin-top: 24px; }
  .hero { margin-top: 35px; }
  header { padding: 0 12px; }
  .brand { font-size: 16px; }
  .status { padding: 5px 7px; font-size: 11px; }
  .panel { padding: 12px; }
}
/* Replay studio visual system */
:root { --bg:#090b0e; --panel:#111418; --line:#282d33; --muted:#9199a4; --red:#ff4655; }
body { background:radial-gradient(ellipse at 20% 0,#241317 0,transparent 35%),var(--bg); }
header { min-height:78px; padding:0 36px; background:#0c0e11; }
.brand { font-size:22px; letter-spacing:.11em; }
.mark { clip-path:polygon(0 0,100% 0,100% 66%,66% 100%,0 100%); width:35px; height:35px; }
.header-label { color:#6e7680; font-size:10px; letter-spacing:.21em; margin-right:auto; margin-left:32px; }
main { width:min(1760px,95vw); margin-top:26px; }
.hero { max-width:1180px; padding:60px; border:0; border-radius:0; background:linear-gradient(120deg,#15191e,#101216); border-left:3px solid var(--red); }
.hero:before { content:'01 / MATCH LAB'; position:absolute; top:30px; right:32px; color:#737a83; font-size:11px; letter-spacing:.14em; }
.hero h1 { font-size:clamp(2.8rem,5.5vw,5.5rem); line-height:.98; font-weight:900; letter-spacing:-.055em; margin-top:22px; }
.hero > p:not(.eyebrow) { font-size:16px; line-height:1.8; }
.drop { border:1px dashed #454b54; background:linear-gradient(110deg,#1c2026,#14171c); border-radius:0; margin:32px 0 22px; min-height:220px; }
.drop strong { font-size:20px; letter-spacing:-.04em; }
.upload-icon { font-size:30px; }
.button,button,select { border-radius:3px; font-size:13px; }
.primary { padding:12px 34px; color:white; }
.history { max-width:1180px; }
.panel { background:#111418; border:1px solid #292e35; border-radius:3px; padding:22px; }
.match-heading { margin:8px 0 18px; padding:6px 0 12px; border-bottom:1px solid var(--line); }
.match-heading h1 { font-size:52px; text-transform:uppercase; letter-spacing:-.04em; }
.stats { gap:0; border:1px solid var(--line); margin-bottom:24px; }
.stat { border:0; border-right:1px solid var(--line); border-top:0; border-radius:0; background:#111418; padding:17px 26px; }
.stat:last-child { border-right:0; }
.stat strong { font-size:30px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.05em; }
.stat span { text-transform:uppercase; letter-spacing:.06em; }
.workspace { grid-template-columns:minmax(0,1fr) 320px; gap:20px; }
.replay { padding:20px; border-top:2px solid var(--red); }
.section-head h2 { font-size:23px; letter-spacing:-.05em; }
.eyebrow { font-size:10px; letter-spacing:.2em; }
#rounds { gap:4px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:14px; margin-top:20px; }
#rounds button { min-width:33px; height:32px; background:#1b2026; border-color:transparent; }
#rounds button[aria-pressed=true] { background:var(--red); color:white; }
#round-summary { font-size:12px; }
.view-toolbar { margin:14px 0; }
.view-tabs { border:1px solid #333941; background:#090c10; border-radius:4px; }
.view-tabs button { padding:9px 15px; }
.view-tabs button[aria-pressed=true] { background:#e8ecf0; color:#13171d; font-weight:700; }
#view-pov[aria-pressed=true] { background:#ff4655; color:white; }
.map-wrap { max-width:none; border:1px solid #363c44; border-radius:2px; background:#0b1015; }
#map { max-height:650px; object-fit:contain; }
#scene { height:clamp(430px,48vw,760px); }
#scene[data-mode=pov]:after { content:'＋'; position:absolute; top:50%; left:50%; color:#fff8; pointer-events:none; font-size:20px; transform:translate(-50%,-50%); }
#scene { position:relative; }
.map-controls { padding:16px; background:#090c10; border:1px solid #292f37; margin-top:15px; }
#play { background:var(--red); border:0; color:white; min-width:68px; font-weight:700; }
#time { font-family:Consolas,monospace; font-size:15px; }
.feed { max-height:280px; gap:0; }
.feed-item { padding:14px 8px; background:transparent; border:0; border-bottom:1px solid #252a31; border-radius:0; }
.feed-item:hover { background:#22272e; }
aside .panel { padding:20px 16px; }
aside h2 { font-size:17px; margin-bottom:16px; }
#model-status { border-left:2px solid var(--red); padding-left:10px; font-size:12px; }
#scene-help { font-size:11px; line-height:1.7; }
.map-import { font-size:11px; opacity:.75; }
.report { border-top:2px solid #505a67; margin-top:24px; }
.report > h2 { font-size:26px; }
.status { border-radius:20px; background:#12171b; }
footer { color:#737b85; font-size:10px; }
@media(min-width:1500px) { .workspace { grid-template-columns:minmax(0,1fr) 360px; } }
@media(max-width:1000px) { .workspace { grid-template-columns:1fr; } aside { grid-template-columns:repeat(3,minmax(0,1fr)); } .header-label { display:none; } .hero { padding:32px; } }
@media(max-width:650px) { aside { grid-template-columns:1fr; } .hero { padding:24px; } .hero:before { display:none; } .hero h1 { font-size:36px; } header { padding:0 16px; } .view-tabs button { padding:8px; font-size:11px; } .stat { padding:14px; } .replay { padding:12px; } #scene { height:430px; } }
#dashboard .match-heading { margin:6px 0 12px; padding:6px 0 8px; }
#dashboard .match-heading h1 { font-size:36px; }
#dashboard .stats { margin-bottom:16px; }
#dashboard .stat { padding:10px 20px; }
#dashboard .stat strong { font-size:24px; margin-top:3px; }
#dashboard #back { padding:4px 0; background:transparent; border:0; color:#929ba7; }
#dashboard .replay .section-head h2 { font-size:20px; }
#rounds { margin-top:12px; padding-bottom:10px; }
#round-summary { margin:8px 0; }
.replay:fullscreen { overflow:auto; background:#0c1015; padding:22px; }
.replay:fullscreen #scene { height:calc(100vh - 320px); }
.replay:fullscreen #map { max-height:calc(100vh - 320px); }
.camera-actions { display:flex; gap:6px; }
.roster {display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;margin:16px 0;}
.roster-player {position:relative;min-width:0;padding:8px 4px 7px;background:#17222b;border:0;border-bottom:3px solid #65d8eb;text-align:center;overflow:hidden;}
.roster-player.attack {border-bottom-color:#ff5367;background:#281d25;}
.roster-player[aria-pressed=true] {outline:2px solid #ece8e1;outline-offset:-2px;background:#37464f;}
.roster-player .agent-icon {width:52px;height:52px;object-fit:contain;display:block;margin:auto;}
.roster-player strong,.roster-player span {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.roster-player strong {font-size:12px;margin-top:4px;}.roster-player span {font-size:10px;color:#b9c7cc;margin-top:3px;}
.observer-bar {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0;background:linear-gradient(90deg,#20363e,#15202b);border-left:3px solid #b7efe1;padding:12px;}
#selected-player {display:flex;align-items:center;gap:14px;min-width:0;}#selected-player .agent-icon {width:66px;height:66px;}
.identity-copy {display:grid;gap:4px;}.identity-copy small {font-size:10px;letter-spacing:.12em;color:#96d9cd;}.identity-copy strong {font-size:22px;}.identity-copy span {font-size:12px;color:#c0ced2;}
.nickname-editor {font-size:12px;max-width:310px;border:0;padding:8px;}.nickname-editor p {font-size:11px;}.nickname-editor input {color:white;background:#0f1920;border:1px solid #5b6874;padding:8px;width:170px;}
.inspector-tabs {display:flex;flex-wrap:nowrap;margin:0;padding:4px;background:#101b23;gap:4px;border:1px solid #36434c;}
.inspector-tabs button {flex:1;padding:10px 4px;white-space:nowrap;background:transparent;border:0;color:#a7bbc1;}
.inspector-tabs button[aria-pressed=true] {background:#d9e9e6;color:#132127;font-weight:800;}
.workspace aside {display:flex;flex-direction:column;gap:0;}aside .panel {border-top:0;min-height:450px;}.feed {max-height:720px;}.feed-item {grid-template-columns:3rem minmax(0,1fr);padding:14px 9px;}.feed-item strong {font-size:13px;line-height:1.5;}.feed-item span {line-height:1.7;}
.ability-icon {width:26px;height:26px;object-fit:contain;grid-row:1/3;}.feed-item:has(.ability-icon) {grid-template-columns:30px 3rem minmax(0,1fr);}.feed-item:has(.ability-icon) span {grid-column:3;}
#utility h3 {margin:20px 0 8px;color:#c9e4df;font-size:13px;}#utility h3:first-child {margin-top:0;}#utility details {margin-top:16px;}.map-legend label {margin-left:0;}
.replay {background:#101b24;border-top-color:#e6e6df;}.map-controls {background:#162b34;}#play {background:#dce7e3;color:#15232b;}.section-head h2 {color:#e7ece5;}#rounds button[aria-pressed=true] {background:#d7e5df;color:#14272b;}
@media(max-width:1000px){.roster {grid-template-columns:repeat(5,minmax(0,1fr));}.roster-player .agent-icon {width:40px;height:40px;}.workspace aside {display:flex;}}
@media(max-width:650px){.observer-bar {align-items:flex-start;flex-direction:column;}#selected-player .agent-icon{width:48px;height:48px;}.identity-copy strong{font-size:18px;}}
#scene {isolation:isolate}
#scene > canvas {position:absolute;inset:0}
#replay-hud {position:absolute;inset:0;z-index:2;pointer-events:none;color:white;text-shadow:0 1px 5px #000;font:600 14px system-ui}
.hud-top {position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px}
#hud-allies,#hud-enemies {display:flex;align-items:center;gap:5px;padding:3px 9px;background:linear-gradient(90deg,#22665c99,#18292a77);border-top:1px solid #b8e6d9aa}
#hud-enemies {background:linear-gradient(90deg,#34232777,#9e494999);border-top-color:#efacacaa}
.hud-agent {width:clamp(17px,3vw,34px);border-bottom:2px solid #eee;display:block}
.hud-agent img {display:block;width:100%}.hud-agent.eliminated {opacity:.35;filter:grayscale(1)}.hud-agent.selected {border-color:#ffe49d}
.hud-top b {min-width:22px;text-align:center;font-size:20px}
.hud-clock {min-width:62px;text-align:center;background:#18232988;padding:4px 7px}
.hud-clock strong {display:block;font-size:25px;line-height:1;font-variant-numeric:tabular-nums}
.hud-clock small {display:block;font-size:10px;margin-top:4px;white-space:nowrap}
.hud-map {position:absolute;left:2%;top:8%;width:min(22%,220px);text-align:center}
#hud-map {position:static;width:100%;height:auto;border-radius:50%;opacity:.8}
#hud-kills {position:absolute;top:12%;right:2%;display:grid;gap:3px;text-align:right}
#hud-kills div {padding:4px 9px;background:linear-gradient(90deg,#267264bb,#9c4545bb);font-size:12px}
#hud-loadout {position:absolute;bottom:4%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:6px 15px;background:#13232699;border-bottom:2px solid #79cbba}
#scene:not([data-mode=pov]) #hud-loadout {display:none}
#dashboard .match-heading,#dashboard .stats,#dashboard .report,#dashboard aside,#dashboard .section-head>div,#round-summary,#dashboard .minimap-head,#dashboard .map-import,#dashboard #map-status,#scene-help {display:none}
#dashboard .workspace {display:block}
#dashboard .replay {padding:0;border:0;background:transparent}
#dashboard .roster {margin:8px 0;gap:3px}
#dashboard .roster-player .agent-icon {width:30px;height:30px}
#dashboard .roster-player span {display:none}
#dashboard .observer-bar {margin:5px 0;padding:5px 10px}
#dashboard #selected-player .agent-icon {width:35px;height:35px}
#dashboard .identity-copy strong {font-size:15px}
#dashboard .identity-copy span {display:none}
#dashboard .section-head {float:right}
#dashboard .section-head label {font-size:0}
#dashboard .map-legend {font-size:11px}
#dashboard .map-legend>span {display:none}
#hud-kills div {display:flex;align-items:center;gap:5px}
#hud-kills img {width:23px;height:23px}
#hud-vitals,#hud-ammo {position:absolute;bottom:5%;font-size:clamp(14px,2vw,26px);font-variant-numeric:tabular-nums;background:#172428a8;padding:4px 12px}
#hud-vitals {left:12%}
#hud-ammo {right:5%}
#scene:not([data-mode=pov]) :is(#hud-vitals,#hud-ammo,#hud-death) {display:none}
#hud-death:not(:empty) {position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);background:#8d2631dd;border-top:2px solid #ffd2c7;padding:12px 38px;font-size:25px}
#scene.dead[data-mode=pov] #hud-loadout,#scene.dead[data-mode=pov] #hud-ammo {display:none}
body:has(#dashboard:not([hidden])) footer {display:none}
#hud-weapon-slots {position:absolute;right:5%;bottom:13%;display:grid;gap:4px;text-align:right;font-size:12px}
#hud-weapon-slots span {padding:4px 9px;color:#bdc5cb;background:#17242899;border-right:2px solid transparent}
#hud-weapon-slots .active {color:#fff;background:#28574fe8;border-right-color:#91efd8}
#scene:not([data-mode=pov]) #hud-weapon-slots,#scene.dead #hud-weapon-slots {display:none}