/*
 * Date: 06NOV2026
 * Author: Minkyu Jung
 * Purpose: 게임 UI 스타일. 어두운 바탕에 시안과 핑크 네온 포인트를 쓴다. 외부 폰트·이미지 없음. 모든 클래스는 sk- 접두사이고 루트는 .sk-ui(js/ui/index.js)다.
 */

/* ===================== 1. 토큰 · 리셋 ===================== */
.sk-ui {
  --sk-cyan: #35e0ff;
  --sk-cyan-hi: #8df0ff;
  --sk-cyan-lo: #14a8c8;
  --sk-pink: #ff4d8d;
  --sk-pink-hi: #ff8ab4;
  --sk-pink-lo: #c7326a;
  --sk-accent: var(--sk-cyan);
  --sk-accent-hi: var(--sk-cyan-hi);
  --sk-accent-lo: var(--sk-cyan-lo);
  --sk-on-accent: #03141b;
  --sk-navy: #0b1220;
  --sk-navy-900: #05080f;
  --sk-navy-700: #141c2e;
  --sk-owner: #3f8cff;
  --sk-owner-hi: #97c1ff;
  --sk-charterer: #ff4f5e;
  --sk-charterer-hi: #ff9d97;
  --sk-text: #eaf1fb;
  --sk-muted: #9dabc2;
  --sk-dim: #7b889f;
  --sk-line: rgba(255, 255, 255, .09);
  --sk-ok: #3ddc97;
  --sk-warn: #ffc845;
  --sk-bad: #ff4d6d;
  --sk-well: rgba(4, 7, 14, .6);
  --sk-edge: rgba(130, 170, 230, .2);
  --sk-font: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sk-stencil: "Segoe UI", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --sk-mono: ui-monospace, "Cascadia Mono", Consolas, "D2Coding", Menlo, monospace;
  --sk-scope: 0;

  position: absolute;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--sk-font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--sk-text);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  user-select: none;
  -webkit-user-select: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}
.sk-ui *, .sk-ui *::before, .sk-ui *::after { box-sizing: border-box; }
.sk-ui [hidden] { display: none !important; }
/* :where()로 명시도 0 — 아래 컴포넌트 규칙이 항상 이긴다 */
:where(.sk-ui) :where(button, input) { font: inherit; color: inherit; }
:where(.sk-ui) :where(h1, h2, h3, p) { margin: 0; }
.sk-ui input, .sk-ui .sk-chat-log { user-select: text; -webkit-user-select: text; }
.sk-ui :focus-visible { outline: 2px solid var(--sk-cyan); outline-offset: 2px; }
.sk-ui .sk-btn--primary:focus-visible, .sk-ui .sk-menu-btn--main:focus-visible, .sk-ui .sk-tab.is-on:focus-visible { outline-color: #fff; }
.sk-ui [tabindex="-1"]:focus { outline: none; }

/* ===================== 2. 공용 장식 ===================== */
.sk-stencil { font-family: var(--sk-stencil); font-weight: 800; letter-spacing: .01em; }

/* 패널: 어두운 유리판 */
.sk-steel {
  background: linear-gradient(180deg, rgba(24, 33, 54, .94), rgba(12, 17, 30, .96));
  border: 1px solid var(--sk-edge);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 34px rgba(0, 0, 0, .38);
}
/* 구분선: 시안에서 핑크로 흐르는 얇은 빛 */
.sk-hazard {
  flex: none;
  height: 2px;
  background: linear-gradient(90deg, var(--sk-cyan), var(--sk-pink));
  box-shadow: 0 0 10px rgba(53, 224, 255, .35);
}
.sk-hazard--thin { height: 1px; opacity: .8; box-shadow: none; }

.sk-chip {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 28px; padding: 0 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.sk-chip--dim { color: var(--sk-muted); font-family: var(--sk-mono); }
.sk-chip--me { color: #fff; }
.sk-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 22px; padding: 0 8px; border-radius: 4px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .03em; white-space: nowrap;
}
.sk-badge--ok { background: rgba(61, 220, 151, .15); color: var(--sk-ok); box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .35); }
.sk-badge--wait { background: rgba(61, 220, 151, .13); color: #7ff0bd; }
.sk-badge--live { background: rgba(255, 77, 141, .16); color: var(--sk-pink-hi); }
.sk-tag {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px;
  background: var(--sk-accent); color: var(--sk-on-accent); font-size: 11px; font-weight: 900; line-height: 1; vertical-align: middle;
}
.sk-key {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 5px;
  background: rgba(255, 255, 255, .08); color: var(--sk-text);
  font: 800 12px/1 var(--sk-font); white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(160, 195, 245, .35), 0 2px 0 rgba(0, 0, 0, .45);
}
.sk-ping { font: 700 12px/1 var(--sk-mono); white-space: nowrap; }
.sk-ping.is-good { color: var(--sk-ok); }
.sk-ping.is-mid { color: var(--sk-warn); }
.sk-ping.is-bad { color: var(--sk-bad); }
.sk-ping.is-na { color: var(--sk-dim); }
.sk-ui .t-owner { color: var(--sk-owner-hi); }
.sk-ui .t-charterer { color: var(--sk-charterer-hi); }
.sk-ui .t-none, .sk-ui .t-draw { color: var(--sk-muted); }

/* 포인트 */
.sk-points { display: inline-flex; align-items: center; gap: 6px; color: var(--sk-pink-hi); white-space: nowrap; }
.sk-points-ico { flex: none; font-size: 1.15em; }
.sk-points-val { font-weight: 800; font-variant-numeric: tabular-nums; }
.sk-points--big {
  flex: none; padding: 6px 12px; border-radius: 8px; font: 800 18px/1.2 var(--sk-stencil);
  background: rgba(255, 77, 141, .1); box-shadow: inset 0 0 0 1px rgba(255, 77, 141, .38);
}

/* 맵 아이콘(SVG) · 선 아이콘 */
.sk-mapico { display: block; color: #cfdcf0; }
.sk-ic-fill { fill: currentColor; opacity: .85; }
.sk-ic-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.sk-ic-accent { fill: none; stroke: var(--sk-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sk-uico { display: block; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ===================== 3. 컨트롤 ===================== */
.sk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 0 16px; border: 0; border-radius: 7px;
  font: 700 14px/1.2 var(--sk-font); letter-spacing: .01em; color: var(--sk-text); white-space: nowrap;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(160, 195, 245, .26);
  cursor: pointer; transition: background .12s, box-shadow .12s, transform .06s;
}
.sk-btn:hover:not(:disabled) { background: rgba(53, 224, 255, .12); box-shadow: inset 0 0 0 1px rgba(53, 224, 255, .7), 0 0 14px rgba(53, 224, 255, .18); }
.sk-btn:active:not(:disabled) { transform: translateY(1px); }
.sk-btn:disabled { opacity: .45; cursor: not-allowed; }
.sk-btn--primary { color: var(--sk-on-accent); font-weight: 800; background: linear-gradient(180deg, #62e9ff, #22c6ea); box-shadow: 0 0 18px rgba(53, 224, 255, .28); }
.sk-btn--primary:hover:not(:disabled) { background: linear-gradient(180deg, #86efff, #3bd3f2); box-shadow: 0 0 22px rgba(53, 224, 255, .45); }
.sk-btn--danger { color: #fff; background: rgba(255, 77, 141, .18); box-shadow: inset 0 0 0 1px rgba(255, 77, 141, .7); }
.sk-btn--danger:hover:not(:disabled) { background: rgba(255, 77, 141, .34); box-shadow: inset 0 0 0 1px var(--sk-pink), 0 0 14px rgba(255, 77, 141, .28); }
.sk-btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.sk-btn--icon { min-width: 40px; min-height: 40px; padding: 0; font-size: 16px; }
.sk-btn--sm { min-height: 32px; padding: 0 10px; font-size: 12.5px; }
.sk-btn--big { min-height: 50px; padding: 0 26px; font-size: 16px; }

.sk-input {
  width: 100%; min-height: 44px; padding: 0 12px; border-radius: 7px;
  border: 1px solid rgba(160, 195, 245, .28); background: rgba(4, 7, 14, .72); color: var(--sk-text);
  font: 700 15px/1.2 var(--sk-font);
}
.sk-input::placeholder { color: var(--sk-dim); font-weight: 500; }
.sk-input:focus, .sk-input:focus-visible { outline: none; border-color: var(--sk-cyan); box-shadow: 0 0 0 3px rgba(53, 224, 255, .22); }
.sk-input[aria-invalid="true"] { border-color: var(--sk-pink); }
.sk-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(255, 77, 141, .22); }
.sk-input[readonly] { opacity: .7; }

.sk-range { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 0; background: transparent; --fill: 50%; cursor: pointer; }
.sk-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--sk-cyan) 0 var(--fill), rgba(4, 7, 14, .85) var(--fill) 100%);
  box-shadow: 0 0 0 1px rgba(160, 195, 245, .22);
}
.sk-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: #eaf9ff; border: 2px solid var(--sk-cyan); box-shadow: 0 0 10px rgba(53, 224, 255, .5);
}
.sk-range::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--sk-cyan) 0 var(--fill), rgba(4, 7, 14, .85) var(--fill) 100%);
  box-shadow: 0 0 0 1px rgba(160, 195, 245, .22);
}
.sk-range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #eaf9ff; border: 2px solid var(--sk-cyan); box-shadow: 0 0 10px rgba(53, 224, 255, .5);
}
.sk-range:focus-visible { outline-offset: 4px; }

.sk-seg { display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: 3px; padding: 3px; border-radius: 8px; background: rgba(4, 7, 14, .68); box-shadow: inset 0 0 0 1px rgba(160, 195, 245, .18); }
.sk-seg-btn { min-height: 36px; background: transparent; box-shadow: none; color: var(--sk-muted); }
.sk-seg-btn.is-on { color: var(--sk-on-accent); font-weight: 800; background: var(--sk-cyan); }
.sk-seg-btn.is-on:hover:not(:disabled) { background: var(--sk-cyan-hi); box-shadow: none; }

/* 하나만 고르는 작은 버튼 묶음(장비 칸) */
.sk-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-choice {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 1px solid var(--sk-edge); border-radius: 6px;
  background: rgba(255, 255, 255, .04); color: var(--sk-muted); font: 700 12.5px/1.2 var(--sk-font); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.sk-choice:hover { color: var(--sk-text); border-color: rgba(53, 224, 255, .6); }
.sk-choice.is-on { color: #fff; border-color: var(--sk-cyan); background: rgba(53, 224, 255, .16); box-shadow: 0 0 10px rgba(53, 224, 255, .2); }
.sk-choice-ico { font-size: 15px; line-height: 1; }
.sk-choice-ico:empty { display: none; }
.sk-choice:disabled { cursor: not-allowed; opacity: .55; pointer-events: none; }

.sk-field { display: flex; flex-direction: column; gap: 6px; }
.sk-field-label, .sk-card-label { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--sk-muted); }
.sk-field-hint { font-size: 12px; color: var(--sk-dim); }
.sk-field-err { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--sk-bad); }
.sk-field-err:empty { display: none; }
.sk-stepper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sk-stepper-val { min-width: 64px; text-align: center; font: 900 22px/1 var(--sk-mono); }
.sk-row { display: flex; gap: 8px; }
.sk-row > .sk-btn { flex: 1; }

/* ===================== 4. 화면 골격 ===================== */
.sk-screen { position: absolute; inset: 0; }
.sk-page {
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; pointer-events: auto;
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(255, 77, 141, .14), transparent 62%),
    radial-gradient(800px 480px at -8% 112%, rgba(53, 224, 255, .12), transparent 60%),
    linear-gradient(180deg, #0a0f1c, #05080f);
  animation: sk-fade .2s ease-out;
}
.sk-page-inner {
  position: relative; max-width: 1180px; min-height: 100%; margin: 0 auto;
  padding: clamp(14px, 3vw, 32px); display: flex; flex-direction: column; gap: 16px;
}
.sk-overlay { pointer-events: none; animation: sk-fade .16s ease-out; }

.sk-modal {
  position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px;
  overflow-y: auto; overscroll-behavior: contain; pointer-events: auto;
  background: rgba(3, 5, 10, .72); animation: sk-fade .15s ease-out;
}
.sk-sheet { width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; outline: none; }
.sk-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 4px; }
.sk-sheet-title { font-size: 20px; }
.sk-sheet-body { display: flex; flex-direction: column; gap: 16px; padding: 10px 18px 16px; overflow-y: auto; }
.sk-sheet-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--sk-line); }
.sk-panel { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; min-width: 0; }
.sk-panel-title { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--sk-muted); }

.sk-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sk-bar-title { flex: 1 1 220px; min-width: 0; }
.sk-h1 { font-size: clamp(22px, 3vw, 30px); line-height: 1.15; }
.sk-bar-sub { margin-top: 2px; font-size: 13px; color: var(--sk-muted); }
.sk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sk-bar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sk-note, .sk-set-hint { font-size: 12px; color: var(--sk-dim); }

/* ===================== 5. 설정 · 조작법 시트 ===================== */
.sk-set-row { display: flex; flex-direction: column; gap: 6px; }
.sk-set-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sk-set-label { font-size: 14.5px; font-weight: 800; }
.sk-set-val { min-width: 56px; text-align: right; font: 800 15px/1 var(--sk-mono); color: var(--sk-accent-hi); }

