/* Shared result skins; Results (XP Progress) uses the viewport dialog below. */
.finished-game-panel{width:min(380px,calc(100vw - 48px));padding:0;border:0;background:none;box-shadow:none;overflow:visible;max-height:calc(100dvh - 48px);filter:drop-shadow(4px 4px 0 rgb(0 0 0/.25))}
.game-result{font:500 18px/20px var(--font-ui);color:var(--cream-900)}
.result-heading{position:relative;isolation:isolate;padding:32px 24px;text-align:center;--result-fill:var(--choco-600)}
.game-result[data-outcome=win] .result-heading{--result-fill:#6f9227}.game-result[data-outcome=loss] .result-heading{--result-fill:#b42b2b}
.result-heading:before,.result-heading:after,.result-skin:before,.result-skin:after{content:"";position:absolute;background:var(--result-fill);z-index:-1}
.result-heading:before,.result-skin:before{inset:5px 0}.result-heading:after,.result-skin:after{inset:0 5px}
.game-result[data-outcome]:not([data-outcome=neutral]) .result-heading:before,.game-result[data-outcome]:not([data-outcome=neutral]) .result-heading:after{display:none}
.result-skin{position:absolute;inset:0;z-index:-1}
.result-corner{position:absolute;display:block;width:5px;height:5px;max-width:none}.result-corner-tl{left:0;top:0}.result-corner-tr{right:0;top:0}.result-corner-bl{left:0;bottom:0}.result-corner-br{right:0;bottom:0}
.finished-game-panel .result-heading h2{margin:0;color:var(--cream-900);font:700 46px/40px var(--font-ui);text-shadow:3px 3px 0 rgb(0 0 0/.35);text-transform:uppercase;letter-spacing:0;white-space:nowrap}
.game-result[data-outcome=neutral] .result-heading h2{font-size:30px;white-space:normal}
.result-body{margin:0;border:0;position:relative;isolation:isolate;padding:22px 24px 24px}
.result-metrics{display:flex;flex-direction:column;gap:16px;margin:0 0 32px}
.result-metrics>div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:20px}
.result-metrics>div+div{border-top:1px solid var(--choco-400);padding-top:16px}
.result-metrics dt{color:var(--choco-800);font:inherit}.result-metrics dd{margin:0;color:var(--cream-900);font:inherit}
.result-metrics .result-readiness-list{display:flex;gap:4px;align-items:center}
.result-readiness{position:relative;display:block;flex:none;width:20px;height:20px}.result-readiness>img{display:block;max-width:none}
.result-readiness .result-ready-mark{position:absolute;width:16px;height:16px;top:-4px;left:2px}
.result-actions{margin:0;display:flex;flex-direction:column;gap:10px}
.result-button{width:100%;height:42px;min-height:42px;font:600 18px/20px var(--font-ui);color:var(--choco-100)}
.result-button>.pixel-content{flex:1;padding:10px 12px 12px}
.result-button>span{transition:translate 120ms ease-out,filter 120ms ease-out}
.result-button.result-primary:is(:hover,:focus-visible):not(:disabled)>span{translate:0 -4px}
.result-button.result-primary:is(:hover,:focus-visible):not(:disabled)>.pixel-skin{filter:drop-shadow(0 4px 0 rgb(0 0 0/.25))}
.result-button.result-secondary{color:var(--cream-900)}
.result-button:disabled{opacity:.6;cursor:default}
@media(prefers-reduced-motion:reduce){.result-button>span{transition:none}}
@media(max-height:480px){.finished-game-panel{overflow:auto}}
/* Game > Results: viewport modal with a 30% black backdrop. */
#game-result-dialog{position:fixed;inset:0;left:0;top:0;transform:none;width:min(480px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 48px);margin:auto;padding:0;border:0;background:transparent;overflow-y:auto;color:var(--cream-900);scrollbar-width:none;box-shadow:none;z-index:160}
#game-result-dialog:not([open]){display:none}
#game-result-dialog::backdrop{background:rgb(0 0 0/.3);backdrop-filter:none}
#game-result-dialog .result-heading h2{font-feature-settings:"ss01" 1}
#game-result-dialog .result-body{padding:22px 24px 24px}
#game-result-dialog .result-metrics{margin:0 0 16px}
#game-result-dialog .result-progression{border-top:1px solid var(--choco-400);padding-top:16px;margin-bottom:32px;display:grid;gap:8px}
.result-levels{display:flex;justify-content:space-between;padding:16px 0 8px;font:600 42px/34px var(--font-ui);letter-spacing:-.84px;color:var(--choco-800)}
.result-levels strong{font:inherit;color:var(--cream-900)}
.level-progress-track{position:relative;isolation:isolate;min-width:0}
.result-progress-track{height:12px;width:100%}
.result-progress-background{position:absolute;inset:0;border:1px solid transparent;border-image:url('/assets/results/progress-track.svg') 1 fill stretch;box-sizing:border-box}
.result-progress-inner{position:absolute;inset:1px;overflow:hidden}
.result-xp-filled{position:absolute;left:0;top:0;height:100%;width:calc(var(--xp-base-width) + var(--xp-gain-width));overflow:hidden;clip-path:polygon(1px 0,100% 0,100% 100%,1px 100%,1px calc(100% - 1px),0 calc(100% - 1px),0 1px,1px 1px)}
.result-xp-base,.result-xp-gain{position:absolute;left:0;top:0;height:100%;width:var(--xp-base-width);background:var(--choco-700);box-shadow:inset 0 2px var(--choco-800)}
.result-xp-gain{left:var(--xp-base-width);width:var(--xp-gain-width);background:#ffb73b;box-shadow:inset 0 2px #ffd07f}
.level-progress-fill{display:block;position:absolute;left:1px;top:1px;height:calc(100% - 2px);width:min(var(--level-progress),calc(100% - 2px));background:#ffb73b;box-shadow:inset 0 2px #ffd07f;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,1px 100%,1px calc(100% - 2px),0 calc(100% - 2px))}
.result-xp{display:flex;justify-content:space-between;gap:16px;font:500 18px/20px var(--font-ui);color:var(--choco-800)}
.result-xp>span+span{color:var(--cream-900)}
#game-result-dialog .result-actions{flex-direction:row;gap:10px}
#game-result-dialog .result-actions>.result-button{flex:1;min-width:0;width:auto}
#game-result-dialog .result-button{white-space:normal}
@media(max-width:500px){#game-result-dialog .result-actions{flex-direction:column}.result-levels{font-size:36px}}

.result-xp-list{display:grid;gap:8px;padding:0;margin:0;list-style:none}
.result-xp-step{opacity:0;translate:0 6px;transition:opacity 280ms ease-out,translate 280ms ease-out}
.result-xp-step[data-revealed=true]{opacity:1;translate:0 0}
.result-xp-step>span:first-child{min-width:0;overflow-wrap:anywhere}
.result-xp-step>span+span{flex:none;white-space:nowrap;text-align:right}
.result-xp-demo{display:flex;gap:14px;align-items:center;margin-top:8px;padding:4px 0;font:500 14px/20px var(--font-ui);color:var(--choco-800)}
.result-xp-demo>span{margin-right:auto}
.result-xp-demo>button{font:inherit;color:var(--cream-900);border:0;background:none;padding:4px 6px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.result-xp-demo>button:hover{color:#ffb73b}
.result-xp-demo>button:focus-visible{outline:1px solid var(--cream-900);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.result-xp-step{transition:none;translate:none}}