:root {
  --bg: #131f24;
  --card: #18272e;
  --card-border: #2e4049;
  --text: #f1f7fb;
  --muted: #52656d;
  --blue: #1cb0f6;
  --blue-shadow: #1899d6;
  --green: #58cc02;
  --red: #ff4b4b;
  --orange: #ffc800;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}
#app {
  max-width: 520px;
  margin: 0 auto;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

/* top bar */
.topbar { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.icon-btn {
  background: none; border: none; color: var(--muted);
  font-size: 22px; cursor: pointer; line-height: 1;
}
.progress {
  flex: 1; height: 14px; border-radius: 8px; background: #20333b; overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0%; border-radius: 8px;
  background: var(--green);
  transition: width .4s ease;
}
.counter { color: var(--muted); font-size: 13px; font-weight: 700; min-width: 42px; text-align: right; }

.prompt-title { font-size: 22px; font-weight: 800; margin: 14px 0 0; }

/* card stack */
.stage { flex: 1; display: flex; align-items: center; justify-content: center; }
.card-stack { position: relative; width: min(78vw, 340px); aspect-ratio: 1 / 1; }
.card {
  position: absolute; inset: 0;
  border: 2px solid var(--card-border);
  border-radius: 28px;
  background: var(--bg);
}
.card.ghost { pointer-events: none; }
.card.g1 { transform: translateY(-10px) scale(.985); opacity: .7; }
.card.g2 { transform: translateY(-20px) scale(.97);  opacity: .45; }
.card.g3 { transform: translateY(-30px) scale(.955); opacity: .25; }
.main-card {
  background: var(--card);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; padding: 18px; text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.main-card.ok   { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.main-card.bad  { border-color: var(--red);   box-shadow: 0 0 0 1px var(--red); animation: shake .4s; }
.main-card.show { border-color: var(--red);   }
@keyframes shake {
  20% { transform: translateX(-7px); } 40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}
.card-ru { font-size: 30px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.card-es { font-size: 26px; font-weight: 800; overflow-wrap: anywhere; }
.card-es.revealed { color: var(--red); }
.card-es.correct  { color: var(--green); }
.card-heard { font-size: 14px; color: var(--muted); }
.hidden { display: none !important; }

/* controls */
.controls { display: flex; gap: 14px; justify-content: center; align-items: stretch; padding: 10px 0 4px; }
.mic-btn {
  position: relative;
  flex: 0 1 220px; height: 74px;
  border: none; border-radius: 18px;
  background: var(--blue);
  box-shadow: 0 5px 0 var(--blue-shadow);
  color: #08323f; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: filter .15s, transform .05s, background .2s;
}
.mic-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--blue-shadow); }
.mic-btn.listening { background: var(--blue); }
.mic-btn.disabled { background: #22333b; box-shadow: 0 5px 0 #1b2930; color: #3d525c; pointer-events: none; }
.reveal-btn {
  width: 74px; height: 74px;
  border: none; border-radius: 18px;
  background: #20333b;
  box-shadow: 0 5px 0 #15232a;
  color: var(--blue); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .05s;
}
.reveal-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #15232a; }

/* listening waveform */
.wave { display: flex; gap: 4px; align-items: center; height: 30px; }
.wave span {
  width: 5px; border-radius: 3px; background: #08323f;
  animation: bounce 1s ease-in-out infinite;
}
.wave span:nth-child(1) { height: 10px; animation-delay: 0s; }
.wave span:nth-child(2) { height: 18px; animation-delay: .1s; }
.wave span:nth-child(3) { height: 26px; animation-delay: .2s; }
.wave span:nth-child(4) { height: 30px; animation-delay: .3s; }
.wave span:nth-child(5) { height: 26px; animation-delay: .4s; }
.wave span:nth-child(6) { height: 18px; animation-delay: .5s; }
.wave span:nth-child(7) { height: 10px; animation-delay: .6s; }
@keyframes bounce { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }

.feedback {
  min-height: 24px; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--muted);
  padding: 2px 0;
}
.feedback.ok  { color: var(--green); }
.feedback.bad { color: var(--red); }

/* typing fallback */
.type-link {
  background: none; border: none; color: var(--muted);
  font-size: 13px; font-weight: 800; letter-spacing: .08em;
  padding: 12px 0 6px; cursor: pointer;
}
.type-row { display: flex; gap: 8px; padding-bottom: 10px; }
.type-row input {
  flex: 1; height: 48px; border-radius: 14px;
  border: 2px solid var(--card-border); background: var(--card);
  color: var(--text); font-size: 17px; padding: 0 14px; outline: none;
}
.type-row input:focus { border-color: var(--blue); }
.type-check {
  width: 64px; border: none; border-radius: 14px;
  background: var(--green); box-shadow: 0 4px 0 #46a302;
  color: #153000; font-weight: 800; cursor: pointer;
}

/* overlay (итоги сессии / статистика) */
.overlay {
  position: fixed; inset: 0; background: rgba(9, 15, 18, .85);
  display: flex; align-items: center; justify-content: center; z-index: 10;
}
.overlay-box {
  width: min(86vw, 380px); background: var(--card);
  border: 2px solid var(--card-border); border-radius: 24px;
  padding: 26px; text-align: center;
}
.overlay-title { font-size: 22px; font-weight: 800; margin-bottom: 14px; }
.overlay-body { color: #b6c6cd; font-size: 15px; line-height: 1.7; margin-bottom: 20px; white-space: pre-line; }
.overlay-btn {
  width: 100%; height: 52px; border: none; border-radius: 14px;
  background: var(--green); box-shadow: 0 4px 0 #46a302;
  color: #153000; font-size: 16px; font-weight: 800; cursor: pointer;
}
.overlay-link {
  display: block; width: 100%; margin-top: 14px;
  background: none; border: none; color: var(--muted);
  font-size: 13px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer;
}

/* вход по логину */
.login-input {
  width: 100%; height: 52px; border-radius: 14px;
  border: 2px solid var(--card-border); background: var(--bg);
  color: var(--text); font-size: 18px; text-align: center;
  padding: 0 14px; outline: none; margin-bottom: 8px;
}
.login-input:focus { border-color: var(--blue); }
.login-error {
  min-height: 20px; color: var(--red);
  font-size: 13px; font-weight: 700; margin-bottom: 8px;
}