*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #e8edf5;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.screen { display: none; width: 100%; max-width: 560px; }
.screen.active { display: block; }

.card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 28px rgba(0,0,0,0.10);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* — Start screen — */
h1 {
  font-size: 2rem;
  font-weight: 800;
  color: #1a2740;
  text-align: center;
  letter-spacing: -0.5px;
}

.subtitle {
  text-align: center;
  font-size: 1.05rem;
  color: #5a6a80;
}

.info-box {
  background: #f0f5ff;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.95rem;
  color: #3a4a60;
  line-height: 1.5;
}

/* — Timer — */
.timer-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.timer-bar-bg {
  flex: 1;
  height: 12px;
  background: #dde3ee;
  border-radius: 6px;
  overflow: hidden;
}

.timer-fill {
  height: 100%;
  width: 100%;
  background: #3b7dd8;
  border-radius: 6px;
  transition: width 1s linear, background-color 0.4s;
}

.timer-fill.warning { background: #e8a020; }
.timer-fill.danger  { background: #d93025; }

.timer-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: #2a3450;
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* — Score — */
.score-row {
  display: flex;
  gap: 18px;
  font-size: 0.9rem;
  font-weight: 600;
}

.score-correct { color: #1e9650; }
.score-wrong   { color: #d93025; }

/* — Exercise — */
.exercise-sentence {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #1a2740;
}

.blank {
  display: inline-block;
  min-width: 130px;
  border-bottom: 2.5px solid #3b7dd8;
  color: #3b7dd8;
  font-family: monospace;
  letter-spacing: 2px;
  padding: 0 3px;
  vertical-align: bottom;
}

.infinitive {
  color: #7080a0;
  font-style: italic;
}

.blank-correct { border-color: #1e9650; color: #1e9650; letter-spacing: normal; }
.blank-reveal  { border-color: #d93025; color: #1e9650; letter-spacing: normal; }

/* — Input row — */
.input-row {
  display: flex;
  gap: 10px;
}

.answer-input {
  flex: 1;
  padding: 13px 16px;
  font-size: 1.1rem;
  border: 2px solid #c8d4e4;
  border-radius: 11px;
  outline: none;
  transition: border-color 0.2s;
  color: #1a2740;
}

.answer-input:focus            { border-color: #3b7dd8; }
.answer-input.correct          { border-color: #1e9650; background: #f0fdf6; }
.answer-input.wrong            { border-color: #d93025; background: #fff4f4; }

/* — Buttons — */
.btn-primary {
  padding: 13px 24px;
  font-size: 1rem;
  font-weight: 700;
  background: #3b7dd8;
  color: #fff;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}

.btn-primary:hover   { background: #2d6bbf; }
.btn-primary:active  { transform: scale(0.97); }
.btn-primary:disabled { background: #a0b4cc; cursor: default; transform: none; }

.btn-secondary {
  padding: 13px 24px;
  font-size: 1rem;
  font-weight: 700;
  background: transparent;
  color: #3b7dd8;
  border: 2px solid #3b7dd8;
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.15s;
  align-self: flex-start;
}

.btn-secondary:hover { background: #f0f5ff; }

/* — Feedback — */
.feedback {
  font-size: 1rem;
  font-weight: 600;
  padding: 13px 16px;
  border-radius: 11px;
}

.feedback.hidden        { display: none; }
.feedback-correct       { background: #f0fdf6; color: #1e9650; border: 1px solid #b4e8c8; }
.feedback-wrong         { background: #fff4f4; color: #b52a20; border: 1px solid #f4b8b4; }

/* — Results — */
h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #1a2740;
  text-align: center;
}

.results-score { text-align: center; }
.big-score     { font-size: 1.7rem; font-weight: 700; color: #1a2740; }
.pct           { font-size: 2.6rem; font-weight: 800; color: #3b7dd8; margin-top: 4px; }

.results-breakdown {
  background: #f5f8fc;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.breakdown-row { font-size: 1rem; color: #3a4a60; }

/* Start / restart button centering */
#screen-start .btn-primary,
#screen-results .btn-primary {
  align-self: center;
  padding: 14px 40px;
  font-size: 1.05rem;
}

/* — Mobile — */
@media (max-width: 480px) {
  .card        { padding: 24px 16px; }
  .input-row   { flex-direction: column; }
  .btn-primary { width: 100%; }
}