/* Replay landing pages load independently of the game's global stylesheet. */
html{-webkit-user-select:none;user-select:none}
input,textarea,[contenteditable="true"],[contenteditable="plaintext-only"]{-webkit-user-select:text;user-select:text}
@font-face{font-family:SkybreakDisplay;src:url('./fonts/display.woff2') format('woff2');font-display:swap}
@font-face{font-family:SkybreakBody;src:url('./fonts/body.woff2') format('woff2');font-display:swap}
.replay-page,.replay-page *,.replay-landing-email,.replay-landing-email *{box-sizing:border-box}
.replay-page [hidden],.replay-landing-email[hidden],.replay-landing-email [hidden]{display:none!important}
.replay-page button,.replay-landing-email button{font:inherit;min-height:48px;padding:14px 24px;border:1px solid #8eb2c844;border-radius:5px;background:#18374b;color:#fff8de;cursor:pointer;text-align:center}
.replay-page button:hover,.replay-landing-email button:hover{background:#254f66}
.replay-page button:disabled,.replay-landing-email button:disabled{opacity:.65;cursor:default}
.replay-page a,.replay-landing-email a{color:#ffe44b}
.replay-landing-email button:focus-visible{outline:3px solid #ffe44b;outline-offset:4px}
.replay-landing-email input{font-size:16px}
.replay-page{min-height:100dvh;max-width:1200px;margin:0 auto;padding:clamp(24px,4vw,56px);color:#fff8de;font-family:SkybreakBody,sans-serif;background:#0c243a}.replay-header{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:clamp(36px,7vh,80px)}.replay-brand{font:clamp(1.5rem,2.5vw,2.4rem)/1 SkybreakDisplay,sans-serif;color:#fff8de;text-decoration:none;max-width:9ch;text-transform:uppercase}.replay-page h1{font:clamp(2.6rem,5vw,4.5rem)/1.04 SkybreakDisplay,sans-serif;letter-spacing:-.02em;max-width:18ch;margin:0 0 20px}.replay-summary{color:#d7e9f3;line-height:1.7;max-width:60ch;font-size:1.05rem;margin:0 0 18px}.replay-expiry{color:#c0dcea;line-height:1.5;font-size:.85rem}.replay-actions{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0 16px}.replay-actions button{min-height:48px}.replay-actions .primary{background-color:#ffe44b;color:#102a42;font:1.5rem SkybreakDisplay,sans-serif}.replay-page button:disabled{cursor:default}.replay-page button:focus-visible,.replay-page a:focus-visible,.replay-page input:focus-visible{outline:3px solid #ffe44b;outline-offset:5px}.replay-readiness{display:flex;flex-wrap:wrap;gap:8px 28px;color:#c0dcea;font-size:.85rem;line-height:1.5}.replay-readiness p{margin:0}.replay-error{padding:15px 18px;background:#633e25;color:#fff1d8;line-height:1.5;max-width:64ch}.replay-status{min-height:1.5em;font-size:.85rem;line-height:1.5;color:#c0dcea}.replay-viewer{margin:30px 0 16px;background:#061522}.replay-player-host{position:relative;min-height:0}.replay-player-host canvas,.replay-player-host video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain}.replay-player-loading{padding:50px 24px;text-align:center;line-height:1.6}.replay-controls{display:grid;grid-template-columns:auto minmax(90px,1fr) auto auto auto;gap:12px;align-items:center;padding:16px}.replay-controls button{padding:12px 16px;text-align:center}.replay-controls input{min-width:0;width:100%;accent-color:#ffe44b;cursor:pointer;height:44px}.replay-controls output{font-variant-numeric:tabular-nums;font-size:.85rem;white-space:nowrap}.match-replay-notice{margin-top:24px;padding:22px 0;border-top:1px solid #8eb2c866;color:#fff8de}.match-replay-notice h2{font:2rem SkybreakDisplay,sans-serif;margin:0 0 12px}.match-replay-notice p{line-height:1.5}.match-replay-notice a{display:inline-flex;align-items:center;min-height:48px;margin-right:20px;color:#ffe44b;font-weight:700}.match-replay-notice button{min-height:48px}.match-replay-notice a:focus-visible,.match-replay-notice button:focus-visible{outline:3px solid #ffe44b;outline-offset:4px}
@media(max-width:700px){.replay-header{gap:12px;margin-bottom:36px}.replay-header button{padding:12px 16px;max-width:170px;text-align:center}.replay-page h1{font-size:2.7rem}.replay-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.replay-actions button{padding:14px 12px;text-align:center}.replay-controls{grid-template-columns:auto 1fr auto;gap:10px;padding:12px}.replay-controls input{grid-column:2/4;grid-row:1}.replay-controls output{grid-column:1;grid-row:2}.replay-controls button{padding:10px}.replay-readiness{flex-direction:column}}
.replay-email{margin-top:24px;padding-top:22px;border-top:1px solid #8eb2c844;max-width:660px}.replay-email-row{display:flex;align-items:flex-end;gap:12px}.replay-email-label{display:flex;flex:1;flex-direction:column;gap:10px;min-width:0;font-weight:700;line-height:1.45}.replay-email input{width:100%;min-width:0;min-height:48px;padding:12px 14px;color:#fff8de;background:#061522;border:1px solid #8eb2c877;border-radius:4px;font:inherit}.replay-email input::placeholder{color:#9fb8c9}.replay-email input:focus-visible{outline:3px solid #ffe44b;outline-offset:3px}.replay-email button{white-space:nowrap;min-height:48px}.replay-email-note,.replay-email-status{font-size:.85rem;line-height:1.5;color:#c0dcea}.replay-email-status{min-height:1.5em}.replay-email[data-state=error] .replay-email-status{color:#ffdba5}.replay-email[data-state=accepted] .replay-email-status{color:#d8ebba}@media(max-width:600px){.replay-email-row{align-items:stretch;flex-direction:column}.replay-email button{text-align:center}}

.replay-extras{display:grid;gap:1rem;margin-top:1.5rem}.replay-thumbnail{max-width:100%;height:auto;border-radius:16px}.replay-extras button{min-height:44px;justify-self:start}
.private-replay-host{position:fixed;right:20px;bottom:20px;z-index:1200;width:min(420px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow:auto;background:#0c243af5;border:1px solid #8eb2c866;border-radius:12px;padding:0 20px;color:#fff8de;box-shadow:0 12px 40px #0006;pointer-events:auto}.private-replay-host:has(.match-replay-notice[hidden]):not(:has(>button:not([hidden]))){display:none}.private-replay-host .match-replay-notice{border:0;margin:0;padding:20px 0}.private-replay-host .match-replay-notice h2{font-size:1.7rem}.private-replay-host .replay-email-row{flex-direction:column;align-items:stretch}.private-replay-host .replay-email{margin-top:16px;padding-top:16px}.private-replay-host>button{margin-bottom:18px;min-height:44px}.replay-availability{font-size:.82rem;line-height:1.5;color:#bed1dd}@media(max-width:600px){.private-replay-host{right:12px;bottom:12px;width:calc(100vw - 24px);max-height:60dvh}}

.replay-email-share{margin:16px 0 0;padding:14px 16px;border-left:3px solid #ffe44b;background:#ffe44b0a;color:#e3edf4;font-size:.9rem;line-height:1.55}.match-replay-notice .replay-email-share a,.replay-email-share a{display:inline;min-height:0;margin:0;color:#ffe44b;font-weight:700}.replay-email[data-state=accepted] .replay-email-row{display:none}.replay-email[data-state=accepted] .replay-email-status{padding:12px 14px;background:#d8ebba0a;border:1px solid #d8ebba44;border-radius:4px;font-weight:700}

.replay-email[data-state=accepted] .replay-email-note{display:none}.replay-email-accepted-title{font:1.7rem SkybreakDisplay,sans-serif;margin:0 0 12px}.replay-email[data-state=accepted]{margin-top:0;padding-top:0;border-top:0}

.private-replay-host[data-upload-queue=true]{display:block}.replay-upload-job+.replay-upload-job{border-top:1px solid #8eb2c866}.replay-upload-job>button{margin-bottom:16px}

.private-replay-host[data-upload-queue=true][hidden],.replay-upload-job[hidden]{display:none!important}.replay-upload-label{font-size:.75rem;color:#9fb8c9;text-transform:uppercase;letter-spacing:.04em;margin:16px 0 0}

.replay-email[data-state=waiting-upload] .replay-email-row,.replay-email[data-state=waiting-upload] .replay-email-note{display:none}.replay-email[data-state=waiting-upload]{margin-top:0;padding-top:0;border-top:0}.replay-email[data-upload-state=failed] .replay-email-status{color:#ffdba5}.replay-email-status[data-busy=true]::before,.replay-availability[data-busy=true]::before{content:'';display:inline-block;box-sizing:border-box;width:13px;height:13px;margin-right:8px;vertical-align:-2px;border:2px solid #b9d4e344;border-top-color:#ffe44b;border-radius:50%;animation:replay-loading-spin .8s linear infinite}@keyframes replay-loading-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.replay-email-status[data-busy=true]::before,.replay-availability[data-busy=true]::before{animation:none;border-style:dotted;border-top-style:solid}}

.match-replay-notice{position:relative}.match-replay-notice h2,.match-replay-notice .replay-email-accepted-title{padding-right:36px}.match-replay-notice .replay-notice-close{position:absolute;right:0;top:12px;display:grid;place-items:center;min-height:32px;width:32px;padding:0;font:26px/1 Arial;background:transparent;box-shadow:none}.replay-notice-reopen{margin:12px 0;min-height:40px;font-size:.85rem}.private-replay-host[data-upload-queue=true][data-surface=menu]{top:16px;bottom:auto;width:auto;max-width:min(380px,calc(100vw - 32px));max-height:40dvh}.private-replay-host .replay-upload-job:has(.replay-notice-reopen:not([hidden])){padding:0}

.private-replay-host:not([data-upload-queue]):has(.replay-notice-reopen:not([hidden])){top:16px;bottom:auto;width:auto;max-width:min(380px,calc(100vw - 32px));max-height:40dvh}

.replay-landing-email{max-width:1200px;margin:0 auto;padding:0 clamp(24px,4vw,56px) clamp(24px,4vw,56px);color:#fff8de;font-family:SkybreakBody,sans-serif}.replay-landing-email .replay-email{margin-top:0}.replay-page:has(+.replay-landing-email:not([hidden])){min-height:0;padding-bottom:28px}

/* Loading stays over the reserved picture until real playback begins. */
.replay-player-host{aspect-ratio:16/9;overflow:hidden}
.replay-player-loading{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;background:#061522f5;text-align:center}
.replay-player-loading p{max-width:40ch;margin:0;font-size:16px;line-height:1.6}
.replay-player-loading[data-busy=true] p::before{content:'';display:block;width:24px;height:24px;box-sizing:border-box;border:3px solid #b9d4e344;border-top-color:#ffe44b;border-radius:50%;margin:0 auto 16px;animation:replay-loading-spin .8s linear infinite}
.replay-player-loading button{min-height:44px;padding:10px 16px}
.replay-controls{background:#102b40;border-top:1px solid #8eb2c844}
.replay-controls button{min-height:48px}
@media(max-width:700px){.replay-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}.replay-controls output{font-size:.75rem}.replay-player-loading{padding:12px;gap:8px}.replay-player-loading p{font-size:16px;line-height:1.35}.replay-player-loading[data-busy=true] p::before{width:18px;height:18px;margin-bottom:8px}.replay-player-loading button{min-height:40px;padding:8px 12px}}
@media(prefers-reduced-motion:reduce){.replay-player-loading[data-busy=true] p::before{animation:none;border-style:dotted;border-top-style:solid}}
.replay-page .replay-actions .primary{background-color:#ffe44b;color:#102a42;font:700 1rem SkybreakBody,sans-serif;white-space:nowrap}
.replay-page .replay-actions .primary:hover{background-color:#fff18a}

.replay-download-spinner{display:inline-block;width:.8em;height:.8em;margin-right:.55em;vertical-align:-.08em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:replay-download-spin .75s linear infinite}.replay-download-spinner[hidden]{display:none}@keyframes replay-download-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.replay-download-spinner{animation:none}}

.replay-download-button{inline-size:18rem;max-inline-size:100%;box-sizing:border-box;white-space:nowrap;font-variant-numeric:tabular-nums}

.replay-share-invitation{max-width:48rem;margin:1.25rem 0;padding:1rem 1.125rem;border-left:3px solid #ffe64b;background:rgba(255,230,75,.06);color:#fff6dc;font-size:1rem;line-height:1.55}.replay-share-invitation a{color:#ffe64b;font-weight:700;text-underline-offset:3px}.replay-page.replay-has-share + .replay-landing-email .replay-email-share{display:none}