html, body {
    margin: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #f7f0ff 0%, #eaf7ff 100%);
    font-family: Arial, sans-serif;
  }

  #ui {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 10;
    color: #4a4258;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow: 0 10px 28px rgba(130, 120, 170, 0.18);
    padding: 14px 16px;
    border-radius: 16px;
    line-height: 1.55;
    font-size: 14px;
    backdrop-filter: blur(8px);
  }

  #ui b { color: #ff8fb3; }

  #scoreUI {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10;
    display: flex;
    gap: 10px;
    align-items: stretch;
    color: #4a4258;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(255,255,255,0.92);
    box-shadow: 0 10px 28px rgba(130, 120, 170, 0.16);
    padding: 12px;
    border-radius: 18px;
    backdrop-filter: blur(8px);
  }

  .scoreCard {
    min-width: 86px;
    padding: 10px 12px;
    border-radius: 14px;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65);
  }

  .scoreCard.p1 {
    background: rgba(174, 220, 255, 0.78);
  }

  .scoreCard.p2 {
    background: rgba(255, 193, 214, 0.78);
  }

  .scoreName {
    font-weight: 900;
    font-size: 15px;
  }

  .scoreValue {
    font-weight: 900;
    font-size: 22px;
    margin-top: 2px;
  }

  .scorePercent {
    font-size: 12px;
    opacity: 0.72;
  }

  #leaderText {
    display: flex;
    align-items: center;
    min-width: 120px;
    font-weight: 800;
    font-size: 14px;
    padding: 0 8px;
  }

  #lobby {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top, rgba(255,255,255,0.72), rgba(247,240,255,0.88));
    backdrop-filter: blur(8px);
  }

  .lobbyCard {
    width: min(560px, calc(100vw - 40px));
    text-align: center;
    color: #4a4258;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(255,255,255,0.95);
    box-shadow: 0 24px 70px rgba(130, 120, 170, 0.22);
    padding: 44px 38px;
    border-radius: 30px;
  }

  .lobbyKicker {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(174,220,255,0.8);
    font-weight: 900;
    font-size: 14px;
    margin-bottom: 12px;
  }

  .lobbyCard h1 {
    margin: 0;
    font-size: 42px;
    color: #ff8fb3;
    letter-spacing: -1px;
  }

  .lobbyCard p {
    margin: 14px 0 22px;
    font-size: 18px;
    line-height: 1.5;
  }

  .playerSelectWrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 22px 0 24px;
  }

  .playerSelectBox {
    background: rgba(255,255,255,0.56);
    border: 1px solid rgba(255,255,255,0.86);
    border-radius: 22px;
    padding: 18px 16px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.42);
  }

  .playerSelectTitle {
    font-size: 18px;
    font-weight: 1000;
    margin-bottom: 12px;
  }

  .selectedPreview {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    margin: 0 auto 14px;
    box-shadow: 0 8px 20px rgba(100, 90, 140, 0.22), inset 0 0 0 3px rgba(255,255,255,0.66);
  }

  .palette {
    display: grid;
    grid-template-columns: repeat(3, 42px);
    gap: 10px;
    justify-content: center;
    margin-bottom: 15px;
  }

  .colorChip {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.58), 0 7px 14px rgba(100,90,140,0.16);
    transition: transform .12s, box-shadow .12s;
  }

  .colorChip:hover {
    transform: translateY(-2px);
  }

  .colorChip.selected {
    transform: scale(1.08);
    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.95), 0 0 0 4px rgba(255, 209, 102, 0.75), 0 12px 22px rgba(100,90,140,0.2);
  }

  .readyBox {
    border-radius: 999px;
    padding: 11px 12px;
    font-weight: 1000;
    font-size: 14px;
    background: rgba(255,255,255,0.72);
    color: #8b8199;
    border: 1px solid rgba(255,255,255,0.9);
  }

  .readyBox.ready {
    background: #b8f7d4;
    color: #20643b;
    box-shadow: 0 8px 18px rgba(69, 200, 130, 0.22);
  }

  .readyHint {
    margin-top: 8px;
    font-size: 12px;
    opacity: .72;
    font-weight: 800;
  }

  #startStatus {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 900;
    color: #ff8fb3;
  }

  @media (max-width: 720px) {
    .lobbyCard { padding: 30px 22px; }
    .lobbyCard h1 { font-size: 32px; }
    .playerSelectWrap { grid-template-columns: 1fr; }
  }

  .lobbyCard button {
    border: 0;
    border-radius: 999px;
    padding: 16px 32px;
    background: #ffd166;
    color: #4a4258;
    font-weight: 900;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(255, 209, 102, 0.36);
  }

  #countdownOverlay {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #4a4258;
    background: rgba(255,255,255,0.64);
    backdrop-filter: blur(6px);
    text-align: center;
  }

  #countNumber {
    font-size: 140px;
    line-height: 1;
    font-weight: 1000;
    color: #ff8fb3;
    text-shadow: 0 12px 30px rgba(255, 143, 179, 0.28);
  }

  #countRule {
    margin-top: 18px;
    font-size: 30px;
    line-height: 1.55;
    font-weight: 900;
    max-width: 1080px;
    padding: 0 40px;
  }

  #message {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    z-index: 80;
    color: #1d1d1f;
    text-align: center;
    background: rgba(255,255,255,0.84);
    border: 1px solid rgba(255,255,255,0.72);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
    padding: 24px 26px;
    border-radius: 24px;
    display: none;
    width: min(360px, calc(100vw - 44px));
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
  }

  #message.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  #message h1 {
    margin: 0 0 10px;
    font-size: 26px;
    letter-spacing: -0.7px;
    color: #1d1d1f;
  }

  #message #resultText {
    font-size: 15px;
    line-height: 1.55;
    color: rgba(29, 29, 31, 0.72);
  }

  #message #resultText b {
    color: #007aff;
    font-weight: 900;
  }

  #message button {
    margin-top: 18px;
    border: 0;
    border-radius: 999px;
    padding: 11px 20px;
    background: #007aff;
    color: white;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 122, 255, 0.26);
  }


  #themeToggle {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 50;
    border: 0;
    border-radius: 999px;
    padding: 12px 18px;
    background: rgba(35, 40, 70, 0.86);
    color: #ffffff;
    font-weight: 900;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(40, 36, 80, 0.28);
    backdrop-filter: blur(8px);
  }

  body.dark-mode {
    background: radial-gradient(circle at top, #172341 0%, #070914 62%, #03040a 100%);
  }

  body.dark-mode #ui,
  body.dark-mode #scoreUI,
  body.dark-mode .lobbyCard,
  body.dark-mode #message {
    color: #eef4ff;
    background: rgba(14, 18, 36, 0.76);
    border-color: rgba(135, 170, 255, 0.28);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255,255,255,0.04);
  }

  body.dark-mode #ui b,
  body.dark-mode .lobbyCard h1,
  body.dark-mode #message h1,
  body.dark-mode #countNumber {
    color: #8ee8ff;
    text-shadow: 0 0 18px rgba(142, 232, 255, 0.42);
  }

  body.dark-mode .scoreCard.p1 {
    background: rgba(42, 132, 255, 0.34);
  }

  body.dark-mode .scoreCard.p2 {
    background: rgba(255, 93, 158, 0.34);
  }

  body.dark-mode .scoreCard {
    box-shadow: inset 0 0 0 1px rgba(180, 205, 255, 0.18);
  }

  body.dark-mode #lobby {
    background: radial-gradient(circle at top, rgba(42, 66, 120, 0.76), rgba(5, 7, 18, 0.9));
  }

  body.dark-mode .lobbyKicker {
    background: rgba(142, 232, 255, 0.18);
    color: #dff9ff;
  }

  body.dark-mode .playerSelectBox {
    background: rgba(255,255,255,0.055);
    border-color: rgba(135, 170, 255, 0.18);
  }

  body.dark-mode .readyBox {
    background: rgba(255,255,255,0.08);
    border-color: rgba(135, 170, 255, 0.18);
    color: #aebbe0;
  }

  body.dark-mode .readyBox.ready {
    background: rgba(76, 255, 158, 0.22);
    color: #b8f7d4;
  }

  body.dark-mode #startStatus {
    color: #8ee8ff;
  }

  body.dark-mode .lobbyCard button,
  body.dark-mode #message button {
    background: #8ee8ff;
    color: #07101d;
    box-shadow: 0 12px 24px rgba(142, 232, 255, 0.24);
  }

  body.dark-mode #countdownOverlay {
    color: #eef4ff;
    background: rgba(5, 7, 18, 0.72);
  }

  body.dark-mode #themeToggle {
    background: rgba(255, 255, 255, 0.86);
    color: #101325;
  }



/* ===================== Apple-like Clean UI Override ===================== */
:root {
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(0, 0, 0, 0.08);
  --text-main: #111827;
  --text-sub: #6b7280;
  --accent: #007aff;
  --soft-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
  --inner-line: inset 0 0 0 1px rgba(255,255,255,0.42);
}

html, body {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Arial, sans-serif;
  letter-spacing: -0.01em;
}

#ui, #scoreUI, .lobbyCard, #message {
  color: var(--text-main) !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--soft-shadow), var(--inner-line) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
}

#ui {
  top: 18px !important;
  left: 18px !important;
  padding: 13px 15px !important;
  border-radius: 22px !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--text-sub) !important;
}

#ui b {
  display: block;
  color: var(--text-main) !important;
  font-size: 18px;
  margin-bottom: 4px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

#scoreUI {
  top: 18px !important;
  right: 18px !important;
  padding: 10px !important;
  border-radius: 24px !important;
  gap: 8px !important;
}

.scoreCard {
  min-width: 82px !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.52) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04) !important;
}

.scoreCard.p1 { background: rgba(0, 122, 255, 0.10) !important; }
.scoreCard.p2 { background: rgba(255, 45, 85, 0.10) !important; }

.scoreName {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-sub) !important;
}

.scoreValue {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em;
  margin-top: 0 !important;
}

.scorePercent {
  font-size: 12px !important;
  color: var(--text-sub) !important;
  opacity: 1 !important;
}

#leaderText {
  min-width: 112px !important;
  font-size: 13px !important;
  color: var(--text-sub) !important;
  font-weight: 700 !important;
}

#lobby {
  background: radial-gradient(circle at top, rgba(255,255,255,0.92), rgba(236, 240, 245, 0.88)) !important;
  backdrop-filter: blur(26px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(160%) !important;
}

.lobbyCard {
  width: min(680px, calc(100vw - 42px)) !important;
  padding: 42px 38px 34px !important;
  border-radius: 34px !important;
}

.lobbyKicker {
  background: rgba(0,122,255,0.10) !important;
  color: var(--accent) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 7px 12px !important;
  margin-bottom: 14px !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.lobbyCard h1 {
  color: var(--text-main) !important;
  font-size: 56px !important;
  font-weight: 850 !important;
  letter-spacing: -0.075em !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

.lobbyCard p {
  color: var(--text-sub) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  margin: 16px 0 24px !important;
}

.playerSelectWrap {
  gap: 14px !important;
  margin: 24px 0 20px !important;
}

.playerSelectBox {
  background: rgba(255,255,255,0.48) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55) !important;
  border-radius: 26px !important;
  padding: 18px 16px !important;
}

.playerSelectTitle {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em;
}

.selectedPreview {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(15,23,42,0.12), inset 0 0 0 2px rgba(255,255,255,0.7) !important;
}

.palette {
  grid-template-columns: repeat(6, 34px) !important;
  gap: 8px !important;
}

.colorChip {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.75), 0 4px 10px rgba(15,23,42,0.10) !important;
}

.colorChip.selected {
  transform: scale(1.1) !important;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.95), 0 0 0 3px rgba(0,122,255,0.22), 0 8px 18px rgba(15,23,42,0.14) !important;
}

.readyBox {
  background: rgba(242,244,247,0.86) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  color: var(--text-sub) !important;
  font-weight: 750 !important;
  border-radius: 999px !important;
}

.readyBox.ready {
  background: rgba(52, 199, 89, 0.14) !important;
  color: #15803d !important;
  box-shadow: none !important;
}

.readyHint, #startStatus {
  color: var(--text-sub) !important;
  font-weight: 650 !important;
}

.lobbyCard button, #message button, #themeToggle {
  background: #111827 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 24px rgba(17,24,39,0.18) !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em;
}

#themeToggle {
  padding: 11px 15px !important;
  font-size: 13px !important;
  left: 18px !important;
  bottom: 18px !important;
}

#countdownOverlay {
  color: var(--text-main) !important;
  background: rgba(248,250,252,0.72) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
}

#countNumber {
  color: var(--text-main) !important;
  font-weight: 850 !important;
  letter-spacing: -0.08em;
  text-shadow: none !important;
}

#countRule {
  color: var(--text-sub) !important;
  font-size: 26px !important;
  font-weight: 750 !important;
  letter-spacing: -0.045em;
}

body.dark-mode {
  background: radial-gradient(circle at top, #1c2230 0%, #0b0d12 68%, #050609 100%) !important;
  --glass-bg: rgba(28, 31, 38, 0.72);
  --glass-border: rgba(255,255,255,0.10);
  --text-main: #f5f7fb;
  --text-sub: #a4aab8;
  --accent: #0a84ff;
  --soft-shadow: 0 18px 48px rgba(0,0,0,0.34);
}

body.dark-mode #lobby {
  background: radial-gradient(circle at top, rgba(42,48,64,0.92), rgba(7,8,12,0.9)) !important;
}

body.dark-mode .scoreCard,
body.dark-mode .playerSelectBox {
  background: rgba(255,255,255,0.055) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

body.dark-mode .scoreCard.p1 { background: rgba(10,132,255,0.18) !important; }
body.dark-mode .scoreCard.p2 { background: rgba(255,55,95,0.18) !important; }
body.dark-mode .readyBox { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.08) !important; }
body.dark-mode .readyBox.ready { background: rgba(48,209,88,0.18) !important; color: #7ee09c !important; }
body.dark-mode .lobbyCard button,
body.dark-mode #message button,
body.dark-mode #themeToggle { background: #f5f7fb !important; color: #111827 !important; }


/* ===== 요청 수정: 원형 색상 팔레트 3×2 + 글자별 굴러가는 타이틀 ===== */
.titleLoop {
  width: min(560px, 100%);
  min-height: 92px;
  margin: 0 auto 6px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.titleRollText {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
  overflow: visible;
}

.titleRollChar {
  display: inline-block;
  transform-origin: 50% 58%;
  animation: charRollRight 1.65s cubic-bezier(.42, 0, .22, 1) infinite;
  will-change: transform;
}

.titleRollChar:nth-child(1) { animation-delay: 0s; }
.titleRollChar:nth-child(2) { animation-delay: .13s; }
.titleRollChar:nth-child(3) { animation-delay: .26s; }
.titleRollChar:nth-child(4) { animation-delay: .39s; }

@keyframes charRollRight {
  0%   { transform: translateX(0) translateY(0) rotate(0deg); }
  28%  { transform: translateX(13px) translateY(-6px) rotate(110deg); }
  56%  { transform: translateX(26px) translateY(0) rotate(230deg); }
  72%  { transform: translateX(26px) translateY(0) rotate(360deg); }
  100% { transform: translateX(0) translateY(0) rotate(360deg); }
}

.palette {
  grid-template-columns: repeat(3, 38px) !important;
  grid-auto-rows: 38px !important;
  gap: 12px !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 12px auto 16px !important;
}

.lobbyCard .colorChip,
.colorChip {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--chip-color) !important;
  border: 2px solid rgba(255,255,255,0.92) !important;
  box-shadow: 0 5px 12px rgba(15,23,42,0.14), inset 0 0 0 1px rgba(255,255,255,0.35) !important;
}

/* 다크모드의 일반 버튼 스타일이 팔레트 색상을 덮지 않도록 더 높은 우선순위로 고정 */
body.dark-mode .lobbyCard button.colorChip,
body.dark-mode .colorChip {
  background: var(--chip-color) !important;
  color: transparent !important;
  border-color: rgba(255,255,255,0.78) !important;
  box-shadow: 0 5px 14px rgba(0,0,0,0.38), inset 0 0 0 1px rgba(255,255,255,0.25) !important;
}

.lobbyCard .colorChip.selected,
.colorChip.selected {
  transform: scale(1.12) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.34), 0 8px 18px rgba(15,23,42,0.16), inset 0 0 0 1px rgba(255,255,255,0.4) !important;
}

body.dark-mode .lobbyCard button.colorChip.selected,
body.dark-mode .colorChip.selected {
  background: var(--chip-color) !important;
  box-shadow: 0 0 0 3px rgba(142,232,255,0.42), 0 8px 20px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.35) !important;
}

.selectedPreview {
  background: var(--preview-color) !important;
  border-radius: 50% !important;
}

body.dark-mode .selectedPreview {
  background: var(--preview-color) !important;
}

@media (max-width: 720px) {
  .titleLoop { height: 58px; }
  .titleRollText { font-size: 42px !important; }
}


/* ===== 요청 수정: 다크모드 인게임 배경 밝게 유지 ===== */
body.dark-mode {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
}

body.dark-mode #lobby {
  background: radial-gradient(circle at top, rgba(255,255,255,0.92), rgba(236, 240, 245, 0.88)) !important;
}

body.dark-mode #countdownOverlay {
  background: rgba(248,250,252,0.72) !important;
}


/* ===== 요청 수정: 로비 배경 전체 화면 자연스러운 블록 롤링 루프 ===== */
#lobby {
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 12%, rgba(0,122,255,0.10), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(255,45,85,0.09), transparent 30%),
    radial-gradient(circle at 52% 92%, rgba(255,209,102,0.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(236,240,245,0.88)) !important;
}

.lobbyRollingPattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.82;
  perspective: 900px;
  transform: translateZ(0);
}

.lobbyRollingPattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15,23,42,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.035) 1px, transparent 1px);
  background-size: 82px 82px;
  mask-image: radial-gradient(circle at center, black 0%, black 62%, transparent 100%);
  opacity: 0.45;
}

.bgRollingBlock {
  --size: 54px;
  --y: 50%;
  --delay: 0s;
  --duration: 13s;
  --alpha: .58;
  --scale: 1;
  position: absolute;
  left: calc(-18vw - var(--size));
  top: var(--y);
  width: var(--size);
  height: var(--size);
  opacity: var(--alpha);
  transform-style: preserve-3d;
  animation: naturalRollRight var(--duration) linear infinite;
  animation-delay: var(--delay);
  will-change: transform;
}

.bgRollingBlock .cubeBody {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--size) * 0.24);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(226,236,255,0.86) 56%, rgba(194,218,255,0.74) 100%);
  box-shadow:
    0 calc(var(--size) * 0.22) calc(var(--size) * 0.42) rgba(15,23,42,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.76),
    inset calc(var(--size) * -0.14) calc(var(--size) * -0.16) calc(var(--size) * 0.24) rgba(0,122,255,0.10),
    inset calc(var(--size) * 0.12) calc(var(--size) * 0.10) calc(var(--size) * 0.20) rgba(255,255,255,0.62);
  animation: cubeSpinRight calc(var(--duration) / 9.5) linear infinite;
  animation-delay: var(--delay);
  transform-origin: 50% 78%;
}

.bgRollingBlock .cubeBody::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: calc(var(--size) * 0.14);
  border: 2px solid rgba(0,122,255,0.12);
  background: rgba(255,255,255,0.18);
}

.bgRollingBlock .cubeBody::after {
  content: "";
  position: absolute;
  inset: 8% 12% auto auto;
  width: 32%;
  height: 22%;
  border-radius: 999px;
  background: rgba(255,255,255,0.48);
  filter: blur(2px);
}

.bgRollingBlock::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: calc(var(--size) * -0.24);
  height: calc(var(--size) * 0.18);
  border-radius: 50%;
  background: rgba(15,23,42,0.13);
  filter: blur(5px);
  animation: shadowPulse calc(var(--duration) / 9.5) linear infinite;
  animation-delay: var(--delay);
}

.bgRollingBlock.pink .cubeBody {
  background: linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(255,214,228,0.88) 58%, rgba(255,176,205,0.74) 100%);
  box-shadow: 0 calc(var(--size) * 0.22) calc(var(--size) * 0.42) rgba(15,23,42,0.11), inset 0 0 0 1px rgba(255,255,255,0.76), inset calc(var(--size) * -0.14) calc(var(--size) * -0.16) calc(var(--size) * 0.24) rgba(255,45,85,0.12), inset calc(var(--size) * 0.12) calc(var(--size) * 0.10) calc(var(--size) * 0.20) rgba(255,255,255,0.62);
}
.bgRollingBlock.pink .cubeBody::before { border-color: rgba(255,45,85,0.13); }

.bgRollingBlock.yellow .cubeBody {
  background: linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(255,232,164,0.9) 58%, rgba(255,210,102,0.72) 100%);
  box-shadow: 0 calc(var(--size) * 0.22) calc(var(--size) * 0.42) rgba(15,23,42,0.10), inset 0 0 0 1px rgba(255,255,255,0.76), inset calc(var(--size) * -0.14) calc(var(--size) * -0.16) calc(var(--size) * 0.24) rgba(255,170,0,0.14), inset calc(var(--size) * 0.12) calc(var(--size) * 0.10) calc(var(--size) * 0.20) rgba(255,255,255,0.62);
}
.bgRollingBlock.yellow .cubeBody::before { border-color: rgba(255,170,0,0.14); }

.bgRollingBlock.mint .cubeBody {
  background: linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(194,248,225,0.88) 58%, rgba(120,232,190,0.72) 100%);
  box-shadow: 0 calc(var(--size) * 0.22) calc(var(--size) * 0.42) rgba(15,23,42,0.10), inset 0 0 0 1px rgba(255,255,255,0.76), inset calc(var(--size) * -0.14) calc(var(--size) * -0.16) calc(var(--size) * 0.24) rgba(22,163,116,0.12), inset calc(var(--size) * 0.12) calc(var(--size) * 0.10) calc(var(--size) * 0.20) rgba(255,255,255,0.62);
}
.bgRollingBlock.mint .cubeBody::before { border-color: rgba(22,163,116,0.13); }

@keyframes naturalRollRight {
  0%   { transform: translate3d(0, 0, 0) scale(var(--scale)); }
  100% { transform: translate3d(calc(136vw + var(--size)), 0, 0) scale(var(--scale)); }
}

@keyframes cubeSpinRight {
  0%   { transform: translateY(0) rotateZ(0deg) rotateY(-8deg); }
  25%  { transform: translateY(-7%) rotateZ(90deg) rotateY(8deg); }
  50%  { transform: translateY(0) rotateZ(180deg) rotateY(-8deg); }
  75%  { transform: translateY(-5%) rotateZ(270deg) rotateY(8deg); }
  100% { transform: translateY(0) rotateZ(360deg) rotateY(-8deg); }
}

@keyframes shadowPulse {
  0%, 50%, 100% { transform: scaleX(1.12); opacity: .82; }
  25%, 75% { transform: scaleX(.86); opacity: .42; }
}

#lobby .lobbyCard {
  position: relative;
  z-index: 2;
}

body.dark-mode #lobby {
  background:
    radial-gradient(circle at 20% 12%, rgba(0,122,255,0.10), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(255,45,85,0.09), transparent 30%),
    radial-gradient(circle at 52% 92%, rgba(255,209,102,0.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(236,240,245,0.88)) !important;
}

body.dark-mode .lobbyRollingPattern { opacity: 0.74; }

@media (max-width: 720px) {
  .bgRollingBlock { --size: 42px; }
  .lobbyRollingPattern::before { background-size: 58px 58px; }
}


/* ===== 요청 수정: 로비 BGM 버튼 ===== */
#soundToggle {
  position: fixed;
  left: 18px;
  bottom: 66px;
  z-index: 55;
  border: 0;
  border-radius: 999px;
  padding: 11px 15px;
  background: rgba(17, 24, 39, 0.88);
  color: #ffffff;
  font-weight: 750;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(17,24,39,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.dark-mode #soundToggle {
  background: rgba(245,247,251,0.9);
  color: #111827;
}



/* ===== 요청 수정: 스피드 / 아이템 + 고스트 체크박스 모드 선택 UI ===== */
.modeSelectWrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 18px 0 4px;
  padding-top: 38px;
  position: relative;
}

/* 라이트모드: 활성/비활성 모두 아이보리 배경, 선택 표시는 아웃라인/발광만 사용 */
.lobbyCard .modeSelectWrap .modeButton,
#lobby .lobbyCard button.modeButton,
button.modeButton {
  padding: 14px 16px !important;
  border-radius: 20px !important;
  background: #fff8e6 !important;
  color: #111111 !important;
  border: 2px solid rgba(255, 209, 102, 0.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.70),
    0 8px 18px rgba(91,72,38,0.08) !important;
  text-align: left;
  font-size: 14px !important;
  line-height: 1.25;
}

.lobbyCard .modeSelectWrap .modeButton strong,
#lobby .lobbyCard button.modeButton strong,
button.modeButton strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  color: #111111 !important;
}

.lobbyCard .modeSelectWrap .modeButton span,
#lobby .lobbyCard button.modeButton span,
button.modeButton span {
  display: block;
  color: #111111 !important;
  font-size: 12px;
  font-weight: 650;
}

.lobbyCard .modeSelectWrap .modeButton.selected,
#lobby .lobbyCard button.modeButton.selected,
button.modeButton.selected {
  background: #fff8e6 !important;
  color: #111111 !important;
  border: 2px solid #ffd166 !important;
  box-shadow:
    0 0 0 2px rgba(255, 209, 102, 0.82),
    0 0 18px rgba(255,255,255,0.95),
    0 0 32px rgba(255,255,255,0.72),
    0 12px 24px rgba(91,72,38,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.82) !important;
}

/* 다크모드는 기존 톤 유지 */
body.dark-mode .lobbyCard .modeSelectWrap .modeButton,
body.dark-mode #lobby .lobbyCard button.modeButton,
body.dark-mode button.modeButton {
  background: rgba(255,255,255,0.08) !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 8px 18px rgba(0,0,0,0.16) !important;
}

body.dark-mode .lobbyCard .modeSelectWrap .modeButton strong,
body.dark-mode #lobby .lobbyCard button.modeButton strong,
body.dark-mode button.modeButton strong {
  color: var(--text-main) !important;
}

body.dark-mode .lobbyCard .modeSelectWrap .modeButton span,
body.dark-mode #lobby .lobbyCard button.modeButton span,
body.dark-mode button.modeButton span {
  color: var(--text-sub) !important;
}

body.dark-mode .lobbyCard .modeSelectWrap .modeButton.selected,
body.dark-mode #lobby .lobbyCard button.modeButton.selected,
body.dark-mode button.modeButton.selected {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.96) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.76),
    0 0 18px rgba(255,255,255,0.38),
    0 10px 24px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.12) !important;
}

.ghostToggleBox {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17,24,39,0.78);
  color: #ffffff;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: -0.02em;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 8px 18px rgba(15,23,42,0.16);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

.ghostToggleBox input {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin: 0;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.12);
  position: relative;
  flex: 0 0 auto;
}

.ghostToggleBox input:checked {
  background: #ffffff;
  border-color: #ffffff;
}

.ghostToggleBox input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #111827;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ghostToggleBox.active {
  background: rgba(255,255,255,0.92);
  color: #111827;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.75), 0 0 24px rgba(255,255,255,0.58), 0 10px 22px rgba(15,23,42,0.14);
}

.modeSelectWrap.ghost-active .modeButton.selected {
  animation: ghostCardOutlinePulse 0.95s ease-in-out infinite !important;
}

@keyframes ghostCardOutlinePulse {
  0%, 100% {
    border-color: rgba(255,255,255,0.98) !important;
    box-shadow:
      0 0 0 2px rgba(255,255,255,0.80),
      0 0 14px rgba(255,255,255,0.74),
      0 0 28px rgba(255,255,255,0.46),
      0 12px 24px rgba(91,72,38,0.12),
      inset 0 0 0 1px rgba(255,255,255,0.86) !important;
  }
  50% {
    border-color: rgba(255,255,255,0.34) !important;
    box-shadow:
      0 0 0 2px rgba(255,255,255,0.26),
      0 0 8px rgba(255,255,255,0.28),
      0 8px 18px rgba(91,72,38,0.08),
      inset 0 0 0 1px rgba(255,255,255,0.62) !important;
  }
}

body.dark-mode .ghostToggleBox {
  background: rgba(245,247,251,0.9);
  color: #111827;
}

body.dark-mode .ghostToggleBox.active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 0 24px rgba(255,255,255,0.42), 0 10px 24px rgba(0,0,0,0.20);
}


#buffUI {
  position: fixed;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  z-index: 12;
  display: none;
  gap: 8px;
  pointer-events: none;
}

.buffPill {
  min-width: 116px;
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--text-main);
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 12px 28px rgba(15,23,42,0.10), inset 0 0 0 1px rgba(255,255,255,0.42);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 720px) {
  .modeSelectWrap { grid-template-columns: 1fr; padding-top: 42px; }
  .ghostToggleBox { left: 0; right: auto; }
  #buffUI { top: auto; bottom: 18px; }
}


/* ===== 요청 수정: 스피드 모드 카운트다운 큰 설명 카드 ===== */
#classicCountdownGuide {
  display: none;
  margin-top: 24px;
  width: min(860px, calc(100vw - 56px));
  padding: 26px 30px;
  border-radius: 30px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 18px 44px rgba(15,23,42,0.12), inset 0 0 0 1px rgba(255,255,255,0.62);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  text-align: left;
}

.classicGuideHeader {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.classicGuideIcon {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  background: #ffd166;
  position: relative;
  flex: 0 0 auto;
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,0.72),
    0 10px 22px rgba(255,209,102,0.34);
}

.classicGuideIcon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #ffffff;
  transform: translate(-50%, -50%) rotate(18deg);
  box-shadow: 0 0 0 5px rgba(255,255,255,0.28);
}

.classicGuideTitle strong {
  display: block;
  font-size: 24px;
  line-height: 1.12;
  color: var(--text-main);
  font-weight: 950;
  letter-spacing: -0.04em;
  margin-bottom: 5px;
}

.classicGuideTitle span {
  display: block;
  font-size: 15px;
  line-height: 1.35;
  color: var(--text-sub);
  font-weight: 750;
}

.classicGuideList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.classicRuleFourList {
  grid-template-columns: repeat(4, 1fr);
}

.classicRuleFourList .classicGuideStep {
  min-height: 118px;
}

.classicGuideStep {
  padding: 16px 16px;
  border-radius: 22px;
  background: rgba(248,250,252,0.72);
  border: 1px solid rgba(0,0,0,0.06);
}

.classicGuideStep b {
  display: block;
  font-size: 15px;
  color: var(--text-main);
  margin-bottom: 6px;
  font-weight: 900;
}

.classicGuideStep span {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-sub);
  font-weight: 700;
}

#ghostCountdownGuide {
  display: none;
  margin-top: 24px;
  width: min(860px, calc(100vw - 56px));
  padding: 26px 30px;
  border-radius: 30px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 18px 44px rgba(15,23,42,0.12), inset 0 0 0 1px rgba(255,255,255,0.62);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  text-align: left;
}

.classicGuideIcon.ghostIcon {
  background: #e9edf5;
}

.classicGuideIcon.ghostIcon::before {
  border-radius: 50% 50% 42% 42%;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 0 0 5px rgba(255,255,255,0.36), 0 10px 22px rgba(15,23,42,0.10);
}

#countdownOverlay.classic-mode:not(.ghost-mode) #classicCountdownGuide,
#countdownOverlay.ghost-mode:not(.item-mode) #ghostCountdownGuide {
  display: block;
}

#countdownOverlay.classic-mode #countRule,
#countdownOverlay.ghost-mode:not(.item-mode) #countRule {
  display: none;
}

body.dark-mode #ghostCountdownGuide {
  background: rgba(28,31,38,0.72);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 18px 44px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.06);
}

body.dark-mode #classicCountdownGuide {
  background: rgba(28,31,38,0.72);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 18px 44px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.06);
}

body.dark-mode .classicGuideStep {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}

@media (max-width: 1080px) {
  .classicRuleFourList {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  #classicCountdownGuide,
  #ghostCountdownGuide {
    width: min(520px, calc(100vw - 44px));
    padding: 22px 20px;
  }

  .classicGuideList {
    grid-template-columns: 1fr;
  }

  .classicGuideTitle strong {
    font-size: 21px;
  }
}

/* ===== 요청 수정: 아이템 모드 카운트다운 아이템 설명 ===== */
#itemCountdownGuide {
  display: none;
  margin-top: 24px;
  width: min(980px, calc(100vw - 56px));
  gap: 14px;
  justify-content: center;
  align-items: stretch;
}

.itemGuideCard {
  flex: 1;
  min-width: 0;
  max-width: 250px;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
  text-align: left;
  padding: 14px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 14px 34px rgba(15,23,42,0.10), inset 0 0 0 1px rgba(255,255,255,0.58);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.itemGuideIcon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #ffd166;
  position: relative;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.72),
    0 8px 18px rgba(255,209,102,0.34);
}

.itemGuideIcon::before,
.itemGuideIcon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.itemGuideIcon.area::before {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 4px solid #ffffff;
}

.itemGuideIcon.area::after {
  width: 18px;
  height: 18px;
  background:
    linear-gradient(#ffffff,#ffffff) center/100% 4px no-repeat,
    linear-gradient(#ffffff,#ffffff) center/4px 100% no-repeat;
}

.itemGuideIcon.speed::before {
  width: 32px;
  height: 10px;
  border-radius: 999px;
  background: #ffffff;
  transform: translate(-58%,-50%);
}

.itemGuideIcon.speed::after {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid #ffffff;
  transform: translate(28%,-50%);
}

.itemGuideIcon.line::before {
  width: 38px;
  height: 8px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 -13px 0 #ffffff, 0 13px 0 #ffffff;
}

.itemGuideIcon.line::after {
  width: 15px;
  height: 15px;
  border-top: 5px solid #ffffff;
  border-right: 5px solid #ffffff;
  transform: translate(-15%,-50%) rotate(45deg);
}

.itemGuideIcon.shield::before {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,0.28);
}

.itemGuideIcon.shield::after {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.72);
  transform: translate(-50%,-50%) rotate(26deg) scaleY(0.62);
}

.itemGuideText strong {
  display: block;
  font-size: 16px;
  line-height: 1.15;
  color: var(--text-main);
  margin-bottom: 5px;
  font-weight: 900;
}

.itemGuideText span {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-sub);
  font-weight: 700;
}

#countdownOverlay.item-mode #itemCountdownGuide {
  display: flex;
}

#countdownOverlay.item-mode #countRule {
  font-size: 22px !important;
}

/* ===== 요청 수정: 아이템 모드 카운트다운 기본 규칙 문구 완전 숨김 ===== */
#countdownOverlay.item-mode #countRule {
  display: none !important;
}

body.dark-mode .itemGuideCard {
  background: rgba(28,31,38,0.72);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 14px 34px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.06);
}

@media (max-width: 860px) {
  #itemCountdownGuide {
    flex-direction: column;
    width: min(520px, calc(100vw - 44px));
  }

  .itemGuideCard {
    max-width: none;
  }

  #countdownOverlay.item-mode #countRule {
    font-size: 18px !important;
  }
}


/* ===== 요청 수정: 고스트 모드 미니멀 귀여운 유령 체크 UI ===== */
.modeSelectWrap {
  padding-top: 30px !important;
}

.ghostToggleBox.ghostMiniToggle,
#lobby .ghostToggleBox.ghostMiniToggle,
body.dark-mode .ghostToggleBox.ghostMiniToggle {
  right: 2px !important;
  top: -2px !important;
  min-height: 0 !important;
  width: 64px !important;
  height: 34px !important;
  padding: 0 8px !important;
  gap: 5px !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.36) !important;
  border: 1px solid rgba(255,255,255,0.82) !important;
  color: #111827 !important;
  box-shadow: 0 8px 18px rgba(15,23,42,0.08), inset 0 0 0 1px rgba(255,255,255,0.48) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease !important;
}

.ghostToggleBox.ghostMiniToggle:hover {
  transform: translateY(-1px) scale(1.03);
  background: rgba(255,255,255,0.58) !important;
}

.ghostLineIcon {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  overflow: visible;
}

.ghostLineIcon .ghostBody {
  fill: none;
  stroke: #111827;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ghostLineIcon .ghostEye {
  fill: #111827;
}

.ghostToggleBox.ghostMiniToggle input {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  margin: 0 !important;
  border-radius: 5px !important;
  border: 2px solid #111827 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ghostToggleBox.ghostMiniToggle input:checked {
  background: #111827 !important;
  border-color: #111827 !important;
}

.ghostToggleBox.ghostMiniToggle input:checked::after {
  left: 3px !important;
  top: 0px !important;
  width: 4px !important;
  height: 8px !important;
  border-color: #ffffff !important;
  border-width: 0 2px 2px 0 !important;
}

.ghostToggleBox.ghostMiniToggle.active,
#lobby .ghostToggleBox.ghostMiniToggle.active,
body.dark-mode .ghostToggleBox.ghostMiniToggle.active {
  background: rgba(255,255,255,0.88) !important;
  border-color: rgba(255,255,255,1) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.80),
    0 0 20px rgba(255,255,255,0.72),
    0 8px 18px rgba(15,23,42,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.62) !important;
}

.ghostToggleBox.ghostMiniToggle.active .ghostLineIcon {
  animation: cuteGhostFloat 1.25s ease-in-out infinite;
}

@keyframes cuteGhostFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-2px) rotate(2deg); }
}

@media (max-width: 720px) {
  .modeSelectWrap { padding-top: 34px !important; }
  .ghostToggleBox.ghostMiniToggle { left: auto !important; right: 0 !important; top: -3px !important; }
}