.sk-controls { width: min(760px, 100%); }
.sk-keys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.sk-keys-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.sk-keys-caps { display: flex; flex-wrap: wrap; gap: 3px; flex: none; width: 112px; }
.sk-keys-desc { font-size: 13px; font-weight: 600; color: #dbe6f3; }
.sk-sub-title { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--sk-accent-hi); }
.sk-rules { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #dbe6f3; }

/* ===================== 6. 메인 메뉴 ===================== */
.sk-menu { display: flex; }
.sk-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sk-bd-band { fill: rgba(53, 224, 255, .035); }
.sk-bd-band--pink { fill: rgba(255, 77, 141, .04); }
.sk-bd-line { fill: none; stroke-width: 1.5; }
.sk-bd-line--cyan { stroke: rgba(53, 224, 255, .45); }
.sk-bd-line--pink { stroke: rgba(255, 77, 141, .45); }
.sk-bd-ring { fill: none; stroke: rgba(160, 195, 245, .1); stroke-width: 1.5; }
.sk-menu-wrap {
  position: relative; z-index: 1; width: min(1100px, 100%); margin: auto; padding: clamp(18px, 5vh, 48px) clamp(16px, 4vw, 44px);
  display: grid; gap: 18px 36px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  grid-template-areas: "brand player" "nav player" "note player";
}
.sk-brand { grid-area: brand; }
.sk-brand-title {
  display: inline-block; font: 900 clamp(46px, 7.2vw, 84px)/1.02 var(--sk-stencil); letter-spacing: -.01em; color: var(--sk-cyan);
  background: linear-gradient(100deg, #f4feff 10%, var(--sk-cyan) 55%, var(--sk-pink) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(53, 224, 255, .28));
}
.sk-brand-tag { margin-top: 6px; font-size: 14px; color: var(--sk-muted); }
.sk-player { grid-area: player; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; margin-top: 8px; }
.sk-name-view { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sk-name-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 22px; color: var(--sk-cyan); background: rgba(53, 224, 255, .1); box-shadow: inset 0 0 0 1px rgba(53, 224, 255, .45); }
.sk-name-text { min-width: 0; font: 800 20px/1.2 var(--sk-stencil); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-player .sk-points--big { align-self: flex-start; }
.sk-player-mypage { width: 100%; }
.sk-menu-nav { grid-area: nav; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.sk-menu-btn {
  grid-column: span 6; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; min-width: 0;
  border: 1px solid var(--sk-edge); border-radius: 10px; text-align: left; color: var(--sk-text); cursor: pointer;
  background: rgba(14, 20, 34, .84); box-shadow: 0 8px 22px rgba(0, 0, 0, .26);
  transition: background .12s, border-color .12s, box-shadow .12s, transform .06s;
}
.sk-menu-btn:hover:not(:disabled) { border-color: rgba(53, 224, 255, .75); background: rgba(22, 34, 54, .92); box-shadow: 0 0 0 1px rgba(53, 224, 255, .3), 0 0 22px rgba(53, 224, 255, .16); }
.sk-menu-btn:active:not(:disabled) { transform: translateY(1px); }
.sk-menu-btn:disabled { cursor: not-allowed; opacity: .6; }
.sk-menu-btn--main { min-height: 78px; color: var(--sk-on-accent); border-color: transparent; background: linear-gradient(100deg, #62e9ff, #22c6ea 70%); box-shadow: 0 0 26px rgba(53, 224, 255, .3); }
.sk-menu-btn--main:hover:not(:disabled) { border-color: transparent; background: linear-gradient(100deg, #8ef0ff, #3bd3f2 70%); box-shadow: 0 0 34px rgba(53, 224, 255, .5); }
.sk-menu-btn--wide { grid-column: span 3; }
.sk-menu-btn--sub { grid-column: span 2; min-height: 58px; padding: 10px 12px; gap: 10px; }
.sk-menu-ico { flex: none; font-size: 26px; line-height: 1; color: var(--sk-cyan); }
.sk-menu-btn--main .sk-menu-ico { font-size: 32px; color: inherit; }
.sk-menu-btn--sub .sk-menu-ico { font-size: 22px; color: var(--sk-muted); }
.sk-menu-btn.is-locked .sk-menu-ico { color: var(--sk-dim); }
.sk-menu-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sk-menu-label { font-size: 16.5px; font-weight: 800; }
.sk-menu-btn--main .sk-menu-label { font-size: 21px; }
.sk-menu-btn--sub .sk-menu-label { font-size: 15px; }
.sk-menu-sub { font-size: 12px; opacity: .78; }
.sk-menu-note { grid-area: note; font-size: 12.5px; color: var(--sk-warn); }
.sk-back {
  align-self: center; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
  color: var(--sk-muted); font-size: 14px; font-weight: 700; text-decoration: none;
}
.sk-back:hover { color: #fff; background: rgba(255, 255, 255, .06); }

/* ===================== 7. 로비 ===================== */
.sk-lobby-count { font-weight: 700; color: var(--sk-text); }
.sk-lobby-status:empty { display: none; }
.sk-alert { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.sk-alert--bad { background: rgba(255, 90, 79, .12); color: #ffb4ad; box-shadow: inset 0 0 0 1px rgba(255, 90, 79, .35); }
.sk-alert--info { background: rgba(53, 224, 255, .08); color: #c8f2ff; box-shadow: inset 0 0 0 1px rgba(53, 224, 255, .3); }
.sk-rooms { display: flex; flex-direction: column; gap: 8px; }
.sk-room-row {
  display: grid; align-items: center; gap: 8px 14px; padding: 10px 14px;
  grid-template-columns: 56px minmax(0, 1fr) 92px 72px 104px;
  grid-template-areas: "ico main count badge join";
}
.sk-room-row.is-locked { opacity: .78; }
.sk-room-ico { grid-area: ico; display: grid; place-items: center; width: 56px; height: 40px; border-radius: 7px; background: var(--sk-well); box-shadow: inset 0 0 0 1px var(--sk-edge); }
.sk-room-ico .sk-mapico { width: 44px; height: 30px; }
.sk-room-main { grid-area: main; min-width: 0; }
.sk-room-name { font-size: 16px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-room-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: var(--sk-muted); }
.sk-room-host { display: inline-flex; gap: 4px; }
.sk-room-count { grid-area: count; }
.sk-room-count b { font: 900 16px/1 var(--sk-mono); }
.sk-meter { display: block; height: 5px; margin-top: 6px; border-radius: 3px; background: rgba(4, 7, 14, .85); overflow: hidden; }
.sk-meter i { display: block; height: 100%; background: var(--sk-accent); transform-origin: left; }
.sk-room-row > .sk-badge { grid-area: badge; }
.sk-room-join { grid-area: join; width: 100%; }
.sk-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 16px; text-align: center; border: 2px dashed rgba(130, 170, 230, .2); border-radius: 12px; }
.sk-empty-art .sk-mapico { width: 120px; height: 80px; color: var(--sk-dim); }
.sk-empty-title { margin-top: 6px; font-size: 18px; font-weight: 900; }
.sk-empty-sub { margin-bottom: 10px; color: var(--sk-muted); }
.sk-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px 0; color: var(--sk-muted); }
.sk-spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .15); border-top-color: var(--sk-accent); animation: sk-spin .8s linear infinite; }

.sk-create-sheet { width: min(720px, 100%); }
.sk-create { display: flex; flex-direction: column; gap: 16px; }
.sk-form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--sk-line); }
.sk-mapcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sk-mapcard {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border: 0; border-radius: 9px;
  text-align: left; color: var(--sk-text); cursor: pointer; background: var(--sk-well); box-shadow: inset 0 0 0 1px rgba(130, 170, 230, .18);
  transition: background .12s, box-shadow .12s;
}
.sk-mapcard:hover { background: rgba(30, 42, 66, .75); }
.sk-mapcard.is-on { background: rgba(53, 224, 255, .12); box-shadow: inset 0 0 0 2px var(--sk-accent); }
.sk-mapcard .sk-mapico { width: 100%; height: 64px; padding: 4px; border-radius: 6px; background: linear-gradient(180deg, rgba(61, 127, 224, .14), rgba(4, 7, 14, .2)); }
.sk-mapcard-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sk-mapcard-name { font-size: 14.5px; font-weight: 900; }
.sk-mapcard-en { font-size: 11px; letter-spacing: .04em; color: var(--sk-muted); }
.sk-mapcard-desc { margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--sk-muted); }
.sk-mapcard-tag { align-self: flex-start; margin-top: 5px; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 800; color: var(--sk-pink-hi); background: rgba(255, 77, 141, .12); box-shadow: inset 0 0 0 1px rgba(255, 77, 141, .3); }
.sk-mapcard--sm, .sk-mapcard.is-static { flex-direction: row; align-items: center; gap: 12px; }
.sk-mapcard--sm { padding: 6px 8px; }
.sk-mapcard--sm .sk-mapico { flex: none; width: 48px; height: 32px; padding: 2px; }
.sk-mapcard.is-static { cursor: default; padding: 10px; }
.sk-mapcard.is-static:hover { background: var(--sk-well); }
.sk-mapcard.is-static .sk-mapico { flex: none; width: 88px; height: 58px; }
.sk-mapcards--sm { grid-template-columns: 1fr; gap: 6px; }

/* ===================== 8. 방(대기실) ===================== */
.sk-room-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 자리 비움 안내(js/ui/room.js idleBar): 방이 곧 닫힌다 + [계속 기다리기].
 * 명단·채팅을 보려고 아래로 내려가 있어도 보이게 화면 위에 붙인다(아래 준비 줄 .sk-room-foot처럼 sticky) */
.sk-room-idle {
  position: sticky; top: 8px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px;
  margin: 0 0 12px; padding: 8px 12px; border-radius: 8px;
  background: #3a3112; box-shadow: inset 0 0 0 1px rgba(255, 200, 69, .55), 0 6px 18px rgba(0, 0, 0, .45);
}
.sk-room-idle[hidden] { display: none; }
.sk-room-idle-text { flex: 1 1 220px; min-width: 0; font-size: 14px; font-weight: 800; color: var(--sk-warn); }
.sk-room-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.sk-room-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sk-room-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: start; }
.sk-unassigned { grid-column: 1 / -1; padding: 8px 12px; border-radius: 8px; background: rgba(255, 200, 69, .1); color: var(--sk-warn); font-size: 13px; font-weight: 700; }
.sk-vs { align-self: center; font: 900 20px/1 var(--sk-stencil); letter-spacing: .1em; color: var(--sk-dim); }
.sk-team { overflow: hidden; }
.sk-team-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 58px; padding: 10px 14px; border-bottom: 1px solid var(--sk-line); }
.sk-team--owner .sk-team-head { border-top: 4px solid var(--sk-owner); background: linear-gradient(90deg, rgba(61, 127, 224, .35), rgba(61, 127, 224, 0)); }
.sk-team--charterer .sk-team-head { border-top: 4px solid var(--sk-charterer); background: linear-gradient(90deg, rgba(232, 52, 64, .3), rgba(232, 52, 64, 0)); }
.sk-team-name { flex: 1; display: flex; align-items: baseline; gap: 6px; font-size: 18px; font-weight: 900; }
.sk-team-name small { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--sk-muted); }
.sk-team-count { font: 800 13px/1 var(--sk-mono); color: var(--sk-muted); }
.sk-team-list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.sk-pl { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 10px; border-radius: 7px; background: var(--sk-well); box-shadow: inset 0 0 0 1px rgba(130, 170, 230, .1); }
.sk-pl.is-me { box-shadow: inset 0 0 0 2px rgba(53, 224, 255, .8); }
.sk-pl-crown { flex: none; width: 18px; text-align: center; }
.sk-pl-name { flex: 1; min-width: 0; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-pl-ready { flex: none; min-width: 52px; text-align: right; font-size: 12px; font-weight: 800; color: var(--sk-dim); }
.sk-pl.is-ready .sk-pl-ready { color: var(--sk-ok); }
.sk-pl--empty { background: transparent; box-shadow: none; border: 1px dashed rgba(130, 170, 230, .16); }
.sk-pl--empty .sk-pl-name { color: var(--sk-dim); font-weight: 600; }
.sk-room-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* 개인전 목표 킬: 규칙 칸 아래. 방장에게만 − 값 ＋ 와 빠른 선택이 보인다 */
.sk-room-kills { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--sk-line); }
.sk-room-kills-title { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--sk-ffa-hi); }
.sk-chat-log { list-style: none; margin: 0; padding: 8px 10px; height: 220px; overflow-y: auto; border-radius: 7px; background: var(--sk-well); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4); font-size: 13.5px; }
.sk-chat-log li + li { margin-top: 3px; }
.sk-chat-line { overflow-wrap: anywhere; }
.sk-chat-name::after { content: ":"; margin-right: 6px; color: var(--sk-dim); }
.sk-chat-sys { font-size: 12.5px; font-style: italic; color: var(--sk-dim); }
.sk-chat-form { display: flex; gap: 6px; }
.sk-room-foot { position: sticky; bottom: 0; z-index: 2; margin-top: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
.sk-room-status { flex: 1 1 260px; font-size: 14px; font-weight: 700; color: var(--sk-muted); }
.sk-room-status.is-ok { color: var(--sk-ok); }
.sk-room-foot-actions { display: flex; gap: 8px; }
.sk-ready-btn.is-on { color: #04210f; background: linear-gradient(180deg, #43d496, #22935f); }

/* ===================== 9. 로드아웃 ===================== */
.sk-loadout {
  display: grid; place-items: center; padding: 16px; overflow-y: auto; pointer-events: auto;
  background: radial-gradient(ellipse at center, rgba(5, 8, 16, .66), rgba(5, 8, 16, .93));
}
.sk-lo-panel { width: min(1180px, 100%); display: flex; flex-direction: column; gap: 10px; }
.sk-lo-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sk-lo-title { font-size: clamp(20px, 2.6vw, 28px); line-height: 1.15; }
.sk-lo-sub { margin-top: 2px; font-size: 13px; color: var(--sk-muted); }
.sk-lo-count {
  flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  font: 900 26px/1 var(--sk-mono); color: var(--sk-cyan);
  background: rgba(53, 224, 255, .08); box-shadow: inset 0 0 0 2px var(--sk-cyan), 0 0 18px rgba(53, 224, 255, .3);
}
.sk-loadout.is-urgent .sk-lo-count { color: var(--sk-pink-hi); background: rgba(255, 77, 141, .12); box-shadow: inset 0 0 0 2px var(--sk-pink), 0 0 20px rgba(255, 77, 141, .4); animation: sk-throb .5s ease-in-out infinite alternate; }
.sk-lo-bar { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.sk-lo-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sk-cyan), var(--sk-pink)); transform-origin: left; }
.sk-lo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(226px, 284px)); justify-content: center; gap: 10px; }
.sk-lo-card {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px; border: 1px solid var(--sk-edge); border-radius: 9px;
  text-align: left; color: var(--sk-text); cursor: pointer; background: rgba(14, 20, 34, .94);
  transition: border-color .12s, background .12s, box-shadow .12s, transform .08s;
}
.sk-lo-card:hover { transform: translateY(-1px); border-color: rgba(53, 224, 255, .75); box-shadow: 0 0 0 1px rgba(53, 224, 255, .3), 0 10px 24px rgba(0, 0, 0, .4); }
.sk-lo-card.is-sel { border-color: var(--sk-cyan); background: rgba(19, 44, 60, .94); box-shadow: 0 0 0 1px var(--sk-cyan), 0 0 18px rgba(53, 224, 255, .22); }
.sk-lo-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sk-lo-head .sk-key { flex: none; min-width: 22px; height: 22px; padding: 0 5px; font-size: 11px; }
.sk-lo-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; font-size: 22px; line-height: 1; background: rgba(4, 7, 14, .62); box-shadow: inset 0 0 0 1px var(--sk-edge); }
.sk-lo-names { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sk-lo-name { font-size: 14.5px; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-lo-tagline { font-size: 11.5px; color: var(--sk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-lo-sum { display: flex; flex-wrap: wrap; gap: 3px; }
.sk-lo-sumitem { display: inline-flex; align-items: baseline; gap: 3px; padding: 2px 5px; border-radius: 4px; font-size: 11.5px; white-space: nowrap; background: rgba(4, 7, 14, .55); }
.sk-lo-sumitem small { font-size: 10.5px; font-weight: 700; color: var(--sk-muted); }
.sk-lo-sumitem b { font-weight: 800; font-variant-numeric: tabular-nums; }
.sk-lo-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; }
.sk-lo-barrow { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: var(--sk-muted); }
.sk-lo-meter { margin-top: 0; height: 4px; }
.sk-lo-meter i { background: linear-gradient(90deg, var(--sk-cyan), var(--sk-pink)); }
.sk-lo-extras {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; padding: 8px 12px; border-radius: 9px;
  background: rgba(4, 7, 14, .6); box-shadow: inset 0 0 0 1px var(--sk-edge);
}
.sk-lo-extra { display: flex; align-items: center; gap: 8px; }
.sk-lo-extralabel { font-size: 12px; font-weight: 800; color: var(--sk-muted); }
.sk-lo-foot { text-align: center; font-size: 12.5px; color: var(--sk-muted); }
.sk-lo-empty { padding: 32px; text-align: center; color: var(--sk-muted); }

/* ===================== 10. HUD ===================== */
.sk-hud { pointer-events: none; }
.sk-vignette {
  position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: radial-gradient(ellipse at center, rgba(120, 0, 0, 0) 46%, rgba(165, 16, 8, .5) 78%, rgba(120, 0, 0, .9) 100%);
}
.sk-vignette::after { content: ""; position: absolute; inset: 0; background: inherit; opacity: 0; }
.sk-vignette.is-pulse::after { animation: sk-vpulse 1s ease-in-out infinite; }
.sk-flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, rgba(255, 40, 30, 0) 45%, rgba(255, 40, 30, .55) 100%); }

/* 크로스헤어: --gap(px)이 탄퍼짐 */
.sk-xhair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --gap: 6px; --len: 9px; opacity: calc(1 - var(--sk-scope, 0) * 2.5); }
.sk-xhair i { position: absolute; display: block; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); transition: transform .06s linear; }
.sk-xh-t, .sk-xh-b { width: 2px; height: var(--len); left: -1px; }
.sk-xh-l, .sk-xh-r { width: var(--len); height: 2px; top: -1px; }
.sk-xh-t { top: calc(-1 * var(--len)); transform: translateY(calc(-1 * var(--gap))); }
.sk-xh-b { top: 0; transform: translateY(var(--gap)); }
.sk-xh-l { left: calc(-1 * var(--len)); transform: translateX(calc(-1 * var(--gap))); }
.sk-xh-r { left: 0; transform: translateX(var(--gap)); }
.sk-xh-dot { width: 2px; height: 2px; left: -1px; top: -1px; }
/* 커서가 필요한 화면(로드아웃·일시정지)이 떠 있으면 조준 표시는 숨긴다 */
.sk-ui.sk-cursor .sk-xhair, .sk-ui.sk-cursor .sk-hit { visibility: hidden; }

