:root{--ice:#eaf4f8;--ice-2:#d4e8f1;--frost:#f7fbfd;--navy:#14304a;--ink-soft:#4d6b7e;--water:#1b5a73;--water-deep:#0e3a4f;--coral:#ff6a48;--coral-ink:#c4401f;--teal:#12a08f;--teal-ink:#0b7266;--gold:#f3b234;--gold-ink:#b67f0c;--b1:#fbfdfe;--b2:#c3e1ef;--b3:#82bfdb;--f-disp:"Jua","Noto Sans KR","Apple SD Gothic Neo",system-ui,sans-serif;--f-body:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;--fs:16px;color-scheme:light}html{box-sizing:border-box;height:100%}*,*:before,*:after{box-sizing:inherit}body{height:100%;margin:0;background:var(--ice);color:var(--navy);font-family:var(--f-body);font-size:var(--fs);overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}body.easy{--fs:19px}button{font:inherit;color:inherit}button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}#app{height:100%;position:relative}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:12px;max-width:620px;margin:0 auto}.btn{border:0;cursor:pointer;font-family:var(--f-disp);font-size:1.3em;min-height:58px;padding:0 22px;border-radius:18px;background:var(--coral);color:#fff;box-shadow:0 5px 0 var(--coral-ink);transition:transform .08s,box-shadow .08s,opacity .2s;letter-spacing:.01em}.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--coral-ink)}.btn:disabled{background:#b9cdd7;box-shadow:0 5px #97afbb;cursor:default;opacity:.9}.btn:disabled:active{transform:none}.btn.teal{background:var(--teal);box-shadow:0 5px 0 var(--teal-ink)}.btn.teal:active{box-shadow:0 1px 0 var(--teal-ink)}.btn.plain{background:var(--frost);color:var(--navy);box-shadow:0 5px 0 var(--ice-2),inset 0 0 0 2px var(--ice-2)}.btn.plain:active{box-shadow:0 1px 0 var(--ice-2),inset 0 0 0 2px var(--ice-2)}.ghost{border:0;background:#ffffff24;color:#fff;border-radius:12px;padding:8px 14px;font-weight:700;cursor:pointer}#scrTitle{justify-content:center;gap:18px}.logo{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.logo .kicker{font-family:var(--f-disp);font-size:1.15em;color:var(--teal-ink);letter-spacing:.08em}.logo h1{margin:0;font-family:var(--f-disp);font-weight:400;font-size:clamp(3rem,15vw,4.6rem);line-height:.95;color:var(--navy);text-wrap:balance}.logo h1 em{font-style:normal;color:var(--coral)}.hero{display:grid;place-items:center;height:min(34vh,230px)}.hero-stage{position:relative;width:min(56vw,210px);aspect-ratio:1/1;max-width:100%}.hero-stage .floe{position:absolute;left:5%;right:5%;bottom:4%;height:30%;border-radius:22px;background:var(--b2);box-shadow:inset 0 -10px #14304a1f,inset 0 3px #fff,0 10px 0 var(--water)}.hero-stage .floe:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--crack) 70% 50%/40% 80% no-repeat}.hero-stage .peng{position:absolute;left:50%;bottom:20%;width:62%;transform:translate(-50%);animation:bob 2.4s ease-in-out infinite}@keyframes bob{50%{transform:translate(-50%) translateY(-6%) rotate(-3deg)}}.menu{display:flex;flex-direction:column;gap:14px;width:100%;max-width:400px;margin:0 auto}.menu .btn{width:100%}.sub-btn{display:block;font-family:var(--f-body);font-size:.78em;font-weight:500;opacity:.92;margin-top:2px}.menu .btn.two{display:flex;flex-direction:column;justify-content:center;padding-block:8px;line-height:1.15}.toggles{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tog{display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;cursor:pointer;background:var(--frost);border-radius:14px;padding:12px 14px;box-shadow:inset 0 0 0 2px var(--ice-2);text-align:left;min-height:56px}.tog b{font-weight:700;font-size:.95em}.tog small{display:block;color:var(--ink-soft);font-size:.74em;margin-top:2px}.sw{flex:none;width:44px;height:26px;border-radius:13px;background:#b9cdd7;position:relative;transition:background .2s}.sw:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px #0003}.tog[aria-pressed=true] .sw{background:var(--teal)}.tog[aria-pressed=true] .sw:after{transform:translate(18px)}.record{text-align:center;color:var(--ink-soft);font-size:.9em;font-variant-numeric:tabular-nums}.linkish{border:0;background:none;color:var(--navy);text-decoration:underline;text-underline-offset:4px;font-weight:700;cursor:pointer;padding:8px;font-size:1em}#scrHelp{overflow-y:auto;gap:14px}#scrHelp h2{font-family:var(--f-disp);font-weight:400;font-size:2em;margin:8px 0 0}.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:s}.steps li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;background:var(--frost);border-radius:16px;padding:14px;counter-increment:s;line-height:1.55}.steps li:before{content:counter(s);font-family:var(--f-disp);font-size:1.3em;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center}.steps b{font-weight:700}.legend{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px}.legend div{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.82em;text-align:center}.legend i{width:44px;height:44px;border-radius:10px;box-shadow:inset 0 -5px #14304a1f,inset 0 2px #fff;position:relative}.legend i.cr:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--crack) center/100% 100% no-repeat}.help-foot{display:flex;gap:10px;padding-bottom:8px}.help-foot .btn{flex:1}#scrCalib{overflow-y:auto;gap:12px}#scrCalib h2{font-family:var(--f-disp);font-weight:400;font-size:2em;margin:8px 0 0}.cal-help{margin:0;color:var(--ink-soft);line-height:1.55}.cal-val{display:flex;flex-direction:column;align-items:center;background:var(--frost);border-radius:16px;padding:10px;box-shadow:inset 0 0 0 2px var(--ice-2)}.cal-val span{font-family:var(--f-disp);font-size:2.2em;font-variant-numeric:tabular-nums}.cal-val small{color:var(--ink-soft)}.cal-adj{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.cal-adj .btn{padding:0 8px;font-size:1.15em}.cal-msg{text-align:center;font-family:var(--f-disp);font-size:1.15em;min-height:1.5em}.cal-pad{flex:1;min-height:120px;border:0;border-radius:24px;background:var(--coral);color:#fff;font-family:var(--f-disp);font-size:2.4em;box-shadow:0 6px 0 var(--coral-ink);cursor:pointer;touch-action:none;transition:transform .05s}.cal-pad.hit{transform:translateY(5px);box-shadow:none}.cal-foot{gap:10px;flex-wrap:wrap}.hud{display:flex;align-items:center;gap:8px}.pl{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;background:var(--frost);font-family:var(--f-disp);font-size:1.1em;box-shadow:inset 0 0 0 2px var(--ice-2);transition:all .2s;min-width:0;white-space:nowrap}.pl .dot{width:12px;height:12px;border-radius:50%;flex:none}.pl.c0 .dot{background:var(--coral)}.pl.c1 .dot{background:var(--teal)}.pl.on.c0{background:var(--coral);color:#fff;box-shadow:0 4px 0 var(--coral-ink)}.pl.on.c1{background:var(--teal);color:#fff;box-shadow:0 4px 0 var(--teal-ink)}.pl.on .dot{background:#fff}.hud .vs{font-family:var(--f-disp);color:var(--ink-soft)}.hud .spacer{flex:1}.iconbtn{border:0;width:46px;height:46px;border-radius:14px;background:var(--frost);box-shadow:inset 0 0 0 2px var(--ice-2);cursor:pointer;display:grid;place-items:center;flex:none}.iconbtn svg{width:22px;height:22px}.status{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:12px;min-height:1.6em}.status .msg{font-family:var(--f-disp);font-size:1.25em;line-height:1.25;min-width:0}.status .left{color:var(--ink-soft);font-size:.85em;white-space:nowrap;font-variant-numeric:tabular-nums}.board-area{flex:1;min-height:0;display:grid;place-items:center;padding-block:10px}.board{--n:7;width:var(--bs,300px);height:var(--bs,300px);padding:10px;border-radius:24px;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);gap:5px;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.12),transparent 45%),linear-gradient(160deg,var(--water),var(--water-deep));box-shadow:inset 0 0 0 4px #ffffff59,0 8px 0 var(--ice-2);position:relative}.cell{border:0;padding:0;border-radius:22%;background:var(--b1);cursor:pointer;position:relative;box-shadow:inset 0 -5px #14304a21,inset 0 2px #fff;transition:transform .15s,background .3s}.cell.l2{background:var(--b2)}.cell.l3{background:var(--b3)}.cell.cracked:after{content:"";position:absolute;top:6%;right:6%;bottom:6%;left:6%;background:var(--crack) center/100% 100% no-repeat;pointer-events:none}.cell.sel{transform:translateY(-4px) scale(1.04);z-index:4;box-shadow:inset 0 -5px #14304a21,0 0 0 4px var(--coral),0 6px 10px #00000040}.cell.gone{background:transparent;box-shadow:none;pointer-events:none}.cell.pg{cursor:default;z-index:3}.cell.shake{animation:shake .3s}.cell.breaking{animation:brk .4s forwards;pointer-events:none}.cell.falling{animation:fall .6s forwards;pointer-events:none}@keyframes shake{25%{transform:translate(-3px) rotate(-2deg)}75%{transform:translate(3px) rotate(2deg)}}@keyframes brk{30%{transform:scale(1.12);filter:brightness(1.3)}to{transform:scale(.2) rotate(25deg);opacity:0}}@keyframes fall{to{transform:translateY(30%) scale(.5);opacity:0}}.board .peng{position:absolute;left:50%;bottom:18%;width:170%;transform:translate(-50%);pointer-events:none;transform-origin:50% 95%}.board .peng.nervous{animation:wob .9s ease-in-out infinite}.board .peng.splash{animation:sink 1.1s forwards}@keyframes wob{25%{transform:translate(-50%) rotate(-7deg)}75%{transform:translate(-50%) rotate(7deg)}}@keyframes sink{30%{transform:translate(-50%) translateY(-20%) rotate(-15deg)}to{transform:translate(-50%) translateY(90%) rotate(40deg) scale(.6);opacity:0}}.bar{display:flex;gap:12px;align-items:center;padding-block:6px 4px}.bar-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.bar-info b{font-family:var(--f-disp);font-weight:400;font-size:1.3em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.bar-info span{color:var(--ink-soft);font-size:.86em;line-height:1.35}.stars{color:var(--gold);letter-spacing:2px;font-size:.9em}.stars .off{color:#c2d3db}.bar .btn{flex:none;min-width:120px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}.overlay.dim{background:#0e3a4f8c;align-items:center;justify-content:center;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}.card{background:var(--frost);border-radius:26px;padding:24px 22px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px;align-items:stretch;text-align:center;box-shadow:0 8px 0 var(--ice-2);animation:pop .28s ease-out}@keyframes pop{0%{transform:scale(.85);opacity:0}}.card h3{margin:0;font-family:var(--f-disp);font-weight:400;font-size:2.4em;line-height:1.05}.card p{margin:0;color:var(--ink-soft);line-height:1.5}.res-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.res-stats div{background:var(--ice);border-radius:14px;padding:10px 4px;display:flex;flex-direction:column;gap:2px}.res-stats b{font-family:var(--f-disp);font-weight:400;font-size:1.7em;font-variant-numeric:tabular-nums}.res-stats span{font-size:.8em;color:var(--ink-soft)}.res-stats .p b{color:var(--teal-ink)}.res-stats .g b{color:var(--gold-ink)}.res-stats .m b{color:var(--coral-ink)}.meter{position:relative;height:20px;border-radius:10px;background:var(--ice-2);overflow:hidden}.meter i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--coral),var(--gold) 55%,var(--teal));border-radius:10px;transition:width .7s cubic-bezier(.2,.8,.2,1)}.meter u{position:absolute;top:0;bottom:0;width:2px;background:#14304a59}.meter-scale{display:flex;justify-content:space-between;font-size:.72em;color:var(--ink-soft);position:relative;height:1.2em;font-variant-numeric:tabular-nums}.meter-scale span{position:absolute;transform:translate(-50%)}.acc-line{font-family:var(--f-disp);font-size:1.2em;font-variant-numeric:tabular-nums}.card .row{display:flex;gap:10px}.card .row .btn{flex:1}.over-peng{width:120px;margin:0 auto;position:relative}.over-peng .wave{position:absolute;left:-20%;right:-20%;bottom:-6px;height:34%;background:var(--water);border-radius:50% 50% 14px 14px}.over-peng svg{display:block;position:relative}.rh{background:var(--water-deep);color:#fff}.rh-top{display:flex;align-items:center;gap:10px;padding:10px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px))}.rh-who{font-family:var(--f-disp);font-size:1.25em;padding:6px 12px;border-radius:12px}.rh-who.c0{background:var(--coral)}.rh-who.c1{background:var(--teal)}.rh-lv{font-family:var(--f-disp);font-size:1.15em;flex:1;min-width:0}.rh-prog{height:6px;margin:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));background:#ffffff26;border-radius:3px;overflow:hidden}.rh-prog i{display:block;height:100%;width:0;background:var(--gold)}#rhCv{flex:1;min-height:0;width:100%;display:block;touch-action:none}.rh-pads{display:grid;gap:10px;padding:10px max(16px,env(safe-area-inset-right,0px)) 14px max(16px,env(safe-area-inset-left,0px))}.pad{border:0;border-radius:20px;min-height:92px;font-family:var(--f-disp);font-size:1.6em;color:#fff;cursor:pointer;touch-action:none;transition:transform .05s}.pad.l0{background:var(--teal);box-shadow:0 6px 0 var(--teal-ink)}.pad.l1{background:var(--gold);color:var(--navy);box-shadow:0 6px 0 var(--gold-ink)}.pad.solo{background:var(--coral);box-shadow:0 6px 0 var(--coral-ink);min-height:110px}.pad.hit{transform:translateY(5px);box-shadow:none}.pad:disabled{opacity:.45;cursor:default}.rh-keys{font-size:.75em;opacity:.6;text-align:center;margin-top:-4px}body.easy .pad{min-height:120px}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}:root{--crack:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M5 9 L17 18 L13 27 L21 35 M17 18 L29 13 L35 21 M21 35 L28 30 M29 13 L31 5' fill='none' stroke='%23295b76' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 18 L21 22' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}