/* 조작부와 신호 기록장(js/game/controls.js). 색·크기 값은 css/base.css의 토큰을 쓴다.
 * 고르기는 모두 여기서 한다(단면도는 보여 주기): 자음 ① 자리 ② 방법 ③ 세기 + 발사 / 모음 ① 높이 ② 앞뒤 ③ 입술 + 발사.
 * 가로: 아래 가운데 [① 이름표·카드][② 이름표·카드][③ 이름표·카드 + 발사] — 폭이 모자라면 묶음 단위로 다음 줄. 그 위 가운데에 조합 요약 한 줄.
 * 세로(휴대폰): [요약 · '기록 N'] / ① 카드 / ② 카드 / ③ 카드 + 발사 — 모두 화면 아래(한 손 조작), 48px 이상, 발사 56px.
 * 선택 카드 = 흰 바탕 + 2px 조작 경계선(반경 12), 고르면 청록 경계 3px + 체크. 발사 = 주 단추(청록 채움, 흰 글씨).
 * 신호는 색만이 아니라 기호(벡터)와 글씨로도 구분한다. 흐린 카드(쓸 수 없는 세기)는 흐림 + 점선 테두리(모양으로도 구분).
 * 크기 변수(화면이 정함): --ctl-card-fs 카드 글씨, --ctl-msg-fs 한 줄 문구, --ctl-label-fs 묶음 이름, --ctl-combo-fs 요약 줄 */

.ctl {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  padding: var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom, 0px));
  font-family: var(--font-body);
  color: var(--ink);
}

