:root{--cream: #fff6e8;--cream-deep: #f6e7ce;--fur: #c98b56;--fur-dark: #a96c3c;--ink: #5c3a2e;--ink-soft: #7d5847;--blush: #e99b82;--leaf: #8faf87;--leaf-dark: #5f8259;--gold: #f2bf55;--gold-deep: #b8811a;--danger: #c4543a;--ui: 1;--sound-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h3.5L12 4.8v14.4L7.5 15H4z'/%3E%3Cpath d='M15.6 8.2a5 5 0 0 1 0 7.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M18.4 5.6a8.6 8.6 0 0 1 0 12.8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");--sound-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h3.5L12 4.8v14.4L7.5 15H4z'/%3E%3Cpath d='M16 9.5l5 5M21 9.5l-5 5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");--radius: calc(var(--ui) * 18px);--shadow-soft: 0 calc(var(--ui) * 3px) 0 rgba(92, 58, 46, .18);color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%}body{margin:0;background:#f1e2cb;color:var(--ink);font-family:Apple SD Gothic Neo,-apple-system,BlinkMacSystemFont,Pretendard,Noto Sans KR,Malgun Gothic,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}#app{position:fixed;inset:0;display:grid;place-items:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#stage{position:relative;width:450px;height:800px;border-radius:calc(var(--ui) * 20px);overflow:hidden;background:var(--cream);box-shadow:0 calc(var(--ui) * 10px) calc(var(--ui) * 34px) #5c3a2e38;touch-action:none}#game,#game canvas{display:block;width:100%!important;height:100%!important}#overlay{position:absolute;inset:0;pointer-events:none;display:block}#overlay button,#overlay a{pointer-events:auto}.btn{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--ui) * 8px);min-height:max(44px,calc(var(--ui) * 54px));padding:0 calc(var(--ui) * 26px);border:calc(var(--ui) * 3px) solid var(--ink);border-radius:999px;font:inherit;font-weight:800;font-size:calc(var(--ui) * 19px);letter-spacing:-.01em;color:var(--ink);background:#fff;cursor:pointer;transition:transform .09s ease,box-shadow .09s ease,background-color .15s ease;box-shadow:0 calc(var(--ui) * 4px) 0 var(--ink);-webkit-tap-highlight-color:transparent}.btn--primary{background:var(--gold);font-size:calc(var(--ui) * 22px);min-height:max(52px,calc(var(--ui) * 62px));padding:0 calc(var(--ui) * 40px)}.btn--ghost{background:#fffdf8;font-size:calc(var(--ui) * 17px);min-height:max(44px,calc(var(--ui) * 48px));box-shadow:0 calc(var(--ui) * 3px) 0 var(--ink-soft);border-color:var(--ink-soft);color:var(--ink-soft)}.btn:hover{background:#fffaf0}.btn--primary:hover{background:#f7cd74}.btn:active{transform:translateY(calc(var(--ui) * 4px));box-shadow:0 0 0 var(--ink)}.btn:focus-visible,.icon-btn:focus-visible{outline:calc(var(--ui) * 3px) solid var(--leaf-dark);outline-offset:calc(var(--ui) * 3px)}.icon-btn{pointer-events:auto;display:inline-grid;place-items:center;width:max(44px,calc(var(--ui) * 46px));height:max(44px,calc(var(--ui) * 46px));padding:0;border:calc(var(--ui) * 3px) solid var(--ink);border-radius:calc(var(--ui) * 14px);background:#fffdf8;color:var(--ink);cursor:pointer;box-shadow:0 calc(var(--ui) * 3px) 0 var(--ink);transition:transform .09s ease,box-shadow .09s ease;-webkit-tap-highlight-color:transparent}.icon-btn svg{width:58%;height:58%;fill:currentColor}.icon-btn:active{transform:translateY(calc(var(--ui) * 3px));box-shadow:0 0 0 var(--ink)}#hud{position:absolute;top:0;left:0;right:0;padding:calc(var(--ui) * 15px) calc(var(--ui) * 18px) calc(var(--ui) * 10px);display:flex;flex-direction:column;gap:calc(var(--ui) * 8px);background:linear-gradient(to bottom,#fff6e8,#fff6e8f7 66%,#fff6e800)}.hud-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:calc(var(--ui) * 8px)}.hud-row--sub{grid-template-columns:auto 1fr;min-height:calc(var(--ui) * 30px)}.hud-cell{display:flex;flex-direction:column;line-height:1.1;min-width:0}.hud-cell--start{align-items:flex-start}.hud-cell--center{align-items:center}.hud-cell--end{align-items:flex-end;justify-content:center}.hud-label{font-size:calc(var(--ui) * 12px);font-weight:700;color:var(--ink-soft);letter-spacing:.02em}.hud-value{font-size:calc(var(--ui) * 28px);font-weight:900;font-variant-numeric:tabular-nums;color:var(--ink);transition:color .2s ease}#hud-time.is-urgent{color:var(--danger);animation:tick-pulse 1s ease-in-out infinite}@keyframes tick-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.09)}}#hud-score.is-bump{animation:score-bump .22s ease-out}@keyframes score-bump{0%{transform:scale(1)}40%{transform:scale(1.16)}to{transform:scale(1)}}.lives{display:flex;gap:calc(var(--ui) * 5px);align-items:center}.life{width:calc(var(--ui) * 22px);height:calc(var(--ui) * 22px);border-radius:50%;background:var(--blush);border:calc(var(--ui) * 2.5px) solid var(--ink);box-shadow:inset 0 calc(var(--ui) * -3px) 0 #5c3a2e29;transition:transform .2s ease,background-color .2s ease,opacity .2s ease}.life.is-lost{background:transparent;border-style:dashed;border-color:#5c3a2e6b;box-shadow:none;opacity:.65;transform:scale(.82)}.combo{justify-self:end;display:inline-flex;align-items:baseline;gap:calc(var(--ui) * 6px);padding:calc(var(--ui) * 4px) calc(var(--ui) * 12px);border-radius:999px;border:calc(var(--ui) * 2.5px) solid var(--ink);background:#fffdf8;font-weight:800;line-height:1}.combo-mult{font-size:calc(var(--ui) * 19px);font-weight:900}.combo-count{font-size:calc(var(--ui) * 13px);color:var(--ink-soft)}.combo[data-tier="2"]{background:#eef5ea;border-color:var(--leaf-dark);color:var(--leaf-dark)}.combo[data-tier="2"] .combo-count{color:var(--leaf-dark)}.combo[data-tier="3"]{background:#fdf0d2;border-color:var(--gold-deep);color:var(--gold-deep)}.combo[data-tier="3"] .combo-count{color:var(--gold-deep)}.combo[data-tier="4"]{background:#fbe3d6;border-color:#c06a44;color:#a9552f}.combo[data-tier="4"] .combo-count{color:#a9552f}.combo[data-tier="5"]{background:#f6ddd6;border-color:var(--danger);color:var(--danger);box-shadow:0 0 0 calc(var(--ui) * 3px) #c4543a2e}.combo[data-tier="5"] .combo-count{color:var(--danger)}.combo.is-tierup{animation:tier-pop .36s cubic-bezier(.22,1.4,.36,1)}@keyframes tier-pop{0%{transform:scale(1)}45%{transform:scale(1.28)}to{transform:scale(1)}}.countdown{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--ui) * 132px);font-weight:900;color:var(--ink);text-shadow:0 calc(var(--ui) * 6px) 0 rgba(255,255,255,.85);pointer-events:none}.countdown span{display:block;animation:count-in .75s ease-out}.countdown span.go{font-size:calc(var(--ui) * 84px);color:var(--leaf-dark)}@keyframes count-in{0%{transform:scale(1.7);opacity:0}22%{transform:scale(1);opacity:1}75%{transform:scale(1);opacity:1}to{transform:scale(.88);opacity:0}}.toast{position:absolute;left:50%;top:34%;transform:translate(-50%);padding:calc(var(--ui) * 8px) calc(var(--ui) * 20px);border-radius:999px;border:calc(var(--ui) * 3px) solid var(--ink);background:#fffdf8;font-weight:900;font-size:calc(var(--ui) * 22px);white-space:nowrap;pointer-events:none;animation:toast-up .9s ease-out forwards}@keyframes toast-up{0%{transform:translate(-50%,calc(var(--ui) * 14px)) scale(.8);opacity:0}22%{transform:translate(-50%) scale(1);opacity:1}70%{opacity:1}to{transform:translate(-50%,calc(var(--ui) * -22px)) scale(1);opacity:0}}.screen{position:absolute;inset:0;display:grid;place-items:center;padding:calc(var(--ui) * 16px);pointer-events:auto}.screen--title{background:linear-gradient(180deg,#fff6e8e6,#fdefd9f5)}.screen--dim{background:#5c3a2e6b;backdrop-filter:blur(calc(var(--ui) * 3px))}.screen-inner{width:100%;max-width:calc(var(--ui) * 400px);max-height:100%;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;align-items:center;gap:calc(var(--ui) * 12px);text-align:center}.screen--dim .screen-inner{background:var(--cream);border:calc(var(--ui) * 4px) solid var(--ink);border-radius:calc(var(--ui) * 26px);padding:calc(var(--ui) * 24px) calc(var(--ui) * 20px);box-shadow:0 calc(var(--ui) * 8px) 0 #5c3a2e4d;max-width:calc(var(--ui) * 360px);animation:panel-in .28s cubic-bezier(.22,1.3,.36,1)}@keyframes panel-in{0%{transform:translateY(calc(var(--ui) * 18px)) scale(.94);opacity:0}to{transform:none;opacity:1}}.title{margin:0;display:flex;flex-direction:column;gap:calc(var(--ui) * 2px);line-height:1.12;font-weight:900;letter-spacing:-.02em}.title-line1{font-size:calc(var(--ui) * 26px);color:var(--fur-dark)}.title-line2{font-size:calc(var(--ui) * 36px);color:var(--ink);text-shadow:0 calc(var(--ui) * 3px) 0 rgba(255,255,255,.9)}.tagline{margin:0;font-size:calc(var(--ui) * 16px);font-weight:700;color:var(--ink-soft)}.hero{width:calc(var(--ui) * 176px);height:auto;max-height:calc(var(--ui) * 168px);object-fit:contain;animation:hero-bob 2.6s ease-in-out infinite;filter:drop-shadow(0 calc(var(--ui) * 6px) calc(var(--ui) * 6px) rgba(92,58,46,.18))}.hero--small{width:calc(var(--ui) * 116px);max-height:calc(var(--ui) * 112px)}.hero[data-mood=soft]{animation:hero-bob 3.4s ease-in-out infinite}.hero[data-mood=great]{animation:hero-cheer 1.5s ease-in-out infinite}.hero[data-mood=best]{animation:hero-cheer .9s ease-in-out infinite}@keyframes hero-cheer{0%,to{transform:translateY(0) rotate(-5deg) scale(1)}50%{transform:translateY(calc(var(--ui) * -12px)) rotate(5deg) scale(1.05)}}@keyframes hero-bob{0%,to{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(calc(var(--ui) * -7px)) rotate(1.5deg)}}.howto{margin:0;width:100%;display:flex;flex-direction:column;gap:calc(var(--ui) * 6px);padding:calc(var(--ui) * 12px) calc(var(--ui) * 14px);border-radius:var(--radius);background:#ffffffb8;border:calc(var(--ui) * 2px) dashed rgba(92,58,46,.3)}.howto-item{display:grid;grid-template-columns:calc(var(--ui) * 56px) 1fr;align-items:center;gap:calc(var(--ui) * 8px);text-align:left}.howto dt{font-size:calc(var(--ui) * 12px);font-weight:800;color:#fffdf8;background:var(--leaf-dark);border-radius:999px;padding:calc(var(--ui) * 3px) 0;text-align:center}.howto dd{margin:0;font-size:calc(var(--ui) * 13.5px);font-weight:600;color:var(--ink-soft)}kbd{display:inline-block;min-width:calc(var(--ui) * 20px);padding:0 calc(var(--ui) * 5px);margin:0 calc(var(--ui) * 1px);border:calc(var(--ui) * 1.5px) solid rgba(92,58,46,.45);border-bottom-width:calc(var(--ui) * 3px);border-radius:calc(var(--ui) * 5px);background:#fffdf8;font:inherit;font-size:calc(var(--ui) * 12px);font-weight:800;text-align:center;color:var(--ink)}.title-footer{width:100%;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--ui) * 10px);flex-wrap:wrap}.best{margin:0;font-size:calc(var(--ui) * 14px);font-weight:700;color:var(--ink-soft)}.best strong{font-size:calc(var(--ui) * 19px);color:var(--ink);font-variant-numeric:tabular-nums}.sound-icon{width:calc(var(--ui) * 18px);height:calc(var(--ui) * 18px);flex:none;background:currentColor;-webkit-mask:var(--sound-on) center / contain no-repeat;mask:var(--sound-on) center / contain no-repeat}#btn-sound[aria-pressed=true] .sound-icon{-webkit-mask-image:var(--sound-off);mask-image:var(--sound-off)}.fanmade{margin:calc(var(--ui) * 2px) 0 0;font-size:calc(var(--ui) * 11px);color:#5c3a2e99;letter-spacing:.02em}.legend{margin:0;padding:calc(var(--ui) * 10px) calc(var(--ui) * 12px);list-style:none;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--ui) * 6px);border-radius:var(--radius);background:#ffffffb8;border:calc(var(--ui) * 2px) solid rgba(92,58,46,.16)}.legend-item{display:flex;flex-direction:column;align-items:center;gap:calc(var(--ui) * 2px);min-width:0}.legend-icon{width:calc(var(--ui) * 34px);height:calc(var(--ui) * 34px);object-fit:contain;flex:none}.legend-name{font-size:calc(var(--ui) * 11.5px);font-weight:700;color:var(--ink-soft);white-space:nowrap}.legend-value{font-size:calc(var(--ui) * 14px);font-weight:900;color:var(--ink);white-space:nowrap}.legend-value--gold{color:var(--gold-deep)}.legend-value--bad{color:var(--danger)}.rule-line{margin:calc(var(--ui) * -4px) 0 0;font-size:calc(var(--ui) * 13px);font-weight:700;color:var(--ink-soft)}.rule-line strong{color:var(--ink);font-size:calc(var(--ui) * 15px)}.result-reason{margin:0;padding:calc(var(--ui) * 5px) calc(var(--ui) * 14px);border-radius:999px;background:#5c3a2e14;font-size:calc(var(--ui) * 13px);font-weight:700;color:var(--ink-soft);line-height:1.35}.panel-title{margin:0;font-size:calc(var(--ui) * 28px);font-weight:900}.panel-note{margin:0;font-size:calc(var(--ui) * 14px);font-weight:600;color:var(--ink-soft);line-height:1.5}.newbest{margin:0;padding:calc(var(--ui) * 5px) calc(var(--ui) * 18px);border-radius:999px;background:var(--gold);border:calc(var(--ui) * 3px) solid var(--ink);font-size:calc(var(--ui) * 18px);font-weight:900;animation:newbest-pop .5s cubic-bezier(.22,1.5,.36,1)}@keyframes newbest-pop{0%{transform:scale(.3) rotate(-12deg);opacity:0}60%{transform:scale(1.12) rotate(3deg);opacity:1}to{transform:none;opacity:1}}.result-message{margin:0;font-size:calc(var(--ui) * 16px);font-weight:800;color:var(--ink);line-height:1.45}.score-block{display:flex;flex-direction:column;align-items:center;gap:calc(var(--ui) * 2px)}.score-label{font-size:calc(var(--ui) * 13px);font-weight:700;color:var(--ink-soft)}.score-value{font-size:calc(var(--ui) * 52px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}.stats{margin:0;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--ui) * 6px)}.stat{padding:calc(var(--ui) * 9px) calc(var(--ui) * 4px);border-radius:calc(var(--ui) * 13px);background:#ffffffc7;border:calc(var(--ui) * 2px) solid rgba(92,58,46,.18)}.stat dt{font-size:calc(var(--ui) * 11.5px);font-weight:700;color:var(--ink-soft);white-space:nowrap}.stat dd{margin:calc(var(--ui) * 2px) 0 0;font-size:calc(var(--ui) * 21px);font-weight:900;font-variant-numeric:tabular-nums}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.name-form{width:100%;display:flex;flex-direction:column;align-items:center;gap:calc(var(--ui) * 8px)}.name-input{pointer-events:auto;width:100%;max-width:calc(var(--ui) * 280px);min-height:max(48px,calc(var(--ui) * 54px));padding:0 calc(var(--ui) * 16px);border:calc(var(--ui) * 3px) solid var(--ink);border-radius:calc(var(--ui) * 16px);background:#fffdf8;font:inherit;font-size:calc(var(--ui) * 20px);font-weight:800;text-align:center;color:var(--ink);box-shadow:inset 0 calc(var(--ui) * 2px) 0 #5c3a2e14}.name-input::placeholder{color:#5c3a2e59;font-weight:700}.name-input:focus-visible{outline:calc(var(--ui) * 3px) solid var(--leaf-dark);outline-offset:calc(var(--ui) * 2px)}.name-hint{margin:0;font-size:calc(var(--ui) * 12px);font-weight:600;color:var(--ink-soft)}.board-tabs{display:inline-flex;padding:calc(var(--ui) * 3px);gap:calc(var(--ui) * 3px);border-radius:999px;background:#5c3a2e17}.board-tab{pointer-events:auto;min-height:max(36px,calc(var(--ui) * 34px));padding:0 calc(var(--ui) * 16px);border:none;border-radius:999px;background:transparent;font:inherit;font-size:calc(var(--ui) * 14px);font-weight:800;color:var(--ink-soft);cursor:pointer;transition:background-color .15s ease,color .15s ease;-webkit-tap-highlight-color:transparent}.board-tab[aria-selected=true]{background:#fffdf8;color:var(--ink);box-shadow:0 calc(var(--ui) * 1.5px) 0 #5c3a2e2e}.board-tab:focus-visible{outline:calc(var(--ui) * 3px) solid var(--leaf-dark);outline-offset:calc(var(--ui) * 2px)}#board-note.is-error{color:var(--danger);font-weight:700}.board{margin:0;padding:0;list-style:none;width:100%;display:flex;flex-direction:column;gap:calc(var(--ui) * 4px)}.board-row{display:grid;grid-template-columns:calc(var(--ui) * 30px) 1fr auto;align-items:center;gap:calc(var(--ui) * 8px);padding:calc(var(--ui) * 7px) calc(var(--ui) * 10px);border-radius:calc(var(--ui) * 12px);background:#ffffffb8;border:calc(var(--ui) * 2px) solid rgba(92,58,46,.14);text-align:left}.board-row.is-me{background:#fdf0d2;border-color:var(--gold-deep);box-shadow:0 0 0 calc(var(--ui) * 2px) #d99a2b40}.board-rank{font-size:calc(var(--ui) * 15px);font-weight:900;color:var(--ink-soft);font-variant-numeric:tabular-nums;text-align:center}.board-row:nth-child(1) .board-rank{color:var(--gold-deep)}.board-info{min-width:0}.board-name{display:block;font-size:calc(var(--ui) * 14px);font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.board-meta{display:block;font-size:calc(var(--ui) * 10.5px);font-weight:600;color:var(--ink-soft)}.board-score{font-size:calc(var(--ui) * 17px);font-weight:900;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}.result-rank{margin:0;padding:calc(var(--ui) * 5px) calc(var(--ui) * 16px);border-radius:999px;background:#fdf0d2;border:calc(var(--ui) * 2.5px) solid var(--gold-deep);font-size:calc(var(--ui) * 14px);font-weight:900;color:var(--gold-deep)}.result-rank--note{background:#5c3a2e14;border-color:#5c3a2e40;color:var(--ink-soft);font-size:calc(var(--ui) * 12.5px);font-weight:700}.result-actions,.title-actions{display:flex;align-items:center;justify-content:center;gap:calc(var(--ui) * 8px);flex-wrap:wrap}@media(max-height:470px){.screen-inner{gap:calc(var(--ui) * 7px)}.hero{width:calc(var(--ui) * 118px);max-height:calc(var(--ui) * 100px)}.legend{padding:calc(var(--ui) * 7px) calc(var(--ui) * 8px);gap:calc(var(--ui) * 4px)}.legend-item{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:calc(var(--ui) * 5px)}.legend-icon{width:calc(var(--ui) * 22px);height:calc(var(--ui) * 22px)}.legend-name{display:none}.howto{padding:calc(var(--ui) * 8px) calc(var(--ui) * 10px);gap:calc(var(--ui) * 4px)}.rule-line{margin-top:calc(var(--ui) * -2px)}.name-input{min-height:44px;font-size:calc(var(--ui) * 17px)}.board-row{padding:calc(var(--ui) * 5px) calc(var(--ui) * 8px)}.board{max-height:calc(var(--ui) * 320px);overflow-y:auto;overscroll-behavior:contain;padding-right:calc(var(--ui) * 2px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.countdown span,.toast{animation:none;opacity:1}}