/* ==========================================================================
   Teclatlon — Reusable components
   Requires tokens.css and base.css.
   Buttons >= 64px, gap >= 16px (accessibility rules, doc/en/technical.md).
   ========================================================================== */

/* ---- Page container ---- */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 8px var(--space);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--button-min);
  min-width: var(--button-min);
  padding: 12px 28px;
  border: 3px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: #FFFFFF;
  font-size: var(--text-base);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover { transform: scale(1.03); box-shadow: var(--shadow); }
.btn:active { transform: scale(0.98); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-success { background: var(--color-success); }

/* Audio button */
.btn-audio {
  background: var(--color-surface);
  color: var(--color-text);
  border: 3px solid var(--color-border);
}

.btn-audio[aria-pressed="true"],
.btn-audio.speaking {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ---- Back link (always top left) ---- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--button-min);
  padding: 12px 20px;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 3px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: 700;
  text-decoration: none;
}

.back-link:hover { border-color: var(--accent); }

/* ---- Cards ---- */
.card {
  background: var(--color-surface);
  border: 3px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space);
  box-shadow: var(--shadow);
}

/* ---- Progress bar (no pressure: informational only) ---- */
.progress-bar {
  position: relative;
  height: 28px;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-success);
  border-radius: 14px;
  transition: width 0.4s ease;
}

.progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--color-text);
}

/* ---- Stars ---- */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-star);
}

/* ---- Feedback zone (aria-live). Class names match assets/js/feedback.js
   (success()/encourage()). ---- */
.feedback {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: var(--text-base);
  font-weight: 700;
  text-align: center;
}

.feedback.success { color: var(--color-success); }
.feedback.encourage { color: var(--color-encourage); }

/* ---- Celebration (brief, <= 2 s) ---- */
.celebration {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space);
  background: rgba(250, 247, 242, 0.95);
  z-index: 100;
  text-align: center;
  padding: var(--space);
}

.celebration.hidden { display: none; }

.celebration .emoji {
  font-size: 96px;
  animation: celebrate 0.6s ease;
}

.celebration .message {
  font-size: var(--text-title);
  font-weight: 700;
  color: var(--color-success);
}

@keyframes celebrate {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- Standard tool header ---- */
.tool-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--space);
}

/* Row 1: title + data badges + settings button.
   Row 2: keyboard-view selector (.keyboard-options--header). Kept on
   its own line so it stays readable on narrow screens and never
   pushes the title aside. */
.tool-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tool-header h1 {
  flex: 1;
  font-size: 20px;
  margin: 0;
  line-height: 1.2;
}

/* Header variant of the keyboard-view selector: smaller chips so it
   sits comfortably in the header on small screens and stops looking
   like a primary CTA. Visually a peer of the data badges (⚙️ / ⭐) but
   bigger, since it actually does something. */
.keyboard-options--header {
  flex-wrap: wrap;
  gap: 6px;
}
.keyboard-options--header .btn {
  padding: 4px 10px;
  font-size: 13px;
  min-height: 32px;
  border-width: 2px;
}

/* Compact button variant for chrome-only rows (header, game top bar).
   These are NOT the primary CTAs -- accessibility rule of 64px min
   applies to primary buttons; chrome can sit at 36px so it doesn't
   eat half the viewport on a normal screen. The hit target remains
   comfortably above WCAG 2.5.5 (44px) on touch via the natural button
   padding, and keyboard focus is preserved (`:focus-visible` ring is
   still drawn at 3px). */
.btn-compact {
  min-height: 36px;
  min-width: 36px;
  padding: 4px 12px;
  font-size: var(--text-small);
  border-width: 2px;
}
.btn-compact.btn-audio { font-size: 16px; }

/* ---- Responsive header ----
   The header has two rows (title row + keyboard-view chips). At desktop
   sizes the title row fits on one line and the chips fit on the next.
   At intermediate sizes (641–1024 px) the title still fits but the
   chips need to pack tighter; on small screens the title wraps and the
   chips become a wrap-friendly cluster under it. The 640 px breakpoint
   here intentionally matches styles.css's own breakpoint so both pass
   through the same gate. */

@media (max-width: 1024px) {
  .tool-header { gap: 4px; margin-bottom: 6px; }
  .tool-header h1 { font-size: 18px; }
  .keyboard-options--header .btn { padding: 3px 8px; font-size: 12px; min-height: 28px; }
}