/* ── 한 줄 문구 자리: 언제나 한 줄(넘치면 글씨를 줄이고 그래도 넘치면 말줄임) ── */
.ctl-msg {
  width: 100%;
  max-width: 1100px;
  min-height: 1.35em;
  font-size: var(--ctl-msg-fs, 22px);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctl-msg-label {
  display: none;
  margin-right: 0.5em;
  padding: 0.05em 0.45em;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-size: 0.78em;
  font-weight: 700;
  vertical-align: 0.08em;
}
.ctl-msg--follow .ctl-msg-label { display: inline; }
.ctl--portrait .ctl-msg--follow .ctl-msg-label { display: none; } /* 세로: 좁아서 딱지는 빼고 문장만(글씨 15px 이상 유지) */
.ctl-msg[data-kind="message"] .ctl-msg-text { font-weight: 700; }
.ctl-msg[data-kind="shout"] .ctl-msg-text { font-weight: 700; }

/* ── 요약 줄 + 카드 줄을 한 덩어리로 ── */
.ctl-deck { display: flex; flex-direction: column; align-items: center; gap: var(--s2); max-width: 100%; width: 100%; }
.ctl-comborow { display: flex; align-items: center; justify-content: center; gap: var(--s2); min-width: 0; max-width: 100%; }
.ctl-comborow-pad { display: none; }
.ctl-combo {
  min-width: 0; max-width: 100%;
  padding: 4px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--divider);
  font-size: var(--ctl-combo-fs, 20px); font-weight: 600; line-height: 1.3; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctl-combo-part:not(.is-set) { color: var(--ink-2); font-weight: 500; }
.ctl-combo-dot { color: var(--ink-2); }

/* ── 카드 줄: 묶음 = [번호·이름표 | 카드들](+ 마지막 묶음에 발사). 폭이 모자라면 묶음 단위로 다음 줄 ── */
.ctl-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s2) var(--s5);
  max-width: 100%;
}
.ctl-group { display: flex; flex-direction: row; align-items: center; gap: var(--s2); min-width: 0; }
.ctl-group-label { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--ctl-label-fs, 16px); font-weight: 600; color: var(--ink-2); line-height: 1.15; white-space: nowrap; }
.ctl-step {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.35em; height: 1.35em; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 0.78em; font-weight: 700; line-height: 1;
}
.ctl-group--last .ctl-fire { margin-left: var(--s3); }
.ctl-cards { display: flex; gap: var(--s2); }
.ctl-card {
  position: relative;
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 4px 14px;
  border: 2px solid var(--control-line);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--ctl-card-fs, 22px);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--t-pick), border-color var(--t-pick), color var(--t-pick);
}
.ctl-card:hover:not(:disabled) { background: var(--accent-soft); }
.ctl-card:active:not(:disabled) { transform: translateY(1px); }
/* 고른 카드: 청록 경계 3px + 옅은 청록 바탕 + 모서리 체크(글자 없이 그림) */
.ctl-card.is-on {
  border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--accent-soft); color: var(--accent-2); font-weight: 700;
}
.ctl-card.is-on::after {
  content: ''; position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M24 52l17 17 36-38' fill='none' stroke='%23fff' stroke-width='14' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
/* 자리 카드(고1): 몸의 부위 이름 + 한자어 한 줄 */
.ctl-card--two { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding-top: 2px; padding-bottom: 2px; }
.ctl-card-sub { font-size: 0.68em; font-weight: 500; color: var(--ink-2); line-height: 1.1; }
.ctl-card.is-on .ctl-card-sub { color: var(--accent-2); }
.ctl-card.is-dim { opacity: 0.4; border-style: dashed; background: var(--cell-off); cursor: not-allowed; }
.ctl-card:disabled:not(.is-dim) { cursor: default; }
.ctl.is-disabled .ctl-card:not(.is-on), .ctl-card:disabled:not(.is-dim):not(.is-on) { color: var(--ink-2); }

/* 발사: 주 단추(청록 채움, 흰 글씨). 대결에서는 팀 색(css/duel.css) */
.ctl-fire {
  min-width: calc(var(--touch) * 1.75);
  min-height: var(--touch);
  padding: 4px 24px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--fire, var(--accent));
  color: #fff;
  font-family: var(--font-body);
  font-size: calc(var(--ctl-card-fs, 22px) + 4px);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--t-pick), filter var(--t-pick);
}
.ctl-fire:hover:not(:disabled) { filter: brightness(.9); }
.ctl-fire:active:not(:disabled) { transform: translateY(1px); }
.ctl-fire:disabled { background: #DDE5E8; color: #4F646C; cursor: not-allowed; }

/* ── 신호 기록장 ── */
.ctl-logtoggle { display: none; }
.ctl-log {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--r-btn);
  font-size: var(--ctl-log-fs, 18px);
}
.ctl-log-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 4px 12px; border-bottom: 1px solid var(--divider); }
.ctl-log-title { font-weight: 600; font-size: 0.9em; color: var(--ink-2); white-space: nowrap; }
.ctl-log-close { display: none; }
.ctl-log-list { list-style: none; margin: 0; padding: 4px 8px; overflow: auto; min-height: 0; flex: 1 1 auto; }
.ctl-log-item { display: flex; align-items: center; gap: var(--s2); padding: 3px 4px; margin: 1px 0; white-space: nowrap; border-radius: 6px; }
.ctl-log-n { color: var(--ink-2); font-size: 0.8em; min-width: 1.4em; text-align: right; font-variant-numeric: tabular-nums; }
.ctl-log-ico { width: 1em; height: 1em; flex: none; color: var(--ink-2); }
.ctl-log-team { font-size: 0.85em; font-weight: 700; }
.ctl-log-item.t-blue .ctl-log-team { color: var(--blue); }
.ctl-log-item.t-red .ctl-log-team { color: var(--red); }
.ctl-log-what.is-sound { font-family: var(--font-sound); font-weight: 700; }
.ctl-log-what.is-combo { color: var(--ink); font-size: 0.9em; }
.ctl-log-sig { font-weight: 700; }
.ctl-log-item.k-hit { background: rgba(246, 190, 72, .28); }
.ctl-log-item.k-hit .ctl-log-ico, .ctl-log-item.k-hit .ctl-log-sig { color: var(--hit-ink); }
.ctl-log-item.k-line .ctl-log-ico, .ctl-log-item.k-line .ctl-log-sig { color: var(--line); }
.ctl-log-item.k-miss .ctl-log-ico, .ctl-log-item.k-miss .ctl-log-sig { color: var(--miss); }
.ctl-log-item.k-none .ctl-log-ico, .ctl-log-item.k-none .ctl-log-sig { color: var(--dud); }

/* 가로, 기록장이 조작부 안에 있을 때: 문구 위 한 줄 띠 — 최근 세 발만(새 기록이 오른쪽 끝) */
.ctl-log--strip { flex-direction: row; align-items: stretch; width: 100%; max-width: 1100px; max-height: none; }
.ctl-log--strip .ctl-log-head { border-bottom: 0; border-right: 1px solid var(--divider); }
.ctl-log--strip .ctl-log-list { display: flex; gap: var(--s3); overflow: hidden; padding: 4px 8px; }
.ctl-log--strip .ctl-log-item { margin: 0; flex: 0 0 auto; padding: 2px 8px; }
.ctl-log--strip .ctl-log-item:nth-last-child(n+4) { display: none; }
.ctl-log--strip .ctl-log-list:empty::before { content: '—'; color: var(--ink-2); }

