:root{font-family:Hiragino Sans,Noto Sans JP,Yu Gothic,sans-serif;color:#443b35;background:#79bfdf;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}body{background:#e7eee9}#app{display:flex;justify-content:center}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible,#canvas:focus-visible{outline:3px solid #fffaf0;outline-offset:4px}[hidden]{display:none!important}.app-shell{position:relative;width:min(100%,56.25dvh);height:100dvh;container:game / inline-size}.header{position:absolute;top:calc(env(safe-area-inset-top) + 93px);right:max(18px,env(safe-area-inset-right));z-index:4}.app-shell[data-mode=home] .header{top:max(18px,env(safe-area-inset-top))}.icon-button{width:32px;height:32px;border:2px solid #443b35;border-radius:50%;background:#fffaf0;font-size:19px;box-shadow:0 3px #443b3526}.game-card{position:relative;width:100%;height:100%;overflow:hidden;background:#84cdf1}.hud{position:absolute;z-index:3;top:max(15px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));height:58px;display:flex;align-items:center;gap:10px;pointer-events:none}.score-cell{min-width:90px;color:#fffaf0;text-shadow:0 2px 2px #407a98}.score-cell .hud-label{color:#fffaf0}.hud-label{display:block;font-size:8px;letter-spacing:1px;color:#88776a;font-weight:800}.hud strong{font-size:29px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.1}.timer{flex:1;text-align:center;color:#fffaf0;filter:drop-shadow(0 2px 0 #407a98)}.timer .hud-label{color:#fffaf0;font-size:9px}.timer strong{font-size:28px}.timer small{font-size:10px;margin-left:3px}.pause-button{pointer-events:auto;border:3px solid #443b35;border-radius:50%;background:#fffaf0;font-size:25px;font-weight:900;height:55px;width:55px;box-shadow:0 5px #443b3526}.playfield{position:relative;width:100%;height:100%;overflow:hidden}#canvas{position:absolute;inset:0;touch-action:none;outline-offset:-4px}#canvas canvas{display:block}.overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start;padding:max(110px,calc(env(safe-area-inset-top) + 100px)) 28px max(20px,env(safe-area-inset-bottom));overflow-y:auto;pointer-events:none}.overlay>div{pointer-events:auto;max-width:380px;flex-shrink:0}.app-shell[data-mode=home] .hud,.app-shell[data-mode=home] .combo{display:none}.app-shell[data-mode=home] .overlay{padding-top:clamp(85px,23dvh,200px)}.welcome{text-align:center;width:100%}.pill{display:inline-block;border:2px solid #443b35;background:#fffaf0;border-radius:20px;padding:7px 13px;font-size:10px;font-weight:700;letter-spacing:.4px;box-shadow:0 3px #443b3520}h2{font-size:20px;font-weight:900;margin:17px 0 12px}.title-logo{display:block;width:100%;height:auto;margin:0 auto 32px}.primary{width:100%;background:#fff1ca;border:3px solid #443b35;color:#443b35;border-radius:19px;padding:13px 18px;font-size:16px;font-weight:900;box-shadow:0 5px #443b3540;transition:transform .15s,background .15s}.primary:hover{background:#ffe6aa}.primary:active{transform:translateY(3px);box-shadow:0 2px #443b3540}.primary span{float:right;font-size:19px;line-height:1.1;font-weight:400}.panel{text-align:center;border-radius:22px;padding:23px 21px;background:#fffaf0f5;box-shadow:0 7px #443b3526;width:100%;border:3px solid #443b35}.panel h2{font-size:18px}.panel p{font-size:11px;line-height:1.9;color:#88776a}.panel .primary{margin-top:14px}.result{padding:20px 21px}.app-shell[data-mode=result] .hud{display:none}.app-shell[data-mode=result] .overlay{padding:max(20px,env(safe-area-inset-top)) 24px 0;overflow:hidden}.app-shell[data-mode=result] .result{max-height:60dvh;overflow-y:auto;padding:15px 18px}.result .pill{padding:5px 11px}.result .primary{margin-top:10px;padding:10px 15px}.result .secondary{margin-top:8px;padding:8px}.result .save-note{margin-top:8px}.result h2{margin:15px 0 0}.result-score{font-size:58px;font-weight:900;letter-spacing:-2px;color:#527f9b;line-height:1.3;font-variant-numeric:tabular-nums}.result-score small{font-size:14px;letter-spacing:0;margin-left:5px}.stats{display:flex;border-top:1px solid #dfd2bd;border-bottom:1px solid #dfd2bd;padding:10px 0}.stats>span{width:50%;font-size:9px;color:#88776a}.stats>span+span{border-left:1px solid #dfd2bd}.stats strong{display:block;font-size:22px;color:#443b35}.stats small{font-size:9px;margin-left:3px;font-weight:400}.secondary{width:100%;background:transparent;border:2px solid #8caaba;color:#527f9b;border-radius:12px;padding:10px;font-size:11px;font-weight:700;margin-top:12px}.save-note{display:block;font-size:9px;color:#88776a;line-height:1.8;margin-top:12px}.combo{position:absolute;z-index:2;top:100px;left:50%;transform:translate(-50%);background:#fffaf0ee;border:2px solid #443b35;border-radius:20px;padding:6px 13px;font-size:11px;font-weight:800;white-space:nowrap;pointer-events:none}.app-shell[data-mode=result] .header,.app-shell[data-mode=paused] .header{visibility:hidden}.toast{position:fixed;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);width:max-content;max-width:calc(100% - 30px);color:#fff;background:#443b35f0;border-radius:12px;padding:13px 19px;font-size:12px;box-shadow:0 5px 20px #443b3522;z-index:5}@container game (max-width: 360px){.overlay{padding:102px 22px 15px}.welcome h2{margin:12px 0 8px;font-size:24px}.welcome h2 span{font-size:clamp(22px,9cqw,32px)}.welcome p{margin:10px 0 15px;font-size:11px}.primary{padding:10px 14px}.welcome>small{margin-top:12px}.hud{left:12px;right:12px}.score-cell{min-width:75px}.pause-button{width:48px;height:48px}.panel{padding:14px 17px}.result-score{font-size:46px}.result h2{font-size:16px}.result .save-note{font-size:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}@media(max-height:500px){.overlay{align-items:center;padding-top:max(20px,env(safe-area-inset-top))}.app-shell[data-mode=home] .overlay{padding-top:max(20px,env(safe-area-inset-top))}.welcome h2{margin:8px 0;line-height:1.25;font-size:22px}.welcome h2 span{font-size:clamp(22px,9cqw,32px)}.welcome p{margin:8px 0 12px}}@container game (max-width: 280px){.hud{gap:4px}.score-cell{min-width:60px}.hud strong,.timer strong{font-size:22px}.pause-button{width:36px;height:36px;flex-shrink:0;font-size:20px}.pill{font-size:8px;padding:5px 8px}.primary{font-size:12px;padding:8px}.app-shell[data-mode=result] .overlay{padding-left:12px;padding-right:12px}.app-shell[data-mode=result] .result{padding:10px}}.icon-button{display:grid;place-items:center;padding:6px}.icon-button svg{width:100%;height:100%}.app-shell[data-mode=paused] .overlay{background:#102a3d66;padding:0;align-items:center;overflow:hidden;pointer-events:auto}.pause-label{background:none;border:0;color:#fffaf0;font-size:clamp(28px,10cqw,44px);font-weight:900;letter-spacing:5px;padding:20px;text-shadow:0 3px 6px #102a3d55}.pause-label:focus-visible{outline:none}.app-shell[data-mode=paused] .hud,.app-shell[data-mode=paused] .combo{visibility:hidden}.result{width:100%;text-align:center}.app-shell[data-mode=result] .overlay{padding-top:clamp(70px,19dvh,170px)}.result-score{color:#fffaf0;text-shadow:0 3px 0 #443b35,2px 0 0 #443b35,-2px 0 0 #443b35;margin-bottom:20px}