/* ===== English–Spanish Words — droneparts.net ===== */
:root {
  --bg: #0C0F12;
  --card: #15191E;
  --border: #252B32;
  --text: #F2F5F3;
  --muted: #98A2A9;
  --primary: #7EE787;
  --on-primary: #0B1F10;
  --success: #4ADE80;
  --success-bg: #10331F;
  --error: #FF5C5C;
  --error-bg: #3A1616;
  --radius: 20px;
  --radius-btn: 16px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

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

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, sans-serif;
  min-height: 100%;
}

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
/* The consent banner sits fixed at the bottom of the screen and covers the end of the
   page — including the footer links to the terms and the policy that the banner itself
   points at. app.js measures its height and feeds it in here, so it is possible to
   scroll below it. */
body.consent-banner-open { padding-bottom: var(--consent-banner-h, 0px); }
/* The same treatment for the install suggestion, which sits in the same corner. The
   two banners are never open together (see setConsentBannerVisible in app.js), so
   these two rules do not collide. */
body.install-banner-open { padding-bottom: var(--install-banner-h, 0px); }
/* A phrase that must not break across two lines */
.nobreak { white-space: nowrap; }

/* ===== Accessibility ===== */
/* A visible focus ring for keyboard navigation (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
h1:focus, .page-title:focus, .quiz-word:focus { outline: none; }
h1:focus-visible, .page-title:focus-visible, .quiz-word:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 4px;
}

/* Skip link to the content (WCAG 2.4.1). The skip target carries tabindex="-1" so that
   focus really does move to it, but it is not a control that can be activated and is
   therefore not marked with a focus ring — a frame around the whole app would confuse
   rather than inform. */