@media (max-width: 640px) {
  /* Title takes its own row, badges wrap below it on the same row,
     chips cluster underneath and are allowed to wrap freely. */
  .tool-header-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .tool-header h1 { flex: none; font-size: 16px; }
  .header-data { gap: 6px; }
  .header-data .stat { padding: 3px 8px; font-size: 12px; }
  .keyboard-options--header { width: 100%; gap: 6px; }
  .keyboard-options--header .btn { padding: 4px 8px; font-size: 12px; }
}

/* ---- Grid of large cards (game menu) ---- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-large);
}

/* ---- Legal footer link (present on every page) ---- */
.app-footer {
  display: flex;
  justify-content: center;
  padding: 4px 0 4px;
  margin-top: 4px;
}

.footer-link {
  color: var(--color-text-soft);
  font-size: var(--text-small);
  padding: 8px 12px;
  text-decoration: underline;
}

.footer-link:hover, .footer-link:focus {
  color: var(--color-text);
}

/* Utilities */
.centered { text-align: center; }
.hidden { display: none !important; }
.stack { display: flex; flex-direction: column; gap: var(--space); }
/* Game/lessons/templates/free screens have many stacked blocks
   (top bar + instruction + target + feedback + metrics + guide +
   keyboard). At the default --space (16px) the cumulative gap eats a
   big chunk of the viewport on a normal screen; tightening the gap
   inside these sections keeps the operative zone (target + keyboard)
   visible without scrolling. */
#screenGame.stack,
#screenFree.stack,
#screenLessons.stack,
#screenTemplates.stack { gap: 8px; }
.row { display: flex; align-items: center; gap: var(--space); flex-wrap: wrap; }

/* ---- Settings panel (accessibility & game) ---- */
.settings-panel {
  background: var(--color-surface);
  border: 3px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space);
  box-shadow: var(--shadow);
}

.settings-panel h3 {
  margin-bottom: 8px;
  font-size: var(--text-base);
}

.settings-panel .help-text {
  font-size: var(--text-small);
  color: var(--color-text-soft);
  margin-top: 8px;
}

.setting-row {
  display: block;
  flex-shrink: 0;
  min-height: var(--button-min);
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.setting-label { display: block; margin-bottom: 8px; }

.setting-row:last-child { border-bottom: 0; }

.setting-label {
  font-weight: 700;
  font-size: var(--text-base);
}

.setting-value {
  font-size: var(--text-small);
  color: var(--color-text-soft);
  font-weight: 700;
  min-width: 8em;
  text-align: right;
}

/* Compact icon button used inside settings rows */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
  padding: 4px 12px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-border);
  border-radius: 12px;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
}

.btn-icon[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.btn-icon:hover { border-color: var(--accent); }

.text-group { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }

/* ---- Settings drawer ---- */
.btn-open-settings { font-size: 18px; padding: 2px; min-height: 36px; min-width: 36px; }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 90;
}

.drawer-backdrop.visible { opacity: 1; }
.drawer-backdrop[hidden] { display: none; }

.settings-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 92vw);
  margin: 0;
  border-radius: 0;
  border-width: 0 0 0 3px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 91;
}

.settings-drawer.open { transform: translateX(0); }
.settings-drawer[hidden] { display: none; }

.drawer-header { justify-content: space-between; }
.drawer-header h3 { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .drawer-backdrop, .settings-drawer { transition: none; }
}

/* ---- Header badges (streak + metrics summary) ---- */
.header-data {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.stat.metric { background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-success); }

/* ---- Live metrics overlay (game screen) ---- */
.live-metrics {
  display: flex;
  gap: var(--space);
  justify-content: center;
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--color-text-soft);
}

.live-metrics .live-metric {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 12px;
  padding: 6px 12px;
}

/* ---- Avatar picker ---- */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--space);
  max-width: 480px;
  margin: 0 auto;
}

.avatar-btn {
  background: var(--color-surface);
  border: 3px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.avatar-btn:hover { transform: scale(1.05); border-color: var(--accent); }

.avatar-btn[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.avatar-btn svg { width: 56px; height: 56px; }

/* ---- Avatar shown in the menu greeting ---- */
.avatar-current {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.avatar-current svg { width: 100%; height: 100%; }

/* Focus mode: dim the celebration background for less distraction */
html.focus-mode .celebration {
  background: rgba(0, 0, 0, 0.85);
  color: #FFFFFF;
}

html.focus-mode .celebration .message { color: #FFFFFF; }