/* ===== 요청 수정: 로비 타이틀 전용 커스텀 폰트 ===== */
@font-face {
  font-family: 'DegulTitleFont';
  src: url('../fonts/ver212-font-01.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.titleRollText,
.titleRollChar {
  font-family: 'DegulTitleFont', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: normal !important;
  letter-spacing: -0.02em !important;
}


/* ===== 요청 수정: 인게임 점수 UI 상단 중앙 + 실시간 점령 게이지 ===== */
#scoreUI.scoreGaugeUI,
#scoreUI {
  position: fixed !important;
  top: 16px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
  width: min(620px, calc(100vw - 34px)) !important;
  display: block !important;
  padding: 10px 12px !important;
  border-radius: 24px !important;
  color: var(--text-main) !important;
  background: rgba(255,255,255,0.74) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 16px 38px rgba(15,23,42,0.12), inset 0 0 0 1px rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}

.scoreTopRow {
  display: grid;
  grid-template-columns: 86px 1fr 86px;
  gap: 10px;
  align-items: center;
}

#scoreUI .scoreCard {
  min-width: 0 !important;
  padding: 8px 8px !important;
  border-radius: 18px !important;
  text-align: center !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.62) !important;
}

#scoreUI .scoreCard.p1 {
  background: rgba(125, 199, 255, 0.18) !important;
}

#scoreUI .scoreCard.p2 {
  background: rgba(255, 146, 184, 0.18) !important;
}

#scoreUI .scoreName {
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  color: var(--text-sub) !important;
}

#scoreUI .scoreValue {
  margin-top: 1px !important;
  font-size: 19px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -0.04em !important;
}

#scoreUI .scorePercent {
  margin-top: 1px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--text-sub) !important;
}

.scoreGaugeWrap {
  min-width: 0;
}

.scoreGaugeInfo {
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  align-items: center;
  gap: 8px;
  margin: 0 2px 7px;
  font-size: 12px;
  font-weight: 900;
  color: var(--text-sub);
}

.scoreGaugeInfo span:first-child {
  text-align: left;
  color: #1d6fae;
}

.scoreGaugeInfo span:last-child {
  text-align: right;
  color: #b93b72;
}

#leaderText {
  min-width: 0 !important;
  display: block !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  color: var(--text-main) !important;
  white-space: nowrap;
}

.territoryGauge {
  position: relative;
  height: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17,24,39,0.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.055), inset 0 2px 7px rgba(15,23,42,0.08);
}

.gaugeFill {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  transition: width .28s ease;
}

.p1Fill {
  left: 0;
  border-radius: 999px 0 0 999px;
  background:
    linear-gradient(90deg, rgba(125,199,255,0.82), rgba(174,220,255,0.94)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 6px, transparent 6px 12px);
}

.p2Fill {
  right: 0;
  border-radius: 0 999px 999px 0;
  background:
    linear-gradient(90deg, rgba(255,193,214,0.94), rgba(255,146,184,0.82)),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.18) 0 6px, transparent 6px 12px);
}

.gaugeDivider {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 0 0 1px rgba(15,23,42,0.06), 0 0 12px rgba(255,255,255,0.8);
  transition: left .28s ease;
}

body.dark-mode #scoreUI.scoreGaugeUI,
body.dark-mode #scoreUI {
  background: rgba(255,255,255,0.74) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: #111827 !important;
}

body.dark-mode #scoreUI .scoreCard.p1 { background: rgba(125,199,255,0.20) !important; }
body.dark-mode #scoreUI .scoreCard.p2 { background: rgba(255,146,184,0.20) !important; }

@media (max-width: 720px) {
  #scoreUI.scoreGaugeUI,
  #scoreUI {
    top: 12px !important;
    width: min(520px, calc(100vw - 22px)) !important;
    padding: 8px !important;
    border-radius: 20px !important;
  }

  .scoreTopRow {
    grid-template-columns: 64px 1fr 64px;
    gap: 7px;
  }

  #scoreUI .scoreValue {
    font-size: 15px !important;
  }

  #scoreUI .scorePercent,
  #scoreUI .scoreName {
    font-size: 10px !important;
  }

  .scoreGaugeInfo {
    grid-template-columns: 48px 1fr 48px;
    gap: 5px;
    font-size: 10px;
    margin-bottom: 5px;
  }

  #leaderText {
    font-size: 10px !important;
  }

  .territoryGauge {
    height: 15px;
  }
}


/* ===== 요청 수정: 로비 도움말 물음표 버튼 + 게임 룰 팝업 ===== */
.lobbyHelpButton {
  position: absolute;
  left: 22px;
  top: 22px;
  z-index: 8;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.62) !important;
  color: #111827 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,0.10), inset 0 0 0 1px rgba(255,255,255,0.62) !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}


.lobbyLangButton {
  position: absolute;
  left: 68px;
  top: 22px;
  z-index: 8;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.62) !important;
  color: #111827 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,0.10), inset 0 0 0 1px rgba(255,255,255,0.62) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.lobbyLangButton:hover {
  transform: translateY(-1px) scale(1.05);
  background: rgba(255,255,255,0.88) !important;
  box-shadow: 0 12px 26px rgba(15,23,42,0.14), 0 0 0 3px rgba(0,122,255,0.10) !important;
}

body.dark-mode .lobbyLangButton {
  background: rgba(255,255,255,0.62) !important;
  color: #111827 !important;
}

.lobbyHelpButton:hover {
  transform: translateY(-1px) scale(1.05);
  background: rgba(255,255,255,0.88) !important;
  box-shadow: 0 12px 26px rgba(15,23,42,0.14), 0 0 0 3px rgba(0,122,255,0.10) !important;
}

#helpOverlay {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

#helpOverlay.show {
  display: flex;
}

.helpPopup {
  position: relative;
  width: min(980px, calc(100vw - 44px));
  max-height: calc(100vh - 56px);
  overflow: auto;
  border-radius: 34px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.95);
  box-shadow: 0 28px 90px rgba(15,23,42,0.24), inset 0 0 0 1px rgba(255,255,255,0.58);
  padding: 30px 30px 28px;
  color: #111827;
}

.helpCloseButton {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(17,24,39,0.88) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 10px 22px rgba(17,24,39,0.18) !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  cursor: pointer;
}

.helpHeader {
  text-align: center;
  padding: 4px 52px 22px;
}

.helpHeader h2 {
  margin: 0 0 8px;
  font-size: 34px;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -0.055em;
}

.helpHeader p {
  margin: 0;
  color: #6b7280;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

.helpRuleGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.helpRuleCard {
  min-height: 236px;
  border-radius: 26px;
  background: rgba(248,250,252,0.82);
  border: 1px solid rgba(15,23,42,0.07);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.58);
}

.helpVisual {
  height: 132px;
  border-radius: 22px;
  background:
    linear-gradient(rgba(15,23,42,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.045) 1px, transparent 1px),
    rgba(255,255,255,0.78);
  background-size: 22px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,0.05);
}

.helpRuleCard strong {
  display: block;
  font-size: 17px;
  font-weight: 950;
  letter-spacing: -0.035em;
  color: #111827;
}

.helpRuleCard span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.42;
  font-weight: 700;
  color: #6b7280;
}

.helpLand {
  position: absolute;
  border-radius: 12px;
  background: rgba(125,199,255,0.72);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.60);
}

.helpLand.pink {
  background: rgba(255,146,184,0.72);
}

.helpBlock {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #7dc7ff;
  box-shadow: 0 8px 16px rgba(15,23,42,0.18), inset 0 0 0 3px rgba(255,255,255,0.58);
}

.helpBlock.pink {
  background: #ff92b8;
}

.helpTrail {
  position: absolute;
  height: 12px;
  border-radius: 999px;
  background: rgba(120,216,255,0.78);
  box-shadow: 0 0 14px rgba(120,216,255,0.34);
}

.helpTrail.vertical {
  width: 12px;
  height: auto;
}

.helpDanger {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid rgba(255,59,48,0.82);
  box-shadow: 0 0 18px rgba(255,59,48,0.22);
}

.helpDanger::before,
.helpDanger::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,59,48,0.82);
  transform: translate(-50%, -50%) rotate(45deg);
}

.helpDanger::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.helpClaimFill {
  position: absolute;
  inset: 34px 44px 24px 30px;
  border-radius: 18px;
  background: rgba(125,199,255,0.30);
  border: 3px dashed rgba(0,122,255,0.52);
}

.helpArrow {
  position: absolute;
  height: 6px;
  border-radius: 999px;
  background: #111827;
  transform-origin: left center;
  opacity: .72;
}

.helpArrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 13px;
  height: 13px;
  border-right: 5px solid #111827;
  border-top: 5px solid #111827;
  transform: translateY(-50%) rotate(45deg);
}

.helpItemIcon {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: #ffd166;
  box-shadow: 0 10px 20px rgba(255,209,102,0.32), inset 0 0 0 4px rgba(255,255,255,0.68);
}

.helpItemIcon.plus::before,
.helpItemIcon.plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  background: #ffffff;
  transform: translate(-50%, -50%);
}

.helpItemIcon.plus::before {
  width: 24px;
  height: 6px;
}

.helpItemIcon.plus::after {
  width: 6px;
  height: 24px;
}

.helpGhostMini {
  position: absolute;
  left: 28px;
  top: 34px;
  width: 66px;
  height: 66px;
}

.helpGhostMini path {
  fill: none;
  stroke: #111827;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.helpGhostMini circle {
  fill: #111827;
}

.helpHiddenTrail {
  position: absolute;
  left: 96px;
  top: 58px;
  width: 88px;
  height: 12px;
  border-radius: 999px;
  border: 3px dashed rgba(17,24,39,0.22);
}

.helpFooterTip {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 22px;
  background: rgba(0,122,255,0.08);
  color: #1f4f83;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 800;
  text-align: center;
}

body.dark-mode #helpOverlay {
  background: rgba(5,7,18,0.48);
}

body.dark-mode .helpPopup {
  background: rgba(28,31,38,0.94);
  color: #f5f7fb;
  border-color: rgba(255,255,255,0.14);
}

body.dark-mode .helpHeader h2,
body.dark-mode .helpRuleCard strong {
  color: #f5f7fb;
}

body.dark-mode .helpHeader p,
body.dark-mode .helpRuleCard span {
  color: #a4aab8;
}

body.dark-mode .helpRuleCard,
body.dark-mode .helpVisual {
  background-color: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}

body.dark-mode .helpGhostMini path {
  stroke: #f5f7fb;
}

body.dark-mode .helpGhostMini circle {
  fill: #f5f7fb;
}

@media (max-width: 860px) {
  .helpPopup {
    padding: 26px 18px 20px;
  }

  .helpHeader {
    padding: 8px 48px 18px;
  }

  .helpHeader h2 {
    font-size: 27px;
  }

  .helpRuleGrid {
    grid-template-columns: 1fr;
  }

  .helpRuleCard {
    min-height: 210px;
  }
}



/* ===== 요청 수정: 개인정보/광고 동의 아이콘 + 첫 방문 동의 팝업 ===== */
.lobbyPrivacyButton {
  position: absolute;
  left: 114px;
  top: 22px;
  z-index: 8;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.62) !important;
  color: #111827 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,0.10), inset 0 0 0 1px rgba(255,255,255,0.62) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.lobbyPrivacyButton:hover {
  transform: translateY(-1px) scale(1.05);
  background: rgba(255,255,255,0.88) !important;
  box-shadow: 0 12px 26px rgba(15,23,42,0.14), 0 0 0 3px rgba(0,122,255,0.10) !important;
}

body.dark-mode .lobbyPrivacyButton {
  background: rgba(255,255,255,0.62) !important;
  color: #111827 !important;
}

#privacyOverlay {
  position: fixed;
  inset: 0;
  z-index: 145;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

#privacyOverlay.show {
  display: flex;
}

.privacyPopup {
  position: relative;
  width: min(720px, calc(100vw - 44px));
  max-height: calc(100vh - 56px);
  overflow: auto;
  border-radius: 32px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.95);
  box-shadow: 0 28px 90px rgba(15,23,42,0.26), inset 0 0 0 1px rgba(255,255,255,0.58);
  padding: 30px;
  color: #111827;
}

.privacyCloseButton {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(17,24,39,0.88) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 10px 22px rgba(17,24,39,0.18) !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  cursor: pointer;
}

.privacyHeader {
  padding-right: 46px;
  margin-bottom: 18px;
}

.privacyBadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0,122,255,0.10);
  color: #007aff;
  font-size: 12px;
  font-weight: 850;
  margin-bottom: 12px;
}

.privacyHeader h2 {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: -0.055em;
}

.privacyHeader p {
  margin: 0;
  color: #6b7280;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.privacySectionGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 18px 0;
}

.privacySection {
  border-radius: 22px;
  padding: 16px 18px;
  background: rgba(248,250,252,0.86);
  border: 1px solid rgba(15,23,42,0.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.58);
}

.privacySection strong {
  display: block;
  font-size: 15px;
  color: #111827;
  margin-bottom: 7px;
  font-weight: 900;
}

.privacySection span {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: #6b7280;
  font-weight: 700;
}

.privacyActions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 18px;
}

.privacyActions button {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 850;
  cursor: pointer;
}

.privacySecondaryButton {
  background: rgba(17,24,39,0.08) !important;
  color: #111827 !important;
  box-shadow: none !important;
}

.privacyAgreeButton {
  background: #111827 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(17,24,39,0.18) !important;
}

body.dark-mode #privacyOverlay {
  background: rgba(15, 23, 42, 0.38);
}

body.dark-mode .privacyPopup {
  background: rgba(255,255,255,0.94);
  color: #111827;
}

@media (max-width: 720px) {
  .lobbyPrivacyButton {
    left: 114px;
    top: 22px;
  }

  .privacyPopup {
    padding: 24px 20px;
    border-radius: 26px;
  }

  .privacyHeader h2 {
    font-size: 25px;
  }

  .privacyActions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .privacyActions button {
    width: 100%;
  }
}



/* ===== 요청 수정: 라이트모드 전용 타이틀 파스텔 색상 ===== */
body:not(.dark-mode) .titleRollText,
body:not(.dark-mode) .titleRollChar {
  text-shadow:
    0 5px 0 rgba(255,255,255,0.78),
    0 12px 24px rgba(205,180,219,0.34),
    0 0 18px rgba(189,224,254,0.35) !important;
}

body:not(.dark-mode) .titleRollChar:nth-child(1) { color: #CDB4DB !important; }
body:not(.dark-mode) .titleRollChar:nth-child(2) { color: #FFAFCC !important; }
body:not(.dark-mode) .titleRollChar:nth-child(3) { color: #FFC8DD !important; }
body:not(.dark-mode) .titleRollChar:nth-child(4) { color: #A2D2FF !important; }

body:not(.dark-mode) .titleLoop {
  filter: drop-shadow(0 10px 18px rgba(162,210,255,0.22));
}

body:not(.dark-mode) .lobbyKicker {
  background: rgba(189,224,254,0.46) !important;
  color: #7a5f8f !important;
}

body:not(.dark-mode) #startStatus {
  color: #ff8fb8 !important;
}



/* ===== 요청 수정: 인게임 일시정지 메뉴 UI ===== */
#pauseMenuButton {
  position: fixed;
  left: 18px;
  top: 18px;
  z-index: 36;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 16px;
  background: rgba(255,255,255,0.78);
  color: #111827;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 34px rgba(15,23,42,0.14), inset 0 0 0 1px rgba(255,255,255,0.62);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

#pauseMenuButton.show {
  display: flex;
}

.pauseMenuIcon {
  width: 22px;
  height: 15px;
  display: grid;
  gap: 4px;
}

.pauseMenuIcon span {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: #111827;
}

#pauseOverlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(248,250,252,0.46);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

#pauseOverlay.show {
  display: flex;
}

.pausePanel {
  width: min(430px, calc(100vw - 42px));
  padding: 28px 26px 24px;
  border-radius: 32px;
  color: #111827;
  background: rgba(255,255,255,0.84);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 28px 80px rgba(15,23,42,0.18), inset 0 0 0 1px rgba(255,255,255,0.66);
  text-align: center;
}

.pauseTitleBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(0,122,255,0.10);
  color: #007aff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.pausePanel h2 {
  margin: 0 0 6px;
  font-size: 34px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.065em;
}

.pausePanel p {
  margin: 0 0 22px;
  color: #6b7280;
  font-size: 14px;
  font-weight: 700;
}

.pauseActionStack {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.pausePrimaryButton,
.pauseSecondaryButton {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 15px 18px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
  cursor: pointer;
}

.pausePrimaryButton {
  background: #111827;
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(17,24,39,0.18);
}

.pauseSecondaryButton {
  background: rgba(17,24,39,0.07);
  color: #111827;
}

.pauseSliderBox {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(248,250,252,0.76);
  border: 1px solid rgba(0,0,0,0.06);
  text-align: left;
}

.pauseSliderRow label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  color: #111827;
  font-size: 13px;
  font-weight: 900;
}

.pauseSliderRow label span {
  color: #6b7280;
  font-size: 12px;
}

.pauseSliderRow input[type="range"] {
  width: 100%;
  accent-color: #007aff;
}

body.dark-mode #pauseMenuButton,
body.dark-mode .pausePanel {
  background: rgba(255,255,255,0.86);
  color: #111827;
}

body.dark-mode #pauseOverlay {
  background: rgba(248,250,252,0.46);
}

@media (max-width: 720px) {
  #pauseMenuButton {
    width: 42px;
    height: 42px;
    left: 12px;
    top: 12px;
  }
  .pausePanel { padding: 24px 20px 20px; }
  .pausePanel h2 { font-size: 30px; }
}



/* ===== AI 대전 모드 UI ===== */
.matchSelectWrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 18px 0 8px;
}

.aiDifficultyWrap {
  display: none;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin: 8px 0 8px;
}

.aiDifficultyWrap.show { display: grid; }

.lobbyWingStack {
  position: absolute;
  top: 92px;
  right: -42px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
}
.lobbyWingTab {
  pointer-events: auto;
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px;
  width: 42px !important;
  min-width: 42px !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 13px !important;
  overflow: hidden;
  border-radius: 0 16px 16px 0 !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  border-left: 0 !important;
  background: rgba(255,255,255,0.74) !important;
  color: #111827 !important;
  box-shadow: 12px 14px 28px rgba(15,23,42,0.13), inset 0 0 0 1px rgba(255,255,255,0.64) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  cursor: pointer;
  transition: width .18s ease, min-width .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.lobbyWingTab::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: var(--wing-accent, #0a84ff);
}
.lobbyWingTab:hover,
.lobbyWingTab:focus-visible {
  width: 118px !important;
  min-width: 118px !important;
  transform: translateX(3px);
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 16px 18px 34px rgba(15,23,42,0.16), 0 0 0 3px rgba(10,132,255,0.12), inset 0 0 0 1px rgba(255,255,255,0.72) !important;
}
.lobbyWingIcon {
  flex: 0 0 16px;
  width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}
.lobbyWingLabel {
  flex: 0 0 auto;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0;
  transition: opacity .16s ease, max-width .18s ease;
}
.lobbyWingTab:hover .lobbyWingLabel,
.lobbyWingTab:focus-visible .lobbyWingLabel {
  opacity: 1;
  max-width: 78px;
}
.lobbyWingTab.record { --wing-accent: #0a84ff; }
.lobbyWingTab.ranking { --wing-accent: #ffd166; }
.aiRecordOverlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(15,23,42,0.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.aiRecordOverlay.show { display: flex; }
.aiRecordPopup {
  position: relative;
  width: min(520px, calc(100vw - 44px));
  padding: 24px;
  border-radius: 24px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 28px 70px rgba(15,23,42,0.24), inset 0 0 0 1px rgba(255,255,255,0.70);
}
.aiRecordCloseButton {
  position: absolute;
  right: 16px;
  top: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50% !important;
  border: 0 !important;
  background: rgba(17,24,39,0.08) !important;
  color: #111827 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  cursor: pointer;
}
.aiRecordPopupHeader { padding-right: 40px; margin-bottom: 16px; }
.aiRecordPopupBadge {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 950;
  color: #0a84ff;
}
.aiRecordPopupHeader h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1;
  color: #111827;
  font-weight: 950;
}
.aiRecordTabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.aiRecordTab {
  min-height: 38px;
  border-radius: 12px !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
  background: rgba(248,250,252,0.86) !important;
  color: #4b5563 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}
.aiRecordTab.active {
  background: rgba(10,132,255,0.13) !important;
  border-color: rgba(10,132,255,0.42) !important;
  color: #0a58ca !important;
}
.aiRecordTab[disabled] { opacity: .58; cursor: not-allowed; }
.aiRecordPanel {
  display: block;
  padding: 0;
}
.aiRecordDifficultyCarousel {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
}
.aiRecordCarouselArrow,
.aiRecordDifficultyCurrent {
  min-height: 54px;
  border: 1px solid rgba(15,23,42,0.08) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(238,246,255,0.92)) !important;
  color: #315d7d !important;
  box-shadow: 0 8px 18px rgba(49,93,125,0.10), inset 0 0 0 1px rgba(255,255,255,0.68) !important;
}
.aiRecordCarouselArrow {
  border-radius: 15px !important;
  padding: 0 !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
.aiRecordDifficultyCurrent {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 16px !important;
}
.aiRecordDifficultyCurrent small {
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .12em;
  color: #79a8c7;
}
.aiRecordDifficultyCurrent strong {
  font-size: 18px;
  font-weight: 950;
  color: #315d7d;
}
.aiRecordDifficultyDots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 14px;
  margin-bottom: 10px;
}
.aiRecordDifficultyDot {
  width: 7px !important;
  min-width: 7px !important;
  height: 7px !important;
  min-height: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(49,93,125,0.20) !important;
  box-shadow: none !important;
  transition: width .18s ease, border-radius .18s ease, background .18s ease !important;
}
.aiRecordDifficultyDot.active {
  width: 20px !important;
  min-width: 20px !important;
  border-radius: 999px !important;
  background: #79bde8 !important;
}
.aiRankingPanel .aiRecordItem span {
  white-space: normal;
  line-height: 1.35;
}
.aiRecordHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.aiRecordHeader strong {
  font-size: 13px;
  font-weight: 950;
  color: #111827;
}
.aiRecordHeader span {
  font-size: 11px;
  font-weight: 800;
  color: #6b7280;
}
.aiRecordGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.aiRecordItem {
  min-width: 0;
  padding: 8px 9px;
  border-radius: 10px;
  background: rgba(248,250,252,0.82);
  border: 1px solid rgba(15,23,42,0.06);
}
.aiRecordItem b {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  color: #6b7280;
  font-weight: 900;
}
.aiRecordItem span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: #111827;
  font-weight: 950;
}
.aiRecordItem.empty span { color: #9ca3af; }

.lobbyCard .matchButton,
#lobby .lobbyCard button.matchButton,
.lobbyCard .aiDifficultyButton,
#lobby .lobbyCard button.aiDifficultyButton {
  padding: 13px 14px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.58) !important;
  color: #111827 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.58), 0 8px 18px rgba(15,23,42,0.08) !important;
  text-align: left;
  font-size: 13px !important;
}

.lobbyCard .matchButton strong { display:block; font-size:15px; margin-bottom:4px; }
.lobbyCard .matchButton span { display:block; color:#6b7280; font-size:12px; }
.lobbyCard .matchButton.selected,
#lobby .lobbyCard button.matchButton.selected,
.lobbyCard .aiDifficultyButton.selected,
#lobby .lobbyCard button.aiDifficultyButton.selected {
  border-color: rgba(0,122,255,0.78) !important;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.18), 0 12px 24px rgba(15,23,42,0.10), inset 0 0 0 1px rgba(255,255,255,0.74) !important;
}

.lobbyCard .aiDifficultyButton { text-align:center !important; font-weight:850 !important; }
.lobbyCard .aiDifficultyButton:nth-child(1).selected { background: rgba(52,199,89,0.16) !important; }
.lobbyCard .aiDifficultyButton:nth-child(2).selected { background: rgba(10,132,255,0.16) !important; }
.lobbyCard .aiDifficultyButton:nth-child(3).selected { background: rgba(255,59,48,0.16) !important; }
.lobbyCard .aiDifficultyButton:nth-child(4).selected { background: rgba(255,45,149,0.16) !important; }
.lobbyCard .aiDifficultyButton:nth-child(5).selected { background: rgba(132,60,255,0.18) !important; }
.lobbyCard .aiDifficultyButton:nth-child(6).selected { background: rgba(64,0,0,0.22) !important; }
.lobbyCard .aiDifficultyButton:nth-child(7).selected { background: rgba(0,255,120,0.20) !important; }
.playerSelectBox.ai-locked .palette { opacity: .32; pointer-events: none; filter: grayscale(.18); }
.playerSelectBox.ai-locked .readyHint { color: #0a84ff !important; opacity: 1; }
body.dark-mode .lobbyCard .matchButton,
body.dark-mode #lobby .lobbyCard button.matchButton,
body.dark-mode .lobbyCard .aiDifficultyButton,
body.dark-mode #lobby .lobbyCard button.aiDifficultyButton {
  background: rgba(255,255,255,0.07) !important;
  color: var(--text-main) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
body.dark-mode .lobbyCard .matchButton span { color: var(--text-sub); }
body.dark-mode .lobbyWingTab {
  background: rgba(17,24,39,0.82) !important;
  color: #f8fafc !important;
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: 12px 14px 28px rgba(0,0,0,0.24), inset 0 0 0 1px rgba(255,255,255,0.08) !important;
}
body.dark-mode .lobbyWingTab:hover,
body.dark-mode .lobbyWingTab:focus-visible {
  background: rgba(31,41,55,0.94) !important;
}
body.dark-mode .aiRecordPopup {
  background: rgba(17,24,39,0.94);
  color: var(--text-main);
  border-color: rgba(255,255,255,0.12);
}
body.dark-mode .aiRecordCloseButton { background: rgba(255,255,255,0.10) !important; color: #f8fafc !important; }
body.dark-mode .aiRecordPopupHeader h2,
body.dark-mode .aiRecordHeader strong,
body.dark-mode .aiRecordItem span { color: var(--text-main); }
body.dark-mode .aiRecordTab { background: rgba(255,255,255,0.06) !important; color: var(--text-sub) !important; border-color: rgba(255,255,255,0.10) !important; }
body.dark-mode .aiRecordTab.active { background: rgba(10,132,255,0.24) !important; color: #dbeafe !important; border-color: rgba(147,197,253,0.38) !important; }
body.dark-mode .aiRecordCarouselArrow,
body.dark-mode .aiRecordDifficultyCurrent {
  background: linear-gradient(180deg, rgba(62,75,96,0.96), rgba(43,55,75,0.96)) !important;
  color: #d9f0ff !important;
  border-color: rgba(174,221,255,0.18) !important;
}
body.dark-mode .aiRecordDifficultyCurrent small { color: #9fd4f7; }
body.dark-mode .aiRecordDifficultyCurrent strong { color: #e5f5ff; }
body.dark-mode .aiRecordDifficultyDot { background: rgba(204,234,255,0.22) !important; }
body.dark-mode .aiRecordDifficultyDot.active { background: #9fd4f7 !important; }
body.dark-mode .aiRecordHeader span,
body.dark-mode .aiRecordItem b { color: var(--text-sub); }
body.dark-mode .aiRecordItem {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}
@media (max-width: 720px) {
  .matchSelectWrap { grid-template-columns: 1fr; }
  .aiDifficultyWrap { grid-template-columns: repeat(2, 1fr); }
  .aiRecordGrid { grid-template-columns: 1fr; }
  .lobbyWingStack {
    top: auto;
    right: 12px;
    bottom: -54px;
    flex-direction: row;
    gap: 8px;
  }
  .lobbyWingTab {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 13px !important;
    border-left: 1px solid rgba(15,23,42,0.10) !important;
  }
  .lobbyWingTab:hover,
  .lobbyWingTab:focus-visible {
    width: 108px !important;
    min-width: 108px !important;
    transform: translateY(-2px);
  }
}


/* ===== 요청 수정: AI 난이도 카드 색상 아웃라인 ===== */
.lobbyCard .aiDifficultyButton:nth-child(1),
#lobby .lobbyCard button.aiDifficultyButton:nth-child(1) {
  border-color: rgba(52,199,89,0.32) !important;
}
.lobbyCard .aiDifficultyButton:nth-child(2),
#lobby .lobbyCard button.aiDifficultyButton:nth-child(2) {
  border-color: rgba(10,132,255,0.32) !important;
}
.lobbyCard .aiDifficultyButton:nth-child(3),
#lobby .lobbyCard button.aiDifficultyButton:nth-child(3) {
  border-color: rgba(255,59,48,0.32) !important;
}
.lobbyCard .aiDifficultyButton:nth-child(4),
#lobby .lobbyCard button.aiDifficultyButton:nth-child(4) {
  border-color: rgba(255,45,149,0.32) !important;
}
.lobbyCard .aiDifficultyButton:nth-child(5),
#lobby .lobbyCard button.aiDifficultyButton:nth-child(5) {
  border-color: rgba(132,60,255,0.36) !important;
}
.lobbyCard .aiDifficultyButton:nth-child(6),
#lobby .lobbyCard button.aiDifficultyButton:nth-child(6) {
  border-color: rgba(255,69,0,0.46) !important;
  color: #3b0704 !important;
}

.lobbyCard .aiDifficultyButton:nth-child(1).selected,
#lobby .lobbyCard button.aiDifficultyButton:nth-child(1).selected {
  border-color: rgba(52,199,89,0.95) !important;
  box-shadow: 0 0 0 3px rgba(52,199,89,0.24), 0 0 20px rgba(52,199,89,0.20), 0 12px 24px rgba(15,23,42,0.10), inset 0 0 0 1px rgba(255,255,255,0.74) !important;
}
.lobbyCard .aiDifficultyButton:nth-child(2).selected,
#lobby .lobbyCard button.aiDifficultyButton:nth-child(2).selected {
  border-color: rgba(10,132,255,0.95) !important;
  box-shadow: 0 0 0 3px rgba(10,132,255,0.24), 0 0 20px rgba(10,132,255,0.20), 0 12px 24px rgba(15,23,42,0.10), inset 0 0 0 1px rgba(255,255,255,0.74) !important;
}
.lobbyCard .aiDifficultyButton:nth-child(3).selected,
#lobby .lobbyCard button.aiDifficultyButton:nth-child(3).selected {
  border-color: rgba(255,59,48,0.95) !important;
  box-shadow: 0 0 0 3px rgba(255,59,48,0.24), 0 0 20px rgba(255,59,48,0.20), 0 12px 24px rgba(15,23,42,0.10), inset 0 0 0 1px rgba(255,255,255,0.74) !important;
}
.lobbyCard .aiDifficultyButton:nth-child(4).selected,
#lobby .lobbyCard button.aiDifficultyButton:nth-child(4).selected {
  border-color: rgba(255,45,149,0.95) !important;
  box-shadow: 0 0 0 3px rgba(255,45,149,0.24), 0 0 20px rgba(255,45,149,0.20), 0 12px 24px rgba(15,23,42,0.10), inset 0 0 0 1px rgba(255,255,255,0.74) !important;
}
.lobbyCard .aiDifficultyButton:nth-child(5).selected,
#lobby .lobbyCard button.aiDifficultyButton:nth-child(5).selected {
  border-color: rgba(132,60,255,0.96) !important;
  box-shadow: 0 0 0 3px rgba(132,60,255,0.28), 0 0 22px rgba(132,60,255,0.34), 0 0 36px rgba(180,130,255,0.22), 0 12px 24px rgba(15,23,42,0.10), inset 0 0 0 1px rgba(255,255,255,0.74) !important;
}
.lobbyCard .aiDifficultyButton:nth-child(6).selected,
#lobby .lobbyCard button.aiDifficultyButton:nth-child(6).selected {
  color: #170000 !important;
  border-color: rgba(255,69,0,0.98) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,211,92,0.38), transparent 36%),
    linear-gradient(135deg, rgba(42,0,0,0.22), rgba(255,69,0,0.20), rgba(108,0,0,0.28)) !important;
  box-shadow:
    0 0 0 3px rgba(255,69,0,0.30),
    0 0 24px rgba(255,69,0,0.42),
    0 0 42px rgba(180,12,0,0.30),
    0 12px 24px rgba(15,23,42,0.12),
    inset 0 0 0 1px rgba(255,230,180,0.72) !important;
}

/* ===== 요청 수정: AI 난이도 순차 해금 잠금 표시 ===== */
.lobbyCard .aiDifficultyButton.locked,
#lobby .lobbyCard button.aiDifficultyButton.locked {
  position: relative;
  opacity: 0.42 !important;
  filter: grayscale(0.55) saturate(0.7) !important;
  cursor: not-allowed !important;
  background: rgba(229,231,235,0.70) !important;
  color: rgba(17,24,39,0.56) !important;
  border-color: rgba(17,24,39,0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.50) !important;
}

.lobbyCard .aiDifficultyButton.locked::after,
#lobby .lobbyCard button.aiDifficultyButton.locked::after {
  content: "🔒";
  position: absolute;
  right: 6px;
  top: 5px;
  font-size: 12px;
  line-height: 1;
  opacity: 0.9;
}

body.dark-mode .lobbyCard .aiDifficultyButton.locked,
body.dark-mode #lobby .lobbyCard button.aiDifficultyButton.locked,
body.ghost-mode-lock .lobbyCard .aiDifficultyButton.locked,
body.ghost-mode-lock #lobby .lobbyCard button.aiDifficultyButton.locked {
  background: rgba(255,255,255,0.055) !important;
  color: rgba(245,247,251,0.42) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}


/* ===== 요청 수정: 고스트모드 전용 다크 고정 + 카운트다운 암막 페이드 ===== */
body.ghost-mode-lock {
  background: radial-gradient(circle at top, #151923 0%, #050608 68%, #010102 100%) !important;
  --glass-bg: rgba(12, 14, 20, 0.76);
  --glass-border: rgba(255,255,255,0.10);
  --text-main: #f5f7fb;
  --text-sub: #a4aab8;
  --accent: #8ee8ff;
  --soft-shadow: 0 18px 54px rgba(0,0,0,0.46);
}

body.ghost-mode-lock #lobby {
  background:
    radial-gradient(circle at 18% 12%, rgba(142,232,255,0.12), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,0.07), transparent 30%),
    linear-gradient(180deg, rgba(20,24,35,0.96), rgba(3,4,7,0.94)) !important;
}

body.ghost-mode-lock .lobbyCard,
body.ghost-mode-lock #ui,
body.ghost-mode-lock #scoreUI,
body.ghost-mode-lock #message {
  color: var(--text-main) !important;
  background: rgba(12,14,20,0.78) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.46), inset 0 0 0 1px rgba(255,255,255,0.05) !important;
}

body.ghost-mode-lock .lobbyKicker,
body.ghost-mode-lock .playerSelectBox,
body.ghost-mode-lock .scoreCard {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

body.ghost-mode-lock .lobbyCard h1,
body.ghost-mode-lock #countNumber {
  color: #f5f7fb !important;
  text-shadow: 0 0 22px rgba(255,255,255,0.38) !important;
}

body.ghost-mode-lock #themeToggle {
  opacity: 0.46 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.4);
}

#countdownOverlay.ghost-mode {
  overflow: hidden;
  background: rgba(3,4,7,0.18) !important;
  transition: background-color .72s ease, opacity .72s ease;
}

#countdownOverlay.ghost-mode::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -2;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,0.055), transparent 24%),
    radial-gradient(circle at 82% 72%, rgba(255,255,255,0.035), transparent 28%),
    radial-gradient(circle at 48% 44%, rgba(80,90,115,0.09), transparent 36%),
    linear-gradient(180deg, rgba(2,3,6,0.78), rgba(0,0,0,0.96));
  filter: blur(12px);
  opacity: 0;
  transition: opacity .78s ease;
}

#countdownOverlay.ghost-mode::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.030), transparent 12%),
    radial-gradient(circle at 74% 22%, rgba(255,255,255,0.020), transparent 15%),
    radial-gradient(circle at 58% 78%, rgba(255,255,255,0.025), transparent 16%),
    rgba(0,0,0,0.0);
  opacity: 0;
  transition: opacity .78s ease;
}

#countdownOverlay.ghost-mode #countNumber {
  position: relative;
  z-index: 3;
  color: #ffffff !important;
  text-shadow:
    0 0 18px rgba(255,255,255,0.56),
    0 0 42px rgba(142,232,255,0.24) !important;
  transition: transform .42s ease, opacity .42s ease;
}

#countdownOverlay.ghost-mode #classicCountdownGuide,
#countdownOverlay.ghost-mode #ghostCountdownGuide,
#countdownOverlay.ghost-mode #itemCountdownGuide,
#countdownOverlay.ghost-mode #countRule {
  transition: opacity .62s ease, transform .62s ease, filter .62s ease;
}

#countdownOverlay.ghost-count-3::before { opacity: 0.34; }
#countdownOverlay.ghost-count-3::after { opacity: 0.16; }
#countdownOverlay.ghost-count-3 #classicCountdownGuide,
#countdownOverlay.ghost-count-3 #ghostCountdownGuide,
#countdownOverlay.ghost-count-3 #itemCountdownGuide,
#countdownOverlay.ghost-count-3 #countRule {
  opacity: 0.82;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

#countdownOverlay.ghost-count-2::before { opacity: 0.62; }
#countdownOverlay.ghost-count-2::after { opacity: 0.32; }
#countdownOverlay.ghost-count-2 #classicCountdownGuide,
#countdownOverlay.ghost-count-2 #ghostCountdownGuide,
#countdownOverlay.ghost-count-2 #itemCountdownGuide,
#countdownOverlay.ghost-count-2 #countRule {
  opacity: 0.42;
  transform: translateY(10px) scale(0.985);
  filter: blur(1px);
}

#countdownOverlay.ghost-count-1::before { opacity: 0.86; }
#countdownOverlay.ghost-count-1::after { opacity: 0.50; }
#countdownOverlay.ghost-count-1 #classicCountdownGuide,
#countdownOverlay.ghost-count-1 #ghostCountdownGuide,
#countdownOverlay.ghost-count-1 #itemCountdownGuide,
#countdownOverlay.ghost-count-1 #countRule {
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  filter: blur(4px);
  pointer-events: none;
}

#countdownOverlay.ghost-count-start::before { opacity: 0.96; }
#countdownOverlay.ghost-count-start::after { opacity: 0.66; }
#countdownOverlay.ghost-count-start #classicCountdownGuide,
#countdownOverlay.ghost-count-start #ghostCountdownGuide,
#countdownOverlay.ghost-count-start #itemCountdownGuide,
#countdownOverlay.ghost-count-start #countRule {
  opacity: 0;
  transform: translateY(20px) scale(0.94);
  filter: blur(6px);
  pointer-events: none;
}

