/* 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}}
.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)}