/* Shared results: the same printed ink, cyan burst and red/yellow lettering as the masthead. */
body #success-dialog {
 position:fixed;inset:0;margin:auto;height:fit-content;
 --ink:#201e1b;--muted:#625b4e;color-scheme:light;
 width:min(480px,calc(100% - 24px));max-height:calc(var(--visible-height,100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
 padding:14px 18px 18px;background:#fff7e1;color:var(--ink);border:3px solid #201e1b;border-radius:8px;
 box-shadow:6px 7px 0 #201e1b;overflow:auto;overscroll-behavior:contain;
 background-image:radial-gradient(#907b4412 .7px,transparent .9px);background-size:5px 5px;
}
#success-dialog::backdrop{background:#151c25c9;backdrop-filter:none}
#success-dialog .success-sync{font:600 11px/1.4 var(--text);text-align:center;margin:8px 0;color:#625b4e;overflow-wrap:anywhere}
body #success-dialog .success-close{position:sticky;float:right;top:0;margin:0 0 -44px;width:44px;height:44px;background:#fff7e1;border:2px solid #201e1b;border-radius:6px;box-shadow:2px 3px #201e1b;z-index:5}
body #success-dialog .success-burst{height:auto;aspect-ratio:2.65;margin:22px 0 3px;display:grid;place-items:center;animation:success-ink-pop 440ms cubic-bezier(.17,.85,.25,1.15) both}
#success-dialog .success-burst::before,#success-dialog .success-burst::after{content:none}
#success-dialog .success-art{display:block;width:100%;height:100%;object-fit:contain}
#success-dialog .success-burst h2{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#success-dialog .success-burst.art-unavailable h2{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;color:#f7cf3f;font-size:48px}
body #success-dialog .success-game{font:400 27px/1.05 var(--hand);text-align:center;margin:6px 0 12px;color:#201e1b}
#success-dialog .success-game>span{font:750 11px/1.4 var(--text);color:#625b4e;margin-top:5px}
body #success-dialog .success-now{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;background:none;border:0;padding:0;color:#201e1b}
#success-dialog .success-now>div{position:relative;gap:3px;padding:10px 6px 8px;border:2px solid #201e1b;border-radius:5px;box-shadow:3px 4px #201e1b;background:#f6cd39;background-image:radial-gradient(#201e1b18 .7px,transparent .9px);background-size:5px 5px}
#success-dialog .success-now>div+div{border-left:2px solid #201e1b;background-color:#80ccdd}
body #success-dialog .success-now strong{font:900 32px/1.05 var(--text);font-variant-numeric:tabular-nums;max-width:100%;overflow-wrap:anywhere}
#success-dialog .success-now span{font:900 10px/1.2 var(--text);text-transform:uppercase;color:#201e1b}
body #success-dialog .success-averages{margin-top:16px;font-size:14px;color:#201e1b}
#success-dialog .success-averages caption{font:400 23px/1.1 var(--hand);margin:0 0 6px;color:#201e1b}
#success-dialog .success-averages thead{background:#201e1b;color:#fff7e1}
body #success-dialog .success-averages :is(th,td){padding:6px 8px;border-bottom:1px solid #201e1b30}
#success-dialog .success-averages tbody tr:nth-child(2){background:#f3ce3c20}
#success-dialog .success-averages tbody th{font-size:12px}
#success-dialog .success-averages small{display:inline;margin-left:5px;font-size:10px;color:#625b4e;font-weight:500}
body #success-dialog .success-note{font-size:10px;margin:6px 0 10px;color:#625b4e}
body #success-dialog .success-daily{border:0;border-left:5px solid #367b60;background:#e3eccd;padding:8px 10px;text-align:left;margin:10px 0}
#success-dialog .success-daily h3{font:400 22px/1.1 var(--hand)}
#success-dialog .success-daily p{font-size:11px;line-height:1.35;margin:4px 0 0}
body #success-dialog .success-online{display:grid;grid-template-columns:1fr 1fr;gap:6px;border:0;padding:0;margin:10px 0}
#success-dialog .success-online p{grid-column:1/-1;grid-row:2;margin:0;font-size:10px;color:#625b4e}
#success-dialog .success-online button{background:#fff7e1;border:1px solid #201e1b;border-radius:4px;font-size:11px;color:#201e1b;min-height:44px}
body #success-dialog .success-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px;margin-top:12px}
body #success-dialog .success-actions button{color:#201e1b;background:#fff7e1;border:2px solid #201e1b;border-radius:5px;box-shadow:2px 3px #201e1b;font:850 12px/1.3 var(--text);min-height:46px;padding:9px 8px;overflow-wrap:anywhere;transition:transform 120ms,box-shadow 120ms}
#success-dialog .success-actions .success-share{background:#f7cf3f}
#success-dialog .success-actions :is(.success-next,.success-next-game){background:#b9e2e6}
#success-dialog .success-actions .primary-button{background:#f7cf3f;grid-column:1/-1}
#success-dialog .success-actions .success-home{background:#201e1b;color:#fff7e1}
#success-dialog .success-actions p{grid-column:1/-1;margin:0;font-size:11px}
#success-dialog .success-actions button:active{transform:translate(2px,3px);box-shadow:none}
#success-dialog button:focus-visible{outline:3px solid #bb302c;outline-offset:3px}
#success-dialog[open] .success-now{animation:success-score-in 300ms 120ms ease-out both}
@keyframes success-ink-pop{0%{transform:scale(.72) rotate(-7deg);opacity:0}70%{transform:scale(1.04) rotate(1deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes success-score-in{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(max-width:350px){body #success-dialog{padding:10px 12px 14px}body #success-dialog .success-game{font-size:24px}body #success-dialog .success-now strong{font-size:27px}#success-dialog .success-averages small{display:block;margin-left:0}}
@media(prefers-reduced-motion:reduce){#success-dialog[open],#success-dialog[open] .success-burst,#success-dialog[open] .success-now{animation:none!important}#success-dialog button{transition:none!important}}

/* The comparison sits directly below the player's own score, with navigation kept separate. */
#success-dialog .success-identity{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:5px;margin-bottom:10px}
body #success-dialog .success-identity .success-game{grid-column:2;margin:4px 0}
#success-dialog .success-identity .success-share{grid-column:3;width:44px;height:44px;background:#fff7e1;border:2px solid #201e1b;border-radius:6px;box-shadow:2px 3px #201e1b;color:#201e1b}
#success-dialog .success-comparison{margin-top:17px;border-block:2px solid #201e1b;padding:8px 0 10px}
#success-dialog .success-comparison>header{display:flex;align-items:center;justify-content:space-between;gap:8px}
#success-dialog .success-comparison h3{font:400 25px/1 var(--hand);margin:0;color:#201e1b}
#success-dialog .success-comparison header button{width:44px;height:44px;color:#201e1b;border:0;background:transparent}
#success-dialog .comparison-values{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:5px 0 10px}
#success-dialog .comparison-values>div{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
#success-dialog .comparison-values>div+div{border-left:1px solid #201e1b40}
#success-dialog .comparison-values span{font:800 11px/1.3 var(--text);color:#625b4e}
#success-dialog .comparison-values strong{font:900 26px/1.1 var(--text);font-variant-numeric:tabular-nums;color:#201e1b}
#success-dialog .comparison-values small{font:800 11px/1.3 var(--text);color:#9b3430;min-height:15px}
#success-dialog .comparison-values small[data-better=true]{color:#216c50}
#success-dialog [data-average-status]{font:600 10px/1.4 var(--text);color:#625b4e;margin:0;text-align:center}
#success-dialog .comparison-retry{display:block;margin:6px auto 0;min-height:44px;background:none;border:1px solid #201e1b;border-radius:4px;color:#201e1b;padding:5px 12px;font-size:12px}
#success-dialog [hidden]{display:none!important}
#success-dialog .success-card-progress{display:flex;justify-content:space-between;gap:8px;font:750 12px/1.4 var(--text);margin:12px 0 0}
#success-dialog .success-card-progress strong{color:#216c50}
body #success-dialog .success-actions{margin-top:12px}
body #success-dialog .success-actions button{display:flex;text-align:left;justify-content:space-between;padding:12px;min-height:64px}
#success-dialog .success-actions button>span{min-width:0;display:flex;flex-direction:column;gap:4px}
#success-dialog .success-actions button strong{font-size:14px}
#success-dialog .success-actions button small{font-size:11px;font-weight:650}
#success-dialog .success-actions button svg{flex-shrink:0;width:19px;height:19px}
#success-dialog .success-actions button:disabled{opacity:.58;box-shadow:none}
#success-dialog .success-actions:has(.success-next-game:only-child){grid-template-columns:1fr}
body #success-dialog .success-actions .success-next-card{grid-column:1/-1;min-height:74px;background-color:#f6cd39;background-image:radial-gradient(#201e1b20 .8px,transparent 1px);background-size:5px 5px;border-width:3px;animation:next-card-stamp 450ms 180ms ease-out both}
#success-dialog .success-next-card strong{font:400 27px/1.1 var(--hand)!important}
#success-dialog .success-next-card small{font-size:13px!important}
#success-dialog .success-next-card svg{width:28px!important;height:28px!important;animation:next-card-arrow 700ms 650ms ease-in-out 3}
#success-dialog .success-all-done{font:400 26px/1.2 var(--hand);text-align:center;padding:8px;background:#dce8c5}
#success-dialog .success-return{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid #201e1b40;margin-top:15px;padding-top:9px}
#success-dialog .success-return button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;background:transparent;color:#201e1b;border:0;font:800 12px/1.3 var(--text);border-radius:4px;padding:6px}
#success-dialog .success-return button+button{border-left:1px solid #201e1b40}
#success-dialog .success-return svg{width:18px;height:18px;flex-shrink:0}
@keyframes next-card-stamp{from{transform:scale(.94) rotate(-2deg);opacity:0}70%{transform:scale(1.025) rotate(.5deg);opacity:1}to{transform:scale(1);opacity:1}}
@keyframes next-card-arrow{50%{transform:translateX(5px)}100%{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){#success-dialog .success-next-card,#success-dialog .success-next-card svg{animation:none!important}}