:root{--ink:#1d2540;--cream:#fff8e6;--gold:#ffc83a;--red:#ff4757;--green:#3ddc84;--panel:rgba(18,26,52,.72);--f:var(--kp-font,'KekeFont',system-ui,sans-serif)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#8fd36a;font-family:var(--f);color:#fff;overscroll-behavior:none;touch-action:none;font-synthesis:none}
button,input{font-family:var(--f);color:inherit;border:0;background:none;padding:0;font-size:inherit}
[hidden]{display:none!important}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
#touch{position:fixed;inset:0;z-index:2;touch-action:none}
#vig{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:inset 0 0 120px 30px rgba(255,40,60,.75)}
#vig.on{opacity:1}#vig.warn{opacity:.45}
.ic{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;flex:none}
.ic-clock{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5v5.4l3.6 2.1-1 1.7L11 13V7z'/%3E%3C/svg%3E")}
.ic-paw{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16' rx='5.5' ry='4.5'/%3E%3Ccircle cx='5.5' cy='11' r='2.3'/%3E%3Ccircle cx='9.5' cy='6.8' r='2.3'/%3E%3Ccircle cx='14.5' cy='6.8' r='2.3'/%3E%3Ccircle cx='18.5' cy='11' r='2.3'/%3E%3C/svg%3E")}
.ic-crown{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7l4.5 4L12 4l4.5 7L21 7l-2 11H5z'/%3E%3C/svg%3E")}
.ic-play{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13a1 1 0 0 0 1.5.9l10.6-6.5a1 1 0 0 0 0-1.8L9.5 4.6A1 1 0 0 0 8 5.5z'/%3E%3C/svg%3E")}
.ic-home{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v8h5v-5h4v5h5v-8h3z'/%3E%3C/svg%3E")}
.ic-sound{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4z'/%3E%3C/svg%3E")}
.ic-send{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 20.5 21 12 3 3.5V10l12 2-12 2z'/%3E%3C/svg%3E")}
.ic-x{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 4 12 9.6 17.6 4 20 6.4 14.4 12l5.6 5.6-2.4 2.4-5.6-5.6L6.4 20 4 17.6 9.6 12 4 6.4z'/%3E%3C/svg%3E")}
.ic-flag{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 21V3h2v1h12l-3 5 3 5H7v7z'/%3E%3C/svg%3E")}
.pill{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:17px;background:var(--panel);font-size:18px;font-weight:700;border:2px solid rgba(255,255,255,.2)}
.pill b{font-variant-numeric:tabular-nums}
.ic-btn{width:44px;height:44px;border-radius:50%;border:3px solid var(--ink);background:var(--cream);color:var(--ink);box-shadow:0 3px 0 var(--ink);display:grid;place-items:center;font-size:22px;cursor:pointer}
.ic-btn:active{transform:translateY(3px);box-shadow:none}
#btnHome{position:fixed;z-index:20;left:calc(10px + env(safe-area-inset-left));top:calc(10px + env(safe-area-inset-top))}
#hud{position:fixed;inset:0;z-index:5;pointer-events:none}
#top{position:absolute;left:0;right:0;top:calc(12px + env(safe-area-inset-top));display:flex;justify-content:center;gap:8px}
#timer.low{background:rgba(200,30,50,.85)}
#chant{position:absolute;left:50%;transform:translateX(-50%);top:calc(56px + env(safe-area-inset-top));display:flex;gap:3px;padding:5px 6px;border-radius:14px;background:var(--panel)}
#chant i{font-style:normal;min-width:21px;height:30px;padding:0 2px;display:grid;place-items:center;border-radius:8px;font-size:18px;font-weight:700;color:rgba(255,255,255,.35);background:rgba(255,255,255,.08);transition:all .08s}
#chant i.on{color:var(--ink);background:var(--gold);transform:translateY(-2px)}
#chant.warn i.on{background:#ff8a3a}
#chant.look i{background:var(--red);color:#fff}
#prog{position:absolute;left:50%;transform:translateX(-50%);top:calc(100px + env(safe-area-inset-top));width:150px;height:8px;border-radius:4px;background:rgba(10,16,40,.45)}
#prog u{position:absolute;left:0;top:-3px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#2dadb7;border:2px solid #fff}
#hint{position:absolute;left:50%;bottom:calc(120px + env(safe-area-inset-bottom));transform:translateX(-50%)}
.hand{display:block;width:56px;height:56px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M24 30V10a5 5 0 0 1 10 0v16l3-1a5 5 0 0 1 6 3l1 2 2-1a5 5 0 0 1 6 4v12c0 9-7 16-16 16h-4c-6 0-10-3-13-8l-8-13a5 5 0 0 1 8-6l5 6z' fill='%23fff' stroke='%2307131d' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.hand.press{animation:press 1.4s ease-in-out infinite}.hand.swipe{animation:swipe 1.6s ease-in-out infinite}
@keyframes swipe{0%,100%{transform:translate(0,12px) scale(.9)}35%{transform:translate(-26px,12px) scale(.9)}70%{transform:translate(26px,12px) scale(.9)}}.hand.lift{animation:lift 1.4s ease-in-out infinite}
@keyframes press{0%,100%{transform:translateY(0)}30%,80%{transform:translateY(12px) scale(.9)}}
@keyframes lift{0%,30%{transform:translateY(12px) scale(.9)}60%,100%{transform:translateY(-10px)}}
#big{position:absolute;left:0;right:0;top:38%;text-align:center;font-size:52px;font-weight:700;color:#fff;text-shadow:0 4px 0 var(--ink),0 0 18px rgba(0,0,0,.4);opacity:0;transform:scale(.6);transition:all .2s}
#big.show{opacity:1;transform:scale(1)}#big.red{color:#ff5a6a}#big.gold{color:var(--gold)}
/* 랭킹 (오른쪽) */
#rank{position:fixed;z-index:6;right:calc(6px + env(safe-area-inset-right));top:calc(122px + env(safe-area-inset-top));width:118px;max-height:46vh;border-radius:14px;background:var(--panel);padding:6px 6px 4px;pointer-events:none;font-size:13px}
#rank .ph{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:700;padding:0 2px 4px;color:var(--gold)}
#rankL{list-style:none;margin:0;padding:0;overflow:hidden;max-height:calc(46vh - 30px)}
#rankL li{display:flex;align-items:center;gap:4px;height:20px;padding:0 3px;border-radius:6px;white-space:nowrap}
#rankL li .r{width:18px;text-align:right;font-weight:700;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
#rankL li .n{flex:1;overflow:hidden;text-overflow:ellipsis}
#rankL li .s{width:14px;height:14px;font-size:14px}
#rankL li.h .n{color:#bff3ff;font-weight:500}
#rankL li.me{background:rgba(45,173,183,.65)}#rankL li.me .n{color:#fff;font-weight:700}
#rankL li.out{opacity:.45}#rankL li.out .n{text-decoration:line-through}
#rankL li.fin .s{color:var(--green)}#rankL li.out .s{color:var(--red)}
#rankL li .p{font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
/* 채팅 (왼쪽) */
#chat{position:fixed;z-index:7;left:calc(6px + env(safe-area-inset-left));bottom:calc(10px + env(safe-area-inset-bottom));width:min(46vw,250px);font-size:14px}
#chatL{list-style:none;margin:0 0 6px;padding:0;max-height:30vh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none;-webkit-mask:linear-gradient(transparent,#000 30%)}
#chatL li{margin-top:3px;padding:3px 8px;border-radius:10px;background:rgba(18,26,52,.6);line-height:1.35;word-break:break-all;text-shadow:0 1px 2px rgba(0,0,0,.4)}
#chatL li b{color:var(--gold);margin-right:4px;font-weight:700}#chatL li.me b{color:#7ff0ff}
#chatF{display:flex;gap:4px}
#chatI{flex:1;min-width:0;height:38px;padding:0 10px;border-radius:19px;background:rgba(18,26,52,.75);border:2px solid rgba(255,255,255,.25);font-size:16px;user-select:text;-webkit-user-select:text}
#chatI::placeholder{color:rgba(255,255,255,.5)}
#chatB{width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;font-size:18px;flex:none}
/* 대기실·결과 */
#lobby,#result{position:fixed;inset:0;z-index:8;display:grid;place-items:center;pointer-events:none}
.card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 26px;border-radius:24px;background:rgba(18,26,52,.78);border:3px solid rgba(255,255,255,.18);min-width:200px;margin-top:-90px}
.card>b,#resT{font-size:22px;font-weight:700;color:var(--gold)}
.num{font-size:64px;font-weight:700;line-height:1;text-shadow:0 4px 0 var(--ink)}
#lobMe{font-size:15px;color:#bff3ff}
#demo{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:16px}
#resS{font-size:16px;display:flex;gap:12px}
#resN.out{color:#ff5a6a}#resN.win{color:var(--gold)}
/* 메뉴 */
.screen{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(60px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom));background:linear-gradient(rgba(20,40,30,.05),rgba(20,30,50,.45))}
.logo{text-align:center}.logo img{width:150px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}
.logo h1{margin:0;display:flex;flex-direction:column;line-height:.95;font-size:84px;font-weight:700;color:#fff;text-shadow:0 5px 0 var(--ink),0 0 24px rgba(0,0,0,.25);letter-spacing:1px}
.logo h1 span{color:var(--gold)}
.logo p{margin:10px 0 0;font-size:20px;font-weight:700;color:var(--cream);text-shadow:0 2px 0 var(--ink)}
.mbot{display:flex;flex-direction:column;align-items:center;gap:14px}
.big-btn{display:flex;align-items:center;gap:10px;height:72px;padding:0 44px;border-radius:36px;background:linear-gradient(#ffd34a,#ff9f1c);color:var(--ink);font-size:30px;font-weight:700;border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);cursor:pointer}
.big-btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.row{display:flex;gap:12px;align-items:center}
.studio{color:rgba(255,255,255,.8);font-size:13px;text-decoration:none}
#toast{position:fixed;left:50%;bottom:30%;transform:translateX(-50%);z-index:40;padding:8px 16px;border-radius:16px;background:rgba(18,26,52,.88);font-size:16px;opacity:0;transition:opacity .2s;pointer-events:none}
#toast.show{opacity:1}
#load{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#8fd36a}
.spin{width:44px;height:44px;border-radius:50%;border:5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(1turn)}}
@media (max-width:400px){#rank{width:116px;font-size:12px}#chant i{min-width:19px;font-size:16px}}

body:not(.in) #rank,body:not(.in) #chat{display:none}
.card{margin-top:-260px;padding:12px 22px;gap:6px}.card .num{font-size:54px}

.pick{display:flex;align-items:center;gap:12px}.pick b{min-width:150px;text-align:center;font-size:24px;font-weight:700;text-shadow:0 3px 0 var(--ink)}.pick .ic-btn{font-size:34px;line-height:1;padding-bottom:4px}
#nameI{width:240px;height:52px;border-radius:26px;text-align:center;font-size:22px;font-weight:700;background:rgba(255,248,230,.95);color:var(--ink);border:3px solid var(--ink);user-select:text;-webkit-user-select:text}
#nameI::placeholder{color:rgba(29,37,64,.4)}
.screen{justify-content:space-between}.logo{margin-top:-20px}

#ptsB{position:fixed;z-index:20;left:calc(60px + env(safe-area-inset-left));top:calc(14px + env(safe-area-inset-top));height:32px;font-size:15px;color:#fff}#ptsB .ic{color:var(--gold)}#ptsB span{font-size:13px;opacity:.8}
body:not(.in) #ptsB{display:none}
#top{padding-left:150px}
@media (min-width:500px){#top{padding-left:0}}
#resS span+span{color:var(--gold)}

#spec{position:absolute;left:50%;transform:translateX(-50%);top:calc(112px + env(safe-area-inset-top));display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 18px;border-radius:16px;background:rgba(10,14,30,.85);border:2px solid #ffd34a;white-space:nowrap}
#spec b{font-size:20px;color:#ffd34a;letter-spacing:2px}#spec span{font-size:16px}#spec small{font-size:13px;opacity:.75}
#bars{position:fixed;inset:0;z-index:3;pointer-events:none}#bars i{position:absolute;left:0;right:0;height:0;background:#000;transition:height .35s}#bars i:first-child{top:0}#bars i:last-child{bottom:0}
body.spectate #bars i{height:6vh}
body.spectate #prog,body.spectate #hint{display:none!important}
body.spectate #top{opacity:.85}
#mapName{position:absolute;left:0;right:0;top:30%;text-align:center;font-size:30px;font-weight:700;color:#fff;text-shadow:0 3px 0 var(--ink),0 0 14px rgba(0,0,0,.4);opacity:0;transition:opacity .3s,transform .3s;transform:translateY(10px)}
#mapName.show{opacity:1;transform:none}
#timer.pulse{animation:tpulse 1s ease-in-out infinite}@keyframes tpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
#vig.end{opacity:.55;animation:vend 1s ease-in-out infinite}@keyframes vend{0%,100%{opacity:.35}50%{opacity:.75}}
body.spectate #rank{top:calc(196px + env(safe-area-inset-top))}