/* 히트마커(X) */
.sk-hit { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; opacity: 0; }
.sk-hit i { position: absolute; left: 50%; top: 50%; width: 2.5px; height: 9px; margin: -4.5px 0 0 -1.25px; background: #fff; box-shadow: 0 0 2px rgba(0, 0, 0, .9); }
.sk-hit i:nth-child(1) { transform: rotate(-45deg) translateY(-11px); }
.sk-hit i:nth-child(2) { transform: rotate(45deg) translateY(-11px); }
.sk-hit i:nth-child(3) { transform: rotate(135deg) translateY(-11px); }
.sk-hit i:nth-child(4) { transform: rotate(-135deg) translateY(-11px); }
.sk-hit.is-head i { height: 12px; margin-top: -6px; width: 3px; background: var(--sk-pink); box-shadow: 0 0 5px rgba(255, 77, 141, .9); }
.sk-hit.is-kill i { background: #ff3b30; box-shadow: 0 0 5px rgba(255, 59, 48, .9); }

/* 피격 방향: 중심 기준 회전하는 호 */
.sk-dmgs { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.sk-dmg { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.sk-dmg i { position: absolute; left: -130px; top: -130px; width: 260px; height: 260px; border-radius: 50%; border: 14px solid transparent; border-top-color: rgba(255, 52, 36, .9); filter: drop-shadow(0 0 6px rgba(255, 40, 20, .8)); }

/* 상단 스코어 */
.sk-top { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; gap: 6px; }
.sk-ts, .sk-tc { border-radius: 7px; background: linear-gradient(180deg, rgba(18, 26, 44, .88), rgba(9, 13, 24, .88)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 12px rgba(0, 0, 0, .3); }
.sk-ts { position: relative; min-width: 136px; padding: 6px 12px; }
.sk-ts--owner { border-left: 4px solid var(--sk-owner); }
.sk-ts--charterer { border-right: 4px solid var(--sk-charterer); text-align: right; }
.sk-ts-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sk-ts--charterer .sk-ts-row, .sk-ts--charterer .sk-ts-alive { flex-direction: row-reverse; }
.sk-ts-name { font-size: 13px; font-weight: 900; letter-spacing: .04em; }
.sk-ts--owner .sk-ts-name { color: var(--sk-owner-hi); }
.sk-ts--charterer .sk-ts-name { color: var(--sk-charterer-hi); }
.sk-ts-score { font: 900 30px/1 var(--sk-stencil); }
.sk-ts-alive { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.sk-ts-alive-n { font-size: 11px; font-weight: 800; color: var(--sk-muted); }
.sk-pips { display: inline-flex; gap: 3px; }
.sk-pips i { width: 9px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.sk-ts--owner .sk-pips i.is-alive { background: var(--sk-owner-hi); box-shadow: none; }
.sk-ts--charterer .sk-pips i.is-alive { background: var(--sk-charterer-hi); box-shadow: none; }
.sk-ts-mp { display: block; margin-top: 3px; font-size: 10px; font-weight: 900; letter-spacing: .06em; color: var(--sk-warn); }
.sk-ts.is-mine::before {
  content: "내 팀"; position: absolute; top: -8px; padding: 1px 6px; border-radius: 3px;
  font-size: 9.5px; font-weight: 900; line-height: 1.4; color: #06172d; background: #fff;
}
.sk-ts--owner.is-mine::before { left: 8px; }
.sk-ts--charterer.is-mine::before { right: 8px; }
.sk-tc { min-width: 96px; padding: 5px 12px; text-align: center; }
.sk-timer { font: 900 26px/1.1 var(--sk-mono); font-variant-numeric: tabular-nums; }
.sk-timer.is-urgent { color: var(--sk-bad); animation: sk-blink 1s steps(2) infinite; }
.sk-tc-sub { margin-top: 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; color: var(--sk-muted); white-space: nowrap; }

/* 체력 */
.sk-hp {
  position: absolute; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; min-width: 212px; padding: 10px 14px;
  border-radius: 8px; border-bottom: 3px solid var(--sk-accent); background: rgba(9, 13, 24, .74); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.sk-hp-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; font-size: 20px; font-weight: 900; color: #fff; background: rgba(255, 255, 255, .08); }
.sk-hp-main { flex: 1; min-width: 0; }
.sk-hp-top { display: flex; align-items: baseline; gap: 8px; }
.sk-hp-num { font: 900 34px/1 var(--sk-stencil); font-variant-numeric: tabular-nums; }
.sk-hp-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--sk-muted); }
.sk-hp-bar { height: 6px; margin-top: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.sk-hp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #dfe8f3, #fff); transform-origin: left; transition: transform .2s; }
.sk-hp.is-low .sk-hp-bar i { background: linear-gradient(90deg, var(--sk-warn), var(--sk-warn)); }
.sk-hp.is-low .sk-hp-num { color: var(--sk-warn); }
.sk-hp.is-crit .sk-hp-num, .sk-hp.is-crit .sk-hp-ico { color: var(--sk-bad); }
.sk-hp.is-crit .sk-hp-bar i { background: var(--sk-bad); }
.sk-hp.is-dead { opacity: .55; }

/* 무기 슬롯 + 탄약 */
.sk-br { position: absolute; right: 18px; bottom: 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sk-slots { display: flex; gap: 6px; }
.sk-slot {
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 5px; border-radius: 6px;
  font-size: 12px; font-weight: 800; color: var(--sk-muted); background: rgba(8, 12, 22, .68); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: background .12s, color .12s;
}
.sk-slot-key { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; font: 900 12px/1 var(--sk-font); color: var(--sk-text); background: rgba(255, 255, 255, .1); }
.sk-slot-ico { font-size: 15px; line-height: 1; }
.sk-slot.is-active { color: #fff; background: rgba(53, 224, 255, .22); box-shadow: inset 0 0 0 2px var(--sk-accent); }
.sk-slot.is-active .sk-slot-key { color: var(--sk-on-accent); background: var(--sk-accent); }
.sk-slot.is-empty { opacity: .32; }
.sk-ammo {
  min-width: 204px; padding: 10px 14px; text-align: right; border-radius: 8px; border-bottom: 3px solid var(--sk-accent);
  background: rgba(9, 13, 24, .74); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.sk-ammo-wpn { display: block; font-size: 12.5px; font-weight: 800; color: var(--sk-muted); white-space: nowrap; }
.sk-ammo-wpn:empty { display: none; }
.sk-ammo-row { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.sk-ammo-mag { font: 900 38px/1 var(--sk-stencil); font-variant-numeric: tabular-nums; }
.sk-ammo-res { font: 800 18px/1 var(--sk-mono); color: var(--sk-muted); }
.sk-ammo.is-low .sk-ammo-mag { color: var(--sk-warn); }
.sk-ammo.is-empty .sk-ammo-mag { color: var(--sk-bad); }
.sk-ammo.is-melee .sk-ammo-mag { color: var(--sk-dim); font-size: 28px; }
.sk-ammo-hint { display: block; margin-top: 3px; font-size: 12px; font-weight: 900; letter-spacing: .04em; color: var(--sk-warn); }
.sk-ammo-hint:empty { display: none; }
.sk-reload { height: 4px; margin-top: 6px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.sk-reload i { display: block; height: 100%; background: var(--sk-accent); transform-origin: left; }

/* 킬피드 */
.sk-killfeed { position: absolute; top: 12px; right: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 40vw; }
.sk-kf {
  display: flex; align-items: center; gap: 7px; max-width: 100%; padding: 4px 10px; border-radius: 4px;
  font-size: 13px; font-weight: 800; white-space: nowrap; background: rgba(8, 12, 22, .74);
  transition: opacity .4s, transform .4s; animation: sk-kf-in .2s ease-out;
}
.sk-kf.is-out { opacity: 0; transform: translateX(14px); }
.sk-kf.is-mine { background: rgba(10, 44, 56, .85); box-shadow: inset 0 0 0 1px rgba(53, 224, 255, .65); }
.sk-kf-name { overflow: hidden; text-overflow: ellipsis; max-width: 12em; }
.sk-kf-wpn { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); color: #dbe6f3; font-size: 11.5px; }
.sk-kf-ico { font-size: 14px; line-height: 1.2; }
.sk-hs-ico { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--sk-pink); stroke-width: 1.6; }
.sk-hs-ico .sk-hs-dot { fill: var(--sk-pink); stroke: none; }

/* 중앙 메시지 */
.sk-center { position: absolute; left: 50%; top: 30%; max-width: 94vw; transform: translate(-50%, -50%); text-align: center; opacity: 0; transition: opacity .3s; --sk-tone: #fff; }
.sk-center.is-show { opacity: 1; }
.sk-center.is-show .sk-center-main { animation: sk-center-in .4s cubic-bezier(.2, .9, .3, 1.25); }
.sk-center[data-tone="owner"] { --sk-tone: var(--sk-owner-hi); }
.sk-center[data-tone="charterer"] { --sk-tone: var(--sk-charterer-hi); }
.sk-center[data-tone="warn"] { --sk-tone: var(--sk-warn); }
.sk-center-main {
  display: inline-block; padding: 4px 22px; white-space: nowrap; color: var(--sk-tone);
  font: 900 clamp(26px, 4.6vw, 54px)/1.15 var(--sk-stencil); letter-spacing: .03em;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .5), 0 0 30px rgba(0, 0, 0, .55);
}
.sk-center::after {
  content: ""; display: block; width: min(420px, 70vw); height: 2px; margin: 6px auto 0; opacity: .85;
  background: linear-gradient(90deg, transparent, var(--sk-tone) 30%, var(--sk-tone) 70%, transparent);
}
.sk-center-sub { margin-top: 8px; font-size: clamp(13px, 1.6vw, 17px); font-weight: 800; color: #dbe6f3; text-shadow: 0 2px 4px rgba(0, 0, 0, .6); }

.sk-spec, .sk-hint {
  position: absolute; left: 50%; transform: translateX(-50%); padding: 7px 16px; border-radius: 999px; white-space: nowrap;
  font-size: 14px; font-weight: 800; background: rgba(8, 12, 22, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.sk-spec { bottom: 116px; color: var(--sk-cyan-hi); }
.sk-hint { bottom: 72px; color: #fff; }
/* 라운드 시작 전 대기: "N 을 눌러 무기 교체!" (js/ui/hud.js applySwap). 크로스헤어 아래에서 은은하게 깜박인다 */
.sk-swap {
  position: absolute; left: 50%; top: 62%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 20px; border-radius: 12px; white-space: nowrap;
  color: #fff; background: rgba(6, 12, 22, .82); box-shadow: inset 0 0 0 1.5px var(--sk-cyan), 0 0 22px rgba(53, 224, 255, .28);
  animation: sk-swap-pulse 1.1s ease-in-out infinite;
}
.sk-swap[hidden] { display: none; }
.sk-swap-row { display: flex; align-items: center; gap: 8px; }
.sk-swap-key { min-width: 30px; height: 30px; font-size: 16px; color: var(--sk-on-accent); background: var(--sk-cyan); border-color: var(--sk-cyan-hi); }
.sk-swap-main { font-size: 18px; font-weight: 900; letter-spacing: -.01em; }
.sk-swap-sub { font-size: 12.5px; font-weight: 700; color: var(--sk-muted); }
@keyframes sk-swap-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1.5px var(--sk-cyan), 0 0 14px rgba(53, 224, 255, .2); }
  50% { box-shadow: inset 0 0 0 1.5px var(--sk-cyan-hi), 0 0 30px rgba(53, 224, 255, .5); }
}

/* ===================== 11. 스코프 ===================== */
.sk-scope { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: var(--a, 0); }
.sk-scope-lens {
  position: absolute; left: 50%; top: 50%; width: 92vmin; height: 92vmin; margin: -46vmin 0 0 -46vmin; border-radius: 50%;
  transform: scale(calc(1.2 - .2 * var(--a, 0)));
  background: radial-gradient(circle, transparent 58%, rgba(6, 10, 18, .3) 100%);
  box-shadow: 0 0 0 150vmax #000, inset 0 0 0 2px #000, inset 0 0 7vmin 2vmin rgba(0, 0, 0, .85);
}
.sk-scope-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .5)); }
.sk-ret-line { fill: none; stroke: #070a0e; }
.sk-ret-text { font-family: var(--sk-mono); font-size: 3.6px; font-weight: 700; fill: #070a0e; }
.sk-ret-unit { font-size: 3px; }
.sk-ret-dot { fill: var(--sk-accent); }
.sk-scope-zoom { position: absolute; right: 17%; bottom: 15%; font: 900 14px/1 var(--sk-mono); color: rgba(255, 255, 255, .8); text-shadow: 0 1px 2px #000; }

/* ===================== 12. 점수판 ===================== */
.sk-scoreboard { display: grid; place-items: center; padding: 16px; background: rgba(3, 5, 10, .35); }
.sk-sb-panel { width: min(980px, 100%); max-height: calc(100% - 8px); overflow: auto; padding-bottom: 12px; }
.sk-sb-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 12px 18px; }
.sk-sb-title { font-size: 22px; }
.sk-sb-meta { margin-top: 2px; font-size: 13px; color: var(--sk-muted); }
.sk-sb-score { font: 900 20px/1 var(--sk-stencil); white-space: nowrap; }
.sk-sb-score b { font-size: 30px; }
.sk-sb-colon { color: var(--sk-dim); }
.sk-sb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 14px; }
.sk-sb-team { min-width: 0; overflow-x: auto; border-radius: 8px; background: rgba(4, 7, 14, .45); }
.sk-sb-team--owner { border-top: 4px solid var(--sk-owner); }
.sk-sb-team--charterer { border-top: 4px solid var(--sk-charterer); }
.sk-sb-team-name { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; font-size: 16px; font-weight: 900; }
.sk-sb-team-name small { font-size: 11px; color: var(--sk-muted); }
.sk-sb-team-alive { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--sk-muted); }
.sk-sb-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sk-sb-table th, .sk-sb-table td { padding: 7px 10px; text-align: left; white-space: nowrap; border-top: 1px solid rgba(255, 255, 255, .06); }
.sk-sb-table thead th { font-size: 11px; font-weight: 900; letter-spacing: .05em; color: var(--sk-muted); border-top: 0; background: rgba(255, 255, 255, .03); }
.sk-sb-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sk-sb-name { font-weight: 800; }
.sk-sb-name .sk-tag { margin-left: 6px; }
.sk-sb-table tr.is-me { background: rgba(53, 224, 255, .13); }
.sk-sb-table tr.is-dead { opacity: .5; }
.sk-sb-state { font-weight: 800; }
.sk-sb-table .sk-sb-empty { padding: 16px; text-align: center; color: var(--sk-dim); }
.sk-sb-foot { margin-top: 10px; text-align: center; font-size: 12px; color: var(--sk-dim); }

/* ===================== 13. 결과 ===================== */
.sk-res-inner { max-width: 1000px; }
.sk-res-banner { --tone-hi: #d5dee9; --tone-bg: rgba(140, 155, 176, .25); padding: 26px 16px 18px; text-align: center; border-radius: 14px; background: radial-gradient(ellipse at 50% 0%, var(--tone-bg), transparent 70%); }
.sk-results[data-winner="owner"] .sk-res-banner { --tone-hi: var(--sk-owner-hi); --tone-bg: rgba(61, 127, 224, .38); }
.sk-results[data-winner="charterer"] .sk-res-banner { --tone-hi: var(--sk-charterer-hi); --tone-bg: rgba(232, 52, 64, .34); }
.sk-res-kicker { font-size: 12px; letter-spacing: .4em; color: var(--sk-muted); }
.sk-res-title { margin-top: 6px; font-size: clamp(34px, 6vw, 60px); line-height: 1.1; color: var(--tone-hi); text-shadow: 0 4px 0 rgba(0, 0, 0, .4); }
.sk-res-score { margin-top: 8px; font: 900 22px/1.2 var(--sk-stencil); }
.sk-res-verdict { margin-top: 8px; font-weight: 700; color: var(--sk-muted); }
.sk-res-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); gap: 14px; }
.sk-res-rounds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sk-res-round { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 86px; padding: 10px 12px; border-radius: 8px; font-weight: 800; background: rgba(4, 7, 14, .5); box-shadow: inset 0 0 0 1px rgba(130, 170, 230, .14); }
.sk-res-round.t-owner { box-shadow: inset 0 -3px 0 var(--sk-owner), inset 0 0 0 1px rgba(61, 127, 224, .35); }
.sk-res-round.t-charterer { box-shadow: inset 0 -3px 0 var(--sk-charterer), inset 0 0 0 1px rgba(232, 52, 64, .35); }
.sk-res-rn { font: 900 12px/1 var(--sk-mono); color: var(--sk-muted); }
.sk-res-rw { font-size: 14px; }
.sk-res-reason { font-size: 11px; font-weight: 700; color: var(--sk-dim); }
.sk-res-mvp { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.sk-mvp-name { font-size: 26px; font-weight: 900; }
.sk-mvp-team { font-weight: 700; color: var(--sk-muted); }
.sk-mvp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 0; }
.sk-mvp-stats div { padding: 8px; text-align: center; border-radius: 7px; background: rgba(4, 7, 14, .5); }
.sk-mvp-stats dt { font-size: 11px; font-weight: 800; color: var(--sk-muted); }
.sk-mvp-stats dd { margin: 0; font: 900 22px/1.1 var(--sk-stencil); }
.sk-res-table { overflow-x: auto; }
.sk-res-actions {
  position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 12px;
  border-radius: 10px; background: rgba(9, 13, 24, .94); box-shadow: inset 0 0 0 1px var(--sk-edge), 0 -10px 28px rgba(0, 0, 0, .4);
}

/* ===================== 14. 일시정지 ===================== */
.sk-pause { display: grid; place-items: center; padding: 16px; pointer-events: auto; background: rgba(3, 5, 10, .68); }
.sk-pause-panel { width: min(380px, 100%); display: flex; flex-direction: column; padding-bottom: 18px; overflow: hidden; outline: none; }
.sk-pause-title { margin-top: 18px; text-align: center; font-size: 28px; }
.sk-pause-note { margin: 4px 18px 0; text-align: center; font-size: 12.5px; color: var(--sk-muted); }
.sk-pause-btns { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 0; }
.sk-pause-btns .sk-btn { width: 100%; }
.sk-confirm { margin: 12px 20px 0; padding: 12px; border-radius: 8px; background: rgba(255, 90, 79, .1); box-shadow: inset 0 0 0 1px rgba(255, 90, 79, .35); }
.sk-confirm-text { margin-bottom: 10px; font-size: 13.5px; font-weight: 700; }

/* ===================== 14-2. 모드 · 개인전(FFA) · 앉기 안내 (MODES.md 3.3) ===================== */
.sk-ui { --sk-ffa: #ff4d8d; --sk-ffa-hi: #ff8ab4; --sk-gold: #ffd166; }
.sk-ui .t-ffa { color: #eef3f9; }

/* 모드 배지(로비 방 항목) · 모드 칩(대기실 머리글) */
.sk-mode-badge { display: inline-flex; align-items: center; padding: 0 7px; border-radius: 4px; font-size: 11.5px; font-weight: 800; line-height: 20px; white-space: nowrap; }
.sk-mode-badge--team { color: #cfe0ff; background: rgba(61, 127, 224, .2); box-shadow: inset 0 0 0 1px rgba(110, 160, 240, .35); }
.sk-mode-badge--ffa { color: var(--sk-ffa-hi); background: rgba(255, 77, 141, .16); box-shadow: inset 0 0 0 1px rgba(255, 77, 141, .45); }
.sk-chip--mode { color: #cfe0ff; }
.sk-chip--mode.is-ffa { color: var(--sk-ffa-hi); box-shadow: inset 0 0 0 1px rgba(255, 77, 141, .5); background: rgba(255, 77, 141, .12); }

/* 모드 선택(방 만들기 시트 · 대기실 방장) */
.sk-modepick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sk-mode-btn {
  justify-content: flex-start; gap: 10px; min-height: 56px; padding: 8px 12px; text-align: left; white-space: normal;
  background: var(--sk-well); box-shadow: inset 0 0 0 1px rgba(130, 170, 230, .18);
}
.sk-mode-btn.is-on { background: rgba(53, 224, 255, .12); box-shadow: inset 0 0 0 2px var(--sk-accent); }
.sk-mode-btn[data-mode="ffa"].is-on { background: rgba(255, 77, 141, .14); box-shadow: inset 0 0 0 2px var(--sk-ffa); }
.sk-mode-ico { flex: none; font-size: 22px; line-height: 1; }
.sk-mode-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sk-mode-txt b { font-size: 15px; font-weight: 900; }
.sk-mode-txt small { font-size: 11.5px; font-weight: 700; color: var(--sk-muted); }
/* 대기실 머리글의 방장 모드 전환(세그먼트) */
.sk-modepick--bar {
  display: inline-grid; grid-template-columns: auto auto auto; gap: 3px; padding: 3px; border-radius: 9px;
  background: rgba(4, 7, 14, .65); box-shadow: inset 0 0 0 1px rgba(130, 170, 230, .18);
}
.sk-modepick--bar .sk-mode-btn { min-height: 38px; padding: 0 12px; gap: 6px; background: transparent; box-shadow: none; }
.sk-modepick--bar .sk-mode-btn.is-on { background: rgba(53, 224, 255, .14); box-shadow: inset 0 0 0 2px var(--sk-accent); }
.sk-modepick--bar .sk-mode-btn[data-mode="ffa"].is-on { background: rgba(255, 77, 141, .14); box-shadow: inset 0 0 0 2px var(--sk-ffa); }
.sk-modepick--bar .sk-mode-ico { font-size: 17px; }

/* 대기실 개인전 명단(한 줄 명단, 줄 간격을 줄여 6명도 한 화면에) */
.sk-team--ffa .sk-team-head { border-top: 4px solid var(--sk-ffa); background: linear-gradient(90deg, rgba(255, 77, 141, .28), rgba(255, 77, 141, 0)); }
.sk-team--ffa .sk-team-name small { font-size: 12px; letter-spacing: 0; color: var(--sk-ffa-hi); }
.sk-team--ffa .sk-team-list { gap: 4px; padding: 6px 8px; }
.sk-team--ffa .sk-pl { min-height: 36px; }

/* HUD 개인전 스코어: 팀 칸 대신 내 킬 / 순위 칸 */
.sk-ts--ffa { display: none; }
.sk-top.is-ffa .sk-ts--owner, .sk-top.is-ffa .sk-ts--charterer { display: none; }
.sk-top.is-ffa .sk-ts--ffa { display: block; }
.sk-ffa-me { border-left: 4px solid var(--sk-ffa); }
.sk-ffa-stand { border-right: 4px solid var(--sk-ffa); text-align: right; }
.sk-ffa-stand .sk-ts-row { flex-direction: row-reverse; }
.sk-ffa-stand .sk-ts-alive { justify-content: flex-end; }
.sk-ts--ffa .sk-ts-name { color: var(--sk-ffa-hi); }
.sk-ffa-kv { display: inline-flex; align-items: baseline; gap: 2px; }
.sk-ffa-kv small { font-size: 13px; font-weight: 900; color: var(--sk-muted); }
.sk-ffa-kv .sk-ffa-total { margin-left: 2px; font: 800 14px/1 var(--sk-mono); color: var(--sk-muted); }
.sk-ffa-stand.is-leader { border-right-color: var(--sk-gold); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .45), 0 4px 12px rgba(0, 0, 0, .3); }
.sk-ffa-stand.is-leader .sk-ts-score { color: var(--sk-gold); }
.sk-ffa-goal, .sk-ffa-leader { white-space: nowrap; }

/* 부활 패널 · 보호 표시
 * 부활 패널은 아래 기준으로 compact 로드아웃(.sk-lc: bottom 150px, 높이 약 130px) 바로 위에 쌓는다.
 * 화면 높이가 작아도(960×540 등) 둘이 겹치지 않게. */
.sk-rsp {
  position: absolute; left: 50%; bottom: 318px; transform: translateX(-50%); min-width: min(380px, 92vw); max-width: 94vw;
  padding: 12px 20px 14px; border-radius: 10px; text-align: center;
  background: rgba(8, 14, 26, .84); box-shadow: inset 0 0 0 1px rgba(255, 90, 79, .4), 0 10px 30px rgba(0, 0, 0, .45);
  animation: sk-fade .2s ease-out;
}
.sk-rsp-top { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; }
.sk-rsp-main { font-size: 18px; font-weight: 900; }
.sk-rsp-wpn { padding: 2px 8px; border-radius: 4px; font-size: 12.5px; font-weight: 800; color: #dbe6f3; background: rgba(255, 255, 255, .08); }
.sk-rsp-line { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-top: 6px; color: var(--sk-muted); font-weight: 800; }
.sk-rsp-num { font: 900 34px/1 var(--sk-stencil); color: var(--sk-accent-hi); }
.sk-rsp-num:empty { display: none; }
/* 개인전 즉시 부활 "[E] 즉시 부활 · 10 P". 포인트가 모자라면 흐리게 */
.sk-rsp-quick { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 8px; font-size: 13px; font-weight: 800; color: var(--sk-accent-hi); }
.sk-rsp-quick[hidden], .sk-rsp-quick-key[hidden] { display: none; }
.sk-rsp-quick.is-off { color: var(--sk-dim); }
.sk-protect {
  position: absolute; left: 50%; top: calc(50% + 30px); transform: translateX(-50%); padding: 3px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 900; color: #dffaff; white-space: nowrap;
  background: rgba(53, 224, 255, .28); box-shadow: inset 0 0 0 1px rgba(141, 240, 255, .7), 0 0 14px rgba(53, 224, 255, .45);
  animation: sk-protect 1.2s ease-in-out infinite;
}
.sk-hp.is-protect { border-bottom-color: var(--sk-cyan); box-shadow: inset 0 0 0 1px rgba(141, 240, 255, .45); }
@keyframes sk-protect { 50% { opacity: .65; } }

/* 킬피드: 개인전은 팀 색 없이 중립, 내 줄만 강조 */
.sk-kf.is-ffa .sk-kf-name { color: #eef3f9; }

/* 하단 compact 로드아웃(화면을 덮지 않음) */
.sk-loadout.is-compact { display: block; padding: 0; overflow: visible; background: none; pointer-events: none; }
.sk-lc {
  position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); width: min(540px, calc(100% - 24px));
  padding: 10px 12px 12px; pointer-events: auto; animation: sk-lc-in .2s ease-out;
}
.sk-lc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sk-lc-title { font-size: 14px; font-weight: 900; letter-spacing: .02em; }
.sk-lc-hint { font-size: 12px; color: var(--sk-muted); }
.sk-lc-count { margin-left: auto; font: 900 14px/1 var(--sk-mono); color: var(--sk-accent-hi); }
.sk-lc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.sk-lc.is-many { width: min(880px, calc(100% - 24px)); }
.sk-lc.is-many .sk-lc-cards { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 6px; }
.sk-lc.is-many .sk-lc-card { min-height: 40px; padding: 4px 8px; gap: 6px; }
.sk-lc.is-many .sk-lc-ico { font-size: 18px; }
.sk-lc.is-many .sk-lc-name { font-size: 12.5px; }
.sk-lc-card {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 54px; padding: 6px 10px; border: 0; border-radius: 8px;
  text-align: left; color: var(--sk-text); cursor: pointer; background: var(--sk-well); box-shadow: inset 0 0 0 1px rgba(130, 170, 230, .18);
}
.sk-lc-card:hover { background: rgba(30, 42, 66, .8); }
.sk-lc-card.is-sel { background: rgba(53, 224, 255, .14); box-shadow: inset 0 0 0 2px var(--sk-accent); }
.sk-lc-card .sk-key { flex: none; min-width: 22px; height: 22px; font-size: 11px; }
.sk-lc-ico { flex: none; font-size: 24px; line-height: 1; }
.sk-lc-txt { display: flex; flex-direction: column; min-width: 0; }
.sk-lc-name { font-size: 14px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-lc-term { font-size: 11.5px; color: var(--sk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-lc-short { display: none; }
.sk-lc-note { margin-top: 8px; font-size: 12.5px; font-weight: 800; color: var(--sk-muted); }
.sk-lc-note.is-picked { color: var(--sk-ok); }
.sk-lc-note:empty { display: none; }
@keyframes sk-lc-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }

/* 점수판 개인전: 한 목록 */
.sk-scoreboard.is-ffa .sk-sb-cols { grid-template-columns: 1fr; }
/* 16인방: 줄이 많으면 줄 높이를 줄이고, 개인전 순위는 두 칸으로 나눈다(Tab을 누르는 동안은 스크롤할 수 없다).
 * 가로 휴대폰은 두 팀(개인전은 두 칸)을 나란히, 세로 휴대폰은 한 줄로 쌓되 더 촘촘하게 */
.sk-scoreboard.is-crowded .sk-sb-table th, .sk-scoreboard.is-crowded .sk-sb-table td { padding-top: 4px; padding-bottom: 4px; }
.sk-scoreboard.is-crowded .sk-sb-team-name { padding-top: 7px; padding-bottom: 7px; }
.sk-scoreboard.is-ffa.is-crowded .sk-sb-cols { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) and (orientation: landscape) {
  .sk-scoreboard.is-crowded .sk-sb-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) and (orientation: portrait) {
  .sk-scoreboard.is-ffa.is-crowded .sk-sb-cols { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .sk-scoreboard.is-crowded .sk-sb-table { font-size: 11.5px; }
  .sk-scoreboard.is-crowded .sk-sb-table th, .sk-scoreboard.is-crowded .sk-sb-table td { padding: 3px 4px; }
  .sk-scoreboard.is-crowded .sk-sb-team-name { padding: 5px 8px; font-size: 14px; }
  .sk-scoreboard.is-crowded .sk-sb-name > span:first-child { display: inline-block; max-width: 84px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
}
/* 세로로 좁은 화면의 8:8 팀전: 두 팀을 쌓으면 18줄이 된다. 위쪽 큰 점수(경기 화면 맨 위 점수와 같다)를 빼고 줄 간격을 더 줄인다 */
@media (max-width: 720px) and (orientation: portrait) {
  .sk-scoreboard.is-crowded:not(.is-ffa) { padding: 8px; }
  .sk-scoreboard.is-crowded:not(.is-ffa) .sk-sb-score { display: none; }
  .sk-scoreboard.is-crowded:not(.is-ffa) .sk-sb-table th, .sk-scoreboard.is-crowded:not(.is-ffa) .sk-sb-table td { padding-top: 1px; padding-bottom: 1px; }
  .sk-scoreboard.is-crowded:not(.is-ffa) .sk-sb-team-name { padding-top: 3px; padding-bottom: 3px; }
}
.sk-sb-team--ffa { border-top: 4px solid var(--sk-ffa); }
.sk-sb-rank { width: 3em; font-weight: 900; color: var(--sk-muted); }
.sk-sb-table tr.is-me .sk-sb-rank { color: var(--sk-accent-hi); }

/* 결과 개인전: 시상대 */
.sk-results[data-mode="ffa"] .sk-res-banner { --tone-hi: var(--sk-gold); --tone-bg: rgba(255, 209, 102, .26); }
.sk-results[data-mode="ffa"][data-winner="draw"] .sk-res-banner { --tone-hi: #d5dee9; --tone-bg: rgba(140, 155, 176, .25); }
.sk-res-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding: 8px 0 0; }
.sk-pod { display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(200px, 31%); text-align: center; }
.sk-pod-medal { font-size: 34px; line-height: 1; }
.sk-pod--1 .sk-pod-medal { font-size: 44px; }
.sk-pod-name { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font-size: 16px; font-weight: 900; }
.sk-pod-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-pod--1 .sk-pod-name { font-size: 19px; color: var(--sk-gold); }
.sk-pod-kills { font-size: 12.5px; font-weight: 800; color: var(--sk-muted); }
.sk-pod-block {
  display: grid; place-items: center; width: 100%; margin-top: 4px; border-radius: 8px 8px 0 0;
  font: 900 28px/1 var(--sk-stencil); color: rgba(255, 255, 255, .85);
  background: linear-gradient(180deg, #2b4a70, #13284a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 0 0 1px var(--sk-edge);
}
.sk-pod--1 .sk-pod-block { height: 120px; background: linear-gradient(180deg, #ffd166, #c9971c); color: #3a2a00; }
.sk-pod--2 .sk-pod-block { height: 88px; background: linear-gradient(180deg, #dfe6ee, #9aa8b8); color: #1d2733; }
.sk-pod--3 .sk-pod-block { height: 64px; background: linear-gradient(180deg, #e6a36b, #a5612b); color: #2e1606; }
.sk-pod.is-me .sk-pod-block { box-shadow: inset 0 0 0 3px var(--sk-accent); }

/* 조작법: "또는" · Ctrl+W 주의 */
.sk-keys-or { align-self: center; padding: 0 2px; font-size: 11.5px; font-weight: 800; color: var(--sk-muted); }
.sk-keys-warn {
  padding: 10px 12px; border-radius: 8px; font-size: 13px; color: #ffe2b0;
  background: rgba(255, 200, 69, .1); box-shadow: inset 0 0 0 1px rgba(255, 200, 69, .35);
}
.sk-keys-warn b { color: var(--sk-warn); }

/* ===================== 14-2b. 폭파 미션 (MODES.md 5절) ===================== */
/* 진영 색: 공격 = 따뜻한 주황, 수비 = 강철 파랑. 팀 색(블루 · 레드)과 섞이지 않게 따로 둔다 */
.sk-ui { --sk-attack: #ff8a3d; --sk-attack-hi: #ffc08c; --sk-defense: #8fb0d2; --sk-defense-hi: #c8d9ec; }

/* 모드 배지(로비) · 모드 칩(대기실) · 모드 버튼 */
.sk-mode-badge--bomb { color: var(--sk-attack-hi); background: rgba(255, 138, 61, .16); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, .45); }
.sk-chip--mode.is-bomb { color: var(--sk-attack-hi); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, .5); background: rgba(255, 138, 61, .12); }
.sk-mode-btn[data-mode="bomb"].is-on, .sk-modepick--bar .sk-mode-btn[data-mode="bomb"].is-on { background: rgba(255, 138, 61, .14); box-shadow: inset 0 0 0 2px var(--sk-attack); }

/* 진영 꼬리표: 점수 칸 · 점수판 · 대기실 · 결과 칸 · HUD 패널 */
.sk-ts-side, .sk-sb-side, .sk-team-side, .sk-res-side, .sk-bomb-side {
  flex: none; display: inline-flex; align-items: center; padding: 0 5px; border-radius: 3px;
  font-size: 10px; font-weight: 900; line-height: 1.6; letter-spacing: .02em; white-space: nowrap;
}
:is(.sk-ts-side, .sk-sb-side, .sk-team-side, .sk-res-side, .sk-bomb-side)[data-side="attack"] { color: var(--sk-attack-hi); background: rgba(255, 138, 61, .18); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, .55); }
:is(.sk-ts-side, .sk-sb-side, .sk-team-side, .sk-res-side, .sk-bomb-side)[data-side="defense"] { color: var(--sk-defense-hi); background: rgba(143, 176, 210, .16); box-shadow: inset 0 0 0 1px rgba(143, 176, 210, .5); }

/* HUD 점수 칸: 팀 이름 옆 공격/수비 */
.sk-ts-label { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.sk-ts--charterer .sk-ts-label { flex-direction: row-reverse; }

/* HUD 진영 패널: 점수 바로 아래 가운데(점수 칸에 '매치 포인트' 줄이 붙어도 닿지 않게). 진영 · 목표 · 폭탄 상태 · 폭발 카운트다운 */
.sk-bomb {
  position: absolute; left: 50%; top: 98px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(480px, 64vw); padding: 6px 12px; border-radius: 8px;
  background: rgba(9, 13, 24, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 12px rgba(0, 0, 0, .3);
}
.sk-bomb[data-side="attack"] { box-shadow: inset 3px 0 0 var(--sk-attack), inset 0 0 0 1px rgba(255, 138, 61, .32), 0 4px 12px rgba(0, 0, 0, .3); }
.sk-bomb[data-side="defense"] { box-shadow: inset 3px 0 0 var(--sk-defense), inset 0 0 0 1px rgba(143, 176, 210, .32), 0 4px 12px rgba(0, 0, 0, .3); }
.sk-bomb .sk-bomb-side { padding: 2px 8px; font-size: 12px; }
.sk-bomb-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sk-bomb-goal { font-size: 13px; font-weight: 800; line-height: 1.3; color: var(--sk-text); }
.sk-bomb-status { font-size: 12px; font-weight: 800; line-height: 1.3; color: var(--sk-muted); }
.sk-bomb-status[data-tone="attack"] { color: var(--sk-attack-hi); }
.sk-bomb-status[data-tone="defense"] { color: var(--sk-defense-hi); }
.sk-bomb-status[data-tone="warn"] { color: var(--sk-warn); }
.sk-bomb-timer { flex: none; display: inline-flex; align-items: center; gap: 5px; padding-left: 10px; border-left: 1px solid var(--sk-line); }
.sk-bomb-timer-ico { font-size: 18px; line-height: 1; }
.sk-bomb-num {
  display: inline-block; min-width: 3ch; text-align: right; font: 900 28px/1 var(--sk-mono); font-variant-numeric: tabular-nums;
  color: var(--sk-bad); text-shadow: 0 0 12px rgba(255, 77, 109, .55);
}
.sk-bomb-timer.is-urgent .sk-bomb-num { animation: sk-throb .5s ease-in-out infinite alternate; }
/* 진영 패널이 있으면 상단 배너는 그 아래로 */
.sk-hud.has-bomb .sk-hud-banner { top: 158px; }

/* 폭탄 소지: 체력 칸 오른쪽 */
.sk-hp-bomb {
  flex: none; align-self: center; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 900; color: var(--sk-attack-hi); background: rgba(255, 138, 61, .16); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, .55);
}
.sk-hp.is-bomb { border-bottom-color: var(--sk-attack); }

/* 구역 · 폭탄 표식: 화면 좌표(px)에 transform으로만 옮긴다. 가장자리에 붙은 것은 흐리게, 설치된 폭탄은 빨갛게 고동친다 */
.sk-bomb-marks { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.sk-bmk { position: absolute; left: 0; top: 0; will-change: transform; }
.sk-bmk-in { position: absolute; left: 0; top: 0; transform: translate(-50%, -15px); display: flex; flex-direction: column; align-items: center; gap: 1px; transition: opacity .15s; }
.sk-bmk-ico {
  position: relative; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 7px;
  font: 900 17px/1 var(--sk-stencil); color: #fff; text-shadow: 0 1px 2px #000;
  background: rgba(9, 13, 24, .74); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .78), 0 2px 8px rgba(0, 0, 0, .45);
}
.sk-bmk[data-kind="bomb"] .sk-bmk-ico { border-radius: 50%; padding: 0; width: 30px; font-size: 16px; box-shadow: inset 0 0 0 2px var(--sk-warn), 0 2px 8px rgba(0, 0, 0, .45); }
.sk-bmk-dist { white-space: nowrap; font: 800 10.5px/1.2 var(--sk-mono); color: #e6eef8; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
.sk-bmk-dist:empty { display: none; }
.sk-bmk.is-edge .sk-bmk-in { opacity: .55; }
.sk-bmk.is-edge .sk-bmk-ico { min-width: 24px; height: 24px; font-size: 13px; }
.sk-bmk.is-edge[data-kind="bomb"] .sk-bmk-ico { width: 24px; }
.sk-bmk.is-planted .sk-bmk-ico { background: rgba(120, 10, 24, .86); box-shadow: inset 0 0 0 2px var(--sk-bad), 0 0 14px rgba(255, 77, 109, .7); }
.sk-bmk.is-planted .sk-bmk-ico::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit; box-shadow: 0 0 0 2px var(--sk-bad);
  animation: sk-bmk-pulse 1s ease-out infinite;
}
@keyframes sk-bmk-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }

/* 설치/해체 막대: 크로스헤어 아래(콜아웃보다 위) */
.sk-bomb-prog { position: absolute; left: 50%; top: calc(50% + 34px); width: 240px; margin-left: -120px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sk-bomb-prog-label { font: 900 14px/1.2 var(--sk-stencil); color: #fff; white-space: nowrap; text-shadow: 0 1px 2px var(--sk-navy-900), 0 0 8px var(--sk-navy-900); }
.sk-bomb-prog-label:empty { display: none; }
.sk-bomb-prog-bar { width: 100%; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(4, 7, 14, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.sk-bomb-prog-bar i { display: block; height: 100%; background: var(--sk-attack); transform: scaleX(0); transform-origin: left; }
.sk-bomb-prog[data-kind="defuse"] .sk-bomb-prog-bar i { background: var(--sk-defense); }

/* 아래 가운데 안내 "E 길게 눌러 설치". 이모트 안내와 같이 뜨면 이모트 안내를 위로 올린다 */
.sk-bomb-prompt {
  position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); padding: 7px 16px; border-radius: 999px; white-space: nowrap;
  font-size: 14px; font-weight: 800; color: #fff3e6; background: rgba(8, 12, 22, .82); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, .6);
  animation: sk-fade .15s ease-out;
}
.sk-bomb-prompt:not([hidden]) ~ .sk-emote-banner { bottom: 196px; }
.sk-ui.sk-cursor .sk-bomb-prog, .sk-ui.sk-cursor .sk-bomb-prompt { visibility: hidden; }

/* 점수판 · 결과 · 대기실 */
.sk-sb-bomb { margin-left: 6px; font-size: 13px; }
.sk-res-ico { margin-right: 3px; }
.sk-res-side { margin-top: 2px; }
.sk-team-side { align-self: center; margin-left: 4px; padding: 1px 7px; font-size: 11px; letter-spacing: 0; }
.sk-room-note { grid-column: 1 / -1; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--sk-attack-hi); background: rgba(255, 138, 61, .1); }

@media (max-width: 640px) {
  .sk-bomb { top: 72px; gap: 8px; padding: 4px 10px; max-width: 86vw; }
  .sk-bomb-goal { font-size: 12px; }
  .sk-bomb-status { font-size: 11px; }
  .sk-bomb-num { font-size: 22px; }
  .sk-hud.has-bomb .sk-hud-banner { top: 132px; }
  .sk-bomb-prompt { bottom: 166px; padding: 6px 12px; font-size: 12.5px; }
  .sk-bomb-prompt:not([hidden]) ~ .sk-emote-banner { bottom: 206px; }
  .sk-hp-bomb { padding: 2px 6px; font-size: 11px; }
}

/* ===================== 14-3. 이모트 휠 (MODES.md 4.2) ===================== */
/* 표시 전용: 입력을 받지 않아 클릭은 캔버스로 간다(포인터 잠금 유지). 반투명이라 게임 화면이 비친다. */
.sk-emotes {
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(4, 6, 12, .58) 0, rgba(4, 6, 12, .34) 42%, rgba(4, 6, 12, .12) 72%, rgba(4, 6, 12, 0) 100%);
  animation: sk-fade .14s ease-out;
}
.sk-emotes.is-closing { animation: sk-emo-fade-out .14s ease-in forwards; }
.sk-emo-wheel {
  position: absolute; left: 50%; top: 50%; width: min(400px, 88vmin); aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%); animation: sk-emo-in .17s cubic-bezier(.2, .9, .3, 1.25);
}
.sk-emotes.is-closing .sk-emo-wheel { animation: sk-emo-out .14s ease-in forwards; }
.sk-emo-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sk-emo-bg { fill: rgba(8, 12, 22, .38); stroke: rgba(130, 170, 230, .2); stroke-width: 1.5; }
.sk-emo-wedge { fill: rgba(18, 26, 44, .6); stroke: rgba(130, 170, 230, .3); stroke-width: 1.2; transition: fill .09s, stroke .09s; }
.sk-emo-wedge.is-sel { fill: rgba(53, 224, 255, .58); stroke: #ffd166; stroke-width: 2.6; }
/* 휴대폰에서 열어 둔 휠: 칸이 누를 수 있는 단추처럼 보이게 테두리를 밝힌다 */
.sk-emo-wheel.is-tap .sk-emo-wedge:not(.is-sel) { fill: rgba(22, 34, 58, .74); stroke: rgba(141, 240, 255, .5); }
.sk-emo-hub { fill: rgba(6, 10, 18, .82); stroke: rgba(130, 170, 230, .32); stroke-width: 1.5; }
.sk-emo-wheel.has-sel .sk-emo-hub { stroke: rgba(53, 224, 255, .7); }
.sk-emo-labels { position: absolute; inset: 0; }
.sk-emo-label {
  position: absolute; width: 23%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center; transition: transform .09s;
}
.sk-emo-label.is-sel { transform: translate(-50%, -50%) scale(1.14); }
.sk-emo-n { font: 900 10px/1 var(--sk-mono); color: rgba(255, 255, 255, .55); }
.sk-emo-ico { font-size: clamp(22px, 5.6vmin, 30px); line-height: 1.05; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .65)); }
.sk-emo-name { font-size: clamp(10.5px, 2.6vmin, 13px); font-weight: 900; line-height: 1.15; color: #e9eff7; text-shadow: 0 1px 2px #000; }
.sk-emo-label.is-sel .sk-emo-name { color: #fff; }
.sk-emo-label.is-sel .sk-emo-n { color: #fff3d6; }
.sk-emo-center {
  position: absolute; left: 50%; top: 50%; width: 33%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
}
/* 아이콘 아래에 틈을 둬서 가운데(가상 커서가 멈춰 있는 자리)를 비운다 */
.sk-emo-hub-ico { margin-bottom: 12px; font-size: clamp(24px, 6.4vmin, 34px); line-height: 1.05; }
.sk-emo-hub-name { font-size: clamp(13px, 3.4vmin, 17px); font-weight: 900; line-height: 1.2; color: var(--sk-accent-hi); }
.sk-emo-hub-hint { font-size: clamp(9.5px, 2.3vmin, 11.5px); font-weight: 700; line-height: 1.3; color: var(--sk-muted); text-wrap: balance; }
.sk-emo-wheel.has-sel .sk-emo-hub-hint { color: #ffe2b0; }
.sk-emo-dot {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2px rgba(11, 37, 69, .9), 0 0 10px rgba(255, 255, 255, .55); will-change: transform;
}
.sk-emo-dot.is-out { box-shadow: 0 0 0 2px var(--sk-accent), 0 0 12px rgba(53, 224, 255, .7); }
/* 가운데(40px 안)에서는 작은 빈 고리로만 보여 안내 글자를 가리지 않는다 */
.sk-emo-dot:not(.is-out) { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: transparent; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8); }
@keyframes sk-emo-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes sk-emo-out { to { opacity: 0; transform: translate(-50%, -50%) scale(.9); } }
@keyframes sk-emo-fade-out { to { opacity: 0; } }

/* 휠이 열렸거나 이모트 중(3인칭)이면 조준 표시를 숨긴다 */
.sk-ui.sk-emo-open .sk-xhair, .sk-ui.sk-emo-open .sk-hit,
.sk-hud.is-emote .sk-xhair, .sk-hud.is-emote .sk-hit { visibility: hidden; }

/* HUD 이모트 중 안내(하단). 창이 좁으면 오른쪽 아래 무기 슬롯과 가로로 겹치니 슬롯 줄보다 위에 둔다 */
.sk-emote-banner {
  position: absolute; left: 50%; bottom: 146px; transform: translateX(-50%); padding: 7px 16px; border-radius: 999px; white-space: nowrap;
  font-size: 14px; font-weight: 800; color: #fff3d6;
  background: rgba(8, 12, 22, .8); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .45);
  animation: sk-fade .2s ease-out;
}

/* ===================== 14-3b. 경기 채팅 (js/ui/chat.js) ===================== */
/* 닫혀 있으면 새 줄만 잠깐 보이고 화면을 누르지 않는다. 열면 지난 줄과 입력칸이 보인다. PC는 체력 위, 휴대폰은 왼쪽 위 */
.sk-chatbox { pointer-events: none; }
.sk-cb {
  position: absolute; left: 18px; bottom: 96px; width: min(440px, 42vw);
  display: flex; flex-direction: column; gap: 6px;
}
.sk-cb-log {
  list-style: none; margin: 0; padding: 0; max-height: 9.6em; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  font-size: 13.5px; line-height: 1.35;
}
.sk-cb-line {
  flex: none; align-self: flex-start; max-width: 100%; padding: 2px 8px; border-radius: 4px; overflow-wrap: anywhere;
  color: #eef3f9; background: rgba(6, 10, 18, .58); text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
  transition: opacity .6s; animation: sk-fade .15s ease-out;
}
.sk-cb-line.is-old { opacity: 0; }
.sk-cb-line.is-me { box-shadow: inset 2px 0 0 var(--sk-cyan); }
.sk-cb-name { font-weight: 900; }
.sk-cb-name::after { content: ":"; margin-right: 6px; color: var(--sk-dim); }
.sk-cb-sys { font-size: 12.5px; font-style: italic; color: var(--sk-muted); }
.sk-chatbox.is-open .sk-cb-log {
  max-height: 14em; overflow-y: auto; justify-content: flex-start; padding: 6px; border-radius: 7px;
  background: rgba(4, 7, 14, .62); box-shadow: inset 0 0 0 1px var(--sk-edge);
}
.sk-chatbox.is-open .sk-cb-line { opacity: 1; background: transparent; }
.sk-cb-line.is-team { color: #e9ffe9; }
.sk-cb-tag {
  display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 3px; vertical-align: 1px;
  font-size: 11px; font-weight: 900; line-height: 1.5; color: #04160c; background: var(--sk-ok); text-shadow: none;
}
.sk-cb-form { display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
/* 전체·팀 탭: 팀 경기에서만 보인다. 입력칸에서 Tab 키로도 바뀐다 */
.sk-cb-tabs { display: flex; align-items: flex-end; gap: 4px; margin-bottom: -6px; }
.sk-cb-tabs[hidden] { display: none; }
.sk-cb-tab {
  min-height: 26px; padding: 0 14px; border: 0; border-radius: 7px 7px 0 0; cursor: pointer;
  font: 800 12.5px/1 var(--sk-font); color: var(--sk-muted); background: rgba(10, 16, 28, .82); box-shadow: inset 0 0 0 1px var(--sk-edge);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sk-cb-tab.is-on { color: var(--sk-on-accent); background: var(--sk-cyan); box-shadow: none; }
.sk-cb-tab[data-scope="team"].is-on { color: #04160c; background: var(--sk-ok); }
.sk-cb-tabhint { margin: 0 0 6px 6px; font-size: 11.5px; font-weight: 700; color: var(--sk-muted); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.sk-chatbox.is-team .sk-cb-input, .sk-chatbox.is-team .sk-cb-input:focus { border-color: var(--sk-ok); box-shadow: 0 0 0 3px rgba(61, 220, 151, .22); }
.sk-cb-form[hidden] { display: none; }
.sk-cb-row { display: flex; gap: 6px; }
.sk-cb-input { flex: 1; min-width: 0; min-height: 38px; font-size: 14px; }
.sk-cb-send, .sk-cb-x { flex: none; min-height: 38px; padding: 0 12px; }
.sk-cb-quick { display: none; flex-wrap: wrap; gap: 5px; }
.sk-cb-q {
  min-height: 34px; padding: 0 11px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 13px/1 var(--sk-font); color: var(--sk-text); background: rgba(10, 16, 28, .78); box-shadow: inset 0 0 0 1px rgba(141, 240, 255, .45);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sk-cb-q:active { background: rgba(53, 224, 255, .4); }
/* 휴대폰: 키보드가 아래를 덮으니 입력칸을 맨 위에 두고, 줄은 그 아래에 짧게 */
html.pc-touch .sk-cb {
  left: calc(8px + env(safe-area-inset-left)); top: calc(46px + env(safe-area-inset-top)); bottom: auto; width: max(220px, min(340px, 36vw));
}
html.pc-touch .sk-cb-form { order: -1; }
html.pc-touch .sk-cb-tab { min-height: 34px; padding: 0 16px; font-size: 13.5px; }
html.pc-touch .sk-cb-tabhint { display: none; }
html.pc-touch .sk-cb-quick { display: flex; }
html.pc-touch .sk-cb-log { max-height: 5.6em; font-size: 12px; }
html.pc-touch .sk-chatbox.is-open .sk-cb-log { max-height: 7em; pointer-events: auto; touch-action: pan-y; }
html.pc-touch .sk-cb-input { font-size: 16px; }   /* iOS가 16px보다 작은 입력칸을 누르면 화면을 확대한다 */

/* ===================== 14-4. 닉네임 게이트 ===================== */
.sk-nick {
  z-index: 30; display: grid; place-items: center; padding: 16px; overflow-y: auto; pointer-events: auto;
  background: rgba(3, 5, 10, .84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: sk-fade .18s ease-out;
}
.sk-nick-card { width: min(460px, 100%); overflow: hidden; box-shadow: 0 0 0 1px rgba(53, 224, 255, .22), 0 24px 70px rgba(0, 0, 0, .6), 0 0 60px rgba(53, 224, 255, .08); }
.sk-nick-body { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 26px; }
.sk-nick-kicker { font-size: 12px; font-weight: 800; letter-spacing: .24em; color: var(--sk-cyan); }
.sk-nick-title { font-size: 26px; line-height: 1.2; }
.sk-nick-lead { font-size: 13.5px; color: var(--sk-muted); }
.sk-nick-form { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.sk-nick-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sk-nick-input { min-height: 48px; font-size: 17px; }
/* 메시지가 두 줄이 되어도 아래 버튼이 움직이지 않게 자리를 잡아 둔다 */
.sk-nick-status { min-height: 38px; font-size: 13px; font-weight: 700; color: var(--sk-muted); }
.sk-nick-status.is-ok { color: var(--sk-ok); }
.sk-nick-status.is-warn { color: var(--sk-warn); }
.sk-nick-status.is-bad { color: var(--sk-pink-hi); }
.sk-nick-submit { width: 100%; }
.sk-alert--warn { display: block; font-size: 13.5px; background: rgba(255, 200, 69, .1); color: #ffe6a6; box-shadow: inset 0 0 0 1px rgba(255, 200, 69, .38); }

/* ===================== 14-5. 마이페이지 ===================== */
.sk-my-name { color: var(--sk-cyan-hi); font-weight: 800; }
.sk-my-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sk-my-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sk-my-nickform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: start; }
/* 입력칸 위 라벨만큼 내려 입력칸과 나란히 놓는다 */
.sk-my-save { min-width: 84px; min-height: 48px; margin-top: 24px; }
.sk-my-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.sk-my-stat { padding: 9px 12px; border-radius: 8px; background: var(--sk-well); box-shadow: inset 0 0 0 1px rgba(130, 170, 230, .12); }
.sk-my-stat dt { font-size: 11.5px; font-weight: 700; color: var(--sk-muted); }
.sk-my-stat dd { margin: 2px 0 0; font: 800 21px/1.15 var(--sk-stencil); font-variant-numeric: tabular-nums; }
.sk-my-panelhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sk-my-equiprow { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--sk-line); }
.sk-my-equiphead { display: flex; align-items: baseline; gap: 10px; }
.sk-my-equipnow { font-size: 14px; font-weight: 800; }
.sk-my-secrets { display: flex; flex-direction: column; gap: 6px; }
.sk-my-secret { padding: 8px 10px; border-radius: 7px; background: var(--sk-well); }
.sk-my-secret.is-found { box-shadow: inset 2px 0 0 var(--sk-pink); }
.sk-my-secrethead { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.sk-my-secretcount { flex: none; font: 800 12.5px/1.6 var(--sk-mono); color: var(--sk-cyan-hi); }
.sk-my-secretnames { margin-top: 2px; font-size: 12px; color: var(--sk-muted); }
.sk-my-resetbtn { align-self: flex-start; }
.sk-mypage .sk-confirm { margin: 0; }

/* ===================== 14-6. 상점 ===================== */
.sk-tabs { display: flex; flex-wrap: wrap; align-self: flex-start; gap: 4px; padding: 3px; border-radius: 9px; background: var(--sk-well); box-shadow: inset 0 0 0 1px var(--sk-edge); }
.sk-tab { min-height: 36px; padding: 0 16px; border: 0; border-radius: 7px; background: transparent; color: var(--sk-muted); font: 800 14px/1 var(--sk-font); white-space: nowrap; cursor: pointer; transition: color .12s, background .12s; }
.sk-tab:hover { color: var(--sk-text); background: rgba(255, 255, 255, .06); }
.sk-tab.is-on { color: var(--sk-on-accent); background: var(--sk-cyan); box-shadow: 0 0 14px rgba(53, 224, 255, .3); }
.sk-shop-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.sk-shop-note { flex: 1 1 240px; font-size: 13px; font-weight: 700; color: var(--sk-cyan-hi); }
.sk-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; align-items: stretch; outline: none; }
.sk-shop-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; transition: border-color .12s, box-shadow .12s; }
.sk-shop-card.is-equipped { border-color: rgba(53, 224, 255, .75); box-shadow: 0 0 0 1px rgba(53, 224, 255, .3), 0 14px 34px rgba(0, 0, 0, .38); }
.sk-shop-head { display: flex; align-items: flex-start; gap: 10px; }
.sk-shop-names { flex: 1; min-width: 0; }
.sk-shop-name { font-size: 16px; font-weight: 800; line-height: 1.25; }
.sk-shop-card .sk-lo-tagline { display: block; margin-top: 2px; white-space: normal; }
.sk-shop-state { flex: none; font: 800 13px/1.5 var(--sk-mono); color: var(--sk-pink-hi); }
.sk-premium { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; vertical-align: middle; color: #241a02; background: linear-gradient(135deg, #ffe08a, #ffbe2e); }
.sk-shop-card.is-owned .sk-shop-state { color: var(--sk-muted); }
.sk-shop-card.is-equipped .sk-shop-state { color: var(--sk-cyan); }
.sk-shop-stats { display: grid; margin: 0; font-size: 12px; }
.sk-shop-stat { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 6px; padding: 3px 0; border-top: 1px solid rgba(255, 255, 255, .05); }
.sk-shop-stat dt { font-weight: 700; color: var(--sk-muted); }
.sk-shop-stat dd { margin: 0; color: #dbe6f3; }
.sk-shop-foot { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.sk-shop-need { font-size: 12.5px; font-weight: 700; color: var(--sk-pink-hi); }
.sk-shop-need:empty { display: none; }
.sk-shop-action { width: 100%; }
/* 이모트 탭: 휠 8칸(가로 한 줄, 좁으면 4칸 두 줄) + 이모트 카드 */
.sk-emo-wheelbox { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.sk-emo-wheelhead .sk-lo-tagline { display: block; margin-top: 2px; white-space: normal; }
.sk-emo-slots { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.sk-emo-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 7px 4px; border: 0; border-radius: 8px; background: var(--sk-well); box-shadow: inset 0 0 0 1px var(--sk-edge); color: var(--sk-text); font: 700 12px/1.2 var(--sk-font); cursor: pointer; transition: background .12s, box-shadow .12s; }
.sk-emo-slot:hover { background: rgba(255, 255, 255, .06); }
.sk-emo-slot.is-on { background: rgba(53, 224, 255, .14); box-shadow: inset 0 0 0 2px var(--sk-cyan); }
.sk-emo-slot-num { font: 800 11px/1 var(--sk-mono); color: var(--sk-muted); }
.sk-emo-slot.is-on .sk-emo-slot-num { color: var(--sk-cyan-hi); }
.sk-emo-slot-ico { font-size: 22px; line-height: 1.15; }
.sk-emo-slot-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-emo-free { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; vertical-align: middle; color: var(--sk-on-accent); background: var(--sk-cyan); }
.sk-emo-actions { display: flex; gap: 6px; }
.sk-emo-actions .sk-shop-action { flex: 1 1 auto; width: auto; min-width: 0; }
.sk-emo-preview { flex: none; }
@media (max-width: 720px) {
  .sk-emo-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 캐릭터 탭: 지금 캐릭터·팀 색 보기 + 초상 카드(초상 왼쪽, 글 오른쪽) */
.sk-av-box { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px; }
.sk-av-boxtext { flex: 1 1 260px; min-width: 0; }
.sk-av-boxtext .sk-lo-tagline { display: block; margin-top: 2px; white-space: normal; }
.sk-av-now { color: var(--sk-cyan-hi); }
.sk-av-closed { margin-top: 6px; font-size: 12.5px; font-weight: 700; line-height: 1.4; color: var(--sk-gold, #ffd166); }
.sk-av-teams { flex: none; align-self: center; }
.sk-av-team { gap: 7px; padding: 0 12px; }
.sk-av-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .4); }
.sk-shop-grid--av { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.sk-av-card { flex-direction: row; align-items: stretch; gap: 12px; }
.sk-av-card .sk-shop-head { flex-wrap: wrap; }
.sk-av-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; min-width: 0; }
.sk-av-art {
  position: relative; flex: none; display: grid; place-items: center; width: 120px; height: 160px; overflow: hidden; border-radius: 10px;
  background: radial-gradient(70% 52% at 50% 74%, var(--sk-av-glow, rgba(53, 224, 255, .2)), transparent 72%), linear-gradient(180deg, #172338, #0a101b);
  box-shadow: inset 0 0 0 1px var(--sk-edge);
}
.sk-av-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sk-av-img[hidden], .sk-av-ico[hidden] { display: none; }
.sk-av-ico { font-size: 40px; line-height: 1; }
.sk-av-art--my { width: 96px; height: 128px; }
@media (max-width: 380px) {
  .sk-av-art { width: 96px; height: 128px; }
}
.sk-my-avatar .sk-my-avnow { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--sk-line); }
.sk-my-avtext { flex: 1; min-width: 0; }
.sk-my-avname { display: block; font-size: 16px; font-weight: 800; color: var(--sk-cyan-hi); }
.sk-my-avdesc { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--sk-muted); }
.sk-my-avchoices { margin-top: 10px; }

/* ===================== 14-7. 결과: 획득 포인트 · 알림 ===================== */
.sk-res-reward { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; padding: 12px 20px; }
.sk-res-gain { display: flex; align-items: baseline; gap: 4px; color: var(--sk-pink-hi); }
.sk-res-gain-num { font: 900 38px/1 var(--sk-stencil); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(255, 77, 141, .45); }
.sk-res-gain-unit { font: 800 18px/1 var(--sk-stencil); }
.sk-res-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--sk-muted); }
.sk-res-line { display: inline-flex; gap: 6px; }
.sk-res-line b { color: var(--sk-text); font-variant-numeric: tabular-nums; }
.sk-res-total { font-size: 13px; font-weight: 800; color: var(--sk-muted); white-space: nowrap; }

.sk-game-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 40; max-width: 80vw; padding: 10px 16px; border-radius: 8px;
  color: #fff; font-size: 14px; font-weight: 700; pointer-events: auto; cursor: pointer;
  background: rgba(199, 50, 106, .95); box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

/* 전체 공지 띠(js/ui/notice.js): 어느 화면 위에나 뜨고 클릭을 가로채지 않는다 */
.sk-notice {
  position: absolute; left: 50%; top: max(8px, env(safe-area-inset-top)); z-index: 60;
  display: flex; align-items: flex-start; gap: 10px; width: max-content; max-width: min(760px, calc(100% - 24px));
  padding: 8px 14px 8px 10px; border-radius: 10px; pointer-events: none;
  color: #fff; background: rgba(9, 14, 26, .95);
  box-shadow: inset 0 0 0 1.5px var(--sk-warn), 0 10px 30px rgba(0, 0, 0, .5), 0 0 22px rgba(255, 200, 69, .22);
  opacity: 0; transform: translate(-50%, -140%); transition: transform .22s ease-out, opacity .22s ease-out;
}
.sk-notice.is-in { opacity: 1; transform: translate(-50%, 0); }
.sk-notice-tag {
  flex: none; margin-top: 1px; padding: 1px 8px; border-radius: 5px;
  font: 900 12px/1.5 var(--sk-stencil); letter-spacing: .04em; color: #1a1300; background: var(--sk-warn);
}
.sk-notice-text { min-width: 0; font-size: 14px; font-weight: 800; line-height: 1.45; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
/* 공지가 떠 있는 동안 경기 HUD의 윗줄을 띠 높이만큼 내린다(top 값이 화면 크기마다 달라 margin으로 민다) */
.sk-ui.sk-has-notice .sk-top, .sk-ui.sk-has-notice .sk-killfeed, .sk-ui.sk-has-notice .sk-bomb,
.sk-ui.sk-has-notice .sk-hud-banner { margin-top: var(--sk-notice-h, 0px); }
@media (prefers-reduced-motion: reduce) { .sk-notice { transition: none; } }

/* ===================== 15. 애니메이션 ===================== */
@keyframes sk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sk-spin { to { transform: rotate(360deg); } }
@keyframes sk-blink { 50% { opacity: .35; } }
@keyframes sk-throb { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes sk-vpulse { 0%, 100% { opacity: 0; } 50% { opacity: .75; } }
@keyframes sk-kf-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes sk-center-in { from { opacity: 0; transform: scale(1.25); } to { opacity: 1; transform: scale(1); } }

/* ===================== 16. 반응형 ===================== */
/* 데스크톱 대기실: 화면 높이에 맞춰 채팅 로그가 늘고 줄어, 하단 바가 입력칸을 가리지 않는다 */
@media (min-width: 961px) {
  .sk-room .sk-page-inner { height: 100%; min-height: 600px; }
  .sk-room-grid { min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
  .sk-room-left { min-height: 0; }
  .sk-room-left .sk-chat { flex: 1; min-height: 0; }
  .sk-room-left .sk-chat-log { flex: 1; height: auto; min-height: 72px; }
  .sk-room-side { align-self: start; max-height: 100%; overflow-y: auto; }
}
@media (max-width: 960px) {
  .sk-room-grid { grid-template-columns: 1fr; }
  .sk-res-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .sk-room-teams { grid-template-columns: 1fr; }
  .sk-vs { display: none; }
  .sk-sb-cols { grid-template-columns: 1fr; }
  .sk-mapcards { grid-template-columns: 1fr; }
  .sk-mapcards .sk-mapcard:not(.sk-mapcard--sm) { flex-direction: row; align-items: center; }
  .sk-mapcards .sk-mapcard:not(.sk-mapcard--sm) .sk-mapico { flex: none; width: 84px; height: 56px; }
  .sk-keys { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sk-ui { font-size: 14px; }
  .sk-room-row { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "ico main badge" "count count join"; }
  .sk-room-ico { width: 48px; height: 36px; }
  .sk-room-ico .sk-mapico { width: 38px; height: 26px; }
  .sk-bar-actions { width: 100%; }
  .sk-bar-actions .sk-btn { flex: 1; }
  .sk-room-foot-actions, .sk-room-foot-actions .sk-btn { width: 100%; }
  .sk-lo-header { align-items: flex-start; }
  .sk-lo-card { padding: 14px; }

  .sk-top { top: 8px; gap: 4px; }
  .sk-ts { min-width: 92px; padding: 4px 8px; }
  .sk-ts-score { font-size: 22px; }
  .sk-pips i { width: 7px; height: 7px; }
  .sk-ts-alive-n { display: none; }
  .sk-tc { min-width: 70px; padding: 4px 6px; }
  .sk-timer { font-size: 20px; }
  .sk-tc-sub { font-size: 9px; }
  .sk-killfeed { top: 78px; right: 8px; max-width: 76vw; }
  .sk-kf { padding: 3px 8px; font-size: 11.5px; }
  .sk-center-main { padding: 4px 10px; font-size: 22px; white-space: normal; }
  .sk-scoreboard { padding: 8px; }
  .sk-sb-head { padding: 10px 12px; }
  .sk-sb-cols { gap: 8px; padding: 0 8px; }
  .sk-sb-table { font-size: 12px; }
  .sk-sb-table th, .sk-sb-table td { padding: 6px 5px; }
  .sk-sb-name > span:first-child { display: inline-block; max-width: 84px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  .sk-hp { left: 8px; bottom: 8px; min-width: 0; padding: 8px 10px; gap: 8px; }
  .sk-hp-ico { width: 28px; height: 28px; font-size: 16px; }
  .sk-hp-num { font-size: 26px; }
  .sk-hp-bar { width: 92px; }
  .sk-br { right: 8px; bottom: 8px; gap: 6px; }
  .sk-slot { height: 30px; padding: 0 6px 0 4px; }
  .sk-slot-nm { display: none; }
  .sk-ammo { min-width: 0; padding: 8px 10px; }
  .sk-ammo-mag { font-size: 28px; }
  .sk-ammo-res { font-size: 15px; }
  .sk-spec { bottom: 128px; }
  .sk-hint { bottom: 90px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-ui *, .sk-ui *::before, .sk-ui *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .sk-lo-bar { display: none; }
}
/* 개인전·모드 요소 모바일 */
@media (max-width: 640px) {
  .sk-modepick { grid-template-columns: 1fr; }
  .sk-modepick--bar { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .sk-ffa-goal, .sk-ts--ffa .sk-ts-name { display: none; }
  .sk-ts-alive-n.sk-ffa-leader { display: inline; font-size: 9.5px; }
  .sk-ts--ffa { min-width: 0; }
  .sk-rsp { bottom: 240px; padding: 10px 14px 12px; }
  .sk-rsp-main { font-size: 15px; }
  .sk-rsp-num { font-size: 28px; }
  .sk-lc { bottom: 104px; padding: 8px 10px 10px; }
  .sk-lc-hint, .sk-lc-term, .sk-lc-full { display: none; }
  .sk-lc-short { display: inline; }
  .sk-lc-name { font-size: 13px; }
  .sk-pod-medal { font-size: 26px; }
  .sk-pod--1 .sk-pod-medal { font-size: 34px; }
  .sk-pod-name { font-size: 13px; }
  .sk-pod--1 .sk-pod-name { font-size: 15px; }
  .sk-pod--1 .sk-pod-block { height: 92px; }
  .sk-pod--2 .sk-pod-block { height: 68px; }
  .sk-pod--3 .sk-pod-block { height: 50px; }
  .sk-emote-banner { bottom: 128px; padding: 6px 12px; font-size: 12.5px; }
}

/* 계정 화면 · 메뉴 좁은 창 */
@media (max-width: 860px) {
  .sk-menu-wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "player" "nav" "note"; }
  .sk-player { margin-top: 0; }
  .sk-my-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sk-menu-btn--wide, .sk-menu-btn--sub { grid-column: span 6; }
  .sk-my-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-my-nickform { grid-template-columns: minmax(0, 1fr); }
  .sk-my-save { width: 100%; margin-top: 8px; }
  .sk-res-reward { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .sk-res-gain, .sk-res-lines { justify-content: center; }
  .sk-tabs { align-self: stretch; }
  .sk-tab { flex: 1 1 auto; padding: 0 10px; font-size: 13px; }
  .sk-lc.is-many .sk-lc-cards { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
}
/* 큰 창: 1080p 이상에서는 메뉴·페이지·로드아웃을 키워 글자가 작아 보이지 않게 한다(시트와 HUD는 그대로) */
@media (min-width: 1800px) and (min-height: 950px) {
  .sk-menu-wrap, .sk-page-inner, .sk-lo-panel { zoom: 1.2; }
}
/* 낮은 창(1280×720보다 작음): 메뉴와 로드아웃이 스크롤 없이 들어가도록 줄인다 */
@media (max-height: 640px) {
  .sk-brand-title { font-size: clamp(40px, 5vw, 60px); }
  .sk-menu-btn { min-height: 54px; padding: 8px 14px; }
  .sk-menu-btn--main { min-height: 62px; }
  .sk-lo-bars { display: none; }
}

/* HUD v2 */
/* 속도계 · 콜아웃 · 상단 배너 · 반샷 표시 · 배율 표시(js/ui/hud.js, js/ui/scope.js) */

/* 속도계: 값이 바뀌면 막대 transform과 색 변수만 쓴다 */
.sk-speed {
  --sk-speed-c: #35e0ff;
  position: absolute; left: 50%; bottom: 18px; width: 128px; margin-left: -64px;
  opacity: 0; transition: opacity .16s linear; contain: layout style;
}
.sk-speed.is-on { opacity: 1; }
.sk-speed-read { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.sk-speed-num {
  min-width: 4ch; text-align: right; font: 900 21px/1 var(--sk-mono); font-variant-numeric: tabular-nums;
  color: var(--sk-speed-c); text-shadow: 0 1px 2px var(--sk-navy-900), 0 0 10px var(--sk-navy-900);
}
.sk-speed-unit { font: 800 11px/1 var(--sk-mono); color: var(--sk-muted); text-shadow: 0 1px 2px var(--sk-navy-900); }
.sk-speed-bar { height: 3px; margin-top: 5px; border-radius: 2px; overflow: hidden; background: rgba(53, 224, 255, .22); box-shadow: 0 0 0 1px var(--sk-well); }
.sk-speed-bar i { display: block; height: 100%; background: var(--sk-speed-c); transform: scaleX(0); transform-origin: left; }

/* 콜아웃: 크로스헤어 아래. 평소에는 투명하고 js의 Animation이 보여 준다 */
.sk-callouts {
  position: absolute; left: 50%; top: calc(50% + 62px); width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.sk-callout {
  flex: none; opacity: 0; white-space: nowrap; color: #35e0ff;
  font: 900 18px/1.15 var(--sk-stencil); letter-spacing: .02em;
  text-shadow: 0 1px 2px var(--sk-navy-900), 0 0 8px var(--sk-navy-900);
}
.sk-callout[data-tone="head"] { color: color-mix(in srgb, var(--sk-bad) 75%, var(--sk-warn)); }
.sk-callout[data-tone="half"] { color: #ff4d8d; }
.sk-callout[data-tone="kill"] { color: var(--sk-text); text-shadow: 0 1px 2px var(--sk-navy-900), 0 0 10px var(--sk-bad); }
.sk-ui.sk-cursor .sk-callouts, .sk-ui.sk-emo-open .sk-callouts, .sk-hud.is-emote .sk-callouts { visibility: hidden; }

/* 상단 배너: 점수판 아래로 미끄러져 내려왔다가 올라간다 */
.sk-hud-banner {
  position: absolute; left: 50%; top: 86px; display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: min(560px, 92vw); padding: 9px 22px 10px 14px; border-radius: 8px;
  background: var(--sk-navy-900); box-shadow: inset 0 0 0 1px rgba(53, 224, 255, .6), 0 0 18px rgba(53, 224, 255, .28);
  opacity: 0; visibility: hidden; transform: translate(-50%, -26px);
  transition: transform .32s ease-in, opacity .32s ease-in, visibility 0s linear .32s;
}
.sk-hud-banner.is-show {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: transform .32s cubic-bezier(.2, .9, .3, 1.15), opacity .2s ease-out, visibility 0s;
}
.sk-hud-banner-ico { flex: none; font-size: 26px; line-height: 1; }
.sk-hud-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sk-hud-banner-title { font: 900 16px/1.2 var(--sk-stencil); color: var(--sk-text); }
.sk-hud-banner-sub { font-size: 13px; font-weight: 800; line-height: 1.2; color: #ff4d8d; }

/* 연속 킬(hud.multiKill, 그림은 js/ui/multikill.js): 콜아웃 밑에서 그림이 튀어나오고 글자가 따라 나왔다가 사라진다.
 * 단계 색은 JS가 --mk(테두리·빛)와 --mk-hi(글자)로 넣는다. sk-mk-life 길이는 hud.js MULTI_KILL_MS와 같다.
 * 휴대폰은 손가락과 무기 칸이 있는 아래를 피해 크로스헤어 위에 작게 둔다(css/touch.css) */
.sk-mk {
  --mk: #35e0ff; --mk-hi: #c8f8ff; --mk-size: 96px;
  position: absolute; left: 50%; top: calc(50% + 112px); width: max-content; max-width: 92vw;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transform: translateX(-50%); opacity: 0; visibility: hidden; contain: layout style;
}
.sk-mk.is-show { visibility: visible; animation: sk-mk-life 2.2s linear forwards; }
.sk-mk.is-show[data-mk="legend"] { animation-duration: 2.9s; }
.sk-mk[data-mk="legend"] { --mk-size: 116px; }
.sk-mk-art-box { position: relative; width: var(--mk-size); height: var(--mk-size); }
.sk-mk-art { display: block; width: 100%; height: 100%; overflow: visible; }
.sk-mk-art-box::before {   /* 튀어나올 때 한 번 퍼지는 고리 */
  content: ""; position: absolute; inset: 14%; border-radius: 50%; opacity: 0;
  box-shadow: 0 0 0 3px var(--mk), 0 0 18px var(--mk);
}
.sk-mk-rays { transform-box: fill-box; transform-origin: center; opacity: .55; }
.sk-mk-num { font: 900 36px/1 var(--sk-stencil); }
.sk-mk-title {
  font: 900 clamp(24px, 3.2vw, 38px)/1.1 var(--sk-stencil); letter-spacing: .03em; white-space: nowrap; color: var(--mk-hi);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 14px var(--mk), 0 0 2px var(--sk-navy-900);
}
.sk-mk[data-mk="legend"] .sk-mk-title { font-size: clamp(26px, 3.6vw, 44px); }
.sk-mk-sub { font: 800 14px/1.2 var(--sk-font); color: #fff4d6; text-shadow: 0 1px 2px var(--sk-navy-900); }
.sk-mk.is-show .sk-mk-art-box { animation: sk-mk-pop .55s cubic-bezier(.2, 1.5, .35, 1) both; }
.sk-mk.is-show .sk-mk-art-box::before { animation: sk-mk-ring .6s ease-out both; }
.sk-mk.is-show .sk-mk-rays { animation: sk-mk-spin 8s linear infinite; }
.sk-mk.is-show .sk-mk-title { animation: sk-mk-title .45s cubic-bezier(.2, .9, .3, 1.3) .06s both; }
.sk-ui.sk-cursor .sk-mk, .sk-ui.sk-emo-open .sk-mk, .sk-hud.is-emote .sk-mk { visibility: hidden; }
@keyframes sk-mk-life { 0% { opacity: 0; } 6% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sk-mk-pop { 0% { transform: scale(.3) rotate(-12deg); } 60% { transform: scale(1.12) rotate(2deg); } 100% { transform: none; } }
@keyframes sk-mk-ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes sk-mk-spin { to { transform: rotate(360deg); } }
@keyframes sk-mk-title { 0% { opacity: 0; transform: translateY(8px) scale(.7); letter-spacing: .3em; } 100% { opacity: 1; transform: none; letter-spacing: .03em; } }
/* 창 높이가 낮으면(960×540 등) 작게 해서 아래 속도계·안내 줄과 겹치지 않게 한다 */
@media (max-height: 640px) {
  .sk-mk { --mk-size: 64px; top: calc(50% + 108px); gap: 0; }
  .sk-mk[data-mk="legend"] { --mk-size: 76px; }
  .sk-mk-title, .sk-mk[data-mk="legend"] .sk-mk-title { font-size: 24px; }
  .sk-mk-sub { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-mk.is-show .sk-mk-art-box, .sk-mk.is-show .sk-mk-art-box::before, .sk-mk.is-show .sk-mk-rays, .sk-mk.is-show .sk-mk-title { animation: none; }
}

/* 히트마커: 반샷은 분홍 X + 고리. 반샷으로 끝낸 킬은 X를 킬 색으로 두고 고리만 남긴다 */
.sk-hit.is-half::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #ff4d8d, 0 0 6px rgba(255, 77, 141, .75);
}
.sk-hit.is-half:not(.is-kill) i { background: #ff4d8d; box-shadow: 0 0 5px rgba(255, 77, 141, .9); }

/* 킬피드 반샷 표시 */
.sk-kf-half {
  flex: none; padding: 0 5px; border-radius: 3px; font-size: 11px; font-weight: 900; line-height: 1.5; color: #ff4d8d;
  background: rgba(255, 77, 141, .16); box-shadow: inset 0 0 0 1px rgba(255, 77, 141, .55);
}

/* 근접 무기: 탄약 칸은 무기 이름만 남기고 줄인다 */
.sk-ammo.is-melee { min-width: 0; }

/* 배율 표시: 렌즈 위(.sk-scope-zoom)와 조준 중 크로스헤어 옆(.sk-ads) */
.sk-scope-zoom, .sk-ads { display: inline-flex; align-items: center; gap: 6px; color: #35e0ff; text-shadow: 0 1px 2px var(--sk-navy-900); }
.sk-scope-zoom { font-size: 17px; }
.sk-ads {
  position: absolute; left: 50%; top: 50%; transform: translate(24px, 12px); padding: 2px 6px; border-radius: 4px;
  font: 900 14px/1 var(--sk-mono); background: var(--sk-well); opacity: calc(1 - var(--sk-scope, 0) * 2.5);
  animation: sk-ads-in .14s ease-out .1s backwards; /* 곧 스코프가 덮을 무기에서 잠깐 번쩍이지 않게 늦게 나타난다 */
}
@keyframes sk-ads-in { from { opacity: 0; } }
.sk-ui.sk-cursor .sk-ads, .sk-ui.sk-emo-open .sk-ads { visibility: hidden; }
.sk-zoom-pips { display: inline-flex; gap: 3px; }
.sk-zoom-pips i { display: block; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.sk-zoom-pips i.is-on { background: currentColor; }

@media (max-width: 640px) {
  .sk-speed { bottom: 118px; width: 104px; margin-left: -52px; }
  .sk-speed-num { font-size: 17px; }
  .sk-callout { font-size: 15px; }
  .sk-hud-banner { top: 72px; gap: 8px; padding: 7px 14px 8px 10px; }
  .sk-hud-banner-ico { font-size: 20px; }
  .sk-hud-banner-title { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-hud-banner, .sk-hud-banner.is-show { transform: translate(-50%, 0); }
}

/* ===================== 17. 휴대폰: 경기 밖 화면 =====================
 * PC 화면(1280×720 이상, 마우스)에는 아래 규칙이 하나도 걸리지 않는다. 그래서 새 규칙은 모두 미디어쿼리 안에 둔다.
 * 기준 화면: 가로 844×390, 667×375, 세로 390×540. 경기 HUD(.sk-hud·.sk-hp·.sk-ammo·.sk-slots·.sk-top·.sk-hint·.sk-spec)는 건드리지 않는다.
 */

/* 손가락으로 누르는 기기: 누름 대상을 40px 이상으로 키우고 키보드 안내를 뺀다 */
@media (pointer: coarse) {
  .sk-page, .sk-modal, .sk-nick, .sk-pause, .sk-loadout { touch-action: manipulation; }
  .sk-page-inner {
    padding-right: max(clamp(14px, 3vw, 32px), env(safe-area-inset-right));
    padding-bottom: max(clamp(14px, 3vw, 32px), env(safe-area-inset-bottom));
    padding-left: max(clamp(14px, 3vw, 32px), env(safe-area-inset-left));
  }
  .sk-sheet { max-height: calc(100dvh - 32px); }
  .sk-sheet-body { overscroll-behavior: contain; }

  .sk-btn--sm, .sk-seg-btn, .sk-choice, .sk-tab, .sk-modepick--bar .sk-mode-btn { min-height: 40px; }
  .sk-range { height: 40px; touch-action: pan-y; }
  .sk-range::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -9px; }
  .sk-range::-moz-range-thumb { width: 22px; height: 22px; }
  /* iOS는 글자가 16px보다 작은 입력칸을 누르면 화면을 확대한다 */
  .sk-input { font-size: 16px; }

  .sk-lo-head .sk-key, .sk-lc-card .sk-key, .sk-lc-hint, .sk-lo-sub, .sk-sb-foot { display: none; }
}

/* 무기 선택: 높이가 낮거나 폭이 좁으면 작은 카드로 줄인다(고르는 시간이 짧아 스크롤할 틈이 없다) */
@media (max-height: 480px), (max-width: 560px) {
  .sk-lo-cards { grid-template-columns: repeat(auto-fit, minmax(164px, 1fr)); gap: 6px; }
  .sk-lo-card { gap: 4px; padding: 5px 8px; }
  .sk-lo-ico { width: 28px; height: 28px; border-radius: 6px; font-size: 17px; }
  .sk-lo-name { font-size: 13.5px; }
  .sk-lo-card .sk-lo-tagline { display: none; }
  .sk-lo-sum { flex-wrap: nowrap; overflow: hidden; }
  .sk-lo-sumitem { padding: 1px 4px; font-size: 11px; }
  .sk-lo-sumitem small { font-size: 10px; }
  .sk-lo-sumitem:nth-child(n+4) { display: none; }
  .sk-lo-extras { justify-content: flex-start; gap: 4px 12px; padding: 4px 8px; }
  .sk-lo-extra { gap: 6px; }
  .sk-lo-foot { font-size: 11.5px; }
}

/* 부활 대기 패널: 무기가 많아도 한 줄로 두고 옆으로 민다. 위의 부활 안내와 아래의 G 안내를 가리지 않는다 */
@media (max-height: 480px), (max-width: 640px) {
  .sk-lc, .sk-lc.is-many {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: baseline;
    width: min(760px, calc(100% - 16px - 2 * max(env(safe-area-inset-left), env(safe-area-inset-right)))); padding: 6px 8px 8px;
  }
  .sk-lc-head { margin-bottom: 4px; }
  .sk-lc-title { font-size: 12.5px; white-space: nowrap; }
  .sk-lc-note { grid-column: 2; grid-row: 1; margin: 0 0 4px; overflow: hidden; font-size: 11.5px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
  .sk-lc-cards, .sk-lc.is-many .sk-lc-cards {
    grid-column: 1 / -1; display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; touch-action: pan-x;
  }
  .sk-lc-card, .sk-lc.is-many .sk-lc-card { flex: 1 0 auto; min-width: 84px; min-height: 44px; padding: 4px 10px; gap: 6px; scroll-snap-align: start; }
  .sk-lc-ico, .sk-lc.is-many .sk-lc-ico { font-size: 18px; }
  .sk-lc-name, .sk-lc.is-many .sk-lc-name { font-size: 12.5px; }
  .sk-lc-term { display: none; }
}
@media (max-width: 640px) {
  .sk-lc { bottom: 128px; }
}

/* 높이가 낮은 가로 화면 */
@media (max-height: 480px) {
  .sk-ui { --sk-safe-l: max(12px, env(safe-area-inset-left)); --sk-safe-r: max(12px, env(safe-area-inset-right)); --sk-safe-b: max(6px, env(safe-area-inset-bottom)); }

  /* 공통 골격 */
  .sk-page-inner { gap: 8px; padding: 8px var(--sk-safe-r) var(--sk-safe-b) var(--sk-safe-l); }
  .sk-page-inner > .sk-hazard { display: none; }
  .sk-h1 { font-size: 19px; }
  .sk-bar { gap: 8px; }
  .sk-bar-title { flex: 1 1 140px; }
  .sk-bar-sub { margin-top: 0; font-size: 11.5px; line-height: 1.3; }
  .sk-chips { flex-wrap: nowrap; gap: 4px; margin-top: 3px; overflow-x: auto; scrollbar-width: none; }
  .sk-chips::-webkit-scrollbar { display: none; }
  .sk-chips .sk-chip { flex: none; min-height: 22px; padding: 0 7px; font-size: 11px; }
  .sk-points--big { padding: 4px 8px; font-size: 14px; }
  .sk-panel { gap: 6px; padding: 8px 10px; }
  .sk-note, .sk-set-hint, .sk-field-hint { font-size: 11.5px; }
  .sk-empty { gap: 3px; padding: 10px 12px; }
  .sk-empty-art .sk-mapico { width: 72px; height: 48px; }
  .sk-empty-title { margin-top: 2px; font-size: 15px; }
  .sk-empty-sub { margin-bottom: 4px; font-size: 12.5px; }
  .sk-loading { padding: 16px 0; }

  /* 시트: 머리글과 바닥글을 얇게 하고, 라벨을 입력 왼쪽에 둔다 */
  .sk-modal { padding: 6px var(--sk-safe-r) var(--sk-safe-b) var(--sk-safe-l); }
  .sk-sheet, .sk-create-sheet { width: min(760px, 100%); max-height: calc(100vh - 12px); max-height: calc(100dvh - 6px - var(--sk-safe-b)); }
  .sk-sheet-head { padding: 4px 10px 2px 14px; }
  .sk-sheet-title { font-size: 16px; }
  .sk-sheet-body { gap: 8px; padding: 4px 14px 8px; }
  .sk-sheet-foot { padding: 6px 14px; }
  .sk-sheet .sk-field { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .sk-sheet .sk-field:has(> .sk-mapcards) { align-items: flex-start; }
  .sk-sheet .sk-field-label { flex: 0 0 84px; }
  .sk-sheet .sk-field > .sk-input, .sk-sheet .sk-field > .sk-choices, .sk-sheet .sk-field > .sk-modepick, .sk-sheet .sk-field > .sk-mapcards { flex: 1 1 0; min-width: 0; }
  .sk-sheet .sk-field > .sk-input { width: auto; min-height: 40px; }
  .sk-sheet .sk-field > .sk-seg { align-self: center; }
  .sk-sheet .sk-field > .sk-set-hint { flex: 1 1 100%; margin-left: 94px; }
  .sk-sheet-body > .sk-field-hint { margin-top: -4px; padding-left: 94px; }
  .sk-stepper { gap: 8px; }
  .sk-stepper-val { min-width: 48px; font-size: 18px; }
  .sk-form-actions {
    position: sticky; bottom: -8px; z-index: 1; margin: 0 -14px -8px; padding: 6px 14px;
    background: #101626;
  }
  .sk-create { gap: 8px; }
  .sk-mode-btn { min-height: 44px; padding: 4px 10px; gap: 8px; }
  .sk-mode-ico { font-size: 18px; }
  .sk-mode-txt b { font-size: 13.5px; }
  .sk-mode-txt small { font-size: 10.5px; }
  .sk-mapcards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
  .sk-mapcards .sk-mapcard:not(.sk-mapcard--sm) { flex-direction: row; align-items: center; gap: 8px; min-height: 44px; padding: 5px 8px; }
  .sk-mapcards .sk-mapcard:not(.sk-mapcard--sm) .sk-mapico, .sk-mapcard.is-static .sk-mapico { flex: none; width: 48px; height: 32px; padding: 2px; }
  .sk-mapcard.is-static { padding: 5px 8px; }
  .sk-mapcard-name { font-size: 13px; }
  .sk-mapcard-en { font-size: 10px; }
  .sk-mapcard-desc { display: none; }
  .sk-mapcard-tag { margin-top: 2px; font-size: 10px; }

  /* 설정 · 조작법 */
  .sk-set-row { gap: 2px; }
  .sk-set-label { font-size: 13px; }
  .sk-set-val { font-size: 13px; }
  .sk-controls { width: 100%; }
  .sk-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  .sk-keys-row { gap: 6px; min-height: 32px; padding: 2px 0; }
  .sk-keys-caps { width: 118px; }
  .sk-key { min-width: 24px; height: 24px; padding: 0 6px; font-size: 11.5px; }
  .sk-keys-desc, .sk-rules { font-size: 12px; }
  .sk-keys-warn { padding: 6px 10px; font-size: 12px; }
  .sk-sub-title { font-size: 12px; }

  /* 메인 메뉴 */
  .sk-brand-title { font-size: 34px; }
  .sk-brand-tag { margin-top: 2px; font-size: 11.5px; }
  .sk-menu-note { font-size: 11.5px; line-height: 1.35; }
  .sk-player { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 0; padding: 8px 10px; }
  .sk-name-view { flex: 1 1 100%; gap: 6px; }
  .sk-name-ico { width: 28px; height: 28px; font-size: 16px; }
  .sk-name-text { font-size: 14px; }
  .sk-player .sk-points--big { align-self: center; }
  .sk-player-mypage { flex: 1 1 auto; width: auto; padding: 0 10px; font-size: 13px; }

  /* 닉네임 게이트 · 마이페이지의 닉네임 칸 */
  .sk-nick { padding: 6px var(--sk-safe-r) var(--sk-safe-b) var(--sk-safe-l); }
  .sk-nick-body { gap: 4px; padding: 12px 16px; }
  .sk-nick-kicker { font-size: 11px; }
  .sk-nick-title { font-size: 20px; }
  .sk-nick-lead { font-size: 12.5px; }
  .sk-nick-form { gap: 8px; margin-top: 4px; }
  .sk-nick-field { gap: 4px; }
  .sk-nick-input { min-height: 42px; }
  .sk-nick-status { min-height: 34px; font-size: 12.5px; line-height: 1.3; }
  .sk-nick-submit { min-height: 44px; }

  /* 마이페이지 */
  .sk-my-grid, .sk-my-col { gap: 8px; }
  .sk-my-stats { gap: 4px; }
  .sk-my-stat { padding: 3px 8px; }
  .sk-my-stat dt { font-size: 11px; }
  .sk-my-stat dd { margin-top: 0; font-size: 15px; }
  .sk-my-save { min-height: 42px; margin-top: 22px; }
  .sk-my-equiprow { gap: 4px; padding-top: 6px; }
  .sk-my-equipnow { font-size: 13px; }
  .sk-my-secrets { gap: 4px; }
  .sk-my-secret { padding: 4px 8px; }
  .sk-my-secrethead { font-size: 12.5px; }

  /* 상점: 탭은 카드를 내려도 위에 남는다 */
  .sk-shop-bar {
    position: sticky; top: 0; z-index: 3; gap: 4px 12px; margin: 0 calc(-1 * var(--sk-safe-r)) 0 calc(-1 * var(--sk-safe-l));
    padding: 4px var(--sk-safe-r) 4px var(--sk-safe-l); background: rgba(8, 12, 22, .96);
  }
  .sk-shop-note { flex-basis: 160px; font-size: 12px; }
  .sk-shop-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
  .sk-shop-card { gap: 6px; padding: 8px 10px; }
  .sk-shop-head { gap: 8px; }
  .sk-shop-name { font-size: 14px; }
  .sk-shop-state { font-size: 12px; }
  .sk-shop-card .sk-lo-tagline { margin-top: 0; font-size: 11px; }
  .sk-shop-stats { font-size: 11.5px; }
  .sk-shop-stat { grid-template-columns: 48px minmax(0, 1fr); padding: 1px 0; }
  .sk-shop-foot { gap: 2px; }
  .sk-shop-need { font-size: 11.5px; }

  /* 로비 */
  .sk-lobby .sk-chip--me { display: none; }
  .sk-rooms { gap: 6px; }
  .sk-room-row { padding: 5px 10px; column-gap: 10px; }
  .sk-room-name { font-size: 14px; }
  .sk-room-meta { font-size: 11px; }
  .sk-room-join { padding: 0 8px; }

  /* 대기실 */
  .sk-room-grid, .sk-room-left, .sk-room-side { gap: 8px; }
  .sk-room-teams { gap: 6px; }
  .sk-vs { display: none; }
  .sk-team-head { flex-wrap: nowrap; gap: 6px; min-height: 46px; padding: 2px 8px; }
  .sk-team--owner .sk-team-head, .sk-team--charterer .sk-team-head, .sk-team--ffa .sk-team-head { border-top-width: 3px; }
  .sk-team-name { flex: 1 1 auto; min-width: 0; font-size: 14px; white-space: nowrap; }
  .sk-team-name small { display: none; }
  .sk-team-head .sk-btn--sm { flex: none; padding: 0 6px; font-size: 11.5px; }
  .sk-team-list, .sk-team--ffa .sk-team-list { gap: 3px; padding: 4px; }
  .sk-pl, .sk-team--ffa .sk-pl { gap: 4px; min-height: 30px; padding: 0 6px; }
  .sk-pl-crown { width: 16px; font-size: 12px; }
  .sk-pl-name { font-size: 13px; }
  .sk-pl .sk-ping { font-size: 10.5px; }
  .sk-pl-ready { min-width: 38px; font-size: 11px; }
  .sk-chat-log { height: 96px; padding: 4px 8px; font-size: 12.5px; }
  .sk-chat-form .sk-input { min-height: 40px; }
  /* 방장에게는 고르는 카드에 지금 맵이 이미 표시되어 있다 */
  .sk-room-mapcur:has(+ .sk-mapcards:not([hidden])) { display: none; }
  .sk-room-kills { gap: 6px; padding-top: 6px; }
  .sk-room-foot { flex-wrap: nowrap; gap: 8px; padding: 5px 10px var(--sk-safe-b); }
  .sk-room-status { flex: 1 1 0; min-width: 0; font-size: 12.5px; line-height: 1.25; }
  .sk-room-foot-actions, .sk-room-foot-actions .sk-btn { width: auto; }
  .sk-room-foot-actions { flex: none; }
  .sk-room-foot-actions .sk-btn--big { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
  .sk-modepick--bar { flex: none; grid-template-columns: auto auto auto; width: auto; }
  .sk-modepick--bar .sk-mode-btn { gap: 4px; padding: 0 8px; }
  .sk-modepick--bar .sk-mode-ico { font-size: 15px; }

  /* 일시정지: 안이 길어져도 스크롤할 수 있고, 버튼은 한 줄에 놓는다 */
  .sk-pause { overflow-y: auto; padding: 6px var(--sk-safe-r) var(--sk-safe-b) var(--sk-safe-l); }
  .sk-pause-panel { width: min(480px, 100%); padding-bottom: 10px; }
  .sk-pause-title { margin-top: 6px; font-size: 20px; }
  .sk-pause-note { margin-top: 0; font-size: 11.5px; }
  .sk-pause-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 12px 0; }
  .sk-pause-btns .sk-btn { padding: 0 6px; white-space: normal; }
  .sk-pause-btns .sk-btn--big { grid-column: 1 / -1; min-height: 44px; }
  .sk-confirm { margin: 8px 12px 0; padding: 8px 10px; }
  .sk-confirm-text { margin-bottom: 6px; font-size: 12.5px; line-height: 1.35; }

  /* 무기 선택: 고르는 시간이 짧으니 11자루와 빠른 교체 줄까지 한 화면에 넣는다 */
  .sk-loadout { grid-template-columns: minmax(0, 1fr); padding: 6px var(--sk-safe-r) var(--sk-safe-b) var(--sk-safe-l); }
  .sk-lo-panel { gap: 4px; }
  .sk-lo-header { gap: 10px; }
  .sk-lo-title { font-size: 17px; }
  .sk-lo-count { width: 34px; height: 34px; font-size: 17px; }
  .sk-lo-card { padding: 3px 8px; }
  .sk-lo-card .sk-lo-ico { width: 24px; height: 24px; font-size: 15px; }
  .sk-lo-extras { flex-wrap: nowrap; overflow-x: auto; padding: 2px 8px; }
  .sk-lo-extra { flex: none; }
  .sk-lo-extra .sk-choices { flex-wrap: nowrap; }
  .sk-lo-extra .sk-choice { flex: none; white-space: nowrap; }

  /* 부활 대기: 안내를 한 줄로 줄여 점수 바로 아래에 두고, 그 아래에 패널을 둔다 */
  .sk-rsp { top: 78px; bottom: auto; display: flex; align-items: center; justify-content: center; gap: 10px; width: max-content; min-width: 0; max-width: calc(100% - 16px); padding: 3px 14px; }
  .sk-rsp-main { font-size: 13.5px; }
  .sk-rsp-wpn { padding: 1px 6px; font-size: 11.5px; }
  .sk-rsp-line { margin-top: 0; font-size: 12.5px; white-space: nowrap; }
  .sk-rsp-num { font-size: 20px; }
  .sk-rsp-quick { margin-top: 0; font-size: 12px; white-space: nowrap; }
  .sk-rsp-quick .sk-key { min-width: 20px; height: 20px; padding: 0 5px; font-size: 11px; }
  .sk-lc { top: 116px; bottom: auto; }

  /* 점수판: 입력을 받지 않으므로 스크롤 없이 다 들어가야 한다 */
  .sk-scoreboard { padding: 4px var(--sk-safe-r) 4px var(--sk-safe-l); }
  .sk-sb-panel { max-height: 100%; padding-bottom: 6px; }
  .sk-sb-head { gap: 2px 12px; padding: 4px 10px; }
  .sk-sb-title { font-size: 15px; }
  .sk-sb-meta { margin-top: 0; font-size: 11px; }
  .sk-sb-score { font-size: 13px; }
  .sk-sb-score b { font-size: 18px; }
  .sk-sb-cols { gap: 6px; padding: 0 6px; }
  .sk-sb-team-name { gap: 6px; padding: 2px 8px; font-size: 13px; }
  .sk-sb-table { font-size: 12px; }
  .sk-sb-table th, .sk-sb-table td { padding: 2px 6px; }
  .sk-sb-table thead th { font-size: 10.5px; }
  .sk-sb-foot { display: none; }

  /* 결과 */
  .sk-res-banner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 14px; padding: 2px 8px 4px; }
  .sk-res-kicker { display: none; }
  .sk-res-title { margin-top: 0; font-size: 24px; }
  .sk-res-score { margin-top: 0; font-size: 15px; }
  .sk-res-verdict { margin-top: 0; font-size: 12px; }
  .sk-res-reward { gap: 2px 14px; padding: 4px 12px; }
  .sk-res-gain-num { font-size: 24px; }
  .sk-res-gain-unit { font-size: 13px; }
  .sk-res-lines { gap: 1px 12px; font-size: 11.5px; }
  .sk-res-total { font-size: 11.5px; }
  .sk-res-grid { gap: 8px; }
  .sk-res-rounds { gap: 4px; }
  .sk-res-round { min-width: 64px; padding: 3px 6px; }
  .sk-res-rw { font-size: 12.5px; }
  .sk-res-reason { font-size: 10.5px; }
  .sk-res-mvp { gap: 4px; padding: 8px 10px; }
  .sk-mvp-name { font-size: 16px; }
  .sk-mvp-team { font-size: 12px; }
  .sk-mvp-stats { gap: 4px; margin-top: 2px; }
  .sk-mvp-stats div { padding: 2px 4px; }
  .sk-mvp-stats dd { font-size: 15px; }
  .sk-res-podium { gap: 8px; padding-top: 0; }
  .sk-pod { gap: 1px; }
  .sk-pod-medal { font-size: 20px; }
  .sk-pod--1 .sk-pod-medal { font-size: 24px; }
  .sk-pod-name { font-size: 12.5px; }
  .sk-pod--1 .sk-pod-name { font-size: 14px; }
  .sk-pod-kills { font-size: 11px; }
  .sk-pod-block { margin-top: 0; font-size: 15px; }
  .sk-pod--1 .sk-pod-block { height: 36px; }
  .sk-pod--2 .sk-pod-block { height: 26px; }
  .sk-pod--3 .sk-pod-block { height: 20px; }
  .sk-res-actions { gap: 8px; padding: 5px 8px var(--sk-safe-b); }
  .sk-res-actions .sk-btn--big { min-height: 42px; padding: 0 22px; font-size: 14.5px; }
}

/* 낮은 화면 중 가로로 넉넉한 곳: 한 줄로 쌓던 것을 두 칸으로 나눈다 */
@media (max-height: 480px) and (min-width: 561px) {
  .sk-menu-wrap {
    grid-template-columns: minmax(224px, 1fr) minmax(0, 2fr); grid-template-rows: auto auto 1fr;
    grid-template-areas: "brand nav" "player nav" "note nav"; gap: 8px 14px;
    width: min(1000px, 100%); padding: 8px var(--sk-safe-r) var(--sk-safe-b) var(--sk-safe-l);
  }
  .sk-menu-nav { gap: 8px; }
  .sk-menu-btn { gap: 10px; min-height: 66px; padding: 6px 12px; }
  .sk-menu-btn--main { min-height: 88px; }
  .sk-menu-btn--wide { grid-column: span 3; }
  .sk-menu-btn--sub { grid-column: span 2; gap: 8px; min-height: 60px; padding: 6px 10px; }
  .sk-menu-label { font-size: 15px; }
  .sk-menu-btn--main .sk-menu-label { font-size: 20px; }
  .sk-menu-btn--sub .sk-menu-label { font-size: 14px; }
  .sk-menu-sub { font-size: 11px; line-height: 1.25; }

  .sk-nick-card { width: min(680px, 100%); }
  .sk-nick-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 20px; align-content: start; }
  .sk-nick-form { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; }

  .sk-my-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-my-nickform { grid-template-columns: minmax(0, 1fr) auto; }

  .sk-settings .sk-sheet-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; align-items: start; }
  .sk-settings .sk-note { grid-column: 1 / -1; }

  .sk-room-left { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: stretch; }
  .sk-room-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-chat-log { flex: 1 1 64px; height: 0; }
  .sk-room-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); align-items: start; }
  .sk-mapcards--sm { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

  .sk-sb-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-res-grid { grid-template-columns: minmax(0, 1.4fr) minmax(190px, 1fr); }

  /* 로비: 방 한 줄에 다 넣어 이름 자리를 넓힌다 */
  .sk-bar-actions { width: auto; }
  .sk-bar-actions .sk-btn { flex: none; }
  .sk-room-row { grid-template-columns: 48px minmax(0, 1fr) 60px 52px 84px; grid-template-areas: "ico main count badge join"; }
  .sk-room-ico { width: 48px; height: 34px; }
  .sk-room-ico .sk-mapico { width: 38px; height: 26px; }
}
/* 아주 낮고 좁은 화면(568×320 등): 부활 안내와 패널을 점수 바로 아래로 올려 G 안내 자리를 남긴다 */
@media (max-height: 340px) and (max-width: 640px) {
  .sk-rsp { top: 56px; }
  .sk-lc { top: 88px; }
}
@media (max-height: 480px) and (max-width: 640px) {
  .sk-menu-btn--sub .sk-menu-sub { display: none; }
  .sk-team-head .sk-team-count:has(+ .sk-btn:not([hidden])) { display: none; }
}
/* 낮고 폭도 좁은 곳: 점수판과 대기실 명단에서 핑을 빼고 긴 이름을 줄인다 */
@media (max-height: 480px) and (max-width: 720px) {
  .sk-sb-team--owner .sk-sb-table :is(th, td):nth-child(5), .sk-sb-team--charterer .sk-sb-table :is(th, td):nth-child(5) { display: none; }
  .sk-sb-team--owner .sk-sb-name > span:first-child, .sk-sb-team--charterer .sk-sb-name > span:first-child { display: inline-block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  .sk-pl .sk-ping, .sk-team-emoji { display: none; }
}

/* 세로 화면: 메뉴와 상점의 머리글을 줄여 스크롤을 덜 한다 */
@media (max-width: 560px) {
  .sk-menu-wrap { gap: 10px; padding: 12px 14px; }
  .sk-brand-title { font-size: 40px; }
  .sk-brand-tag { margin-top: 2px; font-size: 12.5px; }
  .sk-player { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 0; padding: 10px 12px; }
  .sk-name-view { flex: 1 1 100%; }
  .sk-name-ico { width: 32px; height: 32px; font-size: 18px; }
  .sk-name-text { font-size: 16px; }
  .sk-player .sk-points--big { align-self: center; }
  .sk-player-mypage { flex: 1 1 auto; width: auto; }
  .sk-menu-nav { gap: 8px; }
  .sk-menu-btn { gap: 10px; min-height: 56px; padding: 8px 12px; }
  .sk-menu-btn--main { min-height: 66px; }
  .sk-menu-btn--wide { grid-column: span 3; }
  .sk-menu-btn--sub { grid-column: span 2; flex-direction: column; justify-content: center; gap: 4px; min-height: 58px; padding: 6px; text-align: center; }
  .sk-menu-btn--sub .sk-menu-sub { display: none; }
  .sk-menu-label { font-size: 15px; }
  .sk-menu-sub { line-height: 1.25; }

  .sk-shop .sk-bar, .sk-mypage .sk-bar { row-gap: 2px; }
  .sk-shop .sk-bar-title, .sk-mypage .sk-bar-title { display: contents; }
  .sk-shop .sk-h1, .sk-mypage .sk-h1 { flex: 1 1 0; min-width: 0; font-size: 20px; }
  .sk-shop .sk-bar .sk-points--big, .sk-mypage .sk-bar .sk-points--big { order: 1; padding: 4px 8px; font-size: 14px; }
  .sk-shop .sk-bar-sub, .sk-mypage .sk-bar-sub { order: 2; flex: 1 1 100%; margin-top: 4px; }
  .sk-page-inner > .sk-hazard { display: none; }
  .sk-keys-caps { width: 118px; }
  /* 카드가 길게 쌓이므로 탭은 내려도 위에 남는다 */
  .sk-shop-bar { position: sticky; top: 0; z-index: 3; gap: 4px 12px; margin: 0 -14px; padding: 4px 14px; background: rgba(8, 12, 22, .96); }
  .sk-room-foot { gap: 6px; padding: 8px 10px; }
  .sk-room-status { flex-basis: auto; font-size: 12.5px; }
  .sk-room-foot-actions .sk-btn--big { min-height: 44px; }
  /* 점수판은 입력을 받지 않으므로 한 화면에 다 들어가야 한다 */
  .sk-sb-head { gap: 4px 12px; padding: 6px 12px; }
  .sk-sb-title { font-size: 18px; }
  .sk-sb-team-name { padding: 5px 10px; font-size: 14px; }
  .sk-sb-table th, .sk-sb-table td { padding: 4px 5px; }
}

/* ───────────── 좀비 물량 막기: 스테이지 띠 · 보스 체력 · 동료 (ui/horde.js) ───────────── */
.sk-hz { pointer-events: none; }
.sk-hz-top {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; padding: 6px 14px; max-width: calc(100% - 24px);
}
.sk-hz-top.is-boss { border-color: rgba(255, 90, 60, .55); box-shadow: 0 0 18px rgba(255, 60, 40, .25), 0 14px 34px rgba(0, 0, 0, .38); }
.sk-hz-top.is-clear { border-color: rgba(61, 220, 151, .55); }
.sk-hz-stage { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.sk-hz-ico { font-size: 20px; align-self: center; }
.sk-hz-stage-l { font-size: 12px; color: var(--sk-muted); font-weight: 700; letter-spacing: .04em; }
.sk-hz-stage-n { font-size: 26px; font-weight: 900; color: #b6ff7a; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(140, 255, 90, .35); }
.sk-hz-sub { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sk-hz-line { font-size: 14px; font-weight: 800; color: var(--sk-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-hz-clock { font-size: 11.5px; color: var(--sk-muted); font-variant-numeric: tabular-nums; }
.sk-hz-bosses { position: absolute; top: 92px; left: 50%; transform: translateX(-50%); width: min(520px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 6px; }
.sk-hz-boss { padding: 4px 8px 6px; border-radius: 8px; background: rgba(10, 6, 8, .62); border: 1px solid rgba(255, 90, 60, .35); }
.sk-hz-boss.is-rage { border-color: rgba(255, 40, 40, .8); animation: sk-hz-pulse 1s ease-in-out infinite; }
.sk-hz-bhead { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 800; }
.sk-hz-bname { color: #ffd6c9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-hz-bskill { color: var(--sk-warn); font-size: 12px; }
.sk-hz-bpct { margin-left: auto; color: var(--sk-muted); font-variant-numeric: tabular-nums; }
.sk-hz-bbar { height: 8px; margin-top: 3px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.sk-hz-bfill { display: block; height: 100%; background: linear-gradient(90deg, #ff3c3c, #ff9a3c); transform-origin: left center; transition: transform .2s; }
.sk-hz-team { position: absolute; top: 12px; left: var(--sk-safe-l, 12px); margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; width: 190px; }
.sk-hz-mate { display: grid; grid-template-columns: 1fr auto; gap: 1px 6px; padding: 4px 7px; border-radius: 7px; background: rgba(6, 10, 18, .58); font-size: 12px; }
.sk-hz-mate.is-me { border: 1px solid rgba(63, 140, 255, .5); }
.sk-hz-mate.is-down { opacity: .65; }
.sk-hz-mname { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-hz-mhp { color: var(--sk-muted); font-variant-numeric: tabular-nums; text-align: right; }
.sk-hz-mbar { grid-column: 1 / -1; position: relative; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.sk-hz-mbar > i { position: absolute; inset: 0; background: var(--sk-ok); transform-origin: left center; transition: transform .2s; }
.sk-hz-mate.is-down .sk-hz-mbar > i { background: var(--sk-bad); }
.sk-hz-shield { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(143, 220, 255, .85); }
.sk-hz-warn { position: absolute; left: 50%; bottom: 23%; transform: translateX(-50%); padding: 5px 12px; border-radius: 8px; background: rgba(60, 8, 8, .7); color: #ffd0c4; font-weight: 800; font-size: 14px; white-space: nowrap; }
@keyframes sk-hz-pulse { 50% { box-shadow: 0 0 16px rgba(255, 40, 40, .55); } }
/* 스테이지 남은 시간(40초)과 팀 레벨·경험치 막대 */
.sk-hz-time { font-size: 20px; font-weight: 900; color: var(--sk-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-hz-time.is-urgent { color: #ff6b5a; animation: sk-hz-blink .5s steps(2) infinite; }
@keyframes sk-hz-blink { 50% { opacity: .55; } }
.sk-hz-xp { position: absolute; left: 50%; top: 62px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 3px 10px; border-radius: 8px; background: rgba(6, 10, 18, .6); font-size: 12.5px; color: var(--sk-muted); pointer-events: none; }
.sk-hz-lv { color: #ffd76a; font-size: 13px; font-weight: 900; }
.sk-hz-xpbar { position: relative; width: 180px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.sk-hz-xpfill { position: absolute; inset: 0; background: linear-gradient(90deg, #ffd76a, #ffb02e); transform-origin: left; transform: scaleX(0); transition: transform .25s; }
.sk-hz-xpnum { font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }

/* ───────────── 좀비 물량 막기: 카드 고르기 (ui/cards.js) ───────────── */
.sk-cards { display: grid; place-items: center; padding: 16px; background: rgba(3, 5, 10, .62); pointer-events: auto; overflow-y: auto; }
.sk-cd-panel { width: min(980px, 100%); display: flex; flex-direction: column; gap: 14px; }
.sk-cd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sk-cd-title { margin: 0; font-size: 26px; color: #b6ff7a; }
.sk-cd-sub { margin: 4px 0 0; color: var(--sk-muted); font-size: 14px; }
.sk-cd-timer { font-size: 18px; font-weight: 900; color: var(--sk-text); font-variant-numeric: tabular-nums; }
.sk-cd-timer.is-urgent { color: var(--sk-bad); }
.sk-cd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sk-cd-grid.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sk-cd-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 250px; padding: 18px 14px 16px;
  border-radius: 14px; border: 2px solid var(--cd-color); color: var(--sk-text); text-align: center; cursor: pointer;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--cd-color) 22%, transparent), rgba(12, 17, 30, .96) 70%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform .12s, box-shadow .12s, opacity .2s;
  font: inherit;
}
.sk-cd-card:hover:not([disabled]), .sk-cd-card:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(0, 0, 0, .5), 0 0 22px color-mix(in srgb, var(--cd-color) 45%, transparent); outline: none; }
.sk-cd-card[disabled] { cursor: default; opacity: .45; }
.sk-cd-card.is-picked { opacity: 1; transform: translateY(-4px); box-shadow: 0 0 0 3px var(--sk-ok), 0 16px 30px rgba(0, 0, 0, .5); }
.sk-cd-card.is-selected { transform: translateY(-6px); box-shadow: 0 0 0 3px #b6ff7a, 0 16px 30px rgba(0, 0, 0, .5), 0 0 26px rgba(182, 255, 122, .35); }
.sk-cd-card.is-selected::after { content: '선택됨'; position: absolute; top: 8px; right: 10px; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 900; color: #0b1a06; background: #b6ff7a; }
.sk-cd-confirm { margin-left: auto; min-width: 150px; }
.sk-cd-key { position: absolute; top: 8px; left: 10px; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 900; background: rgba(255, 255, 255, .1); color: var(--sk-muted); }
.sk-cd-icon { font-size: 44px; line-height: 1.1; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.sk-cd-name { font-size: 18px; font-weight: 900; }
.sk-cd-tier { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--cd-color); }
.sk-cd-desc { font-size: 14px; line-height: 1.45; color: #d6e0ee; }
.sk-cd-owned { margin-top: auto; font-size: 12px; color: var(--sk-muted); }
.sk-cd--legend { animation: sk-cd-shine 2.4s ease-in-out infinite; }
@keyframes sk-cd-shine { 50% { box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 0 26px rgba(255, 176, 46, .45); } }
.sk-cd-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sk-cd-wait { margin: 0; color: var(--sk-muted); font-size: 13px; }
.sk-cd-perks { margin: 0; padding: 8px 10px; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; border-radius: 10px; background: rgba(6, 10, 18, .55); font-size: 12.5px; }
.sk-cd-perks li { display: flex; gap: 5px; color: var(--sk-muted); }
.sk-cd-perks b { color: var(--sk-text); }
/* 카드가 뜬 직후의 잠금(ui/cards.js CARD_ARM_MS): 쏘던 클릭으로 잘못 고르지 않게 흐리게 두고 채워지는 막대를 보여 준다 */
.sk-cd-panel:focus { outline: none; }
.sk-cd-arm { height: 4px; margin: -6px 0 -4px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; visibility: hidden; }
.sk-cd-arm > i { display: block; height: 100%; background: #b6ff7a; transform: scaleX(0); transform-origin: left; }
.sk-cards.is-arming .sk-cd-arm { visibility: visible; }
.sk-cards.is-arming .sk-cd-arm.is-run > i { animation: sk-cd-fill var(--cd-arm-ms, 1000ms) linear forwards; }
.sk-cards.is-arming .sk-cd-card { cursor: progress; opacity: .6; }
.sk-cards.is-arming .sk-cd-card:hover { transform: none; box-shadow: 0 10px 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); }
.sk-cards.is-arming .sk-cd-reroll { opacity: .6; }
/* 다시 뽑기: R을 누르고 있는 동안 단추 아래 줄이 찬다(REROLL_HOLD_MS) */
.sk-cd-reroll { position: relative; overflow: hidden; }
.sk-cd-reroll::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #b6ff7a; transform: scaleX(0); transform-origin: left; }
.sk-cd-reroll.is-holding::after { animation: sk-cd-fill var(--cd-hold-ms, 500ms) linear forwards; }
@keyframes sk-cd-fill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .sk-cards.is-arming .sk-cd-arm.is-run > i, .sk-cd-reroll.is-holding::after { animation: none; transform: scaleX(1); }
}
@media (max-width: 760px) {
  .sk-cd-grid, .sk-cd-grid.is-four { grid-template-columns: 1fr; gap: 8px; }
  .sk-cd-card { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; gap: 4px 10px; padding: 10px 12px 10px 38px; }
  .sk-cd-icon { font-size: 30px; }
  .sk-cd-desc { flex: 1 1 100%; font-size: 13px; }
  .sk-cd-owned { margin-top: 0; }
  .sk-cd-title { font-size: 21px; }
  .sk-hz-team { width: 150px; top: 64px; }
  .sk-hz-top { gap: 8px; padding: 5px 10px; }
  .sk-hz-stage-n { font-size: 21px; }
  .sk-hz-line { font-size: 12.5px; }
  .sk-hz-bosses { top: 84px; }
  .sk-hz-xp { top: 52px; }
  .sk-hz-xpbar { width: 120px; }
  .sk-hz-time { font-size: 16px; }
}

/* ───────── 메인 메뉴 버튼 일곱 개(2026-11-12): 좀비 물량 막기 · 건의하기 ─────────
   12칸 격자. 멀티플레이는 한 줄, 연습장과 좀비 물량 막기는 반씩, 상점·설정·조작법·건의하기는 넷이 한 줄이라 줄 수는 그대로다.
   위쪽 화면 크기별 규칙의 칸 수(6칸 격자)보다 뒤에 있어 모든 크기에서 이 칸 수를 쓴다 */
.sk-menu-nav { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.sk-menu-btn { grid-column: span 12; }
.sk-menu-btn--wide { grid-column: span 6; }
.sk-menu-btn--sub { grid-column: span 3; }
/* 좀비 물량 막기: 멀티플레이 버튼처럼 칠한 초록 버튼(글자는 어두운 색) */
.sk-menu-btn--zombie {
  color: var(--sk-on-accent); border-color: transparent;
  background: linear-gradient(100deg, #9cee72, #3fbf5a 70%); box-shadow: 0 0 22px rgba(96, 220, 104, .3);
}
.sk-menu-btn--zombie:hover:not(:disabled) {
  border-color: transparent; background: linear-gradient(100deg, #b6f58f, #4fd06a 70%); box-shadow: 0 0 30px rgba(96, 220, 104, .48);
}
.sk-menu-btn--zombie .sk-menu-ico { color: inherit; }
.sk-menu-btn--zombie .sk-menu-sub { opacity: .85; }
.sk-ui .sk-menu-btn--zombie:focus-visible { outline-color: #fff; }
.sk-menu-btn.has-new { position: relative; border-color: rgba(255, 196, 77, .75); }
.sk-menu-btn.has-new::after {
  content: ''; position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--sk-warn); box-shadow: 0 0 10px rgba(255, 196, 77, .8);
}
.sk-menu-btn.has-new .sk-menu-sub { color: var(--sk-warn); opacity: 1; }
@media (max-height: 480px) { .sk-menu-btn--sub .sk-menu-sub { display: none; } }

/* 건의하기 시트(ui/feedback.js) */
.sk-feedback { width: min(620px, 100%); }
.sk-fb-intro { font-size: 13.5px; line-height: 1.5; color: var(--sk-muted); }
.sk-fb-gate {
  padding: 10px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; line-height: 1.45; color: var(--sk-warn);
  background: rgba(255, 196, 77, .08); box-shadow: inset 0 0 0 1px rgba(255, 196, 77, .35);
}
.sk-fb-kinds { align-self: stretch; }
.sk-fb-kinds .sk-seg-btn { flex: 1 1 0; }
.sk-fb-text { min-height: 128px; padding: 10px 12px; resize: vertical; font: 600 14.5px/1.5 var(--sk-font); }
.sk-fb-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sk-fb-count { flex: none; font: 700 12px/1.4 var(--sk-mono); color: var(--sk-dim); }
.sk-fb-count.is-short { color: var(--sk-warn); }
.sk-fb-status { font-size: 13px; font-weight: 700; line-height: 1.45; color: var(--sk-muted); }
.sk-fb-status:empty { display: none; }
.sk-fb-status[data-tone="good"] { color: var(--sk-ok); }
.sk-fb-status[data-tone="bad"] { color: var(--sk-bad); }
.sk-fb-mine { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--sk-line); }
.sk-fb-list-note { font-size: 12.5px; color: var(--sk-dim); }
.sk-fb-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sk-fb-list:empty { display: none; }
.sk-fb-item {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 8px;
  background: rgba(4, 7, 14, .55); box-shadow: inset 0 0 0 1px rgba(160, 195, 245, .14);
}
.sk-fb-item.has-reply { box-shadow: inset 0 0 0 1px rgba(53, 224, 255, .38); }
.sk-fb-item.is-new { box-shadow: inset 0 0 0 1px rgba(255, 196, 77, .7), 0 0 14px rgba(255, 196, 77, .14); }
.sk-fb-item-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sk-fb-when { margin-left: auto; font: 600 11.5px/1 var(--sk-mono); color: var(--sk-dim); }
.sk-fb-st { background: rgba(255, 255, 255, .08); color: var(--sk-muted); }
.sk-fb-st--read { background: rgba(53, 224, 255, .14); color: var(--sk-cyan); }
.sk-fb-st--done { background: rgba(80, 220, 140, .16); color: var(--sk-ok); }
.sk-fb-st--hold { background: rgba(255, 196, 77, .14); color: var(--sk-warn); }
.sk-fb-body {
  margin: 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--sk-text);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.sk-fb-reply { padding: 8px 10px; border-left: 3px solid var(--sk-cyan); border-radius: 0 6px 6px 0; background: rgba(53, 224, 255, .07); }
.sk-fb-reply-who { font-size: 11.5px; font-weight: 800; color: var(--sk-cyan); }
.sk-fb-reply-text { margin: 4px 0 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-height: 480px) {
  /* 일시정지 버튼에 건의하기가 늘어 네 칸으로(휴대폰은 설정·조작법·건의하기·나가기 한 줄, 줄 수는 그대로) */
  .sk-pause-btns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sk-fb-intro { display: none; }
  .sk-fb-text { min-height: 84px; }
}