/* =========================
   Zero to Hero – Base Styles
   =========================
   Structure: tokens → base → typography → buttons → forms → learning
   layout → exercise elements → hub → overlays → screens → responsive.
   All class names double as JS/test hooks — rename nothing without
   checking app.js and tests/e2e. */

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

/* Display face for Latin headings/labels; CJK and other scripts fall
   through to the system stack in --font-ui. Weight range 400–900. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* Brand */
  --bg1:#7a2c7d;
  --bg2:#4a144c;
  --ink:#ffffff;
  --btnInk:#5a1f5f;
  --grid: rgba(255,255,255,0.05);

  /* Accent gradient — deep stops for CTAs (white text needs the
     contrast), soft stops for decorative fills (progress bar, badges). */
  --accent-1:#a855f7;
  --accent-2:#f43f5e;
  --accent-1-soft:#c084fc;
  --accent-2-soft:#fb7185;
  --grad-cta: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  --grad-soft: linear-gradient(90deg, var(--accent-1-soft), var(--accent-2-soft));
  --gold:#ffd166;

  /* Semantic feedback — fills carry white text, text variants sit
     directly on the purple background. */
  --success:#2ea86d;
  --success-text:#7ee2a8;
  --danger:#dc3d4e;
  --danger-text:#ff9aa4;

  /* Glass surfaces */
  --glass-bg: rgba(255,255,255,0.07);
  --glass-bg-strong: rgba(255,255,255,0.10);
  --glass-brd: rgba(255,255,255,0.15);
  --glass-brd-strong: rgba(255,255,255,0.25);

  /* Radii */
  --r-xl: 24px;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-pill: 999px;

  --shadow-1: 0 6px 16px rgba(0,0,0,0.25);
  --shadow-2: 0 10px 30px rgba(0,0,0,0.3);

  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "Meiryo",
    "Noto Sans JP", "Noto Sans CJK JP",
    sans-serif;

  --font-display: "Outfit", var(--font-ui);

  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New",
    "Noto Sans Mono CJK JP", "Noto Sans JP",
    "Yu Gothic", "Meiryo",
    monospace;
}

/* The page colour behind the gradient: a screen taller than the viewport
   (the sign-in gate on a phone) scrolls into this instead of a seam. */
html{
  background: var(--bg2);
}

body{
  font-family: var(--font-ui);
  background: radial-gradient(circle at top, var(--bg1), var(--bg2)) fixed;
  min-height: 100vh;
  color: var(--ink);
  overflow-x: hidden;
}

/* Grid background */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* Keyboard focus — visible ring on every interactive element.
   (Pointer clicks don't trigger :focus-visible, so no visual noise.) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 3px solid rgba(255,255,255,0.75);
  outline-offset: 2px;
}

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

.screen{
  min-height: 100vh;
  min-height: 100dvh;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  position: relative;
}

@keyframes screenFadeIn{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

.screen.active{
  display: flex;
  animation: screenFadeIn 0.25s ease-out;
}

/* Typography */
.title{
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

.title.small{
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin-bottom: 0.5rem;
}

.subtitle{
  font-family: var(--font-mono);
  opacity: 0.9;
  margin-bottom: 2.25rem;
}
html[lang="ja"] .subtitle{
  font-family: var(--font-ui);
}

/* One-line hub notice when the server copy of progress can't be loaded. */
.sync-status{
  font-size: 0.8rem;
  opacity: 0.75;
  margin-top: -1.5rem;
  margin-bottom: 1.5rem;
}

/* Button grid */
.button-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 260px));
  gap: 1.25rem;
  align-items: stretch;
  justify-items: stretch;
}

button, a.secondary{
  border: none;
  cursor: pointer;
  padding: 1.05rem 1.6rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: normal;
  font-variant: normal;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.04em;
  background: #fff;
  color: var(--btnInk);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  text-decoration: none;
}

a.secondary{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height: 1.1;
}

button:hover, a.secondary:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}

button:active{
  transform: translateY(1px);
}

button:disabled{
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

button.primary.small{
  padding: 0.8rem 1.2rem;
  border-radius: var(--r-pill);
}

/* Primary call-to-action — the one button per screen that moves the
   learner forward. Gradient sets it apart from nav/utility pills.
   (IDs cover JS-generated buttons; .cta covers authored markup.) */
.cta,
#check-btn, #check-l6, #check-l7, #check-matches,
#continue-btn, #login-btn, #open-app,
#start-run, #reason-continue, #roadmap-continue,
#run-complete-back, #feedback-submit{
  background: var(--grad-cta);
  color: #fff;
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.35);
}

.cta:hover,
#check-btn:hover, #check-l6:hover, #check-l7:hover, #check-matches:hover,
#continue-btn:hover, #login-btn:hover, #open-app:hover,
#start-run:hover, #reason-continue:hover, #roadmap-continue:hover,
#run-complete-back:hover, #feedback-submit:hover{
  box-shadow: 0 10px 24px rgba(244, 63, 94, 0.4);
}

.cta:disabled,
#check-btn:disabled, #check-l6:disabled, #check-l7:disabled,
#check-matches:disabled, #continue-btn:disabled, #reason-continue:disabled{
  box-shadow: none;
  filter: saturate(0.5);
}

/* Quit button */
.quit-button{
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  background: transparent;
  color: white;
  border: 2px solid rgba(255,255,255,0.65);
  padding: 0.55rem 0.95rem;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  font-weight: 800;
}

.quit-button:hover{
  background: rgba(255,255,255,0.10);
  box-shadow: none;
  transform: none;
}

/* Right-aligned variant (e.g. RESET PROGRESS on the hub) */
.quit-button--right{
  left: auto;
  right: 1.25rem;
}

/* Learning layout */
.learning-wrap{
  width: min(900px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0.5rem;
}

#learning-screen {
  justify-content: flex-start;
  padding: 4.5rem 1.25rem 5rem;
  overflow: hidden;
  max-height: 100vh;
  max-height: 100dvh;
}

#learning-screen .title.small { margin-bottom: 0.15rem; }
#learning-screen .subtitle { margin-bottom: 0.4rem; }

.controls{
  display: flex;
  gap: 0.9rem;
  align-items: end;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0.75rem 0 1.25rem;
}

.control{
  display:flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
}

label{
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

select{
  padding: 0.65rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd-strong);
  background: var(--glass-bg-strong);
  color: white;
  outline: none;
}

