@font-face{font-family:Bagel Fat One;src:url(/assets/bagel-fat-one-subset-DAyXugWy.woff2)format("woff2");font-weight:400;font-display:swap}:root{--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--sky:#86d3f4;--ink:#3a2414;--cream:#fff8ec;--paper:#fff;--pink:#ff8fb1;--yellow:#ffd23f;--mint:#7fe0c0;--orange:#ff9a3c;--display:"Bagel Fat One", "Jua", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;--body:system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;--outline:3px;--bg:var(--sky);--box-bg:var(--cream);--box-floor:var(--ink);--accent:var(--orange);font-family:var(--body);color:var(--ink);line-height:1.6}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0}body{background:var(--sky);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;place-items:center;min-height:100dvh;display:grid}#app{z-index:1;place-items:center;width:100%;height:100dvh;display:grid;position:relative}.screen{text-align:center;width:min(28rem,100vw - 2rem);padding:2rem 0}.screen h1{font-family:var(--display);margin:0 0 .5rem;font-size:2.4rem;font-weight:400}.fruits{flex-wrap:wrap;justify-content:center;align-items:center;gap:.15rem;margin:.5rem 0 1rem;display:flex}.fruits img{width:2.2rem;height:2.2rem}.row{justify-content:center;align-items:center;gap:.5rem;display:flex}button{font:inherit;background:var(--yellow);color:var(--ink);border:none;border:var(--outline) solid var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--ink);border-radius:999px;padding:.6rem 1.6rem;font-weight:800}button:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}button.quiet{background:var(--paper)}.muted{opacity:.7}.small{font-size:.85rem}.score{font-family:var(--display);color:var(--accent);margin:0;font-size:3.5rem;font-weight:400}body:has(.play){background:var(--sky)}.play{width:100%;height:100dvh;padding:max(.75rem, env(safe-area-inset-top)) .75rem max(.75rem, env(safe-area-inset-bottom));grid-template-columns:1fr auto 1fr;grid-template-areas:"left stage right";align-items:center;gap:1.2rem;display:grid}.side{flex-direction:column;gap:1rem;display:flex}.side.left{grid-area:left;align-items:flex-end}.side.right{grid-area:right;align-items:flex-start}.stat .label{font-size:.95rem;font-weight:800}.score-bubble{background:var(--paper);border:var(--outline) solid var(--ink);min-width:9rem;box-shadow:4px 4px 0 var(--ink);border-radius:2.5rem;flex-direction:column;align-items:center;padding:.8rem 1.4rem;display:flex}.score-bubble strong{font-family:var(--display);color:var(--pink);-webkit-text-stroke:.06em var(--ink);paint-order:stroke fill;text-shadow:.05em .06em 0 var(--ink);font-size:2.6rem;font-weight:400;line-height:1.1}.score-bubble strong.bump{animation:.35s ease-out bump}@keyframes bump{0%{transform:scale(1)}35%{color:var(--yellow);transform:scale(1.3)rotate(-4deg)}to{transform:scale(1)}}.score-bubble .best{opacity:.75;font-size:.85rem}.stat.next{background:var(--paper);border:var(--outline) solid var(--ink);width:7rem;height:7rem;box-shadow:4px 4px 0 var(--ink);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;padding:.6rem;display:flex}.stat.next canvas{width:56px;height:56px}.side button{padding:.35rem .9rem;font-size:.85rem}.stage{grid-area:stage;place-items:center;width:min(62vh,40rem);height:100%;min-height:0;display:grid;position:relative}canvas.board{touch-action:none;box-shadow:0 0 0 4px var(--ink), 6px 6px 0 4px var(--ink);cursor:pointer;border-radius:0 0 18px 18px;display:block}.banner{background:var(--paper);border:var(--outline) solid var(--ink);color:var(--pink);font-family:var(--display);-webkit-text-stroke:.05em var(--ink);paint-order:stroke fill;pointer-events:none;box-shadow:5px 5px 0 var(--ink);border-radius:999px;padding:.6rem 1.8rem;font-size:2rem;font-weight:900;animation:.5s cubic-bezier(.3,1.6,.5,1) banner-in;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}@keyframes banner-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.2)rotate(-12deg)}to{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(0)}}.backdrop{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.backdrop img{object-fit:contain;filter:saturate(.8);max-width:50%;height:100%;position:absolute;bottom:0}.backdrop img.left{object-position:left bottom;left:0;-webkit-mask-image:linear-gradient(270deg,#0000,#000 14%);mask-image:linear-gradient(270deg,#0000,#000 14%)}.backdrop img.right{object-position:right bottom;right:0;-webkit-mask-image:linear-gradient(90deg,#0000,#000 14%);mask-image:linear-gradient(90deg,#0000,#000 14%)}.backdrop .floor{background:radial-gradient(circle at 50% 100%, var(--floor) 0 37px, var(--ink) 38px 41px, transparent 42px) 0 0 / 80px 42px repeat-x, linear-gradient(var(--floor), var(--floor)) 0 42px / 100% 100% no-repeat;height:15vh;position:absolute;bottom:0;left:0;right:0}.backdrop:after{content:"";background:var(--sky);opacity:.38;position:absolute;inset:0}@media (width<=760px),(aspect-ratio<=4/5){.backdrop{display:none}}.ladder{background:var(--paper);border:var(--outline) solid var(--ink);width:11rem;height:11rem;box-shadow:4px 4px 0 var(--ink);border-radius:50%;margin:0;padding:0;list-style:none;position:relative}.ladder li{width:34px;height:34px;transform:rotate(calc(var(--i) * 32.73deg - 90deg)) translate(4.4rem) rotate(calc(var(--i) * -32.73deg + 90deg));opacity:.35;filter:saturate(.5);background-position:50%;background-repeat:no-repeat;background-size:contain;margin:-17px;transition:opacity .3s;position:absolute;top:50%;left:50%}.ladder li.made{opacity:1;filter:none}@media (width<=760px),(aspect-ratio<=4/5){.play{grid-template:"left""stage"minmax(0,1fr)"right"/minmax(0,1fr);gap:.5rem}.side{flex-direction:row;justify-content:space-between;align-items:center!important}.score-bubble{min-width:0;box-shadow:3px 3px 0 var(--ink);border-width:3px;flex-direction:row;gap:.5rem;padding:.2rem 1rem}.score-bubble strong{font-size:1.6rem}.stage{width:100%;min-width:0}.side{gap:.4rem;min-width:0}.stat .label{white-space:nowrap}.stat.next{width:auto;height:auto;box-shadow:3px 3px 0 var(--ink);border-width:3px;border-radius:999px;flex-direction:row;gap:.3rem;padding:.1rem .6rem}.stat.next canvas{width:36px;height:36px}.ladder{border-width:2px;border-radius:999px;gap:1px;width:auto;min-width:0;height:auto;padding:2px 4px;display:flex}.ladder li{width:19px;height:19px;margin:0;position:static;transform:none}}button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.title .ladder-names{opacity:.75;margin:-.6rem 0 .8rem;font-size:.8rem}.last-line{justify-content:center;align-items:center;gap:.6rem;min-height:3.5rem;margin:.8rem 0;display:flex}.last-line img{width:5.5rem;height:5.5rem;margin:-1rem -.8rem}.last-line .bubble{border:var(--outline) solid var(--ink);text-align:left;background:#fff;border-radius:1rem;padding:.4rem .9rem;font-weight:700}.sound-toggle{top:calc(12px + env(safe-area-inset-top,0px));z-index:20;border-radius:50%;width:40px;min-width:0;height:40px;padding:0;font-size:18px;line-height:1;position:fixed;left:50%;transform:translate(-50%)}