#main:focus { outline: none; }
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  z-index: 200;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* Honouring the reduced-motion preference (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.app {
  max-width: 520px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

/* The footer comes in together with the screen it accompanies, rather than jumping in
   after it */
.screen, #app-footer { animation: screen-in 0.25s ease; }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

h2 { font-size: 1.15rem; font-weight: 700; margin: 26px 0 12px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ===== Home ===== */
.home-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0 22px;
}
.logo {
  display: block;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  object-fit: cover;
  flex-shrink: 0;
}
.home-titles h1 { font-size: 1.9rem; font-weight: 800; line-height: 1.15; }
.home-sub { color: var(--primary); font-weight: 700; font-size: 0.9rem; }

.direction-toggle {
  display: flex;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  margin-bottom: 6px;
}
.dir-btn {
  flex: 1;
  padding: 13px 6px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  transition: background 0.2s, color 0.2s;
}
.dir-btn.active { background: var(--primary); color: var(--on-primary); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 26px;
}
.section-head h2 { margin: 0 0 12px; }
.section-head .muted { font-size: 0.85rem; }

.levels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.level-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: left;
  transition: transform 0.15s, border-color 0.15s;
}
.level-card:active { transform: scale(0.98); }
.level-card:hover { border-color: var(--primary); }
.level-num {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.level-num-1 { background: #12351C; color: var(--primary); }
.level-num-2 { background: #3A2E10; color: #FFC94A; }
.level-num-3 { background: #16283C; color: #6CB4FF; }
.level-num-4 { background: #2E1B3C; color: #D9A1FF; }
.level-info { flex: 1; min-width: 0; }
.level-name { font-size: 1.05rem; font-weight: 800; }
.level-desc { color: var(--muted); font-size: 0.76rem; margin-top: 2px; }

.more-title { margin-top: 16px; }
/* Five tiles: two columns on a narrow screen, three when there is a little width, and
   all of them in one row on a wide screen. Five across on a narrow screen would squeeze
   each tile below the width of its label ("Words to improve", "Statistics"). The fifth
   tile sits alone on the last row. */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 480px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 760px) {
  .tiles { grid-template-columns: repeat(5, 1fr); }
}
.tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s, border-color 0.15s;
}
.tile:active { transform: scale(0.96); }
.tile:hover { border-color: var(--primary); }
.tile-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 4px;
}
.tile-icon-fav { background: #12351C; color: var(--primary); }
.tile-icon-improve { background: #3A2412; color: #FFB870; }
.tile-icon-mine { background: #2E1B3C; color: #D9A1FF; }
.tile-icon-stats { background: var(--primary); color: var(--on-primary); }
.tile-icon-set { background: #12351C; color: var(--primary); }
.tile-name { font-weight: 700; font-size: 1rem; }
.tile-sub { color: var(--muted); font-size: 0.8rem; }

.footer-legal-notice {
  margin-top: 32px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.65;
  text-align: center;
  /* An even split between the lines — without it the last line is left holding a
     single orphaned word */
  text-wrap: balance;
}
.footer-legal-notice p + p { margin-top: 4px; }
/* The link is coloured like the rest of the footer (no default blue/purple), and the
   phrase "terms of use" stays on one line rather than breaking across two. */
.footer-legal-notice a {
  color: var(--muted);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.footer-legal-notice a:hover { color: var(--primary); }
.site-footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 36px;
  letter-spacing: 0.03em;
}
.legal-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 10px;
  /* The footer's letter spacing is meant for the domain name; on the row of links it
     only widens them and pushes the last one onto a line of its own. */
  letter-spacing: normal;
}
.legal-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.legal-links a:hover { color: var(--primary); }

/* ===== Quiz ===== */
.quiz-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 1.1rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}
.icon-btn:hover { border-color: var(--primary); }
.progress-track {
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--primary);
  border-radius: 99px;
  transition: width 0.35s ease;
}
.quiz-counter { font-weight: 700; color: var(--muted); min-width: 44px; text-align: right; }

.quiz-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 44px 20px 20px;
  text-align: center;
  margin-bottom: 20px;
}
.star-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 1.5rem;
  color: var(--muted);
  transition: transform 0.15s, color 0.15s;
}
.star-btn.active { color: #FFC94A; }
.star-btn:active { transform: scale(1.25); }
.quiz-word {
  display: block;
  width: 100%;
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--text);
  /* A word the user added can be a run of up to 60 characters with no space — without
     breaking inside the word it pushes the page wider and drags in a horizontal scroll */
  word-break: break-word;
  overflow-wrap: anywhere;
  padding: 6px;
}
.quiz-word:active { color: var(--primary); }
.quiz-hint {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 10px;
}
.voice-notice {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
  margin-top: 8px;
}
.voice-notice a { color: var(--muted); text-decoration: underline; }

.answers { display: flex; flex-direction: column; gap: 12px; }
.answer-btn {
  padding: 17px 18px;
  border-radius: var(--radius-btn);
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 1.15rem;
  font-weight: 500;
  text-align: center;
  color: var(--text);
  /* As in .quiz-word: a long answer with no space breaks instead of widening the page */
  min-width: 0;
  overflow-wrap: anywhere;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.3s, transform 0.15s;
}
.answer-btn:not(:disabled):hover { border-color: var(--primary); }
.answer-btn:not(:disabled):active { transform: scale(0.98); }
.answer-btn.correct {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
  font-weight: 700;
}
.answer-btn.wrong {
  background: var(--error-bg);
  border-color: var(--error);
  color: var(--error);
  font-weight: 700;
}
.answer-btn.faded { opacity: 0.35; }

/* Each option: the answer button plus a small speak button beside it */
.answer-row { display: flex; align-items: stretch; gap: 8px; }
.answer-row .answer-btn { flex: 1; }
.answer-speak {
  flex: 0 0 auto;
  width: 52px;
  border-radius: var(--radius-btn);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 1.15rem;
  transition: border-color 0.2s, transform 0.15s;
}
.answer-speak:hover { border-color: var(--primary); }
.answer-speak:active { transform: scale(0.95); }
.answer-btn.faded + .answer-speak { opacity: 0.35; }

/* ===== Typing quiz ===== */
.type-answer { display: flex; flex-direction: column; gap: 10px; }
.type-input {
  width: 100%;
  padding: 15px 14px;
  border-radius: var(--radius-btn);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.1rem;
  font-family: inherit;
  text-align: start;
}
.type-input::placeholder { color: var(--muted); }
.type-input:focus { border-color: var(--primary); }
.type-input.correct {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
  font-weight: 700;
}
.type-input.wrong {
  background: var(--error-bg);
  border-color: var(--error);
  color: var(--error);
  font-weight: 700;
}
.type-actions { display: flex; gap: 10px; }
.type-actions .btn { flex: 1; padding: 13px; }

.quiz-feedback {
  min-height: 32px;
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  margin-top: 18px;
  animation: screen-in 0.2s ease;
}
.quiz-feedback.good { color: var(--success); }
.quiz-feedback.bad { color: var(--error); }
/* The continue button for manual advancing. It takes the timer's place, so it sits
   directly below the feedback rather than at the bottom of the screen — that is where
   the hand already is after choosing an answer. */
/* The answer clock sits between the word and the answers and keeps its place even
   after the question is answered — so the row of answers does not jump upwards at the
   moment of answering. */
.quiz-limit {
  margin: 12px 0 2px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.quiz-limit.urgent { color: var(--error); }

.quiz-next { margin-top: 10px; padding: 13px; font-size: 1.05rem; }
.quiz-bottom { text-align: center; margin-top: 8px; font-size: 0.9rem; }

/* ===== Results ===== */
.score-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
  padding: 32px 20px;
  margin-top: 8px;
}
.score-big { font-size: 3.2rem; font-weight: 800; color: var(--primary); }
.score-pct { color: var(--muted); margin-top: 4px; }
.score-msg { font-size: 1.2rem; font-weight: 700; margin-top: 14px; }

.word-list { display: flex; flex-direction: column; gap: 10px; }
.word-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: 13px 16px;
}
.word-row .mark { font-size: 1.05rem; flex-shrink: 0; }
.word-en, .word-es {
  background: none;
  font-size: 1.02rem;
  color: var(--text);
  padding: 2px 4px;
  /* The speaker icon sits against the word and makes clear it can be tapped to hear it */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* On a very narrow screen the text wraps instead of pushing the row past the width of
     the screen. flex-wrap and overflow-wrap are both needed to break inside a long word
     with no space, which would otherwise stay a single flex item that cannot shrink. */
  min-width: 0;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
  text-align: start;
}
.speak-glyph { font-size: 0.78em; line-height: 1; opacity: 0.8; flex-shrink: 0; }
.word-en:hover, .word-es:hover { color: var(--primary); }
.word-en:hover .speak-glyph, .word-es:hover .speak-glyph { opacity: 1; }
.word-en { font-weight: 700; }
.word-en:active, .word-es:active { color: var(--primary); }
.word-es { color: var(--muted); }
.word-row .spacer { flex: 1; }
.word-row .star-inline {
  font-size: 1.25rem;
  color: var(--muted);
  transition: color 0.15s, transform 0.15s;
}
.word-row .star-inline.active { color: #FFC94A; }
.word-row .star-inline:active { transform: scale(1.2); }
.word-row .wrong-count { color: var(--error); font-size: 0.85rem; font-weight: 700; }
/* How many correct answers in a row are left before the word comes off the
   words-to-improve list */
.word-row .word-note {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
  flex-shrink: 0;
}
/* A row for a word the user added: the level they chose, with edit and delete beside it
   in place of the star */
.word-row .word-level {
  color: var(--muted);
  font-size: 0.75rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.word-row .word-action {
  font-size: 1.05rem;
  line-height: 1;
  color: var(--muted);
  padding: 6px;
  border-radius: 10px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.word-row .word-action:hover { color: var(--primary); background: var(--bg); }
.word-row .word-action:active { transform: scale(0.92); }

#screen-results h2 { margin-bottom: 6px; }
.results-hint { font-size: 0.82rem; margin-bottom: 12px; }

/* The action buttons appear twice on the results screen — above the word list and below
   it — so you can leave or practise again without scrolling. Both are more compact than
   an ordinary button. */
.results-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.results-actions .btn { padding: 11px 14px; font-size: 1rem; }
.results-actions-top { margin: 16px 0 0; }

.btn {
  display: block;
  width: 100%;
  padding: 16px;
  border-radius: var(--radius-btn);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  transition: transform 0.15s, opacity 0.2s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-ghost {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-danger {
  background: var(--error-bg);
  border: 1px solid var(--error);
  color: var(--error);
}
#favorites-practice { margin-top: 20px; }

/* The backup area is built like the deletion area but is not destructive, so it gets an
   ordinary button */
.export-zone { margin-top: 28px; }
.export-zone h2 { font-size: 1.02rem; font-weight: 700; margin: 0 0 12px; }
.export-zone .danger-note { margin: 8px 0 0; }
.export-zone code { font-size: 0.95em; }

/* ===== Deletion area =====
   Every delete button comes with a line of explanation setting out what is deleted and
   what is not, so the scope is clear before the press and not only in the confirmation
   dialog. */
.danger-zone { margin-top: 28px; }
.danger-zone h2 { font-size: 1.02rem; font-weight: 700; margin: 0 0 12px; }
.danger-note { font-size: 0.82rem; line-height: 1.55; }
.danger-zone .danger-note { margin: 8px 0 18px; }
.danger-zone > .danger-note:last-child { margin-bottom: 0; }
/* On the settings cards the explanation comes before the button, and on the consent
   card it comes after it */
.setting-card .danger-note { margin: 0 0 14px; }
.setting-card .btn + .danger-note { margin: 12px 0 0; }

/* ===== Inner pages ===== */
.page-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.page-title { font-size: 1.5rem; font-weight: 800; }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.empty-icon { font-size: 3rem; margin-bottom: 6px; }
.empty-state .btn { max-width: 240px; margin-top: 12px; }

/* ===== Statistics ===== */
.stats-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.stat-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 8px;
  text-align: center;
}
.stat-num { font-size: 1.5rem; font-weight: 800; color: var(--primary); }
.stat-label { color: var(--muted); font-size: 0.8rem; margin-top: 4px; }

.chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 150px;
  padding: 18px 14px 10px;
}
.chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 100%;
}
.chart-bar {
  width: 100%;
  max-width: 34px;
  border-radius: 6px 6px 3px 3px;
  background: #2A313A;
  min-height: 3px;
  transition: height 0.4s ease;
}
.chart-col.today .chart-bar { background: var(--primary); }
.chart-val { font-size: 0.72rem; color: var(--muted); }
.chart-day { font-size: 0.72rem; color: var(--muted); }
.chart-col.today .chart-day { color: var(--primary); font-weight: 700; }

/* A qualification at the bottom of the statistics: what has been gathered is stored per
   word id, so updating the word bank drops it. A dividing rule rather than a frame —
   this is a note, not a warning about an action. */
.data-note {
  font-size: 0.82rem;
  line-height: 1.55;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.level-stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.level-stat-top {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  margin-bottom: 8px;
}
.level-stat-top .muted { font-weight: 400; font-size: 0.85rem; }
.level-stat-bar {
  height: 7px;
  background: #2A313A;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 8px;
}
.level-stat-fill { height: 100%; background: var(--primary); border-radius: 99px; }
.level-stat-nums { display: flex; gap: 16px; font-size: 0.82rem; }
.level-stat-nums .ok { color: var(--success); }
.level-stat-nums .bad { color: var(--error); }

.chip {
  padding: 10px 18px;
  border-radius: 99px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.chip.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 700; }
.chip:not(.active):hover { border-color: var(--primary); }
.chip-action {
  color: var(--primary);
  border-color: var(--primary);
  font-weight: 700;
  padding: 7px 14px;
  font-size: 0.85rem;
}

.game-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: 12px 16px;
  margin-bottom: 10px;
}
.game-type { font-weight: 700; }
.game-date { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.game-row .spacer { flex: 1; }
.game-score { font-weight: 800; color: var(--primary); }
.game-dur { color: var(--muted); font-size: 0.8rem; text-align: right; }

/* ===== My words ===== */
.mywords-intro { font-size: 0.86rem; line-height: 1.6; margin: 4px 0 16px; }
.mywords-notice-text { line-height: 1.65; margin-bottom: 14px; }
.mywords-fields { display: flex; flex-direction: column; gap: 12px; }
.mywords-field { display: block; }
.mywords-field-label {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 6px;
}
/* The label for choosing the level — a direct child of the form, not the label of a
   text field */
.mywords-form > .mywords-field-label { margin-top: 16px; }
.mywords-form .type-input { font-size: 1.02rem; padding: 12px 14px; }
/* :empty hides the message when there is no error, so it can stay in the DOM:
   role="alert" on an element that is re-added is not read out consistently by screen
   readers. */
.mywords-error {
  color: var(--error);
  background: var(--error-bg);
  border: 1px solid var(--error);
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.6;
  padding: 10px 12px;
  margin-top: 14px;
}
.mywords-error:empty { display: none; }
.mywords-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.mywords-actions .btn { padding: 13px; font-size: 1.02rem; }
/* A row with two words, a level and two buttons — on a narrow screen it is better for
   it to break across two lines */
#mywords-list .word-row { flex-wrap: wrap; gap: 8px; row-gap: 4px; padding: 12px 14px; }
#mywords-practice { flex-shrink: 0; }

/* ===== Settings ===== */
.setting-card { padding: 18px; margin-bottom: 14px; }
/* The card headings are h2 — h1 is the screen title, and jumping to h3 would skip a
   level in the heading hierarchy (WCAG 1.3.1). The explicit margin cancels the default
   for h2. */
.setting-card h2 { font-size: 1.02rem; font-weight: 700; margin: 0 0 14px; }
.setting-hint { font-size: 0.82rem; line-height: 1.55; margin: 12px 0 0; }
.voice-diag { font-size: 0.78rem; margin-top: 12px; line-height: 1.5; }
.voice-diag:empty { display: none; }

/* The "what to do now" panel for when no voice is installed */
.voice-help { margin-top: 10px; }
.voice-help summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 0;
  list-style-position: inside;
}
.voice-help summary:hover { text-decoration: underline; }
.voice-help-body {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 8px;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.7;
}
.voice-help-body ol { padding-left: 18px; margin: 6px 0 10px; }
.voice-help-body li { margin-bottom: 4px; }
.voice-help-body p { margin: 6px 0; }
.voice-help-body code {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 8px;
  display: inline-block;
  font-size: 0.9em;
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* ===== Confirmation dialogs ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 8, 0.72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
  animation: overlay-in 0.2s ease;
}
body.modal-open { overflow: hidden; }
@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  padding: 28px 22px 22px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  animation: modal-in 0.22s ease;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.modal-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--error-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto 14px;
}
.modal-title { font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; }
.modal-text { font-size: 0.92rem; line-height: 1.6; }
.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}
.modal-actions .btn { padding: 14px; font-size: 1.02rem; }

/* ===== Toast message ===== */
#toast {
  position: fixed;
  bottom: 24px;
  right: 50%;
  transform: translate(50%, 20px);
  max-width: 440px;
  width: calc(100% - 40px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 50;
}
#toast.visible { opacity: 1; transform: translate(50%, 0); }

/* ===== The updated word list message ===== */
/* It sits at the top of the screen rather than the bottom, so that it does not cover the
   toast and the quiz buttons. */
#update-bar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  transform: translateY(-100%);
  transition: transform 0.3s;
}
#update-bar.visible { transform: translateY(0); }
.update-text { flex: 1; min-width: 0; font-size: 0.9rem; line-height: 1.4; }
/* width: auto cancels the width: 100% of .btn — without it the button pushes the rest of
   the row out */