select option{
  color: #1a1a1a;
}

/* The exercise card hugs its content and floats centered in the
   leftover space — a content-sized card reads better than a panel
   stretched to fill the viewport, especially on desktop. */
.content{
  width: min(720px, 100%);
  text-align: left;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-xl);
  padding: 1.75rem 1.5rem;
  flex: 0 1 auto;
  margin-top: auto;
  margin-bottom: auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Short fade + lift on every new exercise. Keeps transitions smooth
   without adding perceivable delay (~180ms, faster than the fast-answer
   threshold so it doesn't skew the speed signal). */
.content.exercise-enter {
  animation: exerciseEnter 0.18s ease-out;
}
@keyframes exerciseEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.row{
  padding: 0.75rem 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.row:last-child{ border-bottom: none; }

.row strong{
  display:block;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}

.row .forms{
  opacity: 0.95;
  line-height: 1.45;
}

/* Language hub — push content below the absolute quit/reset buttons,
   allow scrolling when many languages are listed */
#language-screen {
  justify-content: flex-start;
  padding-top: 5rem;
  overflow-y: auto;
}

#language-screen #language-buttons {
  grid-template-columns: minmax(200px, 400px);
  width: min(400px, 100%);
  margin-top: 0.75rem;
  gap: 0.85rem;
}

/* Language cards: name + endonym + progress at a glance. */
button.lang-card{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  text-align: left;
  padding: 0.95rem 1.25rem 0.85rem;
  border-radius: var(--r-lg);
}

.lang-card-top{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lang-card-name{
  font-size: 1.05rem;
  font-weight: 800;
}

.lang-card-native{
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.6;
}

.lang-card-meter{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.lang-card-track{
  flex: 1 1 auto;
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(90, 31, 95, 0.15);
  overflow: hidden;
}

.lang-card-fill{
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--grad-soft);
}

.lang-card-pct{
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  opacity: 0.65;
  min-width: 2.4em;
  text-align: right;
}

.language-search{
  box-sizing:border-box;
  width: min(400px, 100%);
  margin-top: 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd-strong);
  background: rgba(255,255,255,0.08);
  color: white;
  font-size: 0.95rem;
  font-weight: 600;
  outline: none;
}

.language-search::placeholder{
  color: rgba(255,255,255,0.55);
}

.language-search:focus{
  border-color: var(--accent-1-soft);
  background: rgba(255,255,255,0.14);
}

.language-empty{
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  padding: 1rem;
  text-align: center;
}

/* Mobile */
@media (max-width: 520px){
  .button-grid{ grid-template-columns: 1fr; }
  .quit-button{ top: 1rem; left: 1rem; }
  .quit-button--right{ left: auto; right: 1rem; }
  #language-screen { padding-top: 4.5rem; }
  #language-screen #language-buttons { width: 100%; }
}

/* Answer feedback states (class names are JS hooks — see app.js). */
@keyframes correctPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

button.correct {
  background-color: var(--success) !important;
  color: white !important;
  animation: correctPop 0.3s ease;
}

button.incorrect {
  background-color: var(--danger) !important;
  color: white !important;
  animation: wrongShake 0.3s ease;
}

button.selected {
  outline: 3px solid #ffffff;
}

button.paired {
  background-color: var(--success) !important;
  color: white;
}

button.matched {
  background-color: var(--success) !important;
  color: white;
  animation: correctPop 0.3s ease;
}

button.wrong {
  background-color: var(--danger) !important;
  color: white;
  animation: wrongShake 0.3s ease;
}

.sentence-slot {
  transition: all 0.2s ease;
}

.sentence-slot.correct {
  background-color: var(--success);
  color: #fff;
}

.sentence-slot.incorrect {
  background-color: var(--danger);
  color: #fff;
}

/* Inline "Correct: …" reveal under wrong answers (L3/L4/L6). */
.correct-answer-reveal{
  margin-top: 16px;
  color: #fff;
  font-weight: 700;
  text-align: center;
}

/* =========================
   Support Language Selector
   ========================= */

.support-selector{
  margin: 1.75rem 0 2.25rem;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Pill (closed state) */
.support-pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  background:white;
  color:#1a1a1a;
  padding:0.9rem 1.6rem;
  border-radius:var(--r-pill);
  cursor:pointer;
  font-weight:800;
  min-width:260px;
  transition:transform 0.1s ease, box-shadow 0.15s ease;
}

.support-pill:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-1);
}

/* Short code (EN / PT / JA etc.) */
.support-short{
  font-weight:900;
  font-size:0.85rem;
  letter-spacing:0.12em;
  opacity:0.65;
  min-width:38px;
  text-align:left;
}

/* Dropdown container */
.support-dropdown{
  margin-top:0.75rem;
  background:white;
  border-radius:var(--r-lg);
  padding:0.5rem;
  width:280px;
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  box-shadow:var(--shadow-2);
}

.support-search{
  width:100%;
  box-sizing:border-box;
  padding:0.55rem 0.85rem;
  border:1px solid rgba(0,0,0,0.12);
  border-radius:var(--r-md);
  font-size:0.95rem;
  font-weight:600;
  color:#1a1a1a;
  background:#f5f5f5;
  outline:none;
  margin-bottom:0.25rem;
}

.support-search:focus{
  border-color: var(--accent-1);
  background:white;
}

.support-options{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  max-height:280px;
  overflow-y:auto;
}

.support-option-empty{
  justify-content:center;
  color:#666;
  font-weight:500;
  cursor:default;
}

/* Each dropdown option */
.support-option{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:0.65rem 1rem;
  border-radius:var(--r-md);
  cursor:pointer;
  font-weight:700;
  color:#1a1a1a;
  transition:background 0.15s ease;
}

.support-option:hover{
  background:rgba(0,0,0,0.06);
}

/* Chevron */
.chevron{
  opacity:0.7;
  font-size:1.4rem;
  line-height:1;
}

/* =========================
   Access gate (login screen)
   ========================= */

.gate-screen{
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  gap: 0.75rem;
}

.gate-heading{
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.gate-input{
  width: min(320px, 100%);
  padding: 0.85rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-brd-strong);
  background: rgba(255,255,255,0.96);
  color: var(--btnInk);
  font-family: var(--font-ui);
  font-size: 1rem;
  outline: none;
}

.gate-input:focus{
  box-shadow: 0 0 0 3px rgba(255,255,255,0.45);
}