#countdownOverlay.ghost-mode #ghostCountdownGuide,
#countdownOverlay.ghost-mode #itemCountdownGuide {
  background: rgba(12,14,20,0.62) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.38), inset 0 0 0 1px rgba(255,255,255,0.06) !important;
}

#countdownOverlay.ghost-mode .classicGuideStep,
#countdownOverlay.ghost-mode .itemGuideCard {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.08) !important;
}



/* ===== 추가 스킨: 선물상자/선물 포장지, 얼음/빙판 ===== */

.selectedPreview[data-skin="gift"] {
  background:
    linear-gradient(90deg, transparent 42%, rgba(255,255,255,0.92) 42%, rgba(255,255,255,0.92) 58%, transparent 58%),
    linear-gradient(0deg, transparent 42%, rgba(255,255,255,0.92) 42%, rgba(255,255,255,0.92) 58%, transparent 58%),
    var(--preview-color) !important;
}
.selectedPreview[data-skin="ice"] {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.78) 0 8%, transparent 8% 28%, rgba(255,255,255,0.42) 28% 35%, transparent 35% 100%),
    var(--preview-color) !important;
}

.colorChip[data-skin="gift"] {
  background:
    linear-gradient(90deg, transparent 42%, rgba(255,255,255,0.92) 42%, rgba(255,255,255,0.92) 58%, transparent 58%),
    linear-gradient(0deg, transparent 42%, rgba(255,255,255,0.92) 42%, rgba(255,255,255,0.92) 58%, transparent 58%),
    var(--chip-color) !important;
}
.colorChip[data-skin="ice"] {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.78) 0 8%, transparent 8% 28%, rgba(255,255,255,0.42) 28% 35%, transparent 35% 100%),
    var(--chip-color) !important;
}


/* ===== 추가 스킨: 무지개블록 / 무지개 영역 ===== */

.selectedPreview[data-skin="rainbow"] {
  background:
    linear-gradient(135deg,
      #ff3b30 0 14.28%,
      #ff9500 14.28% 28.56%,
      #ffd60a 28.56% 42.84%,
      #34c759 42.84% 57.12%,
      #0a84ff 57.12% 71.4%,
      #3348ff 71.4% 85.68%,
      #af52de 85.68% 100%) !important;
}
.colorChip[data-skin="rainbow"] {
  background:
    conic-gradient(#ff3b30, #ff9500, #ffd60a, #34c759, #0a84ff, #3348ff, #af52de, #ff3b30) !important;
}
body.dark-mode .lobbyCard button.colorChip[data-skin="rainbow"],
body.dark-mode .colorChip[data-skin="rainbow"] {
  background:
    conic-gradient(#ff3b30, #ff9500, #ffd60a, #34c759, #0a84ff, #3348ff, #af52de, #ff3b30) !important;
}




/* ===== 추가 스킨: 로봇청소기 / 지옥 AI - 이전 버전 단색 + 반짝임 스타일 ===== */
.selectedPreview[data-skin="extreme"] {
  background: var(--preview-color) !important;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.84),
    0 0 18px rgba(132,60,255,0.70),
    0 0 34px rgba(216,180,254,0.40) !important;
  animation: rewardSkinSolidSparkle 1.05s ease-in-out infinite;
}
.colorChip[data-skin="extreme"] {
  background: var(--chip-color) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.92),
    0 0 12px rgba(132,60,255,0.52),
    0 0 22px rgba(216,180,254,0.28) !important;
  animation: rewardSkinSolidSparkle 1.05s ease-in-out infinite;
}
body.dark-mode .lobbyCard button.colorChip[data-skin="extreme"],
body.dark-mode .colorChip[data-skin="extreme"] {
  background: var(--chip-color) !important;
}

.selectedPreview[data-skin="hell"] {
  background: var(--preview-color) !important;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.84),
    0 0 18px rgba(255,69,0,0.72),
    0 0 36px rgba(255,176,0,0.42) !important;
  animation: hellSkinSolidSparkle 0.9s ease-in-out infinite;
}
.colorChip[data-skin="hell"] {
  background: var(--chip-color) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.92),
    0 0 13px rgba(255,69,0,0.58),
    0 0 25px rgba(255,176,0,0.34) !important;
  animation: hellSkinSolidSparkle 0.9s ease-in-out infinite;
}
body.dark-mode .lobbyCard button.colorChip[data-skin="hell"],
body.dark-mode .colorChip[data-skin="hell"] {
  background: var(--chip-color) !important;
}

.selectedPreview[data-skin="chaos"] {
  background: var(--preview-color) !important;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.84),
    0 0 18px rgba(0,255,120,0.72),
    0 0 36px rgba(0,255,204,0.44) !important;
  animation: chaosSkinSolidSparkle 0.78s steps(2, end) infinite;
}
.colorChip[data-skin="chaos"] {
  background: var(--chip-color) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.92),
    0 0 13px rgba(0,255,120,0.62),
    0 0 26px rgba(0,255,204,0.36) !important;
  animation: chaosSkinSolidSparkle 0.78s steps(2, end) infinite;
}
body.dark-mode .lobbyCard button.colorChip[data-skin="chaos"],
body.dark-mode .colorChip[data-skin="chaos"] {
  background: var(--chip-color) !important;
}

@keyframes rewardSkinSolidSparkle {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.22); }
}

@keyframes hellSkinSolidSparkle {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.28) saturate(1.18); }
}

@keyframes chaosSkinSolidSparkle {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.32) saturate(1.28); }
}

/* ===== AI 클리어 보상 스킨 잠금/해금 UI ===== */
.colorChip.locked {
  position: relative !important;
  cursor: not-allowed !important;
  filter: grayscale(0.8) brightness(0.82) !important;
  opacity: 0.48 !important;
  transform: none !important;
}
.colorChip.locked::before {
  content: "🔒";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.44);
  color: #ffffff;
  font-size: 15px;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.colorChip.locked::after {
  content: attr(data-unlock-label);
  position: absolute;
  left: 50%;
  top: calc(100% + 5px);
  transform: translateX(-50%);
  min-width: 64px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.86);
  color: #ffffff;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}
.colorChip.locked:hover::after { opacity: 1; }
.colorChip.locked.selected {
  box-shadow: 0 0 0 2px rgba(17,24,39,0.18), 0 5px 12px rgba(15,23,42,0.10) !important;
}
.skinUnlockNotice {
  display: block;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 209, 102, 0.22);
  color: #7a4d00;
  font-weight: 900;
}
body.dark-mode .skinUnlockNotice {
  background: rgba(255, 209, 102, 0.24);
  color: #ffe29a;
}



/* ===== 요청 수정: 단색 컬러 선택 간소화 UI ===== */
.palette.compactPalette {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 10px auto 14px !important;
}

.solidColorStepper {
  display: grid;
  grid-template-columns: 34px minmax(106px, 1fr) 34px;
  align-items: center;
  gap: 8px;
  width: min(190px, 100%);
  padding: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.58), 0 8px 18px rgba(15,23,42,0.08);
}

.lobbyCard button.solidArrowBtn,
.solidArrowBtn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(17,24,39,0.88) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(15,23,42,0.12) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.lobbyCard button.solidColorButton,
.solidColorButton {
  height: 34px !important;
  padding: 0 10px 0 38px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.74) !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.70) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  text-align: left !important;
  position: relative !important;
  overflow: hidden !important;
}

.solidColorButton::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--solid-color);
  border: 2px solid rgba(255,255,255,0.94);
  box-shadow: 0 3px 8px rgba(15,23,42,0.14), inset 0 0 0 1px rgba(255,255,255,0.35);
}

.skinPalette {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
}

.skinPalette .colorChip {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
}

body.dark-mode .solidColorStepper {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 8px 18px rgba(0,0,0,0.18);
}

body.dark-mode .lobbyCard button.solidArrowBtn,
body.dark-mode .solidArrowBtn {
  background: rgba(245,247,251,0.92) !important;
  color: #111827 !important;
}

body.dark-mode .lobbyCard button.solidColorButton,
body.dark-mode .solidColorButton {
  background: rgba(255,255,255,0.08) !important;
  color: var(--text-main) !important;
  border-color: rgba(255,255,255,0.10) !important;
}



/* ===== 추가 스킨: 유령 오브젝트 / 그라데이션 회색 영역 ===== */
.selectedPreview[data-skin="ghost"] {
  background:
    radial-gradient(circle at 45% 34%, rgba(255,255,255,0.98) 0 28%, rgba(232,235,240,0.92) 29% 54%, rgba(150,158,172,0.92) 55% 100%) !important;
  position: relative;
}
.selectedPreview[data-skin="ghost"]::before {
  content: "👻";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}
.colorChip[data-skin="ghost"] {
  background:
    radial-gradient(circle at 42% 34%, #ffffff 0 23%, #dfe3ea 24% 54%, #8d96a6 55% 100%) !important;
  position: relative !important;
}
.colorChip[data-skin="ghost"]::before {
  content: "👻";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: transparent !important;
  text-shadow: 0 2px 5px rgba(0,0,0,0.16);
}
body.dark-mode .lobbyCard button.colorChip[data-skin="ghost"],
body.dark-mode .colorChip[data-skin="ghost"] {
  background:
    radial-gradient(circle at 42% 34%, #ffffff 0 23%, #dfe3ea 24% 54%, #8d96a6 55% 100%) !important;
}
.colorChip[data-skin="ghost"].locked::before {
  content: "🔒";
  background: rgba(17, 24, 39, 0.44) !important;
  font-size: 15px;
}


/* ===== 요청 수정: 로비 색상 선택 아이콘 라운드 네모 + 색상명 표시 ===== */
.selectedPreview,
body.dark-mode .selectedPreview {
  border-radius: 12px !important;
}

.lobbyCard .colorChip,
.colorChip,
.skinPalette .colorChip,
body.dark-mode .lobbyCard button.colorChip,
body.dark-mode .colorChip {
  border-radius: 11px !important;
}

.lobbyCard button.solidColorButton,
.solidColorButton,
body.dark-mode .lobbyCard button.solidColorButton,
body.dark-mode .solidColorButton {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px 0 44px !important;
  border-radius: 14px !important;
  text-align: left !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

.solidColorButton::before {
  width: 26px !important;
  height: 26px !important;
  left: 8px !important;
  border-radius: 8px !important;
}

.solidColorStepper {
  border-radius: 18px !important;
  grid-template-columns: 34px minmax(118px, 1fr) 34px !important;
  width: min(214px, 100%) !important;
}

.lobbyCard button.solidArrowBtn,
.solidArrowBtn {
  border-radius: 11px !important;
}


/* ===== 요청 수정: 영문판 ROLL ROLL 타이틀 폰트 + 구르기 유지 ===== */
@font-face {
  font-family: 'RollRollTitleFont';
  src: url('../fonts/ver212-font-02.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.titleRollText.englishTitle,
.titleRollText.englishTitle .titleRollChar {
  font-family: 'RollRollTitleFont', 'DegulTitleFont', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: normal !important;
  letter-spacing: 0.015em !important;
}

.titleRollText .titleRollChar {
  animation-delay: calc(var(--char-index, 0) * .13s) !important;
}

.titleRollText.englishTitle {
  gap: 1px !important;
  transform: translateY(2px);
}

.titleRollText.englishTitle .titleRollChar {
  font-size: 52px !important;
  line-height: 1 !important;
}

body:not(.dark-mode) .titleRollText.englishTitle .titleRollChar:nth-child(4n+1) { color: #CDB4DB !important; }
body:not(.dark-mode) .titleRollText.englishTitle .titleRollChar:nth-child(4n+2) { color: #FFAFCC !important; }
body:not(.dark-mode) .titleRollText.englishTitle .titleRollChar:nth-child(4n+3) { color: #FFC8DD !important; }
body:not(.dark-mode) .titleRollText.englishTitle .titleRollChar:nth-child(4n) { color: #A2D2FF !important; }

.titleRollText .titleSpace {
  display: inline-block;
  width: .42em;
  animation: none !important;
}

@media (max-width: 720px) {
  .titleRollText.englishTitle .titleRollChar {
    font-size: 38px !important;
  }
}


/* ===== 요청 수정: 50% 이상 우세 플레이어 화면 외곽 파스텔 라인 효과 ===== */
#dominanceEdgeOverlay {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease, filter 0.45s ease;
  --dominance-color: 143, 211, 255;
  --dominance-alpha: 0.42;
  filter: saturate(1.04);
}

#dominanceEdgeOverlay.show {
  opacity: 1;
}

#dominanceEdgeOverlay.fade-out {
  opacity: 0 !important;
  transition: opacity 0.9s ease;
}

#dominanceEdgeOverlay::before,
#dominanceEdgeOverlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#dominanceEdgeOverlay::before {
  background:
    linear-gradient(to bottom, rgba(var(--dominance-color), var(--dominance-alpha)) 0%, rgba(var(--dominance-color), 0.18) 2.2%, transparent 9.5%),
    linear-gradient(to top, rgba(var(--dominance-color), var(--dominance-alpha)) 0%, rgba(var(--dominance-color), 0.18) 2.2%, transparent 9.5%),
    linear-gradient(to right, rgba(var(--dominance-color), var(--dominance-alpha)) 0%, rgba(var(--dominance-color), 0.18) 2.2%, transparent 9.5%),
    linear-gradient(to left, rgba(var(--dominance-color), var(--dominance-alpha)) 0%, rgba(var(--dominance-color), 0.18) 2.2%, transparent 9.5%);
  animation: dominanceEdgeBreath 1.75s ease-in-out infinite;
}

#dominanceEdgeOverlay::after {
  box-shadow:
    inset 0 0 0 5px rgba(var(--dominance-color), 0.46),
    inset 0 0 22px rgba(var(--dominance-color), 0.34),
    inset 0 0 58px rgba(var(--dominance-color), 0.20);
  opacity: 0.9;
  animation: dominanceEdgeGlow 1.45s ease-in-out infinite;
}

#dominanceEdgeOverlay.p1 {
  --dominance-color: 143, 211, 255; /* pastel blue */
}

#dominanceEdgeOverlay.p2 {
  --dominance-color: 255, 158, 181; /* pastel red/pink */
}

@keyframes dominanceEdgeBreath {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}

@keyframes dominanceEdgeGlow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.006);
    opacity: 1;
  }
}


/* ===== 요청 수정: 센터 상단 점유율 UI 우세 그라데이션 점멸 효과 ===== */
#scoreUI.scoreGaugeUI {
  --dominance-ui-fill: 0%;
  --dominance-ui-color-strong: rgba(125, 199, 255, 0.82);
  --dominance-ui-color-soft: rgba(125, 199, 255, 0.00);
  --dominance-ui-glow: rgba(125, 199, 255, 0.42);
  position: fixed !important;
  overflow: hidden !important;
}

#scoreUI.scoreGaugeUI::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, clip-path .32s ease;
}

#scoreUI.scoreGaugeUI.dominance-score-active::before {
  opacity: 1;
  animation: dominanceScoreBlink 1.05s ease-in-out infinite;
}

#scoreUI.scoreGaugeUI.score-p1-leading::before {
  clip-path: inset(0 calc(100% - var(--dominance-ui-fill)) 0 0 round 24px);
  background:
    linear-gradient(90deg,
      rgba(63, 169, 255, 0.62) 0%,
      rgba(125, 199, 255, 0.46) 34%,
      rgba(174, 220, 255, 0.22) 68%,
      rgba(174, 220, 255, 0.00) 100%);
  box-shadow: inset 0 0 32px rgba(125,199,255,0.38);
}

#scoreUI.scoreGaugeUI.score-p2-leading::before {
  clip-path: inset(0 0 0 calc(100% - var(--dominance-ui-fill)) round 24px);
  background:
    linear-gradient(270deg,
      rgba(255, 82, 126, 0.60) 0%,
      rgba(255, 146, 184, 0.46) 34%,
      rgba(255, 193, 214, 0.22) 68%,
      rgba(255, 193, 214, 0.00) 100%);
  box-shadow: inset 0 0 32px rgba(255,146,184,0.38);
}

#scoreUI.scoreGaugeUI.dominance-score-active .scoreTopRow,
#scoreUI.scoreGaugeUI.dominance-score-active .scoreGaugeWrap,
#scoreUI.scoreGaugeUI.dominance-score-active .scoreCard {
  position: relative;
  z-index: 1;
}

#scoreUI.scoreGaugeUI.dominance-score-active .territoryGauge {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.82),
    inset 0 2px 7px rgba(15,23,42,0.08),
    0 0 18px var(--dominance-ui-glow) !important;
  animation: dominanceGaugePulse 1.05s ease-in-out infinite;
}

#scoreUI.scoreGaugeUI.score-p1-leading #leaderText {
  color: #1d6fae !important;
  text-shadow: 0 0 12px rgba(125,199,255,0.42);
}

#scoreUI.scoreGaugeUI.score-p2-leading #leaderText {
  color: #b93b72 !important;
  text-shadow: 0 0 12px rgba(255,146,184,0.42);
}

#scoreUI.scoreGaugeUI.dominance-score-fade::before {
  opacity: 0 !important;
  animation: none !important;
}

@keyframes dominanceScoreBlink {
  0%, 100% { opacity: .52; filter: saturate(1.02) brightness(1); }
  50% { opacity: .95; filter: saturate(1.18) brightness(1.08); }
}

@keyframes dominanceGaugePulse {
  0%, 100% { transform: translateZ(0) scale(1); }
  50% { transform: translateZ(0) scale(1.012); }
}

body.dark-mode #scoreUI.scoreGaugeUI.score-p1-leading::before {
  background:
    linear-gradient(90deg,
      rgba(63, 169, 255, 0.52) 0%,
      rgba(125, 199, 255, 0.38) 34%,
      rgba(174, 220, 255, 0.20) 68%,
      rgba(174, 220, 255, 0.00) 100%);
}

body.dark-mode #scoreUI.scoreGaugeUI.score-p2-leading::before {
  background:
    linear-gradient(270deg,
      rgba(255, 82, 126, 0.52) 0%,
      rgba(255, 146, 184, 0.38) 34%,
      rgba(255, 193, 214, 0.20) 68%,
      rgba(255, 193, 214, 0.00) 100%);
}




/* ver134 2P 컬러패널 폭 보정 */
.playerSelectWrap{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:12px !important;}
.playerSelectBox{box-sizing:border-box !important;min-width:0 !important;width:100% !important;}
.palette{grid-template-columns:repeat(6,minmax(0,34px)) !important;justify-content:center !important;}

/* ===== 요청 수정: 1P/2P 우세 화면 외곽 라인 색상 강화 ===== */
#dominanceEdgeOverlay {
  --dominance-alpha: 0.72 !important;
  filter: saturate(1.35) contrast(1.08) !important;
}

#dominanceEdgeOverlay::before {
  background:
    linear-gradient(to bottom, rgba(var(--dominance-color), var(--dominance-alpha)) 0%, rgba(var(--dominance-color), 0.36) 3.2%, transparent 11.5%),
    linear-gradient(to top, rgba(var(--dominance-color), var(--dominance-alpha)) 0%, rgba(var(--dominance-color), 0.36) 3.2%, transparent 11.5%),
    linear-gradient(to right, rgba(var(--dominance-color), var(--dominance-alpha)) 0%, rgba(var(--dominance-color), 0.36) 3.2%, transparent 11.5%),
    linear-gradient(to left, rgba(var(--dominance-color), var(--dominance-alpha)) 0%, rgba(var(--dominance-color), 0.36) 3.2%, transparent 11.5%) !important;
}

#dominanceEdgeOverlay::after {
  box-shadow:
    inset 0 0 0 7px rgba(var(--dominance-color), 0.78),
    inset 0 0 28px rgba(var(--dominance-color), 0.54),
    inset 0 0 74px rgba(var(--dominance-color), 0.34) !important;
  opacity: 1 !important;
}

#dominanceEdgeOverlay.p1 {
  --dominance-color: 0, 102, 255 !important; /* stronger blue */
}

#dominanceEdgeOverlay.p2 {
  --dominance-color: 230, 0, 48 !important; /* stronger red */
}


/* ===== ver82: 초콜릿 스킨 + 다크모드 스킨 아이콘 동일 표시 ===== */
.selectedPreview[data-skin="chocolate"] {
  background:
    linear-gradient(90deg, transparent 48%, rgba(255,225,185,0.55) 48%, rgba(255,225,185,0.55) 52%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(255,225,185,0.55) 48%, rgba(255,225,185,0.55) 52%, transparent 52%),
    radial-gradient(circle at 30% 24%, rgba(255,235,205,0.85), transparent 17%),
    linear-gradient(135deg, #8b4a25 0%, #5a2f18 44%, #2b1309 100%) !important;
  position: relative;
}
.colorChip[data-skin="chocolate"],
body.dark-mode .lobbyCard button.colorChip[data-skin="chocolate"],
body.dark-mode .colorChip[data-skin="chocolate"] {
  background:
    linear-gradient(90deg, transparent 48%, rgba(255,225,185,0.55) 48%, rgba(255,225,185,0.55) 52%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(255,225,185,0.55) 48%, rgba(255,225,185,0.55) 52%, transparent 52%),
    radial-gradient(circle at 30% 24%, rgba(255,235,205,0.85), transparent 17%),
    linear-gradient(135deg, #8b4a25 0%, #5a2f18 44%, #2b1309 100%) !important;
}

.selectedPreview[data-skin="chess"] {
  background:
    radial-gradient(circle at 58% 34%, #f8fafc 0 8%, transparent 9%),
    linear-gradient(135deg, transparent 0 36%, rgba(248,250,252,0.92) 37% 52%, transparent 53%),
    repeating-conic-gradient(#f8fafc 0% 25%, #111827 0% 50%) 50% / 50% 50% !important;
  position: relative;
}
.selectedPreview[data-skin="chess"]::after {
  content: "♞";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f8fafc;
  font-size: 23px;
  line-height: 1;
  text-shadow: 0 2px 0 #020617, 0 0 8px rgba(2,6,23,0.55);
}
.colorChip[data-skin="chess"],
body.dark-mode .lobbyCard button.colorChip[data-skin="chess"],
body.dark-mode .colorChip[data-skin="chess"] {
  background:
    radial-gradient(circle at 58% 34%, #f8fafc 0 8%, transparent 9%),
    linear-gradient(135deg, transparent 0 36%, rgba(248,250,252,0.92) 37% 52%, transparent 53%),
    repeating-conic-gradient(#f8fafc 0% 25%, #111827 0% 50%) 50% / 50% 50% !important;
}
.colorChip[data-skin="chess"]::after {
  content: "♞";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f8fafc;
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 2px 0 #020617, 0 0 7px rgba(2,6,23,0.60);
}

/* 스킨 아이콘은 다크모드에서도 라이트모드와 같은 색/테두리/그림자로 고정 */
body.dark-mode .lobbyCard button.colorChip,
body.dark-mode .colorChip,
body.dark-mode .skinPalette .colorChip {
  color: transparent !important;
  border: 2px solid rgba(255,255,255,0.92) !important;
  box-shadow: 0 5px 12px rgba(15,23,42,0.14), inset 0 0 0 1px rgba(255,255,255,0.35) !important;
  filter: none !important;
}
body.dark-mode .lobbyCard button.colorChip.selected,
body.dark-mode .colorChip.selected,
body.dark-mode .skinPalette .colorChip.selected {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.34), 0 8px 18px rgba(15,23,42,0.16), inset 0 0 0 1px rgba(255,255,255,0.4) !important;
}
body.dark-mode .colorChip.locked {
  filter: grayscale(0.8) brightness(0.82) !important;
  opacity: 0.48 !important;
}
body.dark-mode .colorChip.locked::before {
  background: rgba(17, 24, 39, 0.44) !important;
  color: #ffffff !important;
}
body.dark-mode .selectedPreview {
  box-shadow: 0 8px 18px rgba(15,23,42,0.12), inset 0 0 0 2px rgba(255,255,255,0.7) !important;
}


/* ===== ver83: 다크모드에서도 스킨 아이콘 라인/패턴 라이트모드와 동일 고정 ===== */
body.dark-mode .skinPalette .colorChip,
body.dark-mode .lobbyCard .skinPalette button.colorChip,
body.dark-mode #lobby .lobbyCard .skinPalette button.colorChip {
  color: transparent !important;
  border: 2px solid rgba(255,255,255,0.92) !important;
  box-shadow: 0 5px 12px rgba(15,23,42,0.14), inset 0 0 0 1px rgba(255,255,255,0.35) !important;
  filter: none !important;
}

body.dark-mode .skinPalette .colorChip[data-skin="gift"],
body.dark-mode .lobbyCard .skinPalette button.colorChip[data-skin="gift"],
body.dark-mode #lobby .lobbyCard .skinPalette button.colorChip[data-skin="gift"] {
  background:
    linear-gradient(90deg, transparent 42%, rgba(255,255,255,0.92) 42%, rgba(255,255,255,0.92) 58%, transparent 58%),
    linear-gradient(0deg, transparent 42%, rgba(255,255,255,0.92) 42%, rgba(255,255,255,0.92) 58%, transparent 58%),
    var(--chip-color) !important;
}

body.dark-mode .skinPalette .colorChip[data-skin="ice"],
body.dark-mode .lobbyCard .skinPalette button.colorChip[data-skin="ice"],
body.dark-mode #lobby .lobbyCard .skinPalette button.colorChip[data-skin="ice"] {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.78) 0 8%, transparent 8% 28%, rgba(255,255,255,0.42) 28% 35%, transparent 35% 100%),
    var(--chip-color) !important;
}

body.dark-mode .skinPalette .colorChip[data-skin="rainbow"],
body.dark-mode .lobbyCard .skinPalette button.colorChip[data-skin="rainbow"],
body.dark-mode #lobby .lobbyCard .skinPalette button.colorChip[data-skin="rainbow"] {
  background:
    conic-gradient(#ff3b30, #ff9500, #ffd60a, #34c759, #0a84ff, #3348ff, #af52de, #ff3b30) !important;
}

body.dark-mode .skinPalette .colorChip[data-skin="chocolate"],
body.dark-mode .lobbyCard .skinPalette button.colorChip[data-skin="chocolate"],
body.dark-mode #lobby .lobbyCard .skinPalette button.colorChip[data-skin="chocolate"] {
  background:
    linear-gradient(90deg, transparent 48%, rgba(255,225,185,0.55) 48%, rgba(255,225,185,0.55) 52%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(255,225,185,0.55) 48%, rgba(255,225,185,0.55) 52%, transparent 52%),
    radial-gradient(circle at 30% 24%, rgba(255,235,205,0.85), transparent 17%),
    linear-gradient(135deg, #8b4a25 0%, #5a2f18 44%, #2b1309 100%) !important;
}

body.dark-mode .skinPalette .colorChip[data-skin="extreme"],
body.dark-mode .lobbyCard .skinPalette button.colorChip[data-skin="extreme"],
body.dark-mode #lobby .lobbyCard .skinPalette button.colorChip[data-skin="extreme"] {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.88), transparent 18%),
    conic-gradient(from 20deg, #843cff, #d8b4fe, #5b21b6, #1a073f, #843cff) !important;
}

body.dark-mode .skinPalette .colorChip[data-skin="hell"],
body.dark-mode .lobbyCard .skinPalette button.colorChip[data-skin="hell"],
body.dark-mode #lobby .lobbyCard .skinPalette button.colorChip[data-skin="hell"] {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,176,0,0.95), transparent 16%),
    conic-gradient(from 18deg, #2a0000, #7f0d00, #ff4b1f, #ffb000, #510000, #2a0000) !important;
}

body.dark-mode .skinPalette .colorChip[data-skin="chaos"],
body.dark-mode .lobbyCard .skinPalette button.colorChip[data-skin="chaos"],
body.dark-mode #lobby .lobbyCard .skinPalette button.colorChip[data-skin="chaos"] {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,255,204,0.16) 1px, transparent 1px),
    radial-gradient(circle at 30% 25%, rgba(0,255,120,0.94), transparent 17%),
    conic-gradient(from 25deg, #001b0b, #005a24, #00ff78, #00ffcc, #003016, #001b0b) !important;
  background-size: 10px 10px, 10px 10px, 100% 100%, 100% 100% !important;
}

body.dark-mode .skinPalette .colorChip[data-skin="ghost"],
body.dark-mode .lobbyCard .skinPalette button.colorChip[data-skin="ghost"],
body.dark-mode #lobby .lobbyCard .skinPalette button.colorChip[data-skin="ghost"] {
  background:
    radial-gradient(circle at 34% 36%, #1f2937 0 5%, transparent 6%),
    radial-gradient(circle at 64% 36%, #1f2937 0 5%, transparent 6%),
    radial-gradient(circle at 50% 64%, rgba(31,41,55,0.72) 0 7%, transparent 8%),
    linear-gradient(180deg, #f8fafc 0%, #d7dce5 76%, #bfc5cf 100%) !important;
}

body.dark-mode .skinPalette .colorChip.locked {
  filter: grayscale(0.8) brightness(0.82) !important;
  opacity: 0.48 !important;
}



/* ===== 요청 수정: 카운트다운 조작법 풀배열 키보드 안내 ===== */
#countdownControlGuide {
  display: none;
  width: min(1120px, calc(100vw - 48px));
  margin-top: 16px;
  padding: 18px 20px 20px;
  border-radius: 28px;
  background: rgba(17,24,39,0.78);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 44px rgba(15,23,42,0.16), inset 0 0 0 1px rgba(255,255,255,0.08);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  color: #ffffff;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
}

#countdownOverlay.classic-mode #countdownControlGuide,
#countdownOverlay.item-mode #countdownControlGuide,
#countdownOverlay.ghost-mode #countdownControlGuide {
  display: flex;
}

.controlKeyboardTitle {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
}

.controlKeyboardTitle strong {
  display: block;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.controlKeyboardTitle span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,0.68);
  font-weight: 750;
}

.playerKeyLabels {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.playerKeyLabel {
  min-width: 118px;
  padding: 9px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  text-align: left;
}

.playerKeyLabel b {
  display: block;
  font-size: 12px;
  font-weight: 950;
  margin-bottom: 3px;
}

.playerKeyLabel span {
  display: block;
  font-size: 11px;
  font-weight: 850;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
}

.keyboardFullArt {
  --key: 31px;
  --gap: 5px;
  --line: rgba(255,255,255,0.62);
  --muted: rgba(255,255,255,0.28);
  --p1: #79c7ff;
  --p2: #ff7fa8;
  width: 100%;
  padding: 14px;
  border: 2px solid rgba(255,255,255,0.72);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
  box-sizing: border-box;
  overflow: hidden;
}

.keyboardSections {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  transform-origin: top center;
}

.kbBlock {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.kbRow {
  display: flex;
  gap: var(--gap);
  height: var(--key);
}

.keyCap {
  width: var(--key);
  height: var(--key);
  box-sizing: border-box;
  border: 1.7px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  background: rgba(255,255,255,0.02);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035);
  user-select: none;
}

.keyCap.sm { font-size: 7.5px; }
.keyCap.w12 { width: calc(var(--key) * 1.2 + var(--gap) * 0.2); }
.keyCap.w14 { width: calc(var(--key) * 1.4 + var(--gap) * 0.4); }
.keyCap.w15 { width: calc(var(--key) * 1.5 + var(--gap) * 0.5); }
.keyCap.w16 { width: calc(var(--key) * 1.6 + var(--gap) * 0.6); }
.keyCap.w18 { width: calc(var(--key) * 1.8 + var(--gap) * 0.8); }
.keyCap.w20 { width: calc(var(--key) * 2 + var(--gap)); }
.keyCap.w22 { width: calc(var(--key) * 2.2 + var(--gap) * 1.2); }
.keyCap.w24 { width: calc(var(--key) * 2.4 + var(--gap) * 1.4); }
.keyCap.space { width: calc(var(--key) * 6.2 + var(--gap) * 5.2); }
.keyCap.empty { opacity: 0; border-color: transparent; background: transparent; box-shadow: none; }
.keyCap.plus { height: calc(var(--key) * 2 + var(--gap)); }
.keyCap.enterTall { height: calc(var(--key) * 2 + var(--gap)); }
.keyCap.zero { width: calc(var(--key) * 2 + var(--gap)); }

.numpadGrid {
  display: grid;
  grid-template-columns: repeat(4, var(--key));
  grid-template-rows: repeat(5, var(--key));
  gap: var(--gap);
}

.numpadGrid .plus { grid-row: span 2; }
.numpadGrid .enterTall { grid-row: span 2; }
.numpadGrid .zero { grid-column: span 2; width: auto; }

.keyCap.p1Key,
.keyCap.p2Key {
  color: #ffffff;
  font-size: 10px;
  border-color: #ffffff;
  background: rgba(255,255,255,0.14);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.16), 0 0 18px rgba(255,255,255,0.24), inset 0 0 0 1px rgba(255,255,255,0.08);
}

.keyCap.p1Key {
  outline: 2px solid rgba(121,199,255,0.82);
  outline-offset: 2px;
  text-shadow: 0 0 8px rgba(121,199,255,0.72);
}

.keyCap.p2Key {
  outline: 2px solid rgba(255,127,168,0.82);
  outline-offset: 2px;
  text-shadow: 0 0 8px rgba(255,127,168,0.72);
}

.keyboardLegendInline {
  display: none;
}

#countdownOverlay.ghost-mode #countdownControlGuide {
  background: rgba(12,14,20,0.62) !important;
  border-color: rgba(255,255,255,0.12) !important;
  transition: opacity .62s ease, transform .62s ease, filter .62s ease;
}

#countdownOverlay.ghost-count-3 #countdownControlGuide {
  opacity: 0.82;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

#countdownOverlay.ghost-count-2 #countdownControlGuide {
  opacity: 0.42;
  transform: translateY(10px) scale(0.985);
  filter: blur(1px);
}

#countdownOverlay.ghost-count-1 #countdownControlGuide,
#countdownOverlay.ghost-count-start #countdownControlGuide {
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  filter: blur(4px);
  pointer-events: none;
}

@media (max-width: 1180px) {
  .keyboardFullArt { --key: 27px; --gap: 4px; padding: 12px; }
  .keyboardSections { gap: 10px; }
  .keyCap { border-radius: 6px; font-size: 8px; }
  .keyCap.p1Key, .keyCap.p2Key { font-size: 9px; }
}