.update-reload { flex: 0 0 auto; width: auto; padding: 9px 15px; font-size: 0.88rem; white-space: nowrap; }
.update-close { flex: 0 0 auto; width: 38px; height: 38px; }

@media (max-width: 380px) {
  .update-text { font-size: 0.82rem; }
  .update-reload { padding: 9px 11px; font-size: 0.82rem; }
}

/* ===== The suggestion to install the app =====
   It sits at the bottom of the screen, in the same card shape as the consent banner —
   the two banners never appear together, so they share the same place. The updated word
   list message sits at the top of the screen instead and does not collide with them. */
#install-bar {
  position: fixed;
  right: 12px;
  left: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  margin: 0 auto;
  max-width: 560px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  transform: translateY(calc(100% + 24px));
  transition: transform 0.3s;
}
#install-bar.visible { transform: translateY(0); }
/* The toast sits at the bottom of the screen too, so it is lifted above the banner for
   as long as the banner is open */
body.install-banner-open #toast { bottom: calc(12px + var(--install-banner-h, 0px)); }
.install-bar-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--success-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}
.install-text { flex: 1 1 190px; font-size: 0.9rem; line-height: 1.5; }
/* The two buttons wrap together, otherwise on a narrow screen each would drop onto a
   line of its own */
.install-actions { flex: 1 1 auto; display: flex; gap: 10px; }
/* width: auto cancels the width: 100% of .btn */
.install-actions .btn { flex: 1 1 auto; width: auto; padding: 11px 14px; font-size: 0.95rem; }