.gate-btn{
  min-width: 200px;
  margin-top: 0.5rem;
}

.gate-note{
  margin-top: 2rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

.gate-secondary{
  width: min(300px, 100%);
}

/* The grid buttons set their own display, which beats the hidden attribute. */
#link-refer[hidden]{
  display: none;
}

/* Refer a friend panel (start screen, subscribers) */
.referral-body{
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.referral-points{
  margin: 0;
  padding-left: 1.2rem;
}

.referral-terms{
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.9rem;
}

.referral-terms input{
  margin-top: 0.25rem;
}

.referral-terms a,
.referral-note a{
  color: inherit;
  text-decoration: underline;
}

.referral-code{
  font-family: var(--font-mono);
  font-size: 1.6rem;
  letter-spacing: 0.12em;
  text-align: center;
  padding: 0.6rem;
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd-strong);
  user-select: all;
}

.referral-link-row{
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.referral-link{
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-brd-strong);
  background: var(--glass-bg);
  color: white;
  outline: none;
}

.referral-copy{
  white-space: nowrap;
}

.referral-stats{
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.referral-stats dt{ opacity: 0.75; }
.referral-stats dd{ margin: 0; text-align: right; }

.referral-note{
  font-size: 0.8rem;
  opacity: 0.75;
}

.referral-error{
  color: #ffd9d9;
  font-size: 0.9rem;
}

/* Leaderboard panel (start screen; built by leaderboard.mjs on first open).
   Accents are rose / cyan — never purple on the purple panel. */
.leaderboard-body{
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
  overflow-y: auto;
  min-height: 0;
}

.leaderboard-tabs{
  display: flex;
  gap: 0.5rem;
}

/* All time / This week: a quieter switch above the sort tabs. */
.leaderboard-periods{
  display: flex;
  justify-content: center;
  gap: 0.25rem;
}

.leaderboard-period{
  padding: 0.3rem 0.8rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid transparent;
  border-radius: 999px;
}

.leaderboard-period[aria-pressed="true"]{
  color: #fff;
  border-color: var(--glass-brd-strong);
  background: var(--glass-bg);
}

.leaderboard-week-note{
  text-align: center;
  margin: 0;
}

.leaderboard-tab{
  flex: 1;
  padding: 0.55rem 0.8rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  background: var(--glass-bg);
  color: #fff;
  border: 1px solid var(--glass-brd-strong);
}

.leaderboard-tab[aria-selected="true"]{
  background: #fff;
  color: var(--btnInk);
}

.leaderboard-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.88rem;
}

.leaderboard-row,
.leaderboard-head{
  display: grid;
  grid-template-columns: 2rem 1fr 3.6rem 3.6rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
}

.leaderboard-row.is-me{
  border-color: #fb7185;
  background: rgba(251, 113, 133, 0.16);
}

.leaderboard-rank{
  opacity: 0.7;
}

.leaderboard-name{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.leaderboard-you{
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fda4af;
  margin-left: 0.4rem;
}

.leaderboard-head{
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  padding: 0 0.7rem;
  margin-bottom: -0.1rem;
}

.leaderboard-count{
  font-weight: 700;
  text-align: right;
  opacity: 0.7;
}

/* The column the list is sorted by. */
.leaderboard-count.is-sort{
  color: #67e8f9;
  opacity: 1;
}

.leaderboard-empty,
.leaderboard-loading,
.leaderboard-note{
  font-size: 0.82rem;
  opacity: 0.8;
  margin: 0;
}

.leaderboard-me{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--glass-brd);
}

.leaderboard-standing{
  margin: 0;
}

.leaderboard-form{
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.leaderboard-input{
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-brd-strong);
  background: var(--glass-bg);
  color: #fff;
  outline: none;
}

.leaderboard-input:focus{
  border-color: #67e8f9;
}

.leaderboard-btn{
  white-space: nowrap;
  padding: 0.6rem 1.1rem;
  font-size: 0.85rem;
}

.leaderboard-leave{
  align-self: flex-start;
  font-size: 0.78rem;
}

.leaderboard-status{
  margin: 0;
  min-height: 1.2em;
  font-size: 0.8rem;
  opacity: 0.85;
}

.leaderboard-status.is-error,
.leaderboard-error{
  color: #ffd9d9;
  font-size: 0.9rem;
}

/* Start screen: "Manage subscription" text link under the buttons */
.manage-subscription{
  grid-column: 1 / -1;
  justify-self: center;
  font-size: 0.85rem;
  opacity: 0.8;
  text-decoration: underline;
  color: inherit;
  padding: 0.25rem 0.5rem;
}

.manage-subscription[hidden]{
  display: none;
}

/* Sign-in form (email + password), Google button, status line */
.gate-form{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.gate-message{
  min-height: 1.4em;
  max-width: 360px;
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

.gate-message.is-error{
  color: #ffd9d9;
}

.gate-message.is-ok{
  color: #d8ffe0;
}

.gate-divider{
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.gate-google{
  margin-top: 0;
}

.gate-link{
  background: none;
  border: none;
  color: inherit;
  text-decoration: underline;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  opacity: 0.9;
}

.gate-link:disabled,
.gate-btn:disabled{
  opacity: 0.6;
  cursor: default;
}

/* auth.html — set / reset password */
.gate-screen .gate-form .gate-input + .gate-input{
  margin-top: 0;
}

/* =========================
   Feedback button + modal
   ========================= */

/* Floating utility buttons (feedback, alphabet) — compact icon circles
   so they don't compete with the exercise for attention. */
.feedback-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.25rem;
  z-index: 150;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0;
  transition: background 0.15s ease;
}

.feedback-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  transform: none;
  box-shadow: none;
}

.feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.feedback-modal.hidden {
  display: none;
}

.feedback-panel {
  background: linear-gradient(160deg, #5a1d5f, #3a0d3d);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-xl);
  width: min(480px, 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow: hidden;
  padding: 1.5rem 1.5rem 1.25rem;
  gap: 0.65rem;
}

.feedback-modal-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding-right: 2.5rem;
}

.feedback-modal-subtitle {
  font-size: 0.85rem;
  opacity: 0.75;
  font-family: var(--font-mono);
  margin-top: -0.25rem;
}

.feedback-textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  font-family: inherit;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-brd-strong);
  background: var(--glass-bg);
  color: white;
  resize: none;
  max-height: 32dvh;
  outline: none;
  transition: border-color 0.15s ease;
}