@media (max-width: 940px) {
  #countdownControlGuide {
    width: min(620px, calc(100vw - 40px));
    padding: 16px;
  }
  .controlKeyboardTitle {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .playerKeyLabels {
    justify-content: center;
  }
  .keyboardFullArt {
    --key: 25px;
    --gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 16px;
  }
  .keyboardSections {
    width: max-content;
    min-width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .playerKeyLabels { flex-direction: column; }
  .playerKeyLabel { width: 100%; box-sizing: border-box; text-align: center; }
  .keyboardFullArt { --key: 23px; --gap: 3px; }
}

@media (max-height: 760px) {
  #countNumber { font-size: 92px !important; }
  #countdownControlGuide { margin-top: 10px; padding: 12px 16px; gap: 10px; }
  .keyboardFullArt { --key: 24px; --gap: 3px; padding: 10px; }
  .controlKeyboardTitle strong { font-size: 16px; }
  .controlKeyboardTitle span { font-size: 11px; }
  .playerKeyLabel { padding: 7px 10px; }
}


/* ===== 요청 수정: 아이템 오브젝트 직관화에 맞춘 카운트다운 아이콘 ===== */
.itemGuideIcon.area { background: #34c759; }
.itemGuideIcon.area::before {
  width: 36px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(#ffffff,#ffffff) 0 0/10px 8px no-repeat,
    linear-gradient(#ffffff,#ffffff) 13px 0/10px 8px no-repeat,
    linear-gradient(#ffffff,#ffffff) 26px 0/10px 8px no-repeat,
    linear-gradient(#ffffff,#ffffff) 0 11px/10px 8px no-repeat,
    linear-gradient(#ffffff,#ffffff) 13px 11px/10px 8px no-repeat,
    linear-gradient(#ffffff,#ffffff) 26px 11px/10px 8px no-repeat,
    linear-gradient(#ffffff,#ffffff) 0 22px/10px 8px no-repeat,
    linear-gradient(#ffffff,#ffffff) 13px 22px/10px 8px no-repeat,
    linear-gradient(#ffffff,#ffffff) 26px 22px/10px 8px no-repeat !important;
}
.itemGuideIcon.area::after {
  width: 4px !important;
  height: 36px !important;
  background: #ffffff !important;
  transform: translate(-50%,-72%) !important;
  box-shadow: 13px -10px 0 8px rgba(255,255,255,0.92) !important;
}
.itemGuideIcon.speed { background: #ffcc00; }
.itemGuideIcon.speed::before {
  width: 22px !important;
  height: 44px !important;
  background: #ffffff !important;
  clip-path: polygon(58% 0, 12% 50%, 45% 47%, 28% 100%, 92% 38%, 58% 42%) !important;
  transform: translate(-34%,-50%) !important;
}
.itemGuideIcon.speed::after {
  width: 26px !important;
  height: 5px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  transform: translate(-92%,-50%) !important;
  box-shadow: -6px -13px 0 rgba(255,255,255,0.74), -2px 13px 0 rgba(255,255,255,0.74) !important;
}
.itemGuideIcon.shield { background: #0a84ff; }
.itemGuideIcon.line { background: #ff3b30; }
.itemGuideIcon.line::before {
  width: 36px !important;
  height: 30px !important;
  border-radius: 0 !important;
  background:
    linear-gradient(#ffffff,#ffffff) 0 0/10px 8px no-repeat,
    linear-gradient(#ffffff,#ffffff) 13px 0/10px 8px no-repeat,
    linear-gradient(#ffffff,#ffffff) 26px 0/10px 8px no-repeat,
    linear-gradient(#ffffff,#ffffff) 0 11px/10px 8px no-repeat,
    linear-gradient(#ffffff,#ffffff) 13px 11px/10px 8px no-repeat,
    linear-gradient(#ffffff,#ffffff) 26px 11px/10px 8px no-repeat,
    linear-gradient(#ffffff,#ffffff) 0 22px/10px 8px no-repeat,
    linear-gradient(#ffffff,#ffffff) 13px 22px/10px 8px no-repeat,
    linear-gradient(#ffffff,#ffffff) 26px 22px/10px 8px no-repeat !important;
  box-shadow: none !important;
}
.itemGuideIcon.line::after {
  width: 0 !important;
  height: 0 !important;
  border-left: 13px solid transparent !important;
  border-right: 13px solid transparent !important;
  border-bottom: 18px solid #ffffff !important;
  border-top: 0 !important;
  transform: translate(-50%,-94%) !important;
}



/* ===== 요청 수정: 스피드/보호막 아이템 오브젝트 단독 아이콘화 ===== */
.itemGuideIcon.speed,
.itemGuideIcon.shield {
  background: transparent !important;
  box-shadow: none !important;
}
.itemGuideIcon.speed::before {
  width: 31px !important;
  height: 48px !important;
  border-radius: 0 !important;
  background: #ffcc00 !important;
  clip-path: polygon(58% 0%, 8% 52%, 42% 49%, 27% 100%, 94% 39%, 57% 43%) !important;
  box-shadow: 0 0 18px rgba(255,204,0,0.55) !important;
  transform: translate(-50%,-50%) !important;
}
.itemGuideIcon.speed::after {
  display: none !important;
}
.itemGuideIcon.shield::before {
  width: 42px !important;
  height: 48px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0a84ff !important;
  clip-path: polygon(50% 0%, 88% 16%, 82% 62%, 50% 100%, 18% 62%, 12% 16%) !important;
  box-shadow: 0 0 18px rgba(10,132,255,0.48) !important;
}
.itemGuideIcon.shield::after {
  width: 52px !important;
  height: 52px !important;
  border: 2px solid rgba(10,132,255,0.42) !important;
  border-radius: 50% !important;
  background: transparent !important;
  transform: translate(-50%,-50%) scaleY(0.72) !important;
}



/* ===== 요청 수정: 실제 거대화 아이템 오브젝트에 맞춘 카운트다운 아이콘 ===== */
.itemGuideIcon.line {
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  perspective: 220px !important;
  filter: drop-shadow(0 8px 14px rgba(15,23,42,0.18)) !important;
  animation: giantGuideCubeGrow 2.4s ease-in-out infinite !important;
  transform-origin: 50% 54% !important;
}

.itemGuideIcon.line::before {
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.88), rgba(255,255,255,0.05) 34%, rgba(0,0,0,0.08) 100%),
    linear-gradient(135deg, #7dc7ff 0%, #7dc7ff 49%, #55aef2 50%, #55aef2 100%) !important;
  clip-path: none !important;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.72),
    inset -7px -8px 12px rgba(0,0,0,0.10),
    0 0 0 1px rgba(255,255,255,0.58) !important;
  transform: translate(-50%,-43%) rotate(-7deg) !important;
  animation: giantGuideCubeSkinFront 1.2s steps(1, end) infinite !important;
}

.itemGuideIcon.line::after {
  width: 34px !important;
  height: 16px !important;
  border: 0 !important;
  border-radius: 7px 7px 4px 4px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,255,255,0.20)),
    #a9dcff !important;
  clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.66),
    inset -5px -4px 8px rgba(0,0,0,0.08) !important;
  transform: translate(-50%,-132%) rotate(-7deg) skewX(-18deg) !important;
  animation: giantGuideCubeSkinTop 1.2s steps(1, end) infinite !important;
}

@keyframes giantGuideCubeGrow {
  0%   { transform: scale(0.78) translateY(3px); }
  100% { transform: scale(1.16) translateY(-2px); }
}

@keyframes giantGuideCubeSkinFront {
  0%, 49.99% {
    background:
      linear-gradient(145deg, rgba(255,255,255,0.88), rgba(255,255,255,0.05) 34%, rgba(0,0,0,0.08) 100%),
      linear-gradient(135deg, #7dc7ff 0%, #7dc7ff 49%, #55aef2 50%, #55aef2 100%) !important;
  }
  50%, 100% {
    background:
      linear-gradient(145deg, rgba(255,255,255,0.88), rgba(255,255,255,0.05) 34%, rgba(0,0,0,0.08) 100%),
      linear-gradient(135deg, #ff92b8 0%, #ff92b8 49%, #f06a9d 50%, #f06a9d 100%) !important;
  }
}

@keyframes giantGuideCubeSkinTop {
  0%, 49.99% {
    background:
      linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,255,255,0.20)),
      #a9dcff !important;
  }
  50%, 100% {
    background:
      linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,255,255,0.20)),
      #ffc1d6 !important;
  }
}



/* ===== 요청 수정: 영역확장 카운트다운 아이콘 흰색 라인 제거 ===== */
.itemGuideIcon.area {
  background: #34c759 !important;
  box-shadow: 0 8px 18px rgba(52,199,89,0.24) !important;
  overflow: hidden !important;
}

.itemGuideIcon.area::before {
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background:
    linear-gradient(135deg, #63e282, #1fa94f) 0 0 / 11px 11px no-repeat,
    linear-gradient(135deg, #42d96b, #18a447) 13px 0 / 11px 11px no-repeat,
    linear-gradient(135deg, #63e282, #1fa94f) 26px 0 / 11px 11px no-repeat,
    linear-gradient(135deg, #42d96b, #18a447) 0 13px / 11px 11px no-repeat,
    linear-gradient(135deg, #7af091, #25b956) 13px 13px / 11px 11px no-repeat,
    linear-gradient(135deg, #42d96b, #18a447) 26px 13px / 11px 11px no-repeat,
    linear-gradient(135deg, #63e282, #1fa94f) 0 26px / 11px 11px no-repeat,
    linear-gradient(135deg, #42d96b, #18a447) 13px 26px / 11px 11px no-repeat,
    linear-gradient(135deg, #63e282, #1fa94f) 26px 26px / 11px 11px no-repeat !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 5px 10px rgba(0,0,0,0.10) !important;
}

.itemGuideIcon.area::after {
  display: none !important;
  content: none !important;
}

body.dark-mode .itemGuideIcon.area {
  background: #34c759 !important;
  box-shadow: 0 8px 18px rgba(52,199,89,0.24) !important;
}


#countRule:empty {
  display: none !important;
}



/* ===== 요청 수정: QHD 기준 UI 자동 스케일링 ===== */
:root {
  --ui-scale: 1;
  --ui-edge: 18px;
  --ui-bgm-bottom: 66px;
  --ui-message-hidden-scale: 0.96;
}

#scoreUI {
  top: var(--ui-edge) !important;
  right: var(--ui-edge) !important;
  transform: scale(var(--ui-scale)) !important;
  transform-origin: top right !important;
}

#pauseMenuButton {
  left: var(--ui-edge) !important;
  top: var(--ui-edge) !important;
  transform: scale(var(--ui-scale)) !important;
  transform-origin: top left !important;
}

#themeToggle {
  left: var(--ui-edge) !important;
  bottom: var(--ui-edge) !important;
  transform: scale(var(--ui-scale)) !important;
  transform-origin: bottom left !important;
}

#soundToggle {
  left: var(--ui-edge) !important;
  bottom: var(--ui-bgm-bottom) !important;
  transform: scale(var(--ui-scale)) !important;
  transform-origin: bottom left !important;
}

#buffUI {
  top: var(--ui-edge) !important;
  transform: translateX(-50%) scale(var(--ui-scale)) !important;
  transform-origin: top center !important;
}

#lobby .lobbyCard {
  transform: scale(var(--ui-scale)) !important;
  transform-origin: center center !important;
}

#countdownScaleRoot {
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform: scale(var(--ui-scale));
  transform-origin: center center;
  pointer-events: auto;
}

#message {
  transform: translate(-50%, -50%) scale(var(--ui-message-hidden-scale)) !important;
  transform-origin: center center !important;
}

#message.show {
  transform: translate(-50%, -50%) scale(var(--ui-scale)) !important;
}

.helpPopup,
.privacyPopup,
.pausePanel {
  transform: scale(var(--ui-scale));
  transform-origin: center center;
}



/* ===== 요청 수정: 카오스 난이도 카드 + AI 난이도 7개 한 줄 배열 ===== */
.lobbyCard {
  width: min(960px, calc(100vw - 42px)) !important;
}

.aiDifficultyWrap,
.aiDifficultyWrap.show {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 8px 0 8px !important;
}

.lobbyCard .aiDifficultyButton,
#lobby .lobbyCard button.aiDifficultyButton {
  min-width: 0 !important;
  padding: 10px 7px !important;
  border-radius: 15px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.04em !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* 카오스 기본 카드: 디지털 오류 초록 */
.lobbyCard .aiDifficultyButton:nth-child(7),
#lobby .lobbyCard button.aiDifficultyButton:nth-child(7) {
  color: #021b0b !important;
  border: 2px solid rgba(0,255,120,0.88) !important;
  background:
    linear-gradient(90deg, rgba(0,255,120,0.22) 0 2px, transparent 2px 7px),
    linear-gradient(0deg, rgba(0,255,120,0.12) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 30% 18%, rgba(185,255,210,0.72), transparent 34%),
    linear-gradient(135deg, rgba(0,255,120,0.34), rgba(8,255,170,0.18) 42%, rgba(0,70,34,0.28)) !important;
  box-shadow:
    0 0 0 1px rgba(0,255,120,0.20),
    0 0 12px rgba(0,255,120,0.32),
    inset 0 0 0 1px rgba(225,255,235,0.46) !important;
  text-shadow: 0 0 8px rgba(0,255,120,0.58) !important;
  animation: chaosDifficultyCardGlitch 1.35s steps(2, end) infinite;
}

.lobbyCard .aiDifficultyButton:nth-child(7).selected,
#lobby .lobbyCard button.aiDifficultyButton:nth-child(7).selected {
  color: #001706 !important;
  border-color: rgba(0,255,120,1) !important;
  background:
    linear-gradient(90deg, rgba(0,255,120,0.36) 0 3px, transparent 3px 8px),
    linear-gradient(0deg, rgba(0,255,120,0.18) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 42% 10%, rgba(220,255,230,0.82), transparent 32%),
    linear-gradient(135deg, rgba(0,255,120,0.48), rgba(0,215,110,0.32), rgba(0,82,42,0.34)) !important;
  box-shadow:
    0 0 0 3px rgba(0,255,120,0.34),
    0 0 22px rgba(0,255,120,0.62),
    0 0 44px rgba(0,255,120,0.34),
    0 12px 24px rgba(15,23,42,0.12),
    inset 0 0 0 1px rgba(235,255,240,0.78) !important;
  animation: chaosDifficultyCardGlitch 0.75s steps(2, end) infinite, chaosDifficultyPulse 1.1s ease-in-out infinite !important;
}

body.dark-mode .lobbyCard .aiDifficultyButton:nth-child(7),
body.dark-mode #lobby .lobbyCard button.aiDifficultyButton:nth-child(7),
body.ghost-mode-lock .lobbyCard .aiDifficultyButton:nth-child(7),
body.ghost-mode-lock #lobby .lobbyCard button.aiDifficultyButton:nth-child(7) {
  color: #caffd8 !important;
  border-color: rgba(0,255,120,0.92) !important;
  background:
    linear-gradient(90deg, rgba(0,255,120,0.18) 0 2px, transparent 2px 7px),
    linear-gradient(0deg, rgba(0,255,120,0.10) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 28% 18%, rgba(0,255,120,0.30), transparent 38%),
    linear-gradient(135deg, rgba(0,70,34,0.82), rgba(0,30,18,0.90)) !important;
  box-shadow:
    0 0 0 1px rgba(0,255,120,0.18),
    0 0 16px rgba(0,255,120,0.34),
    inset 0 0 0 1px rgba(0,255,120,0.22) !important;
  text-shadow: 0 0 10px rgba(0,255,120,0.72) !important;
}

@keyframes chaosDifficultyCardGlitch {
  0%, 100% { transform: translate(0, 0); filter: hue-rotate(0deg) saturate(1.12); }
  20% { transform: translate(1px, 0); filter: hue-rotate(8deg) saturate(1.35); }
  40% { transform: translate(-1px, 1px); }
  60% { transform: translate(0, -1px); filter: hue-rotate(-8deg) saturate(1.45); }
  80% { transform: translate(1px, 1px); }
}

@keyframes chaosDifficultyPulse {
  0%, 100% { filter: brightness(1) saturate(1.22); }
  50% { filter: brightness(1.18) saturate(1.55); }
}

@media (max-width: 980px) {
  .lobbyCard {
    width: min(860px, calc(100vw - 30px)) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .lobbyCard .aiDifficultyButton,
  #lobby .lobbyCard button.aiDifficultyButton {
    padding: 9px 5px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 720px) {
  .aiDifficultyWrap,
  .aiDifficultyWrap.show {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ===== 요청 수정: 카오스 난이도 카드 선택 시에만 디지털 초록 활성화 ===== */
.lobbyCard .aiDifficultyButton:nth-child(7):not(.selected),
#lobby .lobbyCard button.aiDifficultyButton:nth-child(7):not(.selected) {
  color: #111827 !important;
  background: rgba(255,255,255,0.58) !important;
  border: 1px solid rgba(0,255,120,0.26) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.58), 0 8px 18px rgba(15,23,42,0.08) !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
}

body.dark-mode .lobbyCard .aiDifficultyButton:nth-child(7):not(.selected),
body.dark-mode #lobby .lobbyCard button.aiDifficultyButton:nth-child(7):not(.selected),
body.ghost-mode-lock .lobbyCard .aiDifficultyButton:nth-child(7):not(.selected),
body.ghost-mode-lock #lobby .lobbyCard button.aiDifficultyButton:nth-child(7):not(.selected) {
  color: var(--text-main) !important;
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(0,255,120,0.24) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 8px 18px rgba(0,0,0,0.16) !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
}

.lobbyCard .aiDifficultyButton:nth-child(7).selected,
#lobby .lobbyCard button.aiDifficultyButton:nth-child(7).selected {
  color: #001706 !important;
  border: 2px solid rgba(0,255,120,1) !important;
  background:
    linear-gradient(90deg, rgba(0,255,120,0.36) 0 3px, transparent 3px 8px),
    linear-gradient(0deg, rgba(0,255,120,0.18) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 42% 10%, rgba(220,255,230,0.82), transparent 32%),
    linear-gradient(135deg, rgba(0,255,120,0.48), rgba(0,215,110,0.32), rgba(0,82,42,0.34)) !important;
  box-shadow:
    0 0 0 3px rgba(0,255,120,0.34),
    0 0 22px rgba(0,255,120,0.62),
    0 0 44px rgba(0,255,120,0.34),
    0 12px 24px rgba(15,23,42,0.12),
    inset 0 0 0 1px rgba(235,255,240,0.78) !important;
  text-shadow: 0 0 8px rgba(0,255,120,0.58) !important;
  animation: chaosDifficultyCardGlitch 0.75s steps(2, end) infinite, chaosDifficultyPulse 1.1s ease-in-out infinite !important;
}

body.dark-mode .lobbyCard .aiDifficultyButton:nth-child(7).selected,
body.dark-mode #lobby .lobbyCard button.aiDifficultyButton:nth-child(7).selected,
body.ghost-mode-lock .lobbyCard .aiDifficultyButton:nth-child(7).selected,
body.ghost-mode-lock #lobby .lobbyCard button.aiDifficultyButton:nth-child(7).selected {
  color: #caffd8 !important;
  border-color: rgba(0,255,120,1) !important;
  background:
    linear-gradient(90deg, rgba(0,255,120,0.22) 0 2px, transparent 2px 7px),
    linear-gradient(0deg, rgba(0,255,120,0.12) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 30% 18%, rgba(0,255,120,0.42), transparent 38%),
    linear-gradient(135deg, rgba(0,95,44,0.90), rgba(0,30,18,0.96)) !important;
  box-shadow:
    0 0 0 3px rgba(0,255,120,0.26),
    0 0 24px rgba(0,255,120,0.48),
    inset 0 0 0 1px rgba(0,255,120,0.35) !important;
  text-shadow: 0 0 10px rgba(0,255,120,0.72) !important;
}



/* ===== 요청 수정: 로비 패널 680px 복귀 + AI 난이도 캐러셀 선택 ===== */
#lobby .lobbyCard,
.lobbyCard {
  width: min(680px, calc(100vw - 42px)) !important;
  padding: 42px 38px 34px !important;
  border-radius: 34px !important;
}

.aiDifficultyWrap,
.aiDifficultyWrap.show {
  display: none !important;
}

.aiDifficultyWrap.show.aiDifficultyCarousel {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 10px 0 8px !important;
}

.aiDifficultyViewport {
  overflow: hidden;
  min-width: 0;
  border-radius: 20px;
}

.aiDifficultyTrack {
  display: flex;
  width: 100%;
  transition: transform .24s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

.lobbyCard .aiDifficultyTrack .aiDifficultyButton,
#lobby .lobbyCard .aiDifficultyTrack button.aiDifficultyButton {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  min-height: 50px !important;
  padding: 13px 16px !important;
  border-radius: 20px !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.aiDifficultyArrow,
#lobby .lobbyCard button.aiDifficultyArrow {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  background: rgba(255,255,255,0.66) !important;
  color: #111827 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.58), 0 8px 18px rgba(15,23,42,0.08) !important;
}

.aiDifficultyArrow:disabled,
#lobby .lobbyCard button.aiDifficultyArrow:disabled {
  opacity: .28 !important;
  cursor: default !important;
  transform: none !important;
}

.aiDifficultyDots {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 6px;
  min-height: 8px;
  margin-top: 2px;
}

.aiDifficultyDot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(17,24,39,0.22);
  transition: width .18s ease, opacity .18s ease, background .18s ease;
}

.aiDifficultyDot.active {
  width: 18px;
  background: rgba(0,122,255,0.78);
}

.aiDifficultyDot.locked {
  opacity: .34;
}

.lobbyCard .aiDifficultyButton.locked,
#lobby .lobbyCard button.aiDifficultyButton.locked {
  opacity: .48 !important;
  cursor: not-allowed !important;
  filter: grayscale(.16) !important;
}

.lobbyCard .aiDifficultyButton.locked::after,
#lobby .lobbyCard button.aiDifficultyButton.locked::after {
  content: attr(data-unlock-label);
  display: block;
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 750;
  color: rgba(17,24,39,0.58);
  white-space: normal;
}

body.dark-mode .aiDifficultyArrow,
body.dark-mode #lobby .lobbyCard button.aiDifficultyArrow,
body.ghost-mode-lock .aiDifficultyArrow,
body.ghost-mode-lock #lobby .lobbyCard button.aiDifficultyArrow {
  background: rgba(255,255,255,0.08) !important;
  color: var(--text-main) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 8px 18px rgba(0,0,0,0.16) !important;
}

body.dark-mode .aiDifficultyDot,
body.ghost-mode-lock .aiDifficultyDot {
  background: rgba(255,255,255,0.24);
}

body.dark-mode .aiDifficultyDot.active,
body.ghost-mode-lock .aiDifficultyDot.active {
  background: rgba(142,232,255,0.86);
}

body.dark-mode .lobbyCard .aiDifficultyButton.locked::after,
body.dark-mode #lobby .lobbyCard button.aiDifficultyButton.locked::after,
body.ghost-mode-lock .lobbyCard .aiDifficultyButton.locked::after,
body.ghost-mode-lock #lobby .lobbyCard button.aiDifficultyButton.locked::after {
  color: rgba(245,247,251,0.62);
}

@media (max-width: 980px) {
  #lobby .lobbyCard,
  .lobbyCard {
    width: min(680px, calc(100vw - 30px)) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (max-width: 720px) {
  .aiDifficultyWrap.show.aiDifficultyCarousel {
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  }
  .aiDifficultyArrow,
  #lobby .lobbyCard button.aiDifficultyArrow {
    width: 38px !important;
    height: 38px !important;
    font-size: 24px !important;
  }
  .lobbyCard .aiDifficultyTrack .aiDifficultyButton,
  #lobby .lobbyCard .aiDifficultyTrack button.aiDifficultyButton {
    min-height: 46px !important;
    font-size: 14px !important;
  }
}


/* ===== 요청 수정: 스킨 선택 캐러셀 + AI 난이도 카드 축소 ===== */
.aiDifficultyWrap.show.aiDifficultyCarousel {
  grid-template-columns: 34px minmax(0, 280px) 34px !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: 7px !important;
  margin: 8px auto 6px !important;
}

.aiDifficultyViewport {
  width: min(280px, 100%) !important;
  border-radius: 16px !important;
}

.lobbyCard .aiDifficultyTrack .aiDifficultyButton,
#lobby .lobbyCard .aiDifficultyTrack button.aiDifficultyButton {
  min-height: 40px !important;
  padding: 9px 12px !important;
  border-radius: 16px !important;
  font-size: 13px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
}

.aiDifficultyArrow,
#lobby .lobbyCard button.aiDifficultyArrow {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  font-size: 22px !important;
}

.aiDifficultyDots {
  margin-top: -1px !important;
  gap: 5px !important;
}

.aiDifficultyDot {
  width: 5px !important;
  height: 5px !important;
}

.skinPalette {
  width: min(190px, 100%) !important;
  min-height: 44px !important;
}

.skinCarousel {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) 30px !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: min(190px, 100%) !important;
  margin: 0 auto !important;
}

.skinViewport {
  overflow: hidden !important;
  min-width: 0 !important;
  border-radius: 999px !important;
}

.skinTrack {
  display: flex !important;
  width: 100% !important;
  transition: transform .24s cubic-bezier(.2,.8,.2,1) !important;
  will-change: transform !important;
}

.lobbyCard .skinCarousel button.skinChoiceButton,
#lobby .lobbyCard .skinCarousel button.skinChoiceButton,
.skinCarousel button.skinChoiceButton {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 9px 0 38px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.74) !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.70) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  text-align: left !important;
  position: relative !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.lobbyCard .skinCarousel button.skinChoiceButton::before,
#lobby .lobbyCard .skinCarousel button.skinChoiceButton::before,
.skinCarousel button.skinChoiceButton::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--chip-color);
  border: 2px solid rgba(255,255,255,0.94);
  box-shadow: 0 3px 8px rgba(15,23,42,0.14), inset 0 0 0 1px rgba(255,255,255,0.35);
}

/* 기존 스킨 패턴을 캐러셀 버튼 안의 미리보기에도 적용 */
.skinChoiceButton[data-skin="gift"]::before {
  background:
    linear-gradient(90deg, transparent 42%, rgba(255,255,255,0.92) 42%, rgba(255,255,255,0.92) 58%, transparent 58%),
    linear-gradient(0deg, transparent 42%, rgba(255,255,255,0.92) 42%, rgba(255,255,255,0.92) 58%, transparent 58%),
    var(--chip-color) !important;
}
.skinChoiceButton[data-skin="ice"]::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.78) 0 8%, transparent 8% 28%, rgba(255,255,255,0.42) 28% 35%, transparent 35% 100%),
    var(--chip-color) !important;
}
.skinChoiceButton[data-skin="rainbow"]::before {
  background: conic-gradient(#ff3b30, #ff9500, #ffd60a, #34c759, #0a84ff, #3348ff, #af52de, #ff3b30) !important;
}
.skinChoiceButton[data-skin="ghost"]::before {
  background: radial-gradient(circle at 42% 34%, #ffffff 0 23%, #dfe3ea 24% 54%, #8d96a6 55% 100%) !important;
}
.skinChoiceButton[data-skin="chocolate"]::before {
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,0.20) 0 8%, transparent 9%),
    linear-gradient(135deg, #7b3f1d, #3b1d0f) !important;
}
.skinChoiceButton[data-skin="extreme"]::before {
  background: var(--chip-color) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.92), 0 0 11px rgba(132,60,255,0.70) !important;
}
.skinChoiceButton[data-skin="hell"]::before {
  background: var(--chip-color) !important;
  box-shadow: 0 0 0 2px rgba(255,230,180,0.92), 0 0 11px rgba(255,75,31,0.86) !important;
}
.skinChoiceButton[data-skin="chaos"]::before {
  background: var(--chip-color) !important;
  box-shadow: 0 0 0 2px rgba(0,255,120,0.45), 0 0 12px rgba(0,255,120,0.70) !important;
}

.lobbyCard .skinCarousel button.skinChoiceButton.selected,
#lobby .lobbyCard .skinCarousel button.skinChoiceButton.selected,
.skinCarousel button.skinChoiceButton.selected {
  border-color: rgba(0,122,255,0.70) !important;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.18), inset 0 0 0 1px rgba(255,255,255,0.82) !important;
}

.lobbyCard .skinCarousel button.skinChoiceButton.locked,
#lobby .lobbyCard .skinCarousel button.skinChoiceButton.locked,
.skinCarousel button.skinChoiceButton.locked {
  opacity: .54 !important;
  filter: grayscale(.35) !important;
}

.skinChoiceButton.locked::after {
  content: "🔒";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
}

.lobbyCard button.skinArrowBtn,
#lobby .lobbyCard button.skinArrowBtn,
.skinArrowBtn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(17,24,39,0.88) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(15,23,42,0.12) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.lobbyCard button.skinArrowBtn:disabled,
#lobby .lobbyCard button.skinArrowBtn:disabled,
.skinArrowBtn:disabled {
  opacity: .28 !important;
  cursor: default !important;
}

.skinDots {
  grid-column: 1 / -1;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  height: 7px !important;
  margin-top: -1px !important;
}

.skinDot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(17,24,39,0.22);
}

.skinDot.active {
  width: 13px;
  background: rgba(0,122,255,0.78);
}

.skinDot.locked {
  opacity: .36;
}

body.dark-mode .lobbyCard .skinCarousel button.skinChoiceButton,
body.dark-mode #lobby .lobbyCard .skinCarousel button.skinChoiceButton,
body.dark-mode .skinCarousel button.skinChoiceButton {
  background: rgba(255,255,255,0.08) !important;
  color: var(--text-main) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

body.dark-mode .lobbyCard button.skinArrowBtn,
body.dark-mode #lobby .lobbyCard button.skinArrowBtn,
body.dark-mode .skinArrowBtn {
  background: rgba(245,247,251,0.92) !important;
  color: #111827 !important;
}

body.dark-mode .skinDot {
  background: rgba(245,247,251,0.28);
}

body.dark-mode .skinDot.active {
  background: rgba(142,232,255,0.86);
}

@media (max-width: 720px) {
  .aiDifficultyWrap.show.aiDifficultyCarousel {
    grid-template-columns: 32px minmax(0, 240px) 32px !important;
  }
  .aiDifficultyViewport {
    width: min(240px, 100%) !important;
  }
}


/* ===== 요청 수정: 스킨 캐러셀 UI를 단색 색상 캐러셀과 동일 규격으로 통일 ===== */
.skinPalette.skinCarousel,
#lobby .skinPalette.skinCarousel {
  display: grid !important;
  grid-template-columns: 34px minmax(118px, 1fr) 34px !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: min(214px, 100%) !important;
  min-height: 0 !important;
  margin: 8px auto 6px !important;
  padding: 7px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.62) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.58), 0 8px 18px rgba(15,23,42,0.08) !important;
}

.skinViewport,
#lobby .skinViewport {
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 14px !important;
}

.lobbyCard .skinCarousel button.skinChoiceButton,
#lobby .lobbyCard .skinCarousel button.skinChoiceButton,
.skinCarousel button.skinChoiceButton {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px 0 44px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  line-height: 38px !important;
}

.lobbyCard .skinCarousel button.skinChoiceButton::before,
#lobby .lobbyCard .skinCarousel button.skinChoiceButton::before,
.skinCarousel button.skinChoiceButton::before {
  left: 8px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
}

.lobbyCard button.skinArrowBtn,
#lobby .lobbyCard button.skinArrowBtn,
.skinArrowBtn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 11px !important;
}

.skinDots {
  gap: 5px !important;
  height: 8px !important;
  margin-top: 0 !important;
}

.skinDot {
  width: 5px !important;
  height: 5px !important;
}

.skinDot.active {
  width: 14px !important;
}

body.dark-mode .skinPalette.skinCarousel,
body.dark-mode #lobby .skinPalette.skinCarousel {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 8px 18px rgba(0,0,0,0.18) !important;
}


/* ===== 요청 수정: AI 카오스 난이도 카운트다운 디지털 오류/해킹 연출 ===== */
#countdownOverlay.chaos-countdown {
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(0,255,135,0.18), transparent 28%),
    radial-gradient(circle at 82% 70%, rgba(0,122,255,0.16), transparent 34%),
    linear-gradient(180deg, rgba(1,8,6,0.94), rgba(0,0,0,0.90)) !important;
  color: #b8ffd8 !important;
  text-shadow: 0 0 12px rgba(0,255,120,0.65);
  animation: chaosScreenJitter .38s steps(2, end) infinite;
}

#countdownOverlay.chaos-countdown::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  opacity: .74;
  background:
    repeating-linear-gradient(0deg, rgba(0,255,120,0.00) 0 5px, rgba(0,255,120,0.12) 6px, rgba(0,0,0,0.26) 8px),
    repeating-linear-gradient(90deg, rgba(0,255,120,0.10) 0 1px, transparent 1px 42px),
    linear-gradient(90deg, transparent 0%, rgba(0,255,120,0.18) 48%, transparent 52%);
  mix-blend-mode: screen;
  animation: chaosScanline 1.15s linear infinite, chaosDataSlide 2.4s linear infinite;
}

#countdownOverlay.chaos-countdown::after {
  content: "SYSTEM BREACH  //  AI CHAOS MODE  //  01001100  10100111  00xERROR";
  position: absolute;
  left: 50%;
  top: 7.5%;
  z-index: 3;
  width: min(960px, calc(100vw - 48px));
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 999px;
  color: #001a08;
  background: rgba(0,255,120,0.82);
  border: 1px solid rgba(190,255,215,0.86);
  box-shadow: 0 0 28px rgba(0,255,120,0.36), inset 0 0 0 1px rgba(255,255,255,0.34);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  text-shadow: none;
  animation: chaosWarningGlitch .7s steps(2, end) infinite;
}

#countdownOverlay.chaos-countdown #countNumber {
  position: relative;
  z-index: 2;
  color: #b8ffd8 !important;
  text-shadow:
    2px 0 0 rgba(255,0,95,0.72),
    -2px 0 0 rgba(0,180,255,0.72),
    0 0 28px rgba(0,255,120,0.78) !important;
  animation: chaosNumberGlitch .52s steps(2, end) infinite;
}

#countdownOverlay.chaos-countdown #countNumber::before,
#countdownOverlay.chaos-countdown #countNumber::after {
  content: attr(data-chaos-text);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
  opacity: .72;
  overflow: hidden;
}

#countdownOverlay.chaos-countdown #countNumber::before {
  color: rgba(255,0,95,0.86);
  transform: translate(-7px, -2px);
  clip-path: inset(0 0 48% 0);
  animation: chaosSliceA .43s steps(2, end) infinite;
}

#countdownOverlay.chaos-countdown #countNumber::after {
  color: rgba(0,205,255,0.86);
  transform: translate(7px, 2px);
  clip-path: inset(52% 0 0 0);
  animation: chaosSliceB .37s steps(2, end) infinite;
}

#countdownOverlay.chaos-countdown #countRule,
#countdownOverlay.chaos-countdown #classicCountdownGuide,
#countdownOverlay.chaos-countdown #ghostCountdownGuide,
#countdownOverlay.chaos-countdown #itemCountdownGuide {
  position: relative;
  z-index: 2;
  filter: contrast(1.18) saturate(1.25);
}

#countdownOverlay.chaos-countdown #classicCountdownGuide,
#countdownOverlay.chaos-countdown #ghostCountdownGuide,
#countdownOverlay.chaos-countdown #itemCountdownGuide {
  background: rgba(0, 18, 8, 0.66) !important;
  border-color: rgba(0,255,120,0.38) !important;
  box-shadow: 0 0 36px rgba(0,255,120,0.16), inset 0 0 0 1px rgba(0,255,120,0.16) !important;
}

#countdownOverlay.chaos-countdown .classicGuideStep,
#countdownOverlay.chaos-countdown .itemGuideCard {
  background: rgba(0, 34, 16, 0.62) !important;
  border-color: rgba(0,255,120,0.24) !important;
}

#countdownOverlay.chaos-countdown .classicGuideTitle strong,
#countdownOverlay.chaos-countdown .classicGuideStep b,
#countdownOverlay.chaos-countdown .itemGuideText strong {
  color: #caffdc !important;
}

#countdownOverlay.chaos-countdown .classicGuideTitle span,
#countdownOverlay.chaos-countdown .classicGuideStep span,
#countdownOverlay.chaos-countdown .itemGuideText span {
  color: rgba(202,255,220,0.78) !important;
}

@keyframes chaosScreenJitter {
  0%, 100% { transform: translate(0,0); filter: hue-rotate(0deg); }
  35% { transform: translate(1px,-1px); filter: hue-rotate(8deg); }
  70% { transform: translate(-1px,1px); filter: hue-rotate(-8deg); }
}

@keyframes chaosScanline {
  0% { transform: translateY(-3%); }
  100% { transform: translateY(3%); }
}

@keyframes chaosDataSlide {
  0% { background-position: 0 0, 0 0, -80vw 0; }
  100% { background-position: 0 80px, 42px 0, 80vw 0; }
}

@keyframes chaosNumberGlitch {
  0%, 100% { transform: translate(0,0) skewX(0deg); }
  22% { transform: translate(-4px,2px) skewX(4deg); }
  48% { transform: translate(5px,-1px) skewX(-5deg); }
  76% { transform: translate(-2px,0) skewX(2deg); }
}

@keyframes chaosSliceA {
  0%, 100% { transform: translate(-6px,-2px); }
  50% { transform: translate(10px,1px); }
}

@keyframes chaosSliceB {
  0%, 100% { transform: translate(7px,2px); }
  50% { transform: translate(-9px,-1px); }
}

@keyframes chaosWarningGlitch {
  0%, 100% { transform: translateX(-50%); opacity: .92; }
  35% { transform: translateX(calc(-50% - 6px)); opacity: .72; }
  70% { transform: translateX(calc(-50% + 5px)); opacity: 1; }
}

@media (max-width: 720px) {
  #countdownOverlay.chaos-countdown::after {
    top: 5%;
    font-size: 10px;
    letter-spacing: .04em;
  }
}

/* ===== 요청 수정: 카오스 카운트다운 2초부터 해킹 침식 연출 ===== */
#countdownOverlay.chaos-countdown.chaos-breach {
  animation:
    chaosBootCrash .22s steps(2, end) 0s 7,
    chaosScreenJitter .34s steps(2, end) .9s infinite !important;
}

#countdownOverlay.chaos-countdown.chaos-breach::before {
  opacity: .86;
  animation:
    chaosBreachStatic .16s steps(2, end) 0s 10,
    chaosScanline .82s linear .9s infinite,
    chaosDataSlide 1.75s linear .9s infinite !important;
}

#countdownOverlay.chaos-countdown.chaos-breach::after {
  content: "BREACH DETECTED  //  COUNTDOWN HIJACKED  //  AI CHAOS MODE  //  160BPM";
  animation:
    chaosWarningGlitch .18s steps(2, end) 0s 8,
    chaosWarningGlitch .55s steps(2, end) 1.1s infinite !important;
}

#countdownOverlay.chaos-countdown.chaos-count-2 #countNumber {
  animation:
    chaosNumberBoot .20s steps(2, end) 0s 8,
    chaosNumberGlitch .50s steps(2, end) 1s infinite !important;
}

#countdownOverlay.chaos-countdown.chaos-count-1 #countNumber,
#countdownOverlay.chaos-countdown.chaos-count-start #countNumber {
  animation: chaosNumberGlitch .28s steps(2, end) infinite !important;
}

#countdownOverlay.chaos-countdown.chaos-count-start::after {
  content: "SYSTEM OVERRIDE COMPLETE  //  RUN CHAOS.EXE  //  START";
}

@keyframes chaosBootCrash {
  0% { transform: translate(0,0); filter: brightness(1) contrast(1.05); }
  20% { transform: translate(-9px, 3px); filter: brightness(1.55) contrast(1.5) hue-rotate(24deg); }
  42% { transform: translate(7px, -5px); filter: brightness(.72) contrast(1.85) hue-rotate(-18deg); }
  64% { transform: translate(-4px, 2px); filter: brightness(1.28) contrast(1.35); }
  100% { transform: translate(0,0); filter: brightness(1) contrast(1.08); }
}

@keyframes chaosBreachStatic {
  0%, 100% {
    opacity: .38;
    transform: translate(0,0) scale(1);
    filter: contrast(1.1);
  }
  33% {
    opacity: 1;
    transform: translate(-18px, 7px) scale(1.015);
    filter: contrast(2.4);
  }
  66% {
    opacity: .82;
    transform: translate(14px, -5px) scale(1.02);
    filter: contrast(1.8) hue-rotate(22deg);
  }
}

@keyframes chaosNumberBoot {
  0%, 100% { transform: translate(0,0) skewX(0deg); opacity: 1; }
  20% { transform: translate(-18px,2px) skewX(12deg); opacity: .58; }
  42% { transform: translate(15px,-4px) skewX(-16deg); opacity: 1; }
  64% { transform: translate(-7px,5px) skewX(8deg); opacity: .76; }
}



/* ===== 요청 수정: 로봇청소기 아이템 UI/오브젝트 안내 ===== */
#itemCountdownGuide {
  width: min(1160px, calc(100vw - 56px)) !important;
}

.itemGuideCard {
  max-width: 232px !important;
}

.itemGuideIcon.summon {
  background: linear-gradient(145deg, #7c3cff, #00ffcc) !important;
  overflow: hidden;
}

.itemGuideIcon.summon::before {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 4px solid #ffffff;
  box-shadow: 0 0 0 8px rgba(255,255,255,0.18);
}

.itemGuideIcon.summon::after {
  width: 42px;
  height: 6px;
  border-radius: 999px;
  background: #ffffff;
  transform: translate(-50%, -50%) rotate(-22deg);
  box-shadow: 0 -16px 0 rgba(255,255,255,0.58), 0 16px 0 rgba(255,255,255,0.46);
}

@media (max-width: 1100px) {
  #countdownOverlay.item-mode #itemCountdownGuide {
    flex-wrap: wrap;
  }
}


