/* ImageGen originals are in tools/source-art/illustrated-ui.
   Keep text, focus states and interactive controls as accessible HTML. */
:root{--story-panel:url('./assets/illustrated-ui/storybook-panel.webp');--puzzle-panel:url('./assets/illustrated-ui/puzzle-panel.webp');--flight-panel:url('./assets/illustrated-ui/flight-panel.webp')}
.island-play .play-sheet,.island-play .play-board,.island-play .battle-card,.island-play .anyong-dialogue-box{
 background:#fff8e5 var(--story-panel) center/100% 100% no-repeat;
 border:0;border-radius:16px;box-shadow:0 18px 60px #163e4c44;
 padding:50px 62px;color:#254e51;
}
.island-play .play-board{background-image:var(--puzzle-panel)}
.island-play .play-sheet>h2{padding-right:48px;padding-left:24px}
.island-play .sheet-close{right:25px;top:20px}
.island-play .play-mission,.island-play .play-name,.island-play .direction-hint,.island-play #playToast,
.island-play .course-hud header,.island-play .battle-dialogue,.island-play .play-arrival>div{
 background:#fff8e5 var(--story-panel) center/100% 100% no-repeat;
 border:0;border-radius:12px;color:#254e51;box-shadow:0 5px 18px #24484522;
}
.island-play .play-mission{padding:22px 28px}
.island-play .play-name{padding:10px 20px}
.island-play .direction-hint,.island-play #playToast{padding:16px 30px}
.island-play .play-arrival>div{padding:28px 40px}
.island-play .play-arrival p,.island-play .play-arrival small{color:#254e51;text-shadow:none}
.island-play .game-small,.island-play .game-icon{
 background:transparent url('./assets/illustrated-ui/painted-button.webp') center/100% 100% no-repeat;
 border:0;border-radius:0;box-shadow:none;color:#214b43;
}
.island-play .game-small{padding-inline:24px}
.island-play .game-icon{filter:drop-shadow(0 2px 2px #24484533)}
.tile-grid:has(.maze-avatar[data-ready="true"]) .tile.hero{font-size:0;background:#e1edd1}
.maze-avatar{transform:translate(-50%,-83%)}
@media(orientation:landscape) and (max-height:650px){.island-play .play-name{display:none}}
.island-play .game-icon:focus-visible,.island-play .game-small:focus-visible{outline:0;box-shadow:none;filter:drop-shadow(0 0 6px #fff4b2) drop-shadow(0 0 10px #f4b63e)}
.island-play .island-map{aspect-ratio:1;overflow:hidden;background:none;border:0;border-radius:14px;isolation:isolate}
.village-map-art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.island-play .map-sheet{width:min(1080px,calc(100vw - 32px));grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.island-play .map-stop{z-index:1;box-shadow:0 2px 7px #14394c99;border:3px solid #fff7d4}
.island-play .map-me{z-index:2;color:#163f57;background:#fff9e8;padding:0 5px;border-radius:6px;text-shadow:none;pointer-events:none}
.island-play .map-legend button{background:transparent}
.island-play .map-legend button:hover{background:#e7edd3}
.island-play .map-instruction{font-size:18px;line-height:1.5}

/* Sky chapter uses its own painted frame, including lessons and results. */
body:not(.island-play) .panel,body:not(.island-play) .flight-lesson-sheet,
#kingPhoto,#tenguMessage,.kingHelp .note{
 background:#fff9eb var(--flight-panel) center/100% 100% no-repeat;
 border:0;border-radius:16px;color:#254e51;box-shadow:0 10px 40px #12344555;
 padding:34px 38px;text-shadow:none;
}
body.kingWelcome .panel{background:none;box-shadow:none;padding:16px}
body:not(.island-play) .panel h1,body:not(.island-play) .panel p,
body:not(.island-play) .panel .note,body:not(.island-play) .panel small,
#flightLesson h2,#flightLesson p,#flightLesson header small,#flightLesson .lesson-status,
#flightLesson .lesson-enemy span,#kingPhoto small,#kingPhoto h2{color:#254e51;text-shadow:none}
#flightLesson{color:#254e51}
#flightLesson header{padding-right:32px}
#flightLesson footer{color:#254e51;text-shadow:none}
#flightLesson button,body:not(.island-play) .panel .primary{
 background:transparent url('./assets/illustrated-ui/painted-button.webp') center/100% 100% no-repeat;
 color:#214b43;border:0;border-radius:0;box-shadow:none;padding:14px 26px;
}
#flightLesson [data-next]{background:transparent url('./assets/illustrated-ui/painted-button.webp') center/100% 100% no-repeat;color:#214b43}
#flightLesson .flight-lesson-demo{background:#75bdcd30}
#flightLesson .lesson-route i{color:#ac7433}
#flightLesson .lesson-aim{color:#a16c16;text-shadow:0 0 8px #fff}
#flightLesson .lesson-enemy{color:#81609c}
#flightLesson .lesson-enemy.locked{color:#ac7516}
.kingHelp .note{font-size:19px}
@media(orientation:landscape) and (max-height:600px){
 .island-play .play-sheet,.island-play .anyong-dialogue-box,.island-play .battle-card{padding:38px 50px}
 .island-play .play-board{padding:60px 30px 24px}
 .island-play .play-board .board-header .game-icon{right:18px;top:12px}
 .island-play .sheet-close{right:20px;top:15px}
 .island-play .play-mission{padding:15px 22px}
 .island-play .map-sheet{gap:8px 22px}
 .island-play .map-sheet .island-map{max-width:310px;margin-inline:auto}
 .island-play .play-arrival>div{padding:18px 30px}
 body:not(.island-play) .flight-lesson-sheet{padding:25px 34px}
 #flightLesson header{padding-right:24px}
 #kingPhoto{padding:22px 25px}
}
.island-play .map-sheet .discovery-choices button{font-size:18px;min-height:48px;padding:8px 12px}
.island-play .map-sheet .map-instruction{padding-bottom:12px}
@media print{
 .island-play .play-sheet{background:white!important;box-shadow:none!important;padding:0!important}
}
/* Slice the painted frame so corner decorations never stretch under the text. */
.island-play .play-sheet,.island-play .play-board,.island-play .battle-card,.island-play .anyong-dialogue-box{
 background:none;border:32px solid transparent;
 border-image:var(--story-panel) 200 fill / 32px stretch;padding:14px 20px;
}
.island-play .play-board{border-image-source:var(--puzzle-panel)}
.island-play .sheet-close{right:0;top:0}
.island-play .map-sheet .map-legend b{width:32px;height:32px;font-size:20px}
.island-play .map-sheet .map-legend button{min-height:34px}
.island-play .map-sheet .map-instruction{padding:0;margin:0}
.island-play .play-board .board-header .game-icon{right:0;top:0}
@media(orientation:landscape) and (max-height:600px){
 .island-play .play-sheet,.island-play .battle-card,.island-play .anyong-dialogue-box{padding:6px 16px}
 .island-play .play-board{padding:48px 12px 8px}
 .island-play .play-board .board-header .game-icon{top:0}
 .island-play .map-sheet .island-map{max-width:310px}
}
body:not(.island-play) .flight-lesson-sheet{
 background:none;border:28px solid transparent;
 border-image:var(--flight-panel) 225 fill / 28px stretch;padding:8px 16px;
}
#flightLesson header{padding-right:0}
.island-play .play-story{background:#fff8e5 var(--story-panel) center/100% 100% no-repeat}
.island-play .play-story-art span{background:#fff8e5 var(--story-panel) center/100% 100% no-repeat;border:0;padding:18px 24px}
@media(orientation:landscape) and (max-height:500px){
 body:not(.island-play) .flight-lesson-sheet{border-width:24px;border-image-width:24px;padding:0 12px}
 #flightLesson h2{font-size:24px;line-height:1.4;margin:6px 0}
 #flightLesson p{font-size:18px;line-height:1.5;margin:6px 0}
 #flightLesson button{padding:10px 22px}
}
@media print{.island-play .play-sheet{border-image:none!important}}
.library-intro{position:absolute;inset:0;pointer-events:auto;background:linear-gradient(transparent 40%,#21485425);display:flex;justify-content:center;align-items:flex-end;padding:20px 4vw}
.library-intro>[data-intro-skip]{position:absolute;top:20px;right:24px}
.library-intro-caption{width:min(920px,92vw);border:28px solid transparent;border-image:var(--story-panel) 200 fill / 28px stretch;padding:8px 20px;text-align:center;color:#254e51}
.library-intro-caption small{font-size:24px;font-weight:850;color:#866225}.library-intro-caption p{font-size:27px;line-height:1.5;margin:8px 0}.library-intro-caption strong{display:block;font-size:29px;margin:8px 0}.library-intro-caption .game-button{min-height:60px;font-size:23px;padding:10px 38px}
body:has(.library-intro) #playUI,body:has(.library-intro) #playToast{visibility:hidden}
@media(orientation:landscape) and (max-height:600px){.library-intro{padding:8px 3vw}.library-intro-caption{width:min(800px,92vw);border-width:20px;border-image-width:20px;padding:0 12px}.library-intro-caption small{font-size:18px}.library-intro-caption p{font-size:20px;margin:3px 0}.library-intro-caption strong{font-size:23px;margin:4px 0}.library-intro-caption .game-button{min-height:48px;font-size:20px!important;padding:6px 30px}}
/* A compact translucent collectible window keeps the island in view. */
.island-play .fragment-shade{background:#153a4526;backdrop-filter:blur(2px)}
.island-play .play-board.fragment-reward,.island-play .play-sheet.fragment-reward{display:block;width:min(780px,calc(100vw - 36px));max-height:calc(100dvh - 28px);padding:24px 28px;border:3px solid #fff5bd;border-image:none;border-radius:25px;background:linear-gradient(135deg,#fffdf1d9,#ddf4e9bf);backdrop-filter:blur(12px);box-shadow:0 0 0 5px #d5a65488,0 15px 50px #19444744;overflow:auto;color:#254e51}
.fragment-reward .board-header{display:block;margin:0}.fragment-reward .board-header small,.fragment-reward .board-header p,.fragment-reward .board-progress,.fragment-reward .board-footer{display:none}.fragment-reward .board-header h2{font-size:20px;margin:0 48px 14px 0;color:#5c8173}.fragment-reward .board-header [data-close]{position:absolute;right:12px;top:12px}.fragment-reward .puzzle-win{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(200px,1.2fr);align-items:center;gap:26px;padding:0;margin:0;width:100%;text-align:left;grid-column:auto;grid-row:auto}
.page-fragment-card{position:relative;display:flex;flex-direction:column;align-items:center;padding:18px 14px;border:2px solid #f7dc8d;border-radius:18px;background:linear-gradient(150deg,#fff9ddd9,#dcf0e899);box-shadow:inset 0 0 14px #ffffffa6,0 5px 15px #34534222;transform:rotate(-3deg);text-align:center;max-width:285px;margin:auto;width:100%}.page-fragment-card small{font-size:17px;color:#9a6d26;font-weight:850;letter-spacing:1px}.page-fragment-card strong{font-size:22px;line-height:1.35;margin-top:12px}.page-fragment-card>span{font-size:17px;color:#607c6d;margin:5px 0}
.found-fragment{width:100%;aspect-ratio:1.1;background:url('./assets/island-play/island-book.webp') 0 0/300% 200%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Cpath d='M12 24H73C62 3 104 3 93 24H188V78C162 66 162 108 188 96V164H117C130 143 88 143 99 164H12V106C36 117 36 76 12 88Z'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 4px 2px #31554755);margin-top:8px}
.fragment-reward-copy>small{font-size:20px;color:#64846d;font-weight:850}.fragment-reward .fragment-reward-copy h2,.fragment-reward .fragment-reward-copy h3{font-size:30px;line-height:1.35;margin:10px 0;padding:0}.fragment-reward .fragment-reward-copy p{font-size:23px;line-height:1.5;margin:12px 0}.fragment-reward-copy .game-button{min-height:65px;font-size:24px!important;padding:12px 24px;width:100%}.fragment-count{display:block;font-size:21px;font-weight:850;color:#6e815a;margin-top:14px}
.island-play .fragment-attached{display:grid!important;grid-template-columns:.8fr 1.2fr;gap:12px 26px;align-items:center}.fragment-attached>h2{display:none}.fragment-attached>.page-fragment-card{grid-column:1;grid-row:1/3}.fragment-attached>.fragment-reward-copy{grid-column:2}.fragment-attached>#rewardNext{grid-column:2;min-height:64px;font-size:23px!important;padding:12px 20px}.fragment-attached>.sheet-close{position:absolute;top:8px;right:8px}
@media(orientation:landscape) and (max-height:600px){.island-play .play-board.fragment-reward,.island-play .play-sheet.fragment-reward{width:min(720px,calc(100vw - 32px));padding:16px 22px}.fragment-reward .puzzle-win{grid-template-columns:.75fr 1.25fr;gap:22px}.fragment-reward .board-header h2{font-size:17px;margin-bottom:8px}.page-fragment-card{max-width:215px;padding:10px}.found-fragment{width:145px;max-width:100%;aspect-ratio:1.1}.page-fragment-card small{font-size:14px}.page-fragment-card strong{font-size:18px;margin-top:6px}.page-fragment-card>span{font-size:14px;margin:2px}.fragment-reward .fragment-reward-copy h2,.fragment-reward .fragment-reward-copy h3{font-size:24px}.fragment-reward .fragment-reward-copy p{font-size:19px}.fragment-reward-copy .game-button,.fragment-attached>#rewardNext{min-height:58px;font-size:21px!important}.fragment-count{font-size:18px;margin-top:6px}}

/* Fit the whole puzzle to the viewport. The remaining grid track, rather than
   a fixed card vh, budgets space for the board after its text and controls. */
@media screen{
 .island-play .play-shade:has(.play-board[data-puzzle]){padding:12px}
 .island-play .play-board[data-puzzle]:not(.fragment-reward){box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px;width:min(1000px,calc(100vw - 24px));height:min(800px,calc(100dvh - 24px));max-height:none;padding:12px 18px;border-width:24px;border-image-width:24px;overflow:visible;align-items:stretch}
 .island-play .play-board[data-puzzle] .board-header{grid-column:1;grid-row:1;min-width:0;padding-right:46px}
 .island-play .play-board[data-puzzle] .board-header small{display:none}
 .island-play .play-board[data-puzzle] .board-header h2{font-size:clamp(20px,2.5vw,28px);line-height:1.3;margin:0 0 4px}
 .island-play .play-board[data-puzzle] .board-header p{font-size:clamp(16px,2vw,20px);line-height:1.4;margin:0}
 .island-play .play-board[data-puzzle] .board-header .game-icon{top:0;right:0;position:absolute;width:44px;height:44px;min-height:44px}
 .island-play .play-board[data-puzzle] .board-progress{grid-column:1;grid-row:2;margin:0;padding:4px 10px;font-size:18px;line-height:1.4}
 .island-play .play-board[data-puzzle] .board-game{grid-column:1;grid-row:3;margin:0;min-height:0;min-width:0;width:100%;height:100%;container-type:size}
 .island-play .play-board[data-puzzle] .board-footer{grid-column:1;grid-row:4;margin:0;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:16px;line-height:1.35}
 .island-play .play-board[data-puzzle] .board-footer>div{margin:0;margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
 .island-play .play-board[data-puzzle] .board-footer .game-small{font-size:16px;min-height:44px;padding:6px 12px}
 .island-play .play-board[data-puzzle] .pair-grid{grid-template-rows:repeat(var(--card-rows),minmax(0,1fr));gap:8px;max-width:640px;max-height:420px;align-self:center;justify-self:center}
 .island-play .play-board[data-puzzle] .flip-card{height:auto;min-width:0;min-height:0}
 .island-play .play-board[data-puzzle] .card-back,.island-play .play-board[data-puzzle] .card-front{border-width:3px;padding:4px}
 .island-play .play-board[data-puzzle] .card-back b{font-size:clamp(24px,7cqh,45px)}
 .island-play .play-board[data-puzzle] .card-back small{font-size:11px}
 .island-play .play-board[data-puzzle] .card-front img{height:calc(100% - 24px);min-height:0}
 .island-play .play-board[data-puzzle] .card-front b{font-size:clamp(12px,2.5cqw,18px);line-height:1.2;white-space:nowrap}
 .island-play .play-board[data-puzzle] .jigsaw-layout{height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:center}
 .island-play .play-board[data-puzzle] .jigsaw-target,.island-play .play-board[data-puzzle] .jigsaw-tray{width:min(100%,calc(100cqh * 1.5 - 12px));max-width:none;min-width:0;margin:auto}
 .island-play .play-board[data-puzzle] .jigsaw-tray{gap:5px}
 .island-play .play-board[data-puzzle] .jigsaw-piece{border-width:2px}
 .island-play .play-board[data-puzzle] .tile-game{display:flex;flex-direction:row;gap:14px;align-items:center;justify-content:center}
 .island-play .play-board[data-puzzle] .tile-grid{box-sizing:border-box;flex-shrink:0;width:min(390px,calc(100cqh - 12px),calc(100cqw - 128px));padding:3px;border-width:4px;margin:0}
 .island-play .play-board[data-puzzle] .tile{font-size:clamp(12px,3cqh,22px)}
 .island-play .play-board[data-puzzle] .puzzle-pad{display:block;flex-shrink:0}
 .island-play .play-board[data-puzzle] .puzzle-stick{width:100px;height:100px}
 .island-play .play-board[data-puzzle] .anyong-hint{flex-basis:100%;order:-1;margin:0;font-size:15px;padding:4px 8px}
}
@media screen and (orientation:landscape){
 .island-play .play-board[data-puzzle]:not(.fragment-reward){grid-template-columns:minmax(180px,.68fr) minmax(0,1.5fr);grid-template-rows:auto auto minmax(0,1fr);gap:10px 20px;height:min(640px,calc(100dvh - 24px))}
 .island-play .play-board[data-puzzle] .board-game{grid-column:2;grid-row:1/4;padding-top:36px;box-sizing:border-box}
 .island-play .play-board[data-puzzle] .board-footer{grid-column:1;grid-row:3;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}
 .island-play .play-board[data-puzzle] .board-footer>div{margin-left:0}
 .island-play .play-board[data-puzzle] .anyong-hint{flex-basis:auto;order:0}
 .island-play .play-board[data-puzzle] .board-header{padding-right:0}
}
@media screen and (orientation:landscape) and (max-height:500px){
 .island-play .play-board[data-puzzle]:not(.fragment-reward){border-width:16px;border-image-width:16px;padding:8px;gap:6px 12px;grid-template-columns:minmax(150px,.65fr) minmax(0,1.5fr)}
 .island-play .play-board[data-puzzle] .board-header h2{font-size:20px}
 .island-play .play-board[data-puzzle] .board-header p,.island-play .play-board[data-puzzle] .board-progress,.island-play .play-board[data-puzzle] .board-footer{font-size:14px}
 .island-play .play-board[data-puzzle] .puzzle-stick{width:76px;height:76px}
 .island-play .play-board[data-puzzle] .tile-grid{width:min(330px,calc(100cqh - 12px),calc(100cqw - 96px))}
}
@media screen and (orientation:portrait) and (max-width:550px){
 .island-play .play-board[data-puzzle]:not(.fragment-reward){border-width:16px;border-image-width:16px;padding:8px;gap:8px}
 .island-play .play-board[data-puzzle] .jigsaw-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:10px}
 .island-play .play-board[data-puzzle] .jigsaw-target,.island-play .play-board[data-puzzle] .jigsaw-tray{width:min(100%,calc(50cqh * 1.5 - 15px))}
 .island-play .play-board[data-puzzle] .tile-game{flex-direction:column;gap:10px}
 .island-play .play-board[data-puzzle] .tile-grid{width:min(350px,calc(100cqh - 108px),calc(100cqw - 8px))}
 .island-play .play-board[data-puzzle] .puzzle-stick{width:88px;height:88px}
}
/* Give the illustration most of the landscape board instead of splitting its
   workspace equally with the loose pieces. Fixed tracks do not grow when only
   one loose piece remains. Height still comes from the fitted game container. */
@media screen and (orientation:landscape){
 .island-play .play-board[data-puzzle="jigsaw"]:not(.fragment-reward){width:min(1380px,calc(100vw - 24px));grid-template-columns:clamp(170px,18vw,240px) minmax(0,1fr)}
 .island-play .play-board[data-puzzle="jigsaw"] .jigsaw-layout{grid-template-columns:minmax(0,3fr) minmax(144px,1fr);gap:16px}
 .island-play .play-board[data-puzzle="jigsaw"] .jigsaw-target{width:min(100%,calc(100cqh * 1.5 - 12px));justify-self:center}
 .island-play .play-board[data-puzzle="jigsaw"] .jigsaw-tray{width:100%;align-self:center}
}
@media screen and (orientation:landscape) and (max-width:720px){
 .island-play .play-board[data-puzzle="jigsaw"]:not(.fragment-reward){grid-template-columns:150px minmax(0,1fr);gap:10px}
 .island-play .play-board[data-puzzle="jigsaw"] .jigsaw-layout{grid-template-columns:minmax(0,3fr) minmax(104px,1fr);gap:8px}
}
.anyong-entrance .anyong-portrait{animation:anyong-enter .7s ease-out}.anyong-entrance .anyong-dialogue-box{animation:anyong-talk .7s ease-out}@keyframes anyong-enter{from{opacity:0;transform:translateX(-9%)}to{opacity:1;transform:translateX(0)}}@keyframes anyong-talk{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.anyong-entrance .anyong-portrait,.anyong-entrance .anyong-dialogue-box{animation:none}}
.stamp-meter{gap:4px;align-items:center}.stamp-meter>span{display:block;width:26px;height:26px}.stamp-meter svg{width:24px;height:24px;opacity:.65}.stamp-meter .stamp-mini{display:block;width:26px;height:24px;aspect-ratio:auto;margin:0;filter:drop-shadow(0 1px 1px #64775133)}

.king-gull-entry{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;text-align:center;box-sizing:border-box}
.island-play .play-sheet>.king-gull-entry{display:flex;width:max-content;max-width:100%;margin:18px auto 26px}
@media print{.king-gull-entry{display:none!important}}

/* Successful moves sparkle in place; this layer never captures an input or
   adds a modal, changes board dimensions, or reveals hidden card contents. */
.puzzle-feedback-layer{position:absolute;inset:0;z-index:10;pointer-events:none;overflow:hidden;border-radius:inherit}
.puzzle-feedback-status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.puzzle-burst{position:absolute;width:0;height:0;pointer-events:none}
.puzzle-ring{position:absolute;left:-25px;top:-25px;width:50px;height:50px;border:4px solid #ffce59;border-radius:50%;box-shadow:0 0 16px #fff5b8;animation:puzzle-ring-out .7s ease-out both}
.puzzle-spark{position:absolute;left:-4px;top:-4px;width:8px;height:8px;background:var(--spark-color);border-radius:2px;box-shadow:0 0 6px #fff7bf;animation:puzzle-spark-out .8s cubic-bezier(.12,.6,.35,1) both}
.puzzle-cheer{position:absolute;left:0;top:-35px;transform:translate(-50%,-50%);font-size:clamp(16px,2.2vw,25px);font-weight:900;line-height:1.25;color:#805015;white-space:nowrap;background:#fff7cceF;border:2px solid #edba51;border-radius:12px;padding:5px 12px;box-shadow:0 3px 0 #ad802330,0 0 18px #ffe08585;animation:puzzle-cheer-rise .8s both;text-shadow:0 1px #fff}
.puzzle-burst.final .puzzle-ring{width:100px;height:100px;left:-50px;top:-50px;border-width:6px;animation-duration:1.1s}
.puzzle-burst.final .puzzle-spark{width:10px;height:10px;animation-duration:1.15s}
.puzzle-burst.final .puzzle-cheer{font-size:clamp(25px,3vw,40px);top:-25px;animation-duration:1.15s;background:#ffed9e}
.puzzle-progress-pop{animation:puzzle-progress-pop .45s ease-out}
@keyframes puzzle-ring-out{from{transform:scale(.4);opacity:1}to{transform:scale(3.2);opacity:0}}
@keyframes puzzle-spark-out{0%{transform:translate(0,0) scale(.6);opacity:1}75%{opacity:1}100%{transform:translate(var(--spark-x),var(--spark-y)) rotate(var(--spark-angle)) scale(.4);opacity:0}}
@keyframes puzzle-cheer-rise{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}65%{opacity:1;transform:translate(-50%,-80%) scale(1)}100%{opacity:0;transform:translate(-50%,-110%) scale(.95)}}
@keyframes puzzle-progress-pop{0%{background:#ffe392;box-shadow:0 0 0 0 #ffc84877}45%{box-shadow:0 0 0 7px #ffc84822}100%{box-shadow:0 0 0 0 transparent}}
.puzzle-burst.still .puzzle-ring,.puzzle-burst.still .puzzle-cheer{animation:none;opacity:1}
@media(prefers-reduced-motion:reduce){.puzzle-ring,.puzzle-spark,.puzzle-cheer,.puzzle-progress-pop{animation:none!important}.puzzle-spark{display:none}}