.feedback-textarea:focus {
  border-color: rgba(255, 255, 255, 0.55);
}

.feedback-textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.feedback-context {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  opacity: 0.65;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

.run-complete-stats {
  font-family: var(--font-mono);
  opacity: 0.7;
  letter-spacing: 0.04em;
  margin-bottom: 2rem;
}

.feedback-submit-btn {
  align-self: center;
  min-width: 160px;
}

.feedback-status {
  text-align: center;
  font-size: 0.85rem;
  font-family: var(--font-mono);
  opacity: 0.8;
}

.feedback-status.hidden {
  display: none;
}

/* Beta badge on language buttons */
.beta-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--btnInk);
  background: var(--grad-soft);
  border-radius: var(--r-pill);
  padding: 0.15em 0.55em;
  vertical-align: middle;
  margin-left: 0.4em;
  position: relative;
  top: -0.1em;
}

.lang-card .beta-badge {
  margin-left: 0;
}

/* Version tag below subtitle */
.version-tag {
  display: block;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  opacity: 0.7;
  margin-top: 0.35rem;
}

/* Utility. !important so .hidden always wins — .alphabet-btn's
   display:flex sits later in the file with equal specificity and was
   beating it, shipping a visible button that opened an empty overlay
   for Latin-script languages (Emi 2026-08-26-08). */
.hidden{
  display:none !important;
}

/* Destructive action (Emi 2026-08-26-12): RESET must not look like the
   harmless QUIT pill it sits opposite. */
.quit-button--danger{
  border-color: rgba(248, 113, 113, 0.85);
  color: #fecaca;
  background: rgba(127, 29, 29, 0.35);
}
.quit-button--danger:hover{
  background: rgba(153, 27, 27, 0.5);
  color: #ffffff;
}

/* =========================
   Progress Bar
   ========================= */

#progress-bar-container {
  width: min(720px, 100%);
  height: 10px;
  background: rgba(0,0,0,0.35);
  border-radius: var(--r-pill);
  margin: 10px 0 20px;
  overflow: hidden;
}

#progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--grad-soft);
  box-shadow: 0 0 14px rgba(251, 113, 133, 0.6);
  border-radius: var(--r-pill);
  transition: width 0.3s ease;
}

#logout-btn {
  top: 1.25rem;
  left: 1.25rem;
  position: absolute;
}

/* =========================
   Alphabet button (learning screen)
   ========================= */

.alphabet-btn {
  position: fixed;
  top: auto;
  bottom: 1.5rem;
  left: 1.25rem;
  z-index: 150;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0;
  transition: background 0.15s ease;
}

.alphabet-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  transform: none;
  box-shadow: none;
}

/* =========================
   Alphabet overlay
   ========================= */

.alphabet-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: linear-gradient(160deg, #5a1d5f, #3a0d3d);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.75rem 1rem 1.25rem;
  max-height: 100vh;
  max-height: 100dvh;
}

.alphabet-overlay.hidden {
  display: none;
}

.alphabet-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  position: relative;
}

.alphabet-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: white;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  letter-spacing: 0;
  font-weight: 400;
  transition: background 0.15s ease;
}

.alphabet-close:hover {
  background: rgba(255, 255, 255, 0.30);
  transform: none;
  box-shadow: none;
}

.alphabet-overlay-title {
  font-family: var(--font-display);
  text-align: center;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  margin-bottom: 0.85rem;
  padding-right: 3rem;
}

.alphabet-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.alphabet-section-name {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0.6rem 0 0.3rem;
  font-weight: 700;
}

.alphabet-section-name:first-child {
  margin-top: 0;
}

.letter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 0.5rem;
}

.letter-card {
  background: white;
  color: #4a144c;
  border-radius: 14px;
  padding: 0.5rem 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.letter-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

.letter-char {
  font-size: clamp(1.1rem, 4.5vw, 1.8rem);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.1rem;
}

.letter-romanization {
  font-size: clamp(0.6rem, 2.2vw, 0.85rem);
  font-weight: 600;
  opacity: 0.6;
  line-height: 1;
}

.letter-sound {
  font-size: clamp(0.55rem, 1.9vw, 0.7rem);
  font-weight: 500;
  opacity: 0.45;
  margin-top: 0.1rem;
  text-align: center;
  line-height: 1.2;
}

@media (max-width: 520px) {
  .letter-grid {
    grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
    gap: 0.35rem;
  }
  .alphabet-overlay { padding: 1.5rem 0.75rem 1rem; }
}

/* Inline TTS speaker button */
.tts-inline {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  padding: 0.3rem 0.4rem;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  border-radius: var(--r-sm);
  min-width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 0.3rem;
  line-height: 1;
}
.tts-inline:hover {
  background: rgba(255,255,255,0.22);
  color: white;
  transform: none;
  box-shadow: none;
}

/* Inline SVG icons (speaker, mic, bulb, …) inherit currentColor. */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: currentColor;
  pointer-events: none;
}

.tts-inline .icon {
  width: 1.05em;
  height: 1.05em;
  vertical-align: middle;
}

/* TTS highlighting — applied to per-word and per-letter spans while audio plays. */
.tts-phrase .tts-word,
.letter-char .tts-letter {
  transition: background-color 120ms ease, color 120ms ease;
  border-radius: 3px;
  padding: 0 2px;
}
.tts-word.tts-active,
.tts-letter.tts-active {
  background: #ffd24a;
  color: #1a1a1a;
}

/* =========================
   Choice Grid — 2 columns, squircle buttons
   ========================= */

#choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 1rem 0;
}

/* Choice buttons — squircle, dark glass */
#choices button:not(.tts-inline) {
  border-radius: var(--r-lg);
  background: var(--glass-bg-strong);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.9rem 1rem;
  width: 100%;
  text-align: center;
  font-size: 1rem;
  transition: background-color 0.2s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

#choices button:not(.tts-inline):hover {
  background: rgba(255, 255, 255, 0.18);
  transform: none;
  box-shadow: none;
}

#choices button.selected:not(.tts-inline) {
  background: rgba(255, 255, 255, 0.22);
  border: 2px solid white;
  outline: none;
}

/* Chip wraps inside #choices (L3/L4 have TTS next to choice) */
#choices .word-bank-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  min-width: 0;
}

#choices .word-bank-chip button:not(.tts-inline) {
  flex: 1;
  width: auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

/* =========================
   Sentence Builder — Slots & Word Bank
   ========================= */