/* ===== 요청 수정: 모바일 전용 UI 레이어 + PC/패드 권장 안내 ===== */
.mobileRecommendNotice {
  display: none;
  width: fit-content;
  max-width: min(520px, calc(100vw - 44px));
  margin: 0 auto 10px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(17,24,39,0.08);
  border: 1px solid rgba(17,24,39,0.08);
  color: var(--text-sub);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.mobile-device .mobileRecommendNotice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.dark-mode .mobileRecommendNotice {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.12);
  color: var(--text-sub);
}

#mobileControlLayer {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 35;
  display: none;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 0 18px calc(18px + env(safe-area-inset-bottom));
  pointer-events: none;
  box-sizing: border-box;
}

body.mobile-device.mobile-controls-active #mobileControlLayer {
  display: flex;
}

.mobilePad,
.mobileActionStack {
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.mobilePad {
  display: grid;
  grid-template-columns: repeat(3, 54px);
  grid-template-rows: repeat(3, 54px);
  gap: 7px;
  padding: 10px;
  border-radius: 26px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 18px 44px rgba(15,23,42,0.12), inset 0 0 0 1px rgba(255,255,255,0.56);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.mobilePadLabel {
  grid-column: 1 / 4;
  height: 18px;
  margin-top: -2px;
  color: rgba(17,24,39,0.58);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.mobilePadBtn,
.mobileActionBtn {
  border: 0;
  color: #111827;
  background: rgba(255,255,255,0.72);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 7px 14px rgba(15,23,42,0.10);
  font-weight: 950;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.mobilePadBtn {
  border-radius: 18px;
  font-size: 22px;
}

.mobilePadBtn:active,
.mobilePadBtn.pressed,
.mobileActionBtn:active,
.mobileActionBtn.pressed {
  transform: scale(0.94);
  background: rgba(0,122,255,0.16);
}

.mobilePadBtn.up { grid-column: 2; grid-row: 2; }
.mobilePadBtn.left { grid-column: 1; grid-row: 3; }
.mobilePadBtn.down { grid-column: 2; grid-row: 3; }
.mobilePadBtn.right { grid-column: 3; grid-row: 3; }

.mobileActionStack {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 112px;
  padding: 10px;
  border-radius: 24px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 18px 44px rgba(15,23,42,0.12), inset 0 0 0 1px rgba(255,255,255,0.56);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.mobileActionBtn {
  min-height: 46px;
  border-radius: 17px;
  font-size: 13px;
  line-height: 1.1;
}

.mobileActionBtn span {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  opacity: .58;
}

body.dark-mode #mobileControlLayer .mobilePad,
body.dark-mode #mobileControlLayer .mobileActionStack {
  background: rgba(28,31,38,0.66);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 18px 44px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.06);
}

body.dark-mode .mobilePadLabel { color: rgba(245,247,251,0.62); }
body.dark-mode .mobilePadBtn,
body.dark-mode .mobileActionBtn {
  color: #f5f7fb;
  background: rgba(255,255,255,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 7px 14px rgba(0,0,0,0.18);
}

@media (max-width: 760px) {
  body.mobile-device #lobby {
    align-items: flex-start;
    overflow-y: auto;
    padding: calc(16px + env(safe-area-inset-top)) 0 calc(110px + env(safe-area-inset-bottom));
    box-sizing: border-box;
  }

  body.mobile-device #lobby .lobbyCard {
    width: min(520px, calc(100vw - 28px)) !important;
    padding: 24px 18px 22px !important;
    transform: none !important;
  }

  body.mobile-device .titleLoop {
    min-height: 54px;
    margin-bottom: 2px;
  }

  body.mobile-device .titleRollText {
    font-size: 39px !important;
  }

  body.mobile-device .lobbyCard p {
    font-size: 14px !important;
    margin: 10px 0 14px !important;
  }

  body.mobile-device .playerSelectWrap {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.mobile-device .playerSelectBox {
    padding: 14px 12px !important;
    border-radius: 22px !important;
  }

  body.mobile-device .modeSelectWrap,
  body.mobile-device .matchSelectWrap {
    grid-template-columns: 1fr !important;
  }

  body.mobile-device #countdownControlGuide {
    display: none !important;
  }

  body.mobile-device #countNumber {
    font-size: 104px !important;
  }

  body.mobile-device #classicCountdownGuide,
  body.mobile-device #ghostCountdownGuide,
  body.mobile-device #itemCountdownGuide {
    max-height: 52vh;
    overflow-y: auto;
  }
}

@media (max-width: 620px) {
  #mobileControlLayer {
    padding-left: 10px;
    padding-right: 10px;
    gap: 8px;
  }

  .mobilePad {
    grid-template-columns: repeat(3, 46px);
    grid-template-rows: repeat(3, 46px);
    gap: 6px;
    padding: 8px;
    border-radius: 22px;
  }

  .mobileActionStack {
    width: 94px;
    padding: 8px;
  }

  .mobileActionBtn {
    min-height: 42px;
    font-size: 12px;
  }
}


/* ===== ver144: 모바일 가로모드 고정 안내 + 로비 한 화면 최적화 ===== */
#mobileOrientationOverlay {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  color: #111827;
  background: radial-gradient(circle at 50% 18%, rgba(255,255,255,0.96), rgba(236,240,245,0.96));
  text-align: center;
  pointer-events: auto;
}

.mobileRotateCard {
  width: min(360px, calc(100vw - 44px));
  padding: 26px 24px;
  border-radius: 28px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 24px 70px rgba(15,23,42,0.16), inset 0 0 0 1px rgba(255,255,255,0.62);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.mobileRotateIcon {
  width: 74px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 14px;
  border: 4px solid #111827;
  position: relative;
  animation: mobileRotateHint 1.45s ease-in-out infinite;
}

.mobileRotateIcon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 38px;
  height: 18px;
  border-bottom: 4px solid #111827;
  border-radius: 0 0 999px 999px;
  transform: translateX(-50%);
  opacity: .28;
}

.mobileRotateCard strong {
  display: block;
  margin-top: 20px;
  font-size: 22px;
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.mobileRotateCard span {
  display: block;
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.45;
  color: #6b7280;
  font-weight: 750;
}

@keyframes mobileRotateHint {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(90deg) scale(1.02); }
}

body.mobile-device.mobile-portrait #mobileOrientationOverlay {
  display: flex;
}

body.mobile-device.mobile-portrait #mobileControlLayer {
  display: none !important;
}

body.dark-mode #mobileOrientationOverlay {
  color: #f5f7fb;
  background: radial-gradient(circle at 50% 18%, rgba(28,31,38,0.96), rgba(7,8,12,0.96));
}

body.dark-mode .mobileRotateCard {
  background: rgba(28,31,38,0.78);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 24px 70px rgba(0,0,0,0.34), inset 0 0 0 1px rgba(255,255,255,0.06);
}

body.dark-mode .mobileRotateIcon { border-color: #f5f7fb; }
body.dark-mode .mobileRotateIcon::after { border-bottom-color: #f5f7fb; }
body.dark-mode .mobileRotateCard span { color: #a4aab8; }

body.mobile-device.mobile-landscape #lobby {
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: max(4px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  box-sizing: border-box !important;
}

body.mobile-device.mobile-landscape #lobby .lobbyCard {
  width: min(920px, calc(100vw - 16px)) !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100vh - 10px) !important;
  padding: 10px 14px 9px !important;
  border-radius: 22px !important;
  transform: scale(var(--mobile-lobby-scale, 1)) !important;
  transform-origin: center center !important;
  overflow: visible !important;
}

body.mobile-device.mobile-landscape .lobbyHelpButton,
body.mobile-device.mobile-landscape .lobbyLangButton,
body.mobile-device.mobile-landscape .lobbyPrivacyButton {
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  min-height: 27px !important;
  padding: 0 !important;
  font-size: 12px !important;
  border-radius: 999px !important;
}

body.mobile-device.mobile-landscape .lobbyKicker {
  display: none !important;
}

body.mobile-device.mobile-landscape .mobileRecommendNotice {
  display: inline-flex !important;
  margin: 0 auto 2px !important;
  padding: 4px 9px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  border-radius: 999px !important;
}

body.mobile-device.mobile-landscape .titleLoop {
  min-height: 34px !important;
  height: 34px !important;
  margin: 0 auto 1px !important;
}

body.mobile-device.mobile-landscape .titleRollText {
  font-size: 30px !important;
  line-height: 1 !important;
}

body.mobile-device.mobile-landscape .titleRollChar {
  animation-duration: 1.9s !important;
}

body.mobile-device.mobile-landscape .lobbyCard > p {
  display: none !important;
}

body.mobile-device.mobile-landscape .matchSelectWrap,
body.mobile-device.mobile-landscape .modeSelectWrap {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 5px 0 !important;
}

body.mobile-device.mobile-landscape .modeSelectWrap {
  padding-top: 21px !important;
}

body.mobile-device.mobile-landscape .matchButton,
body.mobile-device.mobile-landscape .modeButton,
body.mobile-device.mobile-landscape #lobby .lobbyCard button.matchButton,
body.mobile-device.mobile-landscape #lobby .lobbyCard button.modeButton {
  min-height: 0 !important;
  padding: 7px 9px !important;
  border-radius: 14px !important;
  font-size: 10px !important;
  line-height: 1.12 !important;
}

body.mobile-device.mobile-landscape .matchButton strong,
body.mobile-device.mobile-landscape .modeButton strong {
  font-size: 12px !important;
  margin-bottom: 2px !important;
}

body.mobile-device.mobile-landscape .matchButton span,
body.mobile-device.mobile-landscape .modeButton span {
  font-size: 9px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.mobile-device.mobile-landscape .ghostToggleBox.ghostMiniToggle {
  top: -5px !important;
  right: 0 !important;
  width: 52px !important;
  height: 25px !important;
  padding: 0 6px !important;
}

body.mobile-device.mobile-landscape .ghostLineIcon {
  width: 18px !important;
  height: 18px !important;
}

body.mobile-device.mobile-landscape .ghostToggleBox.ghostMiniToggle input {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  border-radius: 4px !important;
}

body.mobile-device.mobile-landscape .aiDifficultyWrap {
  margin: 4px auto !important;
  min-height: 32px !important;
  max-width: min(520px, calc(100vw - 60px)) !important;
}

body.mobile-device.mobile-landscape .aiDifficultyViewport {
  height: 32px !important;
}

body.mobile-device.mobile-landscape .aiDifficultyButton {
  min-height: 30px !important;
  padding: 6px 10px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
}

body.mobile-device.mobile-landscape .aiDifficultyArrow {
  width: 28px !important;
  height: 28px !important;
  font-size: 20px !important;
}

body.mobile-device.mobile-landscape .aiDifficultyDots {
  display: none !important;
}

body.mobile-device.mobile-landscape .playerSelectWrap {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin: 6px 0 4px !important;
}

body.mobile-device.mobile-landscape .playerSelectBox {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 8px !important;
  row-gap: 4px !important;
  align-items: center !important;
  padding: 8px 9px !important;
  border-radius: 16px !important;
}

body.mobile-device.mobile-landscape .playerSelectTitle {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.05 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

body.mobile-device.mobile-landscape .selectedPreview {
  grid-column: 1 / 2 !important;
  grid-row: 2 / 3 !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  border-radius: 8px !important;
}

body.mobile-device.mobile-landscape .palette,
body.mobile-device.mobile-landscape .skinPalette,
body.mobile-device.mobile-landscape .skinCarousel {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 3 !important;
  margin: 0 !important;
}

body.mobile-device.mobile-landscape .palette {
  grid-template-columns: repeat(3, 24px) !important;
  grid-auto-rows: 24px !important;
  gap: 5px !important;
}

body.mobile-device.mobile-landscape .colorChip,
body.mobile-device.mobile-landscape .lobbyCard .colorChip {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 8px !important;
}

body.mobile-device.mobile-landscape .skinCarouselViewport,
body.mobile-device.mobile-landscape .skinCarouselTrack {
  min-height: 24px !important;
}

body.mobile-device.mobile-landscape .skinChip,
body.mobile-device.mobile-landscape .skinButton,
body.mobile-device.mobile-landscape .skinCarouselButton {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 8px !important;
}

body.mobile-device.mobile-landscape .readyBox {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 2 !important;
  padding: 6px 8px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

body.mobile-device.mobile-landscape .readyHint {
  grid-column: 3 / 4 !important;
  grid-row: 2 / 3 !important;
  margin: 0 !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

body.mobile-device.mobile-landscape #startStatus {
  margin-top: 4px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.mobile-device.mobile-landscape #themeToggle,
body.mobile-device.mobile-landscape #soundToggle {
  transform: scale(.78) !important;
  transform-origin: left bottom !important;
}

@media (max-height: 390px) and (orientation: landscape) {
  body.mobile-device.mobile-landscape #lobby .lobbyCard {
    padding: 7px 12px 6px !important;
  }
  body.mobile-device.mobile-landscape .titleLoop {
    height: 28px !important;
    min-height: 28px !important;
  }
  body.mobile-device.mobile-landscape .titleRollText {
    font-size: 26px !important;
  }
  body.mobile-device.mobile-landscape .matchSelectWrap,
  body.mobile-device.mobile-landscape .modeSelectWrap,
  body.mobile-device.mobile-landscape .playerSelectWrap {
    gap: 5px !important;
    margin-top: 4px !important;
    margin-bottom: 3px !important;
  }
  body.mobile-device.mobile-landscape .matchButton span,
  body.mobile-device.mobile-landscape .modeButton span {
    display: none !important;
  }
}



/* ===== ver145: iPhone SE(667×375) 모바일 로비 재정렬 + 터치 준비 + 원형 조이스틱 ===== */
body.mobile-device.mobile-landscape #lobby {
  padding: max(8px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)) !important;
  box-sizing: border-box !important;
}

body.mobile-device.mobile-landscape #lobby .lobbyCard {
  width: min(604px, calc(100vw - 54px)) !important;
  max-height: calc(100vh - 18px) !important;
  padding: 10px 16px 9px !important;
  border-radius: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  overflow: hidden !important;
  transform: scale(var(--mobile-lobby-scale, 1)) !important;
  transform-origin: center center !important;
}

body.mobile-device.mobile-landscape .mobileRecommendNotice {
  margin: 0 auto 2px !important;
  padding: 4px 10px !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
  max-width: 92% !important;
  white-space: nowrap !important;
}

body.mobile-device.mobile-landscape .lobbyKicker,
body.mobile-device.mobile-landscape .lobbyCard > p {
  display: none !important;
}

body.mobile-device.mobile-landscape .titleLoop {
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 auto 0 !important;
}

body.mobile-device.mobile-landscape .titleRollText,
body.mobile-device.mobile-landscape .lobbyCard h1 {
  font-size: 31px !important;
  line-height: .96 !important;
  letter-spacing: -0.07em !important;
}

body.mobile-device.mobile-landscape .matchSelectWrap,
body.mobile-device.mobile-landscape .modeSelectWrap {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 3px 0 !important;
  padding-top: 0 !important;
}

body.mobile-device.mobile-landscape .modeSelectWrap {
  padding-right: 54px !important;
  position: relative !important;
}

body.mobile-device.mobile-landscape .ghostToggleBox.ghostMiniToggle {
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) scale(.82) !important;
}

body.mobile-device.mobile-landscape .matchButton,
body.mobile-device.mobile-landscape .modeButton,
body.mobile-device.mobile-landscape #lobby .lobbyCard button.matchButton,
body.mobile-device.mobile-landscape #lobby .lobbyCard button.modeButton {
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 14px !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
}

body.mobile-device.mobile-landscape .matchButton strong,
body.mobile-device.mobile-landscape .modeButton strong {
  font-size: 12px !important;
  margin-bottom: 1px !important;
  line-height: 1.05 !important;
}

body.mobile-device.mobile-landscape .matchButton span,
body.mobile-device.mobile-landscape .modeButton span {
  display: block !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.mobile-device.mobile-landscape .playerSelectWrap {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 3px 0 !important;
}

body.mobile-device.mobile-landscape .playerSelectBox {
  min-height: 78px !important;
  padding: 7px 8px !important;
  border-radius: 17px !important;
  display: grid !important;
  grid-template-columns: 44px minmax(88px, 1fr) 82px !important;
  grid-template-rows: 18px 32px 20px !important;
  column-gap: 7px !important;
  row-gap: 2px !important;
  align-items: center !important;
}

body.mobile-device.mobile-landscape .playerSelectTitle {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  opacity: .8 !important;
}

body.mobile-device.mobile-landscape .selectedPreview {
  grid-column: 1 / 2 !important;
  grid-row: 2 / 4 !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 10px !important;
  justify-self: center !important;
}

body.mobile-device.mobile-landscape .palette,
body.mobile-device.mobile-landscape .skinPalette,
body.mobile-device.mobile-landscape .skinCarousel {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 4 !important;
  align-self: center !important;
  justify-self: center !important;
}

body.mobile-device.mobile-landscape .palette {
  grid-template-columns: repeat(3, 22px) !important;
  grid-auto-rows: 22px !important;
  gap: 5px !important;
}

body.mobile-device.mobile-landscape .colorChip,
body.mobile-device.mobile-landscape .lobbyCard .colorChip,
body.mobile-device.mobile-landscape .skinChip,
body.mobile-device.mobile-landscape .skinButton,
body.mobile-device.mobile-landscape .skinCarouselButton {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  border-radius: 7px !important;
}

body.mobile-device.mobile-landscape .readyBox {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 4 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 6px !important;
  border-radius: 15px !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  text-align: center !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.62), 0 8px 16px rgba(15,23,42,0.08) !important;
}

body.mobile-device.mobile-landscape .readyBox::after {
  content: "터치";
  display: block;
  margin-left: 4px;
  font-size: 9px;
  opacity: .55;
  font-weight: 850;
}

body.mobile-device.mobile-landscape .readyBox.ready::after {
  content: "완료";
  opacity: .75;
}

body.mobile-device.mobile-landscape .readyHint {
  display: none !important;
}

body.mobile-device.mobile-landscape #startStatus {
  margin-top: 1px !important;
  min-height: 13px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  opacity: .82 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.mobile-device.mobile-landscape #themeToggle,
body.mobile-device.mobile-landscape #soundToggle,
body.mobile-device.mobile-landscape #languageToggle,
body.mobile-device.mobile-landscape #privacyButton,
body.mobile-device.mobile-landscape #helpButton {
  transform: scale(.68) !important;
  opacity: .78 !important;
}

@media (max-width: 690px) and (max-height: 390px) and (orientation: landscape) {
  body.mobile-device.mobile-landscape #lobby {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  body.mobile-device.mobile-landscape #lobby .lobbyCard {
    width: min(584px, calc(100vw - 70px)) !important;
    padding: 8px 14px 7px !important;
    gap: 4px !important;
  }
  body.mobile-device.mobile-landscape .mobileRecommendNotice {
    font-size: 8.5px !important;
    padding: 3px 8px !important;
  }
  body.mobile-device.mobile-landscape .titleLoop {
    height: 28px !important;
    min-height: 28px !important;
  }
  body.mobile-device.mobile-landscape .titleRollText,
  body.mobile-device.mobile-landscape .lobbyCard h1 {
    font-size: 27px !important;
  }
  body.mobile-device.mobile-landscape .matchButton,
  body.mobile-device.mobile-landscape .modeButton,
  body.mobile-device.mobile-landscape #lobby .lobbyCard button.matchButton,
  body.mobile-device.mobile-landscape #lobby .lobbyCard button.modeButton {
    min-height: 31px !important;
    padding: 6px 9px !important;
  }
  body.mobile-device.mobile-landscape .matchButton span,
  body.mobile-device.mobile-landscape .modeButton span {
    display: none !important;
  }
  body.mobile-device.mobile-landscape .playerSelectBox {
    min-height: 70px !important;
    grid-template-columns: 40px minmax(78px, 1fr) 76px !important;
    grid-template-rows: 16px 29px 18px !important;
    padding: 6px 7px !important;
  }
  body.mobile-device.mobile-landscape .palette {
    grid-template-columns: repeat(3, 20px) !important;
    grid-auto-rows: 20px !important;
    gap: 4px !important;
  }
  body.mobile-device.mobile-landscape .colorChip,
  body.mobile-device.mobile-landscape .lobbyCard .colorChip,
  body.mobile-device.mobile-landscape .skinChip,
  body.mobile-device.mobile-landscape .skinButton,
  body.mobile-device.mobile-landscape .skinCarouselButton {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }
  body.mobile-device.mobile-landscape .selectedPreview {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
  }
}

/* 모바일 인게임 방향키: 원형 조이스틱형 패드 */
body.mobile-device.mobile-controls-active #mobileControlLayer {
  align-items: flex-end !important;
  padding: 0 18px calc(12px + env(safe-area-inset-bottom)) !important;
}

body.mobile-device .mobilePad {
  position: relative !important;
  display: block !important;
  width: 136px !important;
  height: 136px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.86) 0 22px, rgba(255,255,255,.36) 23px 35px, rgba(255,255,255,.68) 36px 100%) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 18px 44px rgba(15,23,42,.13), inset 0 0 0 1px rgba(255,255,255,.58) !important;
}

body.mobile-device .mobilePad::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(17,24,39,.10);
  box-shadow: inset 0 0 0 1px rgba(17,24,39,.06);
  pointer-events: none;
}

body.mobile-device .mobilePadLabel {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  color: rgba(17,24,39,.54) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

body.mobile-device .mobilePadBtn {
  position: absolute !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  font-size: 17px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.mobile-device .mobilePadBtn.up { left: 47px !important; top: 8px !important; }
body.mobile-device .mobilePadBtn.right { right: 8px !important; top: 47px !important; }
body.mobile-device .mobilePadBtn.down { left: 47px !important; bottom: 8px !important; }
body.mobile-device .mobilePadBtn.left { left: 8px !important; top: 47px !important; }

body.mobile-device .mobileActionStack {
  width: 92px !important;
  padding: 8px !important;
  gap: 7px !important;
  border-radius: 22px !important;
}

body.mobile-device .mobileActionBtn {
  min-height: 38px !important;
  border-radius: 15px !important;
  font-size: 11px !important;
}

body.mobile-device .mobileActionBtn span {
  font-size: 9px !important;
}

@media (max-width: 690px) and (max-height: 390px) and (orientation: landscape) {
  body.mobile-device .mobilePad {
    width: 116px !important;
    height: 116px !important;
  }
  body.mobile-device .mobilePad::before,
  body.mobile-device .mobilePadLabel {
    width: 30px !important;
    height: 30px !important;
  }
  body.mobile-device .mobilePadBtn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 15px !important;
  }
  body.mobile-device .mobilePadBtn.up { left: 40px !important; top: 7px !important; }
  body.mobile-device .mobilePadBtn.right { right: 7px !important; top: 40px !important; }
  body.mobile-device .mobilePadBtn.down { left: 40px !important; bottom: 7px !important; }
  body.mobile-device .mobilePadBtn.left { left: 7px !important; top: 40px !important; }
  body.mobile-device .mobileActionStack {
    width: 82px !important;
    padding: 7px !important;
  }
  body.mobile-device .mobileActionBtn {
    min-height: 34px !important;
    font-size: 10px !important;
  }
}

body.dark-mode.mobile-device .mobilePad {
  background:
    radial-gradient(circle at 50% 50%, rgba(245,247,251,.18) 0 22px, rgba(245,247,251,.08) 23px 35px, rgba(28,31,38,.72) 36px 100%) !important;
}

body.dark-mode.mobile-device .mobilePad::before {
  background: rgba(245,247,251,.12);
  box-shadow: inset 0 0 0 1px rgba(245,247,251,.08);
}



/* ===== ver146: 스마트폰 접속 차단 + 태블릿/PC 허용 ===== */
#mobilePhoneBlockOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(22px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.98), rgba(236,240,245,0.98)),
    linear-gradient(180deg, #f8fafc, #eef2f7);
  color: #111827;
  text-align: center;
  pointer-events: auto;
  touch-action: none;
}

.mobilePhoneBlockCard {
  width: min(430px, calc(100vw - 44px));
  padding: 30px 24px;
  border-radius: 30px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 24px 70px rgba(15,23,42,0.16), inset 0 0 0 1px rgba(255,255,255,0.62);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.mobilePhoneBlockIcon {
  width: 54px;
  height: 78px;
  margin: 0 auto 16px;
  border-radius: 18px;
  border: 4px solid #111827;
  position: relative;
  opacity: .9;
}

.mobilePhoneBlockIcon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #111827;
  transform: translateX(-50%);
}

.mobilePhoneBlockIcon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 82px;
  height: 5px;
  border-radius: 999px;
  background: #ff3b30;
  transform: translate(-50%, -50%) rotate(-34deg);
  box-shadow: 0 0 18px rgba(255,59,48,0.28);
}

#mobilePhoneBlockText {
  display: block;
  margin: 0;
  font-size: clamp(20px, 4.8vw, 28px);
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.055em;
}

body.mobile-phone-blocked {
  overflow: hidden !important;
}

body.mobile-phone-blocked #mobilePhoneBlockOverlay {
  display: flex;
}

body.mobile-phone-blocked #mobileOrientationOverlay,
body.mobile-phone-blocked #mobileControlLayer {
  display: none !important;
}

body.dark-mode #mobilePhoneBlockOverlay {
  background:
    radial-gradient(circle at 50% 18%, rgba(28,31,38,0.98), rgba(7,8,12,0.98)),
    linear-gradient(180deg, #1c2230, #050609);
  color: #f5f7fb;
}

body.dark-mode .mobilePhoneBlockCard {
  background: rgba(28,31,38,0.78);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 24px 70px rgba(0,0,0,0.34), inset 0 0 0 1px rgba(255,255,255,0.06);
}

body.dark-mode .mobilePhoneBlockIcon { border-color: #f5f7fb; }
body.dark-mode .mobilePhoneBlockIcon::before { background: #f5f7fb; }



/* ===== ver147: 태블릿 로비 레이아웃 안정화 + 아날로그 조이스틱 ===== */
body.tablet-device.mobile-landscape #lobby {
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)) !important;
  box-sizing: border-box !important;
}

body.tablet-device.mobile-landscape #lobby .lobbyCard {
  width: min(980px, calc(100vw - 44px)) !important;
  max-width: calc(100vw - 44px) !important;
  max-height: calc(100vh - 36px) !important;
  padding: 20px 24px 18px !important;
  border-radius: 30px !important;
  transform: scale(var(--mobile-lobby-scale, 1)) !important;
  transform-origin: center center !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(230px, .82fr) minmax(420px, 1.18fr) !important;
  grid-template-areas:
    "top top"
    "title title"
    "match players"
    "mode players"
    "ai players"
    "status status" !important;
  column-gap: 18px !important;
  row-gap: 10px !important;
  align-items: stretch !important;
}

body.tablet-device.mobile-landscape .lobbyHelpButton,
body.tablet-device.mobile-landscape .lobbyLangButton,
body.tablet-device.mobile-landscape .lobbyPrivacyButton {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  font-size: 15px !important;
  border-radius: 999px !important;
  transform: none !important;
  opacity: 1 !important;
  z-index: 5 !important;
}

body.tablet-device.mobile-landscape .lobbyKicker,
body.tablet-device.mobile-landscape .mobileRecommendNotice {
  grid-area: top !important;
  justify-self: center !important;
  display: inline-flex !important;
  margin: 0 auto !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}

body.tablet-device.mobile-landscape .titleLoop {
  grid-area: title !important;
  min-height: 54px !important;
  height: 54px !important;
  margin: 0 auto 2px !important;
}

body.tablet-device.mobile-landscape .titleRollText,
body.tablet-device.mobile-landscape .lobbyCard h1 {
  font-size: 48px !important;
  line-height: 1 !important;
}

body.tablet-device.mobile-landscape .lobbyCard > p {
  display: none !important;
}

body.tablet-device.mobile-landscape .matchSelectWrap {
  grid-area: match !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
  align-self: stretch !important;
}

body.tablet-device.mobile-landscape .modeSelectWrap {
  grid-area: mode !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
  padding-top: 34px !important;
  align-self: stretch !important;
}

body.tablet-device.mobile-landscape .aiDifficultyWrap {
  grid-area: ai !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 48px !important;
  margin: 0 !important;
  align-self: end !important;
}

body.tablet-device.mobile-landscape .aiDifficultyViewport {
  height: 44px !important;
}

body.tablet-device.mobile-landscape .aiDifficultyButton {
  min-height: 40px !important;
  padding: 8px 14px !important;
  border-radius: 16px !important;
  font-size: 13px !important;
}

body.tablet-device.mobile-landscape .aiDifficultyArrow {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 14px !important;
}

body.tablet-device.mobile-landscape .matchButton,
body.tablet-device.mobile-landscape .modeButton,
body.tablet-device.mobile-landscape #lobby .lobbyCard button.matchButton,
body.tablet-device.mobile-landscape #lobby .lobbyCard button.modeButton {
  min-height: 62px !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  font-size: 13px !important;
  line-height: 1.18 !important;
}

body.tablet-device.mobile-landscape .matchButton strong,
body.tablet-device.mobile-landscape .modeButton strong {
  font-size: 15px !important;
  margin-bottom: 4px !important;
}

body.tablet-device.mobile-landscape .matchButton span,
body.tablet-device.mobile-landscape .modeButton span {
  display: block !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body.tablet-device.mobile-landscape .ghostToggleBox.ghostMiniToggle {
  top: -2px !important;
  right: 0 !important;
  width: 64px !important;
  height: 32px !important;
  padding: 0 8px !important;
}

body.tablet-device.mobile-landscape .ghostLineIcon {
  width: 24px !important;
  height: 24px !important;
}

body.tablet-device.mobile-landscape .playerSelectWrap {
  grid-area: players !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
  align-self: stretch !important;
}

body.tablet-device.mobile-landscape .playerSelectBox {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 52px minmax(130px, 1fr) !important;
  grid-template-rows: auto 54px 1fr auto !important;
  gap: 8px 10px !important;
  align-items: center !important;
  padding: 14px 14px !important;
  border-radius: 24px !important;
}

body.tablet-device.mobile-landscape .playerSelectTitle {
  grid-column: 1 / 3 !important;
  font-size: 15px !important;
  margin: 0 !important;
  text-align: left !important;
}

body.tablet-device.mobile-landscape .selectedPreview {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  border-radius: 16px !important;
}

body.tablet-device.mobile-landscape .palette {
  grid-column: 2 !important;
  grid-row: 2 / 4 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 36px) !important;
  grid-auto-rows: 36px !important;
  gap: 8px !important;
  justify-content: start !important;
  align-content: start !important;
  margin: 0 !important;
}

body.tablet-device.mobile-landscape .colorChip,
body.tablet-device.mobile-landscape .lobbyCard .colorChip,
body.tablet-device.mobile-landscape .skinChip,
body.tablet-device.mobile-landscape .skinButton,
body.tablet-device.mobile-landscape .skinCarouselButton {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 13px !important;
}

body.tablet-device.mobile-landscape .readyBox {
  grid-column: 1 / 3 !important;
  grid-row: 4 !important;
  align-self: end !important;
  justify-self: stretch !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  border-radius: 16px !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  text-align: center !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

body.tablet-device.mobile-landscape .readyHint {
  display: none !important;
}

body.tablet-device.mobile-landscape #startStatus {
  grid-area: status !important;
  margin-top: 0 !important;
  min-height: 18px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.tablet-device.mobile-landscape #themeToggle,
body.tablet-device.mobile-landscape #soundToggle,
body.tablet-device.mobile-landscape #languageToggle,
body.tablet-device.mobile-landscape #privacyButton,
body.tablet-device.mobile-landscape #helpButton {
  transform: none !important;
  opacity: 1 !important;
}

@media (orientation: landscape) and (min-width: 900px) and (max-height: 760px) {
  body.tablet-device.mobile-landscape #lobby .lobbyCard {
    width: min(920px, calc(100vw - 36px)) !important;
    padding: 16px 20px 14px !important;
    row-gap: 8px !important;
    column-gap: 14px !important;
  }
  body.tablet-device.mobile-landscape .titleLoop { height: 46px !important; min-height: 46px !important; }
  body.tablet-device.mobile-landscape .titleRollText,
  body.tablet-device.mobile-landscape .lobbyCard h1 { font-size: 42px !important; }
  body.tablet-device.mobile-landscape .matchButton,
  body.tablet-device.mobile-landscape .modeButton,
  body.tablet-device.mobile-landscape #lobby .lobbyCard button.matchButton,
  body.tablet-device.mobile-landscape #lobby .lobbyCard button.modeButton {
    min-height: 54px !important;
    padding: 10px 12px !important;
  }
  body.tablet-device.mobile-landscape .playerSelectBox {
    padding: 12px !important;
    grid-template-columns: 46px minmax(116px, 1fr) !important;
    grid-template-rows: auto 48px 1fr auto !important;
  }
  body.tablet-device.mobile-landscape .selectedPreview { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; }
  body.tablet-device.mobile-landscape .palette {
    grid-template-columns: repeat(3, 32px) !important;
    grid-auto-rows: 32px !important;
    gap: 7px !important;
  }
  body.tablet-device.mobile-landscape .colorChip,
  body.tablet-device.mobile-landscape .lobbyCard .colorChip,
  body.tablet-device.mobile-landscape .skinChip,
  body.tablet-device.mobile-landscape .skinButton,
  body.tablet-device.mobile-landscape .skinCarouselButton {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
}

/* 태블릿 인게임: 하단센터 액션 UI 제거, 좌우 360도 아날로그 조이스틱만 표시 */
body.tablet-device.mobile-controls-active #mobileControlLayer,
body.mobile-device.mobile-controls-active #mobileControlLayer {
  align-items: flex-end !important;
  justify-content: space-between !important;
  padding: 0 max(26px, env(safe-area-inset-left)) calc(18px + env(safe-area-inset-bottom)) max(26px, env(safe-area-inset-right)) !important;
}

body.mobile-device.mobile-controls-active .mobileActionStack {
  display: none !important;
}

body.mobile-device .mobilePad {
  --joy-x: 0px;
  --joy-y: 0px;
  position: relative !important;
  display: block !important;
  width: 146px !important;
  height: 146px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.34) 0 25px, rgba(0,122,255,.10) 26px 42px, rgba(255,255,255,.70) 43px 100%) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 18px 44px rgba(15,23,42,.13), inset 0 0 0 1px rgba(255,255,255,.58) !important;
  touch-action: none !important;
}

body.mobile-device .mobilePad::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(17,24,39,.12);
  pointer-events: none;
}

body.mobile-device .mobilePad::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  transform: translate(calc(-50% + var(--joy-x)), calc(-50% + var(--joy-y)));
  background: rgba(17,24,39,.82);
  box-shadow: 0 10px 24px rgba(15,23,42,.22), inset 0 0 0 2px rgba(255,255,255,.24);
  pointer-events: none;
  transition: transform .08s ease;
}

body.mobile-device .mobilePad.active::after {
  transition: none;
  background: rgba(0,122,255,.92);
}

body.mobile-device .mobilePadLabel {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  transform: translate(calc(-50% + var(--joy-x)), calc(-50% + var(--joy-y))) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transition: transform .08s ease;
}

body.mobile-device .mobilePad.active .mobilePadLabel {
  transition: none;
}

body.mobile-device .mobilePadBtn {
  display: none !important;
}

body.dark-mode.mobile-device .mobilePad {
  background:
    radial-gradient(circle at 50% 50%, rgba(245,247,251,.14) 0 25px, rgba(10,132,255,.16) 26px 42px, rgba(28,31,38,.72) 43px 100%) !important;
}

body.dark-mode.mobile-device .mobilePad::before {
  border-color: rgba(245,247,251,.16);
}

body.dark-mode.mobile-device .mobilePad::after {
  background: rgba(245,247,251,.86);
  box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 0 0 2px rgba(17,24,39,.18);
}

body.dark-mode.mobile-device .mobilePadLabel {
  color: #111827 !important;
}

@media (max-width: 900px) and (orientation: landscape) {
  body.mobile-device .mobilePad {
    width: 128px !important;
    height: 128px !important;
  }
  body.mobile-device .mobilePad::before {
    width: 80px;
    height: 80px;
  }
  body.mobile-device .mobilePad::after,
  body.mobile-device .mobilePadLabel {
    width: 42px !important;
    height: 42px !important;
  }
}




/* ===== ver158: 태블릿 인게임 조이스틱 불투명도 60% ===== */
body.tablet-device.mobile-controls-active #mobileControlLayer .mobilePad {
  opacity: 0.6 !important;
}
body.tablet-device.mobile-controls-active #mobileControlLayer .mobilePad.active {
  opacity: 0.6 !important;
}

/* ===== ver159: 태블릿 AI 대전에서는 1P 조이스틱만 표시 ===== */
body.tablet-device.ai-match-mode.mobile-controls-active #mobileControlLayer {
  justify-content: flex-start !important;
}

body.tablet-device.ai-match-mode.mobile-controls-active #mobileControlLayer .mobilePadP2 {
  display: none !important;
}

body.tablet-device.ai-match-mode.mobile-controls-active #mobileControlLayer .mobilePadP1 {
  margin-left: 0 !important;
}

