*{box-sizing:border-box} :root{font-family:ui-rounded,"Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#264764;background:#edf8ff;font-synthesis:none}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 0% 5%,#d4f4f1,transparent 48%),radial-gradient(ellipse at 100% 85%,#d6eaff,transparent 48%),#edf8ff}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible,input:focus-visible{outline:3px solid #3069bb;outline-offset:4px}button:disabled{cursor:default;opacity:.48}[hidden]{display:none!important}.game{max-width:680px;margin:auto;padding:18px 20px max(14px,env(safe-area-inset-bottom))}.topbar{display:flex;align-items:center;justify-content:space-between;max-width:460px;margin:0 auto 14px}h1{font-size:25px;line-height:1.1;margin:0;display:flex;align-items:center;gap:10px;letter-spacing:.04em}h1 small{display:block;font-size:14px;letter-spacing:.2em;margin-bottom:3px}.brand-mark{display:grid;place-items:center;width:45px;height:45px;background:#38b6b2;border-radius:15px;color:#fff4bc;font-size:31px;box-shadow:0 4px 0 #299b9b;transform:rotate(-7deg)}.top-actions{display:flex;gap:8px}.icon-button{width:50px;min-height:49px;border:1px solid #c8dce9;border-radius:16px;background:#fff9;color:#355d79;font-size:24px;font-weight:800;display:grid;place-items:center;line-height:1}.icon-button span{font-size:12px;font-weight:700}.icon-button[aria-pressed=true]{background:#fff2bb;border-color:#edcc62}.mode-line{display:flex;justify-content:space-between;align-items:center;gap:10px;max-width:460px;margin:0 auto 12px;font-size:12px;font-weight:700;color:#59778b}.mode-line #mode-label{background:#d5f0e9;color:#266957;padding:6px 12px;border-radius:20px;font-size:13px}.play-stage{display:flex;justify-content:center;align-items:stretch;gap:18px}.board-wrap{position:relative;height:min(52svh,504px);min-height:240px;aspect-ratio:10/18;border:6px solid #fff;border-radius:20px;background:#dcecf5;box-shadow:0 8px 0 #c3d9e6,0 12px 25px #416a8310;overflow:hidden}#board{display:block;width:100%;height:100%;touch-action:none}.side{width:94px;display:flex;flex-direction:column;align-items:stretch;gap:16px;padding-top:4px}.score-card,.next-card{border:1px solid #d1e1ed;background:#ffffffbd;border-radius:20px;padding:12px 5px;text-align:center;box-shadow:0 4px 0 #dbe9f2}.side span{display:block;font-size:14px;font-weight:700}.score-card strong{display:block;font-size:39px;line-height:1.25;color:#285d77;font-weight:900}.score-card span:last-child{font-size:12px}.next-card canvas{width:100%;height:auto;display:block;margin-top:8px}.stars{text-align:center;font-size:28px;color:#d39616;line-height:1.3}.buddy{width:112px;align-self:center;margin-top:auto;border-radius:27px;mix-blend-mode:multiply}.hint{text-align:center;margin:18px 0 12px;font-size:14px;font-weight:700;min-height:20px;color:#486e84}.controls{max-width:400px;margin:auto;user-select:none;-webkit-user-select:none}.move-controls{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:12px}.control{border:0;border-radius:18px;min-height:64px;color:#285477;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .08s,box-shadow .08s}.control b{font-size:24px;line-height:1}.move{background:#fff;box-shadow:0 5px 0 #bdd6e7}.rotate{background:#b5e9e4;box-shadow:0 5px 0 #74c8c2;color:#1a6264}.rotate b{font-size:36px}.place{width:100%;margin-top:15px;background:#ffdb74;color:#6e5119;box-shadow:0 5px 0 #dfb449;min-height:57px;font-size:19px;letter-spacing:.06em}.control:active,.control.held{transform:translateY(4px);box-shadow:0 1px 0 #adc7d6}.keyboard-help{text-align:center;font-size:12px;margin:20px 0 10px;color:#638198}.parent-link{display:block;margin:16px auto 0;border:0;background:transparent;color:#5a7a90;font-size:12px;text-decoration:underline;text-underline-offset:3px;padding:8px;min-height:36px}.menu{border:0;border-radius:30px;padding:27px;max-width:390px;width:calc(100% - 32px);max-height:calc(100svh - 32px);color:#264764;background:#fff;box-shadow:0 18px 80px #28516a35;text-align:center;overflow:auto}.menu::backdrop{background:#37668140;backdrop-filter:blur(5px)}.welcome-buddy{width:164px;height:116px;object-fit:cover;object-position:center;border-radius:25px;mix-blend-mode:multiply}.eyebrow{color:#408783;font-size:13px;font-weight:800;letter-spacing:.12em;margin:10px 0}h2{font-size:25px;margin:10px 0 9px;letter-spacing:.02em}.menu p{line-height:1.6}.menu #menu-message{font-size:14px;margin-top:0}fieldset{border:0;padding:0;margin:20px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}legend{font-size:13px;font-weight:700;margin-bottom:10px;width:100%;color:#627e92}.mode-option{position:relative;display:block;text-align:left;border-radius:16px;padding:12px 9px;background:#f0f6fa;border:2px solid transparent;cursor:pointer}.mode-option:has(input:checked){border-color:#42aaa1;background:#e8f7f3}.mode-option input{position:absolute;right:8px;top:8px;width:15px;height:15px;accent-color:#278c86}.mode-option strong{display:block;font-size:16px;margin:10px 0 5px}.mode-option small{font-size:12px;white-space:nowrap}.primary{display:block;width:100%;border:0;border-radius:17px;min-height:54px;padding:12px;color:#fff;background:#278e89;font-weight:800;font-size:18px;box-shadow:0 4px 0 #1d7370;margin:10px 0 7px}.primary.secondary{background:#e9f1f7;color:#426781;box-shadow:0 4px 0 #d1e0ec;font-size:15px}.best{font-size:13px;color:#708497;margin-bottom:0}.instructions{padding-left:22px;text-align:left;line-height:2.2;font-size:14px}h3{font-size:16px;margin-top:22px}.parent-copy{text-align:left;font-size:14px;color:#587386}.celebration{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;pointer-events:none;font-size:24px;font-weight:900;color:#835508;text-align:center;text-shadow:0 2px 0 white;opacity:0}.celebration.show{animation:celebrate 1.35s ease-out}.celebration span{background:#fff4cbed;border-radius:22px;padding:20px 10px;box-shadow:0 6px 30px #75681d15}@keyframes celebrate{0%{opacity:0;transform:scale(.65)}15%,80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-20px)}}@media(min-width:700px){.game{padding-top:30px}.topbar{max-width:470px}.play-stage{gap:24px}.side{width:116px}.buddy{width:142px}.mode-line{max-width:470px}.controls{max-width:438px}.welcome-buddy{width:190px;height:136px}.menu{max-width:410px;padding:30px}.hint{margin-top:21px}}@media(max-width:400px){.game{padding:12px 14px max(10px,env(safe-area-inset-bottom))}.topbar{margin-bottom:10px}.mode-line{margin-bottom:10px;gap:4px}.mode-line #offline-status{font-size:11px}.play-stage{gap:14px}.side{width:80px;gap:12px}.buddy{width:93px}.board-wrap{border-width:5px;border-radius:17px}.control{gap:7px;font-size:14px;min-height:57px}.control b{font-size:21px}.rotate b{font-size:31px}.place{min-height:51px;font-size:18px}.hint{margin-top:15px;font-size:13px}.keyboard-help{display:none}.parent-link{margin-top:11px}.score-card strong{font-size:31px}.stars{font-size:23px}}@media(max-height:730px){.board-wrap{height:calc(100svh - 295px);min-height:210px}.topbar{margin-bottom:9px}.hint{margin:14px 0 9px}.side{gap:10px}.buddy{display:none}.control{min-height:53px}.place{min-height:48px;margin-top:12px}.parent-link{margin-top:9px}.keyboard-help{display:none}.welcome-buddy{width:135px;height:83px}.menu{padding:20px 24px}.stars{font-size:21px}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}
@media(max-height:600px){.stars br{display:none}.stars{letter-spacing:0;line-height:1}.side{gap:10px}.score-card,.next-card{padding:9px 5px}}
/* The controls own fixed rows; only the playfield consumes remaining height. */
html{height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;min-height:0;height:100%;overflow:hidden;overscroll-behavior:none}
body .game{position:absolute;top:var(--app-top,0px);left:50%;transform:translateX(-50%);width:min(100%,560px);height:var(--app-height,100dvh);max-width:none;margin:0;padding:max(6px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:grid;grid-template-rows:44px 24px minmax(0,1fr) 20px 114px 24px;gap:6px;overflow:hidden;touch-action:pinch-zoom}
body .topbar{width:100%;max-width:460px;margin:0 auto;min-height:0;gap:10px}
body h1{font-size:18px;gap:8px;letter-spacing:0;white-space:nowrap}
body h1 small{display:inline;font-size:14px;letter-spacing:0;margin:0 5px 0 0}
body .brand-mark{width:30px;height:30px;font-size:23px;border-radius:10px;box-shadow:0 3px 0 #299b9b}
body .icon-button{width:44px;min-height:40px;height:40px;font-size:20px;border-radius:13px}
body .icon-button span{font-size:12px}
body .top-actions{gap:6px}
body .mode-line{width:100%;max-width:460px;margin:0 auto;gap:8px;font-size:12px;min-height:0}
body .mode-line #mode-label{padding:3px 10px;font-size:13px;white-space:nowrap}
body .mode-line #offline-status{font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body .play-stage{width:100%;max-width:460px;min-height:0;height:100%;margin:0 auto;align-items:center;gap:12px;overflow:hidden;padding:0 0 5px}
body .board-wrap{height:100%;min-height:0;max-height:none;aspect-ratio:auto;border:5px solid white;border-radius:16px;flex:none;box-shadow:0 5px 0 #c3d9e6}
body .side{width:80px;flex:0 0 80px;height:100%;max-height:504px;min-height:0;gap:8px;padding-top:2px;overflow:hidden}
body .score-card,body .next-card{flex:none;padding:7px 4px;border-radius:15px;box-shadow:0 3px 0 #dbe9f2}
body .score-card strong{font-size:29px;line-height:1.1}
body .side span{font-size:13px}
body .score-card span:last-child{font-size:12px}
body .next-card canvas{height:58px;width:70px;margin:3px auto 0;object-fit:contain}
body .stars{font-size:23px;line-height:1.2;letter-spacing:0;flex:none}
body .stars br{display:none}
body .buddy{display:block;width:80px;height:80px;flex:none;margin:0 auto;margin-top:auto;object-fit:contain;border-radius:20px}
body .tight .buddy{display:none}
body .tiny .stars{display:none}
body .tiny .score-card{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;align-items:center;padding:3px}
body .tiny .score-card strong{font-size:22px}
body .tiny .next-card{padding:3px}
body .tiny .next-card canvas{height:35px;margin:0 auto}
body .hint{margin:0;min-height:0;font-size:13px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .controls{width:100%;max-width:420px;margin:0 auto;display:grid;grid-template-rows:52px 50px;gap:8px;padding-bottom:4px;min-height:0}
body .move-controls{gap:10px;min-height:0}
body .control{height:52px;min-height:0;font-size:15px;gap:8px;border-radius:15px}
body .control b{font-size:23px}
body .rotate b{font-size:31px}
body .place{height:50px;min-height:0;margin:0;font-size:18px}
body .keyboard-help{display:none}
body .parent-link{margin:0 auto;padding:0 6px;min-height:24px;font-size:12px;line-height:24px}
body .menu{max-height:calc(var(--app-height,100dvh) - 24px);padding:20px;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
body .welcome-buddy{width:150px;height:95px}
body fieldset{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:16px 0}
body .mode-option{padding:9px 4px;text-align:center}
body .mode-option strong{font-size:14px;margin:15px 0 5px;white-space:nowrap}
body .mode-option small{font-size:12px;white-space:nowrap}
body .mode-option input{right:6px;top:6px}
@media(max-width:350px){body h1{font-size:16px}body h1 small{font-size:12px;margin-right:2px}body .brand-mark{display:none}body .mode-line #offline-status{font-size:11px}body .side{width:70px;flex-basis:70px}body .next-card canvas{width:60px}body .stars{font-size:20px}body .mode-option strong{font-size:13px}}
@media(max-height:500px){body .game{grid-template-rows:40px 22px minmax(0,1fr) 18px 102px 20px;gap:4px}body .controls{grid-template-rows:46px 46px;gap:6px}body .control,body .place{height:46px}body .hint{font-size:12px;line-height:18px}body .parent-link{min-height:20px;line-height:20px}body .welcome-buddy{display:none}body .menu{padding:16px}body .menu h2{font-size:21px}body .menu .eyebrow{margin:5px 0}body .menu fieldset{margin:10px 0}}

body .icon-button{padding:2px}body .icon-button span{white-space:nowrap}