.sentence-slot {
  min-width: 60px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.45);
  color: white;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sentence-slot:hover {
  background: rgba(255, 255, 255, 0.14);
}

.slot-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.word-bank-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.word-bank-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 4px;
}

/* =========================
   Free Production Input (Level 7)
   ========================= */

.free-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
  border-radius: var(--r-sm);
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  outline: none;
  transition: border-color 0.15s ease;
}

.free-input:focus {
  border-color: rgba(255, 255, 255, 0.8);
}

.free-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* =========================
   Session Complete
   ========================= */

.session-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  padding: 0.5rem 0;
}

.session-complete h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  background: var(--grad-soft);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.session-complete p {
  opacity: 0.8;
  font-size: 1rem;
  line-height: 1.5;
}

.coaching-cta {
  font-size: 0.82rem;
  opacity: 0.55;
  margin-top: 0.25rem;
}

.coaching-link {
  color: var(--accent-1-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 132, 252, 0.35);
  transition: opacity 0.15s;
}

.coaching-link:hover {
  opacity: 0.8;
}

/* =========================
   Content typography
   ========================= */

.content h2 {
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.content p {
  opacity: 0.75;
  line-height: 1.6;
}

.content strong {
  color: var(--accent-1-soft);
}

.content small {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  opacity: 0.55;
  font-variant: small-caps;
}

/* =========================
   Reason Screen (onboarding)
   ========================= */

#reason-screen .subtitle {
  max-width: 34rem;
  line-height: 1.5;
}

.reason-grid {
  grid-template-columns: repeat(2, minmax(200px, 280px));
  margin-bottom: 1.75rem;
}

.reason-grid button.selected {
  background: #f3e0f5;
  outline: 3px solid #ffffff;
}

.reason-detail {
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.reason-detail-label {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  opacity: 0.9;
  text-align: left;
}

.reason-detail-input {
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: none;
  font-family: var(--font-ui);
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.96);
  color: var(--btnInk);
  outline: none;
}

.reason-detail-input:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

.reason-detail-hint {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  opacity: 0.6;
  text-align: left;
}

@media (max-width: 600px) {
  .reason-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Journey button (learning screen)
   ========================= */

.journey-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  left: auto;
  z-index: 150;
  background: transparent;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 0.75rem 1.25rem;
  transition: background 0.15s ease;
}

.journey-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  transform: none;
  box-shadow: none;
}

/* =========================
   Roadmap screen (journey)
   ========================= */

#roadmap-screen {
  justify-content: flex-start;
  padding-top: 5rem;
  padding-bottom: 6.5rem;
}

.roadmap-wrap {
  width: min(560px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.roadmap-wrap .title,
.roadmap-wrap .subtitle {
  text-align: center;
}

.roadmap-message {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 1rem;
  opacity: 0.9;
  line-height: 1.5;
}

.roadmap-milestone {
  text-align: center;
  padding: 1.25rem 1.25rem 1.35rem;
  margin-bottom: 1.25rem;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.22), rgba(255, 209, 102, 0.08));
  border: 2px solid rgba(255, 209, 102, 0.6);
  animation: milestoneReveal 0.45s ease-out both;
}

.roadmap-milestone-headline {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.roadmap-milestone-line {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.45;
  margin-top: 0.45rem;
  opacity: 0.95;
}

@keyframes milestoneReveal {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.roadmap-path {
  list-style: none;
  margin: 0.5rem 0 0.75rem;
  padding: 0 0 0 2.25rem;
  position: relative;
}

.roadmap-stop {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.45rem 0;
}

/* Current stop gets a small size bump so the eye lands on it first. */
.roadmap-stop.current .roadmap-stop-meta {
  font-size: 0.88rem;
  font-weight: 700;
}
.roadmap-stop.current .roadmap-stop-preview {
  font-size: 0.92rem;
  opacity: 0.85;
}

.roadmap-stop-dot {
  position: absolute;
  left: -2.25rem;
  top: 0.55rem;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--btnInk);
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.45);
  z-index: 2;
  flex-shrink: 0;
}

.roadmap-stop::before {
  content: "";
  position: absolute;
  left: calc(-2.25rem + 0.825rem - 1px);
  top: -0.5rem;
  bottom: -0.5rem;
  width: 2px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 1;
}

.roadmap-stop:first-child::before {
  top: 50%;
}

.roadmap-stop:last-child::before {
  bottom: 50%;
}

.roadmap-stop.done .roadmap-stop-dot {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--btnInk);
}

.roadmap-stop.done::before {
  background: rgba(255, 255, 255, 0.7);
}

/* The one stop the learner is actively working on — pulses. */
.roadmap-stop.current .roadmap-stop-dot {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--btnInk);
  box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.25);
  animation: roadmapPulse 2.2s ease-in-out infinite;
}

/* Older released bundles with unfinished concepts — visible but quiet. */
.roadmap-stop.in-progress .roadmap-stop-dot {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}
.roadmap-stop.in-progress::before {
  background: rgba(255, 209, 102, 0.35);
}

.roadmap-stop.locked {
  opacity: 0.55;
}

.roadmap-stop.locked .roadmap-stop-dot {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.7);
}

@keyframes roadmapPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 209, 102, 0.05); }
}

.roadmap-stop-body {
  flex: 1 1 auto;
  text-align: left;
  padding: 0.05rem 0 0.2rem;
}

.roadmap-stop-meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  opacity: 0.85;
}

.roadmap-stop-preview {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 0.15rem;
  line-height: 1.35;
}

.roadmap-stop.done .roadmap-stop-meta,
.roadmap-stop.current .roadmap-stop-meta {
  opacity: 1;
}
.roadmap-stop.in-progress .roadmap-stop-meta {
  opacity: 0.9;
}

/* Tiny chips indicating how much of the journey lies above/below the
   windowed view. Not interactive, just context. */
.roadmap-hidden-indicator {
  list-style: none;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  opacity: 0.55;
  padding: 0.25rem 0;
  margin: 0;
}

/* Coaching CTA is promoted to a proper card above the continue button
   so it's always visible — not scrolled off as the journey list grows. */
.roadmap-coaching {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-align: center;
  margin-top: 1.1rem;
  padding: 0.8rem 1rem;
  border-radius: 14px;
  background: rgba(255, 209, 102, 0.12);
  border: 1px solid rgba(255, 209, 102, 0.4);
  line-height: 1.45;
}

