/* themes.css — 농구 점수판 테마 시스템 (Phase 4 / 04-02)
 * base.css의 --bb-* 디자인 토큰을 :root[data-theme="..."]로 오버라이드한다(base.css 무수정 원칙).
 * 적용: control.js/display.js가 document.documentElement.dataset.theme = state.settings.theme.
 *   1) led       — 검정 LED 전광판: DSEG 세그먼트 숫자 + 앰버/레드 글로우
 *   2) broadcast — 방송 하단바: 네이비/화이트 클린, 시스템 산세리프 bold(방송 관례, DSEG 미사용)
 *   3) neon      — 다크 글래스모피즘(blur) + 시안/마젠타 네온 글로우 + DSEG
 *
 * 크로마키(송출 창 body[data-bg="green"|"black"])는 바 외부 배경만 바꾸고, 글로우 억제 + 외곽 보강.
 *   ⚠ 셀렉터 주의: body가 data-bg를 보유하고 :root(html)가 data-theme를 보유 →
 *     크로마키 테마 결합은 `:root[data-theme=...] body[data-bg=...] .xxx` 형태로 작성(W-1).
 */

/* ============ DSEG 7-세그먼트 폰트 (assets/fonts/, 동봉) ============ */
/* font-display: block — FOUT 방지(짧은 블록 기간, 폰트 도착 후 스왑). index/display 양쪽 preload 동반. */
@font-face {
  font-family: 'DSEG7';
  src: url('../assets/fonts/DSEG7Classic-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'DSEG7';
  src: url('../assets/fonts/DSEG7Classic-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* ============ 테마 1 — LED 전광판 ============ */
:root[data-theme='led'] {
  --bb-bg: #060606;
  --bb-surface: #0f0f0f;
  --bb-surface-2: #171717;
  --bb-surface-3: #232323;
  --bb-accent: #ff8c00; /* 앰버 LED */
  --bb-accent-2: #ffaa33;
  --bb-danger: #ff3b30; /* 레드 세그먼트 */
  --bb-text: #ffcc66; /* 앰버 텍스트 */
  --bb-text-dim: #8a6a30;
  --bb-border: #2a2000;
  --bb-border-strong: #4a3800;
  --bb-score-glow: 0 0 8px #ff8c00, 0 0 20px #ff6600, 0 0 44px rgba(255, 102, 0, 0.4);
  --bb-clock-glow: 0 0 6px #ffaa33, 0 0 16px rgba(255, 170, 51, 0.5);
  --bb-font-digit: 'DSEG7', 'SF Mono', 'Consolas', monospace;
}

/* LED 숫자 블록: DSEG 세그먼트 + 앰버 글로우. tabular-nums 명시(W-2). */
:root[data-theme='led'] .score-display,
:root[data-theme='led'] .display-score,
:root[data-theme='led'] .game-clock-display,
:root[data-theme='led'] .display-clock,
:root[data-theme='led'] .shot-clock-display,
:root[data-theme='led'] .display-shot-clock {
  font-family: var(--bb-font-digit);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  text-shadow: var(--bb-score-glow);
  color: var(--bb-text);
}
:root[data-theme='led'] .game-clock-display,
:root[data-theme='led'] .display-clock {
  text-shadow: var(--bb-clock-glow);
}
:root[data-theme='led'] .display-quarter,
:root[data-theme='led'] .quarter-display {
  color: var(--bb-accent);
  text-shadow: 0 0 6px rgba(255, 140, 0, 0.5);
}
/* 송출 컨테이너: 전광판 베젤 느낌(검정 + 앰버 상단 라인 + 안쪽 광택). */
:root[data-theme='led'] #scoreboard-container {
  background: #060606;
  border-top-color: var(--bb-accent);
  box-shadow: 0 -2px 24px rgba(255, 102, 0, 0.18),
    inset 0 0 60px rgba(0, 0, 0, 0.6);
}

/* ============ 테마 2 — 방송 하단바 (Broadcast) ============ */
:root[data-theme='broadcast'] {
  --bb-bg: #0a1626;
  --bb-surface: #14233a;
  --bb-surface-2: #1d3050;
  --bb-surface-3: #284268;
  --bb-accent: #4d9fff; /* 방송 블루 */
  --bb-accent-2: #7db8ff;
  --bb-danger: #ff5a5a;
  --bb-text: #ffffff;
  --bb-text-dim: #9cb3cf;
  --bb-border: #1e3050;
  --bb-border-strong: #335887;
  --bb-font-digit: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 방송 숫자: 시스템 산세리프 heavy bold + 또렷한 대비(글로우 없음). tabular-nums 유지. */
:root[data-theme='broadcast'] .score-display,
:root[data-theme='broadcast'] .display-score,
:root[data-theme='broadcast'] .game-clock-display,
:root[data-theme='broadcast'] .display-clock,
:root[data-theme='broadcast'] .shot-clock-display,
:root[data-theme='broadcast'] .display-shot-clock {
  font-family: var(--bb-font-digit);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-weight: 900;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  color: #ffffff;
  letter-spacing: -0.02em;
}
:root[data-theme='broadcast'] .display-quarter,
:root[data-theme='broadcast'] .quarter-display {
  color: #0a1626;
  background: var(--bb-accent);
  border-radius: var(--bb-radius-sm);
}
/* 송출 컨테이너: 클린 네이비 그라데이션 + 블루 상단 라인. */
:root[data-theme='broadcast'] #scoreboard-container {
  background: linear-gradient(180deg, #19304f 0%, #0a1626 100%);
  border-top-color: var(--bb-accent);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

/* ============ 테마 3 — 네온 글래스 (Neon) ============ */
:root[data-theme='neon'] {
  --bb-bg: #05080f;
  --bb-surface: rgba(18, 28, 48, 0.66);
  --bb-surface-2: rgba(28, 42, 70, 0.78);
  --bb-surface-3: rgba(40, 62, 100, 0.86);
  --bb-accent: #00e5ff; /* 시안 네온 */
  --bb-accent-2: #69f0ff;
  --bb-danger: #ff2d9c; /* 마젠타 */
  --bb-text: #e0f7ff;
  --bb-text-dim: #6f9fb0;
  --bb-border: rgba(0, 229, 255, 0.18);
  --bb-border-strong: rgba(0, 229, 255, 0.36);
  --bb-score-glow: 0 0 10px #00e5ff, 0 0 30px rgba(0, 229, 255, 0.55),
    0 0 64px rgba(0, 229, 255, 0.22);
  --bb-clock-glow: 0 0 8px #00e5ff, 0 0 22px rgba(0, 229, 255, 0.4);
  --bb-font-digit: 'DSEG7', 'SF Mono', 'Consolas', monospace;
}

/* 네온 숫자: DSEG + 시안 글로우. tabular-nums 명시(W-2). */
:root[data-theme='neon'] .score-display,
:root[data-theme='neon'] .display-score,
:root[data-theme='neon'] .game-clock-display,
:root[data-theme='neon'] .display-clock,
:root[data-theme='neon'] .shot-clock-display,
:root[data-theme='neon'] .display-shot-clock {
  font-family: var(--bb-font-digit);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  text-shadow: var(--bb-score-glow);
  color: var(--bb-accent);
}
:root[data-theme='neon'] .game-clock-display,
:root[data-theme='neon'] .display-clock {
  text-shadow: var(--bb-clock-glow);
}
:root[data-theme='neon'] .display-quarter,
:root[data-theme='neon'] .quarter-display {
  color: var(--bb-danger);
  text-shadow: 0 0 8px rgba(255, 45, 156, 0.6);
  background: rgba(255, 45, 156, 0.08);
}
/* 글래스 표면: 반투명 + blur. backdrop-filter 미지원 시 반투명 배경만 적용(graceful). */
:root[data-theme='neon'] .team-panel,
:root[data-theme='neon'] .clock-section,
:root[data-theme='neon'] .panel-advanced,
:root[data-theme='neon'] .widget-item,
:root[data-theme='neon'] .help-panel {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--bb-surface);
  border-color: var(--bb-border);
}
/* 송출 컨테이너: 다크 글래스 + 시안 네온 라인 + 외곽 글로우. */
:root[data-theme='neon'] #scoreboard-container {
  background: linear-gradient(180deg, rgba(18, 28, 48, 0.7) 0%, rgba(5, 8, 15, 0.92) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top-color: var(--bb-accent);
  box-shadow: 0 -2px 28px rgba(0, 229, 255, 0.28),
    inset 0 0 50px rgba(0, 0, 0, 0.45);
}

/* reduced-motion / blur DoS 대응(T-04-05): blur 비용 회피 — 반투명 배경만 유지. */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme='neon'] .team-panel,
  :root[data-theme='neon'] .clock-section,
  :root[data-theme='neon'] .panel-advanced,
  :root[data-theme='neon'] .widget-item,
  :root[data-theme='neon'] .help-panel,
  :root[data-theme='neon'] #scoreboard-container {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ============ 크로마키 송출 배경 (display.html body[data-bg]) ============ */
/* 바 외부 배경(body)만 단색으로 — 컨테이너(#scoreboard-container)는 테마 스타일 유지. */
body[data-bg='green'] {
  background: #00ff00 !important;
}
body[data-bg='black'] {
  background: #000000 !important;
}
/* data-bg="theme"(기본)는 별도 스타일 없음 — body background = var(--bb-bg). */

/* 크로마키 번짐 방지(Pitfall 12): 바 가장자리 separation + 텍스트 외곽 보강. */
body[data-bg='green'] #scoreboard-container,
body[data-bg='black'] #scoreboard-container {
  outline: 2px solid rgba(0, 0, 0, 0.85);
}
body[data-bg='green'] .display-score,
body[data-bg='green'] .display-clock,
body[data-bg='green'] .display-team-name,
body[data-bg='green'] .display-quarter,
body[data-bg='green'] .display-shot-clock,
body[data-bg='black'] .display-score,
body[data-bg='black'] .display-clock,
body[data-bg='black'] .display-team-name,
body[data-bg='black'] .display-quarter,
body[data-bg='black'] .display-shot-clock {
  /* 크로마키 모드: 텍스트 외곽 진한 테두리로 안티앨리어싱 혼색(녹색 fringe) 차단. */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
    0 0 4px rgba(0, 0, 0, 0.9);
}
/* 크로마키 우선: led/neon 글로우가 크로마키에서 번지지 않도록 외곽선으로 대체(W-1 형태). */
:root[data-theme='led'] body[data-bg='green'] .display-score,
:root[data-theme='led'] body[data-bg='green'] .display-clock,
:root[data-theme='led'] body[data-bg='green'] .display-shot-clock,
:root[data-theme='led'] body[data-bg='black'] .display-score,
:root[data-theme='led'] body[data-bg='black'] .display-clock,
:root[data-theme='led'] body[data-bg='black'] .display-shot-clock,
:root[data-theme='neon'] body[data-bg='green'] .display-score,
:root[data-theme='neon'] body[data-bg='green'] .display-clock,
:root[data-theme='neon'] body[data-bg='green'] .display-shot-clock,
:root[data-theme='neon'] body[data-bg='black'] .display-score,
:root[data-theme='neon'] body[data-bg='black'] .display-clock,
:root[data-theme='neon'] body[data-bg='black'] .display-shot-clock {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* ============ 도움말 오버레이 (#help-overlay, 컨트롤 창 전용) ============ */
#help-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
#help-overlay.open {
  display: flex;
}
.help-panel {
  background: var(--bb-surface);
  border: 1px solid var(--bb-border-strong);
  border-radius: var(--bb-radius);
  padding: var(--bb-space-6);
  max-width: 600px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--bb-shadow);
  position: relative;
}
.help-panel h2 {
  margin: 0 0 var(--bb-space-4);
  font-size: 1.2rem;
  color: var(--bb-accent);
}
.help-close-btn {
  position: absolute;
  top: var(--bb-space-4);
  right: var(--bb-space-4);
  background: none;
  border: none;
  color: var(--bb-text-dim);
  font-size: 1.6rem;
  cursor: pointer;
  padding: var(--bb-space-2);
  line-height: 1;
}
.help-close-btn:hover {
  color: var(--bb-text);
}
.help-keymap {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88rem;
  margin-bottom: var(--bb-space-4);
}
.help-keymap th,
.help-keymap td {
  padding: var(--bb-space-2) var(--bb-space-3);
  border-bottom: 1px solid var(--bb-border);
  text-align: left;
}
.help-keymap th {
  color: var(--bb-text-dim);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.help-keymap td:first-child {
  font-family: var(--bb-font-mono);
  color: var(--bb-accent);
  white-space: nowrap;
}
.help-notice {
  font-size: 0.82rem;
  color: var(--bb-text-dim);
  line-height: 1.6;
  margin-top: var(--bb-space-3);
  padding: var(--bb-space-3) var(--bb-space-4);
  background: var(--bb-surface-2);
  border-radius: var(--bb-radius-sm);
  border-left: 3px solid var(--bb-accent);
}
.help-notice strong {
  color: var(--bb-text);
}

/* ============ 설정 UI — 테마 선택 / 배경 선택 ============ */
.settings-row--theme {
  flex-wrap: wrap;
}
.theme-selector {
  display: flex;
  gap: var(--bb-space-2);
}
.btn-theme {
  padding: var(--bb-space-2) var(--bb-space-3);
  font-size: 0.82rem;
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-sm);
  background: var(--bb-surface-2);
  color: var(--bb-text-dim);
  cursor: pointer;
  transition: background var(--bb-transition), border-color var(--bb-transition),
    color var(--bb-transition);
}
.btn-theme.active,
.btn-theme:hover {
  background: var(--bb-accent);
  border-color: var(--bb-accent);
  color: #000;
}
.bg-selector {
  display: flex;
  gap: var(--bb-space-2);
  align-items: center;
}
.bg-selector select {
  background: var(--bb-surface-2);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-sm);
  color: var(--bb-text);
  padding: var(--bb-space-2) var(--bb-space-3);
  font-size: 0.82rem;
}