.match-result-dialog{box-sizing:border-box;width:min(560px,calc(100vw - 26px));max-height:90dvh;margin:auto;padding:26px 26px 20px;overflow:auto;border:1px solid #d1b878;border-radius:22px;color:#e8ebd4;background:radial-gradient(ellipse at 50% 0,#8cac7626,transparent 52%),linear-gradient(155deg,#315e50,#103b33 75%);box-shadow:0 28px 100px #041b1adb,inset 0 0 0 5px #d0b57718;text-align:center;overscroll-behavior:contain}.match-result-dialog::backdrop{background:#021815a6;backdrop-filter:blur(4px)}.result-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#e7d19f;font-size:29px;padding:2px 10px;min-height:38px;cursor:pointer}.result-heading{position:relative;overflow:hidden}.result-sigil{display:grid;place-items:center;margin:0 auto 10px;width:56px;height:56px;border:4px double #d8c583;border-radius:50%;font:30px serif;color:#f4df9c;box-shadow:0 0 25px #cbbb6738,inset 0 0 15px #ddd49b22}.result-kicker{font-size:11px;letter-spacing:5px;color:#c7cdab;margin:8px 0}.match-result-dialog h2{margin:8px 0;font-size:30px;line-height:1.4;color:#f9df9e}.result-reason,.result-winner{margin:7px 0;line-height:1.5;font-size:14px}.result-winner{color:#cfdaba;font-size:12px}.result-summary{padding:9px 12px;margin:16px 0;background:#092f2b70;border:1px solid #b6a56a45;border-radius:10px;text-align:left;font-size:13px;line-height:1.6}.result-summary p{margin:3px 0}.result-summary small{font-size:11px;color:#b9ccc3}.result-gains{color:#f8d489}.result-ratings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:10px}.result-ratings div{background:#133b3299;border-radius:9px;padding:8px 3px}.result-ratings small{display:block;font-size:11px;color:#bcd0c4}.result-ratings strong{display:block;font-size:16px;margin-top:5px}.result-ratings em{font-style:normal;font-size:12px;display:inline-block}.result-ratings .gain{color:#e5d18b}.result-ratings .loss{color:#d6afb1}.result-quests{margin-top:8px;border-top:1px solid #d5c58944;padding-top:7px}.result-quests summary{cursor:pointer;color:#e7d28a}.result-quests p{font-size:12px}.result-opponents{display:grid;gap:10px}.result-opponent{display:flex;align-items:center;gap:12px;border:1px solid #abbd9166;border-radius:12px;padding:12px;background:#49785a24;text-align:left}.result-portrait{flex:none;width:84px;text-align:center}.result-avatar{display:block;margin:4px auto 8px;width:54px;height:54px;border-radius:50%;border:3px double #cfbd7a;background-image:url('xianxia-portraits.png');background-size:300% 100%;background-position:left center;box-shadow:0 4px 8px #0005;position:relative}.result-avatar.portrait-1{background-position:50% center}.result-avatar.portrait-2{background-position:right center}.result-avatar[data-frame=tutorial]::before{content:'';position:absolute;inset:-24%;background:url('cosmetic-frame.png') center/contain no-repeat}.result-avatar[data-frame=bond-frame]{border-color:#ffd1b9;box-shadow:0 0 0 3px #74bdb0,0 0 14px #f3c28255}.result-avatar[data-frame=weekly-frame]{border:4px double #ffe7a4;box-shadow:0 0 0 3px #5f9685}.result-player-title{display:block;font-size:10px;color:#f1d396;overflow-wrap:anywhere;line-height:1.3}.result-person{flex:1;min-width:0;overflow-wrap:anywhere}.result-person strong{font-size:16px}.result-person small{display:block;font-size:11px;margin-top:5px;color:#bfcbbd}.result-friend{padding:9px 10px!important;font-size:12px!important;white-space:normal;max-width:116px;min-height:40px}.result-practice{font-size:11px;color:#b6c8b8}.result-feedback{min-height:0;margin:8px 0;font-size:12px;color:#f4da99}.result-feedback:empty{display:none}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:sticky;bottom:-20px;padding:15px 0 4px;background:linear-gradient(0deg,#133d34 75%,transparent)}.result-actions>*{display:grid;place-items:center;min-height:48px;padding:10px 5px!important;text-decoration:none}.result-reopen[hidden]{display:none}.match-result-dialog[data-outcome=win] .result-sigil{animation:result-bloom 1.1s ease-out both}.match-result-dialog[data-outcome=win] .result-heading::before{content:'';position:absolute;inset:-50%;pointer-events:none;background:conic-gradient(transparent,#e6d79022,transparent 30%,#f2d58222,transparent 70%);animation:result-mist 1.2s ease-out both}.match-result-dialog[data-outcome=loss] .result-sigil{color:#c5d8ce;border-color:#9fb5a7;box-shadow:0 0 16px #91b4a422}.match-result-dialog button:focus-visible,.match-result-dialog a:focus-visible{outline:3px solid #ffdf97;outline-offset:3px}@keyframes result-bloom{from{transform:scale(.8);box-shadow:0 0 5px #ddce6c22}60%{transform:scale(1.05);box-shadow:0 0 45px #ddce6c77}to{transform:scale(1)}}@keyframes result-mist{from{opacity:0;transform:rotate(-30deg)}50%{opacity:1}to{opacity:0;transform:rotate(25deg)}}.reduce-effects .match-result-dialog *{animation:none!important}.reduce-effects .result-heading::before{display:none}@media(prefers-reduced-motion:reduce){.match-result-dialog *{animation:none!important}.result-heading::before{display:none}}@media(max-width:600px){.match-result-dialog{padding:20px 16px 14px;max-height:92dvh;border-radius:18px}.match-result-dialog h2{font-size:25px}.result-sigil{width:44px;height:44px;font-size:25px;margin-bottom:7px}.result-summary{margin:12px 0;padding:8px 10px}.result-opponent{gap:7px;padding:9px 7px}.result-portrait{width:69px}.result-avatar{width:46px;height:46px}.result-person strong{font-size:14px}.result-actions{bottom:-14px;gap:9px}.result-person .test-player-tag{font-size:10px}.result-friend{max-width:90px;padding:8px 6px!important}.result-ratings strong{font-size:14px}}

/* The same step controls stay next to the board on phones. */
.replay-toolbar{display:flex;align-items:center;flex-wrap:nowrap;gap:12px;margin:14px 0 8px;min-width:0}
.replay-toolbar input[type=range]{flex:1;min-width:0;width:100%;margin:0}
.replay-toolbar .replay-arrow{flex:none;min-width:44px;min-height:44px;white-space:nowrap;touch-action:manipulation}
.replay-arrow>span[aria-hidden]{font-family:Arial,sans-serif;font-size:17px;line-height:1}
.replay-toolbar .replay-arrow:disabled{opacity:.35;cursor:default}
.replay-toolbar .replay-arrow:focus-visible{outline:2px solid #f4d790;outline-offset:2px}
.phone-replay .replay-toolbar{gap:9px;margin:0 0 4px}
.phone-replay .replay-toolbar .replay-arrow{min-width:44px;width:44px;height:40px;min-height:40px;padding:5px}
.phone-replay .replay-arrow-label{display:none}
.phone-replay .replay-status{padding:0;background:none}