@font-face{font-family:'Lilita One';src:url('../assets/ui/lilita-one.ttf') format('truetype');font-display:swap}
:root{--title-outline:#547042;--scene-top:#e9efc194;--scene-bottom:#accb89eb;--ribbon-hue:115deg;--secondary-ink:#65502a;--secondary-shadow:none;font-weight:600}
.game-shell{background:linear-gradient(var(--scene-top),var(--scene-bottom)),url('../assets/hero-v1.webp') center/cover;box-shadow:0 0 65px #264c3645;border:0;padding-left:13px;padding-right:13px}
.ui-icon{display:inline-block;width:27px;height:27px;object-fit:contain;flex:none;vertical-align:middle;pointer-events:none}
.topbar{height:60px;gap:8px;position:relative;z-index:1}
.topbar>div{position:relative;flex:1;min-width:0;padding:8px 4px 7px;border:0 solid transparent;border-image:url('../assets/ui/panel.png') 120 fill / 20px}
.topbar .brand{font-family:'Lilita One',sans-serif;font-size:10px;letter-spacing:1.6px;line-height:1;color:#78866a}
.topbar strong{font-size:14px;line-height:1.3;color:#4b634a}
button{transition:transform .08s,filter .08s}
button:disabled{opacity:.57;cursor:default;filter:saturate(.3)}
button:not(:disabled):active{transform:translateY(2px) scale(.98);filter:brightness(.95)}
.primary,.secondary,.text-button{border:0;min-height:49px;padding:10px 21px;background:none;--button-art:url('../assets/ui/button-primary.png');border-radius:0;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:15px;font-weight:800;color:#fffef3;text-shadow:0 2px 1px #31504880;text-decoration:none;flex:none}
.primary .ui-icon,.secondary .ui-icon,.text-button .ui-icon{width:25px;height:25px;filter:drop-shadow(0 1px 0 #3d5b4133)}
.secondary,.text-button{background:none;--button-art:url('../assets/ui/button-secondary.png');color:var(--secondary-ink);text-shadow:var(--secondary-shadow)}
.text-button{min-height:43px;font-size:12px;padding:8px 16px}
.text-button .ui-icon{width:21px;height:21px}
.button-label{line-height:1.3}
.icon-button,.topbar .icon-button{background:url('../assets/ui/circle.png') center/100% 100% no-repeat;box-shadow:none;border:0;width:44px;height:44px;padding:11px;border-radius:50%;display:inline-grid;place-items:center;flex:none}
.icon-button .ui-icon{width:23px;height:23px;filter:drop-shadow(0 1px 1px #17442c60)}
.home-screen{gap:10px;padding-bottom:15px}
.hero{display:block;position:relative;flex:1;min-height:140px;background:transparent;border-radius:27px;overflow:hidden;isolation:isolate}
.hero::after{content:'';position:absolute;inset:0;border:10px solid transparent;border-image:url('../assets/ui/tile.png') 72 / 10px;pointer-events:none;z-index:3}
.hero img{display:block;position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover;object-position:center 60%}
.hero-caption{position:absolute;top:0;left:0;right:0;padding:20px 8px 0;text-align:center;z-index:2;text-shadow:none;display:flex;align-items:center;flex-direction:column;background:linear-gradient(#fff3c4b0,transparent)}
.hero h1{font-family:'Lilita One','Hiragino Maru Gothic ProN','Hiragino Sans',sans-serif;font-size:36px;line-height:1.13;font-weight:900;letter-spacing:1px;margin:0;color:#fffde9;-webkit-text-stroke:5px var(--title-outline);paint-order:stroke fill;text-shadow:0 4px 0 #344e4566;order:0}
.hero h1 br{display:block}
.hero-caption .eyebrow{order:1;letter-spacing:.5px;font-size:11px;font-weight:800;margin-top:10px;color:#415338;text-shadow:0 1px 3px #fffbe5,0 0 8px #fffbe5}
:lang(en) .hero h1{font-weight:400;font-size:44px;-webkit-text-stroke-width:4px}
.summary,.collection-strip{border:0 solid transparent;border-image:url('../assets/ui/panel.png') 120 fill / 20px;min-height:57px;padding:10px 15px;gap:9px;color:#506149;flex:none}
.summary{font-size:10px}
.summary>span:first-of-type{display:flex;flex-direction:column;gap:1px}
.summary strong,.collection-strip strong,.dig-stats strong,.level-button strong,.catch-size,.record-line strong,.result-summary strong{font-family:'Lilita One','Hiragino Sans',sans-serif;font-weight:400;font-size:27px;line-height:1}
.summary small,.collection-strip small{font:12px 'Lilita One',sans-serif}
.summary .summary-badge{display:flex;align-items:center;gap:5px}
.summary>.ui-icon{width:36px;height:36px}
.summary>span:last-child{margin-left:auto}
.home-screen>.primary{min-height:58px;font-size:18px}
.home-screen>.secondary{min-height:48px}
.footer{border:0;gap:8px;height:61px;padding:7px 0 10px}
.footer button{border-radius:0;background:none;--button-art:url('../assets/ui/button-secondary.png');box-shadow:none;color:var(--secondary-ink);display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;padding:6px;min-height:43px}
.footer .selected{background:none;--button-art:url('../assets/ui/button-primary.png');color:#fffbe9;text-shadow:0 1px 1px #59412a70}
.footer .ui-icon{width:25px;height:25px}.footer span{font-size:11px}
.museum-heading,.levels-screen>h1,.aquarium-heading{color:var(--title-outline);text-align:center}
.museum-heading h1,.levels-screen>h1,.aquarium-heading h1{font-weight:850;text-shadow:0 2px #fffbeccc}
.levels-screen>p,.museum-heading p{color:#4b634b;text-align:center;font-size:11px}
.museum-count,.aquarium-help,.play-help,.board-hint{color:#465b43;font-weight:700;text-shadow:0 1px #f8ffe5b0}
.result-screen{position:relative;margin:3px 0 9px;padding:16px 14px;gap:10px;border:0 solid transparent;border-image:url('../assets/ui/panel.png') 120 fill / 30px;color:#49604b;isolation:isolate}
.result-screen::before{content:'';position:absolute;width:220px;height:220px;top:25px;left:50%;transform:translateX(-50%);background:url('../assets/ui/shine.png') center/contain no-repeat;opacity:.6;z-index:-1;pointer-events:none}
.result-screen>.eyebrow{position:relative;display:grid;place-items:center;min-height:37px;padding:10px 18px;width:100%;font-family:'Lilita One',sans-serif;letter-spacing:1px;font-size:12px;color:#fff;text-shadow:0 1px 2px #335344;isolation:isolate;flex:none}
.result-screen>.eyebrow::before,.dialog-heading::before{content:'';position:absolute;inset:0;background:url('../assets/ui/ribbon.png') center/100% 100% no-repeat;filter:hue-rotate(var(--ribbon-hue)) saturate(.85);z-index:-1;pointer-events:none}
.result-screen h1{color:var(--title-outline);font-size:23px;line-height:1.35;text-shadow:0 2px #fff}
.result-screen>p{color:#59745a;font-size:12px}
.result-screen>.primary,.result-screen>.secondary,.result-screen>.text-button{width:100%}
.result-art{background:url('../assets/ui/shine.png') center/contain no-repeat;border-radius:0;width:96px;height:96px;min-height:0;flex:none}
.result-art .ui-icon{width:83%;height:83%;filter:drop-shadow(0 3px 0 #37645625)}
.result-stars{line-height:1;letter-spacing:0}
.star-set{display:inline-flex;gap:4px;vertical-align:middle;align-items:center;justify-content:center}
.star-set .ui-icon{width:28px;height:28px}
.result-stars .ui-icon{width:42px;height:42px}
.record-line,.result-summary{border:0 solid transparent;border-image:url('../assets/ui/tile.png') 80 fill / 12px;padding:12px;font-size:10px;flex:none}
.record-line strong{font-size:26px;margin-top:5px}
.result-screen .completion,.completion-message{color:#537b39;font-weight:800}
progress{height:14px;border:0;border-radius:8px;background:url('../assets/ui/button-muted.png') center/100% 100%;box-shadow:inset 0 1px 3px #273e4260}
progress::-webkit-progress-bar{background:url('../assets/ui/button-muted.png') center/100% 100%;border-radius:8px}
progress::-webkit-progress-value{background:url('../assets/ui/button-primary.png') center/100% 100%;border-radius:8px}
progress::-moz-progress-bar{background:url('../assets/ui/button-primary.png') center/100% 100%;border-radius:8px}
dialog{border:0 solid transparent;border-image:url('../assets/ui/panel.png') 120 fill / 30px;border-radius:0;background:none;padding:24px 23px 22px;color:#4b604b;max-height:88dvh;box-shadow:none;filter:drop-shadow(0 12px 24px #17352360)}
dialog::backdrop{background:#183a3f85;backdrop-filter:blur(4px)}
.dialog-heading{isolation:isolate;position:relative;min-height:58px;display:flex;align-items:center;justify-content:center;margin:0 -7px 14px;padding:8px 28px 8px 10px;gap:0}
.dialog-heading h2{font-size:20px;line-height:1.3;text-align:center;color:#fffce9;text-shadow:0 2px 1px #31493780}
.dialog-heading .icon-button{position:absolute;right:-8px;top:-13px;width:40px;height:40px;padding:10px}
.dialog-heading .icon-button .ui-icon{width:21px;height:21px}
dialog>h2{text-align:center;color:var(--title-outline)}
dialog>.text-button,dialog>.secondary,dialog>.primary{width:100%;margin:8px 0}
.setting-row{min-height:56px;border:0 solid transparent;border-image:url('../assets/ui/tile.png') 80 fill / 12px;padding:7px 10px;margin:7px 0;gap:8px;font-size:13px}
.setting-row input{appearance:none;-webkit-appearance:none;margin:0;border:0;width:42px;height:40px;background:url('../assets/ui/tile-locked.png') center/100% 100% no-repeat;cursor:pointer;flex:none}
.setting-row input:checked{background:url('../assets/ui/check.png') center/23px 23px no-repeat,url('../assets/ui/tile-active.png') center/100% 100% no-repeat}
select{appearance:none;-webkit-appearance:none;min-height:42px;width:126px;max-width:50%;border:0;border-radius:0;padding:10px 26px 10px 14px;background:url('../assets/ui/down.png') right 12px center/13px 13px no-repeat,url('../assets/ui/button-secondary.png') center/100% 100% no-repeat;color:var(--secondary-ink);font-size:12px;font-weight:750;touch-action:manipulation}
.fine-print{color:#68806b}dialog p{font-size:12px}
.danger.text-button{background:none;--button-art:url('../assets/ui/button-muted.png');color:#7a3942;text-shadow:none}
button:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #297386;outline-offset:2px}
#toast{border:0 solid transparent;border-image:url('../assets/ui/panel.png') 120 fill / 18px;background:none;border-radius:0;color:#416544;font-weight:800;box-shadow:none;filter:drop-shadow(0 4px 8px #254d4540);white-space:normal}
@media(max-height:590px){
 .topbar{height:52px}.topbar>div{padding:6px 3px}.topbar strong{font-size:13px}.topbar .brand{font-size:9px}
 .home-screen{gap:7px;padding-bottom:10px}.hero-caption{padding-top:15px}.hero h1{font-size:30px}.hero-caption .eyebrow{margin-top:7px;font-size:10px}:lang(en) .hero h1{font-size:36px}
 .home-screen>.primary{min-height:52px;font-size:16px}.home-screen>.secondary{min-height:45px}
 .summary,.collection-strip{min-height:49px;padding:7px 13px}.summary strong,.collection-strip strong{font-size:24px}.summary>.ui-icon{width:31px;height:31px}
 .primary,.secondary{min-height:44px;padding:8px 18px;font-size:13px}.text-button{min-height:40px;padding:7px 15px;font-size:11px}
 .footer{height:55px;padding:6px 0 8px}.footer button{min-height:41px}
 .result-screen{padding:11px 13px;margin:2px 0 7px;gap:7px}.result-art{display:none}.result-screen h1{font-size:20px}.result-screen>.eyebrow{min-height:33px;padding:8px 12px;font-size:11px}
 .result-stars .ui-icon{width:32px;height:32px}.record-line,.result-summary{padding:9px}.record-line strong{font-size:23px;margin-top:3px}
 dialog{padding:20px;max-height:90dvh}.dialog-heading{min-height:49px;margin-bottom:9px}.dialog-heading h2{font-size:18px}.setting-row{min-height:51px;margin:5px 0}
}

.play-screen{padding:4px 0 12px;gap:8px}.play-stats{border:0 solid transparent;border-image:url('../assets/ui/panel.png') 120 fill / 18px;min-height:48px;padding:9px 15px;color:#4e714c}.play-stats .stars{font-size:0;letter-spacing:0}.play-stats strong{font-family:'Lilita One',sans-serif;font-size:23px;font-weight:400}.world{border:3px solid #80a775;box-shadow:0 4px 0 #588860,0 7px 20px #385d3740;background:linear-gradient(#c3e7d8,#f3eac1);border-radius:22px;width:min(100%,calc((100dvh - 231px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * .8))}.world::after{content:'';position:absolute;inset:0;border:5px solid transparent;border-image:url('../assets/ui/tile-active.png') 80 / 5px;pointer-events:none}.play-help{min-height:32px;font-size:11px}.controls .primary,.controls .secondary{font-size:13px;gap:5px}
.levels-screen{gap:9px;padding:8px 0 14px}.levels-screen h1{font-size:22px}.levels-grid{gap:8px}.level-button{position:relative;border:0 solid transparent;border-image:url('../assets/ui/tile.png') 80 fill / 14px;background:none;box-shadow:none;border-radius:0;padding:7px}.level-button strong{font-size:26px;color:#547147}.level-button span{font-size:0;letter-spacing:0;line-height:1}.level-button .star-set{gap:2px;margin-top:3px}.level-button .star-set .ui-icon{width:17px;height:17px}.level-button small{font-size:8px;color:#6d805d;margin-top:2px}.level-button:disabled{background:none;box-shadow:none;opacity:.72;border-image-source:url('../assets/ui/tile-locked.png')}.level-button:disabled>span>.ui-icon{width:19px;height:19px;margin-top:3px;opacity:.8}.level-button:disabled strong{color:#748b87}.result-screen .completion{font-size:11px}
@media(max-height:590px){.play-stats{min-height:44px;padding:8px 12px}.play-stats .star-set .ui-icon{width:25px;height:25px}.world{width:min(100%,calc((100dvh - 217px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * .8))}.play-screen{gap:6px;padding-bottom:10px}.levels-screen{gap:8px;padding:5px 0 10px}.levels-screen h1{font-size:20px}.levels-screen>p{font-size:10px}.level-button{padding:5px}.level-button strong{font-size:22px}.level-button .star-set .ui-icon{width:14px;height:14px}.level-button small{font-size:7px;margin-top:0}.levels-grid{gap:6px}.result-screen{gap:6px}.result-screen .completion{font-size:11px}.result-screen>p{line-height:1.4}}

/* Preserve the end caps at every control height; only the flat middle stretches. */
.sprite-button{position:relative;isolation:isolate;background:none;--button-art:url('../assets/ui/button-primary.png')}
.sprite-button.secondary,.sprite-button.text-button,.footer .sprite-button,.decor-slots .sprite-button{--button-art:url('../assets/ui/button-secondary.png')}
.footer .sprite-button.selected,.decor-slots .sprite-button.selected{--button-art:url('../assets/ui/button-primary.png')}
.sprite-button.danger{--button-art:url('../assets/ui/button-muted.png')}
.button-skin{position:absolute;inset:0;display:flex;z-index:-1;pointer-events:none;overflow:hidden}
.button-skin>.button-cap{height:100%;width:auto;aspect-ratio:9/10;flex:none;background:var(--button-art) left center/auto 100% no-repeat}
.button-skin>.button-cap-end{background-position:right center}
.button-skin>.button-middle{flex:1;min-width:0;height:100%;background:var(--button-art) center/325% 100% no-repeat}
.language-picker{position:relative;isolation:isolate;display:block;width:126px;max-width:50%;height:42px;flex:none;--button-art:url('../assets/ui/button-secondary.png')}
.language-picker select{width:100%;max-width:none;height:100%;background:url('../assets/ui/down.png') right 12px center/13px 13px no-repeat}
.setting-row input{background-size:contain}
.setting-row input:checked{background-size:23px 23px,contain}