:root{--navy:#103553;--blue:#1479b6;--coral:#ff7064;--shadow:#135b8130}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;overscroll-behavior:none}body{font-family:"Arial Rounded MT Bold","Malgun Gothic",system-ui,sans-serif;color:var(--navy);background:linear-gradient(#75dcf4 0 45%,#d9f7fb 70%,#fff);user-select:none}.snow{position:fixed;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(#fff 0 2px,transparent 3px),radial-gradient(#fff 0 3px,transparent 4px);background-size:70px 70px,117px 117px;animation:snow 14s linear infinite}@keyframes snow{to{background-position:0 280px,0 350px}}#app{position:relative;width:min(100%,560px);min-height:100dvh;margin:auto;padding:max(8px,env(safe-area-inset-top)) 10px max(12px,env(safe-area-inset-bottom))}header{height:58px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:7px}.brand>span{font-size:34px;filter:drop-shadow(0 3px #fff)}.brand small{display:block;color:#287393;font-size:8px}.brand h1{margin:1px 0;font-size:20px}.icon-btn{width:42px;height:42px;border:2px solid #fff;border-radius:14px;background:#ffffffdd;color:var(--blue);font-size:22px;font-weight:900;box-shadow:0 4px #2591b45c}.hidden{visibility:hidden!important}.screen{display:none}.screen.active{display:block}#menu{text-align:center;padding-top:min(8vh,55px)}.welcome{position:relative;height:155px;font-size:128px;line-height:1;filter:drop-shadow(0 10px #3c92ae44)}.welcome i,.welcome b{position:absolute;font-style:normal;font-size:29px;animation:float 2s infinite}.welcome i{left:14%;top:8px}.welcome b{right:12%;bottom:12px}@keyframes float{50%{transform:translateY(-9px) rotate(8deg)}}#menu h2{margin:2px 0 4px;font-size:26px}#menu>p{margin:0 0 20px;color:#387493}.modes{display:grid;gap:13px}.modes button{min-height:91px;border:3px solid #fff;border-radius:22px;background:linear-gradient(135deg,#fff,#dff9ff);color:var(--navy);display:grid;grid-template-columns:62px 1fr;text-align:left;align-items:center;padding:10px 18px;box-shadow:0 7px #2092ba70,0 12px 24px var(--shadow)}.modes button:nth-child(2){background:linear-gradient(135deg,#fffbee,#ffeaa5);box-shadow:0 7px #d5a73880}.modes span{grid-row:span 2;font-size:42px;text-align:center}.modes strong{font-size:20px;align-self:end}.modes small{font-size:11px;color:#548198;align-self:start}.safe{display:inline-block;margin-top:22px;padding:8px 13px;border-radius:20px;background:#ffffff99;font-size:10px}.game-title{display:flex;justify-content:space-between;align-items:center;margin:2px 0 7px}.game-title div{font-size:24px}.game-title b{font-size:17px}.pause,.restart{border:0;border-radius:12px;background:#fff;color:#1a668d;font-weight:900;min-height:38px;padding:0 13px;box-shadow:0 3px #7db8ca}.scores{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}.scores div{background:#ffffffd9;border:2px solid #fff;border-radius:13px;text-align:center;padding:5px;box-shadow:0 4px 10px var(--shadow)}.scores small{display:block;color:#397792;font-size:9px}.scores b{font-size:17px}.classic{display:flex;justify-content:center;gap:7px}.board{position:relative;border:5px solid #eaffff;border-radius:15px;background:#0b2941;box-shadow:0 7px #176587;width:min(calc(100vw - 106px),310px)}.board>canvas{display:block;width:100%;height:auto;border-radius:9px}.classic aside{width:72px;display:flex;flex-direction:column;gap:8px}.next,.cheer{background:#ffffffdd;border:2px solid #fff;border-radius:13px;text-align:center;padding:5px;box-shadow:0 4px #5ca9c0}.next canvas{display:block;width:60px;height:67px}.cheer{font-size:43px;margin-top:auto}.cheer small{display:block;font-size:10px}.cheer.clap{animation:clap .45s 2}.cheer.jump{animation:jump .6s 2}@keyframes clap{50%{transform:rotate(-8deg) scale(1.14)}}@keyframes jump{50%{transform:translateY(-18px) rotate(7deg)}}.overlay{position:absolute;inset:0;border-radius:9px;background:#0b3155e8;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;z-index:5}.overlay.off{display:none}.overlay>span{font-size:67px}.overlay h3{font-size:22px;margin:4px}.overlay p{font-size:11px;margin:0 0 12px;color:#d4f5ff}.overlay button{min-width:130px;min-height:48px;border:2px solid #fff;border-radius:15px;background:var(--coral);color:#fff;font-size:18px;font-weight:900;box-shadow:0 5px #b84239}.controls{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:12px auto 7px;max-width:410px}.controls button{height:58px;border:2px solid #fff;border-radius:15px;background:#f9feff;color:#175b81;font-size:27px;font-weight:900;box-shadow:0 5px #7bb9ca;touch-action:none}.controls small{display:block;font-size:8px}.controls .drop{background:var(--coral);color:#fff;box-shadow:0 5px #bd493f}.restart{display:block;margin:8px auto 0;background:#ffffff99;font-size:11px;min-height:31px}.pboard{position:relative;width:min(92vw,400px);margin:auto;border:6px solid #fff;border-radius:18px;background:#153b59;box-shadow:0 7px #176587}.pboard canvas{display:block;width:100%;height:auto;border-radius:10px;touch-action:none}.pieces{height:122px;margin:12px auto 0;max-width:430px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.piece{border:2px solid #ffffffbb;border-radius:15px;background:#ffffff75;display:flex;align-items:center;justify-content:center;touch-action:none}.piece.used{opacity:.2}.piece.selected{background:#fff5bd;border-color:#ffbf36;box-shadow:0 0 0 3px #fff}.piece canvas{max-width:105px;max-height:96px;pointer-events:none}.help{text-align:center;font-size:10px;color:#256984;margin:7px}.drag-ghost{position:fixed;z-index:50;pointer-events:none;opacity:.9;filter:drop-shadow(0 8px 6px #08334c55);transform:translate(-50%,-115%)}#toast{position:fixed;z-index:90;left:50%;top:85px;transform:translate(-50%,-20px);opacity:0;background:#fff;border:3px solid #72d5ec;border-radius:20px;padding:10px 18px;font-weight:900;transition:.25s;pointer-events:none;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0)}#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:80}@media(max-height:690px){header{height:48px}.brand h1{font-size:17px}.scores{margin-bottom:5px}.scores div{padding:3px}.board{width:min(calc(100vw - 112px),260px)}.controls{margin-top:9px}.controls button{height:49px}.pboard{width:min(76vh,92vw,355px)}.pieces{height:101px;margin-top:8px}.help{margin:3px}}@media(max-width:360px){#app{padding-inline:6px}.brand h1{font-size:16px}.classic aside{width:58px}.next canvas{width:48px}.board{width:calc(100vw - 79px)}.controls{gap:4px}.controls button{height:52px;padding:0}.pieces{height:105px}}