/* ════════════════════════════════
   스코어보드 기본 레이아웃
════════════════════════════════ */
body.score-referee-mode {
  margin: 0;
  max-width: none;
  width: 100%;
  min-height: 100dvh;
  background: #111827;
  overflow: hidden;
}

body.score-referee-mode .topbar,
body.score-referee-mode .bottom-nav,
body.score-referee-mode .floating-room-status,
body.score-referee-mode #page-home,
body.score-referee-mode #page-players,
body.score-referee-mode #page-round,
body.score-referee-mode #page-history,
body.score-referee-mode #page-settings {
  display: none !important;
}

body.score-referee-mode .content { padding: 0; }
body.score-referee-mode #page-score.active { display: block; }

/* ── 회전 컨테이너 ── */
.score-rotator {
  position: fixed;
  inset: 0;
  background: #111827;
  color: white;
  overflow: hidden;
}

/* ════════════════════════════════
   세로 화면 → 90도 회전으로 가로 표시
════════════════════════════════ */
@media (orientation: portrait) {
  body.score-referee-mode .score-rotator {
    width: 100dvh;
    height: 100dvw;
    position: fixed;
    top:  calc((100dvh - 100dvw) / 2);
    left: calc((100dvw - 100dvh) / 2);
    transform: rotate(90deg);
    transform-origin: center center;
    overflow: hidden;
  }

  body.score-referee-mode .score-ref-shell {
    width: 100dvh;
    height: 100dvw;
    min-height: unset;
    padding: 4px;
    box-sizing: border-box;
  }

  body.score-referee-mode .score-big-number {
    font-size: clamp(65px, 56dvw, 310px) !important;
  }

  body.score-referee-mode .score-team-name {
    font-size: clamp(12px, 4dvw, 30px) !important;
    -webkit-line-clamp: 1;
  }

  body.score-referee-mode .score-round-big {
    font-size: clamp(10px, 2.8dvw, 20px) !important;
  }

  body.score-referee-mode .score-finish-btn {
    min-height: 30px;
    font-size: clamp(10px, 2.6dvw, 14px);
    padding: 0 10px;
    min-width: 76px;
  }

  body.score-referee-mode .score-swap-btn,
  body.score-referee-mode .score-undo-icon-btn,
  body.score-referee-mode .score-menu-circle-btn,
  body.score-referee-mode .score-close-circle-btn {
    min-width: 34px;
    min-height: 34px;
    width: 34px;
    height: 34px;
    font-size: 16px;
  }

  body.score-referee-mode .score-hamburger { gap: 3px; }
  body.score-referee-mode .score-hamburger span { width: 13px; }
  body.score-referee-mode .score-overlay-center { gap: 5px; }
  body.score-referee-mode .score-overlay-top { padding: 5px 14px 4px; }
  body.score-referee-mode .score-overlay-bottom { padding: 4px 14px 5px; }
}

