:root{--ink:#4a2f22;--ink-soft:#6b4a38;--cream:#fff8ea;--paper:#fff8eaf2;--wood:#c98f58;--wood-dark:#8a5a36;--butter:#ffd978;--mint:#a8e6cf;--spring:cubic-bezier(.34, 1.7, .5, 1);--title:"Jua", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:var(--cream);height:100%;color:var(--ink);word-break:keep-all;-webkit-tap-highlight-color:transparent;margin:0;font-family:Gowun Dodum,Apple SD Gothic Neo,Malgun Gothic,system-ui,sans-serif;overflow:hidden}#stage,#stage canvas{width:100%;height:100%;display:block;position:fixed;inset:0}#stage canvas{touch-action:none}.vignette{z-index:1;pointer-events:none;background:radial-gradient(at 50% 45%,#ffdca000 55%,#d6965442 100%);position:fixed;inset:0}.hud{z-index:2;pointer-events:none;padding:calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 18px) calc(env(safe-area-inset-left) + 16px);flex-direction:column;align-items:center;display:flex;position:fixed;inset:0}.hud[hidden]{display:none}.top{flex-direction:column;align-items:center;gap:7px;width:100%;display:flex}.sign{min-height:42px;font-family:var(--title);font-variant-numeric:tabular-nums;color:#fff8ea;text-shadow:0 1px #5a3214bf;background:linear-gradient(#a86f3e,#8f5b30);border:3px solid #6b4226;border-radius:14px;margin:0;padding:6px 20px;font-size:20px;box-shadow:0 3px #6b4226,inset 0 1px #ffffff47}.timer{white-space:nowrap;gap:16px;display:flex}.timer em{opacity:.9;font-size:.82em;font-style:normal}.timer b{font-weight:400}.paper{background:var(--paper);border:2px solid #8a5a3673;border-radius:12px;margin:0;box-shadow:0 2px #8a5a3659}.counts{font-family:var(--title);align-items:center;gap:10px;padding:3px 12px;font-size:16px;list-style:none;display:flex}.counts li{align-items:center;gap:3px;display:flex}.counts li.all{border-right:2px dashed #8a5a3666;margin-right:4px;padding-right:10px}.counts li.gap{border-left:2px dashed #8a5a3666;margin-left:6px;padding-left:12px}.counts svg{width:22px;height:22px}.counts b{min-width:.7em;font-weight:400}.counts li.pop{animation:pop .6s var(--spring)}@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.5)}to{transform:scale(1)}}.toasts{flex-direction:column;align-items:center;gap:6px;display:flex}.toast{animation:toast 3.2s var(--spring) both;background:#ffe6d8;border:2px solid #8a5a3666;border-radius:12px;margin:0;padding:6px 14px;font-size:14px}@keyframes toast{0%{opacity:0;transform:translateY(-10px)scale(.8)}10%,88%{opacity:1;transform:none}to{opacity:0}}.guide{text-align:center;opacity:0;visibility:hidden;padding:6px 14px;font-size:14px;line-height:1.4;transition:opacity .6s,visibility .6s}.guide.show{opacity:1;visibility:visible}.action{pointer-events:auto;flex-direction:column;align-items:center;gap:8px;margin-top:auto;display:flex}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline-offset:3px;outline:3px solid #e08a3c}#stamp-peek{pointer-events:auto;min-height:44px;font-family:var(--title);font-size:inherit;background:0 0;border:none;align-items:center;gap:3px;margin:-8px 0;padding:0 6px;display:flex}.bar{background:linear-gradient(#b77c47,#96623a);border:3px solid #6b4226;border-radius:20px;grid-template-columns:repeat(6,88px);gap:8px;padding:8px;display:grid;box-shadow:0 4px #6b4226}.act{min-height:66px;font-family:var(--title);background:var(--cream);transition:transform .3s var(--spring), background .2s, box-shadow .15s;border:2px solid #6b4226;border-radius:13px;flex-direction:column;justify-content:center;align-items:center;gap:1px;padding:5px 2px;font-size:15px;display:flex;box-shadow:0 3px #6b4226}.act svg{width:32px;height:32px}.act:hover{transform:translateY(-3px)scale(1.05)}.act:active{transform:translateY(2px)scale(.97);box-shadow:0 1px #6b4226}.act[aria-pressed=true]{background:var(--butter);transform:translateY(2px);box-shadow:0 1px #6b4226}.icon{z-index:2;top:calc(env(safe-area-inset-top) + 10px);right:calc(env(safe-area-inset-right) + 10px);background:var(--cream);width:44px;height:44px;color:var(--ink);transition:transform .25s var(--spring);border:3px solid #6b4226;border-radius:14px;place-items:center;display:grid;position:fixed;box-shadow:0 3px #6b4226}.icon:hover{transform:scale(1.08)}.icon[hidden],.icon .mute{display:none}.icon[aria-pressed=false] .mute{display:inline}.gear-btn{right:calc(env(safe-area-inset-right) + 64px)}.front-btn{right:calc(env(safe-area-inset-right) + 118px)}.gear-btn[aria-pressed=true]{background:var(--mint)}.front-bubble{z-index:2;min-height:44px;font-family:var(--title);white-space:nowrap;background:var(--cream);border:2px solid #6b4226;border-radius:16px;padding:7px 14px;font-size:15px;position:fixed;top:0;left:0;box-shadow:0 2px #6b4226}.front-bubble:after{content:"";background:var(--cream);border-bottom:2px solid #6b4226;border-right:2px solid #6b4226;width:14px;height:14px;margin-left:-7px;position:absolute;bottom:-9px;left:50%;transform:rotate(45deg)}.front-bubble[hidden]{display:none}.modal{z-index:4;position:fixed;inset:0}.modal[hidden]{display:none}.modal-card{background:var(--cream);border:3px solid #6b4226;border-radius:20px;flex-direction:column;width:min(420px,100vw - 24px);height:min(560px,100vh - 24px);display:flex;position:fixed;box-shadow:0 5px #6b4226}.modal-card:after{content:"";top:calc(var(--tail,50%) - 10px);background:var(--cream);width:18px;height:18px;position:absolute;transform:rotate(45deg)}.modal-card[data-side=left]:after{border-top:3px solid #6b4226;border-right:3px solid #6b4226;right:-12px}.modal-card[data-side=right]:after{border-bottom:3px solid #6b4226;border-left:3px solid #6b4226;left:-12px}.modal-card header{border-bottom:2px dashed #8a5a3666;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.modal-card h2{font-family:var(--title);margin:0;font-size:22px;font-weight:400}.modal-close{min-width:64px;min-height:44px;font-family:var(--title);background:var(--butter);border:2px solid #6b4226;border-radius:12px;padding:6px 12px;font-size:16px}.modal-body{border-radius:0 0 18px 18px;flex:1;min-height:0;position:relative;overflow:auto}.modal-body iframe{border:0;width:100%;height:100%;display:block}.modal-fallback{padding:10px 14px;position:absolute;top:16px;left:16px;right:16px}.modal-fallback[hidden]{display:none}.overlay{z-index:3;padding:24px calc(env(safe-area-inset-right) + 16px) 24px calc(env(safe-area-inset-left) + 16px);text-align:center;background:radial-gradient(#fff4dd40,#ffe2b4b8);flex-direction:column;justify-content:center;align-items:center;gap:16px;transition:opacity .9s;display:flex;position:fixed;inset:0}.overlay.leaving{opacity:0;pointer-events:none}.overlay[hidden]{display:none}.title-cat{z-index:1;border-radius:34px;margin-bottom:-30px;animation:2.4s ease-in-out infinite bob;position:relative}@keyframes bob{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-5px)scale(.97,1.03)}}.logo{color:#fff8ea;background:linear-gradient(#b77c47,#915e35);border:4px solid #6b4226;border-radius:26px;padding:16px 36px 14px;box-shadow:0 6px #6b4226,inset 0 2px #ffffff4d}.logo h1{font-family:var(--title);text-shadow:0 3px #6b4226;margin:0;font-size:clamp(38px,10vw,58px);font-weight:400;line-height:1.1}.logo p{margin:6px 0 0;font-size:16px}.start{font-family:var(--title);background:var(--butter);min-height:60px;transition:transform .3s var(--spring);border:3px solid #6b4226;border-radius:20px;padding:10px 48px;font-size:24px;box-shadow:0 5px #6b4226}.start:hover{transform:translateY(-3px)scale(1.05)}.start:active{transform:translateY(3px)}.overlay .small{max-width:340px;padding:6px 12px;font-size:14px;line-height:1.5}.joystick{z-index:2;left:calc(env(safe-area-inset-left) + 16px);bottom:calc(env(safe-area-inset-bottom) + 16px);touch-action:none;background:#fff8eaa6;border:3px solid #6b422680;border-radius:50%;width:112px;height:112px;position:fixed}.joystick[hidden]{display:none}.knob{background:var(--butter);border:3px solid #6b4226;border-radius:50%;width:50px;height:50px;margin:-25px 0 0 -25px;position:absolute;top:50%;left:50%}@media (width<=560px){.top{align-items:flex-start}.sign{padding:6px 9px;font-size:14px}.timer{gap:6px}.timer em{font-size:.78em}.counts{gap:7px;padding:3px 9px;font-size:15px}.counts li.all{border-right:2px dashed #8a5a3666;margin-right:4px;padding-right:10px}.counts li.gap{margin-left:2px;padding-left:7px}.toasts{align-items:flex-start}.modal-card{width:100%;height:min(78vh,560px);box-shadow:none;border-width:3px 0 0;border-radius:20px 20px 0 0;bottom:0;top:auto!important;left:0!important}.modal-card:after{display:none}.guide{text-align:left}.bar{grid-template-columns:repeat(3,1fr);gap:5px;width:min(300px,100vw - 150px);padding:5px}.act{min-height:52px;padding:2px;font-size:12.5px}.act svg{width:24px;height:24px}.counts{flex-wrap:wrap}.counts svg{width:19px;height:19px}.title-cat{width:104px;height:104px}}@media (pointer:coarse) and (width<=560px){.action{align-self:flex-end;align-items:flex-end}}@media (pointer:coarse) and (width>=561px){.action{margin-bottom:118px}}@media (prefers-reduced-motion:reduce){.overlay,.act,.start,.icon,.guide{transition:none}.toast,.title-cat,.counts li.pop{animation:none}}