/* Artwork skin: presentation only. Game, clocks, scores and persistence are unchanged. */
:root{--art-brown:#734225;--art-cream:#fff2cf;--art-blue:#159cec;--art-pink:#ff69af}
body{background: url('garden-art-v3.png') center / cover fixed;color:#573c2c}
.art-home,.adventure-map,.countdown-page{background-image:url('garden-art-v3.png');background-position:center;background-size:cover}
.garden-map{background-image:linear-gradient(#a7de7eee,#a7de7e99),url('garden-art-v3.png')}
.wood-sign,.brand,.map-wood-sign,.game-nav>span,.home-slogan,.map-title-ribbon{position:relative;background:radial-gradient(ellipse at 15% 20%,#d9a36344 0 3%,transparent 4%),repeating-linear-gradient(3deg,#9f633500 0 17px,#6e391822 18px 20px),linear-gradient(#c08a53,#a4683c 48%,#bb7f48);border:3px solid #704225;box-shadow:inset 0 0 0 3px #e4b57877,0 5px #633817,0 8px 0 #432d2520;border-radius:16px;color:#fffbed;text-shadow:0 3px #633921,1px 0 #633921,-1px 0 #633921}
.wood-sign:before,.wood-sign:after,.game-nav>span:before,.game-nav>span:after{content:'';position:absolute;top:46%;width:5px;height:5px;background:#704225;box-shadow:0 1px #edbb7c;border-radius:50%;left:8px}.wood-sign:after,.game-nav>span:after{left:auto;right:8px}
.brand{max-width:690px;padding:12px 20px;margin:0 auto 24px}.brand h1,.brand h1 span{color:#fff8d9;text-shadow:0 3px #744224;font-size:32px}.brand .eyebrow{color:#fff5d4}.brand p{color:#fff7df;font-weight:700;margin:3px;font-size:14px}
button{font-weight:800}.primary,.secondary,.game-nav button,.map-home{border:3px solid #fff5c9;box-shadow:inset 0 2px #ffffffb3,inset 0 -5px #0002,0 4px #6d653d,0 6px 0 #fff9;color:white;text-shadow:0 2px #0005;background:linear-gradient(#54cffc,#159bdd 70%,#087dc1)}
.primary{background:linear-gradient(#8ada4d,#4bae1c 50%,#218a08);box-shadow:inset 0 3px #c4ff99,inset 0 -5px #236c1355,0 4px #245d15,0 6px #fff9}
.settings-card{background:#fff5dcef;border:4px solid #fff;border-radius:26px;box-shadow:inset 0 0 0 2px #c9a77b,0 8px #78532c55}.welcome-mascot{width:120px}.settings-title{font-size:22px!important;color:#865025}.name-label{color:#75441f}input,select{border:2px solid #d3ad75;box-shadow:inset 0 2px 4px #965b2120;background:#fffef3;font-weight:600}
fieldset legend{font-size:17px;color:#734223}.choices button{position:relative;border:3px solid #fff6dc;box-shadow:inset 0 2px #fff9,0 4px #92754d44;border-radius:18px;background:linear-gradient(#d9f5af,#b9df81);color:#355a1e}.choices button:nth-child(2){background:linear-gradient(#ffe4a4,#ffc267);color:#8d4d12}.choices button:nth-child(3){background:linear-gradient(#ffcbcc,#ffa5a8);color:#92352b}.choices button:nth-child(4){background:linear-gradient(#e9cdff,#c59aef);color:#68328d}.choices button.selected{outline:4px solid #ffce4b;outline-offset:1px;border-color:white;box-shadow:inset 0 2px #fff9,0 6px #96733c55;background:linear-gradient(#e1f8bb,#abdf71)}
.modes .choices button.selected{background:linear-gradient(#42d369,#00a335)!important;color:white}.choices b{font-size:25px}.choices small{font-weight:700}.settings-back{background:#4ac4f5;color:white;border:3px solid white;box-shadow:0 4px #2179a1}.rules{color:#785b3f}.home-hedgehog img{object-fit:contain}.home-quill{font-size:0}.home-quill:after{content:'➶';font-size:56px;color:#744223}
#app.playing{max-width:1200px;padding:12px 18px 18px}.game-nav{margin-bottom:18px}.game-nav>span{font-size:18px;font-weight:800;padding:10px 26px;min-width:270px}.game-nav button{font-size:19px;border-radius:15px;min-width:55px;min-height:49px}.boards{gap:24px}.boards.single{grid-template-columns:minmax(0,565px)}
.board{display:flex;flex-direction:column;padding:13px 18px 15px;border:3px solid white;background:linear-gradient(#b9eafeed,#bcecffd9);border-radius:29px;box-shadow:inset 0 0 0 3px #71ccec,0 5px #499bc0,0 8px #ffffffaa;position:relative;overflow:visible}.player-1{background:linear-gradient(#ffd5e8f5,#ffd9e7e6);box-shadow:inset 0 0 0 3px #f5a3c5,0 5px #b66b8e,0 8px #ffffffaa}
.player-head{min-height:43px;order:0}.player-head b{background:linear-gradient(#30bfff,#078ce4);border:2px solid #c8f6ff;border-radius:13px;padding:5px 15px;color:#fff;font-size:19px;box-shadow:inset 0 2px #fff8,0 3px #0767ae;text-shadow:0 2px #116baa}.player-1 .player-head b{background:linear-gradient(#ff98cc,#f353a4);color:white;border-color:#ffdfef;text-shadow:0 2px #bb3b76;box-shadow:inset 0 2px #fff8,0 3px #c84680}.balloon-count{background:#fff8e8;border:2px solid white;color:#69361e;font-weight:800}
.arena{order:1;background:none;border:0;box-shadow:none;height:126px;margin:5px 0;overflow:visible}.hedgehog{width:145px;height:125px;left:-10px;bottom:0;filter:drop-shadow(0 3px 0 #86572833)}.player-1:not(.computer) .hedgehog{left:auto;right:-8px;transform:scaleX(-1)}.player-1:not(.computer) .balloons{left:0;right:auto}.balloons{width:70%;right:0;top:25px;display:flex;flex-wrap:wrap;gap:8px 4px;align-items:start;justify-content:center}.balloon{flex:0 0 25px;width:25px;height:35px;border:1.5px solid hsl(var(--hue) 45% 41%);box-shadow:inset -4px -2px #0002,0 2px #fff7;background:radial-gradient(ellipse at 27% 24%,#fff9 0 16%,transparent 19%),linear-gradient(100deg,hsl(var(--hue) 95% 77%),hsl(var(--hue) 85% 57%))}.balloon i{height:15px;background:#866b35}.balloon:after{left:8px}.question-row{order:2;background:linear-gradient(#ffe8c0,#ffe9c9);border:2px solid #b88b5d;box-shadow:inset 0 0 0 3px #fff6e5,0 3px #b78a53;border-radius:13px;padding:8px 13px;min-height:64px;justify-content:space-between}.equation{font-weight:600;color:#3d2318;text-shadow:0 1px #fff;font-size:32px}.timer{width:42px;height:39px;border-radius:50%;font-size:25px}.time-track{order:3;margin-top:8px}.feedback{order:4;min-height:20px;margin:5px 0;font-size:12px;font-weight:600;color:#5d6a5c}.answer{order:5;position:relative;width:calc(100% - 58px);height:36px;min-height:36px;margin:0 0 9px;border:2px solid #cfb68b;font-size:25px;border-radius:10px;background:#fffbea}
.art-controls{order:6;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:12px;background:linear-gradient(#fff8d8,#f0e9bd);border:3px solid #fff;border-radius:21px;box-shadow:inset 0 0 0 2px #c7b58c,0 4px #9c9469;width:100%;max-width:430px;align-self:center}.keypad{display:contents}.keypad button,.shoot{border:2px solid #fff9;border-radius:13px;min-height:47px;height:47px;color:white;font:600 32px 'Fredoka','Noto Sans Thai',sans-serif;-webkit-text-stroke:.7px #0003;text-shadow:0 2px 1px #6b445888;box-shadow:inset 0 2px #ffffffba,inset 0 -4px #0002,0 3px #78635477;position:relative;margin:0;background:linear-gradient(#ff99c9,#f36cae)}
.keypad button[data-key="8"]{background:linear-gradient(#ffb464,#fa843c)}.keypad button[data-key="9"]{background:linear-gradient(#ffdd65,#ffb52b)}.keypad button[data-key="4"]{background:linear-gradient(#a8e678,#63c55f)}.keypad button[data-key="5"]{background:linear-gradient(#73e4d6,#23c4b4)}.keypad button[data-key="6"],.keypad button[data-key="0"]{background:linear-gradient(#63cffe,#21a9f1)}.keypad button[data-key="1"],.keypad button[data-key="3"]{background:linear-gradient(#c4a0ff,#9864ed)}.keypad button[data-key="0"]{order:10}.keypad button[data-key="back"]{order:11;background:linear-gradient(#ff9292,#f34646)}.keypad button[data-key="clear"]{position:absolute;right:0;top:-47px;min-height:35px;height:35px;width:48px;font-size:19px;border-radius:9px;background:linear-gradient(#ffc18b,#ed934c)}.shoot{order:12;min-width:0;width:100%;background:linear-gradient(#81d843,#41aa1d 50%,#248512);font-size:26px;box-shadow:inset 0 2px #d6ffaa,inset 0 -4px #164f1566,0 3px #456332}.shoot:before{content:'➶';margin-right:4px}.keypad button:active,.shoot:active{transform:translateY(3px);box-shadow:inset 0 2px #0002,0 1px #78635477}.player-footer{order:9;font-size:11px;margin-top:13px;color:#5b6756}.power-bar{order:7}.power-status{order:8}.ai-thinking{order:6;flex:1;min-height:225px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px}.ai-thinking img{width:125px;height:125px}.ai-thinking p{margin:4px;color:#935779}.ai-thinking small{color:#935779}
.boards.single .board{background:linear-gradient(#c2efffac,#edffce88);box-shadow:inset 0 0 0 3px #b5f5ff,0 5px #61999e,0 8px #ffffffaa}.single .question-row{order:1}.single .time-track{order:2}.single .feedback{order:3}.single .arena{order:4;height:139px;background:transparent;border:0;margin:0 0 5px}.single .hedgehog{width:155px;height:139px}.single .balloons{top:18px}.single .balloon{flex-basis:29px;width:29px;height:44px}.single .answer{width:calc(100% - 58px);align-self:center;margin-right:58px}.boards.side,.boards.versus{grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);gap:15px;align-items:stretch}.side .player-0,.versus .player-0{grid-column:1}.side .player-1,.versus .player-1{grid-column:3}.boards.side:after,.boards.versus:after{content:'ใครยิงลูกโป่ง\aหมดก่อน\aชนะ!';white-space:pre-line;grid-column:2;grid-row:1;align-self:center;text-align:center;padding:25px 7px;background:linear-gradient(#ffe6ac,#f3cb83);border:4px solid #ac713e;box-shadow:inset 0 0 0 3px #fff3cc,0 5px #744223;border-radius:18px;font-size:20px;line-height:1.7;font-weight:800;color:#5b351d}.boards.versus:after{content:'VS';font:bold 48px 'Fredoka',sans-serif;color:#ff9f22;text-shadow:2px 2px #6b3b15,-2px -2px white;background:#fff1a0;border-radius:50%;padding:22px 0;border-color:#ffd854}
.boards.opposite .board{display:grid}.opposite .art-controls{grid-column:2;grid-row:2 / 6;display:grid;gap:6px;padding:7px;align-self:stretch}.opposite .keypad{display:contents}.opposite .answer{width:calc(100% - 40px);height:35px;min-height:35px;margin:0}.opposite .keypad button,.opposite .shoot{height:44px;min-height:44px;font-size:25px;padding:0}.opposite .keypad button[data-key="clear"]{width:34px;height:32px;min-height:32px;top:-39px;font-size:16px}.opposite .player-1:not(.computer) .hedgehog{left:-5px;right:auto;transform:none}.opposite .player-1:not(.computer) .balloons{left:auto;right:0}.opposite .hedgehog{width:100px;height:95px}.opposite .arena{height:95px;margin:0}.opposite .balloon{flex-basis:19px;width:19px;height:27px}.opposite .balloons{top:12px;gap:5px 3px}.opposite .question-row{min-height:40px;padding:3px 6px}.opposite .equation{font-size:23px}.opposite .shoot:before{display:none}.opposite .feedback{margin:0}
.result{background:#fff4d9ee;box-shadow:inset 0 0 0 3px #fff,0 7px #957443;border:3px solid #bd935b}.celebration img{width:210px;height:170px}.result h2{color:#f2ae16;text-shadow:0 3px #72491c,2px 0 #fff,-2px 0 #fff;font-size:35px}.result-player{background:#fff4d7;border:2px solid #d4ad79}.result .primary{max-width:430px}.result .text-button{background:linear-gradient(#64cffa,#1396d9);color:white;border:3px solid white;box-shadow:0 4px #177ea7;border-radius:14px;font-weight:800}.stage-win-art img{width:190px}.home-logo h1{font-weight:800}
@media(min-width:1000px) and (max-height:800px){.game-nav{margin-bottom:12px}.game-nav>span{font-size:16px;padding:7px 24px}.arena{height:97px}.hedgehog{height:105px;width:130px}.single .arena{height:112px}.single .hedgehog{height:112px}.question-row{min-height:54px}.art-controls{gap:7px;padding:9px}.keypad button,.shoot{height:44px;min-height:44px}.player-head{min-height:35px}.player-head b{font-size:16px}.game-help{margin:10px auto 0}.stage-playing .single .arena{height:82px}.stage-playing .single .hedgehog{height:88px}.stage-playing .power-bar{margin:8px 0 0}.stage-playing .power-bar button{padding:3px}.stage-playing .power-bar button .game-icon{height:21px}.player-footer{margin-top:10px}}
@media(max-width:900px){.boards.side,.boards.versus{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}.side .player-1,.versus .player-1{grid-column:2}.boards.side:after,.boards.versus:after{display:none}.player-head b{font-size:16px;padding:4px 8px}.balloon{flex-basis:22px;width:22px;height:31px}.hedgehog{width:120px}.equation{font-size:27px}}
@media(max-width:700px){#app.playing{padding:9px 10px 15px}.game-nav{margin-bottom:14px;gap:8px}.game-nav>span{min-width:0;padding:8px 14px;font-size:12px}.game-nav button{font-size:14px;min-width:45px;min-height:44px;padding:5px}.board{padding:12px 12px;border-radius:23px}.single .arena{height:128px}.single .hedgehog{height:127px;width:135px;left:-7px}.single .balloons{width:67%;top:18px;gap:9px 4px}.single .balloon{flex-basis:24px;width:24px;height:37px}.question-row{min-height:58px;padding:8px}.equation{font-size:27px}.timer{height:36px;width:36px;font-size:24px}.art-controls{gap:8px;padding:11px}.keypad button,.shoot{height:49px;min-height:49px;font-size:32px}.shoot{font-size:27px}.player-footer{font-size:10px}.game-help{font-size:11px;margin:10px auto 0}.player-head b{font-size:15px}.balloon-count{font-size:12px;padding:3px 6px}.stage-playing .single .arena{height:100px}.stage-playing .single .hedgehog{height:105px}.stage-playing .art-controls{gap:7px;padding:8px}.stage-playing .keypad button,.stage-playing .shoot{height:44px;min-height:44px}.stage-playing .power-bar{margin-top:9px}.brand h1,.brand h1 span{font-size:27px}.brand p{font-size:12px}.settings-card{padding:17px}.welcome-mascot{width:88px}.choices b{font-size:22px}.settings-title{font-size:18px!important}.boards.side{gap:10px}.boards.side .board{padding:9px 7px}.boards.side .player-head b{font-size:13px}.boards.side .arena{height:91px}.boards.side .hedgehog{width:82px;height:80px}.boards.side .balloons{top:9px;width:60%;gap:5px 2px}.boards.side .balloon{flex-basis:14px;width:14px;height:21px}.boards.side .balloon:after{left:3px}.boards.side .question-row{padding:5px;min-height:60px}.boards.side .equation{font-size:16px}.boards.side .timer{height:24px;font-size:19px}.boards.side .art-controls{padding:6px;gap:5px;border-width:2px}.boards.side .keypad button,.boards.side .shoot{height:44px;min-height:44px;font-size:23px;border-radius:9px}.boards.side .shoot{font-size:18px}.boards.side .shoot:before{display:none}.boards.side .keypad button[data-key="clear"]{width:30px;height:32px;min-height:32px;top:-43px;font-size:16px}.boards.side .answer{width:calc(100% - 36px)}.boards.side .feedback{font-size:10px;min-height:37px}.boards.side .player-footer{font-size:9px}.boards.versus{grid-template-columns:1fr}.versus .player-0,.versus .player-1{grid-column:1}.versus .computer{display:grid;grid-template-columns:1fr 1fr;padding:10px}.versus .computer .arena,.versus .computer .ai-thinking{display:none}.versus .computer .player-head{grid-column:1 / 3}.versus .computer .question-row{min-height:42px;padding:4px}.versus .computer .feedback{font-size:10px}.versus .computer .equation{font-size:20px}.versus .computer .time-track{grid-row:3}.versus .computer .player-footer{grid-row:4}.opposite .board{padding:9px;gap:5px 8px}.opposite .player-head b{font-size:11px;padding:2px 5px}.opposite .hedgehog{width:85px;height:85px}.opposite .arena{min-height:75px;height:100%;max-height:110px}.opposite .balloons{width:60%;top:5px}.opposite .balloon{flex-basis:14px;width:14px;height:21px}.opposite .art-controls{padding:5px;gap:5px}.opposite .keypad button,.opposite .shoot{height:44px;min-height:44px;font-size:22px;border-radius:9px}.opposite .shoot{font-size:18px}.opposite .equation{font-size:15px}.opposite .question-row{min-height:34px;padding:4px}.opposite .feedback{font-size:10px}.opposite .player-footer{font-size:9px}.result h2{font-size:27px}}
.opposite .art-controls .shoot{grid-column:auto;grid-row:auto}
@media(max-width:700px){.boards.side .timer{border-radius:9px}.modes .choices button{min-width:0;padding:12px 3px}.modes .choices button b{font-size:16px;overflow-wrap:normal}.modes .choices button small{font-size:10px}.opposite .art-controls .shoot{grid-column:auto;grid-row:auto}}
/* Compact setup: no repeated game masthead, larger readable option symbols. */
#app.settings-screen{max-width:870px;padding:12px 16px}
.settings-screen .settings-card{max-width:none;padding:16px 22px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
.settings-screen .settings-back{margin:0;padding:7px 12px;min-height:44px;font-size:15px}
.settings-screen .settings-title{margin:0;text-align:right;font-size:19px!important}
.settings-screen .welcome{display:none}
.settings-screen form,.settings-screen .rules,.settings-screen [data-action="stats"]{grid-column:1 / -1}
.settings-screen form{margin-top:12px}
.settings-screen input,.settings-screen select{min-height:46px;padding:8px 12px;font-size:17px}
.settings-screen .name-label{font-size:16px}
.settings-screen fieldset{margin:9px 0}
.settings-screen legend{font-size:17px;margin-bottom:8px}
.settings-screen .settings-grid fieldset{margin:0}
.settings-screen .choices{gap:10px}
.settings-screen .choices button{padding:8px 7px;min-width:0}
.settings-screen .option-icon{display:block;font-family:system-ui,sans-serif;font-size:33px;line-height:1.15;margin-bottom:4px}
.settings-screen .modes .choices button b{font-size:20px;margin:0;line-height:1.25}
.settings-screen .choices small,.settings-screen .modes .choices button small{font-size:14px;line-height:1.3;margin-top:3px}
.settings-screen .choices b{font-size:24px;line-height:1.25}
.settings-screen .settings-grid{grid-template-columns:1fr 1fr;gap:18px}
.settings-screen .settings-grid .choices b{font-size:24px}
.settings-screen .primary{min-height:49px;padding:8px 14px;font-size:20px;margin-top:2px}
.settings-screen .rules{gap:5px 16px;margin:12px 0 0;font-size:15px;line-height:1.45;font-weight:600}
.settings-screen [data-action="stats"]{font-size:16px;padding:8px;margin:5px auto 0;min-height:44px}
@media(max-width:600px){
 #app.settings-screen{padding:8px}
 .settings-screen .settings-card{padding:12px 13px;column-gap:8px;border-radius:22px}
 .settings-screen .settings-title{font-size:15px!important;line-height:1.35}
 .settings-screen .settings-back{font-size:14px;padding:6px 9px}
 .settings-screen form{margin-top:9px}
 .settings-screen fieldset{margin:9px 0}
 .settings-screen legend{font-size:16px;margin-bottom:7px}
 .settings-screen .choices{gap:7px}
 .settings-screen .choices button{padding:7px 3px;border-radius:15px}
 .settings-screen .option-icon{font-size:30px;margin-bottom:3px}
 .settings-screen .modes .choices button b{font-size:16px;line-height:1.25}
 .settings-screen .choices small,.settings-screen .modes .choices button small{font-size:13px}
 .settings-screen .choices b{font-size:23px}
 .settings-screen .settings-grid{grid-template-columns:1fr;gap:10px}
 .settings-screen .settings-grid fieldset{display:grid;grid-template-columns:1fr}
 .settings-screen .settings-grid .choices button{padding:6px 3px}
 .settings-screen .settings-grid .choices b{font-size:24px}
 .settings-screen .settings-grid .choices small{font-size:14px}
 .settings-screen select{font-size:16px;min-height:44px;padding:6px 9px}
 .settings-screen .rules{font-size:14px;gap:3px 10px;margin-top:10px}
 .settings-screen .primary{font-size:18px}
 .settings-screen [data-action="stats"]{font-size:15px;margin-top:2px;padding:5px}
}
.round-clock{width:fit-content;margin:0 auto 10px;padding:5px 18px;border:2px solid white;background:#fff9db;border-radius:18px;font-weight:800;color:#46633d}.round-clock b{font-size:22px;margin-left:6px}.round-clock.urgent{background:#ffe1dc;color:#a72e26}.over-mascot{width:160px}.game-over h2{color:#bf3828}.stage-select{max-width:650px;padding:25px;margin:30px auto;text-align:center}.stage-select .choices button{min-height:130px}.stage-select .choices b{font-size:32px}.stage-select .choices span{display:block}.stage-select p{line-height:1.9}.stage-map-tools{display:flex;justify-content:center;gap:9px;margin:20px 10px;flex-wrap:wrap}.stage-map-tools button{padding:10px 14px;background:#fff2cb;border:3px solid white;box-shadow:0 4px #9c7447;font-size:16px}.power-guide{max-height:85dvh;overflow:auto;width:580px}.power-guide article{display:flex;align-items:center;gap:16px;margin:12px 0;padding:10px;background:#e6f7f5;border-radius:14px}.power-guide .game-icon{width:62px;height:62px;color:#2b8fba}.power-guide h3,.power-guide p{margin:4px 0}.settings-screen #digit-options .choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.settings-screen #digit-options .choices b{font-size:17px}.settings-screen #digit-options .choices small{font-size:12px}.settings-screen .settings-grid{grid-template-columns:1fr}.settings-screen #digit-options button{min-height:65px}.milestone-caption{font-size:10px;max-width:90px}.milestone-gift{pointer-events:none}
@media(max-width:600px){.settings-screen #digit-options .choices b{font-size:15px}.settings-screen #digit-options .choices small{font-size:11px}.stage-select{padding:18px;margin:10px auto}.stage-select .choices b{font-size:27px}.stage-map-tools{gap:6px}.stage-map-tools button{font-size:13px;padding:8px}.round-clock{margin-bottom:7px;padding:2px 14px}.round-clock b{font-size:19px}.power-guide .game-icon{width:45px;height:45px}.milestone-caption{font-size:9px;max-width:62px}}
.settings-screen #digit-options .choices:has(button:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Compact results: decorative hedgehogs look inward toward the score. */
#app.result-screen{max-width:900px;padding:16px 12px}
.result-screen .result{padding:20px; margin:0 auto}
.result-hero{display:grid;grid-template-columns:minmax(48px,1fr) minmax(0,2fr) minmax(48px,1fr);align-items:center;gap:8px;max-width:760px;margin:0 auto 14px}
.result-mascot{display:block;width:100%;max-height:150px;object-fit:contain}
.result-mascot.facing-left{transform:scaleX(-1)}
.result-summary{min-width:0;text-align:center}
.result-summary h2{font-size:clamp(21px,3vw,32px);line-height:1.35;margin:0 0 8px}
.result-summary p{font-size:15px;line-height:1.5;margin:6px 0}
.result-summary .finish-time{display:block;font-size:clamp(32px,5vw,52px);margin:4px 0;line-height:1.2}
.result-summary .finish-time small{font-size:15px}
.result-screen .result-players{margin:12px 0;gap:12px}
.result-screen .result-player{padding:14px}
.result-screen .result-player h3{margin:0 0 10px}
.result-screen .result-player p{margin:10px 0}
.result-screen .metrics b{font-size:30px}
.result-screen .hint{margin:12px 0;font-size:13px}
.result-actions{display:flex;align-items:stretch;justify-content:center;gap:12px;flex-wrap:wrap}
.result-actions button{flex:1 1 220px;margin:0!important;min-height:48px}
.stage-result .result-hero{max-width:500px;margin:10px auto}
.stage-result .result-stars{justify-content:center}
.stage-result .result-stars .star{width:30%;height:auto}
.stage-result .result-stars .star:nth-child(2){width:36%;height:auto}
/* A light cloud veil marks only unopened stages, without hiding the numbers. */
.stage-stop.locked::after{content:"";position:absolute;pointer-events:none;z-index:4;inset:-22% -35% -35%;border-radius:48%;background:radial-gradient(ellipse at 28% 54%,#fff 0 25%,transparent 52%),radial-gradient(ellipse at 65% 36%,#f5fcff 0 30%,transparent 58%),radial-gradient(ellipse at 73% 75%,#edf8ff 0 23%,transparent 56%);opacity:.48;filter:blur(3px)}
.stage-stop.current{z-index:5}
@media(max-width:600px){
 #app.result-screen{padding:10px 8px}
 .result-screen .result{padding:15px 12px}
 .result-hero{gap:2px;grid-template-columns:minmax(44px,.7fr) minmax(0,2fr) minmax(44px,.7fr);margin-bottom:10px}
 .result-summary h2{font-size:22px}
 .result-summary p{font-size:13px}
 .result-summary .finish-time{font-size:36px}
 .result-screen .result-player{padding:11px}
 .result-screen .result-player p{font-size:13px;margin:7px 0}
 .result-screen .result-player small{font-size:12px}
 .result-screen .metrics b{font-size:26px}
 .result-actions{gap:9px}
 .result-actions button{flex-basis:100%;font-size:16px;padding:8px}
 .stage-result .result-hero{max-width:350px}
 .stage-result .result-mascot{max-height:85px}
 .stage-stop.locked::after{filter:blur(2px)}
}
.audio-settings{width:min(420px,calc(100vw - 32px));padding:24px;border:4px solid #fff;border-radius:24px;background:#fff5dc;color:#654327;box-shadow:0 8px 0 #bc935b}
.audio-settings::backdrop{background:#26443b80}
.audio-settings h2{margin:0;font-size:25px}.audio-settings p{font-size:15px}
.audio-settings label{display:flex;align-items:center;justify-content:space-between;margin:18px 0 8px;font-size:18px;font-weight:700}
.audio-settings input[type=checkbox]{width:28px;height:28px;accent-color:#3caf48}
.audio-settings input[type=range]{width:100%;min-height:44px;accent-color:#3caf48}
.audio-settings .primary{width:100%;margin-top:16px;min-height:48px}
.about-dialog{width:min(520px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow-y:auto;text-align:center;padding:24px;box-sizing:border-box}
.about-dialog h2{font-size:clamp(21px,5vw,28px);margin:0 0 6px}.about-dialog .about-english{color:#977042}.about-dialog p{font-size:16px;line-height:1.65;margin:16px 0}.about-dialog .studio-name{font-size:22px;color:#587c43}.about-dialog a{color:#15799b;overflow-wrap:anywhere}.about-dialog .about-copyright{display:block;font-size:12px;line-height:1.5}.about-dialog .primary{display:block;width:100%;margin-top:18px;min-height:44px}