#sky-area{position:fixed;inset:0;z-index:70;background:#0a1430;color:#e5f5ff;font-family:system-ui,sans-serif;overflow:hidden;isolation:isolate}
#sky-area[hidden],#sky-area [hidden]{display:none!important}
body.has-sky-area:not(#_){overflow:hidden}
/* style.css의 공통 canvas 여백(15px)이 전장을 아래로 밀어 아래쪽 15px가 잘리던 문제를 막는다. */
#sky-canvas{display:block;width:100%;height:100%;max-width:none;margin:0;border-radius:0}
.sky-hud{position:absolute;top:calc(16px + env(safe-area-inset-top));left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:14px;pointer-events:none}
.sky-hud>div:first-child{display:grid;gap:4px}.sky-hud small{font:9px monospace;letter-spacing:2px;color:#8099b5}.sky-hud b{font-size:23px;letter-spacing:3px}
#sky-clock{font:bold 13px monospace;background:#0b172dcc;border:1px solid #405475;padding:12px 18px;border-radius:30px}
.sky-menu{pointer-events:auto;position:relative;background:#0c1b30f5;border:1px solid #405475;border-radius:12px;font-size:13px}
.sky-menu summary{padding:10px 14px;cursor:pointer}.sky-menu[open]{min-width:150px}.sky-menu button{display:block;width:100%;font-size:12px}
#sky-roster{position:absolute;top:calc(87px + env(safe-area-inset-top));left:20px;right:20px;display:flex;justify-content:center;gap:8px;overflow-x:auto}
#sky-roster button{display:grid;gap:3px;min-width:90px;max-width:155px;flex:1;padding:8px 12px;text-align:left;border:1px solid #5a72934a;border-top:3px solid var(--sky-color);border-radius:10px;background:#09172bba;color:#eaf5ff}
#sky-roster button:disabled{opacity:1;cursor:default}#sky-roster small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}#sky-roster b{font-size:20px;color:var(--sky-color)}#sky-roster span{font:9px monospace;color:#b3c9df}
#sky-status{position:absolute;top:45%;left:10%;right:10%;text-align:center;font-weight:800;font-size:24px;text-shadow:0 3px 12px #000;pointer-events:none}
.sky-help{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:11px;color:#94adca;pointer-events:none}
.sky-control{position:absolute;transform:translate(-50%,-50%);border:2px solid #a1d0e688;border-radius:26%;background:#112a47bd;box-shadow:inset 0 1px 12px #9cdef922,0 4px 20px #0004;color:#eaffff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:28px;gap:0;padding:0;min-width:0;min-height:0;touch-action:none;user-select:none;-webkit-user-select:none}
.sky-control small{font-size:11px}.sky-fire{border-color:#ffcf78;background:#6f4d29c9;color:#ffe5b8}.sky-stick{border-radius:50%;background:#102e4488}.sky-stick i{position:absolute;width:42%;height:42%;border-radius:50%;background:#b7e9fa66;border:2px solid #c8f2ff88;pointer-events:none}.sky-stick span{position:absolute;bottom:8%;font:700 11px/1 monospace;letter-spacing:1px;opacity:.75;pointer-events:none}
.sky-control.selected{outline:3px solid #ffd878;outline-offset:4px}.sky-control:active{filter:brightness(1.25)}
#sky-editor{position:absolute;z-index:5;top:env(safe-area-inset-top,0);left:50%;transform:translateX(-50%);width:min(620px,100%);max-height:65dvh;overflow-y:auto;background:#081b30f5;border:1px solid #5d829b;border-radius:0 0 14px 14px;padding:10px 15px;box-sizing:border-box}
#sky-editor summary{cursor:pointer;text-align:center;font-size:13px;font-weight:700;padding:5px}
.sky-editor-actions{display:flex;gap:6px;margin:8px 0}.sky-editor-actions button{flex:1;font-size:11px;padding:9px 5px}#sky-edit-save{background:#257577}
#sky-editor label{display:flex;align-items:center;gap:10px;font-size:12px;margin:7px 0}#sky-editor select,#sky-editor input{flex:1;min-width:0}#sky-editor output{width:45px}#sky-editor p{font-size:11px;color:#9ab3c8;line-height:1.5}
#sky-area.editing .sky-hud,#sky-area.editing #sky-roster,#sky-area.editing .sky-help,#sky-area.editing #sky-status,#sky-area.editing #sky-time,#sky-area.editing #sky-feed,#sky-area.editing #sky-watch-nav{visibility:hidden}
.sky-player-slot{position:relative}.sky-player-slot>.sky-slot-settings{position:absolute;top:5px;right:5px;width:30px;height:30px;min-width:0;min-height:0;padding:0;border-radius:9px;font-size:16px;background:#172d45;border:1px solid #7595ad66;color:#c3e3f5}
#sky-slot-dialog{width:min(380px,calc(100vw - 32px));padding:20px}#sky-slot-dialog h2{font-size:18px}.sky-slot-form{display:grid;gap:16px;margin-top:16px}.sky-slot-form label{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px}.sky-slot-form select{width:150px}
#sky-lobby-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;margin-bottom:12px;border:1px solid #355274;border-radius:12px;background:#10253a}#sky-lobby-tools p{font-size:12px;color:#aec8de;line-height:1.7;margin:0}#sky-lobby-tools button{font-size:12px}
html.mobile-layout body.has-sky-area:not(#_) #room>.room-sidebar{display:none}
body.sky-chat-open.has-sky-area:not(#_) #room>.room-sidebar{display:flex;position:fixed;z-index:90;top:54px;right:8px;bottom:8px;left:auto;width:min(300px,calc(100vw - 16px));visibility:visible;opacity:1;transform:none;max-height:none}
#sky-chat-close{position:absolute;z-index:95;right:12px;top:10px;font-size:12px}
#sky-invite-ai{display:flex;align-items:center;gap:12px;margin:12px 0;padding:14px;border:1px solid #4c829c;border-radius:12px;background:#163447}#sky-invite-ai>div{display:grid;gap:5px;flex:1}#sky-invite-ai small{color:#a9cbd9;font-size:11px}#sky-invite-ai button{font-size:12px;white-space:nowrap}
html.mobile-layout .sky-help{display:none}

/* Desktop uses the same room shell, chat and actions as every other game. */
@media (hover:hover) and (pointer:fine){
 body.has-sky-area.has-sky-play:not(#_){overflow:auto}
 #sky-area:not(.editing){position:relative;inset:auto;z-index:auto;width:100%;height:clamp(400px,calc(100dvh - 120px),900px);border:1px solid #35455e;border-radius:14px;margin:12px 0}
 #sky-area:not(.editing) .sky-hud{display:none}
 #sky-area:not(.editing) #sky-roster{top:12px;left:12px;right:12px;gap:5px}
 #sky-area:not(.editing) #sky-roster button{min-width:58px;padding:6px}
 #sky-area:not(.editing) #sky-roster b{font-size:16px}
 #sky-area:not(.editing) #sky-chat-close{display:none}
}
#sky-area[data-phase="countdown"] #sky-status{color:#a0efff;font-size:clamp(24px,5vw,58px);letter-spacing:.08em}
#sky-area[data-phase="ended"] #sky-status{color:#ffe09b;background:linear-gradient(90deg,transparent,#111f35dd,transparent);padding:22px 8px}
#sky-key-dialog .sky-key-rows button{max-width:65%}

/* Keep team membership readable without changing the shared room shell. */
#players.sky-team-players{display:flex;flex-direction:column;gap:12px}
.sky-team-row{--team-color:#ff727e;--team-rgb:255,114,126;min-width:0;padding:12px;border:1px solid rgba(var(--team-rgb),.6);border-radius:14px;background:linear-gradient(100deg,rgba(var(--team-rgb),.08),transparent)}
.sky-team-row[data-team="1"]{--team-color:#59c6ff;--team-rgb:89,198,255}
.sky-team-row>b{display:block;margin:0 0 10px;color:var(--team-color);font-size:13px}
.sky-team-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#players .sky-team-slot{height:154px;min-height:154px;min-width:0;border:1px solid rgba(var(--team-rgb),.6);box-shadow:inset 0 2px var(--team-color)}
@media(max-width:700px){.sky-team-row{padding:8px}.sky-team-slots{gap:5px}#players .sky-team-slot{height:140px;min-height:140px;padding:6px}.sky-team-row>b{font-size:12px}}

@media(hover:hover) and (pointer:fine){
 body.has-sky-area.has-sky-play:not(#_) #room>.panel.grow{display:flex;flex-direction:column;height:calc(100dvh - 20px);min-height:460px;box-sizing:border-box}
 body.has-sky-area.has-sky-play:not(#_) #game{display:flex;flex:1;min-height:0;flex-direction:column}
 body.has-sky-area.has-sky-play:not(#_) #game>.game-head{flex:0 0 auto;gap:12px}
 #sky-area:not(.editing){flex:1;min-height:320px;height:auto;margin:10px 0 0}
 #sky-area:not(.editing) #sky-canvas{position:absolute;inset:0}
 body.has-sky-area:not(#_) #timer{font:700 15px monospace;color:#d9e9ff;padding:4px 10px;border-radius:8px;background:#192c44}
 body.has-sky-area:not(#_) #timer.sky-time-critical{color:#ffb6ae;background:#46242b}
}
#sky-status[data-starting="true"]{font-size:clamp(28px,5vw,58px);color:#a0f5df;letter-spacing:.1em}
/* 모바일은 매 프레임 다시 그리는 전장 위라 흐림 효과를 쓰지 않는다. */
:where(html:not(.mobile-layout)) #sky-roster button{backdrop-filter:blur(5px)}



/* Touch feedback must preserve the saved center anchor. */
#sky-controls{position:absolute;inset:0;pointer-events:none}
#sky-controls .sky-control{pointer-events:auto;transition:filter .1s;transform:translate(-50%,-50%)}
#sky-controls .sky-control:hover,#sky-controls .sky-control:active,#sky-controls .sky-control:focus-visible{transform:translate(-50%,-50%)}

#sky-area[data-combat-mode="melee"]:not(.editing) #sky-grenade{display:none!important}

#sky-area:not([data-combat-mode="ranged"]):not(.editing) #sky-knife{display:none!important}
#sky-knife{color:#c9f8ff;border-color:#82c9dc;background:#193b50c9}

/* Ammo shares the existing score card footprint; never adds another row. */
#sky-roster button{position:relative}
#sky-roster .sky-ammo{position:absolute;right:7px;bottom:5px;font:700 9px/12px system-ui;font-style:normal;font-variant-numeric:tabular-nums;color:#c3e3ed;white-space:nowrap;pointer-events:none}
#sky-roster .sky-ammo[hidden]{display:none}

#sky-watch-control{position:absolute;z-index:35;left:12px;top:120px;display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #487789;border-radius:10px;background:#101d30e8;font-size:11px;color:#c7f6ff;pointer-events:auto}
#sky-watch-control[hidden]{display:none}#sky-watch-select{min-width:100px;max-width:180px;min-height:32px;margin:0;padding:4px 8px;font-size:12px}
#sky-roster button:not(:disabled){pointer-events:auto;touch-action:manipulation}

/* 모바일 전용 HUD 요소(배치는 game-shell.css의 skybattle 구역). PC 화면에는 나오지 않는다. */
#sky-time,#sky-feed,#sky-watch-nav{display:none}
#sky-safe{position:absolute;top:0;left:0;width:0;height:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);visibility:hidden;pointer-events:none}
/* 조작 버튼의 남은 폭탄 수·보급 무기 탄약 */
.sky-control .sky-badge{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border:1px solid #ffffff59;border-radius:10px;background:#0b1626;color:#fff;font:800 11px/18px system-ui,sans-serif;font-variant-numeric:tabular-nums;text-align:center;pointer-events:none}
.sky-control.empty{opacity:.5!important}
.sky-control.empty .sky-badge{border-color:#ff8a8a88;color:#ffb3ab}
.sky-bot-tag{font-style:normal}