/* 월드 위에 뜨는 HUD: 필 버튼, 하단 입력 바, 처치와 사망, 공격과 확대, 이름표, 크게 보기
   필 버튼 규칙은 "디시 광장 HUD 필 버튼" 가이드를 따른다 */
:root {
  /* 어두운 판의 바탕색. 순수한 검정이 아니라 아주 진한 남색이다. 버튼, 창, 이름표, 알림이 모두 이 색에 투명도만 달리해 쓴다.
     톤을 바꾸려면 이 한 줄만 고친다 (빨강, 초록, 파랑 순서) */
  --ink: 9, 13, 26;
  --pill-bg: rgba(var(--ink), 0.75);
  --pill-bg-hover: rgba(var(--ink), 0.84);
  --pill-bg-active: rgba(var(--ink), 0.9);
  --pill-border: rgba(255, 255, 255, 0.08);
  /* 게시판 폭. 왼쪽 가장자리를 끌어 고른 폭(--gallery-user, src/ui/board.js 가 넣는다)이 있으면 그 폭을 쓰되, 플레이 영역이 420px 아래로 줄지 않게 한다 */
  --gallery-w: max(260px, min(var(--gallery-user, clamp(310px, 29vw, 480px)), 100vw - 420px));
  /* 게시판 판의 위아래 끝. 떠 있는 중계 화면의 윗선도 여기에 맞춘다 */
  --panel-top: 80px;
  --panel-bottom: 80px;
  --edge: 24px;
  /* 하단 묶음(입력 바, 한마디 줄, 확대 축소, 소리)은 폭 720px 까지만 넓어지고, 게시판을 뺀 플레이 영역의 가운데에 온다.
     --dock-inset 은 그 묶음을 가운데로 보내려고 플레이 영역 양옆에서 들여 넣는 거리 (좁은 화면에서는 0) */
  --dock-inset: max(0px, (100vw - var(--edge) - var(--gallery-w) - 48px - 720px) / 2);
  --row-say: 34px; /* 한마디 줄 높이 */
  --row-chat: 56px; /* 입력 바 높이 */
  /* 모서리 반지름. 버튼은 캡슐(999px), 패널과 카드는 아래 값으로 통일한다 */
  --r-panel: 24px;
  --r-card: 16px;
}

.pill {
  --icon-color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 52px;
  padding: 0 24px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  color: #fff;
  font: 700 18px/1 Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  letter-spacing: -0.03em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, transform 80ms ease;
  -webkit-tap-highlight-color: transparent;
}
.pill:hover { background: var(--pill-bg-hover); }
.pill:active { background: var(--pill-bg-active); transform: scale(0.96); }
.pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pill:disabled { cursor: default; color: rgba(255, 255, 255, 0.4); --icon-color: rgba(255, 255, 255, 0.4); transform: none; }
.pill__icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--icon-color); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pill--sm { height: 40px; padding: 0 16px; gap: 8px; font-size: 15px; }
.pill--sm .pill__icon { width: 16px; height: 16px; }

/* 오른쪽 위: 처치, 사망, 크게 보기 */
.hud-score { position: fixed; z-index: 5; top: calc(var(--edge) + env(safe-area-inset-top, 0px)); right: var(--edge); display: flex; gap: 8px; }
.hud-score .pill { background: rgba(var(--ink), 0.8); }
.hud-score div.pill { cursor: default; }
.hud-score div.pill:active { transform: none; }
.hud-score b { font-weight: 700; }

/* 게시판 열기: 접혔을 때만 보인다 */
.board-open { display: none; position: relative; }
.board-closed .board-open { display: inline-flex; }
.board-open.has-news::after { content: ""; position: absolute; top: 8px; left: 25px; /* 휴대폰 폭에서는 아래 미디어 규칙이 위치를 고친다 */ width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; }
/* 새 글 알림의 흔한 표현: 빨간 점은 그대로 있고, 같은 자리에서 붉은 물결이 퍼지며 사라지기를 반복한다 */
.board-open.has-news::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 25px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3b30;
  animation: ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
  0% { transform: scale(1); opacity: 0.75; }
  75%, 100% { transform: scale(2.8); opacity: 0; }
}
/* 게시판이 접히면 그 자리만큼 오른쪽 여백을 당긴다 */
.board-closed { --gallery-w: -24px; }

/* 하단은 세 줄이다. 맨 아래부터 한마디 줄(--row-say), 입력 바(--row-chat), 스킬 줄.
   스킬 네 개는 플레이 영역 가운데에 둔다 */
