:root{--r-ink:#13213b;--r-muted:#64748b;--r-line:#dbe4ef;--r-card:#fff;--r-soft:#f3f7fb;--r-cyan:#007fa7;--r-green:#087e5b;--r-red:#c23b4a}
body.dark-mode{--r-ink:#edf4ff;--r-muted:#a7b5ca;--r-line:rgba(255,255,255,.13);--r-card:#111b2c;--r-soft:#172439;--r-cyan:#45c7e8;--r-green:#57d4a8;--r-red:#ff7c88}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}.ui-icon{width:1.05em;height:1.05em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.replay-shell{width:min(1180px,calc(100% - 32px));margin:auto;padding:34px 0 70px;color:var(--r-ink)}
.replay-hero{display:grid;grid-template-columns:1.45fr .55fr;gap:22px;margin-bottom:22px}
.replay-hero-copy,.hero-proof,.upload-card,.guide,.panel,.result-hero,.detail{border:1px solid var(--r-line);border-radius:26px;background:var(--r-card)}
.replay-hero-copy{position:relative;overflow:hidden;padding:clamp(32px,5vw,64px);background:radial-gradient(circle at 85% 15%,color-mix(in srgb,var(--r-cyan) 18%,transparent),transparent 34%),var(--r-card)}
.replay-hero-copy:after{content:"";position:absolute;right:-60px;bottom:-110px;width:280px;height:280px;border:44px solid color-mix(in srgb,var(--r-cyan) 8%,transparent);border-radius:50%}
.eyebrow,.section-heading>span,.hero-proof>span{color:var(--r-cyan);font-size:.75rem;font-weight:900;letter-spacing:.12em}
.replay-hero h1{position:relative;z-index:1;margin:13px 0;font-size:clamp(2.6rem,6vw,5rem);line-height:.98;letter-spacing:-.06em}
.replay-hero-copy>p{position:relative;z-index:1;max-width:700px;margin:0;color:var(--r-muted);font-size:1.04rem;line-height:1.75}
.trust-list{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.trust-list span{padding:8px 12px;border:1px solid var(--r-line);border-radius:999px;color:var(--r-muted);font-size:.82rem;font-weight:700}
.hero-proof{padding:30px;border-color:color-mix(in srgb,var(--r-cyan) 20%,var(--r-line));background:linear-gradient(145deg,#17263d,#101a2b);color:#edf4ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}.hero-proof>span{color:#57d9f4}.hero-proof>strong{display:block;margin:18px 0 28px;font-size:1.55rem;line-height:1.35}.hero-proof ol{display:grid;gap:15px;padding-left:22px;margin:0;color:#b8c7da}.hero-proof li{font-size:.9rem}.hero-proof li::marker{color:#57d9f4;font-weight:900}
.upload-card{display:grid;grid-template-columns:.45fr 1fr;gap:24px 34px;padding:clamp(24px,4vw,44px)}
.section-heading h2{margin:8px 0 7px;font-size:clamp(1.55rem,3vw,2.15rem);letter-spacing:-.04em}.section-heading p{margin:0;color:var(--r-muted);line-height:1.6}
.guide-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.guide-heading h2{margin-bottom:0}.official-link{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:11px 15px;border:1px solid var(--r-line);border-radius:12px;color:var(--r-cyan);font-size:.9rem;font-weight:800;text-decoration:none}.official-link:hover{border-color:var(--r-cyan);background:rgba(67,211,255,.07)}
.dropzone{display:grid;place-items:center;min-height:230px;padding:24px;border:2px dashed color-mix(in srgb,var(--r-cyan) 42%,var(--r-line));border-radius:22px;background:color-mix(in srgb,var(--r-cyan) 5%,var(--r-soft));text-align:center;cursor:pointer;transition:.2s}
.dropzone:hover,.dropzone.dragging{transform:translateY(-2px);border-color:var(--r-cyan)}.dropzone input{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0)}
.file-icon{display:grid;place-items:center;width:70px;height:70px;margin-bottom:12px;border-radius:20px;background:var(--r-ink);color:var(--r-card);font-size:.8rem;font-weight:900}.dropzone small{margin-top:6px;color:var(--r-muted)}
.file-status{grid-column:2;margin:-14px 0 0;color:var(--r-muted);font-size:.88rem}.file-status[data-tone=success]{color:var(--r-green)}.file-status[data-tone=error]{color:var(--r-red)}
.privacy-banner{grid-column:1/-1;display:flex;gap:13px;align-items:center;padding:16px 18px;border-radius:16px;background:color-mix(in srgb,var(--r-green) 8%,var(--r-soft))}.privacy-banner>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--r-green);color:#fff;font-weight:900}.privacy-banner p{margin:2px 0 0;color:var(--r-muted);font-size:.86rem}
.player-step{grid-column:1/-1;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:end}.player-step label{display:block;margin-bottom:7px;color:var(--r-muted);font-size:.8rem;font-weight:800}
.player-step select,.player-step button,.secondary,.questions button{min-height:48px;border-radius:13px;font:inherit}.player-step select{width:100%;padding:0 14px;border:1px solid var(--r-line);background:var(--r-card);color:var(--r-ink)}
.player-step button,.questions button{padding:0 20px;border:0;background:var(--r-cyan);color:#fff;font-weight:850;cursor:pointer}.player-step .secondary,.secondary{padding:0 18px;border:1px solid var(--r-line);background:transparent;color:var(--r-ink);cursor:pointer}
.player-step button:disabled{opacity:.42;cursor:not-allowed}
.dropzone:focus-within,.player-step select:focus-visible,.player-step button:focus-visible,.secondary:focus-visible,.questions button:focus-visible,.round-filters button:focus-visible,.official-link:focus-visible{outline:3px solid rgba(67,211,255,.38);outline-offset:3px}
.guide{margin-top:22px;padding:clamp(24px,4vw,40px)}.guide>ol{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0;margin:26px 0 0;list-style:none}.guide li{display:flex;gap:14px;padding:20px;border-radius:18px;background:var(--r-soft)}.guide li>b{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:10px;background:var(--r-ink);color:var(--r-card)}.guide li p,.disclaimer{margin:6px 0 0;color:var(--r-muted);font-size:.88rem;line-height:1.55}.disclaimer{margin-top:20px}
.results{margin-top:22px;scroll-margin-top:calc(var(--header-h,70px) + 16px)}.result-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 32px}.result-hero h2{margin:7px 0;font-size:clamp(1.5rem,3vw,2.25rem)}.result-hero p{margin:0;color:var(--r-muted)}.result-actions{display:grid;grid-template-columns:repeat(2,max-content);gap:9px;justify-content:end}.result-actions small{grid-column:1/-1;min-height:1.2em;color:var(--r-muted);font-size:.72rem;text-align:right}.share-replay{display:inline-flex;align-items:center;justify-content:center;gap:7px}.share-replay .ui-icon{color:var(--r-cyan)}.result-actions button:disabled{cursor:wait;opacity:.65}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0}.stats>div{padding:22px;border:1px solid var(--r-line);border-radius:18px;background:var(--r-card)}.stats span{display:block;margin-bottom:8px;color:var(--r-muted);font-size:.8rem}.stats strong{font-size:1.45rem}
.result-nav{display:flex;gap:8px;overflow-x:auto;padding:12px;margin-bottom:12px;border:1px solid var(--r-line);border-radius:16px;background:var(--r-card);scrollbar-width:thin}.result-nav a{flex:1;min-width:82px;padding:10px 13px;border-radius:10px;background:var(--r-soft);color:var(--r-muted);font-size:.84rem;font-weight:850;text-align:center;text-decoration:none}.result-nav a:hover,.result-nav a:focus-visible{color:var(--r-cyan);outline:2px solid color-mix(in srgb,var(--r-cyan) 45%,transparent);outline-offset:-2px}.panel[id]{scroll-margin-top:calc(var(--header-h,70px) + 16px)}
.match-flow{padding:clamp(22px,4vw,34px);border:1px solid var(--r-line);border-radius:22px;background:var(--r-card)}.match-flow h2{margin:7px 0 3px;font-size:clamp(1.35rem,3vw,1.9rem)}.match-flow>div:first-child p{margin:0;color:var(--r-muted);font-size:.86rem}.match-flow-track{display:grid;grid-template-columns:repeat(10,minmax(88px,1fr));gap:8px;overflow-x:auto;margin-top:20px;padding:2px 2px 8px;scrollbar-width:thin}.match-flow-track button{position:relative;min-height:102px;padding:13px 9px;border:1px solid var(--r-line);border-top:4px solid var(--r-green);border-radius:14px;background:var(--r-soft);color:var(--r-ink);font:inherit;text-align:left;cursor:pointer}.match-flow-track button[data-result=loss]{border-top-color:var(--r-red)}.match-flow-track button:hover,.match-flow-track button:focus-visible{transform:translateY(-2px);border-color:var(--r-cyan);outline:none}.match-flow-track b,.match-flow-track span{display:block}.match-flow-track b{color:var(--r-cyan);font-size:.92rem}.match-flow-track span{margin-top:7px;font-size:.78rem;font-weight:850}.match-flow-track small{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:.7rem;white-space:nowrap}.match-flow-track em{display:inline-flex;align-items:center;gap:2px;color:var(--r-muted);font-style:normal}.match-flow-track em[data-tone=kill]{color:var(--r-cyan)}.match-flow-track em[data-tone=death]{color:var(--r-red)}.match-flow-track em[data-tone=survive]{color:var(--r-green)}.match-flow-track em[data-tone=throw]{color:#7657d6}.flow-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;color:var(--r-muted);font-size:.75rem}.flow-legend span{display:flex;align-items:center;gap:6px}.flow-legend i{width:8px;height:8px;border-radius:50%;background:var(--r-green)}.flow-legend i[data-tone=loss]{background:var(--r-red)}
.moment-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px}.moment-grid article{padding:22px;border:1px solid var(--r-line);border-top:4px solid var(--r-green);border-radius:18px;background:var(--r-soft)}.moment-grid article[data-tone=review]{border-top-color:var(--r-red)}.moment-grid article>span{display:flex;align-items:center;gap:6px;color:var(--r-green);font-size:.72rem;font-weight:900;letter-spacing:.06em}.moment-grid article[data-tone=review]>span{color:var(--r-red)}.moment-grid h3{margin:9px 0}.moment-grid p{min-height:66px;margin:0;color:var(--r-muted);font-size:.88rem;line-height:1.6}.moment-grid button{display:inline-flex;align-items:center;gap:6px;margin-top:15px;padding:9px 12px;border:1px solid var(--r-line);border-radius:10px;background:var(--r-card);color:var(--r-cyan);font:inherit;font-size:.8rem;font-weight:850;cursor:pointer}.moment-grid button:hover,.moment-grid button:focus-visible{border-color:var(--r-cyan);outline:none}
.panel{margin-top:12px;padding:clamp(24px,4vw,38px)}.insights,.rounds{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}.insights article{min-height:150px;padding:22px;border:1px solid var(--r-line);border-top:4px solid var(--r-green);border-radius:18px;background:var(--r-soft)}.insights article[data-tone=warn]{border-top-color:var(--r-red)}.insights article[data-tone=neutral]{border-top-color:var(--r-cyan)}.insights article>span{color:var(--r-green);font-size:.72rem;font-weight:850}.insights article[data-tone=warn]>span{color:var(--r-red)}.insights article[data-tone=neutral]>span{color:var(--r-cyan)}.insights h3{margin:9px 0}.insights p{margin:0;color:var(--r-muted);line-height:1.65;font-size:.9rem}
.round-filters{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}.round-filters button{padding:9px 14px;border:1px solid var(--r-line);border-radius:999px;background:transparent;color:var(--r-muted);font:inherit;font-size:.86rem;font-weight:800;cursor:pointer}.round-filters button[aria-pressed="true"]{border-color:var(--r-cyan);background:rgba(67,211,255,.12);color:var(--r-cyan)}.filter-status{margin:10px 0 -10px;color:var(--r-muted);font-size:.8rem}.round[hidden],.round.is-collapsed{display:none}.expand-rounds{display:block;min-height:46px;margin:18px auto 0;padding:0 20px;border:1px solid var(--r-line);border-radius:13px;background:var(--r-soft);color:var(--r-cyan);font:inherit;font-weight:850;cursor:pointer}.expand-rounds:hover,.expand-rounds:focus-visible{border-color:var(--r-cyan);outline:3px solid rgba(67,211,255,.18);outline-offset:2px}
.round{overflow:hidden;border:1px solid var(--r-line);border-radius:18px;background:var(--r-soft)}.round-head{display:flex;justify-content:space-between;gap:12px;padding:17px 18px;border-bottom:1px solid var(--r-line)}.round-head>div{display:flex;gap:10px;align-items:center}.round-head b{color:var(--r-cyan)}.round-head>span{color:var(--r-muted);font-size:.8rem}.timeline{padding:18px}.event{display:grid;grid-template-columns:44px 10px 1fr;gap:9px;padding:7px 0}.event time{color:var(--r-muted);font-size:.74rem}.event i{width:8px;height:8px;margin-top:4px;border-radius:50%;background:var(--r-cyan)}.event.death i{background:var(--r-red)}.event.throw i{background:#6941c6}.event strong,.event small{display:block;font-size:.82rem}.event small{margin-top:3px;color:var(--r-muted)}
.round-summary{margin:0;padding:13px 18px 0;color:var(--r-muted);font-size:.78rem;line-height:1.5}.survival-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}.survival-grid article{padding:18px;border:1px solid var(--r-line);border-radius:16px;background:var(--r-soft)}.survival-grid article>span{display:block;margin-bottom:7px;color:var(--r-muted);font-size:.78rem}.metric-label{display:flex;align-items:center;gap:7px;margin-bottom:7px;color:var(--r-cyan)}.survival-grid .metric-label span{margin:0;color:var(--r-muted);font-size:.78rem}.survival-grid strong{display:block;font-size:1.2rem;line-height:1.3}.survival-grid article>small{display:block;margin-top:5px;color:var(--r-muted);font-size:.72rem;line-height:1.35}.throw-metric[data-tone=good] .metric-label{color:var(--r-green)}.throw-metric[data-tone=warn] .metric-label{color:var(--r-red)}.metric-bar{height:7px;margin-top:13px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--r-muted) 16%,transparent)}.metric-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--r-cyan),var(--r-green));transition:width .45s ease}.panel-note{margin:16px 0 0;color:var(--r-muted);font-size:.86rem}.panel-note strong{color:var(--r-ink)}
.questions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}.questions button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:70px;background:var(--r-soft);border:1px solid var(--r-line);color:var(--r-ink)}.questions button .ui-icon{width:1.25em;height:1.25em;color:var(--r-cyan)}.questions button:hover,.questions button[aria-pressed="true"]{border-color:var(--r-cyan);color:var(--r-cyan)}.questions button[aria-pressed="true"]{background:rgba(67,211,255,.1)}
.detail{margin-top:12px;padding:clamp(24px,4vw,38px);border-left:5px solid var(--r-cyan);scroll-margin-top:calc(var(--header-h,70px) + 16px)}.detail h2{margin:8px 0 16px}.detail li{margin:8px 0;color:var(--r-muted);line-height:1.65}.detail small{color:var(--r-muted)}.hidden{display:none!important}
@media(max-width:900px){.replay-hero,.upload-card{grid-template-columns:1fr}.file-status{grid-column:1}.insights,.rounds{grid-template-columns:1fr}.questions,.survival-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.replay-shell{width:calc(100% - 22px);padding-top:14px}.guide-heading{align-items:flex-start;flex-direction:column}.guide>ol,.stats{grid-template-columns:1fr 1fr}.player-step{grid-template-columns:1fr}.result-hero{align-items:flex-start;flex-direction:column}.result-actions{width:100%;grid-template-columns:1fr 1fr}.result-actions small{text-align:left}.result-actions .secondary{padding:0 10px}}
@media(max-width:460px){.guide>ol,.stats,.questions,.survival-grid,.moment-grid{grid-template-columns:1fr}.replay-hero h1{font-size:2.55rem}.moment-grid p{min-height:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}