/* ===== ver148: 태블릿 로비 재정렬 + 설정창 + 하단 버튼 정리 ===== */
#settingsOverlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(248,250,252,0.48);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
#settingsOverlay.show { display: flex; }
.settingsPopup {
  position: relative;
  width: min(420px, calc(100vw - 44px));
  padding: 28px;
  border-radius: 30px;
  color: #111827;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 26px 76px rgba(15,23,42,0.18), inset 0 0 0 1px rgba(255,255,255,0.66);
}
.settingsCloseButton {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(17,24,39,0.08) !important;
  color: #111827 !important;
  box-shadow: none !important;
  font-size: 24px !important;
  line-height: 1 !important;
}
.settingsHeader { padding-right: 44px; margin-bottom: 18px; }
.settingsBadge {
  display: inline-flex;
  padding: 7px 12px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(0,122,255,0.10);
  color: #007aff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
}
.settingsHeader h2 { margin: 0 0 8px; font-size: 30px; line-height: 1; font-weight: 950; letter-spacing: -.055em; }
.settingsHeader p { margin: 0; color: #6b7280; font-size: 14px; font-weight: 700; line-height: 1.45; }
.settingsBody {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(248,250,252,0.78);
  border: 1px solid rgba(0,0,0,0.06);
}
.settingsRow label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  color: #111827;
  font-size: 13px;
  font-weight: 900;
}
.settingsRow label span { color: #6b7280; font-size: 12px; }
.settingsRow input[type="range"] { width: 100%; accent-color: #007aff; }
.settingsThemeToggle,
.pauseThemeToggle {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 13px 16px;
  background: #111827 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(17,24,39,0.16) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  cursor: pointer;
}
body.dark-mode .settingsPopup,
body.dark-mode .settingsBody { background: rgba(255,255,255,0.90) !important; color: #111827 !important; }
body.dark-mode .settingsHeader p,
body.dark-mode .settingsRow label span { color: #6b7280 !important; }
body.dark-mode .settingsCloseButton { background: rgba(17,24,39,0.08) !important; color: #111827 !important; }

/* BGM 온/오프 버튼은 제거하고, 다크모드는 설정/일시정지 안에서만 조작 */
#soundToggle { display: none !important; }
body.tablet-device #themeToggle,
body.mobile-device #themeToggle { display: none !important; }
body.tablet-device.mobile-controls-active .mobileActionStack { display: none !important; }
body.tablet-device.mobile-controls-active #buffUI { display: none !important; }

body:not(.mobile-device):not(.tablet-device) #lobby .lobbySettingsButton {
  display: flex !important;
}


.lobbySettingsButton {
  position: absolute;
  left: 160px;
  top: 22px;
  z-index: 8;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.62) !important;
  color: #111827 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,0.10), inset 0 0 0 1px rgba(255,255,255,0.62) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

body.tablet-device.mobile-landscape #lobby {
  align-items: center !important;
  justify-content: center !important;
  padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
body.tablet-device.mobile-landscape #lobby .lobbyCard {
  width: min(1040px, calc(100vw - 42px)) !important;
  height: min(570px, calc(100vh - 34px)) !important;
  max-width: calc(100vw - 42px) !important;
  max-height: calc(100vh - 34px) !important;
  padding: 22px 22px 18px !important;
  box-sizing: border-box !important;
  border-radius: 30px !important;
  display: grid !important;
  grid-template-columns: minmax(310px, 37%) minmax(230px, 1fr) minmax(230px, 1fr) !important;
  grid-template-rows: 74px 122px 66px minmax(130px, 1fr) 24px !important;
  grid-template-areas:
    "top top top"
    "match p1 p2"
    "ai p1 p2"
    "mode p1 p2"
    "status status status" !important;
  column-gap: 16px !important;
  row-gap: 10px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}
body.tablet-device.mobile-landscape .lobbyHelpButton { left: 22px !important; top: 22px !important; }
body.tablet-device.mobile-landscape .lobbyLangButton { left: 68px !important; top: 22px !important; }
body.tablet-device.mobile-landscape .lobbyPrivacyButton { left: 114px !important; top: 22px !important; }
body.tablet-device.mobile-landscape .lobbySettingsButton { display: inline-flex !important; left: 160px !important; top: 22px !important; }
body.tablet-device.mobile-landscape .lobbyHelpButton,
body.tablet-device.mobile-landscape .lobbyLangButton,
body.tablet-device.mobile-landscape .lobbyPrivacyButton,
body.tablet-device.mobile-landscape .lobbySettingsButton {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  transform: none !important;
  opacity: 1 !important;
}
body.tablet-device.mobile-landscape .lobbyKicker,
body.tablet-device.mobile-landscape .mobileRecommendNotice,
body.tablet-device.mobile-landscape .lobbyCard > p { display: none !important; }
body.tablet-device.mobile-landscape .titleLoop {
  grid-area: top !important;
  align-self: center !important;
  justify-self: center !important;
  width: min(420px, 48vw) !important;
  height: 62px !important;
  min-height: 62px !important;
  margin: 0 !important;
  pointer-events: none !important;
}
body.tablet-device.mobile-landscape .titleRollText,
body.tablet-device.mobile-landscape .lobbyCard h1 {
  font-size: clamp(42px, 5.2vw, 58px) !important;
  line-height: 1 !important;
}
body.tablet-device.mobile-landscape .matchSelectWrap {
  grid-area: match !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin: 0 !important;
  align-self: stretch !important;
}
body.tablet-device.mobile-landscape .aiDifficultyWrap {
  grid-area: ai !important;
  align-self: stretch !important;
  margin: 0 !important;
}
body.tablet-device.mobile-landscape .modeSelectWrap {
  grid-area: mode !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 10px !important;
  padding-top: 0 !important;
  margin: 0 !important;
  align-self: stretch !important;
}
body.tablet-device.mobile-landscape .ghostToggleBox.ghostMiniToggle {
  right: 8px !important;
  top: -46px !important;
  width: 58px !important;
  height: 30px !important;
  z-index: 7 !important;
}
body.tablet-device.mobile-landscape .matchButton,
body.tablet-device.mobile-landscape .modeButton,
body.tablet-device.mobile-landscape #lobby .lobbyCard button.matchButton,
body.tablet-device.mobile-landscape #lobby .lobbyCard button.modeButton {
  min-height: 0 !important;
  height: 100% !important;
  padding: 12px 16px !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
body.tablet-device.mobile-landscape .matchButton strong,
body.tablet-device.mobile-landscape .modeButton strong { font-size: 16px !important; margin-bottom: 5px !important; }
body.tablet-device.mobile-landscape .matchButton span,
body.tablet-device.mobile-landscape .modeButton span { font-size: 12px !important; line-height: 1.25 !important; }
body.tablet-device.mobile-landscape .playerSelectWrap { display: contents !important; }
body.tablet-device.mobile-landscape .playerSelectWrap .playerSelectBox:nth-child(1) { grid-area: p1 !important; }
body.tablet-device.mobile-landscape .playerSelectWrap .playerSelectBox:nth-child(2) { grid-area: p2 !important; }
body.tablet-device.mobile-landscape .playerSelectBox {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 16px 14px 14px !important;
  border-radius: 24px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: 22px 50px minmax(92px, 1fr) 58px !important;
  gap: 10px !important;
  align-items: center !important;
  overflow: hidden !important;
}
body.tablet-device.mobile-landscape .playerSelectTitle {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  text-align: left !important;
}
body.tablet-device.mobile-landscape .selectedPreview {
  width: 46px !important;
  height: 46px !important;
  margin: 0 auto !important;
  border-radius: 14px !important;
}
body.tablet-device.mobile-landscape .palette,
body.tablet-device.mobile-landscape .skinPalette {
  width: 100% !important;
  max-width: 230px !important;
  margin: 0 auto !important;
}
body.tablet-device.mobile-landscape .skinCarousel {
  width: min(230px, 100%) !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px !important;
  gap: 8px !important;
  align-self: center !important;
}
body.tablet-device.mobile-landscape .skinViewport {
  border-radius: 18px !important;
  min-width: 0 !important;
}
body.tablet-device.mobile-landscape .lobbyCard .skinCarousel button.skinChoiceButton,
body.tablet-device.mobile-landscape #lobby .lobbyCard .skinCarousel button.skinChoiceButton,
body.tablet-device.mobile-landscape .skinCarousel button.skinChoiceButton {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 10px 0 44px !important;
  border-radius: 16px !important;
  font-size: 12px !important;
}
body.tablet-device.mobile-landscape .skinCarousel button.skinChoiceButton::before {
  left: 9px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 9px !important;
}
body.tablet-device.mobile-landscape .lobbyCard button.skinArrowBtn,
body.tablet-device.mobile-landscape #lobby .lobbyCard button.skinArrowBtn,
body.tablet-device.mobile-landscape .skinArrowBtn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 12px !important;
  align-self: center !important;
}
body.tablet-device.mobile-landscape .skinDots { height: 9px !important; margin-top: 0 !important; }
body.tablet-device.mobile-landscape .readyBox.readyTouchCard {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  height: 58px !important;
  padding: 0 12px !important;
  border-radius: 16px !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
}
body.tablet-device.mobile-landscape .readyHint { display: none !important; }
body.tablet-device.mobile-landscape #startStatus {
  grid-area: status !important;
  align-self: center !important;
  margin: 0 !important;
  min-height: 0 !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.tablet-device.mobile-landscape .aiDifficultyWrap:not(.show) { display: none !important; }
body.tablet-device.mobile-landscape .aiDifficultyWrap.show.aiDifficultyCarousel {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px !important;
  width: 100% !important;
  max-width: none !important;
  gap: 8px !important;
  align-items: center !important;
}
body.tablet-device.mobile-landscape .aiDifficultyViewport { width: 100% !important; }

@media (max-height: 620px) and (orientation: landscape) {
  body.tablet-device.mobile-landscape #lobby .lobbyCard {
    height: calc(100vh - 28px) !important;
    grid-template-rows: 62px 104px 54px minmax(112px, 1fr) 22px !important;
    row-gap: 8px !important;
    padding: 18px 20px 14px !important;
  }
  body.tablet-device.mobile-landscape .titleLoop { height: 52px !important; min-height: 52px !important; }
  body.tablet-device.mobile-landscape .titleRollText,
  body.tablet-device.mobile-landscape .lobbyCard h1 { font-size: clamp(36px, 4.8vw, 50px) !important; }
  body.tablet-device.mobile-landscape .playerSelectBox { grid-template-rows: 20px 42px minmax(82px, 1fr) 52px !important; gap: 8px !important; padding: 14px 12px 12px !important; }
  body.tablet-device.mobile-landscape .selectedPreview { width: 40px !important; height: 40px !important; }
  body.tablet-device.mobile-landscape .readyBox.readyTouchCard { height: 52px !important; }
  body.tablet-device.mobile-landscape .matchButton strong,
  body.tablet-device.mobile-landscape .modeButton strong { font-size: 15px !important; }
  body.tablet-device.mobile-landscape .matchButton span,
  body.tablet-device.mobile-landscape .modeButton span { font-size: 11px !important; }
}


/* ===== ver149: 태블릿 색상/스킨 캐러셀 정렬 보정 - 기존 레이아웃 유지 ===== */
body.tablet-device.mobile-landscape .palette.compactPalette {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  align-self: start !important;
}

body.tablet-device.mobile-landscape .solidColorStepper,
body.tablet-device.mobile-landscape .skinCarousel {
  width: min(210px, 100%) !important;
  max-width: 210px !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}

body.tablet-device.mobile-landscape .solidColorStepper {
  grid-template-columns: 34px minmax(0, 1fr) 34px !important;
  gap: 8px !important;
  padding: 7px !important;
}

body.tablet-device.mobile-landscape .skinCarousel {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px !important;
  grid-template-rows: 42px 10px !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  column-gap: 8px !important;
  row-gap: 4px !important;
}

body.tablet-device.mobile-landscape .skinViewport {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  border-radius: 16px !important;
}

body.tablet-device.mobile-landscape .skinTrack {
  height: 42px !important;
  align-items: center !important;
}

body.tablet-device.mobile-landscape .lobbyCard .skinCarousel button.skinChoiceButton,
body.tablet-device.mobile-landscape #lobby .lobbyCard .skinCarousel button.skinChoiceButton,
body.tablet-device.mobile-landscape .skinCarousel button.skinChoiceButton {
  width: 100% !important;
  min-width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 10px 0 44px !important;
  border-radius: 16px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

body.tablet-device.mobile-landscape .skinCarousel button.skinChoiceButton::before {
  left: 9px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 9px !important;
}

body.tablet-device.mobile-landscape .lobbyCard button.skinArrowBtn,
body.tablet-device.mobile-landscape #lobby .lobbyCard button.skinArrowBtn,
body.tablet-device.mobile-landscape .skinArrowBtn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 12px !important;
  align-self: center !important;
  justify-self: center !important;
}

body.tablet-device.mobile-landscape .skinDots {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: 8px !important;
  margin: -1px 0 0 !important;
  gap: 4px !important;
}

body.tablet-device.mobile-landscape .skinDot {
  width: 5px !important;
  height: 5px !important;
}

body.tablet-device.mobile-landscape .skinDot.active {
  width: 14px !important;
}

@media (max-height: 620px) and (orientation: landscape) {
  body.tablet-device.mobile-landscape .palette.compactPalette {
    gap: 6px !important;
  }
  body.tablet-device.mobile-landscape .solidColorStepper,
  body.tablet-device.mobile-landscape .skinCarousel {
    width: min(200px, 100%) !important;
    max-width: 200px !important;
  }
  body.tablet-device.mobile-landscape .skinCarousel {
    grid-template-rows: 38px 8px !important;
  }
  body.tablet-device.mobile-landscape .skinViewport,
  body.tablet-device.mobile-landscape .skinTrack,
  body.tablet-device.mobile-landscape .lobbyCard .skinCarousel button.skinChoiceButton,
  body.tablet-device.mobile-landscape #lobby .lobbyCard .skinCarousel button.skinChoiceButton,
  body.tablet-device.mobile-landscape .skinCarousel button.skinChoiceButton {
    height: 38px !important;
    min-height: 38px !important;
  }
}


/* ===== ver150: 태블릿 컬러 패널 내부 중앙 정렬만 수정 ===== */
body.tablet-device.mobile-landscape .playerSelectBox {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 54px auto minmax(0, 1fr) auto !important;
  justify-items: center !important;
  align-items: start !important;
  gap: 8px !important;
}

body.tablet-device.mobile-landscape .playerSelectTitle {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
  text-align: left !important;
}

body.tablet-device.mobile-landscape .selectedPreview {
  grid-column: 1 !important;
  grid-row: 2 !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 auto !important;
}

body.tablet-device.mobile-landscape .palette,
body.tablet-device.mobile-landscape .palette.compactPalette {
  grid-column: 1 !important;
  grid-row: 3 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.tablet-device.mobile-landscape .solidColorStepper,
body.tablet-device.mobile-landscape .skinPalette.skinCarousel,
body.tablet-device.mobile-landscape #lobby .skinPalette.skinCarousel {
  justify-self: center !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: min(214px, calc(100% - 8px)) !important;
  max-width: 214px !important;
}

body.tablet-device.mobile-landscape .readyBox {
  grid-column: 1 !important;
  grid-row: 5 !important;
  justify-self: stretch !important;
  align-self: end !important;
}

@media (orientation: landscape) and (min-width: 900px) and (max-height: 760px) {
  body.tablet-device.mobile-landscape .playerSelectBox {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 50px auto minmax(0, 1fr) auto !important;
  }
  body.tablet-device.mobile-landscape .solidColorStepper,
  body.tablet-device.mobile-landscape .skinPalette.skinCarousel,
  body.tablet-device.mobile-landscape #lobby .skinPalette.skinCarousel {
    width: min(206px, calc(100% - 8px)) !important;
    max-width: 206px !important;
  }
}


/* ===== ver151: FHD 이하 접속 환경 선택 오버레이 ===== */
#deviceLayoutChoiceOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 30% 20%, rgba(0,122,255,0.18), transparent 34%),
    radial-gradient(circle at 72% 76%, rgba(255,45,85,0.13), transparent 36%),
    rgba(248,250,252,0.86);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
}

#deviceLayoutChoiceOverlay.show {
  display: flex;
}

.deviceLayoutChoiceCard {
  width: min(560px, calc(100vw - 42px));
  padding: 28px 28px 24px;
  border-radius: 30px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 28px 76px rgba(15,23,42,0.18), inset 0 0 0 1px rgba(255,255,255,0.62);
  text-align: center;
  color: #111827;
}

.deviceLayoutChoiceBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,122,255,0.10);
  color: #007aff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.deviceLayoutChoiceCard h2 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.055em;
  font-weight: 950;
}

.deviceLayoutChoiceCard p {
  margin: 0 0 20px;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.deviceLayoutChoiceButtons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.deviceLayoutChoiceBtn {
  min-height: 116px;
  padding: 16px 14px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 24px;
  background: rgba(255,255,255,0.72);
  color: #111827;
  box-shadow: 0 12px 28px rgba(15,23,42,0.08), inset 0 0 0 1px rgba(255,255,255,0.58);
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.deviceLayoutChoiceBtn:hover {
  transform: translateY(-2px);
  border-color: rgba(0,122,255,0.38);
  box-shadow: 0 18px 38px rgba(15,23,42,0.12), 0 0 0 3px rgba(0,122,255,0.10);
}

.deviceLayoutChoiceIcon {
  display: block;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 10px;
}

.deviceLayoutChoiceBtn strong {
  display: block;
  font-size: 17px;
  font-weight: 950;
  margin-bottom: 5px;
  letter-spacing: -0.035em;
}

.deviceLayoutChoiceBtn span {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 750;
  color: #6b7280;
}

.deviceLayoutChoiceHint {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  font-size: 11px !important;
  color: rgba(107,114,128,0.82) !important;
}

body.dark-mode #deviceLayoutChoiceOverlay {
  background:
    radial-gradient(circle at 30% 20%, rgba(0,122,255,0.18), transparent 34%),
    radial-gradient(circle at 72% 76%, rgba(255,45,85,0.13), transparent 36%),
    rgba(10,12,18,0.86);
}

body.dark-mode .deviceLayoutChoiceCard {
  background: rgba(28,31,38,0.86);
  border-color: rgba(255,255,255,0.10);
  color: #f5f7fb;
  box-shadow: 0 28px 76px rgba(0,0,0,0.34), inset 0 0 0 1px rgba(255,255,255,0.06);
}

body.dark-mode .deviceLayoutChoiceCard p,
body.dark-mode .deviceLayoutChoiceBtn span,
body.dark-mode .deviceLayoutChoiceHint {
  color: #a4aab8 !important;
}

body.dark-mode .deviceLayoutChoiceBtn {
  background: rgba(255,255,255,0.08);
  color: #f5f7fb;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 12px 28px rgba(0,0,0,0.20), inset 0 0 0 1px rgba(255,255,255,0.05);
}

@media (max-width: 560px) {
  .deviceLayoutChoiceButtons {
    grid-template-columns: 1fr;
  }
  .deviceLayoutChoiceBtn {
    min-height: 86px;
  }
}


/* ===== ver155: 태블릿 환경 카운트다운 창 사이즈 축소 ===== */
body.device-layout-forced-tablet #countdownOverlay,
body.tablet-device #countdownOverlay {
  justify-content: center !important;
  gap: 8px !important;
  padding: 18px 22px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body.device-layout-forced-tablet #countNumber,
body.tablet-device #countNumber {
  font-size: clamp(58px, 10.5vw, 96px) !important;
  line-height: 0.9 !important;
  margin: 0 !important;
}

body.device-layout-forced-tablet #countRule,
body.tablet-device #countRule {
  margin-top: 8px !important;
  font-size: clamp(15px, 2.15vw, 21px) !important;
  line-height: 1.28 !important;
  max-width: min(760px, calc(100vw - 64px)) !important;
  padding: 0 12px !important;
}

body.device-layout-forced-tablet #classicCountdownGuide,
body.device-layout-forced-tablet #ghostCountdownGuide,
body.tablet-device #classicCountdownGuide,
body.tablet-device #ghostCountdownGuide {
  width: min(760px, calc(100vw - 64px)) !important;
  max-height: calc(100vh - 140px) !important;
  margin-top: 10px !important;
  padding: 16px 18px !important;
  border-radius: 22px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body.device-layout-forced-tablet .classicGuideHeader,
body.tablet-device .classicGuideHeader {
  gap: 10px !important;
  margin-bottom: 10px !important;
}

body.device-layout-forced-tablet .classicGuideIcon,
body.tablet-device .classicGuideIcon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 15px !important;
}

body.device-layout-forced-tablet .classicGuideIcon::before,
body.tablet-device .classicGuideIcon::before {
  width: 22px !important;
  height: 22px !important;
  border-radius: 8px !important;
}

body.device-layout-forced-tablet .classicGuideTitle strong,
body.tablet-device .classicGuideTitle strong {
  font-size: clamp(17px, 2.2vw, 21px) !important;
  line-height: 1.08 !important;
  margin-bottom: 3px !important;
}

body.device-layout-forced-tablet .classicGuideTitle span,
body.tablet-device .classicGuideTitle span {
  font-size: clamp(11px, 1.55vw, 13px) !important;
  line-height: 1.22 !important;
}

body.device-layout-forced-tablet .classicGuideList,
body.tablet-device .classicGuideList {
  gap: 8px !important;
}

body.device-layout-forced-tablet .classicRuleFourList,
body.tablet-device .classicRuleFourList {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.device-layout-forced-tablet .classicGuideStep,
body.tablet-device .classicGuideStep,
body.device-layout-forced-tablet .classicRuleFourList .classicGuideStep,
body.tablet-device .classicRuleFourList .classicGuideStep {
  min-height: 0 !important;
  padding: 10px 10px !important;
  border-radius: 16px !important;
}

body.device-layout-forced-tablet .classicGuideStep b,
body.tablet-device .classicGuideStep b {
  font-size: clamp(11px, 1.55vw, 13px) !important;
  line-height: 1.15 !important;
  margin-bottom: 4px !important;
}

body.device-layout-forced-tablet .classicGuideStep span,
body.tablet-device .classicGuideStep span {
  font-size: clamp(10px, 1.35vw, 12px) !important;
  line-height: 1.22 !important;
}

body.device-layout-forced-tablet #itemCountdownGuide,
body.tablet-device #itemCountdownGuide {
  width: min(820px, calc(100vw - 64px)) !important;
  max-height: calc(100vh - 132px) !important;
  margin-top: 10px !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

body.device-layout-forced-tablet .itemGuideCard,
body.tablet-device .itemGuideCard {
  flex: 1 1 240px !important;
  max-width: 260px !important;
  min-height: 62px !important;
  grid-template-columns: 42px 1fr !important;
  gap: 8px !important;
  padding: 9px 10px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}

body.device-layout-forced-tablet .itemGuideIcon,
body.tablet-device .itemGuideIcon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 13px !important;
}

body.device-layout-forced-tablet .itemGuideText strong,
body.tablet-device .itemGuideText strong {
  font-size: clamp(11px, 1.55vw, 13px) !important;
  line-height: 1.08 !important;
  margin-bottom: 3px !important;
}

body.device-layout-forced-tablet .itemGuideText span,
body.tablet-device .itemGuideText span {
  font-size: clamp(10px, 1.35vw, 12px) !important;
  line-height: 1.18 !important;
}

body.device-layout-forced-tablet .itemGuideIcon.area::before,
body.tablet-device .itemGuideIcon.area::before {
  width: 22px !important;
  height: 22px !important;
  border-width: 3px !important;
}

body.device-layout-forced-tablet .itemGuideIcon.area::after,
body.tablet-device .itemGuideIcon.area::after {
  width: 14px !important;
  height: 14px !important;
}

body.device-layout-forced-tablet .itemGuideIcon.speed::before,
body.tablet-device .itemGuideIcon.speed::before {
  width: 24px !important;
  height: 8px !important;
}

body.device-layout-forced-tablet .itemGuideIcon.speed::after,
body.tablet-device .itemGuideIcon.speed::after {
  border-top-width: 9px !important;
  border-bottom-width: 9px !important;
  border-left-width: 13px !important;
}

body.device-layout-forced-tablet .itemGuideIcon.line::before,
body.tablet-device .itemGuideIcon.line::before {
  width: 28px !important;
  height: 6px !important;
  box-shadow: 0 -10px 0 #ffffff, 0 10px 0 #ffffff !important;
}

body.device-layout-forced-tablet .itemGuideIcon.shield::before,
body.tablet-device .itemGuideIcon.shield::before {
  width: 24px !important;
  height: 24px !important;
  border-width: 3px !important;
}

body.device-layout-forced-tablet .itemGuideIcon.shield::after,
body.tablet-device .itemGuideIcon.shield::after {
  width: 32px !important;
  height: 32px !important;
  border-width: 2px !important;
}

@media (max-height: 760px) and (orientation: landscape) {
  body.device-layout-forced-tablet #countNumber,
  body.tablet-device #countNumber {
    font-size: clamp(48px, 9vw, 74px) !important;
  }

  body.device-layout-forced-tablet #classicCountdownGuide,
  body.device-layout-forced-tablet #ghostCountdownGuide,
  body.tablet-device #classicCountdownGuide,
  body.tablet-device #ghostCountdownGuide {
    width: min(720px, calc(100vw - 72px)) !important;
    max-height: calc(100vh - 112px) !important;
    padding: 12px 14px !important;
    margin-top: 6px !important;
  }

  body.device-layout-forced-tablet .classicGuideHeader,
  body.tablet-device .classicGuideHeader {
    margin-bottom: 7px !important;
  }

  body.device-layout-forced-tablet .classicGuideIcon,
  body.tablet-device .classicGuideIcon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
  }

  body.device-layout-forced-tablet .classicGuideStep,
  body.tablet-device .classicGuideStep {
    padding: 7px 8px !important;
    border-radius: 13px !important;
  }

  body.device-layout-forced-tablet #itemCountdownGuide,
  body.tablet-device #itemCountdownGuide {
    width: min(780px, calc(100vw - 72px)) !important;
    max-height: calc(100vh - 108px) !important;
    margin-top: 6px !important;
    gap: 6px !important;
  }

  body.device-layout-forced-tablet .itemGuideCard,
  body.tablet-device .itemGuideCard {
    flex-basis: 220px !important;
    min-height: 54px !important;
    padding: 7px 9px !important;
  }
}



/* ===== ver156: 태블릿 카운트다운 조이스틱 조작 안내 ===== */
.tabletJoystickControlArt {
  display: none;
  margin-top: 10px;
  width: min(620px, calc(100vw - 80px));
  padding: 12px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 14px 34px rgba(15,23,42,0.10), inset 0 0 0 1px rgba(255,255,255,0.50);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-sizing: border-box;
}

.tabletJoystickTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--text-main);
  font-weight: 900;
  font-size: clamp(13px, 1.8vw, 16px);
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.tabletJoystickTitle span {
  color: var(--text-sub);
  font-weight: 750;
  font-size: clamp(10px, 1.35vw, 12px);
}

.tabletJoystickScreen {
  position: relative;
  height: clamp(86px, 15.5vw, 128px);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(248,250,252,0.92), rgba(229,235,244,0.82));
  border: 2px solid rgba(17,24,39,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.72);
  overflow: hidden;
}

.tabletJoystickScreen::before {
  content: "";
  position: absolute;
  inset: 13px 18px;
  border-radius: 12px;
  background-image:
    linear-gradient(rgba(15,23,42,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.055) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .8;
}

.tabletMiniBoard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(98px, 15vw, 138px);
  height: clamp(58px, 9vw, 82px);
  transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-45deg);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(0,122,255,.30) 0 42%, rgba(255,255,255,.48) 42% 58%, rgba(255,45,85,.28) 58% 100%);
  border: 2px solid rgba(17,24,39,.10);
  box-shadow: 0 14px 24px rgba(15,23,42,.12);
}

.tabletMiniBlock {
  position: absolute;
  left: calc(50% - 8px);
  top: calc(50% - 8px);
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: #111827;
  box-shadow: 0 5px 12px rgba(17,24,39,.25), inset 0 0 0 2px rgba(255,255,255,.35);
  animation: tabletMiniBlockMove 1.45s ease-in-out infinite;
}

@keyframes tabletMiniBlockMove {
  0%, 100% { transform: translate(-24px, 14px) rotate(0deg); }
  35% { transform: translate(0, -4px) rotate(90deg); }
  70% { transform: translate(28px, 10px) rotate(180deg); }
}

.tabletJoystickPair {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tabletStick {
  position: absolute;
  bottom: 10px;
  width: clamp(58px, 9.2vw, 76px);
  height: clamp(58px, 9.2vw, 76px);
  border-radius: 50%;
  background: rgba(255,255,255,.78);
  border: 2px solid rgba(17,24,39,.10);
  box-shadow: 0 10px 22px rgba(15,23,42,.14), inset 0 0 0 8px rgba(17,24,39,.045);
}

.tabletStick.left { left: 18px; }
.tabletStick.right { right: 18px; }

.tabletStick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38%;
  height: 38%;
  border-radius: 50%;
  background: #111827;
  box-shadow: 0 5px 10px rgba(17,24,39,.22);
  animation: tabletStickMove 1.45s ease-in-out infinite;
}

.tabletStick.right::before { animation-delay: .22s; }

@keyframes tabletStickMove {
  0%, 100% { transform: translate(-50%, -50%); }
  35% { transform: translate(-18%, -74%); }
  70% { transform: translate(-82%, -24%); }
}

.tabletFinger {
  position: absolute;
  width: 20px;
  height: 26px;
  border-radius: 999px 999px 10px 10px;
  background: rgba(255,209,102,.94);
  border: 2px solid rgba(255,255,255,.88);
  box-shadow: 0 8px 16px rgba(15,23,42,.16);
  transform-origin: 50% 100%;
  animation: tabletFingerMove 1.45s ease-in-out infinite;
}

.tabletFinger.left { left: 42px; bottom: 33px; }
.tabletFinger.right { right: 42px; bottom: 33px; animation-delay: .22s; }

@keyframes tabletFingerMove {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  35% { transform: translate(7px, -9px) rotate(5deg); }
  70% { transform: translate(-8px, 5px) rotate(-14deg); }
}

body.dark-mode .tabletJoystickControlArt {
  background: rgba(28,31,38,0.72);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 14px 34px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.06);
}

body.dark-mode .tabletJoystickScreen {
  background: linear-gradient(180deg, rgba(36,40,50,.92), rgba(18,21,28,.86));
  border-color: rgba(255,255,255,.12);
}

body.dark-mode .tabletJoystickScreen::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.065) 1px, transparent 1px);
}

body.dark-mode .tabletStick {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 22px rgba(0,0,0,.22), inset 0 0 0 8px rgba(255,255,255,.045);
}

body.dark-mode .tabletStick::before,
body.dark-mode .tabletMiniBlock {
  background: #f5f7fb;
}

body.device-layout-forced-tablet #countdownControlGuide,
body.tablet-device #countdownControlGuide {
  width: min(640px, calc(100vw - 80px)) !important;
  margin-top: 8px !important;
}

body.device-layout-forced-tablet #countdownControlGuide .controlKeyboardTitle,
body.device-layout-forced-tablet #countdownControlGuide .keyboardFullArt,
body.device-layout-forced-tablet #countdownControlGuide .keyboardLegendInline,
body.tablet-device #countdownControlGuide .controlKeyboardTitle,
body.tablet-device #countdownControlGuide .keyboardFullArt,
body.tablet-device #countdownControlGuide .keyboardLegendInline {
  display: none !important;
}

body.device-layout-forced-tablet #tabletJoystickControlArt,
body.tablet-device #tabletJoystickControlArt {
  display: block !important;
}

@media (max-height: 760px) and (orientation: landscape) {
  body.device-layout-forced-tablet #countdownControlGuide,
  body.tablet-device #countdownControlGuide {
    width: min(560px, calc(100vw - 92px)) !important;
    margin-top: 5px !important;
  }
  body.device-layout-forced-tablet .tabletJoystickControlArt,
  body.tablet-device .tabletJoystickControlArt {
    width: min(560px, calc(100vw - 92px)) !important;
    padding: 8px 10px !important;
    border-radius: 18px !important;
  }
  body.device-layout-forced-tablet .tabletJoystickScreen,
  body.tablet-device .tabletJoystickScreen {
    height: clamp(68px, 12.5vw, 96px) !important;
    border-radius: 15px !important;
  }
  body.device-layout-forced-tablet .tabletJoystickTitle,
  body.tablet-device .tabletJoystickTitle {
    margin-bottom: 6px !important;
  }
  body.device-layout-forced-tablet .tabletStick,
  body.tablet-device .tabletStick {
    bottom: 7px !important;
    width: clamp(48px, 7.8vw, 62px) !important;
    height: clamp(48px, 7.8vw, 62px) !important;
  }
  body.device-layout-forced-tablet .tabletStick.left,
  body.tablet-device .tabletStick.left { left: 13px !important; }
  body.device-layout-forced-tablet .tabletStick.right,
  body.tablet-device .tabletStick.right { right: 13px !important; }
  body.device-layout-forced-tablet .tabletFinger.left,
  body.tablet-device .tabletFinger.left { left: 31px !important; bottom: 26px !important; }
  body.device-layout-forced-tablet .tabletFinger.right,
  body.tablet-device .tabletFinger.right { right: 31px !important; bottom: 26px !important; }
}



/* ===== ver157: PC/태블릿 공통 설정창 + 음소거 버튼 ===== */
/* PC 로비에서도 설정 아이콘 표시 */
body:not(.mobile-phone-blocked) .lobbySettingsButton {
  display: inline-flex !important;
}

.settingsVolumeControl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
}

.settingsVolumeControl input[type="range"] {
  width: 100% !important;
  margin: 0 !important;
}

.settingsMuteButton,
#lobby .lobbyCard button.settingsMuteButton,
body.dark-mode .settingsMuteButton {
  width: 42px !important;
  height: 34px !important;
  min-width: 42px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(17,24,39,0.08) !important;
  color: #111827 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: none !important;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.settingsMuteButton.muted {
  background: rgba(255,59,48,0.12) !important;
  color: #b91c1c !important;
  border-color: rgba(255,59,48,0.22) !important;
}

body.dark-mode .settingsMuteButton {
  background: rgba(17,24,39,0.08) !important;
  color: #111827 !important;
}

body.dark-mode .settingsMuteButton.muted {
  background: rgba(255,59,48,0.14) !important;
  color: #b91c1c !important;
}

/* PC/태블릿 모두 좌상단 아이콘 간격 통일 */
.lobbySettingsButton { left: 160px !important; top: 22px !important; }

@media (max-width: 860px) {
  .settingsVolumeControl { grid-template-columns: minmax(0, 1fr) 40px; gap: 8px; }
  .settingsMuteButton { width: 40px !important; height: 32px !important; }
}


/* ===== ver160: PC 환경 로비 애드센스 배너 자리 3종 ===== */
.pcLobbyAd {
  position: absolute;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  pointer-events: auto;
  user-select: none;
  color: rgba(17, 24, 39, 0.56);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.02em;
  border: 1px dashed rgba(15, 23, 42, 0.22);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.74), rgba(248,250,252,0.54)),
    repeating-linear-gradient(45deg, rgba(15,23,42,0.035) 0 8px, transparent 8px 16px);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10), inset 0 0 0 1px rgba(255,255,255,0.62);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.pcLobbyAd span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.58);
}

.pcLobbyAdSide {
  top: 50%;
  width: 160px;
  height: min(600px, calc(100vh - 120px));
  min-height: 420px;
  border-radius: 28px;
  transform: translateY(-50%);
}

.pcLobbyAdLeft { left: 28px; }
.pcLobbyAdRight { right: 28px; }

.pcLobbyAdBottom {
  left: 50%;
  bottom: 20px;
  width: min(728px, calc(100vw - 520px));
  min-width: 460px;
  height: 90px;
  border-radius: 24px;
  transform: translateX(-50%);
}

.pcLobbyAdClose {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(17,24,39,0.92);
  color: #ffffff;
  font-size: 16px;
  line-height: 30px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15,23,42,0.22);
  padding: 0;
}

.pcLobbyAdBottom.is-hidden {
  display: none !important;
}

body:not(.tablet-device):not(.mobile-phone-blocked):not(.device-layout-forced-tablet) #lobby .pcLobbyAd,
body.device-layout-forced-pc #lobby .pcLobbyAd {
  display: flex;
}

body.tablet-device #lobby .pcLobbyAd,
body.device-layout-forced-tablet #lobby .pcLobbyAd,
body.mobile-phone-blocked #lobby .pcLobbyAd {
  display: none !important;
}

body.dark-mode .pcLobbyAd {
  color: rgba(17,24,39,0.62);
  border-color: rgba(15,23,42,0.20);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.72), rgba(248,250,252,0.50)),
    repeating-linear-gradient(45deg, rgba(15,23,42,0.04) 0 8px, transparent 8px 16px);
}

@media (max-width: 1560px) {
  .pcLobbyAdSide {
    width: 124px;
    min-height: 360px;
    border-radius: 24px;
    font-size: 12px;
  }
  .pcLobbyAdLeft { left: 18px; }
  .pcLobbyAdRight { right: 18px; }
  .pcLobbyAdBottom {
    width: min(640px, calc(100vw - 380px));
    min-width: 420px;
    height: 78px;
    bottom: 16px;
  }
}

@media (max-width: 1280px) {
  #lobby .pcLobbyAdSide {
    display: none !important;
  }
  .pcLobbyAdBottom {
    width: min(640px, calc(100vw - 60px));
    min-width: 0;
  }
}



/* ===== 애드센스 심사 대응: 사이트 정보 메뉴 / 푸터 ===== */
.lobbySiteInfoButton {
  position: absolute;
  top: 18px;
  right: 128px;
  z-index: 4;
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.62) !important;
  color: #111827 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,0.10), inset 0 0 0 1px rgba(255,255,255,0.58) !important;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  font-size: 17px !important;
  line-height: 1 !important;
}

.lobbySiteInfoButton:hover {
  transform: translateY(-1px) scale(1.05);
  background: rgba(255,255,255,0.88) !important;
  box-shadow: 0 12px 26px rgba(15,23,42,0.14), 0 0 0 3px rgba(0,122,255,0.10) !important;
}

body.dark-mode .lobbySiteInfoButton {
  background: rgba(255,255,255,0.62) !important;
  color: #111827 !important;
}

.lobbyFooterLinks {
  position: fixed;
  right: 18px;
  bottom: 18px;
  left: auto;
  z-index: 60;
  transform: none;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.52);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 24px rgba(15,23,42,0.08), inset 0 0 0 1px rgba(255,255,255,0.52);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  color: rgba(17,24,39,0.58);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.lobbyFooterLinks button,
.lobbyFooterLinks a {
  all: unset;
  cursor: pointer;
  color: rgba(17,24,39,0.66);
  font-weight: 850;
}

.lobbyFooterLinks button:hover,
.lobbyFooterLinks a:hover {
  color: #007aff;
}

#siteInfoOverlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

#siteInfoOverlay.show {
  display: flex;
}

.siteInfoPopup {
  position: relative;
  width: min(980px, calc(100vw - 44px));
  max-height: calc(100vh - 56px);
  overflow: hidden;
  display: grid;
  grid-template-columns: 240px 1fr;
  border-radius: 34px;
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(255,255,255,0.92);
  box-shadow: 0 26px 80px rgba(15,23,42,0.24), inset 0 0 0 1px rgba(255,255,255,0.48);
  color: #111827;
}

.siteInfoCloseButton {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(17,24,39,0.08);
  color: #111827;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
}

