/* A completed board becomes the backdrop for its next-level action. */
.board-wrap{position:relative}
.completion-exit{position:absolute;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:calc(100% - 8px);max-width:400px;padding:12px 10px 14px;border:2px solid #c59859;border-radius:18px;background:linear-gradient(140deg,#fff5d9,#f2ddb3);box-shadow:0 4px 0 #9b734d,0 7px 24px #553d3555;animation:completion-enter .3s ease-out both}
body:has(#modal[open]) .completion-exit{display:none!important}
body.has-completion-exit:not(.style-preview-active) #board{opacity:.34;pointer-events:none;transition:opacity .22s ease-out}
body.has-completion-exit:not(.style-preview-active) #board .tile svg{animation-play-state:paused!important}
.completion-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 7px;margin-bottom:9px;color:#655036;font-size:12px;line-height:1.3}
.completion-check{display:grid;place-items:center;flex:0 0 21px;height:21px;border-radius:50%;background:#79915e;color:#fff4d6;font-size:13px;font-weight:800}
.completion-status strong{font-weight:700}.completion-stars{flex-basis:100%;text-align:center;color:#b08036;letter-spacing:2px;font-size:20px;white-space:nowrap}
.completion-exit button{display:flex;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;min-height:52px;width:100%;margin:0;padding:11px 14px;border:0;border-radius:11px;background:linear-gradient(#899e70,#617c4c);color:#fff9e9;font:800 16px/1.2 'Inter',system-ui,sans-serif;box-shadow:0 3px 0 #4d643e,0 4px 6px #7a593522;cursor:pointer}
.completion-exit button>i{font-style:normal;font-size:25px;line-height:1}.completion-exit button:active{transform:translateY(2px);box-shadow:0 1px 0 #4d643e}.completion-exit button:focus-visible{outline:3px solid #5685a5;outline-offset:3px}
.completion-exit #completionReplay{min-height:44px;margin-top:9px;font-size:13px;font-weight:700;padding:9px 12px;background:linear-gradient(#859568,#657b4e)}
.completion-exit #completionReplay>i{font-size:20px}
@keyframes completion-enter{from{opacity:0;transform:translate(-50%,calc(-50% + 8px)) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(max-width:360px){.completion-status{font-size:10px;gap:5px}.completion-stars{font-size:18px}.completion-exit button{font-size:13px;padding:10px 5px;gap:7px}.completion-exit button>i{font-size:21px}.completion-check{flex-basis:18px;height:18px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.completion-exit{animation:none}}