@media (max-width: 380px) {
  .install-text { font-size: 0.85rem; }
  .install-actions .btn { padding: 11px 10px; font-size: 0.88rem; }
}

/* ===== The install card on the settings screen ===== */
.install-status { line-height: 1.65; margin-bottom: 12px; }
#install-card .btn + .btn { margin-top: 10px; }
/* The heading takes focus when arriving from the suggestion at the bottom of the screen,
   so it is not given a focus ring except under real keyboard navigation — exactly like
   the screen headings. */
#install-title:focus { outline: none; }
#install-title:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.install-steps { margin-bottom: 14px; font-size: 0.88rem; }
.install-steps-title { font-weight: 700; margin-bottom: 8px; }
.install-steps ol { padding-left: 20px; display: grid; gap: 6px; }
.install-steps li { line-height: 1.55; }

/* ===== Consent to local storage ===== */
.modal-text a { color: var(--primary); }
/* The line of legal consent — kept apart from the body of the message so that it does
   not look like a trailing part of it */
.modal-fineprint {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}
.modal-fineprint a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
#consent-overlay {
  background: none;
  backdrop-filter: none;
  align-items: flex-end;
  pointer-events: none;
  padding: 12px;
}
#consent-overlay .modal {
  pointer-events: auto;
  max-width: 560px;
  padding: 18px;
}
#consent-overlay .modal-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 1.2rem;
  margin-bottom: 8px;
}
#consent-overlay .modal-actions {
  flex-direction: row;
  margin-top: 14px;
}
#consent-overlay .modal-actions .btn {
  flex: 1;
  padding: 11px;
  font-size: 0.95rem;
}
.consent-setting-status { line-height: 1.65; margin-bottom: 12px; }

