body{background:linear-gradient(#55bdf5 0%,#a7e5ff 44%,#effbff 75%,#fff)}
body:before{content:"";position:fixed;inset:auto 0 0;height:34%;background:linear-gradient(165deg,transparent 0 12%,#d9f6ff 13% 26%,#fff 27%);z-index:-1}
.brand img,.game-title img{object-fit:cover;object-position:center;width:38px;height:38px;border-radius:50%;border:2px solid white}.brand>span{display:none}.brand h1{font-size:18px;color:#14518a}.official-hero{position:relative;height:220px;display:flex;align-items:flex-end;justify-content:center}.official-hero>img{height:215px;max-width:70%;object-fit:cover;object-position:left center;border-radius:35px;filter:drop-shadow(0 8px 9px #1b659344)}.speech{position:absolute;right:2%;top:12px;background:white;border:3px solid #9edcff;border-radius:50%;padding:17px 16px;color:#17558b;font-weight:900;transform:rotate(-5deg);box-shadow:0 5px 12px #1d6b9133}.speech:after{content:"";position:absolute;left:10px;bottom:-12px;border:12px solid transparent;border-top-color:#fff}.speech b{color:#ff7c98}.block-icon{font-size:34px!important;color:#45aaf0;text-shadow:2px 2px #fff}.menu-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}.menu-nav button{border:2px solid white;border-radius:15px;background:#ffffffbb;color:#17609b;font-size:20px;padding:8px;box-shadow:0 4px #71b7db}.menu-nav small{display:block;font-size:9px}.safe{margin-top:9px!important}.game-title div{display:flex;align-items:center;gap:6px}.overlay-character{width:105px;height:135px;object-fit:cover;object-position:center;border-radius:25px;mix-blend-mode:multiply}.overlay>span{display:none}.speed-choice{display:flex;gap:4px;margin:4px 0 10px}.speed-choice button{min-width:0;min-height:34px!important;padding:4px 8px;font-size:11px!important;background:#eaf8ff!important;color:#23699b!important;box-shadow:0 3px #73b8d7!important}.speed-choice button.chosen{background:#4faef0!important;color:white!important}.best-mini,.speed-meter{background:#ffffffdd;border:2px solid white;border-radius:12px;text-align:center;padding:5px;box-shadow:0 4px #5ca9c0}.best-mini small,.speed-meter small{display:block;font-size:8px}.best-mini b{font-size:14px}.speed-meter i{display:block;height:7px;width:30%;margin:4px auto;background:linear-gradient(90deg,#65c9f4,#ffbd4b,#ff716b);border-radius:5px;transition:.3s}.cheer{padding:2px!important;overflow:hidden}.cheer img{display:block;width:100%;height:83px;object-fit:cover;object-position:center;border-radius:10px;mix-blend-mode:multiply}.cheer small{margin-top:-2px}.puzzle-reaction{height:55px;display:flex;align-items:center;justify-content:center;gap:8px;margin:-3px 0 4px}.puzzle-reaction img{width:55px;height:55px;object-fit:cover;border-radius:50%;mix-blend-mode:multiply}.puzzle-reaction span{background:white;border-radius:18px;padding:7px 11px;color:#1e6699;font-size:10px;font-weight:900}.keyboard-controls{grid-template-columns:1fr!important;grid-template-areas:"arrows" "space";gap:7px!important;max-width:360px!important}.right-hand{grid-area:arrows}.left-hand{grid-area:space}.arrow-keys{max-width:245px;margin:auto}.space-key{height:54px!important;width:100%!important}.board{border-color:#d9f8ff!important;box-shadow:0 0 0 3px #70c9f0,0 8px #176587!important}
@media(max-height:740px){.official-hero{height:180px}.official-hero>img{height:175px}.speech{padding:11px;font-size:11px}.menu-nav{margin-top:9px}.keyboard-controls{grid-template-columns:minmax(110px,1fr) minmax(165px,1.2fr)!important;grid-template-areas:"space arrows";gap:10px!important}.space-key{height:55px!important}.overlay-character{width:80px;height:92px}.puzzle-reaction{display:none}}
@media(max-width:360px){.brand h1{font-size:15px}.official-hero>img{max-width:76%}.speech{right:0;font-size:10px}.game-title img{width:31px;height:31px}}
.official-hero>img{width:150px;height:215px;max-width:none;object-fit:cover;object-position:right center}.modes button{grid-template-columns:88px 1fr;padding-left:10px}.modes .mode-scene{grid-row:span 2;position:relative;width:82px;height:82px;border:3px solid #fff;border-radius:18px;background:linear-gradient(#dff7ff,#9eddf6);box-shadow:inset 0 -5px #55a9d2,0 4px #297ca955;overflow:hidden}.mode-scene .mini-grid{position:absolute;display:block;background-color:#163f61;background-image:linear-gradient(#ffffff17 1px,transparent 1px),linear-gradient(90deg,#ffffff17 1px,transparent 1px);background-size:11px 11px;border:3px solid #dff8ff;border-radius:8px;box-shadow:0 2px #277aa1}.classic-scene .mini-grid{left:15px;top:5px;width:52px;height:70px}.mode-scene em{position:absolute;z-index:4;font-style:normal;font-weight:900;color:#fff;text-shadow:0 2px #236c9c}.classic-scene em{right:5px;top:25px;font-size:22px;animation:fallArrow 1.1s ease-in-out infinite}.classic-scene .mini-grid:before{content:"";position:absolute;left:20px;top:7px;width:9px;height:9px;border-radius:3px;background:linear-gradient(145deg,#fff8,#a969e8 35%);box-shadow:0 10px #a969e8,0 20px #a969e8,10px 20px #a969e8}.classic-scene .mini-grid:after{content:"";position:absolute;left:3px;bottom:3px;width:9px;height:9px;border-radius:3px;background:#56c9ec;box-shadow:10px 0 #56c9ec,20px 0 #ff8277,30px 0 #ff8277,40px 0 #ffd958,0 -10px #66d280,10px -10px #66d280,30px -10px #bc72e6,40px -10px #bc72e6,20px -20px #ff9b50,30px -20px #ff9b50}.puzzle-scene{background:linear-gradient(#fff8c8,#f3c75e)!important;box-shadow:inset 0 -5px #cc983a,0 4px #a8792955!important}.puzzle-scene .mini-grid{left:12px;top:4px;width:58px;height:58px}.puzzle-scene .mini-grid:before{content:"";position:absolute;left:3px;top:3px;width:9px;height:9px;border-radius:3px;background:#56c9ec;box-shadow:0 10px #56c9ec,40px 0 #ff8277,40px 10px #ff8277,0 40px #66d280,10px 40px #66d280,30px 40px #ffd958,40px 40px #ffd958,20px 30px #bc72e6}.puzzle-scene .drag-piece{position:absolute;z-index:3;left:31px;bottom:5px;width:10px;height:10px;border-radius:3px;background:#b668e5;box-shadow:10px 0 #b668e5,20px 0 #b668e5}.puzzle-scene em{left:9px;bottom:2px;font-size:20px;color:#8650b0;text-shadow:0 1px #fff;animation:placeArrow 1.1s ease-in-out infinite}@keyframes fallArrow{50%{transform:translateY(8px)}}@keyframes placeArrow{50%{transform:translateY(-7px)}}
@media(max-height:740px){.official-hero>img{width:122px;height:175px}}@media(max-width:360px){.official-hero>img{width:132px;max-width:none}.modes button{grid-template-columns:80px 1fr}.modes .mode-scene{width:76px;height:76px}}
@media(max-height:760px){.board{width:min(calc(100vw - 105px),220px)!important}.classic aside{width:64px}.keyboard-controls{margin-top:7px!important}.restart{margin-top:3px!important}}
.puzzle-scene .mini-grid{height:50px}.puzzle-scene .mini-grid:before{box-shadow:0 10px #56c9ec,40px 0 #ff8277,40px 10px #ff8277,0 30px #66d280,10px 30px #66d280,30px 30px #ffd958,40px 30px #ffd958,20px 20px #bc72e6}.puzzle-scene .drag-piece{bottom:4px}.puzzle-scene em{left:7px;bottom:3px}


/* Stable, mobile-first main menu. Kept fully scoped so game screens are unchanged. */
#app:has(#menu.active){width:min(100%,460px);padding:8px 14px 14px}
#app:has(#menu.active)>header{height:64px;gap:10px;border-bottom:1px solid #ffffff70}
#app:has(#menu.active)>header #homeBtn{display:none}
#app:has(#menu.active) .brand{min-width:0;flex:1;text-align:left}
#app:has(#menu.active) .brand img{flex:0 0 auto;width:42px;height:42px;object-fit:contain;object-position:center;border:2px solid #fff;background:#ffffff80;box-shadow:0 3px 9px #1a6f9d35}
#app:has(#menu.active) .brand>div{min-width:0}
#app:has(#menu.active) .brand small{font-size:10px;line-height:1.15;color:#337899}
#app:has(#menu.active) .brand h1{overflow:hidden;margin:2px 0 0;font-size:17px;line-height:1.2;white-space:nowrap;text-overflow:ellipsis;color:#164f80}
#app:has(#menu.active) #soundBtn{flex:0 0 auto;width:44px;height:44px;border-radius:15px;background:#f7fdff;color:#1b6598;box-shadow:0 4px 0 #76b9d8,0 7px 15px #1b63842b}

#menu.active{padding-top:0;text-align:center}
#menu .official-hero{height:220px;margin:4px 0 6px;align-items:flex-end;overflow:visible}
#menu .official-hero>img{position:relative;z-index:1;width:172px;height:210px;max-width:none;object-fit:contain;object-position:center;mix-blend-mode:normal;border-radius:0;filter:drop-shadow(0 10px 8px #17648838);transform:translateX(-30px)}
#menu .official-hero:before{content:"";position:absolute;z-index:0;left:50%;bottom:4px;width:220px;height:43px;border-radius:50%;background:#f8fdffb8;box-shadow:inset 0 7px 10px #b9e7f688;transform:translateX(-58%)}
#menu .speech{z-index:3;top:28px;right:2px;min-width:158px;padding:15px 13px;border:3px solid #b5e6f8;border-radius:52% 48% 50% 46%;background:#fff;color:#195888;font-size:13px;line-height:1.4;text-align:center;transform:rotate(-3deg);box-shadow:0 6px 14px #1d6b9129}
#menu .speech:after{left:18px;bottom:-14px;border-width:13px 18px 0 0;border-color:#fff transparent transparent transparent;transform:rotate(12deg)}
#menu>h2{margin:3px 0 10px;font-size:24px;line-height:1.25;letter-spacing:-.5px;color:#123e60;text-shadow:0 2px #fff}

#menu .modes{gap:11px}
#menu .modes button{position:relative;min-height:96px;grid-template-columns:80px minmax(0,1fr) 34px;grid-template-rows:1fr 1fr;column-gap:11px;padding:9px 12px 9px 9px;border:3px solid #fff;border-radius:23px;background:#effaff;color:#123e60;box-shadow:0 6px 0 #73b8da,0 10px 20px #245f7c20}
#menu .modes button:nth-child(2){background:#fff7d9;box-shadow:0 6px 0 #d9b85d,0 10px 20px #775f2420}
#menu .modes button:after{content:"›";grid-column:3;grid-row:1/3;align-self:center;justify-self:center;width:30px;height:30px;border-radius:50%;background:#fff;color:#2775a4;font-size:28px;line-height:27px;text-align:center;box-shadow:0 3px 0 #b6dce9}
#menu .modes .mode-scene{grid-column:1;grid-row:1/3;width:76px;height:76px;align-self:center;border-radius:17px}
#menu .modes strong{grid-column:2;grid-row:1;align-self:end;font-size:17px;line-height:1.25}
#menu .modes small{grid-column:2;grid-row:2;align-self:start;margin-top:3px;font-size:11px;line-height:1.35;color:#557d94}

#menu .menu-nav{gap:8px;margin-top:14px}
#menu .menu-nav button{min-width:0;min-height:68px;padding:8px 3px 7px;border:2px solid #fff;border-radius:18px;background:#f9fdff;color:#26698e;font-family:inherit;font-size:25px;line-height:1;box-shadow:0 5px 0 #89c3dc,0 8px 15px #235f7920}
#menu .menu-nav button:active,#menu .modes button:active{transform:translateY(3px);box-shadow:0 2px 0 #75b3cf}
#menu .menu-nav small{margin-top:6px;font-size:11px;line-height:1.1;color:#235d80}
#menu .safe{margin-top:12px!important;padding:0;background:transparent;color:#47778f;font-size:10px;line-height:1.4}

@media(max-height:740px){
  #menu .official-hero{height:178px;margin-top:0}
  #menu .official-hero>img{width:145px;height:174px;transform:translateX(-27px)}
  #menu .official-hero:before{width:185px;height:34px}
  #menu .speech{top:18px;min-width:145px;padding:11px 10px;font-size:11px}
  #menu>h2{margin-bottom:8px;font-size:21px}
  #menu .modes button{min-height:86px;grid-template-columns:72px minmax(0,1fr) 30px;padding-block:7px}
  #menu .modes .mode-scene{width:68px;height:68px;transform:scale(.9)}
  #menu .menu-nav{margin-top:11px}
  #menu .menu-nav button{min-height:61px}
}
@media(max-width:350px){
  #app:has(#menu.active){padding-inline:8px}
  #app:has(#menu.active) .brand img{width:38px;height:38px}
  #app:has(#menu.active) .brand small{font-size:8px}
  #app:has(#menu.active) .brand h1{font-size:14px}
  #app:has(#menu.active) #soundBtn{width:40px;height:40px}
  #menu .official-hero>img{width:150px;transform:translateX(-27px)}
  #menu .speech{right:0;min-width:140px;font-size:10px}
  #menu .modes button{grid-template-columns:70px minmax(0,1fr) 27px;column-gap:7px;padding-inline:7px}
  #menu .modes .mode-scene{width:66px;height:66px}
  #menu .modes strong{font-size:15px}
  #menu .modes small{font-size:10px}
  #menu .modes button:after{width:27px;height:27px;font-size:25px;line-height:24px}
}