:root{font-family:Inter,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#171717;background:#f5f7fb;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{min-width:320px;overflow-x:hidden}button,select{font:inherit}button{touch-action:manipulation}.app-shell{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:radial-gradient(circle at 18% 12%,rgba(255,207,51,.3),transparent 28%),linear-gradient(135deg,#f5f7fb,#fff 48%,#edf8fb)}.topbar,.controls,.game-layout{width:min(1120px,100%);margin:0 auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:6px 0 12px}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-mark{width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto;border:2px solid #171717;border-radius:8px;background:linear-gradient(135deg,#171717 0 50%,#ffcf33 50% 100%);color:#fff;font-weight:900;text-shadow:1px 1px 0 #171717}.eyebrow{margin:0;color:#5f6470;font-size:.72rem;font-weight:800;letter-spacing:0;text-transform:uppercase}h1,h2{margin:0;line-height:1.08;letter-spacing:0}h1{max-width:13em;font-size:clamp(1.1rem,5.8vw,2rem)}.stats{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px;font-size:.8rem;font-weight:800}.stats span{min-height:32px;display:inline-grid;place-items:center;padding:6px 9px;border:1px solid rgba(23,23,23,.12);border-radius:8px;background:#ffffffb8;box-shadow:0 8px 20px #1b263b12;white-space:nowrap}.game-layout{display:grid;grid-template-columns:minmax(190px,.62fr) minmax(0,1.38fr);align-items:center;gap:18px;padding:8px 0 88px}.mascot-zone{display:grid;align-content:center;justify-items:center;gap:10px;min-width:0}.mascot{width:min(270px,31vw);max-height:52svh;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(23,23,23,.2));transform-origin:50% 100%;animation:mascot-idle 2.8s ease-in-out infinite}[data-mood=blocked] .mascot{animation:mascot-no .32s ease-in-out 1}[data-mood=win] .mascot{animation:mascot-win .78s ease-in-out infinite alternate}.speech{width:min(280px,100%);margin:0;padding:10px 12px;border:2px solid #171717;border-radius:8px;background:#fff;box-shadow:5px 5px #ffcf33;font-size:.92rem;font-weight:800;line-height:1.42}.board-zone{min-width:0}.level-row{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:12px;font-size:.86rem;font-weight:800}.level-row select{min-height:40px;max-width:180px;border:2px solid #171717;border-radius:8px;padding:0 34px 0 10px;background:#fff;color:#171717}.board{--tube-width: clamp(52px, calc((100vw - 60px)/5) , 92px);display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--tube-width),1fr));gap:clamp(8px,2.2vw,16px);align-items:end;justify-items:center}.tube-button{width:min(100%,94px);min-width:52px;height:clamp(158px,31svh,246px);display:grid;place-items:center;padding:10px 5px;border:0;border-radius:8px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.tube-button:focus-visible{outline:3px solid #087f8f;outline-offset:2px}.tube-glass{position:relative;width:100%;height:100%;display:grid;align-items:end;padding:12px 8px 8px;border:3px solid rgba(35,45,63,.35);border-top:0;border-radius:0 0 30px 30px;background:linear-gradient(90deg,rgba(255,255,255,.55),transparent 32% 70%,rgba(255,255,255,.4)),#ffffff54;box-shadow:inset 0 0 0 2px #ffffff6b,0 14px 28px #1f2a4426;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.tube-glass:before{content:"";position:absolute;left:-8px;right:-8px;top:-6px;height:12px;border:3px solid rgba(35,45,63,.35);border-radius:999px;background:#ffffffbd}.tube-fill{height:100%;display:flex;flex-direction:column-reverse;justify-content:flex-start;overflow:hidden;border-radius:0 0 22px 22px}.liquid-slot{position:relative;min-height:0;flex:1 1 25%;margin-top:0;overflow:hidden;background:radial-gradient(ellipse at 22% 18%,rgba(255,255,255,.58),transparent 26%),linear-gradient(90deg,rgba(255,255,255,.22),transparent 38% 70%,rgba(0,0,0,.1)),var(--liquid);box-shadow:inset 0 1px #ffffff5c,inset 0 -8px 14px #0000001f}.liquid-slot:before{content:"";position:absolute;left:-10%;right:-10%;top:-10px;height:20px;border-radius:50%;background:radial-gradient(ellipse at 32% 34%,rgba(255,255,255,.82),transparent 22%),linear-gradient(180deg,#ffffff7a,#ffffff14);opacity:0;transform:rotate(-2deg)}.liquid-slot:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 34%,rgba(255,255,255,.2) 42%,transparent 54% 100%);mix-blend-mode:screen;opacity:.55}.liquid-slot.liquid-base{border-radius:0 0 18px 18px}.liquid-slot.liquid-surface{border-top-left-radius:46% 12px;border-top-right-radius:54% 10px;margin-top:2px}.liquid-slot.liquid-surface:before{opacity:1}.liquid-slot.joined-above{box-shadow:inset 0 1px #ffffff24,inset 0 -8px 14px #0000001a}.liquid-slot.empty{border:0;background:transparent;box-shadow:none}.liquid-slot.empty:before,.liquid-slot.empty:after{content:none}.tube-button.selected .tube-glass{transform:translateY(-12px);border-color:#171717;box-shadow:inset 0 0 0 2px #ffffff85,0 0 0 4px #ffcf33,0 18px 30px #1f2a4433}.tube-button.can-receive .tube-glass{border-color:#087f8f;box-shadow:inset 0 0 0 2px #ffffff85,0 0 0 4px #43d0c638,0 18px 30px #1f2a442e}.tube-button.invalid .tube-glass{animation:tube-shake .28s ease-in-out 1;border-color:#e23b42}.tube-button.moved .tube-glass{animation:tube-pop .28s ease-out 1}.controls{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:#f5f7fbe0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(23,23,23,.12)}.control-button{min-height:48px;border:2px solid #171717;border-radius:8px;padding:0 10px;background:#fff;color:#171717;font-weight:900;box-shadow:0 4px #171717;cursor:pointer}.control-button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px #171717}.control-button:disabled{cursor:not-allowed;opacity:.45}.control-button.primary{background:#ffcf33}.win-panel{position:fixed;inset:0;z-index:5;display:grid;place-items:end center;padding:18px 14px calc(80px + env(safe-area-inset-bottom));pointer-events:none}.win-content{width:min(680px,100%);display:grid;grid-template-columns:92px 1fr auto;align-items:center;gap:12px;padding:12px;border:2px solid #171717;border-radius:8px;background:#fffffff5;box-shadow:8px 8px #43d0c6;pointer-events:auto}.win-content h2{font-size:clamp(1rem,4.8vw,1.55rem)}.win-content p:last-child{margin:5px 0 0;color:#4c5260;font-weight:700}.win-mascot{width:86px;height:86px;object-fit:contain}@keyframes mascot-idle{0%,to{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}@keyframes mascot-no{0%,to{transform:translate(0)}33%{transform:translate(-8px)}66%{transform:translate(8px)}}@keyframes mascot-win{0%{transform:translateY(0) rotate(-2deg) scale(1)}to{transform:translateY(-10px) rotate(2deg) scale(1.03)}}@keyframes tube-shake{0%,to{transform:translate(0)}35%{transform:translate(-5px)}70%{transform:translate(5px)}}@keyframes tube-pop{0%{transform:scale(1)}50%{transform:scale(1.035)}to{transform:scale(1)}}@media(max-width:760px){.topbar{align-items:flex-start}.game-layout{grid-template-columns:1fr;align-items:start;gap:8px;padding-bottom:84px}.mascot-zone{grid-template-columns:82px 1fr;align-items:center;justify-items:start;min-height:92px}.mascot{width:86px;max-height:92px}.speech{width:100%;font-size:.86rem}.level-row{justify-content:space-between;margin-bottom:8px}.board{--tube-width: clamp(48px, 16.4vw, 70px);gap:7px}.tube-button{height:clamp(142px,28svh,188px);padding-inline:3px}.stats{max-width:142px;gap:4px}.stats span{min-height:28px;padding:4px 7px;font-size:.72rem}.win-content{grid-template-columns:62px 1fr}.win-content .control-button{grid-column:1 / -1}.win-mascot{width:60px;height:60px}}@media(max-width:390px){.app-shell{padding-inline:10px}.brand-mark{width:38px;height:38px;font-size:.82rem}h1{font-size:1rem}.board{--tube-width: clamp(44px, 15.6vw, 58px);gap:5px}.tube-glass{padding-inline:6px}.control-button{min-height:46px;padding-inline:5px;font-size:.82rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}