/* ── 세로(휴대폰): [요약 · 기록] / ① 카드 / ② 카드 / ③ 카드 + 발사 ── */
.ctl--portrait { gap: 4px; padding: 4px var(--s3) calc(6px + env(safe-area-inset-bottom, 0px)); --ctl-card-fs: 16px; --ctl-combo-fs: 15px; }
.ctl--portrait .ctl-msg { font-size: 17px; }
.ctl--portrait .ctl-deck { gap: 6px; }
/* 세로: [빈 칸 | 요약(화면 가운데) | 기록 단추] — 요약 줄이 안내·카드와 같은 중심선에 오게 */
.ctl--portrait .ctl-comborow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(max-content, 1fr); justify-content: stretch; width: 100%; }
.ctl--portrait .ctl-comborow-pad { display: block; }
.ctl--portrait .ctl-combo { justify-self: center; padding: 3px 10px; }
.ctl--portrait .ctl-bar { flex-direction: column; flex-wrap: nowrap; width: 100%; gap: 6px; align-items: stretch; }
.ctl--portrait .ctl-group-label { display: none; }
.ctl--portrait .ctl-group { width: 100%; gap: 6px; align-items: stretch; } /* ③ 줄: 세기 카드도 발사와 같은 높이 */
.ctl--portrait .ctl-cards { gap: 5px; flex: 1 1 auto; min-width: 0; }
.ctl--portrait .ctl-card { flex: 1 1 auto; min-width: var(--touch); padding: 2px 3px; }
.ctl--portrait .ctl-card--place { font-size: 15px; }
.ctl--portrait .ctl-card.is-on::after { width: 11px; height: 11px; top: 2px; right: 2px; }
.ctl--portrait .ctl-group--last .ctl-fire { margin-left: 0; flex: 0 0 auto; min-width: calc(var(--touch) * 1.75); min-height: 56px; padding: 2px 12px; font-size: 20px; }
.ctl--portrait:not(.ctl--strength):not(.ctl--vowel) .ctl-group--last { flex-wrap: wrap; }
.ctl--portrait:not(.ctl--strength):not(.ctl--vowel) .ctl-group--last .ctl-fire { flex: 1 1 100%; } /* 자음 1단계: 발사가 한 줄을 다 쓴다 */
.ctl--portrait.ctl--vowel .ctl-group--last { flex-wrap: wrap; }
.ctl--portrait.ctl--vowel .ctl-group--last .ctl-fire { flex: 1 1 100%; } /* 모음: ③ 입술 줄 아래 발사 한 줄 */
.ctl--portrait.ctl--vowel .ctl-bar { display: grid; grid-template-columns: 1fr 1fr; }
.ctl--portrait.ctl--vowel .ctl-group--height { grid-column: 1 / -1; }
.ctl--portrait.ctl--vowel .ctl-group--last { display: contents; }
.ctl--portrait.ctl--vowel .ctl-group--last .ctl-cards { grid-column: 2; }
.ctl--portrait.ctl--vowel .ctl-group--last .ctl-fire { grid-column: 1 / -1; }
.ctl--portrait .ctl-logtoggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: 0 0 auto; justify-self: end;
  min-width: var(--touch); min-height: var(--touch); padding: 0 10px; white-space: nowrap;
  border: 2px solid var(--control-line); border-radius: var(--r-btn); background: var(--surface); color: var(--ink);
  font-size: 15px; font-weight: 600; line-height: 1.1; cursor: pointer; touch-action: manipulation;
}
.ctl-logtoggle-count { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ctl--portrait .ctl-logtoggle[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ctl-log--portrait { display: none; }
.ctl-log--portrait.is-open { display: flex; }
.ctl-log--portrait .ctl-log-close {
  display: inline-block; min-height: var(--touch); min-width: var(--touch); padding: 0 12px;
  border: 2px solid var(--control-line); border-radius: var(--r-btn); background: var(--surface); color: var(--ink);
  font-weight: 600; cursor: pointer;
}
/* 세로, 조작부 안: 펼치면 조작부 위로 떠오른다(판을 밀어내지 않음 → 스크롤 없음) */
.ctl--portrait.ctl--log-inside .ctl-log {
  position: absolute; left: var(--s3); right: var(--s3); bottom: 100%; z-index: 5;
  max-height: 50vh; box-shadow: var(--shadow-float);
}