@charset "utf-8";
/* 산성비 타자 - 게임 전용 스타일 (공통 톤은 /css/retro.css) */

.game-win { max-width: 720px; margin: 0 auto; }

#hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-family: var(--font-title);
  font-size: 0.8rem;
  margin-bottom: 8px;
}
#hud .hud-item { display: inline-flex; align-items: center; gap: 6px; }
#hud b { font-size: 0.85rem; }
#hud-combo {
  font-family: var(--font-title);
  color: var(--star);
}

/* 수위 게이지 */
#water-gauge {
  position: relative;
  height: 18px;
  margin-bottom: 8px;
  background: #ffffff;
  border-top: 2px solid var(--face-dark);
  border-left: 2px solid var(--face-dark);
  border-right: 2px solid var(--face-light);
  border-bottom: 2px solid var(--face-light);
  overflow: hidden;
}
#water-fill {
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(90deg, #4488cc 0 6px, #5599dd 6px 12px);
  transition: width 0.2s steps(4);
}
#water-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  line-height: 18px;
  text-align: center;
  font-family: var(--font-title);
  font-size: 0.72rem;
  color: #102040;
}

/* 낙하 영역 */
#play-area {
  position: relative;
  height: clamp(300px, 52vh, 460px);
  overflow: hidden;
  background: linear-gradient(#dff0ff 0%, #eef8ff 60%, #f6fbff 100%);
  border: 2px solid var(--ink);
  cursor: text;
}
#play-area.splash { animation: splash-shake 0.2s steps(2) 1; }

@keyframes splash-shake {
  0% { transform: translateX(0); }
  50% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

#water {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: repeating-linear-gradient(180deg, rgba(60, 130, 200, 0.85) 0 4px, rgba(40, 110, 180, 0.85) 4px 8px);
  border-top: 2px solid #2a6ba8;
  transition: height 0.25s steps(4);
}

.falling-word {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px 6px;
  white-space: nowrap;
  font-family: var(--font-title);
  font-size: 1rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--ink);
  will-change: transform;
}
.falling-word.target {
  background: #ffe9a8;
  border-color: #cc8800;
  color: #663300;
}
.falling-word.cleared {
  animation: pop 0.24s steps(3) forwards;
  background: #b7f0c0;
  border-color: #2f8f4a;
}
.falling-word.missed {
  animation: sink 0.24s steps(3) forwards;
  background: #ffb3b3;
  border-color: #a02020;
}

@keyframes pop {
  to { opacity: 0; letter-spacing: 4px; }
}
@keyframes sink {
  to { opacity: 0; }
}

/* 레벨업 표시 */
#level-flash {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-title-lg);
  font-size: 1.6rem;
  color: var(--title-bg);
  text-shadow: 2px 2px 0 #fff;
  opacity: 0;
  pointer-events: none;
}
#level-flash.show { animation: flash 0.9s steps(6) 1; }

@keyframes flash {
  0% { opacity: 0; transform: scale(0.8); }
  30% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1); }
}

/* 오버레이 */
#overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 32, 0.55);
  z-index: 3;
}
#overlay.show { display: flex; }

#overlay-box {
  background: var(--face);
  border-top: 2px solid var(--face-light);
  border-left: 2px solid var(--face-light);
  border-right: 2px solid var(--face-darker);
  border-bottom: 2px solid var(--face-darker);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
  padding: 16px 18px;
  max-width: 90%;
  text-align: center;
}
#overlay-title {
  margin: 0 0 8px;
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 400;
}
#overlay-text {
  margin: 0 0 12px;
  font-size: 0.88rem;
  line-height: 1.7;
}
.best-flag { color: var(--star); }

/* 입력 줄 */
#input-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
#input-row input {
  flex: 1 1 auto;
  font-family: var(--font-title);
  font-size: 1rem;
  padding: 6px 8px;
}
#input-row .btn { flex: 0 0 auto; }

#best-line { margin: 8px 0 0; }

/* ---- 특수 단어 ---- */
.falling-word.word-danger {
  background: #ffd6d6;
  border-color: #a02020;
  color: #7a1010;
}
.falling-word.word-purify {
  background: #d6ecff;
  border-color: #2a6ba8;
  color: #0d3b66;
}
.falling-word.word-gold {
  background: #ffe9a8;
  border-color: #b8860b;
  color: #6b4e00;
}
.falling-word.target { box-shadow: 0 0 0 2px #cc8800; }

/* ---- 모드 선택 / 범례 ---- */
#mode-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
  font-family: var(--font-title);
  font-size: 0.82rem;
}
#mode-row label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

#legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 0;
  font-size: 0.74rem;
  color: var(--ink-dim);
}
.legend-item { display: inline-flex; align-items: center; gap: 4px; }
.chip {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid var(--ink);
}
.chip-danger { background: #ffd6d6; border-color: #a02020; }
.chip-purify { background: #d6ecff; border-color: #2a6ba8; }
.chip-gold { background: #ffe9a8; border-color: #b8860b; }

#hud .btn-icon { margin-left: auto; font-size: 0.75rem; padding: 3px 7px; }

/* ---- 기록 저장 폼 ---- */
#overlay-extra { margin-top: 10px; }
.save-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
}
.save-row label {
  flex-basis: 100%;
  font-family: var(--font-title);
  font-size: 0.78rem;
}
.save-row input { width: 160px; }
.save-msg { flex-basis: 100%; font-size: 0.75rem; color: var(--ink-dim); }

/* ---- 명예의 전당 ---- */
.board-win { max-width: 720px; margin: 14px auto 0; }
.board-note { font-size: 0.75rem; }
#board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}
#board-list li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: baseline;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px dotted var(--rule-soft);
}
#board-list li:last-child { border-bottom: none; }
.board-rank { font-family: var(--font-title); color: var(--ink-dim); }
.board-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-score { font-family: GalmuriMono11, Consolas, monospace; }
.board-meta {
  grid-column: 2 / 4;
  font-size: 0.72rem;
  color: var(--ink-dim);
}
.board-empty { display: block !important; color: var(--ink-dim); }