.roadmap-coaching a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: underline;
}

.roadmap-continue {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  z-index: 5;
}

.roadmap-continue:hover {
  transform: translateX(-50%) translateY(-2px);
}

@media (max-width: 600px) {
  #roadmap-screen {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* =========================
   Fit-to-viewport compression
   - exercises, feedback
   Goal: no scrolling in any direction on a normal phone viewport.
   ========================= */

/* Exercise content shrinks with viewport height */
@media (max-height: 820px) {
  #choices { gap: 0.55rem; margin: 0.7rem 0; }
  #choices button:not(.tts-inline) {
    padding: 0.7rem 0.8rem;
    font-size: 0.95rem;
  }
  #learning-screen .content { padding: 1.25rem 1.1rem; }
}
@media (max-height: 680px) {
  #learning-screen {
    padding: 3.75rem 1rem 4.25rem;
  }
  #choices button:not(.tts-inline) {
    padding: 0.55rem 0.7rem;
    font-size: 0.88rem;
  }
  #learning-screen .title.small { font-size: 1.35rem; letter-spacing: 0.08em; }
  #learning-screen .subtitle { font-size: 0.85rem; margin-bottom: 0.25rem; }
}

/* Feedback modal compression on short screens */
@media (max-height: 680px) {
  .feedback-panel {
    padding: 1.1rem 1.15rem 0.9rem;
    gap: 0.45rem;
  }
  .feedback-modal-title { font-size: 1.1rem; }
  .feedback-modal-subtitle { font-size: 0.78rem; }
  .feedback-textarea { max-height: 22dvh; }
}

/* ── Grammar "why?" chips (exposure cards) ─────────────────────────────── */
.grammar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 12px 0 4px;
}

.grammar-chip {
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  cursor: pointer;
}

.grammar-chip:hover {
  background: rgba(255, 255, 255, 0.18);
}

.grammar-chip .icon {
  color: var(--gold);
}

.grammar-note-panel {
  margin: 10px auto 4px;
  max-width: 420px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: left;
}

.grammar-note-panel.hidden {
  display: none;
}

.grammar-note-panel p {
  margin: 6px 0 0;
}

/* ── Mnemonic word note (exposure cards) ───────────────────────────────── */
.word-note {
  max-width: 420px;
  margin: 6px auto 0;
  font-size: 0.85rem;
  opacity: 0.85;
  line-height: 1.4;
}

.word-note .icon {
  color: var(--accent-1-soft);
}

/* ── Tutor-admitted concept intro card ─────────────────────────────────── */
/* Small "from Anna" badge on L1 intro cards for concepts admitted from a
   tutor session. Cyan/teal on the purple ground (never purple-on-purple). */
.tutor-intro-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto 12px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: rgba(186, 230, 253, 0.95);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tutor-intro-badge .icon {
  width: 12px;
  height: 12px;
}

/* ── Speaking practice (exposure cards) ────────────────────────────────── */
.speak-check-btn {
  margin: 8px auto 0;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  cursor: pointer;
  font-size: 0.9rem;
}

.speak-check-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.spoken-diff {
  margin: 8px auto 0;
  max-width: 420px;
  font-size: 1rem;
  line-height: 1.6;
}

.spoken-diff .spoken-ok {
  color: var(--success-text);
  font-weight: 600;
}

.spoken-diff .spoken-miss {
  color: var(--danger-text);
  text-decoration: underline dotted;
}

.spoken-diff .spoken-verdict,
.spoken-diff .spoken-heard,
.spoken-diff .spoken-error {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  opacity: 0.85;
}

.spoken-diff .spoken-heard {
  font-style: italic;
}

/* Anna (AI tutor) start-screen entry: locked = visible but unclickable. */
a.secondary.locked {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

/* =========================
   Anna — AI tutor page (tutor.html)
   Standalone page on the same stylesheet; these rules sit last so they
   win over the global button/pill base where they must.
   ========================= */

.tutor-wrap {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 1rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  gap: 0.75rem;
}

.tutor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tutor-header .title {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  margin-bottom: 0;
}

#tutor-version-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.45;
}

.tutor-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Back-to-app link: the quit-button pill, inline instead of absolute. */
.tutor-header-actions a {
  color: #fff;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--r-pill);
  padding: 0.45rem 0.85rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  transition: background-color 0.15s ease;
}

.tutor-header-actions a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Header icon buttons — quiet utility chips, not white pills. */
#tutor-settings-btn,
#tutor-memory-btn {
  background: transparent;
  border: none;
  color: inherit;
  padding: 4px 8px;
  font-size: 1.25rem;
  line-height: 1;
  border-radius: var(--r-sm);
}

#tutor-settings-btn:hover,
#tutor-memory-btn:hover {
  background: var(--glass-bg-strong);
  transform: none;
  box-shadow: none;
}

/* Settings + memory overlays share the feedback-modal pattern. */
#tutor-settings,
#tutor-memory {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 10;
}

#tutor-settings[hidden],
#tutor-memory[hidden] {
  display: none;
}

.tutor-settings-panel,
.tutor-memory-panel {
  background: linear-gradient(160deg, #5a1d5f, #3a0d3d);
  color: var(--ink);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  padding: 1.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
}

.tutor-settings-panel {
  max-width: 380px;
}

.tutor-memory-panel {
  max-width: 420px;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}

.tutor-settings-panel h2,
.tutor-memory-panel h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  padding-right: 2.5rem;
}

.tutor-intro {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.92;
}

.tutor-settings-panel label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
}

.tutor-settings-panel input[type="text"],
.tutor-settings-panel textarea {
  font: inherit;
  padding: 0.65rem 0.85rem;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-brd-strong);
  background: var(--glass-bg);
  color: #fff;
  outline: none;
}

.tutor-settings-panel textarea {
  resize: vertical;
  min-height: 5.5rem;
  line-height: 1.4;
}

.tutor-settings-panel input[type="text"]:focus,
.tutor-settings-panel textarea:focus {
  border-color: rgba(255, 255, 255, 0.55);
}

.tutor-settings-panel input[type="text"]::placeholder,
.tutor-settings-panel textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.tutor-note-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
  opacity: 0.7;
}

.tutor-settings-hint,
.tutor-memory-hint {
  font-size: 0.8rem;
  opacity: 0.75;
  margin: 0;
}

/* Circular close chips (alphabet-close recipe). */
#tutor-settings-close,
#tutor-memory-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tutor-settings-close:hover,
#tutor-memory-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: none;
  box-shadow: none;
}