.skill-bar {
  position: fixed;
  z-index: 5;
  left: var(--edge);
  right: calc(var(--gallery-w) + 48px);
  bottom: calc(var(--edge) + var(--row-say) + var(--row-chat) + 22px + env(safe-area-inset-bottom, 0px));
  /* 네 개를 알약 하나에 담는다. 알약은 내용만큼만 넓고 플레이 영역 가운데에 온다 */
  width: fit-content;
  margin: 0 auto;
  display: none; /* 처음에는 접혀 있다. .skills-open 일 때만 보인다 */
  gap: 2px;
  /* 왼쪽 끝의 만두탄 그림이 알약 가장자리에 붙지 않게 왼쪽을 조금 더 띄운다. 알약 전체는 그대로 가운데에 온다 */
  padding: 5px 5px 5px 11px;
  border-radius: 999px;
  /* 내 만두 바로 위에 놓이는 자리라 다른 버튼보다 훨씬 투명하게 둔다 */
  background: rgba(var(--ink), 0.4);
}
.skills-open .skill-bar { display: flex; animation: skills-in 180ms ease-out; }
@keyframes skills-in { from { opacity: 0; translate: 0 10px; } }
/* 스킬 열기: 패널이 접혀 있을 때 그 자리에 놓이는 작은 버튼 */
.skill-open {
  position: fixed;
  z-index: 5;
  left: var(--edge);
  right: calc(var(--gallery-w) + 48px);
  bottom: calc(var(--edge) + var(--row-say) + var(--row-chat) + 22px + env(safe-area-inset-bottom, 0px));
  width: fit-content;
  height: 34px;
  margin: 0 auto;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(var(--ink), 0.4);
  border: 0;
}
/* 오른쪽의 위쪽 화살표: 누르면 위로 펼쳐진다는 뜻. 펼친 알약의 접기 화살표(아래쪽)와 같은 크기 */
.skill-open { gap: 4px; padding: 0 10px 0 16px; }
.skill-open .pill__icon { width: 16px; height: 16px; rotate: 180deg; }
.skill-open:hover { background: rgba(var(--ink), 0.62); }
.skills-open .skill-open { display: none; }
/* 점프 버튼: 터치 화면에서만 보인다. 오른손 엄지가 닿는 오른쪽 아래, 스킬 줄 위에 둔다 */
.jump-btn {
  display: none;
  position: fixed;
  z-index: 5;
  right: var(--edge);
  /* 입력 바 바로 위, 스킬 줄과 같은 높이 */
  bottom: calc(var(--edge) + var(--row-say) + var(--row-chat) + 22px + env(safe-area-inset-bottom, 0px));
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  background: rgba(var(--ink), 0.4);
  touch-action: manipulation; /* 연달아 눌러도 화면이 확대되지 않게 */
  user-select: none;
  -webkit-user-select: none;
}
.jump-btn .pill__icon { width: 26px; height: 26px; }
@media (pointer: coarse), (max-width: 760px) {
  .jump-btn { display: inline-flex; width: 52px; height: 52px; }
  .jump-btn .pill__icon { width: 22px; height: 22px; }
  .theater .jump-btn { display: none; }
}
/* 아주 좁은 화면에서 스킬을 펼치면 알약과 겹치므로, 그때만 스킬 줄 위로 올린다. 접혀 있을 때는 입력 바 바로 위에 둔다 */
@media (max-width: 480px) {
  .skills-open .jump-btn { bottom: calc(var(--edge) + var(--row-say) + var(--row-chat) + 88px + env(safe-area-inset-bottom, 0px)); }
}
/* 스킬 접기: 알약 안 오른쪽 끝의 작은 흰 화살표. 판 없이 화살표만 둔다 */
.skill-close { --icon-color: rgba(255, 255, 255, 0.85); flex: none; align-self: stretch; width: 30px; margin-right: 2px; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 999px; }
.skill-close:hover { --icon-color: #fff; }
.skill-close .pill__icon { width: 16px; height: 16px; }
.skill-close:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.skill { position: relative; width: 56px; height: 56px; padding: 0; border: 0; background: none; }
/* 마우스를 올리면 뒤에 원을 깔지 않고 그림이 살짝 커진다. 원을 깔면 불꽃처럼 옆으로 긴 그림이 원 가장자리에 아슬아슬하게 걸친다 */
.skill:hover, .skill:active { background: none; }
@media (hover: hover) { .skill:hover:not(:disabled) .skill__art { transform: scale(1.12); } }
.skill:active:not(:disabled) .skill__art { transform: scale(0.94); }
/* 스킬 그림: 버튼을 꽉 채운다. 쓸 수 없을 때는 어둡고 흐리게 가라앉힌다 */
.skill__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; transition: filter 120ms ease, transform 120ms ease; }
.skill.cooling .skill__art, .skill:disabled .skill__art { filter: grayscale(1); opacity: 0.3; }
/* 어두운 알약 위라서, 잠긴 그림은 어둡게 하지 않고 회색으로 빼서 흐리게만 한다 */
.skill.locked .skill__art { filter: grayscale(1); opacity: 0.45; }
/* 재사용 대기 남은 초 */
.skill__cd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #fff; }
.skill__cd[hidden] { display: none; }
/* 재사용 대기 게이지: 버튼 가장자리 안쪽을 따라 돈다. 바깥으로 내면 위아래 버튼의 게이지끼리 겹친다 */
.skill__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.skill__ring circle { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.skill:not(.cooling) .skill__ring { visibility: hidden; }
/* 초점 테두리는 게이지와 헷갈리지 않게 버튼 안쪽에 그린다 */
.skill:focus-visible { outline-offset: -3px; }

/* 확대와 축소: 플레이 영역 오른쪽 가장자리에 세로로 선 캡슐. 위가 확대, 아래가 축소 (지도나 게임에서 흔히 쓰는 자리).
   입력 바 위에 두고, 터치 화면에서는 그 자리에 점프 버튼이 있으므로 그 위로 올린다 */
.zoom-ctl {
  position: fixed;
  z-index: 5;
  right: calc(var(--gallery-w) + 48px);
  bottom: calc(var(--edge) + var(--row-say) + var(--row-chat) + 22px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column-reverse; /* 버튼 순서는 축소, 확대인데 화면에서는 확대가 위로 온다 */
  /* 가끔 쓰는 보조 기능이라 작게, 한마디 버튼과 같은 옅은 판으로 둔다 */
  background: rgba(var(--ink), 0.4);
  border: 0;
  border-radius: 999px;
  overflow: hidden;
}
.zoom-ctl button { --icon-color: #fff; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: none; border: 0; transition: background-color 120ms ease; }
.zoom-ctl button + button { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.zoom-ctl button:hover { background: rgba(255, 255, 255, 0.1); }
.zoom-ctl button:active { background: rgba(255, 255, 255, 0.18); }
.zoom-ctl button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.zoom-ctl .pill__icon { width: 14px; height: 14px; }
/* 시점 되돌리기: 끌어서 시점을 돌렸을 때만 확대 버튼 위에 뜬다 */
.zoom-ctl .view-reset[hidden] { display: none; }
/* 바닥을 끌어 시점을 돌리는 동안: 잡은 손 모양, 글자가 선택되지 않게 */
.cam-drag, .cam-drag * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
/* 터치 화면과 좁은 화면: 점프 버튼(52px) 위로 36px 띄우고, 가운데를 맞춰서 */
@media (pointer: coarse), (max-width: 760px) {
  .zoom-ctl { right: calc(var(--edge) + 9px); bottom: calc(var(--edge) + var(--row-say) + var(--row-chat) + 22px + 52px + 36px + env(safe-area-inset-bottom, 0px)); }
}
/* 아주 좁은 화면에서 스킬을 펼치면 점프 버튼이 알약 위로 올라가므로 같이 올라간다 */
@media (max-width: 480px) {
  .skills-open .zoom-ctl { bottom: calc(var(--edge) + var(--row-say) + var(--row-chat) + 88px + 52px + 36px + env(safe-area-inset-bottom, 0px)); }
}

/* 소리 켜기와 끄기: 맨 아래 한마디 줄의 오른쪽 끝. 말풍선 버튼과 같은 크기의 옅은 판 */
.sound-toggle {
  --icon-color: #fff;
  position: fixed;
  z-index: 5;
  right: calc(var(--gallery-w) + 48px + var(--dock-inset));
  bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px));
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--ink), 0.4);
  border: 0;
  border-radius: 999px;
  transition: background-color 120ms ease;
}
/* 이름표 켜기와 끄기: 소리 버튼 바로 왼쪽. 소리 버튼과 같은 모양 */
.name-toggle {
  --icon-color: #fff;
  position: fixed;
  z-index: 5;
  right: calc(var(--gallery-w) + 48px + 46px + var(--dock-inset)); /* 소리 버튼(34px)에서 12px 띄운다 */
  bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px));
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--ink), 0.4);
  border: 0;
  border-radius: 999px;
  transition: background-color 120ms ease;
}
.name-toggle:hover { background: rgba(var(--ink), 0.62); }
.name-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.name-toggle .pill__icon { width: 16px; height: 16px; fill: #fff; stroke: #fff; stroke-width: 1.5; }
/* 이름표를 끄면 다른 만두의 이름표가 사라진다. 내 이름표와 말풍선은 남는다 */
.names-off .name-tags span:not(.say):not(.me) { display: none; }
.sound-toggle:hover { background: rgba(var(--ink), 0.62); }
.sound-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* 스피커 그림은 그림판 안에서 차지하는 높이가 낮아서, 옆의 말풍선과 꼬리표와 같은 크기로 보이게 조금 키운다 */
.sound-toggle .pill__icon { width: 20px; height: 20px; stroke-width: 1.5; }
.sound-toggle .pill__icon .fill { fill: #fff; }
/* 꺼진 모습은 말풍선 버튼과 똑같이: 아이콘을 흐리게 하고 같은 사선을 긋는다 (아래 .phrase-toggle 규칙과 함께 쓴다) */

/* 하단 입력 바 */
.chat-bar {
  position: fixed;
  z-index: 5;
  left: calc(var(--edge) + var(--dock-inset));
  right: calc(var(--gallery-w) + 48px + var(--dock-inset));
  bottom: calc(var(--edge) + var(--row-say) + 10px + env(safe-area-inset-bottom, 0px));
  height: var(--row-chat);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 24px;
  border-radius: 999px;
  /* 평소에는 시야를 가리지 않게 반투명 흰 유리처럼 두고, 글을 쓰는 동안(초점이 들어오면)만 또렷한 흰색이 된다 */
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: background-color 160ms ease;
}
.chat-bar:focus-within { background: #fff; }
.chat-bar input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.chat-bar input::placeholder { color: rgba(255, 255, 255, 0.8); }
.chat-bar:focus-within input { color: #111; }
.chat-bar:focus-within input::placeholder { color: #b4b4b4; }
/* 말머리, 제목, 본문을 다 받는 방식 (바로 올릴 때만. src/ui/chatbar.js).
   평소에는 제목 한 줄짜리 알약이고, 글을 쓰는 동안(초점이 들어와 있는 동안)에는 위로 펼쳐져 판이 된다.
   판 안의 순서는 위에서부터 말머리, 제목, 본문, 올리기. 아래쪽 자리는 그대로 두고 위로만 자란다 */
.chat-heads, .chat-body, .chat-handoff { display: none; }
/* 펼쳐지는 때: 초점이 들어와 있거나, 디시 글쓰기 창으로 옮겨 붙이는 중(.handing)일 때 */
.chat-bar--full:is(:focus-within, .handing) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "handoff handoff" "heads heads" "title title" "body body" ". submit";
  align-items: center;
  gap: 0;
  height: auto;
  padding: 16px 14px 12px 20px;
  border-radius: 24px;
  box-shadow: 0 14px 46px #0007;
  z-index: 6; /* 펼친 판이 간식 가게 말풍선 같은 다른 버튼에 가려지지 않게 한다 */
}
.chat-bar--full:is(:focus-within, .handing) .chat-heads { grid-area: heads; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.chat-bar--full:is(:focus-within, .handing) input { grid-area: title; width: 100%; height: 44px; padding: 0; border-bottom: 1px solid #eceef2; font-size: 17px; font-weight: 700; }
.chat-bar--full:is(:focus-within, .handing) .chat-body { grid-area: body; display: block; margin: 12px 0 8px; }
.chat-bar.chat-bar--full:is(:focus-within, .handing) .pill { grid-area: submit; justify-self: end; width: auto; padding: 0 16px; }
/* 좁은 화면에서는 올리기 글자를 숨기지만, 펼친 판에서는 자리가 있으니 보여 준다 (남은 초도 여기에 뜬다) */
.chat-bar.chat-bar--full:is(:focus-within, .handing) .pill span { display: inline; }
/* 옮겨 붙이는 중에는 초점이 다른 창에 가 있어도 글을 쓰는 중과 같은 흰 판으로 보인다 */
.chat-bar--full.handing { background: #fff; }
.chat-bar--full.handing input { color: #111; }
.chat-bar--full.handing input::placeholder { color: #b4b4b4; }
.chat-bar--full.handing .pill { background: #e6e6e6; color: #8a8a8a; --icon-color: #8a8a8a; }
.chat-bar--full.handing .pill.ready { background: #111; color: #fff; --icon-color: #fff; }
/* 옮겨 붙이기 안내 줄: 발급키가 없을 때, 디시 글쓰기 창을 연 뒤에 판 맨 위에 뜬다 */
.chat-bar--full.handing .chat-handoff { grid-area: handoff; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px -2px 12px -8px; padding: 10px 12px; border-radius: 14px; background: #eef0ff; }
.chat-handoff__text { flex: 1 1 100%; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: #2b3380; }
.chat-handoff__btn { height: 30px; padding: 0 12px; border: 0; border-radius: 15px; background: #3c46a0; color: #fff; font: inherit; font-size: 13px; font-weight: 600; }
.chat-handoff__btn:hover { background: #2f3885; }
.chat-handoff__btn[hidden] { display: none; }
/* "다 올렸어요" 는 칸을 비우는 버튼이라 복사 버튼과 떼어 오른쪽에 두고, 테두리만 있는 모양으로 구분한다 */
.chat-handoff__done { margin-left: auto; background: #fff; color: #2b3380; box-shadow: inset 0 0 0 1px #c3c8ee; }
.chat-handoff__done:hover { background: #f6f7ff; }
/* 안내 닫기(×): 쓴 글은 남기고 안내 줄만 닫는다 */
.chat-handoff__close { display: grid; place-items: center; width: 30px; padding: 0; background: none; --icon-color: #2b3380; }
.chat-handoff__close:hover { background: rgba(60, 70, 160, 0.12); }
.chat-handoff__close .pill__icon { width: 16px; height: 16px; }
.chat-heads__label { font-size: 13px; font-weight: 600; color: #8a8a8a; margin-right: 2px; }
/* 로그인 버튼: 윗줄의 오른쪽 끝. 로그인하면 닉네임이 보인다 (길면 줄인다) */
.chat-account { flex: 0 1 auto; min-width: 0; margin-left: auto; height: 32px; padding: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; border-radius: 16px; background: #f1f2f6; color: #333; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.chat-account:hover { background: #e6e8ee; }
.chat-account:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.chat-head { height: 32px; padding: 0 14px; border: 1px solid #d9dbe2; border-radius: 16px; background: #fff; color: #333; font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.chat-head:hover { background: #f4f5f8; }
.chat-head[aria-pressed="true"] { background: #3c46a0; border-color: #3c46a0; color: #fff; }
.chat-head:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.chat-body { width: 100%; min-height: 72px; max-height: 30vh; padding: 0; border: 0; outline: none; resize: none; background: none; color: #111; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; }
.chat-body::placeholder { color: #b4b4b4; }

.chat-bar .pill { flex: none; background: rgba(255, 255, 255, 0.24); border-color: transparent; color: #fff; --icon-color: #fff; }
.chat-bar .pill:hover { background: rgba(255, 255, 255, 0.36); }
.chat-bar:focus-within .pill { background: #e6e6e6; color: #8a8a8a; --icon-color: #8a8a8a; }
.chat-bar .pill.ready, .chat-bar:focus-within .pill.ready { background: #111; color: #fff; --icon-color: #fff; }
.chat-bar .pill.ready:hover { background: #2a2a2a; }
/* 도배 방지로 기다리는 동안: 글을 써 뒀어도 버튼은 흐리게 두고 남은 초를 보여 준다 */
.chat-bar .pill.cooling, .chat-bar:focus-within .pill.cooling { background: rgba(255, 255, 255, 0.24); color: #fff; --icon-color: #fff; font-variant-numeric: tabular-nums; }
.chat-bar:focus-within .pill.cooling { background: #e6e6e6; color: #8a8a8a; --icon-color: #8a8a8a; }
.chat-bar .pill:focus-visible { outline-color: #111; }

/* 한마디 버튼: 입력 바 바로 아래, 입력 바 왼쪽 끝에 맞춘다 */
.phrase-row {
  position: fixed;
  z-index: 5;
  left: calc(var(--edge) + var(--dock-inset));
  right: calc(var(--gallery-w) + 48px + 92px + var(--dock-inset)); /* 오른쪽 끝의 이름표와 소리 버튼 자리를 비운다. 92px = 버튼 둘(34 + 34)과 간격 둘(12 + 12). 좁아져서 말풍선 버튼이 오른쪽 끝에 붙으면 세 버튼의 간격이 모두 12px 로 같다 */
  bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  pointer-events: none;
}
/* 한마디 목록: 자리가 모자라면 옆으로 밀어 본다 */
.phrase-list { flex: 0 1 auto; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; pointer-events: auto; overscroll-behavior-x: contain; }
.phrase-list::-webkit-scrollbar { display: none; }
/* 스킬, 올리기보다 가벼운 기능이라 판을 옅게, 글자를 가늘게 해서 한 단계 물러나 보이게 한다 */
/* 가끔 쓰는 보조 버튼이라 판도 글자도 옅게 둔다 */
.phrase { flex: none; height: 34px; padding: 0 14px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.78); background: rgba(var(--ink), 0.24); border-color: transparent; pointer-events: auto; }
/* 목록이 위아래를 잘라 내므로, 키보드 초점 테두리는 버튼 안쪽에 그린다 */
.phrase:focus-visible { outline-offset: -2px; }
.phrase:hover { background: rgba(var(--ink), 0.5); color: #fff; }
.phrase:active { background: rgba(var(--ink), 0.75); }
/* 말풍선 켜기와 끄기: 한마디(채워진 캡슐)와 종류가 다르므로 글자 없는 둥근 버튼으로 만든다. 구분선은 두지 않는다 (좁은 화면에서는 목록 끝이 흐려지며 사라져서 선이 없어도 나뉘어 보인다) */
.phrase-toggle {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  margin-left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 한마디 버튼과 같은 옅은 검정 판. 모양만 원으로 다르다 */
  background: rgba(var(--ink), 0.4);
  border: 0;
  border-radius: 50%;
  pointer-events: auto;
  transition: background-color 120ms ease;
}
/* 말풍선 아이콘은 선이 아니라 흰색으로 채운다 */
.phrase-toggle .pill__icon { width: 16px; height: 16px; fill: #fff; stroke: #fff; stroke-width: 1.5; }
.phrase-toggle:hover { background: rgba(var(--ink), 0.62); }
.phrase-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* 꺼져 있으면 아이콘을 흐리게 하고 사선을 긋는다. 사선이 지나는 자리는 아이콘을 띠 모양으로 파내서,
   사선 양옆에 틈이 생기고 사선이 아이콘과 붙어 보이지 않는다 */
.phrase-toggle[aria-pressed="false"] .pill__icon, .sound-toggle[aria-pressed="false"] .pill__icon, .name-toggle[aria-pressed="false"] .pill__icon {
  opacity: 0.5;
  --cut: linear-gradient(45deg, #000 calc(50% - 2.800px), transparent calc(50% - 2.800px), transparent calc(50% + 2.800px), #000 calc(50% + 2.800px));
  -webkit-mask-image: var(--cut);
  mask-image: var(--cut);
}
.phrase-toggle[aria-pressed="false"]::after, .sound-toggle[aria-pressed="false"]::after, .name-toggle[aria-pressed="false"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 2px;
  margin: -1px 0 0 -11px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.8); /* 새하얗지 않게 살짝 죽인다 */
  transform: rotate(45deg);
}
/* 팀 응원 한마디: 로고 그림이 있으면 그림만 보이고, 없으면 팀 색 점을 앞에 붙인 글자가 보인다 */
.phrase--team::before { content: ""; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--team, #fff); }
.phrase--logo::before { content: none; }
.phrase--logo { padding: 0 12px; }
.phrase__logo { display: block; height: 24px; width: auto; }
.say-off .phrase { opacity: 0.5; }
.say-off .name-tags span.say { display: none; }

/* 눌렀을 때 잠깐 뜨는 이름표. 글자가 없는 버튼이 무엇인지 알려 준다 */
.hud-tip {
  position: fixed;
  z-index: 8;
  left: 0;
  top: 0;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(var(--ink), 0.88);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
}
.hud-tip.show { opacity: 1; }

/* 토스트: 위쪽 가운데에 내려왔다가 사라진다 */
.hud-toast {
  position: fixed;
  z-index: 8;
  top: calc(var(--edge) + 52px + env(safe-area-inset-top, 0px));
  left: 50%;
  padding: 11px 18px;
  /* 짧은 알림은 한 줄 알약 모양 그대로다. 좁은 화면에서 긴 알림은 잘리지 않고 두 줄로 내려간다 */
  width: max-content;
  max-width: calc(100vw - 2 * var(--edge));
  border-radius: 22px;
  background: rgba(var(--ink), 0.88);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-align: center;
  word-break: keep-all;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.hud-toast.show { opacity: 1; transform: translate(-50%, 0); }
/* 조작 중에 뜨는 경고: 입력 바와 한마디 버튼 바로 위, 내 만두 가까이에 띄운다. 정확한 자리는 dom.js 가 잰다 */
.hud-toast.center { top: auto; bottom: calc(var(--edge) + 122px + env(safe-area-inset-bottom, 0px)); }

/* 부활 안내 */
.respawn {
  position: fixed;
  z-index: 5;
  left: var(--edge);
  right: calc(var(--gallery-w) + 48px);
  bottom: calc(var(--edge) + var(--row-say) + var(--row-chat) + 90px + env(safe-area-inset-bottom, 0px));
  margin: 0 auto;
  width: max-content;
  cursor: default;
  background: rgba(var(--ink), 0.8);
}
.respawn:active { transform: none; }
.respawn[hidden] { display: none; }

/* 만두 머리 위 이름표와 체력 줄 */
.name-tags { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
/* 이름표가 여러 개 떠 있어도 눈이 피로하지 않게 판과 체력 줄을 옅게 둔다 */
.name-tags span { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 12px; font-weight: 500; line-height: 1; color: rgba(255, 255, 255, 0.92); background: rgba(var(--ink), 0.4); padding: 4px 8px; border-radius: 10px; }
.name-tags span::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--hp-color, rgba(110, 215, 150, 0.85)) calc(var(--hp, 1) * 100%), rgba(255, 255, 255, 0.22) 0);
}
/* 끝까지 멀리 보면 다른 만두의 이름표가 사라진다 (--names 는 world.js 가 확대 정도에 맞춰 0에서 1 사이로 넣는다) */
.name-tags span:not(.say):not(.me) { opacity: var(--names, 1); }
/* 내 이름표: 흰 판에 검은 글자로, 다른 만두들 사이에서 바로 눈에 띄게 한다 */
.name-tags span.me { z-index: 1; padding: 5px 10px; font-size: 13px; font-weight: 700; color: #111; background: #fff; }
.name-tags span.me::after { background: linear-gradient(90deg, var(--hp-color, #2fb36a) calc(var(--hp, 1) * 100%), rgba(var(--ink), 0.16) 0); }
/* 체력이 줄면 줄 색이 바뀐다: 절반이면 주황, 한 대 남으면 빨강 */
.name-tags span.hp-mid { --hp-color: #f5a524; }
.name-tags span.hp-low { --hp-color: #f0443a; }

/* 서버 선택: 왼쪽 위 버튼과 목록 패널 */
.server-pill { position: fixed; z-index: 5; top: calc(var(--edge) + env(safe-area-inset-top, 0px)); left: var(--edge); background: rgba(var(--ink), 0.8); }
.server-pill .pill__icon:last-child { width: 14px; height: 14px; }
/* 서버 패널: 검정과 흰색만 쓰고, 모서리는 다른 HUD 와 같은 반지름을 쓴다 */
.server-dialog {
  --line: rgba(255, 255, 255, 0.28);
  --sub: #b8b8b8;
  --panel: #161616;
  width: min(580px, calc(100% - 32px));
  max-width: none;
  max-height: min(720px, calc(100% - 48px));
  padding: 32px;
  border-radius: var(--r-panel);
  /* 검정 유리: 살짝 투명해서 뒤가 흐리게 비치지만, 회색으로 뜨지 않게 검정을 진하게 둔다 */
  background: rgba(var(--ink), 0.82);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border: 0;
  /* 유리 가장자리: 선을 긋지 않고, 안쪽에 아주 옅은 빛을 한 겹 두른다. 위쪽 모서리가 살짝 더 밝아 빛을 받는 것처럼 보인다 */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 24px 80px rgba(var(--ink), 0.5);
  color: #fff;
  flex-direction: column;
  gap: 22px;
  overflow: hidden;
  outline: none;
}
.server-dialog[open] { display: flex; }
.server-dialog::backdrop { background: rgba(var(--ink), 0.5); backdrop-filter: none; }
.server-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* 처음 들어올 때 맵 고르기 창 (src/ui/entry.js). 방 창과 같은 검정 유리에 맵 카드 두 장 */
.entry-dialog { width: min(640px, calc(100% - 32px)); gap: 14px; overflow-y: auto; }
.entry-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.entry-dialog .entry-note { margin: -6px 0 6px; font-size: 14px; line-height: 1.5; letter-spacing: -0.01em; color: var(--sub); }
.entry-maps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) {
  .entry-maps { grid-template-columns: 1fr; }
  .entry-title { font-size: 20px; }
}

/* 이용법 창 (src/ui/guide.js): 방 창과 같은 검정 유리. 왼쪽에 항목 이름, 오른쪽에 설명 */
.guide-dialog { width: min(560px, calc(100% - 32px)); gap: 18px; overflow-y: auto; }
.guide-title { flex: 1; min-width: 0; margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.guide-list { display: grid; grid-template-columns: 64px 1fr; gap: 14px 12px; margin: 0; }
.guide-list dt { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: #fff; padding-top: 1px; }
.guide-list dd { margin: 0; font-size: 14px; line-height: 1.55; letter-spacing: -0.01em; color: var(--sub); }
/* 이용법을 아직 한 번도 열어 보지 않았으면 버튼 오른쪽 위에 빨간 점 */
.guide-open { position: relative; }
.guide-open.is-new::after { content: ""; position: absolute; top: 7px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; }
@media (max-width: 520px) {
  .guide-list { grid-template-columns: 1fr; gap: 4px; }
  .guide-list dd { margin-bottom: 10px; }
  .guide-title { font-size: 19px; }
}

/* 로그인 창: 방 창과 같은 검정 유리. 관람실 안에서 디시 계정으로 로그인한다 (src/ui/login.js) */
.login-dialog { width: min(400px, calc(100% - 32px)); gap: 18px; }
.login-title { flex: 1; min-width: 0; margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.login-form { display: flex; flex-direction: column; gap: 10px; }
.login-dialog .login-form input { width: 100%; height: 46px; padding: 0 18px; border: 0; border-radius: 999px; outline: none; background: rgba(255, 255, 255, 0.06); color: #fff; font: inherit; font-size: 16px; letter-spacing: -0.01em; } /* 16px 아래면 아이폰이 입력할 때 화면을 확대한다 */
.login-dialog .login-form input::placeholder { color: #8a8a8a; }
.login-dialog .login-form input:focus { background: rgba(255, 255, 255, 0.12); }
.login-captcha { display: flex; align-items: center; gap: 8px; }
.login-captcha[hidden], .login-form input[hidden] { display: none; }
.login-captcha img { flex: none; height: 46px; border-radius: 10px; background: #fff; }
.login-dialog .login-error { min-height: 0; margin: 0; font-size: 14px; font-weight: 500; letter-spacing: -0.02em; color: #ff8a80; }
.login-dialog .login-error:empty { display: none; }
.login-dialog .pill.login-submit { height: 46px; margin-top: 4px; justify-content: center; background: #fff; border-color: transparent; color: #111; font-size: 16px; font-weight: 700; }
.login-dialog .pill.login-submit:hover { background: #e9e9e9; }
.login-dialog .pill.login-submit:disabled { opacity: 0.5; }
.login-dialog .login-note { margin: 2px 0 0; font-size: 13px; line-height: 1.5; letter-spacing: -0.01em; color: var(--sub); }

/* 맨 위: 전체 인원 */
/* 문구는 늘 한 줄이다. 창이 좁아지면 글자 크기가 창 폭에 맞춰 줄어들고(15px 까지), 그래도 모자라면 끝을 줄임표로 자른다.
   닫기 버튼과 겹치는 일이 없다 */
.server-total { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(15px, calc((100vw - 132px) / 12.5), 22px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff; }
/* 지금 있는 방: 누르는 것이 아니라 알려 주기만 하는 줄이다. 그래서 판을 깔지 않고 글자만 둔다 (판이 있으면 버튼처럼 보인다) */
.server-here { display: flex; align-items: baseline; gap: 10px; margin-top: 0; } /* 제목과의 간격이 10px 이다 (창의 줄 간격 18px 에서 제목의 아래 여백 -8px 을 뺀 값) */
.server-here .server-name { font-size: 20px; }
.server-here .server-count { font-size: 15px; }
/* 지금 있는 방: 방 이름과 인원. 보여 주기만 한다 */
/* 방 번호로 들어가기 */
.server-dialog .server-join { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.server-dialog .server-join input { flex: 1; width: auto; min-width: 0; height: 46px; padding: 0 18px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.06); color: #fff; font: 600 15px/1 Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif; letter-spacing: -0.02em; outline: none; }
.server-dialog .server-join input::placeholder { color: #8a8a8a; }
.server-dialog .server-join input:focus { background: rgba(255, 255, 255, 0.12); }
.server-dialog .server-join .pill { flex: none; height: 46px; padding: 0 20px; }
.server-dialog .server-error { margin: -4px 0 0; font-size: 14px; font-weight: 500; letter-spacing: -0.02em; color: #ff8a80; }
.server-error[hidden] { display: none; }

/* 패널 안 버튼: 테두리 없이, 바탕보다 조금 밝은 판 */
.server-dialog .pill {
  --icon-color: #fff;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  color: #fff;
  font-size: 14px;
}
.server-dialog .pill:hover { background: rgba(255, 255, 255, 0.18); }
.server-dialog .pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.server-close { flex: none; width: 40px; padding: 0; }

/* "방 옮기기" 제목 줄: 왼쪽에 제목, 오른쪽에 랜덤 입장 */
.server-movehead { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 -10px; }
.server-movehead .server-group { margin: 0; }
/* 랜덤 입장 버튼은 수치로는 제목과 가운데가 맞지만 아래 카드에 붙어 보여서 3px 올린다 */
.server-movehead .server-random { translate: 0 -3px; }
.server-dialog .server-random { flex: none; height: 32px; padding: 0 12px; gap: 6px; font-size: 13px; }
/* 맵 카드: 위에 미리보기 그림, 아래에 이름과 인원. 그림 오른쪽 위에 "이동하기" */
.server-map { position: relative; display: block; padding: 0; text-align: left; color: #fff; background: rgba(255, 255, 255, 0.05); border: 0; border-radius: var(--r-card); overflow: hidden; transition: background-color 120ms ease; }
.server-map:hover { background: rgba(255, 255, 255, 0.1); }
.server-map:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* 카드 가장자리: 창과 같은 방식으로 안쪽에 옅은 빛을 두르고 위쪽 모서리만 조금 더 밝게 한다.
   어두운 경기장 그림도 창 바탕에 묻히지 않고 한 장의 카드로 떠 보인다. 그림 위에 얹어야 해서 따로 한 겹을 덮는다 */
.server-map::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.server-map__shot { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 200ms ease; }
.server-map:hover .server-map__shot { transform: scale(1.03); }
/* 글자 칸: 맵 이름 아래에 인원을 두고, 오른쪽에는 "이동하기" 버튼이 온다 (버튼 자리만큼 오른쪽을 비운다) */
.server-map__text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 74px; justify-content: center; padding: 14px 104px 16px 16px; background: inherit; }
/* 이동하기 버튼: 글자 칸의 오른쪽, 세로 가운데 (글자 칸 높이 74px 의 가운데). 좁은 화면에서는 자리가 없어 그림 위 모서리에 얹는다 */
.server-map .server-go { position: absolute; right: 16px; bottom: 37px; transform: translateY(50%); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: -0.02em; }
.server-map .server-go { background: #fff; color: #000; }
/* 맵 카드 두 장을 나란히 둔다 */
.server-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 맵 종류 제목: 두 칸을 다 차지한다 */
.server-group { grid-column: 1 / -1; margin: 10px 0 -8px; font-size: 14px; font-weight: 600; letter-spacing: -0.02em; color: var(--sub); }
.server-group:first-child { margin-top: 0; }
.server-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 10px;
  padding: 22px 22px;
  text-align: left;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  border-radius: var(--r-card);
  transition: background-color 120ms ease;
}
.server-card:hover { background: rgba(255, 255, 255, 0.1); }
.server-card:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* 왼쪽에 맵 이름과 그 아래 인원, 오른쪽에 "이동하기" */
.server-card .server-name { grid-area: 1 / 1; }
.server-card .server-count { grid-area: 2 / 1; }
.server-go { grid-area: 1 / 2 / span 2 / auto; }
.server-go { flex: none; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: -0.02em; }
.server-card:hover .server-go { background: #fff; color: #000; }

.server-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.server-count { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--sub); }
/* 인원 게이지 */
.server-meter { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.server-meter i { display: block; height: 100%; border-radius: 999px; background: #fff; }

/* 간식 가게: 왼쪽 위 서버 버튼 아래. 기다리는 동안은 조용한 글자, 받을 수 있으면 흰 버튼으로 눈에 띄게 한다 */
.snack { position: fixed; z-index: 5; top: calc(var(--edge) + 52px + env(safe-area-inset-top, 0px)); left: var(--edge); display: flex; align-items: center; gap: 6px; }
.snack__wait, .snack__ready { height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.snack__wait { color: rgba(255, 255, 255, 0.85); background: rgba(var(--ink), 0.4); }
.snack__ready { color: #fff; background: rgba(var(--ink), 0.75); }
.snack .pill { height: 36px; font-size: 14px; }
/* 가져가기 버튼: 디시 주의색(#FFAC00) 주황 판에 흰 글자. 어두운 버튼들 사이에서 "지금 받을 수 있다"는 걸 눈에 띄게 한다 */
.snack__take { background: #ffac00; color: #fff; border-color: transparent; }
.snack__take:hover { background: #f09f00; }
.snack__take:active { background: #e09400; }
/* 가게 앞에 서 있을 때: 안내가 가게 바로 위에 뜬다. 자리(left, top)는 src/ui/snack.js 가 가게를 따라 맞춘다 */
/* 가게에 붙어 있는 글자라서 이름표와 같은 층에 둔다. 버튼들과 같은 층(5)에 두면 휴대폰에서 펼친 게시판 위로 올라온다 */
.snack.is-near { z-index: 2; transform: translate(-50%, -100%); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35)); }
.snack.is-near.is-off { display: none; }
/* 휴대폰에서는 게시판이 화면을 덮으며 펼쳐진다. 그동안 가게 글자가 게시판 위에 떠 보이지 않게 숨긴다 */
@media (max-width: 760px) {
  :root:not(.board-closed) .snack.is-near { display: none; }
}
.snack.is-near .snack__wait { height: 30px; padding: 0 12px; font-size: 13px; color: #fff; background: rgba(var(--ink), 0.7); }
.snack.is-near .pill { height: 32px; padding: 0 14px; font-size: 12px; }
/* 아이템 칸: 간식을 들고 있을 때 뜬다. 간식 그림과 남은 횟수. 자리는 src/ui/snack.js 가 잡는다.
   스킬이 접혀 있으면 "스킬 열기" 버튼 오른쪽에 같은 높이의 알약으로, 펼쳐져 있으면 스킬 알약 안의 다섯 번째 칸으로 들어간다 */
.snack-item { position: fixed; z-index: 5; height: 34px; padding: 0 13px 0 10px; gap: 5px; border: 0; background: rgba(var(--ink), 0.4); font-size: 14px; font-weight: 600; }
.snack-item[hidden] { display: none; }
.snack-item:hover { background: rgba(var(--ink), 0.62); }
.snack-item:disabled { opacity: 0.5; }
.snack-item__art { font-size: 17px; line-height: 1; }
.snack-item__count { font-variant-numeric: tabular-nums; }
.snack-item.in-bar { position: relative; width: 56px; height: 56px; padding: 0; background: none; }
.snack-item.in-bar:hover { background: rgba(255, 255, 255, 0.1); }
.snack-item.in-bar .snack-item__art { font-size: 30px; }
.snack-item.in-bar .snack-item__count { position: absolute; right: 2px; bottom: 2px; min-width: 20px; height: 20px; padding: 0 5px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: #fff; color: #111; font-size: 12px; font-weight: 700; }
.theater .snack, .theater .snack-item { display: none; }

/* 고정닉 배지: 이름표와 게시판의 닉네임 앞에 붙는다 */
.nick-badge { width: 15px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.name-tags .nick-badge { opacity: 0.85; }

/* 말풍선: 이름표 위에 흰 풍선으로 뜬다 */
.name-tags span.say { margin-top: -38px; padding: 8px 12px; border-radius: 14px; background: #fff; color: #111; font-size: 14px; font-weight: 700; letter-spacing: -0.02em; animation: say-in 220ms ease-out; }
/* 팀 응원 말풍선: 로고 그림, 또는 팀 색 바탕의 글자.
   로고는 흰 부분이 있어서(젠지) 말풍선 바탕을 어둡게 한다 */
.name-tags span.say .say-logo { display: block; height: 44px; width: auto; }
.name-tags span.say.say-dark { margin-top: -48px; padding: 8px 12px; background: #0f1736; }
.name-tags span.say.say-dark::after { background: #0f1736; }
.name-tags span.say .say-team { display: block; margin: -2px -4px; padding: 6px 12px; border-radius: 10px; background: var(--team, #111); color: #fff; font-size: 15px; font-weight: 800; letter-spacing: 0.02em; }
.name-tags span.say::after { position: absolute; left: 50%; bottom: -4px; width: 10px; height: 10px; margin: 0 0 0 -5px; border-radius: 2px; background: #fff; transform: rotate(45deg); }
/* 제자리에서 살짝 떠오르며 나타난다. 위치는 transform 이 잡고 있어서 translate 로만 움직인다 */
@keyframes say-in { from { opacity: 0; translate: 0 8px; } }

/* 크게 보기 모드 */
/* 오른쪽 위 버튼 줄: 갤러리 열기(게시판을 접어 둔 동안에만 보인다), 만두 숨기기/보기, 돌아가기 */
.th-bar { display: none; position: fixed; z-index: 6; top: calc(var(--edge) + env(safe-area-inset-top, 0px)); right: var(--edge); gap: 8px; }
.theater .th-bar { display: flex; }
.th-bar .pill { background: rgba(var(--ink), 0.8); }
/* 만두 숨기기를 켜 둔 버튼은 파랗게 칠한다 */
.th-dark-toggle[aria-pressed="true"] { background: #3c46a0; }
.th-dark-toggle[aria-pressed="true"]:hover { background: #4651b4; }
/* 크게 보기에서도 게시판을 펼쳐 볼 수 있다. 평소 자리(오른쪽)에 그대로 서고, 중계 화면은 그 옆에 남은 자리를 다 쓴다 (× 로 접고, 갤러리 버튼으로 다시 편다).
   만두 숨기기로 뒤를 검게 덮으면(html.th-dark) 어두운 바탕에 맞춰 판도 어둡게 칠한다 */
.theater.th-dark .gallery {
  background: rgba(var(--ink), 0.92);
  color: #fff;
  box-shadow: 0 14px 46px #0007, inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.theater.th-dark .bd-head { background: rgba(60, 70, 160, 0.82); }
.theater.th-dark .bd-row { background: none; border-bottom-color: rgba(255, 255, 255, 0.08); }
.theater.th-dark .bd-row.link:hover, .theater.th-dark .bd-row.has-body:hover { background: rgba(255, 255, 255, 0.08); }
.theater.th-dark .bd-meta { color: rgba(255, 255, 255, 0.6); }
.theater.th-dark .bd-body { color: rgba(255, 255, 255, 0.85); }
.theater.th-dark .bd-badge, .theater.th-dark .bd-comments { color: #aeb8ff; border-color: #aeb8ff; }
.theater.th-dark .bd-headtext { color: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.3); }
.theater.th-dark .bd-ads { border-bottom-color: transparent; }
.theater.th-dark .bd-row.new { animation: bd-in 0.45s ease, bd-glow-dark 2.6s ease; }
@keyframes bd-glow-dark { from { background: rgba(126, 142, 255, 0.4); } to { background: transparent; } }
/* 크게 보기는 보는 방식이라 놀이 버튼(스킬, 확대 축소, 한마디 줄)과 위쪽 버튼 줄은 숨긴다. 만두들의 이름표와 말풍선은 뒤가 보일 때만 남긴다 */
.theater .skill-open, .theater .zoom-ctl, .theater .name-toggle, .theater .skill-bar, .theater .server-pill, .theater .phrase-row, .theater .hud-score, .theater.th-dark .name-tags { display: none; }
.theater .chat-bar, .theater .respawn { left: 92px; right: 92px; }
/* 크게 보기에서도 소리 버튼은 남긴다. 입력 바와 같은 줄 오른쪽 끝, 세로 가운데 */
.theater .sound-toggle { right: var(--edge); bottom: calc(var(--edge) + (var(--row-chat) - 34px) / 2 + env(safe-area-inset-bottom, 0px)); }
.theater .chat-bar { max-width: 720px; margin: 0 auto; bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px)); }
/* 게시판을 펼친 크게 보기: 입력 바를 중계 화면 아래 가운데에 둔다 */
.theater:not(.board-closed) .chat-bar, .theater:not(.board-closed) .respawn { left: calc(var(--edge) + 46px); right: calc(var(--gallery-w) + 48px + 46px); }

/* 좁은 화면: 입력 바가 플레이 영역 폭을 다 쓴다 */
@media (max-width: 1100px) {
  .theater .chat-bar, .theater .respawn { left: var(--edge); right: calc(var(--edge) + 46px); }
}
/* 휴대폰 폭: 게시판이 작은 창으로 줄고, 입력 바와 버튼 줄이 화면 폭을 다 쓴다 */
@media (max-width: 760px) {
  :root { --edge: 16px; }
  /* 방 창: 휴대폰 폭에 맞춰 여백, 글자, 버튼을 한 단계씩 줄인다. 맨 위 문구는 한 줄에 들어오고, 맵 카드 두 장은 좁은 간격으로 나란히 놓인다 */
  .server-dialog { width: calc(100% - 24px); padding: 20px 18px 22px; gap: 18px; overflow-y: auto; }
  .server-head { gap: 10px; }
  .server-dialog .server-close { flex: none; width: 34px; height: 34px; }
  .server-group { font-size: 13px; }
  .server-here { gap: 8px; }
  .server-here .server-name { font-size: 17px; }
  .server-here .server-count { font-size: 14px; }
  .server-dialog .server-random { height: 30px; padding: 0 11px; font-size: 12px; }
  .server-random .pill__icon { width: 13px; height: 13px; }
  .server-grid { gap: 10px; }
  .server-map__text { min-height: 0; padding: 10px 12px 12px; }
  .server-map .server-name { font-size: 14px; }
  .server-map .server-count { font-size: 12px; }
  .server-map .server-go { top: 10px; right: 10px; bottom: auto; transform: none; padding: 4px 8px; font-size: 11px; }
  .server-dialog .server-join input { height: 42px; padding: 0 16px; font-size: 16px; } /* 16px 아래면 아이폰이 입력할 때 화면을 확대한다 */
  .server-dialog .server-join .pill { height: 42px; padding: 0 16px; font-size: 14px; }
  /* 위쪽 버튼은 모바일 게임처럼 작게: 높이 32px, 처치와 사망은 아이콘과 숫자만, 크게 보기와 갤러리는 아이콘만 */
  .server-pill, .hud-score .pill, .th-bar .pill { height: 32px; padding: 0 10px; gap: 5px; font-size: 13px; }
  .server-pill .pill__icon, .hud-score .pill__icon, .th-bar .pill__icon { width: 14px; height: 14px; }
  .th-bar { gap: 6px; }
  .th-bar .pill__label { display: none; }
  .th-bar .board-open { width: 32px; padding: 0; }
  .server-pill .pill__icon:last-child { width: 12px; height: 12px; }
  /* 이용법 버튼이 늘어서, 게시판을 접어 갤러리 버튼까지 서도 왼쪽 위 방 버튼과 겹치지 않게 간격과 처치·사망 칸을 조금 좁힌다 */
  .hud-score { gap: 4px; }
  .hud-score div.pill { padding: 0 8px; gap: 4px; }
  .guide-open.is-new::after { top: 4px; right: 4px; }
  .hud-score .pill__label { display: none; }
  .hud-score button.pill { width: 32px; padding: 0; }
  /* 한마디 목록 오른쪽 끝을 흐리게 해서 더 있다는 걸 알린다 */
  .phrase-list { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); padding-right: 16px; }
  .phrase-toggle { margin-left: 8px; }
  .board-open.has-news::after, .board-open.has-news::before { top: 4px; left: 18px; }
  :root { --row-chat: 52px; }
  .chat-bar { right: var(--edge); padding-left: 20px; }
  .phrase-row { right: calc(var(--edge) + 92px); }
  .name-toggle { right: calc(var(--edge) + 46px); }
  .sound-toggle { right: var(--edge); }
  .skill-bar, .skill-open { right: var(--edge); }
  .skill-bar { padding: 4px 4px 4px 9px; }
  .skill { width: 50px; height: 50px; }
  .snack-item.in-bar { width: 50px; height: 50px; }
  .skill__cd { font-size: 18px; }
  .respawn { left: 50%; right: auto; margin: 0; transform: translateX(-50%); bottom: auto; top: calc(64px + env(safe-area-inset-top, 0px)); }
  .respawn:active { transform: translateX(-50%); }
}
/* 아주 좁으면 올리기 버튼은 아이콘만 남긴다 */
@media (max-width: 420px) {
  .chat-bar .pill span { display: none; }
  .chat-bar .pill { width: 40px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .board-open.has-news::before { animation: none; }
  .hud-toast { transition: none; }
  .hud-tip { transition: none; }
  .skills-open .skill-bar { animation: none; }
  .name-tags span.say { animation: none; }
  .pill { transition: none; }
  .pill:active { transform: none; }
}

/* 썸네일 찍기 모드 (주소에 ?shot): 3D 장면만 남기고 화면 위의 것을 모두 숨긴다. 말풍선만은 남겨서 북적이는 느낌을 낸다 */
.shot .pill, .shot .hud-score, .shot .chat-bar, .shot .phrase-row, .shot .zoom-ctl, .shot .name-toggle, .shot .sound-toggle, .shot .skill-bar, .shot .snack, .shot .snack-item, .shot .hud-toast, .shot .hud-tip { display: none !important; }
.shot .name-tags span:not(.say) { display: none !important; }
/* 전광판에 영상 대신 띄우는 가상의 경기 화면 (그림은 src/main.js 의 matchArt) */
.shot-card { width: 100%; height: 100%; background: #23442a; }

/* ---------- 중계 화면 고정과 크게 보기 (두 맵 모두) ----------
   화면 고정을 켜거나 크게 보기를 누르면 중계 화면을 3D 전광판에서 꺼내 여기에 띄운다 (src/ui/floatscreen.js, html.screen-float).
   크게 보기: 플레이 영역(왼쪽 여백부터 게시판 앞까지) 위쪽 가운데에서, 화면 윗선은 게시판 윗선(--panel-top)과 같고 게시판 아래 끝까지의 높이 안에서 가장 크게 띄운다.
             게시판을 접으면 창 맨 위부터 폭을 다 쓴다.
             뒤쪽 광장과 만두들은 그대로 보이고, 만두 숨기기(html.th-dark)를 켜면 어두운 막으로 덮는다.
             dcinside 로고는 만두 숨기기를 켰을 때만 화면 위에 세운다 (뒤가 보일 때는 3D 공간의 로고와 겹쳐 두 개로 보인다).
   세로로 든 휴대폰(html.screen-stack): 늘 맨 위에 띄운다. 아래는 맨 끝 "휴대폰" 규칙을 본다.
   --fs-bottom 은 화면의 아래 끝 높이로, 그 아래에 놓이는 것들(알림, 휴대폰의 게시판)이 쓴다 */
:root {
  --fs-top: var(--panel-top);
  --fs-left: var(--edge);
  --fs-right: calc(var(--gallery-w) + 48px);
  --fs-room: calc(100vw - var(--fs-left) - var(--fs-right)); /* 플레이 영역의 가로 */
  --fs-tall: calc((100vh - var(--panel-top) - var(--panel-bottom)) * 16 / 9); /* 게시판 아래 끝까지 채울 때의 폭 */
  --fs-w: min(var(--fs-room), var(--fs-tall));
  --fs-bottom: calc(var(--fs-top) + var(--fs-w) * 9 / 16);
}
.float-screen { display: none; }
/* 3D 캔버스와 이름표 위, 게시판과 버튼 아래. 판 자체는 누를 수 없고 화면만 누를 수 있다.
   화면이 누를 수 있는 요소라야, 그 뒤에 가린 광고판이 "보이지 않는 것"으로 잡힌다 (world.js 의 광고판 보이는 비율) */
.screen-float .float-screen {
  position: absolute;
  z-index: 2;
  top: var(--fs-top);
  left: calc(var(--fs-left) + (var(--fs-room) - var(--fs-w)) / 2);
  width: var(--fs-w);
  display: block;
  pointer-events: none;
}
/* 화면 틀: 어두운 남색 테두리에 청록 조명. 경기장의 매달린 전광판 상자 색을 그대로 쓴다 */
.float-screen__frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  pointer-events: auto;
  border-radius: 12px;
  background: #03070f;
  box-shadow: 0 0 0 3px #0d1326, 0 0 0 4px rgba(31, 214, 255, 0.5), 0 0 34px rgba(31, 214, 255, 0.22), 0 20px 50px rgba(0, 0, 0, 0.55);
}
.float-screen .world-screen { width: 100%; height: 100%; }
/* 화면 위의 dcinside 로고: 만두 숨기기를 켠 크게 보기에서만. 화면 윗선에서 --fs-gap 위에 --fs-logo 높이로 가운데에 선다 */
.float-screen__logo { display: none; position: absolute; left: 50%; bottom: calc(100% + var(--fs-gap, 10px)); height: var(--fs-logo, 34px); transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 2px 0 #2b3478) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)); }
.theater.th-dark .float-screen__logo { display: block; }
.float-screen .idle-screen::after { font-size: clamp(13px, 2.2vw, 22px); }
/* 게시판 폭을 끄는 동안에는 끼워 둔 화면(유튜브, 글 보기, 광고)이 포인터를 가로채지 않게 한다 */
.resizing iframe { pointer-events: none; }
.resizing { -webkit-user-select: none; user-select: none; }
/* 알림은 중계 화면을 가리지 않게 그 아래에 띄운다 */
.screen-float .hud-toast:not(.center) { top: calc(var(--fs-bottom) + 14px); }
/* 3D 전광판 자리 (src/world/world.js 가 만든다). 화면을 위로 꺼내 둔 동안에는 안내 글을 띄운다. 누르면 제자리로 돌아온다 */
.screen-slot { position: relative; width: 1280px; height: 720px; }
.screen-away { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: radial-gradient(ellipse at 50% 40%, #16224a, #03070f 75%); color: #fff; text-align: center; }
.screen-away[hidden] { display: none; }
.screen-away b { font-size: 54px; font-weight: 800; letter-spacing: -0.02em; }
.screen-away span { font-size: 36px; opacity: 0.7; }

/* 크게 보기: 카메라는 그대로 두고 화면만 키운다. 만두 숨기기를 켜면 뒤의 3D 장면을 어두운 막으로 덮는다.
   막은 누를 수 있는 요소라서, 그 뒤에 가린 광고판은 보이지 않는 것으로 잡힌다 */
.theater.th-dark .float-screen::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: auto; background: radial-gradient(ellipse at 35% 35%, #111c3c, #03060d 70%); }
/* 게시판을 접은 크게 보기: 창 맨 위부터 폭을 다 쓰고, 아래에 입력 바 자리만 남긴다 */
.theater.screen-float.board-closed {
  --fs-top: 0px;
  --fs-left: 0px;
  --fs-right: 0px;
  --fs-w: min(100vw, (100vh - var(--panel-bottom)) * 16 / 9);
}
.theater.board-closed .float-screen__frame { border-radius: 0 0 12px 12px; }
/* 만두 숨기기를 켜고 게시판을 접은 크게 보기: 로고가 설 자리만큼 화면을 내린다 */
.theater.th-dark.screen-float.board-closed {
  --fs-top: calc(var(--edge) + var(--fs-logo, 34px) + var(--fs-gap, 10px));
  --fs-left: var(--edge);
  --fs-right: var(--edge);
  --fs-w: min(100vw - 2 * var(--edge), (100vh - var(--fs-top) - var(--panel-bottom)) * 16 / 9);
}
.theater.th-dark.board-closed .float-screen__frame { border-radius: 12px; }
@media (max-width: 760px) {
  /* 휴대폰: 화면이 위쪽 버튼 줄 바로 아래에 서고, 양옆 8px 만 남기고 폭을 다 쓴다. 크기 손잡이는 없다 */
  :root {
    --fs-top: calc(var(--edge) + 40px + env(safe-area-inset-top, 0px));
    --fs-left: 8px;
    --fs-right: 8px;
    --fs-w: var(--fs-room);
  }
  .float-screen__frame { border-radius: 10px; }
  /* 게시판을 펼치면 중계 화면 바로 아래에 온다. 글을 읽는 동안에도 중계가 보인다 */
  .screen-float .gallery { top: calc(var(--fs-bottom) + 10px); }
  /* 크게 보기: 화면은 맨 위에 폭을 꽉 채우고, 게시판은 그 아래부터 입력 바 위까지 폭을 다 쓴다 */
  .theater.screen-float, .theater.screen-float.board-closed { --fs-top: 0px; --fs-left: 0px; --fs-right: 0px; --fs-w: 100vw; }
  .theater .float-screen__frame { border-radius: 0 0 10px 10px; }
  /* 만두 숨기기를 켠 크게 보기: 화면을 위쪽 버튼 줄 아래로 내리고, 그 사이에 작은 로고를 세운다 */
  .theater.th-dark { --fs-logo: 22px; --fs-gap: 8px; }
  .theater.th-dark.screen-float, .theater.th-dark.screen-float.board-closed { --fs-top: calc(var(--edge) + 40px + env(safe-area-inset-top, 0px)); --fs-left: 8px; --fs-right: 8px; --fs-w: calc(100vw - 16px); }
  .theater.th-dark .float-screen__frame { border-radius: 10px; }
  .theater.th-dark .float-screen__logo { left: 2px; transform: none; } /* 오른쪽 위 버튼 줄과 겹치지 않게 화면 왼쪽 끝에 맞춘다 */
  .theater .gallery, .theater .gallery.viewing { left: 8px; right: 8px; width: auto; height: auto; bottom: calc(var(--edge) + var(--row-chat) + 14px + env(safe-area-inset-bottom, 0px)); }
  .theater:not(.board-closed) .chat-bar, .theater:not(.board-closed) .respawn { left: var(--edge); right: calc(var(--edge) + 46px); }
  .screen-float .respawn { top: calc(var(--fs-bottom) + 12px); }

  /* 세로로 든 휴대폰 (html.screen-stack, src/ui/floatscreen.js 가 단다).
     중계 화면은 늘 맨 위. 게시판은 창의 아래 절반(화면이 길면 화면 바로 아래부터)에서 입력 바 위까지 서고, 처음에는 펼쳐 둔다.
     화면과 게시판 사이로 광장이 보이고 내 만두도 거기에 온다. 게시판을 접으면 그 자리가 모두 광장이 된다 */
  .screen-stack .gallery { top: max(calc(var(--fs-bottom) + 8px), 50%); left: 8px; right: 8px; width: auto; bottom: calc(var(--edge) + var(--row-say) + 10px + var(--row-chat) + 8px + env(safe-area-inset-bottom, 0px)); }
  /* 글을 보는 동안에는 화면 바로 아래부터 다 쓴다 */
  .screen-stack .gallery.viewing { top: calc(var(--fs-bottom) + 8px); right: 8px; }
  .screen-stack.theater .gallery { top: calc(var(--fs-bottom) + 10px); }
  /* 게시판을 펼친 동안에는 게시판에 겹치는 놀이 버튼(스킬, 점프, 확대 축소, 간식)을 숨긴다. 접으면 돌아온다 */
  .screen-stack:not(.board-closed) :is(.skill-open, .skill-bar, .jump-btn, .zoom-ctl, .snack-item) { display: none; }
  /* 3D 전광판 자리는 눌러도 돌아가지 않으므로 안내 글을 띄우지 않는다 */
  .screen-stack .screen-away > * { display: none; }
}

/* ---------- 같이 하기: 응원 게이지, 세트 예측, 응원 팀, 시끄러운 방, 명장면 박제 ---------- */
/* 팀 응원 게이지 (src/ui/cheer.js): 플레이 영역 위쪽 가운데. 로고를 누르면 그 팀을 응원한다. 아무도 응원하지 않았으면 숨긴다 */
.cheer-gauge {
  position: fixed;
  z-index: 5;
  top: calc(var(--edge) + 4px + env(safe-area-inset-top, 0px));
  left: var(--edge);
  right: calc(var(--gallery-w) + 48px);
  width: fit-content;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(var(--ink), 0.72);
  color: #fff;
}
.cheer-gauge[hidden], .theater .cheer-gauge { display: none; }
.cheer-gauge__team { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 8px; border: 0; border-radius: 999px; background: none; color: #fff; cursor: pointer; }
.cheer-gauge__team:hover { background: rgba(255, 255, 255, 0.1); }
.cheer-gauge__team:active { transform: scale(0.94); }
.cheer-gauge__team img { height: 22px; width: auto; }
.cheer-gauge__count { font-size: 13px; font-variant-numeric: tabular-nums; }
.cheer-gauge__bar { width: 140px; height: 8px; border-radius: 999px; background: var(--right); overflow: hidden; }
.cheer-gauge__bar i { display: block; height: 100%; background: var(--left); transition: width 0.6s ease; }

/* 세트 승부 예측 판 (src/ui/predict.js): 응원 게이지 아래. 크게 보기에서는 입력 바 바로 위 */
.predict {
  position: fixed;
  z-index: 6;
  top: calc(var(--edge) + 46px + env(safe-area-inset-top, 0px));
  left: var(--edge);
  right: calc(var(--gallery-w) + 48px);
  width: fit-content;
  max-width: calc(100% - 2 * var(--edge));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  padding: 8px 14px;
  border-radius: var(--r-card);
  background: rgba(var(--ink), 0.88);
  box-shadow: 0 10px 30px rgba(var(--ink), 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 14px;
  letter-spacing: -0.02em;
}
.predict[hidden] { display: none; }
.predict b { font-weight: 800; }
.predict span { color: #d0d4e4; }
.predict .predict__left { color: #ffc83d; font-weight: 700; font-variant-numeric: tabular-nums; }
.predict__pick { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 8px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--team) 26%, rgba(255, 255, 255, 0.08)); color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--team); }
.predict__pick:hover { background: color-mix(in srgb, var(--team) 42%, transparent); }
.predict__pick img { height: 22px; }
.predict--result { background: linear-gradient(90deg, rgba(60, 70, 160, 0.95), rgba(var(--ink), 0.92)); }
.predict--result b { color: #ffc83d; }
.theater .predict { top: auto; bottom: calc(var(--edge) + var(--row-chat) + 14px + env(safe-area-inset-bottom, 0px)); }

/* 응원 팀 고르기 (src/ui/team.js): 맵 고르기 창과 방 창 */
.team-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.team-picker__title { flex-basis: 100%; font-size: 13px; color: var(--sub, #b8b8b8); }
.team-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #fff; font: 600 14px/1 Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif; letter-spacing: -0.02em; cursor: pointer; }
.team-chip:hover { background: rgba(255, 255, 255, 0.14); }
.team-chip__logo { height: 22px; width: auto; }
.team-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--team, #ffffff) 30%, rgba(255, 255, 255, 0.06)); box-shadow: inset 0 0 0 2px var(--team, #ffffff); }
.team-chip--none[aria-pressed="true"] { background: rgba(255, 255, 255, 0.18); box-shadow: none; }

/* 가장 시끄러운 방 TOP 3 (방 창) */
.server-loud { display: flex; flex-direction: column; gap: 6px; margin-top: -8px; }
.server-loud[hidden] { display: none; }
.server-loud__row { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.06); color: #fff; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.server-loud__row:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.server-loud__row:disabled { cursor: default; opacity: 0.7; }
.server-loud__row b { color: #ffc83d; }
.server-loud__count { color: var(--sub, #b8b8b8); font-variant-numeric: tabular-nums; }
.server-loud__row .server-go { position: static; transform: none; padding: 4px 10px; font-size: 12px; }

/* 명장면 박제 창 (src/ui/capture.js) */
.capture-dialog { width: min(460px, calc(100% - 32px)); gap: 14px; }
.capture-when { margin: -6px 0 0; color: #ffc83d; font-weight: 700; }
.capture-form { display: flex; gap: 8px; }
.capture-form input { flex: 1; min-width: 0; height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #fff; font: inherit; font-size: 16px; outline: none; }
.capture-form input:focus { background: rgba(255, 255, 255, 0.14); }
.capture-dialog .pill.capture-submit { flex: none; height: 46px; padding: 0 18px; background: #fff; color: #111; font-weight: 700; }
.capture-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--sub, #b8b8b8); }

@media (max-width: 760px) {
  /* 세로 휴대폰: 게이지와 예측 판은 떠 있는 중계 화면 바로 아래 (광장 띠 위쪽) */
  .screen-stack .cheer-gauge { top: calc(var(--fs-bottom) + 6px); left: 8px; right: 8px; }
  .screen-stack .predict { top: calc(var(--fs-bottom) + 44px); left: 8px; right: 8px; font-size: 13px; padding: 7px 10px; }
  .cheer-gauge__bar { width: 96px; }
  .server-loud__row { grid-template-columns: 18px 1fr auto; }
  .server-loud__row .server-go { display: none; }
}