/* 캔버스 대신 DOM 으로 그리는 게임이라 공통 스타일 일부를 덮어쓴다 */

/* shared/game.css 의 [hidden] 규칙이 앞 줄 오타로 무시될 수 있어 여기서 다시 보장 */
[hidden] { display: none !important; }

#wrap {
  /* 모바일 화상 키보드가 아래를 덮으므로 위쪽에 붙인다 */
  place-items: start center;
  padding: max(16px, 9vh) 16px 16px;
}

#board {
  width: min(720px, 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}

.hud { display: flex; align-items: center; gap: 12px; }
.time {
  min-width: 2.2em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: bold;
  color: var(--accent);
}
.time.hurry { color: #ff5d73; }
.bar {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 100%;
  background: var(--accent-2);
  transform-origin: left center;
}
.bar-fill.hurry { background: #ff5d73; }

button.icon {
  padding: 4px 8px;
  font-size: 18px;
  letter-spacing: 0;
  background: transparent;
  box-shadow: none;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  font-size: 14px;
  color: var(--muted);
}
.stats b { color: var(--fg); font-size: 18px; }
/* 지금 문장 단계(답장 → 보고 → 공지) */
.tier {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--accent-2);
  box-shadow: inset 0 0 0 1px rgba(76, 242, 255, 0.45);
}
.combo { color: var(--accent); font-weight: bold; }
.tier.up, .combo.up { animation: pop 0.3s ease-out; }
@keyframes pop { from { transform: scale(1.3); } to { transform: none; } }

.target {
  margin: 12px 0 0;
  min-height: 1.5em;
  font-size: clamp(22px, 5.5vw, 34px);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.target span { color: rgba(232, 236, 255, 0.35); }
.target .ok { color: var(--fg); }
.target .bad { color: #ff5d73; background: rgba(255, 93, 115, 0.15); border-radius: 3px; }
.target .comp { color: var(--accent-2); text-decoration: underline; text-underline-offset: 6px; }
.target .cur { box-shadow: inset 0 -3px 0 var(--accent); }
.target .extra { color: #ff5d73; }
.target.done { animation: done 0.25s ease-out; }
@keyframes done { from { transform: scale(1.03); color: var(--accent); } to { transform: none; } }

.next {
  margin: 0;
  min-height: 1.4em;
  font-size: clamp(15px, 3.6vw, 19px);
  color: rgba(138, 144, 184, 0.55);
}
.next:not(:empty)::before { content: "다음 › "; }

.typing {
  width: 100%;
  /* 16px 미만이면 iOS 가 확대해 버린다 */
  font: inherit;
  font-size: max(16px, clamp(18px, 4.5vw, 24px));
  padding: 12px 14px;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
}
.typing:focus { border-color: var(--accent-2); }
.typing.shake { animation: shake 0.3s; border-color: #ff5d73; }
@keyframes shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* 시작·결과 화면 뒤로 문장과 입력창이 비쳐 제목과 겹치지 않도록 더 진하게 */
.overlay { background: rgba(5, 6, 15, 0.94); }