/* ════════════════════════════════
   가로 화면 공통
════════════════════════════════ */
.score-ref-shell {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  background: #111827;
  color: white;
  padding: 6px;
  padding-left:  max(6px, env(safe-area-inset-left));
  padding-right: max(6px, env(safe-area-inset-right));
  padding-top:   max(6px, env(safe-area-inset-top));
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── 메인 패널: 2분할 flex-row + 오버레이 기준점 ── */
.score-main-panel {
  width: 100%;
  height: 100%;
  background: #111827;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: row;
  gap: 0;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── 팀 패널 (2분할 전체 채움) ── */
.score-team-bigbox {
  flex: 1;
  height: 100%;
  background: #0f172a;
  padding: 10px 12px;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  transition: background 0.3s ease;
}

.score-tap-left  { border-radius: 13px 0 0 13px; }
.score-tap-right { border-radius: 0 13px 13px 0; }

/* ── 팀 색상 (빨강 / 파랑) ── */
.score-team-red  { background: linear-gradient(160deg, #991b1b, #dc2626); }
.score-team-blue { background: linear-gradient(160deg, #1e40af, #2563eb); }

/* ── 팀 구분선 (버튼 border-right 대신 독립 div 사용) ── */
.score-center-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: rgba(255,255,255,0.2);
  pointer-events: none;
  z-index: 5;
}

.score-team-bigbox.score-tap-btn {
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.score-team-bigbox.score-tap-btn:disabled { opacity: 0.65; cursor: default; }
.score-team-bigbox.score-tap-btn:active   { filter: brightness(1.1); }

.score-team-name {
  width: 100%;
  text-align: center;
  font-size: clamp(14px, 2.4vw, 36px);
  font-weight: 900;
  line-height: 1.2;
  color: #e2e8f0;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0;
  /* 상단 오버레이와 겹치지 않게 패딩 */
  padding-top: 48px;
}

.score-big-number {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(70px, 54vmin, 440px);
  line-height: 0.85;
  font-weight: 900;
  font-stretch: condensed;
  letter-spacing: -0.04em;
  text-align: center;
  color: white;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
  user-select: none;
  overflow: hidden;
}

/* ════════════════════════════════
   오버레이 요소들 (absolute positioning)
════════════════════════════════ */

/* 공통: 오버레이 컨테이너는 클릭 통과, 자식 버튼은 클릭 받음 */
.score-overlay-top,
.score-overlay-center,
.score-overlay-bottom {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

/* ── 라운드 표시 (상단 중앙) ── */
.score-overlay-top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 18px 7px;
  background: rgba(15, 23, 42, 0.88);
  border-radius: 0 0 14px 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: none;
  white-space: nowrap;
}

.score-round-big {
  font-size: clamp(13px, 2vw, 24px);
  font-weight: 900;
  color: white;
  text-align: center;
}

.score-mode-box {
  font-size: clamp(10px, 1.3vw, 13px);
  font-weight: 800;
  color: #93c5fd;
  text-align: center;
}
.score-mode-box:empty { display: none; }

.court-alert-box {
  font-size: clamp(11px, 1.6vw, 18px);
  font-weight: 900;
  color: #f87171;
  text-align: center;
}
.court-alert-box:empty { display: none; }

/* ── 중앙 버튼 스택 ── */
.score-overlay-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.score-overlay-center > button { pointer-events: auto; }

/* ── 경기종료 (하단 중앙) ── */
.score-overlay-bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 18px 8px;
  border-radius: 14px 14px 0 0;
}
.score-overlay-bottom > button { pointer-events: auto; }

/* ── 교대 버튼 (기존 유지) ── */
.score-swap-btn {
  min-width: 42px; min-height: 42px;
  width: 42px; height: 42px;
  padding: 0; border-radius: 999px;
  font-size: 20px; font-weight: 900;
  background: #e5e7eb; color: #111827;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
}
.score-swap-btn:disabled { opacity: 0.55; }
.score-swap-btn:active { transform: scale(0.93); }

/* ── 되돌리기 버튼 (기존 유지) ── */
.score-undo-icon-btn {
  min-width: 42px; min-height: 42px;
  width: 42px; height: 42px;
  padding: 0; border-radius: 999px;
  font-size: 20px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
}
.score-undo-icon-btn:active { transform: scale(0.93); }

/* ── 메뉴 버튼 (햄버거 아이콘, 원형) ── */
.score-menu-circle-btn {
  min-width: 42px; min-height: 42px;
  width: 42px; height: 42px;
  padding: 0; border-radius: 999px;
  background: #e5e7eb; color: #111827;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  appearance: none; -webkit-appearance: none;
}
.score-menu-circle-btn:active { transform: scale(0.93); }

.score-hamburger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}
.score-hamburger span {
  display: block;
  width: 16px;
  height: 2px;
  background: #111827;
  border-radius: 2px;
}

/* ── 점수판 닫기 버튼 (X, 원형) ── */
.score-close-circle-btn {
  min-width: 42px; min-height: 42px;
  width: 42px; height: 42px;
  padding: 0; border-radius: 999px;
  background: #374151;
  color: #f87171;
  border: 1px solid rgba(248,113,113,0.35);
  font-size: 18px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.score-close-circle-btn:active { transform: scale(0.93); }

/* ── 경기종료 버튼 ── */
.score-finish-btn {
  min-height: 40px;
  min-width: 96px;
  font-size: clamp(12px, 1.6vw, 16px);
  padding: 0 16px;
  white-space: nowrap;
}

/* ── 사이드 패널 ── */
.score-side-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 190; opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.score-side-backdrop.show { opacity: 1; pointer-events: auto; }

.score-side-panel {
  position: fixed; top: 0; right: 0;
  width: min(300px, 80vw); height: 100dvh;
  background: #0f172a;
  border-left: 1px solid rgba(255,255,255,0.08);
  z-index: 200; padding: 12px; overflow-y: auto;
  transition: transform 0.25s ease;
}
.score-side-panel-hidden { transform: translateX(100%); }
.score-side-panel-open   { transform: translateX(0); }
.score-side-panel .match { background: #111827; border-color: rgba(255,255,255,0.08); color: white; }
.score-side-panel .match.done { background: #15351f; border-color: #3ea35c; }
.score-side-panel .small { color: #cbd5e1; }

.score-side-top-buttons { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; }
.score-side-top-buttons button { min-height: 48px; font-size: 16px; }
.score-match-picker-title { font-size: 18px; font-weight: 900; margin-bottom: 10px; color: white; }
.score-empty-text { color: #cbd5e1; font-size: 15px; }
.score-orientation-guide { display: none; }

/* ════════════════════════════════
   가로 화면 높이별 반응형 (폴드/소형 폰)
════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {
  .score-overlay-center { gap: 5px; }
  .score-overlay-top  { padding: 5px 14px 4px; }
  .score-overlay-bottom { padding: 4px 14px 5px; }

  .score-finish-btn {
    min-height: 32px;
    font-size: 12px;
    padding: 0 10px;
    min-width: 76px;
  }

  .score-swap-btn, .score-undo-icon-btn,
  .score-menu-circle-btn, .score-close-circle-btn {
    min-width: 34px; min-height: 34px;
    width: 34px; height: 34px;
    font-size: 16px;
  }

  .score-hamburger { gap: 3px; }
  .score-hamburger span { width: 13px; }
  .score-close-circle-btn { font-size: 15px; }

  .score-team-name {
    font-size: clamp(12px, 2.2vw, 22px) !important;
    -webkit-line-clamp: 1;
    padding-top: 38px;
  }
  .score-big-number { font-size: clamp(54px, 52vmin, 290px) !important; }
  .score-round-big  { font-size: clamp(10px, 1.8vw, 18px); }
}

@media (orientation: landscape) and (max-height: 360px) {
  .score-team-name  { font-size: clamp(10px, 2vw, 16px) !important; padding-top: 32px; }
  .score-big-number { font-size: clamp(44px, 50vmin, 215px) !important; }
  .score-overlay-top  { padding: 4px 12px 3px; }
  .score-overlay-bottom { padding: 3px 12px 4px; }
}

@media (max-width: 380px) {
  .score-side-panel { width: min(260px, 84vw); }
}

/* ════════════════════════════════
   점수판 팝업 가로 회전
   (세로 기기에서 90도 회전된 점수판과 동일한 좌표계 적용)
════════════════════════════════ */
@media (orientation: portrait) {
  body.score-referee-mode #appAlertModal,
  body.score-referee-mode #appConfirmModal {
    width: 100dvh;
    height: 100dvw;
    position: fixed;
    inset: auto;
    top: calc((100dvh - 100dvw) / 2);
    left: calc((100dvw - 100dvh) / 2);
    transform: rotate(90deg);
    transform-origin: center center;
    z-index: 600;
  }

  body.score-referee-mode #appAlertModal .records-modal-sheet,
  body.score-referee-mode #appConfirmModal .records-modal-sheet {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 480px;
    max-height: 85%;
    margin: 0 auto;
    width: auto;
  }
}