#tutor-settings-close[hidden],
#tutor-memory-close[hidden] {
  display: none;
}

.tutor-memory-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tutor-memory-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  text-align: left;
}

.tutor-memory-text {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.35;
  word-break: break-word;
}

.tutor-memory-remove {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tutor-memory-remove:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: none;
  box-shadow: none;
}

.tutor-memory-empty {
  font-size: 0.85rem;
  opacity: 0.7;
  margin: 0;
}

#tutor-chat {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem;
  min-height: 300px;
}

.tutor-msg {
  max-width: 85%;
  padding: 0.65rem 0.9rem;
  border-radius: var(--r-lg);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
}

.tutor-msg.user {
  align-self: flex-end;
  background: var(--grad-cta);
  color: #fff;
  border-bottom-right-radius: var(--r-sm);
}

.tutor-msg.assistant {
  align-self: flex-start;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-brd);
  border-bottom-left-radius: var(--r-sm);
}

.tutor-msg.status {
  align-self: center;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  opacity: 0.7;
}

/* Anna is typing: three pulsing dots in an assistant-shaped bubble, shown
   from the moment the learner sends until the first piece of the reply
   streams in (then the bubble itself grows word by word). */
.tutor-msg.status.typing {
  align-self: flex-start;
  display: flex;
  gap: 0.3rem;
  align-items: center;
  min-height: 1.2rem;
  padding: 0.75rem 0.9rem;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg);
  border-bottom-left-radius: var(--r-sm);
  opacity: 1;
}

.tutor-msg.status.typing span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  animation: tutor-typing 1.2s ease-in-out infinite;
}

.tutor-msg.status.typing span:nth-of-type(2) { animation-delay: 0.2s; }
.tutor-msg.status.typing span:nth-of-type(3) { animation-delay: 0.4s; }

@keyframes tutor-typing {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .tutor-msg.status.typing span { animation: none; opacity: 0.7; }
}

/* A learner message Anna never received: dimmed, with an inline Retry. The
   text is also still in the input, so nothing is ever retyped. */
.tutor-msg.user.undelivered {
  opacity: 0.75;
  outline: 1px dashed rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

.tutor-msg-failed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  white-space: normal;
}

.tutor-retry {
  flex-shrink: 0;
  font: inherit;
  font-weight: 700;
  padding: 0.25rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
}

.tutor-retry:hover {
  background: rgba(255, 255, 255, 0.3);
}

#tutor-input-row {
  display: flex;
  gap: 0.5rem;
}

#tutor-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 0.7rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd-strong);
  background: var(--glass-bg-strong);
  color: #fff;
  outline: none;
}

#tutor-input:focus {
  border-color: rgba(255, 255, 255, 0.55);
}

#tutor-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

/* Tutor CTA — the gradient primary recipe at the small-button size. */
.tutor-btn {
  padding: 0.8rem 1.2rem;
  background: var(--grad-cta);
  color: #fff;
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.35);
}

.tutor-btn:hover {
  box-shadow: 0 10px 24px rgba(244, 63, 94, 0.4);
}

.tutor-btn:disabled {
  box-shadow: none;
  filter: saturate(0.5);
}

.tutor-btn.secondary {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.45);
  box-shadow: none;
}

.tutor-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

#tutor-gate {
  text-align: center;
  padding: 2.5rem 1rem;
}

#tutor-gate p {
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

#tutor-gate a {
  color: #fff;
}

/* Conversation topics (beta): the picker shown before a conversation and
   Anna's yes/no topic proposals. */
.tutor-topics {
  align-self: stretch;
  background: var(--glass-bg-strong);
  border-radius: var(--r-sm);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tutor-topics-title {
  margin: 0;
  font-weight: 700;
}

.tutor-topics-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tutor-topic-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.tutor-topic,
.tutor-topic-opinions {
  flex: 1;
  text-align: start;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The built-in Opinions subject: first row of the picker, rolls a theme. */
.tutor-topic-opinions {
  border-color: rgba(251, 191, 36, 0.6);
}

.tutor-topic-opinions .tutor-topic-progress {
  display: block;
  font-size: 0.8em;
  font-weight: 400;
  opacity: 0.8;
}

.tutor-topic-remove {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  padding: 4px 8px;
  box-shadow: none;
}

.tutor-topic-remove:hover {
  color: #fb7185;
  transform: none;
  box-shadow: none;
}

.tutor-topic-new {
  display: flex;
  gap: 0.5rem;
}

.tutor-topic-new input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-sm);
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font: inherit;
}

.tutor-topic-new input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.tutor-theme-progress-title {
  margin: 1rem 0 0.4rem;
  font-weight: 700;
}

.tutor-topic-proposal p {
  margin: 0 0 0.6rem;
}

.tutor-topic-proposal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tutor-lang-choices {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 320px;
  margin: 1rem auto 0;
}

@media (max-width: 520px) {
  .tutor-msg {
    max-width: 92%;
  }

  .tutor-btn {
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
  }

  #tutor-input-row {
    flex-wrap: wrap;
  }

  #tutor-input {
    flex-basis: 100%;
  }
}

/* =========================
   Free tier (Nekh 2026-09-30): start-free block on the sign-in screen,
   the end-of-lesson-3 Anna screen and the lesson-4 paywall. App tokens
   only; rose accent for contrast on the purple gradient.
   ========================= */
