:root{--ink:#283c59;--pink:#fa6281;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#dff8fb}
body{color:var(--ink);font-family:"Arial Rounded MT Bold","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;touch-action:none}
main{width:100%;height:100dvh;min-height:100%;margin:0;overflow:hidden}
.machine{position:relative;width:100%;height:100%;max-width:520px;margin:0 auto;padding:calc(var(--safe-top) + 8px) 10px calc(var(--safe-bottom) + 8px);display:flex;flex-direction:column;background:#dff8fb}
.stats{flex:0 0 auto;display:grid;grid-template-columns:1fr 82px 1fr;gap:6px;margin-bottom:6px}
.stats div{height:48px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:rgba(255,255,255,.92);border:2px solid var(--ink);border-radius:12px;box-shadow:inset 0 -3px #e6ebeb}
.stats small{color:#8090a4;font-size:8px;font-weight:900;letter-spacing:.14em}
.stats b{font-size:20px;line-height:1}
.stats .timer{color:#fff;background:#ff788f}
.stats .timer small{color:#ffeaf0}
.fever{flex:0 0 auto;display:flex;align-items:center;gap:7px;height:20px;padding:0 5px 6px;font-size:9px;font-weight:900}
.fever div{flex:1;height:9px;overflow:hidden;background:#bedbe0;border:1.5px solid var(--ink);border-radius:20px}
.fever i{display:block;width:0;height:100%;background:linear-gradient(90deg,#ff7591,#a887e2);transition:width .2s}
.screen{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#c9f0f4}
canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.cover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;background:rgba(225,250,252,.88);backdrop-filter:blur(3px);text-align:center}
.cover.hidden{display:none}
.cover>i{display:grid;place-items:center;width:min(21vw,88px);height:min(21vw,88px);background:#ff8d9d;border:7px solid #fff;border-radius:50%;box-shadow:0 7px 0 rgba(49,71,99,.14)}
.cover>i:after{content:"• ᴗ •";color:#9e4055;font-size:clamp(20px,6vw,25px);letter-spacing:4px;white-space:nowrap}
.cover strong{font-size:clamp(20px,6vw,25px)}
.cover span{color:#637589;font-size:13px;font-weight:800}
.message{position:absolute;left:50%;bottom:calc(var(--safe-bottom) + 61px);z-index:3;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);min-height:28px;padding:6px 14px;display:grid;place-items:center;color:#695637;background:rgba(255,246,205,.92);border:1.5px solid #d3a641;border-radius:999px;font-size:11px;font-weight:900;pointer-events:none}
button{flex:0 0 auto;width:100%;height:48px;margin-top:7px;padding:0 20px;color:#fff;background:linear-gradient(#ff7e99,#f25477);border:2px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 #a83955;font:900 16px inherit;letter-spacing:.04em;cursor:pointer;touch-action:manipulation}
button:active{transform:translateY(3px);box-shadow:0 1px 0 #a83955}
@media(max-height:650px){.machine{padding-top:calc(var(--safe-top) + 4px);padding-bottom:calc(var(--safe-bottom) + 5px)}.stats div{height:40px}.stats b{font-size:17px}.fever{height:16px;padding-bottom:4px}button{height:42px;margin-top:5px}.message{bottom:calc(var(--safe-bottom) + 51px)}}
@media(min-width:521px){body{background:#dff8fb}.machine{box-shadow:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.cover>i{background:url("assets/characters/01.png?v=2") center/contain no-repeat;border:0;box-shadow:none}.cover>i:after{display:none}

.mode-buttons{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mode-buttons button{min-width:0;padding:0 8px;font-size:14px}
.mode-buttons #endlessMode{background:linear-gradient(#8d8be8,#6865cc);box-shadow:0 4px 0 #45429a}
.mode-buttons button.active{outline:3px solid rgba(255,255,255,.95);outline-offset:-5px}
.mode-buttons #endlessMode:active{box-shadow:0 1px 0 #45429a}


.sound-toggle{width:25px;min-width:25px;height:19px;margin:0;padding:0;color:#52677b;background:#fff;border:1.5px solid var(--ink);border-radius:50%;box-shadow:none;font:900 11px/1 sans-serif;letter-spacing:0}
.sound-toggle.playing{color:#fff;background:#7875d8}
.sound-toggle:active{transform:none;box-shadow:none}

/* Adventure, fever and tutorial */
.mode-buttons{grid-template-columns:1fr 1fr;gap:6px}
.mode-buttons #tutorialMode{grid-column:1/-1;background:linear-gradient(#55c4a1,#31a980);box-shadow:0 4px 0 #19745a}
.mode-buttons #tutorialMode:active{box-shadow:0 1px 0 #19745a}
.message{bottom:calc(var(--safe-bottom) + 112px)}
.message.tutorial{bottom:calc(var(--safe-bottom) + 118px);width:calc(100% - 28px);max-width:480px;min-height:58px;padding:12px 16px;border:3px solid #d3a641;border-radius:18px;font-size:clamp(19px,5.5vw,25px);line-height:1.35;text-align:center;background:rgba(255,251,222,.97)}
.fever-banner{position:absolute;top:12px;left:50%;z-index:4;display:flex;align-items:center;gap:10px;transform:translate(-50%,-140%);padding:8px 18px;color:#fff;background:linear-gradient(135deg,#ff4f9b,#8c62e8);border:3px solid #fff;border-radius:999px;box-shadow:0 5px 18px rgba(79,38,131,.35);opacity:0;pointer-events:none;transition:.25s}
.fever-banner.active{transform:translate(-50%,0);opacity:1;animation:feverPulse .8s ease-in-out infinite alternate}
.fever-banner strong{font-size:21px;letter-spacing:.08em}.fever-banner span{display:grid;place-items:center;width:29px;height:29px;color:#7a3a91;background:#fff;border-radius:50%;font-weight:900}
@keyframes feverPulse{to{filter:brightness(1.16);box-shadow:0 5px 25px rgba(255,62,164,.55)}}
.tutorial-return{display:none;width:min(76%,300px);height:48px;margin-top:12px;padding:0 12px;font-size:16px}
.tutorial-return.visible{display:block}
.cover span{max-width:90%;line-height:1.5}
@media(max-height:650px){.message{bottom:calc(var(--safe-bottom) + 98px)}.message.tutorial{bottom:calc(var(--safe-bottom) + 104px);min-height:48px;padding:8px 12px;font-size:18px}.mode-buttons{gap:4px}.mode-buttons button{margin-top:4px}}
/* Opening and adventure map */
.opening-visual{display:none}
.cover.opening{justify-content:center;gap:5px;padding:10px;background:radial-gradient(circle at 15% 18%,rgba(255,255,255,.95) 0 4px,transparent 5px) 0 0/34px 34px,linear-gradient(180deg,rgba(204,247,255,.97),rgba(255,225,240,.97))}
.cover.opening>i{display:none}
.cover.opening .opening-visual{display:flex;flex-direction:column;align-items:center;width:96%}
.opening-logo{position:relative;color:#fff;font-size:clamp(31px,10vw,46px);font-weight:1000;line-height:1;text-shadow:0 4px 0 #e75083,3px 0 0 #e75083,-3px 0 0 #e75083,0 -3px 0 #e75083;letter-spacing:.08em;transform:rotate(-2deg)}
.opening-logo:after{content:"★";position:absolute;right:-24px;top:-12px;color:#ffd85a;font-size:24px;text-shadow:0 2px 0 #d49b29}
.opening-subtitle{margin-top:7px;padding:4px 13px;color:#6e4b78;background:rgba(255,255,255,.86);border-radius:999px;font-size:12px;font-weight:900}
.opening-cast{display:flex;align-items:flex-end;justify-content:center;gap:clamp(4px,3vw,14px);width:100%;margin-top:5px}
.opening-character{position:relative;display:grid;place-items:center;width:min(35vw,145px);aspect-ratio:1;background:radial-gradient(circle at 36% 25%,#fff 0 7%,rgba(255,255,255,.88) 8% 34%,rgba(255,180,204,.88) 72%);border:5px solid #fff;border-radius:50%;box-shadow:0 8px 0 rgba(68,79,111,.16),0 0 0 3px #ff8fb2;animation:openingFloat 1.8s ease-in-out infinite alternate}
.opening-character.gin{background:radial-gradient(circle at 36% 25%,#fff 0 7%,rgba(255,255,255,.9) 8% 34%,rgba(178,211,255,.9) 72%);box-shadow:0 8px 0 rgba(68,79,111,.16),0 0 0 3px #8fb7ef;animation-delay:-.9s}
.opening-character img{width:91%;height:91%;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(77,58,45,.22))}
.opening-character b{position:absolute;bottom:-7px;padding:4px 12px;color:#fff;background:#ec668f;border:3px solid #fff;border-radius:999px;font-size:13px;white-space:nowrap}
.opening-character.gin b{background:#6d8fd2}
.cover.opening>#coverTitle{margin-top:8px;color:#4f5d78;font-size:clamp(17px,5vw,22px)}
.cover.opening>#coverText{color:#8b6072;font-size:12px}
@keyframes openingFloat{to{transform:translateY(-6px) rotate(2deg)}}

.cover.map-open{justify-content:center;padding:8px;background:linear-gradient(180deg,rgba(209,244,255,.97),rgba(255,241,196,.97))}
.cover.map-open>i,.cover.map-open>#coverTitle,.cover.map-open>#coverText,.cover.map-open>#tutorialReturn,.cover.map-open>.opening-visual{display:none}
.adventure-map{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:min(96%,405px);max-height:99%;padding:8px;background:rgba(255,255,255,.9);border:3px solid #fff;border-radius:22px;box-shadow:0 8px 24px rgba(50,72,96,.2)}
.adventure-map.hidden{display:none}
.map-heading{display:flex;align-items:center;justify-content:space-between;padding:0 5px}
.cover .map-heading strong{color:#3f5571;font-size:clamp(18px,5vw,23px)}
.cover .map-heading span{padding:4px 9px;color:#765320;background:#fff1b8;border-radius:999px;font-size:11px}
.map-track{position:relative;height:270px;border:4px solid #fff;border-radius:20px;background:linear-gradient(180deg,#a9e7ff 0 44%,#8edd9d 45% 100%);box-shadow:inset 0 -10px 22px rgba(52,139,85,.18);overflow:hidden}
.map-track:before{content:"";position:absolute;left:-12%;right:38%;bottom:-23%;height:62%;background:#74cf86;border-radius:50% 50% 0 0;transform:rotate(5deg)}
.map-track:after{content:"";position:absolute;left:37%;right:-15%;bottom:-31%;height:68%;background:#62be79;border-radius:50% 50% 0 0;transform:rotate(-6deg)}
.map-deco{position:absolute;z-index:1;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 1px rgba(45,82,62,.18));pointer-events:none}
.map-deco.cloud{font-size:27px;filter:drop-shadow(0 2px 0 rgba(255,255,255,.45))}
.map-deco.tree{font-size:25px}.map-deco.house{font-size:28px}.map-deco.flower{font-size:18px}
.map-dot{position:absolute;z-index:2;width:7px;height:7px;transform:translate(-50%,-50%);background:rgba(255,255,255,.94);border-radius:50%;box-shadow:0 1px 0 rgba(70,111,83,.18)}
.map-node{position:absolute;z-index:3;display:grid;place-items:center;width:39px;height:39px;transform:translate(-50%,-50%);color:#637589;background:#edf1f3;border:3px solid #fff;border-radius:50%;box-shadow:0 4px 0 rgba(62,88,104,.2);font-weight:900;line-height:1}
.map-node span{font-size:7px}.map-node b{font-size:13px}
.map-node.completed{color:#fff;background:#50bd86}
.map-node.completed:before{content:"✓";position:absolute;right:-5px;top:-6px;display:grid;place-items:center;width:16px;height:16px;color:#fff;background:#ff738d;border:2px solid #fff;border-radius:50%;font-size:9px}
.map-node.locked{filter:saturate(.4);opacity:.72}
.map-node.milestone{background:#ffd561;color:#805719;border-color:#fff8cf}
.map-node.current{color:#fff;background:#776fe0;outline:4px solid rgba(255,255,255,.78);animation:mapPulse .8s ease-in-out infinite alternate}
.map-node.current:after{content:"";position:absolute;left:50%;top:-26px;transform:translateX(-50%);width:33px;height:33px;background:url("assets/characters/01.png?v=2") center/contain no-repeat;filter:drop-shadow(0 2px 2px rgba(61,49,31,.3))}
@keyframes mapPulse{to{transform:translate(-50%,calc(-50% - 4px));box-shadow:0 7px 0 rgba(62,88,104,.2)}}
.adventure-map button{height:41px;margin:0;font-size:15px}
.adventure-map .map-home{height:34px;color:#53677c;background:#eef5f6;border-color:#91a4b5;box-shadow:0 3px 0 #91a4b5;font-size:12px}
@media(max-height:650px){
  .opening-logo{font-size:29px}.opening-subtitle{margin-top:4px;font-size:10px}.opening-character{width:min(27vw,94px);border-width:4px}.opening-character b{font-size:10px;padding:3px 8px}.cover.opening>#coverTitle{margin-top:5px;font-size:16px}
  .adventure-map{gap:3px;padding:5px}.map-track{height:205px}.map-node{width:32px;height:32px}.map-node b{font-size:11px}.map-node.current:after{top:-21px;width:27px;height:27px}.map-deco.cloud{font-size:21px}.map-deco.tree{font-size:19px}.adventure-map button{height:36px}.adventure-map .map-home{height:29px}
}

/* Opening mode buttons */
.cover.opening>#coverTitle,.cover.opening>#coverText{display:none}
.opening-cast{margin-bottom:27px}
.opening-character{height:auto;margin:0;padding:0;color:inherit;font:inherit;letter-spacing:0;cursor:pointer;touch-action:manipulation}
.opening-character b{bottom:-17px;min-width:104px;padding:8px 15px;font-size:15px;box-shadow:0 4px 0 rgba(114,44,68,.24)}
.opening-character b:before{content:"";position:absolute;left:50%;top:-10px;transform:translateX(-50%);border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:11px solid #ec668f}
.opening-character.gin b:before{border-bottom-color:#6d8fd2}
.opening-character:active{animation:none;transform:scale(.96);box-shadow:0 4px 0 rgba(68,79,111,.16),0 0 0 3px #ff8fb2}
.opening-character.gin:active{box-shadow:0 4px 0 rgba(68,79,111,.16),0 0 0 3px #8fb7ef}
.opening-character.active{filter:brightness(1.08)}
.opening-howto{width:min(78%,290px);height:43px;margin:0;color:#fff;background:linear-gradient(#55c4a1,#31a980);border-color:#315e65;box-shadow:0 4px 0 #19745a;font-size:15px}
.opening-howto:active{box-shadow:0 1px 0 #19745a}
.message,.message.tutorial{bottom:calc(var(--safe-bottom) + 9px)}
@media(max-height:650px){
  .opening-cast{margin-bottom:20px}.opening-character b{bottom:-13px;min-width:82px;padding:5px 8px;font-size:11px}.opening-character b:before{top:-8px;border-left-width:8px;border-right-width:8px;border-bottom-width:9px}.opening-howto{height:35px;font-size:13px}
  .message,.message.tutorial{bottom:calc(var(--safe-bottom) + 7px)}
}