/* 어드민(중계 리모컨) — 모바일/태블릿에서 한 손으로 누르는 것을 전제로 한 다크 UI */
:root {
  --bg: #0e1116;
  --panel: #171c24;
  --panel-2: #1f2630;
  --line: #2a3340;
  --text: #e6ebf2;
  --muted: #8ea0b5;
  --accent: #ffcc00;
  --ok: #2ecc71;
  --warn: #f1c40f;
  --danger: #e74c3c;
  --blue: #3498db;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: 'Noto Sans KR', -apple-system, sans-serif; }
button, input, select, textarea { font-family: inherit; font-size: 14px; }
button { cursor: pointer; border: none; border-radius: 6px; padding: 10px 12px; font-weight: 700; background: var(--panel-2); color: var(--text); }
button:active { filter: brightness(0.85); }
/* 낮은 명시도로 둔다 — .inp-num/.inp-name 같은 클래스 규칙이 이겨야 한다 */
input, select, textarea {
  background: #232b36; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; width: 100%;
}
#rt-app { max-width: 720px; margin: 0 auto; padding: 10px 10px 60px; overflow-x: hidden; }

/* --------------------------------- 로그인 -------------------------------- */
.login-overlay { position: fixed; inset: 0; background: #0b0e13; display: flex; align-items: center; justify-content: center; z-index: 9000; padding: 16px; }
.login-card { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.login-card h2 { margin: 0 0 4px; font-size: 20px; }
.login-card p.sub { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.login-card input { margin-bottom: 10px; }
.login-card .btn-primary { width: 100%; background: var(--blue); color: #fff; padding: 12px; margin-bottom: 8px; }
.login-card .btn-ghost { width: 100%; background: transparent; color: var(--muted); border: 1px solid var(--line); }
.login-msg { color: var(--danger); font-size: 13px; min-height: 18px; margin: 4px 0 8px; }
.login-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.login-tabs button { flex: 1; background: #202836; color: var(--muted); }
.login-tabs button.on { background: var(--blue); color: #fff; }

/* --------------------------------- 헤더 ---------------------------------- */
header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 2px 12px; }
header h2 { font-size: 16px; margin: 0; display: flex; align-items: center; gap: 6px; }
#apiStatusDot { width: 10px; height: 10px; border-radius: 50%; background: #777; display: inline-block; }
#apiStatusDot.connected { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
#apiStatusDot.polling { background: var(--warn); }
#apiStatusDot.offline, #apiStatusDot.error { background: var(--danger); }
.header-btn { background: #232b36; color: var(--text); font-size: 12px; padding: 7px 10px; }
.header-btn.danger { background: #52241f; color: #ffb4a8; }
.spacer { flex: 1; }
#statusText { color: var(--muted); font-size: 12px; }

/* -------------------------------- 프리뷰 박스 ------------------------------ */
.preview-box { display: grid; grid-template-columns: 1fr 88px 1fr; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px 10px 10px; margin-bottom: 12px; }
.p-team { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.p-name { text-align: center; font-weight: 800; padding: 6px; border-radius: 6px; background: #222; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-header-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
.p-logo { width: clamp(34px, 12vw, 52px); height: clamp(34px, 12vw, 52px); flex: 0 0 auto; object-fit: contain; background: #12161d; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; }
.p-score { font-size: clamp(28px, 9vw, 44px); font-weight: 900; line-height: 1; cursor: pointer; font-variant-numeric: tabular-nums; }
.p-player-card { border: 2px solid #333; border-radius: 8px; padding: 6px; background: #12161d; cursor: pointer; }
.p-player-card.active { border-color: var(--accent); }
.p-stats { font-size: 11px; color: var(--muted); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; }
.p-card-top { display: flex; align-items: center; gap: 5px; font-weight: 700; min-width: 0; }
.p-role-badge { background: #2a3340; color: var(--accent); border-radius: 4px; padding: 1px 5px; font-size: 11px; }
.p-card-num { color: var(--accent); font-size: 13px; }
.p-card-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.p-info { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.p-diamond-wrapper { position: relative; width: 56px; height: 56px; transform: rotate(45deg) scale(0.8); margin-top: 12px; }
.p-base { position: absolute; width: 24px; height: 24px; background: #3b4553; border: 1px solid #000; cursor: pointer; }
.p-base.active { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.p-base.b1 { right: 8px; top: -18px; }
.p-base.b2 { left: -18px; top: -18px; }
.p-base.b3 { left: -18px; bottom: 8px; }
.p-inning { font-size: 20px; font-weight: 800; cursor: pointer; }
.p-bso-wrapper { display: flex; flex-direction: column; gap: 3px; }
.p-bso-row { display: flex; align-items: center; gap: 4px; }
.p-label { font-size: 12px; font-weight: 900; width: 10px; color: var(--muted); }
.p-dot { width: 14px; height: 14px; border-radius: 50%; background: #3b4553; cursor: pointer; }
.p-dot.b.active { background: var(--ok); }
.p-dot.s.active { background: var(--warn); }
.p-dot.o.active { background: var(--danger); }

/* -------------------------------- 컨트롤 그룹 ------------------------------ */
.control-group { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.layout-header { display: flex; align-items: center; justify-content: space-between; padding: 12px; cursor: pointer; font-weight: 700; }
.layout-header .toggle-icon { font-size: 11px; background: #2a3340; color: var(--muted); padding: 3px 8px; border-radius: 4px; }
.group-body { padding: 0 12px 12px; }
.row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
/* flex 자식은 기본 min-width:auto 라 입력/버튼이 줄어들지 않고 가로 스크롤을 만든다 */
.row > * { min-width: 0; }
.row > button { flex: 1; }
.row > input, .row > select { flex: 1; width: auto; }
.row .lbl { flex: 0 0 64px; color: var(--muted); font-size: 13px; }
.grid-4 > button, .grid-3 > button, .layout-grid > button, .theme-grid > * { min-width: 0; }
.preset-row > * { min-width: 0; }
.preset-row > input, .preset-row > select { flex: 1; width: auto; }
.preset-row > button { flex: 0 0 auto; }
.btn-ball { background: #1e6b45; }
.btn-strike { background: #8a6d09; }
.btn-out { background: #7d2b22; }
.btn-reset { background: #2a3340; color: var(--muted); font-size: 12px; }
.btn-base { background: #f5c518; color: #000; font-weight: 700; }
.btn-base.active { background: #ff9500; color: #000; box-shadow: inset 0 0 0 2px #000; }
.btn-plus { background: #5a6675; }   /* +1점 : 밝은 회색 */
.btn-minus { background: #2f3742; }  /* -1점 : 어두운 회색 */
/* 점수 행: 타이틀 + [+1점] + [-1점] 을 같은 간격(3등분)으로 */
.score-row > * { flex: 1 1 0; }
.score-row .lbl { flex: 1 1 0; color: var(--muted); font-size: 13px; text-align: left; }
.btn-show { background: #34495e; }
.btn-edit-lineup { background: #2c6fa8; }
.btn-show.on { background: var(--ok); color: #06210f; }
.btn-hit { background: #1e6b45; }
.btn-walk { background: #2c6fa8; }
.btn-sac { background: #6b5b1e; }
.btn-out-res { background: #7d2b22; }
.btn-action-trigger { background: #6c3fb0; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.layout-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.layout-btn { background: #2a3340; padding: 12px 0; }
.hint { color: var(--muted); font-size: 12px; margin: 6px 0; }

/* --------------------------------- 모달 ---------------------------------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); display: none; align-items: center; justify-content: center; z-index: 8000; padding: 12px; }
.modal-overlay.open { display: flex; }
.modal-content { background: #1a1f27; border: 1px solid var(--line); border-radius: 12px; width: 100%; max-width: 480px; max-height: 92vh; display: flex; flex-direction: column; }
.modal-header { padding: 14px; border-bottom: 1px solid var(--line); font-weight: 800; text-align: center; }
.modal-body { padding: 14px; overflow-y: auto; flex: 1; }
.modal-footer { padding: 12px 14px; border-top: 1px solid var(--line); display: flex; gap: 8px; }
.modal-footer button { flex: 1; }
.btn-save { background: var(--ok); color: #06210f; }
#btnPresetSave { background: #2c6fa8; color: #fff; }
.btn-cancel { background: #3a4453; }
.btn-danger { background: var(--danger); color: #fff; }

/* -------------------------------- 라인업 행 -------------------------------- */
.preset-row { display: flex; gap: 6px; margin-bottom: 8px; }
.lineup-row { background: #12161d; border: 1px solid #262f3b; border-left: 4px solid #333; border-radius: 8px; padding: 8px; margin-bottom: 8px; }
.lineup-row.is-batter { border-left-color: var(--accent); }
.lineup-row.dragging { opacity: 0.6; }
.lineup-top { display: flex; align-items: center; gap: 6px; }
.drag-handle { cursor: grab; color: #667; padding: 4px 6px; font-size: 18px; touch-action: none; }
.idx-label { width: 18px; text-align: center; color: var(--muted); font-size: 12px; font-weight: 700; }
.inp-num { width: 52px; text-align: center; color: var(--accent); font-weight: 700; }
.inp-name { flex: 1; min-width: 0; font-weight: 700; }
.inp-pos { width: 62px; }
.lineup-top button { flex: 0 0 auto; align-self: stretch; padding: 5px 10px; font-size: 11px; background: #2a3340; white-space: nowrap; }
.lineup-bot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 8px; padding-top: 6px; border-top: 1px solid #242c37; font-size: 12px; color: var(--muted); }
.lineup-bot button { padding: 5px 8px; font-size: 11px; background: #2a3340; }
.mini-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.mini-row span { flex: 0 0 74px; color: var(--muted); font-size: 12px; }
.mini-row input { flex: 1; }
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-card { border: 2px solid var(--line); border-radius: 8px; padding: 10px 6px; text-align: center; font-size: 12px; background: #12161d; cursor: pointer; }
.theme-card.on { border-color: var(--accent); color: var(--accent); }
.action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.action-grid button { padding: 16px 8px; font-size: 15px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #222c38; border: 1px solid var(--line); color: #fff; padding: 10px 16px; border-radius: 24px; z-index: 9999; font-size: 13px; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.toast.show { opacity: 1; }

input[type='color'] { width: 56px; height: 34px; padding: 2px; background: #232b36; border: 1px solid var(--line); border-radius: 6px; }

/* 로그인: 최근 사용한 경기 (게임 ID 가 랜덤 해시라 목록이 사실상 유일한 재진입 경로) */
.recent-title { color: var(--muted); font-size: 12px; margin: 18px 0 8px; }
.recent-item { display: flex; align-items: center; gap: 8px; width: 100%; background: #202836; border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 6px; text-align: left; }
.recent-item .ri-main { flex: 1; min-width: 0; text-align: left; }
.recent-item .ri-label { display: block; font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-item .ri-id { display: block; font-size: 11px; color: var(--muted); font-family: ui-monospace, monospace; }
.recent-item .ri-go { flex: 0 0 auto; font-size: 11px; color: var(--blue); }
.recent-item .ri-del { flex: 0 0 auto; background: transparent; color: #66707d; padding: 4px 6px; font-size: 12px; }
.created-notice { background: #1c3a2a; border: 1px solid #2e6b48; color: #b8f0d0; border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
#gameIdField { font-family: ui-monospace, monospace; font-weight: 700; letter-spacing: 1px; color: var(--accent); }