:root{--ink:#111216;--yellow:#ffe04b;--orange:#ff6847;--green:#45db8b;--red:#ff405f;--panel:rgba(15,17,22,.88);--line:rgba(255,255,255,.14)}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:"Noto Sans KR",sans-serif;background:var(--ink);color:#fff;touch-action:none}button,input{font:inherit}.hidden{display:none!important}.screen{position:relative;width:100%;height:100%}.eyebrow{display:inline-flex;background:#050506;color:var(--yellow);padding:8px 12px;font-size:.76rem;font-weight:900;letter-spacing:.12em}.start-screen{display:grid;grid-template-columns:1.1fr minmax(330px,470px);align-items:center;gap:5vw;padding:6vh 7vw;background:radial-gradient(circle at 50% -10%,#ff8fab 0%,#ff405f 28%,#4a1528 62%,#120810 100%);isolation:isolate;overflow-x:hidden;overflow-y:auto}.start-screen:after{display:none}.panic-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}.panic-stripe{position:absolute;inset:-20%;background:repeating-conic-gradient(from 0deg,#ffe04b 0 7deg,#ff6b8a 7deg 14deg);opacity:.14;animation:panicSpin 14s linear infinite}.panic-float{position:absolute;font-size:clamp(1.6rem,4vw,2.6rem);filter:drop-shadow(0 4px 0 #0006);animation:panicFloat 2.4s ease-in-out infinite alternate}.panic-float.pf1{top:8%;left:6%;animation-delay:0s}.panic-float.pf2{top:14%;right:8%;animation-delay:.4s}.panic-float.pf3{bottom:22%;left:10%;font-family:"Black Han Sans";color:#fff;font-size:clamp(2rem,5vw,3.2rem);animation-delay:.8s}.panic-float.pf4{bottom:18%;right:12%;animation-delay:1.2s}.start-urgency-strip{position:relative;z-index:1;display:flex;align-items:center;gap:10px;background:#1a0a12d9;border:2px solid #ff8fab;padding:8px 12px;border-radius:999px;width:fit-content;margin-bottom:10px;box-shadow:0 0 0 3px #ff405f55}.start-urgency-strip>span{font-size:.62rem;font-weight:900;color:#ffb3c6;letter-spacing:.06em}.start-urgency-strip>b{font-family:"Black Han Sans";font-size:1.15rem;color:#fff;animation:urgencyBlink .5s ease-in-out infinite alternate}.start-meter{flex:1;min-width:100px;height:9px;background:#3a1a24;border-radius:999px;overflow:hidden}.start-meter i{display:block;height:100%;width:78%;background:linear-gradient(90deg,#ffe04b,#ff6847,#ff405f);animation:meterWobble 1.1s ease-in-out infinite alternate;border-radius:999px}.brand-block{position:relative;z-index:1;text-shadow:0 4px 24px #0009}.brand-block h1{font-family:"Black Han Sans";font-size:clamp(4.5rem,10vw,10rem);font-weight:400;line-height:.88;letter-spacing:-.055em;margin:10px 0 16px;padding-top:.06em}.brand-block h1 em{font-style:normal;color:#ffe04b;text-shadow:0 0 18px #ff405f88}.panic-title{animation:titleShake .28s ease-in-out infinite alternate}.panic-badge{background:#ff405f!important;color:#fff!important;animation:badgePulse .7s ease-in-out infinite alternate}.panic-copy{max-width:560px;font-size:clamp(.82rem,2.2vw,1.05rem);font-weight:900;line-height:1.55;color:#ffe8ef!important;margin:0}.nickname-card{background:#140a10f2;padding:22px;border:2px solid #ff8fab;box-shadow:8px 8px 0 #ff405f;backdrop-filter:blur(16px)}.panic-card{position:relative;z-index:2}.panic-start{background:linear-gradient(90deg,#ffe04b,#ff9f43)!important;color:#2a0810!important;box-shadow:0 6px 0 #c93d52,0 0 20px #ff405f66!important;animation:startPulse .55s ease-in-out infinite alternate}.panic-start b{color:#ff405f}.start-screen .nickname-card>label,.start-screen .nickname-card legend{color:#ffb3c6}.start-screen .mode-card{background:#1f1018;border-color:#5a3040}.start-screen .mode-card.selected{border-color:#ffe04b;background:#2d1520}@keyframes panicSpin{to{transform:rotate(360deg)}}@keyframes panicFloat{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-10px) rotate(6deg)}}@keyframes titleShake{from{transform:translateX(0) rotate(-.6deg)}to{transform:translateX(3px) rotate(.6deg)}}@keyframes badgePulse{from{transform:scale(1)}to{transform:scale(1.04)}}@keyframes urgencyBlink{from{opacity:1;color:#fff}to{opacity:.75;color:#ffb3c6}}@keyframes meterWobble{from{width:72%}to{width:86%}}@keyframes startPulse{from{transform:translateY(0)}to{transform:translateY(-2px)}}.nickname-card>label,.nickname-card legend{display:block;color:#aeb3bd;font-size:.76rem;font-weight:900;margin:0 0 8px}.nickname-card input{width:100%;border:1px solid #4b505c;background:#23262e;color:#fff;padding:14px 15px;font-size:1rem;font-weight:800;outline:0}.nickname-card input:focus{border-color:var(--yellow)}fieldset{border:0;padding:0;margin:22px 0 0}.mode-card{width:100%;display:grid;grid-template-columns:50px 1fr 22px;align-items:center;gap:12px;border:1px solid #434853;background:#1c1f26;color:#fff;padding:12px;margin:9px 0;text-align:left;cursor:pointer}.mode-card:hover,.mode-card.selected{border-color:var(--yellow);background:#292a25}.mode-card>span:nth-child(2){display:flex;flex-direction:column}.mode-card b{font-size:.9rem}.mode-card small{color:#9299a5;font-size:.7rem;margin-top:3px}.mode-card i{font-style:normal;color:transparent}.mode-card.selected i{color:var(--yellow)}.mode-icon{width:44px;height:44px;display:grid;place-items:center;background:#363b46;color:var(--yellow);font-weight:900;font-size:.72rem}.mode-icon.people{color:#75d4ff}.mode-icon.rand{color:#ff8eb8;background:#3a2530}.primary-btn{width:100%;border:0;background:var(--yellow);color:var(--ink);display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding:16px 19px;font-weight:900;cursor:pointer;box-shadow:0 5px 0 #b9a534}.primary-btn:disabled{filter:grayscale(1);opacity:.5;cursor:not-allowed}.primary-btn b{font-size:1.4rem}.party-code-box{margin-top:16px}.party-code-box label{display:block;color:#aeb3bd;font-size:.76rem;font-weight:900;margin:0 0 8px}.party-code-box input{width:100%;border:1px solid #4b505c;background:#23262e;color:#fff;padding:14px 15px;font-size:1rem;font-weight:800;outline:0;letter-spacing:.14em;text-transform:uppercase}.party-code-box input:focus{border-color:var(--yellow)}.party-code-box small{display:block;color:#8f96a1;font-size:.66rem;margin-top:8px;line-height:1.5}.control-copy{color:#8f96a1;font-size:.68rem;line-height:1.7;margin:16px 0 0}.start-screen footer{position:static;grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid #ffffff33;margin-top:24px;padding-top:10px;font-size:.68rem;font-weight:900;letter-spacing:.13em}
.lobby-screen{display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,#3a3f49,#111216 65%);padding:20px}.back-btn{position:absolute;top:24px;left:24px;border:1px solid #656b76;background:transparent;color:white;padding:9px 13px;cursor:pointer}.lobby-card{width:min(560px,100%);background:#f2f1e9;color:var(--ink);padding:36px;box-shadow:12px 12px 0 var(--yellow)}.lobby-card h2{font-family:"Black Han Sans";font-size:2.7rem;font-weight:400;margin:20px 0 6px}.lobby-card>p{color:#666c76;font-size:.8rem;line-height:1.6}.room-code{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;background:#111216;color:#fff;padding:14px;margin:20px 0}.room-code span{font-size:.7rem;color:#949aa5}.room-code strong{color:var(--yellow);letter-spacing:.12em}.room-code button{border:1px solid #656b76;background:transparent;color:#fff;padding:7px 10px}.player-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.player-slot{min-height:76px;background:#dddcd4;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.7rem;font-weight:800}.player-slot i{width:27px;height:27px;border-radius:50%;background:#bcbcb5;margin-bottom:6px}.player-slot.joined{background:#d9d395}.player-slot.joined i{background:var(--yellow);box-shadow:inset 0 0 0 7px #111216}.player-slot.host{background:#fff3b0;outline:2px solid #111216;box-shadow:0 0 0 2px var(--yellow)}.player-slot .host-badge{display:block;margin-top:5px;padding:2px 7px;border-radius:999px;background:#111216;color:var(--yellow);font-size:.58rem;font-weight:900;line-height:1.3}.lobby-status{display:flex;align-items:center;gap:8px;color:#666c76;font-size:.75rem;font-weight:800;margin-top:16px}.lobby-status i{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 1.2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 8px #45db8b0d}}
.game-screen{background:#66707c}.game-screen canvas{width:100%;height:100%;display:block}.hud{position:absolute;z-index:4;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px);box-shadow:0 10px 25px #0004}.top-hud{top:14px;left:50%;transform:translateX(-50%);display:flex;height:60px}.top-hud>div{min-width:135px;padding:9px 17px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--line)}.top-hud .logo-mini{font-family:"Black Han Sans";font-size:1.1rem;background:var(--yellow);color:var(--ink);min-width:145px}.top-hud span,.mission-panel span,.ranking-panel>span{font-size:.62rem;color:#9ba2ae;font-weight:800}.top-hud strong{font-size:.9rem}.top-hud>div:last-child strong{color:var(--yellow);font-variant-numeric:tabular-nums}.status-panel{top:92px;left:16px;width:245px;padding:16px}.panel-title{display:flex;justify-content:space-between;font-size:.68rem;color:#a7aeba;font-weight:900}.panel-title b{color:var(--green)}.urgency-row{display:flex;justify-content:space-between;align-items:end;margin:14px 0 7px}.urgency-row strong{font-size:1.45rem;color:var(--yellow)}.urgency-row small{font-size:.65rem;color:#a8afba}.meter{height:10px;background:#383d47}.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--yellow),var(--orange),var(--red));width:8%}.inventory{display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);margin-top:15px;padding-top:13px}.inventory .roll{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:white;color:#111}.inventory div{display:flex;flex-direction:column}.inventory small{font-size:.62rem;color:#9da4ae}.inventory strong{font-size:.9rem}.tool-inv{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}.tool-roll{background:#3a2530!important;color:#ffb3c6!important;font-size:.75rem!important}.mission-panel{top:92px;left:50%;transform:translateX(-50%);width:300px;padding:13px 15px;display:flex;flex-direction:column;text-align:center}.mission-panel strong{font-size:.8rem;margin:3px 0}.mission-panel small{font-size:.62rem;color:#89919d}.ranking-panel{top:92px;right:16px;width:190px;padding:14px}.ranking-panel ol{padding:0;margin:9px 0 0;list-style:none}.ranking-panel li{display:grid;grid-template-columns:18px 1fr auto;gap:5px;border-top:1px solid #ffffff14;padding:7px 0;font-size:.68rem;font-weight:800}.ranking-panel li.me{color:var(--yellow)}.ranking-panel small{color:#8d95a1}.crosshair{position:absolute;z-index:3;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%)}.crosshair i,.crosshair b{position:absolute;background:#ffffffe6}.crosshair i{width:22px;height:2px;top:10px}.crosshair b{height:22px;width:2px;left:10px}.interaction{position:absolute;z-index:5;bottom:72px;left:50%;transform:translateX(-50%);background:#0c0d11e6;padding:12px 16px;display:flex;gap:10px;align-items:center;font-size:.8rem;font-weight:900}.interaction #interactionHint{background:var(--yellow);color:#111;padding:4px 8px;border-radius:6px;font-weight:900;min-width:2.2em;text-align:center}
.tutorial-overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:end center;padding:max(16px,env(safe-area-inset-bottom)) 16px 120px;background:linear-gradient(180deg,transparent 20%,rgba(10,12,18,.72) 55%,rgba(10,12,18,.92) 100%);pointer-events:auto}
.tutorial-card{width:min(420px,100%);background:#fff7d3;color:#111216;padding:18px 18px 14px;border:3px solid #111216;box-shadow:8px 8px 0 #111216;border-radius:16px}
.tutorial-step{display:inline-block;background:#111216;color:#ffe04b;padding:4px 10px;border-radius:999px;font-size:.68rem;font-weight:900;margin-bottom:10px}
.tutorial-card h3{font-family:"Black Han Sans";font-size:1.55rem;font-weight:400;margin:0 0 8px;line-height:1.15}
.tutorial-card p{margin:0;color:#555;font-size:.82rem;line-height:1.55}
.tutorial-actions{display:flex;gap:8px;margin-top:14px;align-items:center}
.tutorial-skip{flex:0 0 auto;border:0;background:transparent;color:#666;font-weight:800;padding:10px 12px;cursor:pointer}
.tutorial-next{flex:1;margin-top:0!important}.game-message{position:absolute;z-index:6;top:178px;left:50%;transform:translateX(-50%);background:var(--yellow);color:#111;padding:10px 16px;font-size:.78rem;font-weight:900;box-shadow:5px 5px 0 #0008}.use-progress{position:absolute;z-index:7;left:50%;top:57%;transform:translate(-50%,-50%);width:220px;background:#111216;padding:14px;text-align:center;font-weight:900}.use-progress i{display:block;height:8px;background:var(--yellow);margin-top:9px;transform:scaleX(0);transform-origin:left}.desktop-help{position:absolute;right:16px;bottom:16px;background:#0d0e12bf;padding:8px 11px;color:#c0c4cc;font-size:.65rem}.mobile-controls{display:none}.result-screen{display:grid;place-items:center;background:radial-gradient(circle,#3b414d,#111216);padding:20px}.result-card{width:min(500px,100%);background:#f2f1e9;color:#111216;padding:34px;box-shadow:12px 12px 0 var(--yellow)}.result-card h2{font-family:"Black Han Sans";font-size:3.5rem;font-weight:400;margin:18px 0 4px}.result-card>p{color:#646a74;font-size:.82rem}.winner-badge{display:grid;grid-template-columns:55px 1fr auto;align-items:center;background:#111216;color:white;padding:13px;margin:22px 0}.winner-badge>span{font-family:"Black Han Sans";font-size:2.5rem;color:var(--yellow)}.winner-badge div{display:flex;flex-direction:column;border-left:1px solid #555;padding-left:13px}.winner-badge small{font-size:.6rem;color:#9299a5}.result-card ol{list-style:none;padding:0;margin:0}.result-card li{display:grid;grid-template-columns:25px 1fr auto;padding:8px 2px;border-top:1px solid #d0cfc7;font-size:.75rem;font-weight:800}.result-card li small{color:#777d86}
@media(max-width:820px){.start-screen{grid-template-columns:1fr;align-content:start;padding:max(4vw,calc(env(safe-area-inset-top,0px) + 10px)) 4vw max(4vw,calc(env(safe-area-inset-bottom,0px) + 14px))}.brand-block h1{font-size:3.8rem;margin:8px 0 12px}.panic-copy{font-size:.76rem!important}.start-urgency-strip{width:100%;margin-bottom:8px}.nickname-card{padding:16px;box-shadow:6px 6px 0 #ff405f;margin:0}.control-copy{display:none}.start-screen footer{margin-top:14px;padding-top:10px;color:#ffc2d0;font-size:.62rem}.panic-float.pf1{top:4%;left:2%}.panic-float.pf2{top:6%;right:3%}.panic-float.pf3{bottom:auto;top:38%;left:4%}.panic-float.pf4{top:42%;right:5%}.game-screen .hud{border-width:2px;border-radius:14px;box-shadow:0 4px 12px #0005!important;backdrop-filter:blur(8px);background:rgba(15,17,22,.78)}.top-hud{top:max(6px,env(safe-area-inset-top));left:8px;right:8px;transform:none;width:auto;height:34px;border-radius:14px}.top-hud .logo-mini{display:none}.top-hud>div{min-width:0;flex:1;padding:4px 8px}.top-hud span{font-size:.52rem;line-height:1}.top-hud strong{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}.status-panel{top:calc(max(6px,env(safe-area-inset-top)) + 40px);left:8px;right:8px;width:auto;padding:6px 8px;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:2px 8px;align-items:center}.status-panel .panel-title{display:none}.status-panel .urgency-row{grid-column:1;grid-row:1;margin:0;align-items:center}.status-panel .urgency-row strong{font-size:.95rem;line-height:1}.status-panel .urgency-row small{display:none}.status-panel .meter{grid-column:2;grid-row:1;height:7px;margin:0}.status-panel .inventory{grid-column:3;grid-row:1;border:0;margin:0;padding:0;gap:4px}.status-panel .inventory .roll{width:22px;height:22px;font-size:.55rem}.status-panel .inventory small{display:none}.status-panel .inventory strong{font-size:.68rem}.status-panel .tool-inv{display:none}.mission-panel{top:calc(max(6px,env(safe-area-inset-top)) + 76px);left:8px;right:8px;width:auto;transform:none;padding:5px 10px;border-radius:999px;text-align:left}.mission-panel>span,.mission-panel small{display:none}.mission-panel strong{font-size:.68rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:1.35}.ranking-panel{display:none!important}.desktop-help{display:none}.mobile-controls{display:block;position:absolute;z-index:8;inset:auto 0 15px;pointer-events:none}.joystick{position:absolute;left:18px;bottom:0;width:105px;height:105px;border-radius:50%;background:#ffffff1f;border:2px solid #ffffff33;pointer-events:auto}.joystick i{position:absolute;left:31px;top:31px;width:40px;height:40px;border-radius:50%;background:#ffe04be6}.touch-btn{position:absolute;border:0;border-radius:50%;font-weight:900;pointer-events:auto}.touch-btn.action{right:18px;bottom:0;width:78px;height:78px;background:var(--yellow)}.touch-btn.sprint{right:106px;bottom:55px;width:58px;height:58px;font-size:.65rem}.interaction{bottom:118px;padding:8px 12px;font-size:.72rem}.game-message{top:calc(max(6px,env(safe-area-inset-top)) + 112px);max-width:calc(100% - 24px);text-align:center;padding:7px 12px;font-size:.72rem}.lobby-card{padding:24px}.lobby-card h2{font-size:2.25rem}}
.avatar-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin-top:6px}.avatar-options button{min-width:0;padding:5px 2px 4px;background:#2a121cf2;color:#ffd6e3;border:2px solid #5a3040;border-radius:10px;cursor:pointer;font-size:10px;font-weight:800;line-height:1.1}.avatar-options button[aria-pressed=true]{background:#fff;color:#2a0810;border-color:#ffe04b;box-shadow:0 0 0 2px #ff405f}.avatar-options canvas{display:block;width:100%;height:auto;border-radius:7px;margin-bottom:3px;aspect-ratio:1;background:#b4dbea}.avatar-options span{display:block;font-size:9px;margin-top:1px}.avatar-options legend{font-size:.68rem!important;color:#ffb3c6!important;margin-bottom:4px!important}@media(max-width:820px){.avatar-options{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.avatar-options button{padding:3px 1px 2px}.avatar-options span{font-size:8px}}