/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  background: #e8e4df;
  color: #333;
  min-height: 100vh;
  line-height: 1.6;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

/* === Header === */
header {
  text-align: center;
  padding: 24px 0 16px;
  border-bottom: 2px solid #d0ccc6;
  margin-bottom: 24px;
}

header h1 {
  font-size: 2em;
  color: #3a7d3a;
  letter-spacing: 3px;
}

.subtitle {
  color: #8a857c;
  font-size: 0.95em;
  margin-top: 2px;
}

/* === Buttons === */
.btn {
  padding: 7px 18px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  font-family: inherit;
  transition: all 0.15s;
  color: #fff;
}

.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; transform: none; }

.btn-primary { background: #3a7d3a; }
.btn-accent  { background: #d4850b; }
.btn-danger  { background: #c0392b; }
.btn-hint    { background: #4a6db0; }

/* === Inputs === */
input[type="text"] {
  padding: 7px 10px;
  border: 2px solid #ccc5bd;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s;
}

input[type="text"]:focus {
  outline: none;
  border-color: #3a7d3a;
}

#guess-input { width: 280px; }

/* === State Panels === */
.state-panel { min-height: 400px; }

/* === Idle State === */
#idle-state { text-align: center; padding-top: 60px; }

.idle-icon { font-size: 64px; margin-bottom: 20px; }

#idle-state p { color: #6b6560; margin-bottom: 8px; font-size: 1.1em; }

#idle-state .btn { margin-top: 24px; font-size: 1.1em; padding: 12px 32px; }

.spinner {
  width: 40px; height: 40px;
  border: 4px solid #d0ccc6;
  border-top-color: #3a7d3a;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 20px auto;
}

@keyframes spin { to { transform: rotate(360deg); } }

.idle-loading p { color: #8a857c; }

/* === Guess Panel === */
.guess-panel {
  background: #fff;
  border: 1px solid #d8d3cc;
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 14px;
}

.guess-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.guess-row label {
  color: #555;
  min-width: 60px;
  font-size: 0.95em;
}

.title-hint {
  color: #8a857c;
  font-size: 0.9em;
  margin-left: auto;
}

.missed-chars-row {
  font-size: 0.85em;
  color: #6b6560;
  margin-top: 2px;
}

.char-list {
  font-family: "Consolas", "Courier New", monospace;
  letter-spacing: 1.5px;
}

.missed-chars-row .char-list { color: #c0392b; }

/* === Article Display === */
.article-display {
  background: #fff;
  border: 1px solid #d8d3cc;
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 14px;
  min-height: 150px;
  max-height: 460px;
  overflow-y: auto;
  font-family: "Consolas", "Courier New", "Microsoft YaHei", monospace;
  font-size: 20px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-all;
  color: #444;
}

.article-display::-webkit-scrollbar { width: 6px; }
.article-display::-webkit-scrollbar-track { background: #f0ece6; }
.article-display::-webkit-scrollbar-thumb { background: #c8c2b8; border-radius: 3px; }

/* Title line inside article display */
.title-line {
  font-weight: bold;
  font-size: 1.1em;
  text-align: center;
  padding-bottom: 6px;
  margin-bottom: 6px;
  color: #444;
}

.title-sep {
  border-bottom: 1px dashed #d8d3cc;
  margin-bottom: 10px;
}

/* Character spans */
.char {
  display: inline;
  transition: color 0.2s, background 0.2s;
}

.char.hidden {
  color: #fff;
  background: #2a2a2a;
  border-radius: 2px;
  padding: 0 1px;
}

.char.revealed {
  color: #3a7d3a;
  background: transparent;
  animation: reveal-pop 0.35s ease-out;
}

@keyframes reveal-pop {
  0%   { color: #fff; background: #3a7d3a; }
  100% { color: #3a7d3a; background: transparent; }
}

.char.revealed-old {
  color: #3a7d3a;
  background: transparent;
}

.char.hint-revealed {
  color: #4a6db0;
  background: transparent;
}

.char.hint-revealed-old {
  color: #4a6db0;
  background: transparent;
}

/* Revealed-all mode (win / give-up) */
.article-display.revealed-all .char,
.article-display.revealed-all .char.hint-revealed,
.article-display.revealed-all .char.hint-revealed-old {
  color: #444;
  background: transparent;
}

/* === Action Row === */
.action-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* === Result Banners === */
.result-banner {
  text-align: center;
  padding: 20px;
  border-radius: 6px;
  margin-bottom: 14px;
}

.won-banner {
  background: #e8f0e8;
  border: 2px solid #3a7d3a;
}

.won-banner h2 { color: #3a7d3a; font-size: 1.6em; }
.won-banner p  { color: #555; margin-top: 6px; }

.lost-banner {
  background: #f0e8e8;
  border: 2px solid #c0392b;
}

.lost-banner h2 { color: #c0392b; font-size: 1.6em; }
.lost-banner p  { color: #555; margin-top: 6px; }

#won-state .btn, #revealed-state .btn {
  display: block;
  margin: 16px auto;
  font-size: 1.1em;
  padding: 10px 28px;
}

/* === Responsive === */
@media (max-width: 600px) {
  .container { padding: 10px; }
  header h1 { font-size: 1.5em; }
  .guess-row { flex-direction: column; align-items: stretch; }
  #guess-input { width: 100%; }
  .title-hint { margin-left: 0; }
  .article-display { font-size: 14px; padding: 10px; }
}