/* 무대(영상), 댄스 플로어, 아래쪽 다음 내 곡 줄과 버튼 줄, 효과음 패드 (화면 스타일은 public/css/의 파일 여러 개를 index.html이 이 순서로 불러온다: theme.css → base.css → stage.css → playlist.css → side.css → dialogs.css → misc.css) */
/* ---------- 무대 ---------- */
.stage-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--gutter);
  min-height: 0;
  min-width: 0;
}
/* 플로어와 버튼 줄을 뺀 남은 공간 전부. 그 안에서 영상이 16:9로 최대한 커진다 */
.stage-wrap {
  flex: 1 1 auto;
  min-height: 120px;
  display: grid;
  place-items: center;
  container-type: size;
}
.stage {
  position: relative;
  width: 100%;
  width: min(100cqw, calc(100cqh * 16 / 9));
  aspect-ratio: 16 / 9;
  max-width: 100%;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}
#player, #player-vm, .stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* 유튜브·Vimeo 플레이어는 같은 자리에 겹쳐 있고, 지금 곡을 맡은 쪽만 보인다 */
.stage.vm #player, .stage:not(.vm) #player-vm { visibility: hidden; }
.stage-thumb {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  opacity: 0;
}
/* 영상 숨기기: 투명하게만 하면 보일 때와 같은 화질로 받아 데이터가 거의 안 준다.
   플레이어를 유튜브가 허용하는 최소 크기(200×200)로 줄이면 유튜브가 낮은 화질로 받는다.
   휴대폰 화면에서 1분 동안 재 보니 보일 때 19.8MB, 투명하게만 17.6MB, 200×200으로 줄이면 6.5MB였다 */
.stage.video-off #player, .stage.video-off #player-vm { inset: auto; left: 0; top: 0; width: 200px; height: 200px; opacity: 0; }
.stage.video-off .stage-thumb { opacity: 0.55; filter: blur(2px); }
.stage-shield { position: absolute; inset: 0; }
.stage-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 4px),
    #08090d;
}
.stage-empty p { margin: 0; max-width: 34ch; }
.stage-empty-title { font-weight: 600; color: var(--fg); font-size: 16px; }
.stage-resume {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 22px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
/* 라이브 따라잡기 중 까닭(player.js liveSync): 영상 위쪽 가운데에 작게. 영상 위라 테마와 상관없이 검은 바탕 흰 글씨 */
.stage-note {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 20px);
  padding: 6px 12px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  word-break: keep-all; /* 좁은 화면에서 줄이 바뀌어도 낱말 가운데서 끊기지 않게 */
  pointer-events: none;
}
@media (max-width: 520px) {
  .stage-note { top: 8px; font-size: 12px; }
}
.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--overlay);
}
#progress-bar { height: 100%; width: 0; background: var(--accent); }