/* ===== Compact home screen — everything fits on one screen without scrolling ===== */
#screen-home .home-header { margin: 4px 0 14px; }
#screen-home .logo { width: 48px; height: 48px; border-radius: 14px; }
#screen-home .home-titles h1 { font-size: 1.55rem; }
#screen-home .dir-btn { padding: 10px 6px; font-size: 0.95rem; }
#screen-home .section-head { margin-top: 16px; }
#screen-home .section-head h2 { margin-bottom: 8px; }
#screen-home .more-title { margin-bottom: 8px; }
#screen-home .tile { padding: 12px 8px 10px; gap: 4px; }
#screen-home .tile-icon { width: 38px; height: 38px; font-size: 1.1rem; margin-bottom: 2px; }
#app-footer .site-footer { margin-top: 16px; }

/* In two columns (a narrow screen) the tile is laid out as a row — the icon beside the
   label rather than above it — so the tiles add no height and the home screen stays
   free of scrolling. */
@media (max-width: 479px) {
  #screen-home .tile {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon name" "icon sub";
    column-gap: 8px;
    align-items: center;
    padding: 10px;
    text-align: start;
  }
  /* The tile labels are kept short enough to sit on one line at this width — a
     wrapped label makes its whole row taller and costs the home screen its
     scroll-free fit. "Improve" is the shortened form of "Words to improve". */
  #screen-home .tile-name { font-size: 0.95rem; }
  #screen-home .tile-sub { font-size: 0.76rem; }
  #screen-home .tile-icon { grid-area: icon; width: 34px; height: 34px; margin-bottom: 0; }
  #screen-home .tile-name { grid-area: name; align-self: end; }
  #screen-home .tile-sub { grid-area: sub; align-self: start; }
}

/* Short screens — a little more tightening to avoid scrolling */
@media (max-height: 720px) {
  #screen-home .home-header { margin: 0 0 10px; }
  #screen-home .logo { width: 40px; height: 40px; border-radius: 12px; }
  #screen-home .home-titles h1 { font-size: 1.35rem; }
  #screen-home .dir-btn { padding: 8px 6px; }
  #screen-home .section-head { margin-top: 10px; }
  #screen-home .level-card { padding: 9px 10px; }
  #screen-home .more-title { margin-top: 10px; margin-bottom: 6px; }
  #screen-home .tile { padding: 9px 6px 8px; }
  #screen-home .tile-icon { width: 32px; height: 32px; font-size: 1rem; }
  #app-footer .site-footer { margin-top: 10px; }
}

/* ===== Responsive ===== */
@media (min-width: 560px) {
  .app { padding-top: 36px; }
  .quiz-word { font-size: 2.7rem; }
}