.siteInfoSide {
  padding: 28px 18px;
  background: rgba(248,250,252,0.82);
  border-right: 1px solid rgba(15,23,42,0.08);
}

.siteInfoBrand {
  padding: 2px 8px 18px;
}

.siteInfoBrand strong {
  display: block;
  font-size: 22px;
  letter-spacing: -0.05em;
  font-weight: 950;
}

.siteInfoBrand span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.35;
  color: #6b7280;
  font-weight: 750;
}

.siteInfoTabs {
  display: grid;
  gap: 7px;
}

.siteInfoTab {
  border: 0;
  border-radius: 16px;
  padding: 12px 13px;
  background: transparent;
  color: #6b7280;
  text-align: left;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.siteInfoTab:hover {
  background: rgba(0,122,255,0.08);
  color: #111827;
}

.siteInfoTab.active {
  background: #111827;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(17,24,39,0.16);
}

.siteInfoContent {
  min-height: 560px;
  max-height: calc(100vh - 56px);
  overflow: auto;
  padding: 34px 38px 38px;
}

.siteInfoPanel {
  display: none;
}

.siteInfoPanel.active {
  display: block;
}

.siteInfoPanel h2 {
  margin: 0 0 10px;
  font-size: 30px;
  letter-spacing: -0.055em;
  font-weight: 950;
}

.siteInfoLead {
  margin: 0 0 22px;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 700;
}

.siteInfoGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.siteInfoCard {
  padding: 17px 18px;
  border-radius: 22px;
  background: rgba(248,250,252,0.82);
  border: 1px solid rgba(15,23,42,0.07);
}

.siteInfoCard strong {
  display: block;
  margin-bottom: 7px;
  font-size: 15px;
  font-weight: 950;
}

.siteInfoCard span,
.siteInfoCard p,
.siteInfoCard li {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 700;
}

.siteInfoCard ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.updateList {
  display: grid;
  gap: 12px;
}

.updateItem {
  padding: 17px 18px;
  border-radius: 22px;
  background: rgba(248,250,252,0.82);
  border: 1px solid rgba(15,23,42,0.07);
}

.updateItem b {
  display: block;
  margin-bottom: 7px;
  font-size: 15px;
}

.updateItem ul {
  margin: 0;
  padding-left: 18px;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 700;
}

.siteInfoContactBox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 13px 16px;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(17,24,39,0.18);
}


/* ===== 요청 수정: 게임 소개 탭 튜토리얼 다시 보기 버튼 ===== */
.siteInfoTutorialBox {
  margin-top: 18px;
  padding: 18px 18px;
  border-radius: 24px;
  background: rgba(0,122,255,0.08);
  border: 1px solid rgba(0,122,255,0.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.52);
  text-align: left;
}

.siteInfoTutorialBox strong {
  display: block;
  font-size: 16px;
  font-weight: 950;
  color: var(--text-main);
  margin-bottom: 6px;
}

.siteInfoTutorialBox span {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-sub);
  font-weight: 750;
  margin-bottom: 14px;
}

.siteInfoTutorialReplayButton {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: #111827;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(17,24,39,0.18);
}

.siteInfoTutorialReplayButton:hover {
  transform: translateY(-1px);
}

.siteInfoMutedNote {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(0,122,255,0.08);
  color: #4b5563;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 700;
}

body.dark-mode .lobbyFooterLinks {
  background: rgba(255,255,255,0.50);
  color: rgba(17,24,39,0.58);
}

body.dark-mode .lobbyFooterLinks button,
body.dark-mode .lobbyFooterLinks a {
  color: rgba(17,24,39,0.68);
}

body.dark-mode .siteInfoPopup {
  background: rgba(28,31,38,0.94);
  border-color: rgba(255,255,255,0.10);
  color: #f5f7fb;
}

body.dark-mode .siteInfoSide,
body.dark-mode .siteInfoCard,
body.dark-mode .siteInfoTutorialBox,
body.dark-mode .updateItem {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}

body.dark-mode .siteInfoBrand span,
body.dark-mode .siteInfoLead,
body.dark-mode .siteInfoCard span,
body.dark-mode .siteInfoCard p,
body.dark-mode .siteInfoCard li,
body.dark-mode .updateItem ul,
body.dark-mode .siteInfoMutedNote,
body.dark-mode .siteInfoTab {
  color: #a4aab8;
}

body.dark-mode .siteInfoTab:hover {
  background: rgba(255,255,255,0.08);
  color: #f5f7fb;
}

body.dark-mode .siteInfoTab.active,
body.dark-mode .siteInfoContactBox {
  background: #f5f7fb;
  color: #111827;
}

body.dark-mode .siteInfoCloseButton {
  background: rgba(255,255,255,0.10);
  color: #f5f7fb;
}

body.dark-mode .siteInfoMutedNote {
  background: rgba(10,132,255,0.14);
}

@media (max-width: 860px) {
  .lobbySiteInfoButton { right: 120px; }
  .siteInfoPopup {
    grid-template-columns: 1fr;
  }
  .siteInfoSide {
    border-right: 0;
    border-bottom: 1px solid rgba(15,23,42,0.08);
    padding: 22px 18px 14px;
  }
  .siteInfoTabs {
    grid-template-columns: repeat(2, 1fr);
  }
  .siteInfoContent {
    min-height: 0;
    padding: 24px 22px 28px;
  }
  .siteInfoGrid {
    grid-template-columns: 1fr;
  }
  .lobbyFooterLinks {
    right: 12px;
    bottom: 10px;
    left: auto;
    transform: none;
    max-width: calc(100vw - 28px);
    overflow: hidden;
  }
}

@media (max-width: 720px) {
  .lobbySiteInfoButton {
    top: 62px;
    right: 18px;
  }
  .lobbyFooterLinks {
    right: 10px;
    bottom: 10px;
    left: auto;
    transform: none;
    display: flex;
    gap: 7px;
    padding: 7px 9px;
    font-size: 10px;
    max-width: calc(100vw - 20px);
  }
  .siteInfoTabs {
    grid-template-columns: 1fr;
  }
}



/* ===== 사이트 정보 아이콘 정렬 보정: ? / 문서 / 언어 / 개인정보 / 설정 ===== */
.lobbySiteInfoButton {
  left: 68px !important;
  right: auto !important;
  top: 22px !important;
  z-index: 8 !important;
  width: 38px !important;
  height: 38px !important;
}
.lobbyLangButton { left: 114px !important; }
.lobbyPrivacyButton { left: 160px !important; }
.lobbySettingsButton { left: 206px !important; }
body.mobile-device.mobile-landscape #siteInfoToggle {
  transform: scale(.68) !important;
  opacity: .78 !important;
}
@media (max-width: 720px) {
  .lobbySiteInfoButton {
    left: 68px !important;
    right: auto !important;
    top: 22px !important;
  }
}


/* ===== ver163: 사이트 정보 조작법 - 태블릿 환경 전용 조이스틱 안내 ===== */
.pcControlGuide {
  display: block;
}

.tabletControlGuide {
  display: none;
}

body.tablet-device .pcControlGuide,
body.device-layout-forced-tablet .pcControlGuide {
  display: none !important;
}

body.tablet-device .tabletControlGuide,
body.device-layout-forced-tablet .tabletControlGuide {
  display: block !important;
}

.tabletControlVisual {
  position: relative;
  width: min(620px, 100%);
  aspect-ratio: 16 / 9;
  margin: 2px auto 20px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 24% 74%, rgba(0,122,255,0.14), transparent 24%),
    radial-gradient(circle at 76% 74%, rgba(255,45,85,0.13), transparent 24%),
    linear-gradient(180deg, rgba(248,250,252,0.96), rgba(226,232,240,0.96));
  border: 8px solid #111827;
  box-shadow: 0 20px 44px rgba(15,23,42,0.16), inset 0 0 0 1px rgba(255,255,255,0.78);
  overflow: hidden;
}

.tabletControlVisual::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 13px;
  width: 56px;
  height: 5px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(17,24,39,0.22);
}

.tabletPlayArea {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 20%;
  bottom: 27%;
  border-radius: 24px;
  background:
    linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px),
    rgba(255,255,255,0.44);
  background-size: 34px 34px;
  border: 1px solid rgba(15,23,42,0.06);
}

.tabletJoystick {
  position: absolute;
  bottom: 9%;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 12px 28px rgba(15,23,42,0.12), inset 0 0 0 1px rgba(255,255,255,0.62);
}

.tabletJoystick.left {
  left: 7%;
}

.tabletJoystick.right {
  right: 7%;
}

.tabletJoystick::before {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  border: 3px solid rgba(17,24,39,0.16);
}

.tabletJoystick::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #111827;
  box-shadow: 0 8px 16px rgba(15,23,42,0.20);
}

.tabletJoystick.left::after {
  background: #007aff;
}

.tabletJoystick.right::after {
  background: #ff2d55;
}

.tabletPlayerLabel {
  position: absolute;
  bottom: calc(9% + 122px);
  min-width: 94px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
  text-align: center;
  box-shadow: 0 10px 20px rgba(15,23,42,0.14);
}

.tabletPlayerLabel.left {
  left: calc(7% + 11px);
  background: #007aff;
}

.tabletPlayerLabel.right {
  right: calc(7% + 11px);
  background: #ff2d55;
}

.tabletControlHint {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 760px) {
  .tabletControlVisual {
    border-width: 6px;
    border-radius: 26px;
  }

  .tabletJoystick {
    width: 82px;
    height: 82px;
  }

  .tabletJoystick::before {
    inset: 17px;
  }

  .tabletJoystick::after {
    width: 28px;
    height: 28px;
  }

  .tabletPlayerLabel {
    bottom: calc(9% + 86px);
    min-width: 68px;
    font-size: 11px;
    padding: 6px 8px;
  }

  .tabletControlHint {
    grid-template-columns: 1fr;
  }
}


/* ===== ver164: 태블릿 로비 상단 아이콘 간격 최종 보정 ===== */
body.tablet-device.mobile-landscape #lobby .lobbyHelpButton,
body.device-layout-forced-tablet.mobile-landscape #lobby .lobbyHelpButton {
  left: 22px !important;
  right: auto !important;
  top: 22px !important;
}

body.tablet-device.mobile-landscape #lobby .lobbySiteInfoButton,
body.device-layout-forced-tablet.mobile-landscape #lobby .lobbySiteInfoButton {
  left: 68px !important;
  right: auto !important;
  top: 22px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  transform: none !important;
  opacity: 1 !important;
  z-index: 8 !important;
}

body.tablet-device.mobile-landscape #lobby .lobbyLangButton,
body.device-layout-forced-tablet.mobile-landscape #lobby .lobbyLangButton {
  left: 114px !important;
  right: auto !important;
  top: 22px !important;
}

body.tablet-device.mobile-landscape #lobby .lobbyPrivacyButton,
body.device-layout-forced-tablet.mobile-landscape #lobby .lobbyPrivacyButton {
  left: 160px !important;
  right: auto !important;
  top: 22px !important;
}

body.tablet-device.mobile-landscape #lobby .lobbySettingsButton,
body.device-layout-forced-tablet.mobile-landscape #lobby .lobbySettingsButton {
  left: 206px !important;
  right: auto !important;
  top: 22px !important;
  display: inline-flex !important;
}

body.tablet-device.mobile-landscape #lobby .lobbyHelpButton,
body.tablet-device.mobile-landscape #lobby .lobbySiteInfoButton,
body.tablet-device.mobile-landscape #lobby .lobbyLangButton,
body.tablet-device.mobile-landscape #lobby .lobbyPrivacyButton,
body.tablet-device.mobile-landscape #lobby .lobbySettingsButton,
body.device-layout-forced-tablet.mobile-landscape #lobby .lobbyHelpButton,
body.device-layout-forced-tablet.mobile-landscape #lobby .lobbySiteInfoButton,
body.device-layout-forced-tablet.mobile-landscape #lobby .lobbyLangButton,
body.device-layout-forced-tablet.mobile-landscape #lobby .lobbyPrivacyButton,
body.device-layout-forced-tablet.mobile-landscape #lobby .lobbySettingsButton {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  transform: none !important;
  opacity: 1 !important;
}


/* ===== ver166: 지구본 언어 드롭다운 + 중국어 추가 UI ===== */
.languageSelectWrap {
  position: absolute;
  left: 114px;
  top: 22px;
  z-index: 18;
  width: 38px;
  height: 38px;
}

.languageSelectWrap .lobbyLangButton {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  font-size: 19px !important;
}

.languageDropdownMenu {
  position: absolute;
  left: 0;
  top: 46px;
  display: none;
  min-width: 132px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 18px 44px rgba(15,23,42,0.16), inset 0 0 0 1px rgba(255,255,255,0.58);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.languageSelectWrap.open .languageDropdownMenu {
  display: grid;
  gap: 5px;
}

.languageDropdownMenu button {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 9px 10px;
  background: transparent;
  color: #111827;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.languageDropdownMenu button:hover,
.languageDropdownMenu button.selected {
  background: rgba(0,122,255,0.10);
  color: #007aff;
}

body.dark-mode .languageDropdownMenu {
  background: rgba(28,31,38,0.92);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 18px 44px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.06);
}

body.dark-mode .languageDropdownMenu button {
  color: #f5f7fb;
}

body.dark-mode .languageDropdownMenu button:hover,
body.dark-mode .languageDropdownMenu button.selected {
  background: rgba(10,132,255,0.20);
  color: #8ee8ff;
}

body.mobile-device.mobile-landscape #languageToggle {
  transform: none !important;
  opacity: 1 !important;
}

body.tablet-device.mobile-landscape #lobby .languageSelectWrap,
body.device-layout-forced-tablet.mobile-landscape #lobby .languageSelectWrap {
  left: 114px !important;
  right: auto !important;
  top: 22px !important;
  width: 38px !important;
  height: 38px !important;
  z-index: 18 !important;
}

body.tablet-device.mobile-landscape #lobby .languageDropdownMenu,
body.device-layout-forced-tablet.mobile-landscape #lobby .languageDropdownMenu {
  top: 46px !important;
  min-width: 132px !important;
}

body.tablet-device.mobile-landscape #lobby .lobbyPrivacyButton,
body.device-layout-forced-tablet.mobile-landscape #lobby .lobbyPrivacyButton {
  left: 160px !important;
}

body.tablet-device.mobile-landscape #lobby .lobbySettingsButton,
body.device-layout-forced-tablet.mobile-landscape #lobby .lobbySettingsButton {
  left: 206px !important;
}



/* ===== ver167: 일본어 타이틀 전용 폰트/색감/애니메이션 ===== */
@font-face {
  font-family: 'DegulJapaneseTitleFont';
  src: url('../fonts/ver212-font-03.ttf') format('truetype');
  font-display: swap;
}

.titleRollText.japaneseTitle {
  font-family: 'DegulJapaneseTitleFont', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif !important;
  gap: 3px !important;
  letter-spacing: -0.045em !important;
  color: transparent !important;
  background: linear-gradient(180deg, #ff9fc4 0%, #ff6f9f 44%, #ffd166 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 9px 0 rgba(255,255,255,0.82)) drop-shadow(0 12px 18px rgba(255, 143, 179, 0.22));
}

.titleRollText.japaneseTitle .titleRollChar {
  font-family: 'DegulJapaneseTitleFont', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif !important;
  transform-origin: 50% 62%;
  animation-name: charRollRightJapanese;
}

body.dark-mode .titleRollText.japaneseTitle {
  background: linear-gradient(180deg, #ffb4d1 0%, #ff7eae 44%, #ffe08a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 8px 0 rgba(255,255,255,0.70)) drop-shadow(0 14px 22px rgba(255, 143, 179, 0.26));
}

@keyframes charRollRightJapanese {
  0%   { transform: translateX(0) translateY(0) rotate(0deg); }
  28%  { transform: translateX(11px) translateY(-6px) rotate(96deg); }
  56%  { transform: translateX(22px) translateY(0) rotate(205deg); }
  72%  { transform: translateX(22px) translateY(0) rotate(360deg); }
  100% { transform: translateX(0) translateY(0) rotate(360deg); }
}

@media (max-width: 720px) {
  .titleRollText.japaneseTitle { font-size: 40px !important; }
}


/* ===== ver168: 중국어 타이틀 전용 폰트/색감/애니메이션 ===== */
@font-face {
  font-family: 'DegulChineseTitleFont';
  src: url('../fonts/ver212-font-04.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.titleRollText.chineseTitle {
  font-family: 'DegulChineseTitleFont', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif !important;
  gap: 3px !important;
  letter-spacing: -0.045em !important;
  color: transparent !important;
  background: linear-gradient(180deg, #ff9fc4 0%, #ff6f9f 44%, #ffd166 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 9px 0 rgba(255,255,255,0.82)) drop-shadow(0 12px 18px rgba(255, 143, 179, 0.22));
}

.titleRollText.chineseTitle .titleRollChar {
  font-family: 'DegulChineseTitleFont', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif !important;
  transform-origin: 50% 62%;
  animation-name: charRollRightChinese;
}

body.dark-mode .titleRollText.chineseTitle {
  background: linear-gradient(180deg, #ffb4d1 0%, #ff7eae 44%, #ffe08a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 8px 0 rgba(255,255,255,0.70)) drop-shadow(0 14px 22px rgba(255, 143, 179, 0.26));
}

@keyframes charRollRightChinese {
  0%   { transform: translateX(0) translateY(0) rotate(0deg); }
  28%  { transform: translateX(11px) translateY(-6px) rotate(96deg); }
  56%  { transform: translateX(22px) translateY(0) rotate(205deg); }
  72%  { transform: translateX(22px) translateY(0) rotate(360deg); }
  100% { transform: translateX(0) translateY(0) rotate(360deg); }
}

@media (max-width: 720px) {
  .titleRollText.chineseTitle { font-size: 40px !important; }
}


/* ===== ver174: 전체 언어 타이틀 다크모드 흰색 글로우 통일 =====
   한국어/영어/일본어/중국어 타이틀을 다크모드에서 모두 같은 흰색 + 흰 글로우로 통일한다.
   기존 폰트와 구르는 애니메이션은 유지한다. */
body.dark-mode .titleRollText,
body.dark-mode .titleRollText.englishTitle,
body.dark-mode .titleRollText.japaneseTitle,
body.dark-mode .titleRollText.chineseTitle {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.80))
    drop-shadow(0 0 16px rgba(255,255,255,0.58))
    drop-shadow(0 0 26px rgba(255,255,255,0.36)) !important;
  text-shadow:
    0 0 8px rgba(255,255,255,0.80),
    0 0 16px rgba(255,255,255,0.58),
    0 0 26px rgba(255,255,255,0.36) !important;
}

body.dark-mode .titleRollText .titleRollChar,
body.dark-mode .titleRollText.englishTitle .titleRollChar,
body.dark-mode .titleRollText.japaneseTitle .titleRollChar,
body.dark-mode .titleRollText.chineseTitle .titleRollChar {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  text-shadow:
    0 0 8px rgba(255,255,255,0.80),
    0 0 16px rgba(255,255,255,0.58),
    0 0 26px rgba(255,255,255,0.36) !important;
}

body.dark-mode .titleRollText .titleSpace {
  text-shadow: none !important;
}



/* ===== 요청 수정: 다크모드 전체 언어 타이틀 글로우 완전 제거 ===== */
body.dark-mode .lobbyCard h1,
body.dark-mode .titleLoop,
body.dark-mode .titleRollText,
body.dark-mode .titleRollText.englishTitle,
body.dark-mode .titleRollText.japaneseTitle,
body.dark-mode .titleRollText.chineseTitle,
body.dark-mode .titleRollText .titleRollChar,
body.dark-mode .titleRollText.englishTitle .titleRollChar,
body.dark-mode .titleRollText.japaneseTitle .titleRollChar,
body.dark-mode .titleRollText.chineseTitle .titleRollChar,
body.dark-mode .titleRollText .titleSpace {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  text-shadow: none !important;
  filter: none !important;
}


/* ===== ver176 요청 수정: 직관형 승패 결과 UI ===== */
#message.resultPanelV2 {
  width: min(760px, calc(100vw - 40px)) !important;
  padding: 22px 24px 24px !important;
  border-radius: 34px !important;
  text-align: center !important;
  overflow: hidden;
}

.resultTimerBar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 176px;
  padding: 10px 16px;
  margin: 0 auto 16px;
  border-radius: 999px;
  color: var(--text-main, #111827);
  background: rgba(248,250,252,0.78);
  border: 1px solid rgba(0,0,0,0.07);
  font-weight: 900;
  letter-spacing: -0.025em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.62);
}

.resultTimerLabel {
  font-size: 12px;
  color: var(--text-sub, #6b7280);
  font-weight: 850;
}

.resultTimerValue {
  font-size: 19px;
  color: var(--text-main, #111827);
  font-variant-numeric: tabular-nums;
}

.resultTitleV2 {
  margin: 0 0 4px !important;
  font-size: clamp(30px, 4vw, 46px) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -0.075em !important;
}

.resultSubtitleV2 {
  margin: 0 0 18px;
  color: var(--text-sub, #6b7280);
  font-size: 15px;
  font-weight: 750;
}

.resultVsBoard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 14px;
  margin: 12px 0 16px;
}

.resultPlayerCard {
  position: relative;
  min-height: 174px;
  padding: 20px 18px 18px;
  border-radius: 28px;
  background: rgba(255,255,255,0.56);
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.58);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: .72;
  transform: scale(.985);
  transition: transform .2s ease, opacity .2s ease;
}

.resultPlayerCard.winner {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(52,199,89,0.45);
  box-shadow: 0 16px 38px rgba(52,199,89,0.16), inset 0 0 0 1px rgba(255,255,255,0.7);
}

.resultPlayerCard.loser {
  filter: saturate(.82);
}

.resultPlayerCard.draw {
  opacity: 1;
  transform: scale(1);
}

.resultBadge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  color: #111827;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(0,0,0,0.06);
}

.resultPlayerCard.winner .resultBadge {
  background: rgba(52,199,89,0.18);
  color: #15803d;
}

.resultPlayerCard.loser .resultBadge {
  background: rgba(239,68,68,0.12);
  color: #b91c1c;
}

.resultBlockIcon {
  width: 70px;
  height: 70px;
  border-radius: 22px;
  background: var(--result-block-color, #0a84ff);
  box-shadow: 0 16px 26px rgba(15,23,42,0.18), inset 0 0 0 5px rgba(255,255,255,0.32), inset -12px -14px 20px rgba(0,0,0,0.12), inset 10px 10px 18px rgba(255,255,255,0.32);
  transform: rotate(-8deg);
}

.resultPlayerCard.p2 .resultBlockIcon { transform: rotate(8deg); }
.resultPlayerCard.winner .resultBlockIcon { animation: resultWinnerBounce 1.1s ease-in-out infinite; }

@keyframes resultWinnerBounce {
  0%, 100% { transform: translateY(0) rotate(-8deg) scale(1); }
  50% { transform: translateY(-7px) rotate(4deg) scale(1.06); }
}
.resultPlayerCard.p2.winner .resultBlockIcon {
  animation-name: resultWinnerBounceP2;
}
@keyframes resultWinnerBounceP2 {
  0%, 100% { transform: translateY(0) rotate(8deg) scale(1); }
  50% { transform: translateY(-7px) rotate(-4deg) scale(1.06); }
}

.resultPlayerName {
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.055em;
  color: var(--text-main, #111827);
}

.resultScoreLine {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: center;
  color: var(--text-sub, #6b7280);
  font-weight: 800;
}

.resultScoreLine strong {
  color: var(--text-main, #111827);
  font-size: 24px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.resultVsMark {
  align-self: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(17,24,39,0.92);
  color: white;
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(17,24,39,0.18);
}

.resultReasonBox {
  margin: 12px auto 0;
  padding: 15px 17px;
  border-radius: 22px;
  background: rgba(248,250,252,0.78);
  border: 1px solid rgba(0,0,0,0.07);
  color: var(--text-sub, #6b7280);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 750;
  text-align: center;
}

.resultReasonBox b {
  display: block;
  margin-bottom: 3px;
  color: var(--text-main, #111827) !important;
  font-size: 14px;
  font-weight: 950;
}

.resultActions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

#message .resultActions button {
  margin-top: 0 !important;
  padding: 13px 22px !important;
  min-width: 138px;
  border-radius: 999px !important;
  font-size: 15px;
}

#message .resultActions .secondary {
  background: rgba(17,24,39,0.08) !important;
  color: var(--text-main, #111827) !important;
  box-shadow: none !important;
}

body.dark-mode .resultTimerBar,
body.dark-mode .resultPlayerCard,
body.dark-mode .resultReasonBox {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

body.dark-mode .resultBadge {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.10);
  color: #f5f7fb;
}

body.dark-mode #message .resultActions .secondary {
  background: rgba(255,255,255,0.12) !important;
  color: #f5f7fb !important;
}

body.dark-mode .resultVsMark {
  background: rgba(245,247,251,0.92);
  color: #111827;
}

@media (max-width: 720px) {
  #message.resultPanelV2 { width: min(520px, calc(100vw - 26px)) !important; padding: 18px 16px !important; }
  .resultVsBoard { grid-template-columns: 1fr; gap: 10px; }
  .resultVsMark { width: 44px; height: 44px; margin: -2px auto; }
  .resultPlayerCard { min-height: 132px; padding: 18px 14px 14px; }
  .resultBlockIcon { width: 54px; height: 54px; border-radius: 18px; }
  .resultActions { flex-direction: column; }
  #message .resultActions button { width: 100%; }
}

/* ===== ver179 요청 수정: 승패 결과 UI AI 블럭 = 실제 인게임 AI 블럭 스킨 동기화 ===== */
.resultBlockIcon {
  background: var(--result-block-color) !important;
}

.resultPlayerCard.resultSkin-gift:not([data-result-ai="true"]) .resultBlockIcon {
  background:
    linear-gradient(90deg, transparent 42%, rgba(255,255,255,0.95) 42% 58%, transparent 58%),
    linear-gradient(0deg, transparent 42%, rgba(255,255,255,0.95) 42% 58%, transparent 58%),
    linear-gradient(145deg, #ff7898 0%, #ff2f63 58%, #c91644 100%) !important;
}

.resultPlayerCard.resultSkin-ice:not([data-result-ai="true"]) .resultBlockIcon {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.82) 0 12%, transparent 12% 26%, rgba(255,255,255,0.42) 26% 34%, transparent 34%),
    linear-gradient(145deg, #f3fbff 0%, #9fe7ff 55%, #46a8ff 100%) !important;
}

.resultPlayerCard.resultSkin-rainbow:not([data-result-ai="true"]) .resultBlockIcon {
  background: linear-gradient(135deg, #ff3b30, #ff9500, #ffd60a, #34c759, #0a84ff, #3348ff, #af52de) !important;
}

.resultPlayerCard.resultSkin-chocolate:not([data-result-ai="true"]) .resultBlockIcon {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.14) 1px, transparent 1px),
    linear-gradient(145deg, #8a4a24 0%, #5b2e17 55%, #2c140b 100%) !important;
  background-size: 50% 50%, 50% 50%, 100% 100% !important;
}

.resultPlayerCard.resultSkin-chess:not([data-result-ai="true"]) .resultBlockIcon {
  background:
    radial-gradient(circle at 58% 34%, #f8fafc 0 8%, transparent 9%),
    linear-gradient(135deg, transparent 0 36%, rgba(248,250,252,0.92) 37% 52%, transparent 53%),
    repeating-conic-gradient(#f8fafc 0% 25%, #111827 0% 50%) 50% / 50% 50% !important;
  position: relative;
}
.resultPlayerCard.resultSkin-chess:not([data-result-ai="true"]) .resultBlockIcon::after {
  content: "♞";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f8fafc;
  font-size: 34px;
  line-height: 1;
  text-shadow: 0 3px 0 #020617, 0 0 9px rgba(2,6,23,0.65);
}

.resultPlayerCard.resultSkin-extreme .resultBlockIcon,
.resultPlayerCard.aiDifficulty-extreme .resultBlockIcon {
  background: #843cff !important;
  box-shadow:
    0 0 0 5px rgba(255,255,255,0.25),
    0 0 18px rgba(132,60,255,0.70),
    0 0 34px rgba(216,180,254,0.42),
    0 16px 26px rgba(15,23,42,0.18) !important;
  animation: resultExtremeIngameSparkle 1.05s ease-in-out infinite;
}

.resultPlayerCard.resultSkin-hell .resultBlockIcon,
.resultPlayerCard.aiDifficulty-hell .resultBlockIcon {
  background: #2a0000 !important;
  box-shadow:
    0 0 0 5px rgba(255,255,255,0.18),
    0 0 18px rgba(255,69,0,0.72),
    0 0 36px rgba(255,176,0,0.45),
    0 16px 26px rgba(15,23,42,0.18) !important;
  animation: resultHellIngameSparkle .9s ease-in-out infinite;
}

.resultPlayerCard.resultSkin-chaos .resultBlockIcon,
.resultPlayerCard.aiDifficulty-chaos .resultBlockIcon {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.16) 1px, transparent 1px),
    #00ff78 !important;
  background-size: 14px 14px, 14px 14px, 100% 100% !important;
  box-shadow:
    0 0 0 5px rgba(255,255,255,0.20),
    0 0 18px rgba(0,255,120,0.78),
    0 0 38px rgba(0,255,204,0.46),
    0 16px 26px rgba(15,23,42,0.18) !important;
  animation: resultChaosIngameGlitch .85s steps(2, end) infinite, resultChaosIngamePulse 1.15s ease-in-out infinite;
}

.resultPlayerCard.resultSkin-ghost:not([data-result-ai="true"]) .resultBlockIcon {
  border-radius: 50% 50% 42% 42%;
  background:
    radial-gradient(circle at 35% 42%, #111827 0 5%, transparent 6%),
    radial-gradient(circle at 65% 42%, #111827 0 5%, transparent 6%),
    linear-gradient(145deg, #ffffff 0%, #e9edf5 70%, #bfc5cf 100%) !important;
}

.resultPlayerCard.aiDifficulty-easy .resultBlockIcon { background: #34c759 !important; }
.resultPlayerCard.aiDifficulty-normal .resultBlockIcon { background: #0a84ff !important; }
.resultPlayerCard.aiDifficulty-hard .resultBlockIcon { background: #ff3b30 !important; }
.resultPlayerCard.aiDifficulty-superhard .resultBlockIcon { background: #ff2d95 !important; }

@keyframes resultExtremeIngameSparkle {
  0%, 100% { filter: brightness(1) saturate(1); transform: translateY(0) scale(1); }
  50% { filter: brightness(1.24) saturate(1.14); transform: translateY(-1px) scale(1.035); }
}

@keyframes resultHellIngameSparkle {
  0%, 100% { filter: brightness(1) saturate(1); transform: translateY(0) scale(1); }
  50% { filter: brightness(1.30) saturate(1.20); transform: translateY(-1px) scale(1.035); }
}

@keyframes resultChaosIngamePulse {
  0%, 100% { filter: brightness(1) saturate(1.05); transform: translateY(0) scale(1); }
  50% { filter: brightness(1.32) saturate(1.28); transform: translateY(-1px) scale(1.04); }
}

@keyframes resultChaosIngameGlitch {
  0%, 100% { background-position: 0 0, 0 0, 0 0; }
  50% { background-position: 7px 0, 0 7px, 0 0; }
}



/* ===== 요청 수정: 인게임 상단 중앙 Google AdSense 배너 + 점수 UI 우측 상단 이동 ===== */
#gameAdBanner {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 14;
  width: min(970px, calc(100vw - 48px));
  max-width: 970px;
  min-width: 728px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  border-radius: 14px;
  color: rgba(17, 24, 39, 0.42);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.42), rgba(248,250,252,0.24)),
    repeating-linear-gradient(-45deg, rgba(15,23,42,0.030) 0 8px, rgba(255,255,255,0.040) 8px 16px);
  border: 1px dashed rgba(17, 24, 39, 0.13);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045), inset 0 0 0 1px rgba(255,255,255,0.28);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.035em;
}

#gameAdBanner::before {
  content: "AD";
  position: absolute;
  left: 14px;
  top: 9px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(17,24,39,0.08);
  color: rgba(17,24,39,0.46);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.05em;
}

#scoreUI.scoreGaugeUI,
#scoreUI {
  top: 86px !important;
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(720px, calc(100vw - 48px)) !important;
  padding: 5px 9px !important;
  border-radius: 14px !important;
  z-index: 22 !important;
  background: rgba(255,255,255,0.48) !important;
  border-color: rgba(15,23,42,0.08) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,0.055), inset 0 0 0 1px rgba(255,255,255,0.34) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}

#scoreUI .scoreTopRow {
  grid-template-columns: 96px 1fr 96px !important;
  gap: 8px !important;
}

#scoreUI .scoreCard {
  padding: 5px 7px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

#scoreUI .scoreName {
  font-size: 11px !important;
}

#scoreUI .scoreValue {
  font-size: 15px !important;
}

#scoreUI .scorePercent {
  font-size: 10px !important;
}

#scoreUI .scoreGaugeInfo {
  grid-template-columns: 64px 1fr 64px !important;
  gap: 5px !important;
  margin: 0 2px 3px !important;
  font-size: 10px !important;
}

#scoreUI #leaderText {
  font-size: 13px !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums !important;
}

#scoreUI .territoryGauge {
  height: 10px !important;
}

body.dark-mode #gameAdBanner {
  color: rgba(245, 247, 251, 0.52);
  background:
    linear-gradient(135deg, rgba(15,23,42,0.38), rgba(15,23,42,0.22)),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.025) 0 8px, rgba(255,255,255,0.045) 8px 16px);
  border-color: rgba(245, 247, 251, 0.13);
}

@media (max-width: 1440px) {
  #gameAdBanner {
    width: min(728px, calc(100vw - 48px));
    min-width: 620px;
  }
}

@media (max-width: 1180px) {
  #gameAdBanner {
    width: min(620px, calc(100vw - 32px));
    min-width: 0;
    height: 54px;
    border-radius: 12px;
    font-size: 14px;
  }

  #gameAdBanner::before {
    left: 10px;
    top: 8px;
    font-size: 9px;
    padding: 3px 7px;
  }

  #scoreUI.scoreGaugeUI,
  #scoreUI {
    top: 68px !important;
    width: min(620px, calc(100vw - 32px)) !important;
    padding: 4px 8px !important;
  }
}

@media (max-width: 980px) {
  #scoreUI.scoreGaugeUI,
  #scoreUI {
    width: min(560px, calc(100vw - 24px)) !important;
  }
}



/* ===== ver195 수정: 기록/랭킹 날개탭 - 카드에 붙어서 오른쪽으로 펼침 + 텍스트 대비 보정 ===== */
#lobby .lobbyCard { overflow: visible !important; }

#lobby .lobbyCard .lobbyWingStack {
  left: 100% !important;
  right: auto !important;
  top: 96px !important;
  z-index: 6 !important;
  gap: 12px !important;
  align-items: flex-start !important;
  pointer-events: none !important;
}

#lobby .lobbyCard .lobbyWingTab,
#lobby .lobbyCard button.lobbyWingTab {
  pointer-events: auto !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 66px !important;
  min-height: 66px !important;
  padding: 0 14px !important;
  gap: 10px !important;
  overflow: hidden !important;
  transform: translateX(0) !important;
  border-radius: 0 18px 18px 0 !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  border-left: 0 !important;
  color: #111827 !important;
  box-shadow: 12px 14px 28px rgba(15,23,42,0.14), inset 0 0 0 1px rgba(255,255,255,0.60) !important;
  transition: width .22s cubic-bezier(.2,.8,.2,1), min-width .22s cubic-bezier(.2,.8,.2,1), background .18s ease, box-shadow .18s ease !important;
}

#lobby .lobbyCard .lobbyWingTab.record,
#lobby .lobbyCard button.lobbyWingTab.record {
  background: linear-gradient(180deg, #d9f0ff 0%, #aeddff 100%) !important;
  color: #315d7d !important;
  --wing-accent: #79bde8;
}

#lobby .lobbyCard .lobbyWingTab.ranking,
#lobby .lobbyCard button.lobbyWingTab.ranking {
  background: linear-gradient(180deg, #ffe4ee 0%, #ffc1d6 100%) !important;
  color: #87465f !important;
  --wing-accent: #ff8fb3;
}

#lobby .lobbyCard .lobbyWingTab:hover,
#lobby .lobbyCard .lobbyWingTab:focus-visible,
#lobby .lobbyCard button.lobbyWingTab:hover,
#lobby .lobbyCard button.lobbyWingTab:focus-visible {
  width: 136px !important;
  min-width: 136px !important;
  transform: translateX(0) !important;
  box-shadow: 16px 18px 36px rgba(15,23,42,0.18), 0 0 0 3px rgba(255,255,255,0.72), inset 0 0 0 1px rgba(255,255,255,0.72) !important;
}

#lobby .lobbyCard .lobbyWingIcon {
  flex: 0 0 18px !important;
  width: 18px !important;
  color: currentColor !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.16) !important;
}

#lobby .lobbyCard .lobbyWingLabel {
  color: currentColor !important;
  text-shadow: none !important;
  opacity: 0 !important;
  max-width: 0 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em !important;
}

#lobby .lobbyCard .lobbyWingTab:hover .lobbyWingLabel,
#lobby .lobbyCard .lobbyWingTab:focus-visible .lobbyWingLabel {
  opacity: 1 !important;
  max-width: 90px !important;
}

body.dark-mode #lobby .lobbyCard .lobbyWingTab.record,
body.dark-mode #lobby .lobbyCard button.lobbyWingTab.record {
  background: linear-gradient(180deg, #cceaff 0%, #9fd4f7 100%) !important;
  color: #264f6d !important;
}

body.dark-mode #lobby .lobbyCard .lobbyWingTab.ranking,
body.dark-mode #lobby .lobbyCard button.lobbyWingTab.ranking {
  background: linear-gradient(180deg, #ffd8e6 0%, #f7aec7 100%) !important;
  color: #71394e !important;
}

