:root{color-scheme:dark;--ink:#fbf1e3;--dim:#cdb9a3;--latte:#f0c896;--red:#e0483b;--panel:#24170ff2;font-family:Inter,system-ui,-apple-system,Noto Sans KR,sans-serif;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#1a110c;overscroll-behavior:none}body{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;color:var(--ink)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation;border:0}button:focus-visible,a:focus-visible{outline:3px solid var(--latte);outline-offset:3px}[hidden]{display:none!important}#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}#topbar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));z-index:6;pointer-events:none}.brand{font-weight:900;font-size:16px;letter-spacing:-.5px;color:#2b1a10;text-decoration:none;pointer-events:auto;background:#fbf1e3d9;padding:4px 8px;border-radius:6px}.brand span{color:#c86f4a}.tools{display:flex;gap:6px;pointer-events:auto}.tools button{min-height:34px;padding:0 12px;border-radius:6px;background:linear-gradient(#4a3022ef,#2a1a11ef);color:var(--ink);border:1px solid #a07b5c66;font:700 10px ui-monospace,monospace;letter-spacing:.6px}#pause{font-size:15px;min-width:40px}#hud{position:fixed;left:50%;transform:translate(-50%);top:calc(max(12px,env(safe-area-inset-top)) + 44px);display:flex;gap:14px;align-items:center;pointer-events:none;z-index:4;padding:7px 14px;border-radius:999px;background:#24170fd9;border:1px solid #a07b5c55;box-shadow:0 6px 18px #0006;font-variant-numeric:tabular-nums;white-space:nowrap}.lives{display:flex;gap:3px;font-size:17px;line-height:1}.lives i{font-style:normal;transition:transform .3s,opacity .3s,filter .3s}.lives i.gone{opacity:.28;filter:grayscale(1);transform:scale(.8)}.lives i.lost{animation:lost .7s}@keyframes lost{0%{transform:scale(1.6) rotate(-12deg)}40%{transform:scale(1.3) rotate(10deg)}to{transform:scale(.8)}}.stage{text-align:center}#hud small{display:block;font:700 8px ui-monospace,monospace;letter-spacing:1.4px;color:var(--dim)}#hud b{font:800 16px ui-monospace,monospace}.gauge{display:flex;align-items:center;gap:6px}.gauge .cup{font-size:15px}.bar{width:76px;height:10px;border-radius:5px;background:#120b07;border:1px solid #a07b5c66;overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8a5631,#f0c896);transition:width .1s linear}.gauge b{font-size:13px!important;min-width:38px;text-align:right;color:var(--latte)}#banner{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);text-align:center;z-index:5;pointer-events:none;animation:pop .35s ease-out}#banner b{display:block;font-size:clamp(40px,13vw,64px);font-weight:950;font-style:italic;letter-spacing:-2px;color:#fff6e8;text-shadow:0 4px 0 #5c3a28,0 10px 30px #000a}#banner small{display:inline-block;font:800 13px system-ui,sans-serif;color:#2b1a10;background:var(--latte);padding:5px 12px;border-radius:999px;margin-bottom:8px}#toast{position:fixed;left:50%;top:34%;transform:translate(-50%,-50%);text-align:center;z-index:5;pointer-events:none;animation:slam .4s cubic-bezier(.2,1.6,.4,1)}#toast b{display:block;font-size:clamp(46px,15vw,76px);font-weight:950;color:#fff;-webkit-text-stroke:2px #7a1712;text-shadow:0 5px 0 #7a1712,0 14px 30px #000b;transform:rotate(-5deg)}#toast small{display:inline-block;margin-top:10px;font:800 14px system-ui,sans-serif;background:#fff6e8;color:#7a1712;padding:5px 12px;border-radius:999px}@keyframes pop{0%{opacity:0;transform:translate(-50%,-40%) scale(.9)}}@keyframes slam{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}}#hint{position:fixed;left:50%;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 4px);transform:translate(-50%);z-index:4;pointer-events:none;font-size:13px;color:#2b1a10;background:#fbf1e3e6;padding:8px 14px;border-radius:999px;box-shadow:0 6px 16px #0005;white-space:nowrap;animation:breathe 1.6s ease-in-out infinite}@keyframes breathe{50%{transform:translate(-50%) scale(1.05)}}.panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(360px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;scrollbar-width:none;background:radial-gradient(ellipse at 0 0,#a0683a33,transparent 65%),linear-gradient(135deg,#3a2518f5,var(--panel) 50%,#1b110bfa);border:1px solid #a07b5c66;border-radius:14px;padding:26px 24px 18px;z-index:8;box-shadow:0 24px 70px #000a,inset 0 1px #ffe9cf22;touch-action:pan-y}.panel::-webkit-scrollbar{display:none}.eyebrow{display:flex;align-items:center;gap:7px;font:700 9px ui-monospace,monospace;letter-spacing:1.6px;color:var(--dim)}.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--latte);box-shadow:0 0 8px var(--latte)}.eyebrow i.red{background:var(--red);box-shadow:0 0 8px var(--red)}h1{margin:16px 0 12px;font-size:clamp(44px,15vw,60px);line-height:.95;font-weight:950;letter-spacing:-3px;text-shadow:0 3px 0 #120b07,0 12px 28px #0008}h1 span{color:var(--latte);padding-left:6px}h2{margin:14px 0;font-size:30px;font-weight:900;letter-spacing:-1px}.intro{margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--dim)}.intro strong{color:var(--ink)}.primary{display:flex;justify-content:space-between;align-items:center;width:100%;padding:15px 18px;border-radius:8px;background:linear-gradient(135deg,#f6d6a8,#e8b77d 65%,#d99a5c);color:#2b1a10;font-size:16px;font-weight:850;box-shadow:0 4px #7a4b2b,inset 0 1px #fff3df;transition:transform .1s}.primary:active{transform:translateY(2px);box-shadow:0 2px #7a4b2b}.primary span{font-size:19px}.secondary{display:block;width:100%;text-align:center;padding:14px 0 6px;background:none;color:var(--dim);font-size:12px;font-weight:650}.how{display:flex;gap:11px;align-items:center;margin:16px 0 14px;padding-top:14px;border-top:1px solid #4a3324}.gesture{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid #6b4a35;font-size:18px}.how p{margin:0;font-size:11px;line-height:1.7;color:var(--dim)}.how strong{color:var(--ink)}.how small{display:block;font-size:9px;opacity:.8}.menu-foot{display:flex;justify-content:space-between;font:600 9px ui-monospace,monospace;letter-spacing:.5px;color:#9a8270}.menu-foot b{color:var(--ink);padding-left:4px}.stats{display:flex;gap:22px;margin-bottom:18px;border-block:1px solid #4a3324;padding:12px 0}.stats small{display:block;font:700 9px ui-monospace,monospace;letter-spacing:1px;color:var(--dim)}.stats b{font:900 24px ui-monospace,monospace}.notice{margin:0 0 12px;font-size:11px;line-height:1.6;color:var(--dim)}.rank{margin:0 0 10px}.rank label{display:block;font-size:12px;font-weight:750;margin-bottom:7px}.rank label small{font-weight:500;color:var(--dim);padding-left:4px}.rank-row{display:flex;gap:6px}.rank input{flex:1;min-width:0;padding:11px 12px;border-radius:7px;border:1px solid #a07b5c88;background:#120b07;color:var(--ink);font:700 15px ui-monospace,monospace;letter-spacing:1px;-webkit-user-select:text;user-select:text;touch-action:manipulation}.rank input:focus{outline:2px solid var(--latte);outline-offset:1px}.rank button{padding:0 16px;border-radius:7px;background:#e8b77d;color:#2b1a10;font-weight:850}.rank button:disabled{opacity:.5}#rank-msg{color:var(--ink);font-weight:650}.board{list-style:none;margin:0 0 16px;padding:0;counter-reset:r;max-height:42dvh;overflow:auto}.board li{display:flex;align-items:baseline;gap:8px;padding:7px 4px;border-bottom:1px solid #4a3324;font-size:13px;font-variant-numeric:tabular-nums}.board li:before{counter-increment:r;content:counter(r);min-width:26px;font:800 12px ui-monospace,monospace;color:var(--dim)}.board li:nth-child(1):before{content:"\1f947"}.board li:nth-child(2):before{content:"\1f948"}.board li:nth-child(3):before{content:"\1f949"}.board li b{flex:1;font:750 13px ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis}.board li span{font:700 11px ui-monospace,monospace;color:var(--latte)}.board li em{font:600 11px ui-monospace,monospace;color:var(--dim);font-style:normal;min-width:58px;text-align:right}.board li.me{background:#f0c89622;border-radius:6px}.board .empty{justify-content:center;color:var(--dim)}.board .empty:before{content:none}#boost{font:800 12px ui-monospace,monospace;font-style:normal;color:#ffcf7a;min-width:34px}#flash{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 6px);z-index:5;width:76px;height:76px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#2b1a10;background:radial-gradient(circle at 50% 40%,#fffbe8,#f0c896 70%);border:3px solid #fff6e0;box-shadow:0 6px 18px #0007;touch-action:none;-webkit-user-select:none;user-select:none;--cd:0}#flash span{font-size:28px;line-height:1}#flash small{font:800 10px system-ui,sans-serif}#flash:after{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(#1a110cd0 calc(var(--cd) * 360deg),transparent 0);pointer-events:none}#flash:active{transform:scale(.94)}#pop{position:fixed;left:50%;top:26%;transform:translate(-50%);z-index:5;pointer-events:none;font:900 18px system-ui,sans-serif;color:#2b1a10;background:#fff6e0;padding:8px 16px;border-radius:999px;box-shadow:0 8px 22px #0006;white-space:nowrap;animation:pop .25s ease-out}#tip{position:fixed;inset:0;z-index:7;pointer-events:none}.tip-spot{position:fixed;left:calc(max(16px,env(safe-area-inset-left)) - 10px);bottom:calc(max(16px,env(safe-area-inset-bottom)) - 4px);width:96px;height:96px;border-radius:50%;box-shadow:0 0 0 200vmax #140a06a3}.tip-spot:after{content:"";position:absolute;inset:5px;border-radius:50%;border:3px solid #ffe7b0;animation:ring 1.4s ease-out infinite}@keyframes ring{0%{transform:scale(.92);opacity:1}to{transform:scale(1.28);opacity:0}}.tip-bubble{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 104px);width:min(312px,calc(100vw - 32px));padding:14px 16px 12px;border-radius:14px;background:#fff6e0;color:#2b1a10;box-shadow:0 14px 34px #000b;pointer-events:auto;word-break:keep-all;transform-origin:38px 100%;animation:tip .3s ease-out}.tip-bubble:after{content:"";position:absolute;left:29px;bottom:-8px;width:18px;height:18px;background:#fff6e0;border-radius:0 0 4px;transform:rotate(45deg)}@keyframes tip{0%{opacity:0;transform:translateY(10px) scale(.95)}}.tip-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.tip-head em{font:800 9px ui-monospace,monospace;letter-spacing:1px;font-style:normal;color:#fff6e0;background:#c86f4a;padding:3px 6px;border-radius:4px}.tip-head b{font-size:17px;font-weight:900;letter-spacing:-.4px}#tip-body p{margin:0 0 6px;font-size:13px;line-height:1.55}#tip-body strong{color:#a5481f}#tip-body .warn{font-size:12px;color:#8a2a1c}.tip-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}.tip-foot small{font:700 10px ui-monospace,monospace;color:#8a6a52}#tip-ok{padding:10px 18px;border-radius:8px;background:linear-gradient(135deg,#f6d6a8,#e8b77d 65%,#d99a5c);color:#2b1a10;font-size:14px;font-weight:850;box-shadow:0 3px #7a4b2b}#tip-ok:active{transform:translateY(2px);box-shadow:0 1px #7a4b2b}#tip-ok:focus-visible{outline-color:#c86f4a}@media(max-height:500px){.tip-bubble{left:calc(max(16px,env(safe-area-inset-left)) + 98px);bottom:calc(max(16px,env(safe-area-inset-bottom)) + 6px);width:min(400px,calc(100vw - max(16px,env(safe-area-inset-left)) - 114px));padding:12px 14px 10px;transform-origin:0 calc(100% - 38px)}.tip-bubble:after{left:-8px;bottom:29px;border-radius:0 0 0 4px}.tip-head{margin-bottom:5px}.tip-head b{font-size:16px}#tip-body p{margin-bottom:4px;font-size:12.5px;line-height:1.5}#tip-body .warn{font-size:11.5px}.tip-foot{margin-top:6px}#tip-ok{padding:8px 16px}}@media(prefers-reduced-motion:reduce){.tip-spot:after,.tip-bubble{animation:none}}