/* ---------- 댄스 플로어 ---------- */
.floor {
  position: relative;
  /* 아바타들의 z-index가 플로어 밖(플레이리스트 창 등)으로 새지 않게 가둔다 */
  isolation: isolate;
  flex: none;
  height: var(--floor-h);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(to bottom, var(--floor-top) 0%, var(--floor-bottom) 100%);
}
.floor-tiles {
  position: absolute;
  left: -50%;
  right: -50%;
  top: 28%;
  bottom: -20%;
  background-image:
    linear-gradient(var(--tile) 1px, transparent 1px),
    linear-gradient(90deg, var(--tile) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(260px) rotateX(60deg);
  transform-origin: top center;
}
.crowd { position: absolute; inset: 0 26% 0 0; }
.dancer {
  position: absolute;
  /* 폭을 서 있는 자리와 상관없이 내용(아바타·이름) 크기로. 안 그러면 오른쪽 끝에서 좁아져 자리 잡기(layoutCrowd)가 폭을 잘못 잰다 */
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%) scale(var(--s, 1));
  transform-origin: bottom center;
  transition: left 0.4s, bottom 0.4s;
}
.dancer .avatar { max-width: none; }
.dancer-name {
  margin-top: 2px;
  max-width: 90px;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dancer.is-me .dancer-name { color: var(--fg); }
/* 내 아바타는 끌어서 자리를 옮긴다(app.js floorDrag). 끄는 동안은 손가락·마우스를 바로 따라오고 맨 앞에 보인다 */
.dancer { user-select: none; -webkit-user-select: none; }
.dancer.is-me { cursor: grab; touch-action: none; }
.dancer.is-dragging { cursor: grabbing; transition: none; z-index: 30 !important; }
.dancer.woot .avatar { animation: bob 0.5s infinite steps(1); }
.dancer.meh .avatar { filter: grayscale(0.7) brightness(0.75); transform: rotate(-8deg); }
.dancer.grab::before, .booth-dj.grab::before {
  content: "+";
  position: absolute;
  top: -14px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--grab);
}
@keyframes bob {
  0% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.booth {
  position: absolute;
  right: 4%;
  bottom: calc(14px + var(--booth-lift, 0px)); /* 테마가 플로어 앞에 무언가를 세우면 그만큼 올린다(음악방송 관객) */
  width: 20%;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.booth-dj {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 60px;
  justify-content: flex-end;
}
.booth-dj .avatar { width: 81px; height: 81px; animation: bob 0.5s infinite steps(1); }
.booth-dj .dancer-name { color: var(--fg); font-weight: 600; }
.booth-empty { font-size: 12px; color: var(--dim); padding-bottom: 6px; }
.booth-desk {
  width: 100%;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--panel-2);
  box-shadow:
    inset 0 0 0 2px var(--accent),
    inset 0 -6px 0 rgba(0, 0, 0, 0.35);
}
.booth-desk span { font-family: var(--font-display); font-size: 12px; color: var(--accent); letter-spacing: 0.2em; }

/* ---------- 아래쪽: 다음 내 곡 + 버튼 줄 ---------- */
.bottom { display: flex; flex-direction: column; gap: 8px; flex: none; }
.next-up {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0 6px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  font-size: 13px;
}
.next-up:hover { border-color: var(--line-hover); }
.next-up[hidden] { display: none; }
/* 곡 부분(누르면 플레이리스트 열기) */
.next-up-open {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 4px 6px 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* 넘기기: 다음 곡을 맨 아래로 */
.next-up-skip {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 2px);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.next-up-skip:hover { color: var(--fg); border-color: var(--line-hover); }
.next-up-skip[hidden] { display: none; }
/* 좁은 화면에선 곡 제목이 더 보이게 플레이리스트 이름 칸을 줄인다 */
@media (max-width: 600px) {
  .next-up-list { max-width: 22%; }
}
.next-up-label {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.next-up-thumb { flex: none; width: 32px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; background: #000; }
.next-up-thumb:not([src]) { display: none; }
.next-up-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-up-text .dur { color: var(--muted); font-family: var(--font-mono); font-size: 12px; margin-left: 6px; }
.next-up-list { flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.next-up.is-empty .next-up-text { color: var(--muted); }

/* ---------- 버튼 줄 ---------- */
.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.actions-left { display: flex; gap: 8px; flex-wrap: wrap; }
.votes { display: flex; gap: 8px; }
.vote {
  --c: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 0;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent);
  color: var(--c);
  cursor: pointer;
}
.vote-label { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.06em; }
.vote-n { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 1.5ch; text-align: right; }
.vote:hover { box-shadow: inset 0 0 0 2px var(--c); }
.vote.is-on { background: var(--c); color: var(--bg); box-shadow: none; }
.vote:disabled { opacity: 0.4; cursor: not-allowed; }
.vote-woot { --c: var(--woot); }
.vote-grab { --c: var(--grab); }
.vote-meh { --c: var(--meh); }
.vote-pad { --c: var(--accent); }
.vote-pad[aria-expanded="true"] { background: var(--c); color: var(--bg); box-shadow: none; }
/* 효과음 패드: 넓은 화면은 한 줄 6칸, 좁은 화면은 3칸씩 두 줄 */
.pads { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 0;
  border-radius: 6px;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--fg);
  font-size: 12px;
  cursor: pointer;
  touch-action: manipulation; /* 빠르게 두 번 눌러도 확대되지 않게 */
  user-select: none;
  -webkit-user-select: none;
}
.pad-icon { font-size: 20px; line-height: 1; }
.pad:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.pad:active, .pad.is-hit { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 520px) {
  .pads { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 누가 패드를 누르면 그 사람 아바타 위로 아이콘이 떠오른다 */
.pad-bubble {
  position: absolute;
  top: -6px;
  left: 50%;
  z-index: 2;
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
  animation: pad-float 1.1s ease-out forwards;
}
@keyframes pad-float {
  from { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
  15% { transform: translate(-50%, -6px) scale(1.15); opacity: 1; }
  to { transform: translate(-50%, -34px) scale(1); opacity: 0; }
}
.fx-vol { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.fx-vol input { width: 140px; accent-color: var(--accent); }