@media (max-width: 720px) {
  #lobby .lobbyCard .lobbyWingStack {
    left: auto !important;
    right: 14px !important;
    top: auto !important;
    bottom: -54px !important;
    flex-direction: row !important;
  }
  #lobby .lobbyCard .lobbyWingTab,
  #lobby .lobbyCard button.lobbyWingTab {
    width: 46px !important;
    min-width: 46px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    border-left: 1px solid rgba(15,23,42,0.10) !important;
  }
  #lobby .lobbyCard .lobbyWingTab:hover,
  #lobby .lobbyCard .lobbyWingTab:focus-visible,
  #lobby .lobbyCard button.lobbyWingTab:hover,
  #lobby .lobbyCard button.lobbyWingTab:focus-visible {
    width: 118px !important;
    min-width: 118px !important;
  }
}



/* ===== 요청 수정: 다크모드/라이트모드 부드러운 전환 ===== */
:root {
  --theme-transition-duration: 420ms;
  --theme-transition-ease: cubic-bezier(.22, .61, .36, 1);
}

html,
body,
#lobby,
#countdownOverlay,
#ui,
#scoreUI,
#message,
.lobbyCard,
.playerSelectBox,
.scoreCard,
.readyBox,
.modeButton,
.ghostToggleBox,
.itemGuideCard,
.classicGuideStep,
#classicCountdownGuide,
#ghostCountdownGuide,
#themeToggle,
#soundToggle,
#pauseMenuButton,
#gameAdBanner,
.wingTab,
.wingTabInner,
.recordWingTab,
.rankWingTab,
.leaderboardWingTab,
.settingsPanel,
.settingsPopup,
.pauseMenuPanel {
  transition:
    background-color var(--theme-transition-duration) var(--theme-transition-ease),
    background var(--theme-transition-duration) var(--theme-transition-ease),
    color var(--theme-transition-duration) var(--theme-transition-ease),
    border-color var(--theme-transition-duration) var(--theme-transition-ease),
    box-shadow var(--theme-transition-duration) var(--theme-transition-ease),
    text-shadow var(--theme-transition-duration) var(--theme-transition-ease),
    opacity var(--theme-transition-duration) var(--theme-transition-ease),
    filter var(--theme-transition-duration) var(--theme-transition-ease),
    backdrop-filter var(--theme-transition-duration) var(--theme-transition-ease),
    -webkit-backdrop-filter var(--theme-transition-duration) var(--theme-transition-ease) !important;
}

.lobbyCard *,
#scoreUI *,
#ui *,
#message *,
#classicCountdownGuide *,
#ghostCountdownGuide *,
#itemCountdownGuide *,
.wingTab *,
.recordWingTab *,
.rankWingTab *,
.leaderboardWingTab * {
  transition:
    color var(--theme-transition-duration) var(--theme-transition-ease),
    background-color var(--theme-transition-duration) var(--theme-transition-ease),
    border-color var(--theme-transition-duration) var(--theme-transition-ease),
    box-shadow var(--theme-transition-duration) var(--theme-transition-ease),
    text-shadow var(--theme-transition-duration) var(--theme-transition-ease),
    opacity var(--theme-transition-duration) var(--theme-transition-ease) !important;
}

#themeFadeOverlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms var(--theme-transition-ease);
  will-change: opacity;
}

body.theme-transitioning #themeFadeOverlay {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html, body, #lobby, #countdownOverlay, #ui, #scoreUI, #message, .lobbyCard, .playerSelectBox, .scoreCard, .readyBox, .modeButton, .ghostToggleBox, .itemGuideCard, .classicGuideStep, #classicCountdownGuide, #ghostCountdownGuide, #themeToggle, #soundToggle, #pauseMenuButton, #gameAdBanner {
    transition-duration: 0ms !important;
  }
  #themeFadeOverlay { transition-duration: 0ms !important; }
}

/* ===== 요청 수정: 메인 패널 하단 슬라이드 전환 + 실시간 온라인 매칭 UI ===== */
.lobbyPanelSlider {
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}

.lobbyPanelSlider.is-dragging {
  cursor: grabbing;
}

.lobbyPanelTrack {
  display: flex;
  width: 200%;
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.lobbyCard.online-match-active .lobbyPanelTrack {
  transform: translateX(-50%);
}

.lobbyPanelSlide {
  width: 50%;
  flex: 0 0 50%;
  box-sizing: border-box;
  padding: 0;
}

.onlineMatchSlide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 395px;
}

.onlineMatchPanel {
  width: min(520px, 100%);
  margin: 16px auto 0;
  padding: 24px 24px 22px;
  border-radius: 30px;
  background: rgba(255,255,255,0.54);
  border: 1px solid rgba(0,0,0,0.065);
  box-shadow: 0 18px 44px rgba(15,23,42,0.10), inset 0 0 0 1px rgba(255,255,255,0.56);
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
}

.onlineMatchBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(0,122,255,0.10);
  color: #007aff;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .02em;
  margin-bottom: 10px;
}

.onlineMatchPanel h2 {
  margin: 0 0 8px;
  color: var(--text-main);
  font-size: 28px;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -0.055em;
}

.onlineMatchLead {
  margin: 0 0 22px !important;
  color: var(--text-sub) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 700;
}

.onlineColorSelectBox {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: center;
  margin: 0 auto 20px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(248,250,252,0.74);
  border: 1px solid rgba(0,0,0,0.06);
}

.onlineColorPreview {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  margin: 0 auto;
  background: var(--online-match-color, #64beff);
  box-shadow: 0 10px 22px rgba(15,23,42,0.14), inset 0 0 0 3px rgba(255,255,255,0.72);
}

.onlineColorInfo {
  text-align: left;
}

.onlineColorInfo strong {
  display: block;
  color: var(--text-main);
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 10px;
}

.onlineColorPalette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lobbyCard button.onlineColorChip,
button.onlineColorChip {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 11px !important;
  background: var(--chip-color) !important;
  border: 2px solid rgba(255,255,255,0.92) !important;
  box-shadow: 0 5px 10px rgba(15,23,42,0.12), inset 0 0 0 1px rgba(255,255,255,0.32) !important;
}

.lobbyCard button.onlineColorChip.selected,
button.onlineColorChip.selected {
  transform: scale(1.1);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.22), 0 8px 15px rgba(15,23,42,0.16), inset 0 0 0 1px rgba(255,255,255,0.42) !important;
}

.lobbyCard button.onlineMatchStartButton,
button.onlineMatchStartButton {
  width: 100%;
  padding: 15px 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #111827, #334155) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 26px rgba(17,24,39,0.22) !important;
}

.onlineMatchPreviewDisabled {
  opacity: 0.62;
  filter: saturate(0.72);
}

.onlineMatchPreviewDisabled .onlineColorChip,
.lobbyCard button.onlineMatchStartButton:disabled,
button.onlineMatchStartButton:disabled {
  cursor: not-allowed !important;
}

.lobbyCard button.onlineMatchStartButton:disabled,
button.onlineMatchStartButton:disabled {
  background: linear-gradient(135deg, #94a3b8, #64748b) !important;
  box-shadow: 0 10px 20px rgba(71,85,105,0.16) !important;
  opacity: 0.78;
}

.onlineMatchStatus {
  min-height: 18px;
  margin-top: 10px;
  color: #ff8fb3;
  font-size: 13px;
  font-weight: 850;
}

.lobbyOnlineArrow {
  position: absolute;
  right: -50px;
  top: 50%;
  z-index: 7;
  transform: translateY(-50%);
  width: 42px;
  height: 82px;
  padding: 0 !important;
  border-radius: 0 22px 22px 0 !important;
  background: rgba(255,255,255,0.76) !important;
  color: #111827 !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: 0 16px 34px rgba(15,23,42,0.16), inset 0 0 0 1px rgba(255,255,255,0.55) !important;
  font-size: 34px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.lobbyOnlineArrow:hover {
  transform: translateY(-50%) translateX(3px);
  background: rgba(255,255,255,0.94) !important;
  box-shadow: 0 18px 38px rgba(15,23,42,0.20), 0 0 0 3px rgba(0,122,255,0.10) !important;
}

.lobbyCard.online-match-active .lobbyOnlineArrow {
  border-radius: 22px 0 0 22px !important;
}

.lobbyCard.online-match-active .lobbyOnlineArrow:hover {
  transform: translateY(-50%) translateX(-3px);
}

body.dark-mode .onlineMatchPanel,
body.dark-mode .onlineColorSelectBox {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 18px 44px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.05);
}

body.dark-mode .onlineMatchBadge {
  background: rgba(10,132,255,0.18);
  color: #d7ebff;
}

body.dark-mode .lobbyCard button.onlineMatchStartButton,
body.dark-mode button.onlineMatchStartButton {
  background: #f5f7fb !important;
  color: #111827 !important;
}

body.dark-mode .lobbyOnlineArrow {
  background: rgba(245,247,251,0.88) !important;
  color: #111827 !important;
}

body.dark-mode .onlineMatchStatus {
  color: #8ee8ff;
}

@media (max-width: 860px) {
  .lobbyOnlineArrow {
    right: 14px;
    top: auto;
    bottom: 14px;
    transform: none;
    width: 54px;
    height: 42px;
    border-radius: 999px !important;
    font-size: 26px !important;
  }

  .lobbyOnlineArrow:hover,
  .lobbyCard.online-match-active .lobbyOnlineArrow:hover {
    transform: translateY(-2px);
  }

  .onlineMatchSlide {
    min-height: 420px;
  }

  .onlineColorSelectBox {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .onlineColorInfo {
    text-align: center;
  }

  .onlineColorPalette {
    justify-content: center;
  }
}



/* ===== ver199 수정: 태블릿 로비 + 온라인 매칭 슬라이드 정렬 복구 ===== */
body.tablet-device.mobile-landscape #lobby {
  align-items: center !important;
  justify-content: center !important;
  padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body.tablet-device.mobile-landscape #lobby .lobbyCard {
  width: min(1040px, calc(100vw - 40px)) !important;
  height: min(588px, calc(100vh - 32px)) !important;
  max-width: calc(100vw - 40px) !important;
  max-height: calc(100vh - 32px) !important;
  padding: 20px 22px 18px !important;
  box-sizing: border-box !important;
  border-radius: 30px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 68px minmax(0, 1fr) !important;
  grid-template-areas:
    "top"
    "panel" !important;
  overflow: visible !important;
}

body.tablet-device.mobile-landscape .lobbyHelpButton { left: 22px !important; top: 20px !important; }
body.tablet-device.mobile-landscape .lobbySiteInfoButton { left: 66px !important; top: 20px !important; }
body.tablet-device.mobile-landscape .languageSelectWrap { left: 110px !important; top: 20px !important; }
body.tablet-device.mobile-landscape .lobbyPrivacyButton { left: 154px !important; top: 20px !important; }
body.tablet-device.mobile-landscape .lobbySettingsButton { display: inline-flex !important; left: 198px !important; top: 20px !important; }

body.tablet-device.mobile-landscape .lobbyHelpButton,
body.tablet-device.mobile-landscape .lobbySiteInfoButton,
body.tablet-device.mobile-landscape .lobbyLangButton,
body.tablet-device.mobile-landscape .lobbyPrivacyButton,
body.tablet-device.mobile-landscape .lobbySettingsButton {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  z-index: 12 !important;
}

body.tablet-device.mobile-landscape .lobbyKicker,
body.tablet-device.mobile-landscape .mobileRecommendNotice,
body.tablet-device.mobile-landscape .lobbyCard > p {
  display: none !important;
}

body.tablet-device.mobile-landscape .titleLoop {
  grid-area: top !important;
  justify-self: center !important;
  align-self: center !important;
  width: min(430px, 44vw) !important;
  height: 62px !important;
  min-height: 62px !important;
  margin: 0 !important;
  pointer-events: none !important;
}

body.tablet-device.mobile-landscape .titleRollText,
body.tablet-device.mobile-landscape .lobbyCard h1 {
  font-size: clamp(42px, 5vw, 56px) !important;
  line-height: 1 !important;
}

body.tablet-device.mobile-landscape .lobbyPanelSlider {
  grid-area: panel !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  cursor: default !important;
  touch-action: pan-y !important;
}

body.tablet-device.mobile-landscape .lobbyPanelTrack,
body.tablet-device.mobile-landscape .lobbyPanelSlide {
  height: 100% !important;
  min-height: 0 !important;
}

body.tablet-device.mobile-landscape .mainLobbySlide {
  display: grid !important;
  grid-template-columns: minmax(270px, 34%) minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: 112px 52px minmax(0, 1fr) 24px !important;
  grid-template-areas:
    "match p1 p2"
    "ai p1 p2"
    "mode p1 p2"
    "status status status" !important;
  column-gap: 14px !important;
  row-gap: 10px !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  padding-top: 4px !important;
  overflow: hidden !important;
}

body.tablet-device.mobile-landscape .matchSelectWrap {
  grid-area: match !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin: 0 !important;
  min-height: 0 !important;
}

body.tablet-device.mobile-landscape .aiDifficultyWrap {
  grid-area: ai !important;
  min-height: 0 !important;
  margin: 0 !important;
  align-self: stretch !important;
}

body.tablet-device.mobile-landscape .modeSelectWrap {
  grid-area: mode !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding-top: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

body.tablet-device.mobile-landscape .ghostToggleBox.ghostMiniToggle {
  right: 8px !important;
  top: -42px !important;
  width: 58px !important;
  height: 30px !important;
  z-index: 11 !important;
}

body.tablet-device.mobile-landscape .matchButton,
body.tablet-device.mobile-landscape .modeButton,
body.tablet-device.mobile-landscape #lobby .lobbyCard button.matchButton,
body.tablet-device.mobile-landscape #lobby .lobbyCard button.modeButton {
  min-height: 0 !important;
  height: 100% !important;
  padding: 11px 14px !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

body.tablet-device.mobile-landscape .matchButton strong,
body.tablet-device.mobile-landscape .modeButton strong { font-size: 15px !important; margin-bottom: 4px !important; }
body.tablet-device.mobile-landscape .matchButton span,
body.tablet-device.mobile-landscape .modeButton span { font-size: 11px !important; line-height: 1.22 !important; }

body.tablet-device.mobile-landscape .playerSelectWrap { display: contents !important; }
body.tablet-device.mobile-landscape .playerSelectWrap .playerSelectBox:nth-child(1) { grid-area: p1 !important; }
body.tablet-device.mobile-landscape .playerSelectWrap .playerSelectBox:nth-child(2) { grid-area: p2 !important; }

body.tablet-device.mobile-landscape .playerSelectBox {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 14px 12px 12px !important;
  border-radius: 22px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 20px 44px minmax(0, 1fr) 52px !important;
  gap: 9px !important;
  align-items: center !important;
  overflow: hidden !important;
}

body.tablet-device.mobile-landscape .playerSelectTitle {
  grid-column: 1 !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-align: center !important;
}

body.tablet-device.mobile-landscape .selectedPreview {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  margin: 0 auto !important;
  border-radius: 14px !important;
}

body.tablet-device.mobile-landscape .palette,
body.tablet-device.mobile-landscape .skinPalette {
  width: 100% !important;
  max-width: 224px !important;
  margin: 0 auto !important;
}

body.tablet-device.mobile-landscape .skinCarousel,
body.tablet-device.mobile-landscape #lobby .skinPalette.skinCarousel {
  width: min(224px, 100%) !important;
  max-width: 224px !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px !important;
  gap: 8px !important;
  align-self: center !important;
}

body.tablet-device.mobile-landscape .lobbyCard button.skinChoiceButton,
body.tablet-device.mobile-landscape #lobby .lobbyCard .skinCarousel button.skinChoiceButton,
body.tablet-device.mobile-landscape .skinCarousel button.skinChoiceButton {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 9px 0 42px !important;
  border-radius: 15px !important;
  font-size: 12px !important;
}

body.tablet-device.mobile-landscape .skinCarousel button.skinChoiceButton::before {
  left: 9px !important;
  width: 25px !important;
  height: 25px !important;
  border-radius: 8px !important;
}

body.tablet-device.mobile-landscape .lobbyCard button.skinArrowBtn,
body.tablet-device.mobile-landscape #lobby .lobbyCard button.skinArrowBtn,
body.tablet-device.mobile-landscape .skinArrowBtn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 12px !important;
}

body.tablet-device.mobile-landscape .skinDots { height: 8px !important; margin-top: 0 !important; }
body.tablet-device.mobile-landscape .readyHint { display: none !important; }

body.tablet-device.mobile-landscape .readyBox.readyTouchCard {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;
  min-height: 0 !important;
  padding: 0 10px !important;
  border-radius: 15px !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
}

body.tablet-device.mobile-landscape #startStatus {
  grid-area: status !important;
  align-self: center !important;
  margin: 0 !important;
  min-height: 0 !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.tablet-device.mobile-landscape .aiDifficultyWrap:not(.show) { display: none !important; }
body.tablet-device.mobile-landscape .aiDifficultyWrap.show.aiDifficultyCarousel {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px !important;
  width: 100% !important;
  gap: 8px !important;
  align-items: center !important;
}
body.tablet-device.mobile-landscape .aiDifficultyViewport { width: 100% !important; height: 42px !important; }
body.tablet-device.mobile-landscape .aiDifficultyButton { min-height: 38px !important; padding: 7px 12px !important; border-radius: 15px !important; font-size: 12px !important; }
body.tablet-device.mobile-landscape .aiDifficultyArrow { width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 12px !important; }

body.tablet-device.mobile-landscape .onlineMatchSlide {
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 8px 62px 8px 20px !important;
}

body.tablet-device.mobile-landscape .onlineMatchPanel {
  width: min(560px, 100%) !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  padding: 22px 22px 20px !important;
  border-radius: 28px !important;
  box-sizing: border-box !important;
}

body.tablet-device.mobile-landscape .onlineMatchPanel h2 {
  font-size: clamp(24px, 3.2vw, 30px) !important;
  margin-bottom: 8px !important;
}

body.tablet-device.mobile-landscape .onlineMatchLead {
  font-size: 13px !important;
  margin-bottom: 18px !important;
}

body.tablet-device.mobile-landscape .onlineColorSelectBox {
  grid-template-columns: 74px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 14px !important;
  margin-bottom: 16px !important;
  border-radius: 22px !important;
}

body.tablet-device.mobile-landscape .onlineColorPreview {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
}

body.tablet-device.mobile-landscape .onlineColorInfo strong {
  font-size: 14px !important;
  margin-bottom: 8px !important;
}

body.tablet-device.mobile-landscape .onlineColorPalette {
  gap: 8px !important;
}

body.tablet-device.mobile-landscape #lobby .lobbyCard button.onlineColorChip,
body.tablet-device.mobile-landscape button.onlineColorChip {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 11px !important;
}

body.tablet-device.mobile-landscape #lobby .lobbyCard button.onlineMatchStartButton,
body.tablet-device.mobile-landscape button.onlineMatchStartButton {
  height: 50px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
}

body.tablet-device.mobile-landscape .onlineMatchStatus {
  margin-top: 8px !important;
  font-size: 12px !important;
}

body.tablet-device.mobile-landscape .lobbyOnlineArrow,
body.tablet-device.mobile-landscape #lobby .lobbyCard button.lobbyOnlineArrow {
  right: 12px !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 74px !important;
  min-width: 44px !important;
  min-height: 74px !important;
  border-radius: 18px !important;
  font-size: 30px !important;
  z-index: 13 !important;
}

body.tablet-device.mobile-landscape .lobbyOnlineArrow:hover,
body.tablet-device.mobile-landscape .lobbyCard.online-match-active .lobbyOnlineArrow:hover {
  transform: translateY(-50%) !important;
}

body.tablet-device.mobile-landscape #lobby .lobbyCard .lobbyWingStack {
  left: auto !important;
  right: 12px !important;
  top: 88px !important;
  bottom: auto !important;
  flex-direction: column !important;
  gap: 8px !important;
  z-index: 12 !important;
}

body.tablet-device.mobile-landscape #lobby .lobbyCard .lobbyWingTab,
body.tablet-device.mobile-landscape #lobby .lobbyCard button.lobbyWingTab {
  width: 44px !important;
  min-width: 44px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  border-left: 1px solid rgba(15,23,42,0.10) !important;
}

body.tablet-device.mobile-landscape #lobby .lobbyCard .lobbyWingTab:hover,
body.tablet-device.mobile-landscape #lobby .lobbyCard .lobbyWingTab:focus-visible,
body.tablet-device.mobile-landscape #lobby .lobbyCard button.lobbyWingTab:hover,
body.tablet-device.mobile-landscape #lobby .lobbyCard button.lobbyWingTab:focus-visible {
  width: 44px !important;
  min-width: 44px !important;
  transform: none !important;
}

body.tablet-device.mobile-landscape #lobby .lobbyCard .lobbyWingLabel {
  display: none !important;
}

@media (orientation: landscape) and (min-width: 900px) and (max-height: 640px) {
  body.tablet-device.mobile-landscape #lobby .lobbyCard {
    height: calc(100vh - 24px) !important;
    padding: 16px 18px 14px !important;
    grid-template-rows: 56px minmax(0, 1fr) !important;
  }
  body.tablet-device.mobile-landscape .titleLoop { height: 54px !important; min-height: 54px !important; }
  body.tablet-device.mobile-landscape .titleRollText,
  body.tablet-device.mobile-landscape .lobbyCard h1 { font-size: clamp(38px, 4.6vw, 50px) !important; }
  body.tablet-device.mobile-landscape .mainLobbySlide {
    grid-template-rows: 100px 46px minmax(0, 1fr) 20px !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
  }
  body.tablet-device.mobile-landscape .playerSelectBox {
    grid-template-rows: 18px 38px minmax(0, 1fr) 46px !important;
    gap: 7px !important;
    padding: 12px 10px 10px !important;
  }
  body.tablet-device.mobile-landscape .selectedPreview { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; }
  body.tablet-device.mobile-landscape .readyBox.readyTouchCard { height: 46px !important; }
  body.tablet-device.mobile-landscape .onlineMatchPanel { padding: 18px 20px 16px !important; }
  body.tablet-device.mobile-landscape .onlineColorSelectBox { margin-bottom: 12px !important; }
}



/* ===== ver200 수정: 온라인 매칭 바로가기 블럭 버튼 + 부드러운 패널 슬라이드 ===== */
.lobbyPanelSlider {
  cursor: default !important;
}

.lobbyPanelTrack {
  transition: transform .68s cubic-bezier(.16, 1, .3, 1) !important;
}

.lobbyPanelSlide {
  transition: opacity .46s ease, transform .68s cubic-bezier(.16, 1, .3, 1), filter .46s ease !important;
  will-change: transform, opacity, filter;
}

.mainLobbySlide {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

.onlineMatchSlide {
  opacity: .18;
  transform: translateX(28px) scale(.985);
  filter: blur(1px);
  pointer-events: none;
}

.lobbyCard.online-match-active .mainLobbySlide {
  opacity: .18;
  transform: translateX(-28px) scale(.985);
  filter: blur(1px);
  pointer-events: none;
}

.lobbyCard.online-match-active .onlineMatchSlide {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

.lobbyOnlineArrow,
#lobby .lobbyCard button.lobbyOnlineArrow {
  left: calc(100% - 5px) !important;
  right: auto !important;
  top: 50% !important;
  width: 54px !important;
  min-width: 54px !important;
  height: 66px !important;
  min-height: 66px !important;
  padding: 0 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  overflow: hidden !important;
  border-radius: 0 20px 20px 0 !important;
  background: rgba(255,255,255,0.78) !important;
  color: #111827 !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  border-left: 0 !important;
  box-shadow: 14px 16px 32px rgba(15,23,42,0.14), inset 0 0 0 1px rgba(255,255,255,0.64) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
  transform-origin: left center !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  transition: width .34s cubic-bezier(.16, 1, .3, 1), min-width .34s cubic-bezier(.16, 1, .3, 1), transform .34s cubic-bezier(.16, 1, .3, 1), box-shadow .22s ease, background .22s ease !important;
}

.lobbyOnlineArrow:hover,
.lobbyOnlineArrow:focus-visible,
#lobby .lobbyCard button.lobbyOnlineArrow:hover,
#lobby .lobbyCard button.lobbyOnlineArrow:focus-visible {
  width: 252px !important;
  min-width: 252px !important;
  transform: translateY(-50%) translateX(4px) !important;
  background: rgba(255,255,255,0.96) !important;
  box-shadow: 18px 20px 42px rgba(15,23,42,0.18), 0 0 0 3px rgba(0,122,255,0.10), inset 0 0 0 1px rgba(255,255,255,0.76) !important;
}

.onlineArrowCube {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-block;
  border-radius: 10px;
  background: linear-gradient(145deg, #8fd0ff 0%, #4aaef5 100%);
  box-shadow: 0 8px 16px rgba(0,122,255,0.22), inset 0 0 0 2px rgba(255,255,255,0.64), inset -6px -7px 12px rgba(0,70,170,0.16);
  transform-origin: 50% 75%;
}

.onlineArrowCube::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.14);
}

.onlineArrowCube::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: -9px;
  height: 8px;
  border-radius: 50%;
  background: rgba(15,23,42,0.16);
  filter: blur(4px);
}

.lobbyOnlineArrow:hover .onlineArrowCube,
.lobbyOnlineArrow:focus-visible .onlineArrowCube {
  animation: onlineShortcutCubeRoll .72s cubic-bezier(.18, .8, .2, 1) both;
}

@keyframes onlineShortcutCubeRoll {
  0% { transform: translateX(0) translateY(0) rotate(0deg); }
  28% { transform: translateX(18px) translateY(-6px) rotate(96deg); }
  58% { transform: translateX(36px) translateY(0) rotate(210deg); }
  78% { transform: translateX(44px) translateY(-2px) rotate(310deg); }
  100% { transform: translateX(0) translateY(0) rotate(360deg); }
}

/* 온라인 패널의 돌아가기 버튼은 이동 방향에 맞춰 큐브가 왼쪽으로 구른다. */
.lobbyOnlineArrow.is-back:hover .onlineArrowCube,
.lobbyOnlineArrow.is-back:focus-visible .onlineArrowCube,
.lobbyCard.online-match-active .lobbyOnlineArrow:hover .onlineArrowCube,
.lobbyCard.online-match-active .lobbyOnlineArrow:focus-visible .onlineArrowCube {
  animation-name: onlineShortcutCubeRollBack;
}

@keyframes onlineShortcutCubeRollBack {
  0% { transform: translateX(0) translateY(0) rotate(0deg); }
  28% { transform: translateX(-18px) translateY(-6px) rotate(-96deg); }
  58% { transform: translateX(-36px) translateY(0) rotate(-210deg); }
  78% { transform: translateX(-44px) translateY(-2px) rotate(-310deg); }
  100% { transform: translateX(0) translateY(0) rotate(-360deg); }
}

.onlineArrowText {
  flex: 0 0 auto;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -0.03em;
  color: #111827;
  transform: translateX(-8px);
  transition: opacity .22s ease .08s, max-width .34s cubic-bezier(.16, 1, .3, 1), transform .28s cubic-bezier(.16, 1, .3, 1) .04s;
}

.onlineTextBack { display: none; }

.lobbyOnlineArrow:hover .onlineTextGo,
.lobbyOnlineArrow:focus-visible .onlineTextGo {
  max-width: 182px;
  opacity: 1;
  transform: translateX(0);
}

.lobbyOnlineArrow.is-back .onlineTextGo { display: none; }
.lobbyOnlineArrow.is-back .onlineTextBack { display: inline-block; }
.lobbyOnlineArrow.is-back:hover .onlineTextBack,
.lobbyOnlineArrow.is-back:focus-visible .onlineTextBack {
  max-width: 150px;
  opacity: 1;
  transform: translateX(0);
}

.lobbyCard.online-match-active .lobbyOnlineArrow,
.lobbyCard.online-match-active #lobby .lobbyCard button.lobbyOnlineArrow,
#lobby .lobbyCard.online-match-active button.lobbyOnlineArrow {
  left: auto !important;
  right: calc(100% - 5px) !important;
  border-radius: 20px 0 0 20px !important;
  border-left: 1px solid rgba(15,23,42,0.10) !important;
  border-right: 0 !important;
  transform-origin: right center !important;
  justify-content: flex-end !important;
}

.lobbyCard.online-match-active .lobbyOnlineArrow:hover,
.lobbyCard.online-match-active .lobbyOnlineArrow:focus-visible {
  width: 224px !important;
  min-width: 224px !important;
  transform: translateY(-50%) translateX(-4px) !important;
}

.lobbyCard.online-match-active .onlineArrowCube {
  order: 2;
  background: linear-gradient(145deg, #ffe69a 0%, #ffd166 100%);
  box-shadow: 0 8px 16px rgba(255,177,0,0.22), inset 0 0 0 2px rgba(255,255,255,0.66), inset -6px -7px 12px rgba(160,105,0,0.14);
}

.lobbyCard.online-match-active .onlineArrowText { order: 1; }

body.dark-mode .lobbyOnlineArrow,
body.dark-mode #lobby .lobbyCard button.lobbyOnlineArrow {
  background: rgba(245,247,251,0.88) !important;
  color: #111827 !important;
}

body.dark-mode .onlineArrowText { color: #111827 !important; }

@media (max-width: 860px) {
  .lobbyOnlineArrow,
  #lobby .lobbyCard button.lobbyOnlineArrow {
    left: auto !important;
    right: 12px !important;
    top: 50% !important;
    bottom: auto !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 62px !important;
    min-height: 62px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(15,23,42,0.10) !important;
    padding: 0 8px !important;
    transform: translateY(-50%) !important;
  }

  .lobbyOnlineArrow:hover,
  .lobbyOnlineArrow:focus-visible,
  #lobby .lobbyCard button.lobbyOnlineArrow:hover,
  #lobby .lobbyCard button.lobbyOnlineArrow:focus-visible {
    width: 228px !important;
    min-width: 228px !important;
    transform: translateY(-50%) translateX(-2px) !important;
  }

  .lobbyCard.online-match-active .lobbyOnlineArrow,
  #lobby .lobbyCard.online-match-active button.lobbyOnlineArrow {
    left: 12px !important;
    right: auto !important;
    justify-content: flex-start !important;
    border-radius: 18px !important;
  }

  .lobbyCard.online-match-active .lobbyOnlineArrow:hover,
  .lobbyCard.online-match-active .lobbyOnlineArrow:focus-visible {
    width: 210px !important;
    min-width: 210px !important;
    transform: translateY(-50%) translateX(2px) !important;
  }

  .onlineArrowCube {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  .onlineArrowText {
    font-size: 12px;
  }
}

body.tablet-device.mobile-landscape .lobbyOnlineArrow,
body.tablet-device.mobile-landscape #lobby .lobbyCard button.lobbyOnlineArrow {
  left: auto !important;
  right: 12px !important;
  top: 50% !important;
  bottom: auto !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 62px !important;
  min-height: 62px !important;
  border-radius: 18px !important;
  font-size: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 13 !important;
}

body.tablet-device.mobile-landscape .lobbyOnlineArrow:hover,
body.tablet-device.mobile-landscape .lobbyOnlineArrow:focus-visible {
  width: 228px !important;
  min-width: 228px !important;
  transform: translateY(-50%) translateX(-2px) !important;
}

body.tablet-device.mobile-landscape .lobbyCard.online-match-active .lobbyOnlineArrow,
body.tablet-device.mobile-landscape #lobby .lobbyCard.online-match-active button.lobbyOnlineArrow {
  left: 12px !important;
  right: auto !important;
  justify-content: flex-start !important;
}

body.tablet-device.mobile-landscape .lobbyCard.online-match-active .lobbyOnlineArrow:hover,
body.tablet-device.mobile-landscape .lobbyCard.online-match-active .lobbyOnlineArrow:focus-visible {
  width: 210px !important;
  min-width: 210px !important;
  transform: translateY(-50%) translateX(2px) !important;
}


/* 첫 방문 흐름용 로비 이용방법 튜토리얼 */
.degulTutorialLayer {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: none;
  pointer-events: none;
}

.degulTutorialLayer.show {
  display: block;
}

.degulTutorialSpotlight {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 80px;
  border-radius: 24px;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.68),
    0 0 0 1px rgba(255,255,255,0.48),
    0 0 18px 7px rgba(255,255,255,0.44),
    0 0 38px 12px rgba(100,190,255,0.28),
    inset 0 0 18px rgba(255,255,255,0.18);
  transition: left .24s ease, top .24s ease, width .24s ease, height .24s ease, border-radius .24s ease;
}

.degulTutorialSpotlight::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  border: 8px solid rgba(255,255,255,0.28);
  filter: blur(10px);
  opacity: .9;
  pointer-events: none;
}

.degulTutorialTip {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(420px, calc(100vw - 36px));
  padding: 17px 18px 15px;
  border-radius: 22px;
  color: #111827;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.96);
  box-shadow: 0 18px 48px rgba(0,0,0,0.24), inset 0 0 0 1px rgba(255,255,255,0.6);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  text-align: center;
  transform: translate(-50%, 0);
  transition: left .24s ease, top .24s ease;
}

.degulTutorialTip strong {
  display: block;
  margin-bottom: 7px;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.035em;
}

.degulTutorialTip span {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 750;
  color: #4b5563;
}

.degulTutorialTip em {
  display: block;
  margin-top: 11px;
  font-style: normal;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 850;
  color: #007aff;
  opacity: .88;
}

.degulTutorialProgress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 22px;
  margin-bottom: 9px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(0,122,255,0.10);
  color: #007aff;
  font-size: 12px;
  font-weight: 950;
}

.degulTutorialSkip {
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 421;
  pointer-events: auto;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.92);
  color: #111827;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

body.dark-mode .degulTutorialTip,
body.dark-mode .degulTutorialSkip {
  color: #111827;
  background: rgba(255,255,255,0.94);
}

@media (max-width: 900px) {
  .degulTutorialTip {
    width: min(360px, calc(100vw - 32px));
    padding: 15px 16px 14px;
  }

  .degulTutorialTip strong {
    font-size: 15px;
  }

  .degulTutorialTip span {
    font-size: 13px;
  }

  .degulTutorialSkip {
    right: 14px;
    top: 14px;
  }
}



/* ===== ver208: 스킨/AI 난이도 미해금 표시 통일 ===== */
/* 스킨 미해금: 해금 조건 텍스트 표시 제거, 호버 시 잠금 아이콘만 표시 */
.lobbyCard .skinPalette .colorChip.locked,
#lobby .lobbyCard .skinPalette button.colorChip.locked,
.skinPalette .colorChip.locked,
.colorChip.locked {
  position: relative !important;
  cursor: not-allowed !important;
  opacity: 0.48 !important;
  filter: grayscale(0.72) brightness(0.84) !important;
  overflow: hidden !important;
}

.lobbyCard .skinPalette .colorChip.locked::before,
#lobby .lobbyCard .skinPalette button.colorChip.locked::before,
.skinPalette .colorChip.locked::before,
.colorChip.locked::before {
  content: "🔒" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: inherit !important;
  background: rgba(17, 24, 39, 0.58) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
  opacity: 0 !important;
  transform: scale(0.94) !important;
  transition: opacity .14s ease, transform .14s ease !important;
  pointer-events: none !important;
}

.lobbyCard .skinPalette .colorChip.locked:hover::before,
#lobby .lobbyCard .skinPalette button.colorChip.locked:hover::before,
.skinPalette .colorChip.locked:hover::before,
.colorChip.locked:hover::before {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* 미해금 스킨의 해금 조건 말풍선 제거. 나이트 스킨처럼 아이콘/패턴만 남긴다. */
.lobbyCard .skinPalette .colorChip.locked::after,
#lobby .lobbyCard .skinPalette button.colorChip.locked::after,
.skinPalette .colorChip.locked::after,
.colorChip.locked::after {
  content: "" !important;
  display: none !important;
}

/* 해금된 나이트 스킨 아이콘은 기존처럼 유지 */
.lobbyCard .skinPalette .colorChip[data-skin="chess"]:not(.locked)::after,
#lobby .lobbyCard .skinPalette button.colorChip[data-skin="chess"]:not(.locked)::after,
.skinPalette .colorChip[data-skin="chess"]:not(.locked)::after,
.colorChip[data-skin="chess"]:not(.locked)::after {
  content: "♞" !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #f8fafc !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 0 #020617, 0 0 7px rgba(2,6,23,0.60) !important;
}

/* AI 난이도 미해금: '하드 클리어시 해금' 같은 내부 텍스트 제거, 호버 시 잠금 아이콘만 표시 */
.lobbyCard .aiDifficultyButton.locked,
#lobby .lobbyCard button.aiDifficultyButton.locked {
  position: relative !important;
  opacity: 0.48 !important;
  cursor: not-allowed !important;
  filter: grayscale(.20) saturate(.72) !important;
  overflow: hidden !important;
}

.lobbyCard .aiDifficultyButton.locked::after,
#lobby .lobbyCard button.aiDifficultyButton.locked::after {
  content: "🔒" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: inherit !important;
  background: rgba(17, 24, 39, 0.54) !important;
  color: #ffffff !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  transform: scale(0.94) !important;
  transition: opacity .14s ease, transform .14s ease !important;
  pointer-events: none !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
}

.lobbyCard .aiDifficultyButton.locked:hover::after,
#lobby .lobbyCard button.aiDifficultyButton.locked:hover::after {
  opacity: 1 !important;
  transform: scale(1) !important;
}

body.dark-mode .lobbyCard .aiDifficultyButton.locked::after,
body.dark-mode #lobby .lobbyCard button.aiDifficultyButton.locked::after,
body.ghost-mode-lock .lobbyCard .aiDifficultyButton.locked::after,
body.ghost-mode-lock #lobby .lobbyCard button.aiDifficultyButton.locked::after,
body.dark-mode .skinPalette .colorChip.locked::before,
body.ghost-mode-lock .skinPalette .colorChip.locked::before {
  background: rgba(0, 0, 0, 0.58) !important;
  color: #ffffff !important;
}

/* ===== ver218: 파비콘 캐릭터 눈 - 단색 스킨 전용 ===== */
.selectedPreview[data-skin=""] {
  position: relative;
  overflow: hidden;
}

.selectedPreview[data-skin=""]::before,
.selectedPreview[data-skin=""]::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 11px;
  border: 1px solid rgba(248, 251, 255, 0.96);
  border-radius: 999px;
  background: #050814;
  box-sizing: border-box;
  transform: translateY(-48%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

.selectedPreview[data-skin=""]::before {
  left: calc(50% - 7px);
}

.selectedPreview[data-skin=""]::after {
  right: calc(50% - 7px);
}