.gate-start-free{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: min(360px, 100%);
}
.gate-start-free .gate-note{
  margin-top: 0;
}
.trial-screen{
  text-align: center;
  padding: 2rem 1.5rem;
}
.trial-screen.active{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.trial-line{
  max-width: 34rem;
  line-height: 1.5;
}
a.primary.paywall-buy{
  display: inline-block;
  text-decoration: none;
  color: var(--btnInk);
  background: #fff;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.9rem 1.6rem;
  border-radius: var(--r-md);
}
.paywall-renewal{
  font-size: 0.9rem;
  opacity: 0.9;
  max-width: 30rem;
}
.roadmap-stop.paywalled .roadmap-stop-dot{
  border-color: #fb7185;
}

/* Email consent (Austin via Nekh 2026-10-04): the unticked weekly-email box
   on the free sign-up form and on the one-time question after a first
   Google sign-in. */
.gate-check{
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: min(320px, 100%);
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.35;
  opacity: 0.92;
  cursor: pointer;
}
.gate-check input{
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.1rem 0 0;
  accent-color: #ffd36e;
  cursor: pointer;
}
.email-optin-card{
  width: min(420px, 100%);
  margin: 0 auto 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, #5a1d5f, #3a0d3d);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.email-optin-title{
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.email-optin-text{
  font-size: 0.95rem;
  line-height: 1.45;
  opacity: 0.9;
}
.email-optin-check{
  width: 100%;
}
.email-optin-card .primary{
  min-width: 200px;
}

/* =========================
   Sign-in gate, cleaned up (Nekh 2026-10-06): one column, one form at a
   time, language picker in the corner, one gradient button.
   ========================= */
.gate-screen{
  position: relative;
}
.gate-screen[data-mode="free"] .gate-only-signin,
.gate-screen[data-mode="signin"] .gate-only-free{
  display: none;
}
.gate-screen .title{
  margin: 1.5rem 0 0.5rem;
}
.gate-lang{
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.4rem 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd);
  font-size: 0.9rem;
}
.gate-lang-select{
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.25rem 1.3rem 0.25rem 0.2rem;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 0.65rem) 55%, calc(100% - 0.35rem) 55%;
  background-size: 0.3rem 0.3rem;
  background-repeat: no-repeat;
}
.gate-lang-select option{
  color: var(--btnInk);
  background: #fff;
}
.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.gate-screen .gate-google,
.gate-screen .gate-form .gate-btn{
  width: min(320px, 100%);
}
.gate-screen .gate-divider{
  margin: 0;
}
.gate-signin{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: min(360px, 100%);
}
.gate-switch{
  margin-top: 0.25rem;
  text-decoration: none;
  font-weight: 600;
}
.gate-buy{
  margin-top: 1.5rem;
  font-size: 0.85rem;
  opacity: 0.75;
}
[dir="rtl"] .gate-lang-select{
  padding: 0.25rem 0.2rem 0.25rem 1.3rem;
  background-position: 0.35rem 55%, 0.65rem 55%;
}
/* auth.html on an expired link hides its form (display:flex beats [hidden]). */
.gate-form[hidden],
.gate-note[hidden]{
  display: none;
}

/* ── Feedback sheet (after Check; Nekh 2026-10-12, layout 2026-10-13) ─────
   A dialogue box over the bottom of the screen, after Stardew Valley's:
   Anna stands in front of it on the right, taller than the box, with her
   name on a tab above its top edge. The box is at least 20% of the screen,
   grows to fit, scrolls inside past 70%. Dark ink, not purple: purple text
   on the purple card was the hardest thing on screen to read. Accent is
   teal for right, rose for wrong (never purple-on-purple). */
.feedback-sheet {
  --sheet-accent: #2dd4bf;
  --anna-h: 240px;
  --anna-w: calc(var(--anna-h) * 265 / 360);
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 40; /* under the journey/alphabet/feedback overlays (150+) */
  width: min(720px, 100%);
  transform: translate(-50%, 100%);
  transition: transform 0.22s ease-out;
  text-align: left;
  color: #fff;
}
.feedback-sheet.open { transform: translate(-50%, 0); }
.feedback-sheet.is-wrong { --sheet-accent: #fb7185; }

.feedback-sheet-box {
  box-sizing: border-box;
  min-height: 20vh;
  max-height: 70vh;
  overflow-y: auto;
  /* Room on the right for Anna, who stands in front of this edge. */
  padding: 1.1rem calc(var(--anna-w) * 0.78) calc(1rem + env(safe-area-inset-bottom)) 1.25rem;
  background: #1c0a21;
  border-top: 3px solid var(--sheet-accent);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
}

/* Her name on a tab sitting on the box's top edge. */
.feedback-sheet-name {
  position: absolute;
  left: 1.25rem;
  bottom: 100%;
  margin-bottom: -3px;
  padding: 0.2rem 0.85rem 0.25rem;
  background: #1c0a21;
  border: 3px solid var(--sheet-accent);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--sheet-accent);
}

/* Anna, in front of the box's right side: feet at the bottom of the
   screen, head well above the box's top edge. */
.feedback-anna {
  position: absolute;
  right: -0.25rem;
  bottom: 0;
  z-index: 1;
  height: var(--anna-h);
  width: auto;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
  animation: annaIn 0.28s ease-out;
}
@keyframes annaIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.feedback-sheet-body { min-width: 0; }

.feedback-sheet .sheet-verdict {
  margin: 0 0 0.35rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--sheet-accent);
}
.feedback-sheet .sheet-answer { margin: 0 0 0.35rem; }
/* The right answer: light teal on dark, readable at a glance. */
.feedback-sheet strong,
.feedback-sheet .correct-answer-reveal span { color: #99f6e4; }
.feedback-sheet .correct-answer-reveal { margin-top: 0; text-align: left; }
.feedback-sheet #l7-feedback { margin-top: 0 !important; text-align: left !important; }
.feedback-sheet .grammar-chips,
.feedback-sheet .speak-check { margin-top: 0.5rem; }
.feedback-sheet .grammar-chips { justify-content: flex-start; }
.feedback-sheet .speak-check { text-align: left; }
.feedback-sheet .speak-check-btn { margin-left: 0; }

.feedback-sheet-actions { margin-top: 0.75rem; }
.feedback-sheet-actions button { margin: 0; }

/* The floating buttons ride above the open sheet (--sheet-h is its live
   height, set by app.js) instead of covering Anna and Continue. */
.feedback-btn,
.alphabet-btn {
  bottom: calc(1.5rem + var(--sheet-h, 0px));
  transition: bottom 0.22s ease-out;
}

@media (max-width: 520px) {
  .feedback-sheet { --anna-h: 210px; }
  .feedback-sheet-box { padding-left: 1rem; }
  .feedback-sheet-name { left: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-sheet,
  .feedback-anna { transition: none; animation: none; }
}

/* Anna in the tutor chat (Nekh 2026-10-12): a small figure beside the
   typing dots, the "say hi" line and an undelivered message. */
.tutor-anna {
  height: 56px;
  width: auto;
  flex: none;
  margin-right: 0.35rem;
  animation: annaIn 0.28s ease-out;
}
.tutor-anna-small { height: 36px; vertical-align: middle; }
.tutor-msg.status.with-anna {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  opacity: 0.9;
  text-align: left;
}
@media (prefers-reduced-motion: reduce) {
  .tutor-anna { animation: none; }
}