/*
 * Date: 06NOV2026
 * Author: Minkyu Jung
 * Purpose: 휴대폰 터치 조작 화면. 조이스틱, 버튼(폭파 미션 설치/해체 포함), 가로로 돌리라는 안내와 경기 HUD 배치를 맡는다.
 *          모든 규칙이 html.pc-touch 아래에 있어 PC 화면에는 영향이 없다.
 */
html.pc-touch { touch-action: manipulation; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
html.pc-touch body { -webkit-touch-callout: none; overscroll-behavior: none; }
html.pc-touch #pc-view canvas { touch-action: none; }

/* ---------- 조작 층 ---------- */
.pc-touch-layer { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.pc-touch-layer[hidden] { display: none; }

.pc-stick {
  position: absolute; left: calc(92px + env(safe-area-inset-left)); bottom: 30px; top: auto;
  width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28);
  pointer-events: none;
}
/* 쉬는 자리는 왼쪽 아래다. 누르면 손가락 자리로 옮긴다(touch.js가 left·top을 준다) */
.pc-stick:not(.is-held) { top: auto; margin: 0 0 0 -56px; opacity: .55; }
.pc-stick-knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: rgba(255, 255, 255, .34); box-shadow: 0 2px 8px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 255, 255, .5);
}

.pc-tb {
  position: absolute; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  font: 800 14px/1 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif; color: #fff;
  background: rgba(10, 16, 28, .52); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6); pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pc-tb.is-down { background: rgba(53, 224, 255, .5); box-shadow: inset 0 0 0 2px #8df0ff; }
.pc-tb.is-on { background: rgba(53, 224, 255, .34); box-shadow: inset 0 0 0 2px #8df0ff; }
.pc-tb--fire {
  right: calc(22px + env(safe-area-inset-right)); bottom: 62px; width: 88px; height: 88px; font-size: 18px;
  background: rgba(255, 77, 141, .42); box-shadow: inset 0 0 0 3px rgba(255, 170, 200, .8);
}
.pc-tb--fire.is-down { background: rgba(255, 77, 141, .78); }
.pc-tb--zoom { right: calc(36px + env(safe-area-inset-right)); bottom: 160px; width: 60px; height: 60px; }
/* 라이플의 조준 버튼은 누르는 동안 쏘기도 한다: 발사 버튼과 같은 색 테두리, 두 줄 글자 */
.pc-tb--zoom.is-aimfire { width: 64px; height: 64px; padding: 0 8px; font-size: 13px; line-height: 1.15; box-shadow: inset 0 0 0 3px rgba(255, 170, 200, .8); }
.pc-tb--zoom.is-aimfire.is-down { background: rgba(255, 77, 141, .6); }
.pc-tb--reload { right: calc(120px + env(safe-area-inset-right)); bottom: 128px; width: 54px; height: 54px; }
.pc-tb--jump { right: calc(120px + env(safe-area-inset-right)); bottom: 22px; width: 68px; height: 68px; font-size: 15px; }
.pc-tb--crouch { right: calc(196px + env(safe-area-inset-right)); bottom: 18px; width: 54px; height: 54px; }
/* 폭파 미션 설치/해체(touch:use가 켤 때만 보임): 장전 위, 조준 왼쪽. 좁은 화면의 앉기 자리와 아래 가운데 안내(폭탄 안내 · 안내 줄)에 닿지 않는다 */
.pc-tb--use {
  right: calc(120px + env(safe-area-inset-right)); bottom: 192px; width: 64px; height: 64px; font-size: 15px;
  background: rgba(255, 138, 61, .42); box-shadow: inset 0 0 0 3px rgba(255, 192, 140, .85);
}
.pc-tb--use.is-down { background: rgba(255, 138, 61, .78); box-shadow: inset 0 0 0 3px #ffd2ad; }
.pc-tb-top { top: calc(8px + env(safe-area-inset-top)); width: 44px; height: 34px; border-radius: 9px; font-size: 12px; }
.pc-tb--pause { right: calc(8px + env(safe-area-inset-right)); font-size: 14px; width: 40px; }
.pc-tb--score { right: calc(54px + env(safe-area-inset-right)); }
.pc-tb--emote { right: calc(104px + env(safe-area-inset-right)); width: 52px; }
.pc-tb--chat { right: calc(162px + env(safe-area-inset-right)); width: 48px; }
.pc-tb[hidden] { display: none; }
/* 죽어 있는 동안은 전투 버튼을 치워 무기 고르는 패널을 가리지 않는다.
   개인전 즉시 부활 버튼('부활', touch:use가 켤 때만)만 남아 아래 가운데(무기 칸 바로 위)에 뜬다.
   쏘던 엄지 자리(발사 버튼)는 피한다: 쓰러지는 순간 거듭 누른 발사가 포인트를 쓰지 않게 */
.pc-touch-layer.is-dead .pc-tb-act:not(.pc-tb--use) { display: none; }
.pc-touch-layer.is-dead .pc-tb--use {
  left: 50%; right: auto; bottom: calc(86px + env(safe-area-inset-bottom)); width: 128px; height: 48px; margin-left: -64px;
  border-radius: 24px; font-size: 17px;
}
.pc-touch-layer.is-dead .pc-stick { display: none; }

/* ---------- 세로 화면 안내 ---------- */
.pc-rotate { display: none; }
@media (orientation: portrait) {
  html.pc-touch.pc-ingame .pc-rotate {
    position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    color: #eaf1fb; font: 800 18px/1.4 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
    text-align: center; background: rgba(4, 7, 14, .94);
  }
  .pc-rotate-ico { font-size: 52px; transform: rotate(90deg); }
}

/* ---------- 경기 HUD: 양손이 차지하는 자리를 비운다 ---------- */
html.pc-touch .sk-hp {
  left: calc(8px + env(safe-area-inset-left)); top: calc(8px + env(safe-area-inset-top)); bottom: auto; min-width: 0; gap: 6px; padding: 3px 9px;
  border-bottom-width: 2px;
}
html.pc-touch .sk-hp-ico { width: 20px; height: 20px; font-size: 13px; border-radius: 5px; }
html.pc-touch .sk-hp-num { font-size: 20px; }
html.pc-touch .sk-hp-label { display: none; }
html.pc-touch .sk-hp-bar { height: 3px; margin-top: 2px; width: 62px; }

html.pc-touch .sk-br {
  left: 50%; right: auto; bottom: calc(4px + env(safe-area-inset-bottom)); transform: translateX(-50%); align-items: center; gap: 3px;
}
html.pc-touch .sk-ammo { min-width: 0; padding: 1px 10px 2px; text-align: center; border-bottom-width: 2px; }
html.pc-touch .sk-ammo-wpn { display: none; }
html.pc-touch .sk-ammo-mag { font-size: 20px; }
html.pc-touch .sk-ammo-res { font-size: 12px; }
html.pc-touch .sk-ammo-hint { display: none; }
html.pc-touch .sk-slots { gap: 4px; }
/* 무기 칸은 손가락으로 눌러 바꾼다 */
html.pc-touch .sk-slot { pointer-events: auto; touch-action: none; min-width: 42px; min-height: 40px; justify-content: center; padding: 2px 6px; cursor: pointer; }
html.pc-touch .sk-slot-key { display: none; }
html.pc-touch .sk-slot-nm { display: none; }
html.pc-touch .sk-slot-ico { font-size: 20px; }

html.pc-touch .sk-top { top: calc(4px + env(safe-area-inset-top)); transform: translateX(-50%) scale(.72); transform-origin: top center; }
html.pc-touch .sk-speed { top: 46px; bottom: auto; width: 96px; margin-left: -48px; }
html.pc-touch .sk-killfeed { top: calc(48px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); max-width: 34vw; font-size: 11px; }
/* 전체 공지 띠: 양쪽 위 귀퉁이의 버튼(일시정지·점수판)을 가리지 않게 폭을 줄인다 */
html.pc-touch .sk-notice { top: calc(4px + env(safe-area-inset-top)); max-width: calc(100% - 230px); padding: 5px 10px 5px 8px; }
html.pc-touch .sk-notice-text { font-size: 12.5px; }
html.pc-touch .sk-ui.sk-has-notice .sk-speed { margin-top: var(--sk-notice-h, 0px); }
/* 안내 줄은 눌러서 조작을 시작하거나 총을 버린다 */
/* left 50% 절대 위치라 그냥 두면 화면 폭의 절반에서 줄이 바뀐다. max-content로 두어 max-width까지 한 줄로 쓴다 */
/* 무기 교체 안내는 휴대폰에서 누르는 버튼이다(js/engine/touch.js onHudDown) */
html.pc-touch .sk-swap { top: 58%; padding: 11px 18px; pointer-events: auto; touch-action: none; cursor: pointer; }
html.pc-touch .sk-swap-main { font-size: 15.5px; }
html.pc-touch .sk-hint { bottom: calc(92px + env(safe-area-inset-bottom)); width: max-content; max-width: 44vw; padding: 9px 14px; font-size: 13px; white-space: normal; text-align: center; pointer-events: auto; touch-action: none; cursor: pointer; }
html.pc-touch .sk-spec { bottom: calc(136px + env(safe-area-inset-bottom)); font-size: 12px; }
html.pc-touch .sk-protect { font-size: 12px; }
/* 연속 킬: 아래는 무기 칸·안내 줄·엄지가 차지하므로 크로스헤어 위에 작게 */
html.pc-touch .sk-mk { --mk-size: 56px; top: auto; bottom: calc(50% + 40px); gap: 0; }
html.pc-touch .sk-mk[data-mk="legend"] { --mk-size: 66px; }
/* 가운데 메시지(라운드 결과·합류 안내 등)가 같은 자리에 뜨면 크로스헤어 아래로 내리고 무기 칸에 닿지 않게 그림을 줄인다(hud.js mkAvoidCenter) */
html.pc-touch .sk-mk.is-below { --mk-size: 44px; top: calc(50% + 16px); bottom: auto; }
html.pc-touch .sk-mk.is-below[data-mk="legend"] { --mk-size: 50px; }
html.pc-touch .sk-mk-title, html.pc-touch .sk-mk[data-mk="legend"] .sk-mk-title { font-size: 20px; }
html.pc-touch .sk-mk-sub { font-size: 11.5px; }

/* 폭파 미션: 진영 패널은 줄인 점수 바로 아래에 좁게(위쪽 버튼 줄과 채팅·킬피드 사이), 속도계와 배너는 그 아래로.
 * 아래 안내는 관전 줄 자리(살아 있을 때만 뜬다)에 두고, 설치/해체 막대가 뜨면 가린다(버튼이 누르고 있는 것을 보여 준다) */
html.pc-touch .sk-bomb { top: calc(64px + env(safe-area-inset-top)); gap: 6px; max-width: 30vw; padding: 3px 8px; }
html.pc-touch .sk-bomb .sk-bomb-side { padding: 1px 5px; font-size: 10.5px; }
html.pc-touch .sk-bomb-goal { font-size: 11px; }
html.pc-touch .sk-bomb-status { font-size: 10.5px; }
html.pc-touch .sk-bomb-timer { gap: 3px; padding-left: 6px; }
html.pc-touch .sk-bomb-timer-ico { font-size: 14px; }
html.pc-touch .sk-bomb-num { font-size: 20px; }
html.pc-touch .sk-hud.has-bomb .sk-speed,
html.pc-touch .sk-hud.has-bomb .sk-hud-banner { top: calc(120px + env(safe-area-inset-top)); }
html.pc-touch .sk-bomb-prog { top: calc(50% + 30px); width: 180px; margin-left: -90px; }
html.pc-touch .sk-bomb-prog-label { font-size: 12.5px; }
html.pc-touch .sk-bomb-prompt { bottom: calc(136px + env(safe-area-inset-bottom)); max-width: 28vw; padding: 5px 12px; font-size: 12px; white-space: normal; text-align: center; }
html.pc-touch .sk-bomb-prog:not([hidden]) ~ .sk-bomb-prompt { visibility: hidden; }
html.pc-touch .sk-hp-bomb { padding: 1px 6px; font-size: 11px; }

/* 키보드가 있는 기기라도 터치 조작을 켜면 키 안내는 뺀다 */
html.pc-touch .sk-keys-warn, html.pc-touch .sk-lc-hint { display: none; }
/* iOS Safari는 글자 크기가 16px보다 작은 입력칸을 누르면 화면을 확대한다 */
html.pc-touch input, html.pc-touch textarea, html.pc-touch select { font-size: 16px; }

/* 폭이 좁은 휴대폰: 앉기 버튼이 무기 칸과 겹치지 않게 점프 위로 올린다 */
@media (max-width: 720px) {
  .pc-tb--crouch { right: calc(190px + env(safe-area-inset-right)); bottom: 84px; }
  html.pc-touch .sk-slot { min-width: 38px; padding: 2px 4px; }
}

/* 세로 화면: 경기는 가로 안내가 덮지만 부활 패널과 겹치지 않게 안내 줄을 무기 칸 바로 위에 둔다 */
@media (orientation: portrait) {
  html.pc-touch .sk-hint { bottom: calc(76px + env(safe-area-inset-bottom)); max-width: 86vw; }
}