/* ==========================================================
   Empathly — Stylesheet
   Dark-first, emotional, expressive. Mobile-first.
   ========================================================== */

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Dark palette (default) */
  --bg:               #0D0B14;
  --bg-card:          #1A1428;
  --bg-card2:         #2A1F4A;
  --surface:          rgba(255,255,255,.07);
  --surface2:         rgba(255,255,255,.12);
  --border:           rgba(255,255,255,.15);
  --border2:          rgba(255,255,255,.22);
  --text:             #F0EDF8;
  --text-soft:        rgba(240,237,248,.60);
  --text-muted:       rgba(240,237,248,.35);
  --accent:           #FFD166;
  --accent-light:     rgba(255,209,102,.15);
  --accent-coral:     #FF6B6B;
  --card-back:        #221A3A;
  --card-back-pattern:rgba(255,255,255,.10);
  --radius:           16px;
  --radius-sm:        10px;
  --shadow:           0 4px 20px rgba(0,0,0,.5);
  --shadow-hover:     0 16px 48px rgba(0,0,0,.65);
  --shadow-card:      0 2px 14px rgba(0,0,0,.4);
  --transition:       .3s cubic-bezier(.4,0,.2,1);
  --easing-spring:    cubic-bezier(.32,.72,.12,1.25);
  --font:             'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display:     'Lora', Georgia, 'Times New Roman', serif;
  --grid-gap:         12px;
  --card-size:        110px;
  --overlay-bg:       rgba(5,4,10,.70);

  /* Emotion category palette */
  --licht:    #FFD166;
  --mitte:    #06D6A0;
  --schwere:  #A78BFA;
  --sturm:    #FF6B6B;
  --angst:    #74C0FC;
  --schatten: #B197FC;
}

/* ---------- Light Mode ---------- */
body.light-mode {
  --bg:               #FFF8F0;
  --bg-card:          #FFFFFF;
  --bg-card2:         #F5EFE8;
  --surface:          rgba(45,42,38,.04);
  --surface2:         rgba(45,42,38,.08);
  --border:           rgba(45,42,38,.12);
  --border2:          rgba(45,42,38,.22);
  --text:             #2D2A26;
  --text-soft:        #6B6560;
  --text-muted:       #9E9589;
  --accent:           #F6C344;
  --accent-light:     #FEF3D0;
  --accent-coral:     #E8836B;
  --card-back:        #E8DDD3;
  --card-back-pattern:#D4C8BC;
  --shadow:           0 2px 12px rgba(45,42,38,.08);
  --shadow-hover:     0 8px 28px rgba(45,42,38,.15);
  --shadow-card:      0 2px 8px rgba(45,42,38,.06);
  --overlay-bg:       rgba(45,42,38,.5);
}

@media (prefers-color-scheme: light) {
  body:not(.dark-mode) {
    --bg:               #FFF8F0;
    --bg-card:          #FFFFFF;
    --bg-card2:         #F5EFE8;
    --surface:          rgba(45,42,38,.04);
    --surface2:         rgba(45,42,38,.08);
    --border:           rgba(45,42,38,.12);
    --border2:          rgba(45,42,38,.22);
    --text:             #2D2A26;
    --text-soft:        #6B6560;
    --text-muted:       #9E9589;
    --accent:           #F6C344;
    --accent-light:     #FEF3D0;
    --accent-coral:     #E8836B;
    --card-back:        #E8DDD3;
    --card-back-pattern:#D4C8BC;
    --shadow:           0 2px 12px rgba(45,42,38,.08);
    --shadow-hover:     0 8px 28px rgba(45,42,38,.15);
    --shadow-card:      0 2px 8px rgba(45,42,38,.06);
    --overlay-bg:       rgba(45,42,38,.5);
  }
}

/* ---------- Ambient Orbs ---------- */
.bg-orbs {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}
.bg-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .15;
  animation: orb-drift 22s ease-in-out infinite alternate;
}
.bg-orb-1 { width: 600px; height: 600px; background: var(--schwere); top: -200px; left: -120px; animation-duration: 22s; }
.bg-orb-2 { width: 400px; height: 400px; background: var(--sturm);   top: 35%; right: -150px; animation-duration: 18s; animation-delay: -7s; }
.bg-orb-3 { width: 500px; height: 500px; background: var(--angst);   bottom: -120px; left: 18%; animation-duration: 26s; animation-delay: -4s; }
.bg-orb-4 { width: 280px; height: 280px; background: var(--licht);   top: 55%; left: 5%;  animation-duration: 20s; animation-delay: -12s; opacity: .10; }
body.light-mode .bg-orb { opacity: .06; }
@keyframes orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(36px, 28px) scale(1.07); }
}

html { font-size: 16px; }
body {
  font-family: var(--font);
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
  position: relative;
}

/* ---------- Header ---------- */
.header {
  width: 100%;
  max-width: 800px;
  padding: 14px 20px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.header h1 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  font-style: italic;
  color: var(--text-soft);
  letter-spacing: -.02em;
  flex: 1;
}
/* Hide title/subtitle when landing has its own hero */
body.show-landing .header h1,
body.show-landing .header .subtitle {
  display: none;
}
.header .subtitle {
  font-size: .82rem;
  color: var(--text-muted);
  margin-top: 1px;
}
/* On landing: header is just the icon strip, right-aligned */
body.show-landing .header {
  justify-content: flex-end;
  padding: 10px 20px 4px;
}
.header-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
body.show-landing .header-icons { margin-left: 0; }
#btn-dark-mode { font-size: 1rem; }

/* ---------- Back Button ---------- */
.btn-back {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border: none;
  background: var(--bg-card);
  border-radius: 100px;
  font: inherit;
  font-size: .82rem;
  color: var(--text-soft);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
  position: absolute;
  left: 20px;
  top: 20px;
}
.btn-back:hover {
  color: var(--text);
  box-shadow: var(--shadow);
}
body:not(.show-landing) .btn-back {
  display: flex;
}

/* ---------- Landing Screen ---------- */
.landing-screen {
  width: 100%;
  max-width: 720px;
  padding: 0 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  position: relative; z-index: 1;
  animation: fadeSlideIn .5s ease;
}
body:not(.show-landing) .landing-screen {
  display: none;
}

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

.landing-hero {
  text-align: center;
  padding: 20px 0 4px;
  position: relative;
}
.landing-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 8vw, 4.5rem);
  font-weight: 600;
  background: linear-gradient(135deg, #FFD166 0%, #FF6B6B 42%, #A78BFA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-bottom: 12px;
  animation: heroFadeIn .7s ease both;
}
body.light-mode .landing-title {
  background: linear-gradient(135deg, #C94F2A 0%, #D4940E 42%, #5A6FA8 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.landing-subtitle {
  font-size: .9rem;
  color: var(--text-soft);
  letter-spacing: .04em;
  animation: heroFadeIn .7s .12s ease both;
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Collapsible Settings Bar ---------- */
.settings-bar {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.settings-bar:hover {
  border-color: var(--border2);
  box-shadow: var(--shadow);
}
.settings-bar-summary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: .9rem;
  color: var(--text);
  cursor: pointer;
  transition: var(--transition);
}
.settings-bar-summary:hover {
  background: var(--surface2);
}
.settings-bar-arrow {
  font-size: .75rem;
  color: var(--text-soft);
  transition: transform .3s ease;
}
.settings-bar.open .settings-bar-arrow {
  transform: rotate(180deg);
}
.settings-bar-content {
  display: none;
  padding: 0 18px 16px;
  flex-direction: column;
  gap: 10px;
}
.settings-bar.open .settings-bar-content {
  display: flex;
}
.settings-bar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.settings-bar-swap {
  color: var(--text-soft);
  font-size: .85rem;
}
/* Hide settings bar when NOT on landing */
body:not(.show-landing) .settings-bar {
  display: none;
}

/* ---------- Mode Grid ---------- */
.mode-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mode-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mode-group-label {
  font-family: var(--font-display);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-soft);
  padding-left: 4px;
}
.mode-group-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 18px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  color: var(--text);
  text-align: left;
  position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.mode-card::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--card-glow, transparent);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.mode-card:hover {
  transform: translateY(-3px);
  border-color: var(--border2);
  box-shadow: var(--shadow);
}
.mode-card:hover::before { opacity: 1; }
.mode-card:active { transform: translateY(-1px); }

.mode-card-icon {
  width: 38px; height: 38px;
  background: var(--icon-bg, var(--surface2));
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; line-height: 1;
  margin-bottom: 8px;
  transition: transform .2s;
}
.mode-card:hover .mode-card-icon { transform: scale(1.1); }

.mode-card-name {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
}
.mode-card-desc {
  font-size: .78rem;
  color: var(--text-soft);
  line-height: 1.5;
}

/* Primary mode grid — 5 core modes */
.mode-grid-primary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 12px;
  width: 100%;
}

/* More modes expandable section */
.more-modes-grid[hidden] { display: none; }
.more-modes-section { width: 100%; margin-top: 4px; }
.more-modes-toggle {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 18px;
  color: var(--text-soft);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: border-color .2s, color .2s;
}
.more-modes-toggle:hover { border-color: var(--border2); color: var(--text); }
.more-modes-arrow {
  display: inline-block;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform .3s var(--easing-spring, ease);
}
.more-modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 10px;
  margin-top: 10px;
  animation: fadeSlideUp .25s ease both;
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Kartenset in footer */
.btn-kartenset {
  display: block;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  margin: 6px auto 0;
  padding: 4px 8px;
  opacity: .7;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s;
}
.btn-kartenset:hover { opacity: 1; }

/* Per-group accent colors */
.mode-group:nth-child(1) .mode-card { --icon-bg: rgba(255,209,102,.15); --card-glow: radial-gradient(ellipse at 0% 0%, rgba(255,209,102,.07), transparent 60%); }
.mode-group:nth-child(2) .mode-card { --icon-bg: rgba(6,214,160,.15);   --card-glow: radial-gradient(ellipse at 0% 0%, rgba(6,214,160,.07), transparent 60%); }
.mode-group:nth-child(3) .mode-card { --icon-bg: rgba(167,139,250,.15);  --card-glow: radial-gradient(ellipse at 0% 0%, rgba(167,139,250,.07), transparent 60%); }

/* Individual card overrides */
.mode-card[data-mode="classic"]  { --icon-bg: rgba(255,209,102,.15); --card-glow: radial-gradient(ellipse at 0% 0%, rgba(255,209,102,.07), transparent 60%); }
.mode-card[data-mode="talk"]     { --icon-bg: rgba(255,107,107,.15);  --card-glow: radial-gradient(ellipse at 0% 0%, rgba(255,107,107,.07), transparent 60%); }
.mode-card[data-mode="story"]    { --icon-bg: rgba(167,139,250,.15);  --card-glow: radial-gradient(ellipse at 0% 0%, rgba(167,139,250,.07), transparent 60%); }
.mode-card[data-mode="wheel"]    { --icon-bg: rgba(6,214,160,.15);   --card-glow: radial-gradient(ellipse at 0% 0%, rgba(6,214,160,.07), transparent 60%); }
.mode-card[data-mode="checkin"]  { --icon-bg: rgba(6,214,160,.15);   --card-glow: radial-gradient(ellipse at 0% 0%, rgba(6,214,160,.07), transparent 60%); }
.mode-card[data-mode="ask"]      { --icon-bg: rgba(177,151,252,.15);  --card-glow: radial-gradient(ellipse at 0% 0%, rgba(177,151,252,.07), transparent 60%); }
.mode-card[data-mode="learn"]    { --icon-bg: rgba(255,209,102,.15); --card-glow: radial-gradient(ellipse at 0% 0%, rgba(255,209,102,.07), transparent 60%); }
.mode-card[data-mode="journal"]  { --icon-bg: rgba(167,139,250,.15);  --card-glow: radial-gradient(ellipse at 0% 0%, rgba(167,139,250,.07), transparent 60%); }

/* ---------- Active Mode Container ---------- */
.active-mode-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeSlideIn .4s ease;
  position: relative; z-index: 1;
}
body.show-landing .active-mode-container {
  display: none;
}

/* ---------- Controls Bar ---------- */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 8px 20px 16px;
  max-width: 800px;
  width: 100%;
}
.control-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  padding: 6px 12px;
  border-radius: 100px;
  box-shadow: var(--shadow-card);
  font-size: .85rem;
}
.control-group label {
  color: var(--text-soft);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.control-group select,
.control-group button {
  border: none;
  background: transparent;
  font: inherit;
  font-size: .85rem;
  color: var(--text);
  cursor: pointer;
  padding: 2px 4px;
}
.control-group select:focus,
.control-group button:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--surface);
  cursor: pointer;
  font-size: .95rem;
  transition: background .2s, transform .15s;
  flex-shrink: 0;
  opacity: .75;
}
.btn-icon:hover { background: var(--surface2); opacity: 1; transform: scale(1.08); }

/* ---------- Stats Bar ---------- */
.stats {
  display: flex;
  gap: 24px;
  justify-content: center;
  padding: 0 20px 16px;
  font-size: .9rem;
}
.stat {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
}
.stat-value {
  font-weight: 800;
  color: var(--text);
  min-width: 28px;
  text-align: center;
  font-size: .95rem;
}

/* ---------- Mode Tabs (hidden — replaced by landing grid) ---------- */
.mode-tabs {
  display: none;
}

/* ---------- Game Board (Classic Memory Grid) ---------- */
.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--card-size));
  gap: var(--grid-gap);
  justify-content: center;
  padding: 0 20px 32px;
  max-width: 800px;
  width: 100%;
  perspective: 1200px;
}

/* ---------- Card ---------- */
.card {
  width: var(--card-size);
  height: calc(var(--card-size) * 1.35);
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.card.flipped { transform: rotateY(180deg); }
.card.matched {
  transform: rotateY(180deg);
  cursor: default;
}
.card.matched .card-front {
  box-shadow: 0 0 0 3px var(--emotion-color, var(--accent)), var(--shadow);
}
.card.hint {
  animation: hint-pulse .6s ease;
}

.card-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  transition: box-shadow var(--transition);
}

/* --- Back --- */
.card-back {
  background: var(--card-back);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-back::before {
  content: '💛';
  font-size: 2rem;
  opacity: .25;
}
.card-back-pattern {
  position: absolute;
  inset: 6px;
  border: 1.5px solid var(--card-back-pattern);
  border-radius: calc(var(--radius) - 4px);
  pointer-events: none;
}

.card:not(.flipped):not(.matched):hover .card-back {
  box-shadow: var(--shadow-hover);
  transform: scale(1.02);
}

/* --- Front --- */
.card-front {
  background: var(--bg-card);
  box-shadow: var(--shadow);
  transform: rotateY(180deg);
  overflow: hidden;
}
/* Emotion gradient overlay on card front */
.card-front::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--emotion-color, transparent), transparent 70%);
  opacity: .18;
  pointer-events: none;
  z-index: 0;
}
.card-art-bg {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
  pointer-events: none;
}
.card-art-bg svg {
  width: 100%;
  height: 100%;
  display: block;
}
.card-emoji {
  font-size: 2rem;
  line-height: 1;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.card-word {
  font-family: var(--font-display);
  font-size: clamp(.72rem, 2.2vw, .88rem);
  font-weight: 700;
  font-style: normal;
  margin-top: 6px;
  text-align: center;
  color: var(--emotion-color, var(--text));
  line-height: 1.2;
  position: relative;
  z-index: 1;
  text-shadow: 0 0 6px var(--bg-card), 0 0 12px var(--bg-card), 0 1px 2px rgba(0,0,0,.15);
}
body.dark-mode .card-word {
  text-shadow: 0 0 6px var(--bg-card), 0 0 12px var(--bg-card), 0 1px 3px rgba(0,0,0,.5);
}
.card.matched .card-front {
  box-shadow: 0 0 0 3px var(--emotion-color, var(--accent)), 0 0 16px var(--emotion-color, var(--accent)), var(--shadow);
  animation: matched-glow 2s ease infinite;
}
@keyframes matched-glow {
  0%, 100% { box-shadow: 0 0 0 3px var(--emotion-color, var(--accent)), 0 0 8px var(--emotion-color, var(--accent)), var(--shadow); }
  50% { box-shadow: 0 0 0 3px var(--emotion-color, var(--accent)), 0 0 20px var(--emotion-color, var(--accent)), var(--shadow); }
}
.card-lang-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: .7rem;
  opacity: .6;
  z-index: 1;
}
.card-culture-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: .6rem;
  opacity: .5;
  transition: opacity .2s;
  z-index: 1;
}
.card.flipped .card-culture-badge,
.card.matched .card-culture-badge {
  opacity: .8;
}

/* --- Speaker button on card --- */
.card-speak-btn {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: none;
  background: var(--accent-light);
  border-radius: 50%;
  font-size: .7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s, background .2s;
  z-index: 2;
}
.card.flipped .card-speak-btn,
.card.matched .card-speak-btn {
  opacity: .7;
}
.card-speak-btn:hover {
  opacity: 1 !important;
  background: var(--accent);
}

/* ---------- Prompt Overlay (pair found) ---------- */
.prompt-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.prompt-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.prompt-card {
  background: var(--bg-card);
  border-radius: 24px;
  padding: 32px;
  max-width: 420px;
  width: calc(100% - 40px);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px var(--border);
  transform: translateY(24px) scale(.96);
  transition: transform .35s var(--easing-spring);
}
.prompt-overlay.visible .prompt-card {
  transform: translateY(0) scale(1);
}
.prompt-emoji {
  font-size: 3rem;
  margin-bottom: 8px;
}
.prompt-word-de {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
}
.prompt-word-vi {
  font-size: 1.1rem;
  color: var(--text-soft);
  margin-top: 2px;
}
.prompt-divider {
  width: 48px;
  height: 2px;
  background: var(--accent);
  margin: 16px auto;
  border-radius: 1px;
}
.prompt-question {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 8px;
}
.prompt-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.prompt-close {
  margin-top: 20px;
  padding: 10px 32px;
  border: none;
  border-radius: 100px;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: var(--transition);
}

/* ---------- Speak button in overlays ---------- */
.speak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--accent-light);
  border-radius: 50%;
  cursor: pointer;
  font-size: .9rem;
  margin-left: 8px;
  vertical-align: middle;
  transition: background .2s;
}
.speak-btn:hover {
  background: var(--accent);
}

/* ---------- Congrats Screen ---------- */
.congrats-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.congrats-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.congrats-card {
  background: var(--bg-card);
  border-radius: 24px;
  padding: 40px 32px;
  max-width: 400px;
  width: calc(100% - 40px);
  text-align: center;
  box-shadow: 0 16px 48px rgba(45,42,38,.2);
}
.congrats-title {
  font-size: 2rem;
  margin-bottom: 8px;
}
.congrats-text {
  color: var(--text-soft);
  font-size: 1rem;
  margin-bottom: 4px;
}
.congrats-stats {
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 16px;
}

/* --- Star Rating --- */
.congrats-stars {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.congrats-star {
  font-size: 2.2rem;
  opacity: 0;
  transform: scale(0) rotate(-30deg);
  animation: star-pop .5s cubic-bezier(.4,0,.2,1) forwards;
}
.congrats-star.earned {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(246,195,68,.5);
}
.congrats-star.empty {
  color: var(--text-soft);
  opacity: .25;
}
.congrats-star:nth-child(1) { animation-delay: .1s; }
.congrats-star:nth-child(2) { animation-delay: .3s; }
.congrats-star:nth-child(3) { animation-delay: .5s; }

@keyframes star-pop {
  0% { opacity: 0; transform: scale(0) rotate(-30deg); }
  60% { opacity: 1; transform: scale(1.3) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.congrats-best {
  font-size: .85rem;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 8px;
}

.congrats-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn {
  padding: 12px 28px;
  min-height: 48px;
  border: none;
  border-radius: 100px;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: var(--transition);
}
.btn-primary {
  background: var(--accent-coral);
  color: #fff;
}
.btn-primary:hover { opacity: .85; transform: translateY(-1px); }
.btn-secondary {
  background: var(--accent-light);
  color: var(--text);
}
.btn-secondary:hover { background: var(--accent); }

/* ---------- Multiplayer ---------- */
.multiplayer-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}
.multiplayer-toggle select {
  border: none;
  background: transparent;
  font: inherit;
  font-size: .85rem;
  color: var(--text);
  cursor: pointer;
}

.player-setup {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  max-width: 400px;
  width: 100%;
}
.player-setup.active { display: flex; }
.player-setup input {
  width: 100%;
  padding: 10px 16px;
  border: 2px solid var(--card-back);
  border-radius: 100px;
  font: inherit;
  font-size: .9rem;
  background: var(--bg-card);
  color: var(--text);
  text-align: center;
  transition: border-color .2s;
}
.player-setup input:focus {
  outline: none;
  border-color: var(--accent);
}
.player-setup .btn { margin-top: 4px; }

.turn-indicator {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 20px 16px;
  font-size: .9rem;
  flex-wrap: wrap;
}
.turn-indicator.active { display: flex; }
.player-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  font-size: .85rem;
  transition: var(--transition);
}
.player-badge.current {
  box-shadow: 0 0 0 2px var(--player-color, var(--accent));
  transform: scale(1.05);
}
.player-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--player-color, var(--accent));
}
.player-score {
  font-weight: 800;
}

/* Multiplayer pass-device overlay */
.pass-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 180;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.pass-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.pass-card {
  background: var(--bg-card);
  border-radius: 24px;
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(45,42,38,.2);
}
.pass-card .pass-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.pass-card .pass-hint {
  color: var(--text-soft);
  font-size: .9rem;
}

/* Multiplayer scoreboard in congrats */
.congrats-scoreboard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.scoreboard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--accent-light);
  font-size: .95rem;
}
.scoreboard-row.winner {
  background: var(--accent);
  font-weight: 700;
}
.scoreboard-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Talk Mode ---------- */
.talk-mode {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  max-width: 480px;
  width: 100%;
}
.talk-mode.active { display: flex; }
.talk-card-display {
  width: 200px;
  height: 270px;
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow-hover);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  transition: var(--transition);
}
.talk-card-display .card-emoji { font-size: 3.5rem; }
.talk-card-display .card-word { font-size: 1.3rem; margin-top: 12px; }
.talk-card-display .card-word-secondary {
  font-size: 1rem;
  color: var(--text-soft);
  margin-top: 4px;
}
.talk-prompt {
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: center;
  color: var(--text);
  max-width: 360px;
}
.draw-btn {
  padding: 14px 36px;
  border: none;
  border-radius: 100px;
  background: var(--accent-coral);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
  min-height: 48px;
}
.draw-btn:hover { opacity: .85; transform: translateY(-2px); }

/* ---------- Story Mode ---------- */
.story-mode {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  max-width: 560px;
  width: 100%;
}
.story-mode.active { display: flex; }
.story-cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.story-card {
  width: 120px;
  height: 162px;
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.story-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.story-card .card-emoji { font-size: 2rem; }
.story-card .card-word { font-size: .8rem; margin-top: 6px; }
.story-intro {
  font-size: 1rem;
  color: var(--text-soft);
  text-align: center;
}

/* ---------- Print Deck ---------- */
.print-section {
  display: none;
  padding: 20px;
}
@media print {
  body { background: #fff; }
  .header, .controls, .stats, .mode-tabs, .landing-screen, .settings-bar,
  .prompt-overlay, .congrats-overlay { display: none !important; }
  .print-section {
    display: block !important;
    break-inside: avoid;
  }
  .print-grid {
    display: grid;
    grid-template-columns: repeat(4, 60mm);
    gap: 4mm;
  }
  .print-card {
    width: 60mm;
    height: 84mm;
    border: .5mm solid #ccc;
    border-radius: 4mm;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    page-break-inside: avoid;
    padding: 4mm;
    text-align: center;
  }
  .print-card .emoji { font-size: 36pt; }
  .print-card .word-primary { font-size: 14pt; font-weight: 700; margin-top: 3mm; }
  .print-card .word-secondary { font-size: 11pt; color: #666; margin-top: 1mm; }
  .print-card .prompt { font-size: 8pt; color: #999; margin-top: 4mm; font-style: italic; }
}

/* ---------- Check-in Mode ---------- */
.checkin-mode {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0 20px 32px;
  max-width: 700px;
  width: 100%;
}
.checkin-mode.active { display: flex; }
.checkin-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-align: center;
}
.checkin-subtitle {
  color: var(--text-soft);
  text-align: center;
  font-size: .95rem;
  margin-top: -8px;
}
.checkin-dimensions {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}
.checkin-dimension {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: box-shadow .3s ease;
}
.checkin-dimension:hover {
  box-shadow: var(--shadow);
}
.dim-title {
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.dim-question {
  font-size: .85rem;
  color: var(--text-soft);
  font-style: italic;
  margin-bottom: 12px;
}
.dim-needs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.need-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 2px solid var(--card-back);
  border-radius: 100px;
  background: var(--bg-card);
  cursor: pointer;
  font: inherit;
  font-size: .82rem;
  color: var(--text);
  transition: var(--transition);
  position: relative;
  min-height: 44px;
}
.need-btn:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}
.need-btn.selected {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 0 0 1px var(--accent);
}
.need-emoji { font-size: 1.1rem; }
.need-label { font-weight: 600; }
.need-label-secondary {
  font-size: .72rem;
  color: var(--text-soft);
}
.dim-chosen { margin-top: 8px; min-height: 1px; }
.checkin-summary {
  text-align: center;
  padding: 20px;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  width: 100%;
}
.checkin-done-text {
  font-size: 1.1rem;
  margin-bottom: 12px;
}
.checkin-chosen-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}
.chosen-tag {
  background: var(--accent-light);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: .85rem;
  font-weight: 600;
}
.checkin-reset {
  font-size: .85rem !important;
  padding: 10px 24px !important;
}

/* ---------- Emotion Wheel Mode ---------- */
.wheel-mode {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  max-width: 600px;
  width: 100%;
}
.wheel-mode.active { display: flex; }
.wheel-intro {
  font-size: 1.05rem;
  color: var(--text-soft);
  text-align: center;
  letter-spacing: .02em;
}
.wheel-svg-container {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1;
  position: relative;
}
.wheel-svg-container svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Spin-in entrance */
.wheel-svg-container svg.wheel-spin-in {
  animation: wheelSpinIn .7s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes wheelSpinIn {
  0%   { transform: rotate(-120deg) scale(.3); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: rotate(0deg) scale(1); opacity: 1; }
}

/* Segments */
.wheel-segment {
  cursor: pointer;
  transition: transform .35s cubic-bezier(.4,0,.2,1), filter .35s ease, opacity .35s ease;
  transform-origin: 250px 250px;
}
.wheel-segment:hover {
  transform: scale(1.05);
  filter: brightness(1.15) saturate(1.2);
  opacity: 1 !important;
}
.wheel-segment:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Category label — always visible at low opacity, full on hover */
.wheel-cat-name {
  font-size: 9px;
  font-weight: 700;
  pointer-events: none;
  opacity: 0.45;
  transition: opacity .3s ease, font-size .2s ease;
  font-family: var(--font);
  letter-spacing: .03em;
}
.wheel-cat-name-always {
  opacity: 0.5;
}
.wheel-segment-group:hover .wheel-cat-name,
.wheel-segment-group:focus-within .wheel-cat-name {
  opacity: 1;
}

/* Category emoji in center of segment */
.wheel-cat-emoji {
  pointer-events: none;
  opacity: .75;
  transition: opacity .3s ease, transform .3s ease;
  transform-origin: center;
}
.wheel-segment-group:hover .wheel-cat-emoji {
  opacity: 1;
}

/* Decorative patterns */
.wheel-deco {
  pointer-events: none;
  opacity: .15;
  transition: opacity .3s ease;
}
.wheel-segment-group:hover .wheel-deco {
  opacity: .3;
}

/* Emotion emoji dots */
.wheel-emoji-dot {
  cursor: pointer;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s ease, opacity .3s ease;
  transform-origin: center;
  opacity: 0.12;
}
/* Reveal dots when hovering or touching the segment group */
.wheel-segment-group:hover .wheel-emoji-dot,
.wheel-segment-group:focus-within .wheel-emoji-dot { opacity: 0.82; }
.wheel-emoji-dot:nth-child(odd)  { animation-delay: -1.5s; }
.wheel-emoji-dot:nth-child(3n)   { animation-delay: -0.7s; }
.wheel-emoji-dot:nth-child(5n)   { animation-delay: -2.2s; }
.wheel-emoji-dot:nth-child(7n)   { animation-delay: -3.1s; }

.wheel-emoji-dot:hover,
.wheel-emoji-dot:focus-visible {
  transform: scale(1.6);
  filter: drop-shadow(0 0 8px rgba(246,195,68,.8)) drop-shadow(0 0 16px rgba(246,195,68,.4));
  opacity: 1;
  z-index: 10;
  animation-play-state: paused;
}
.wheel-emoji-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 50%;
}

@keyframes emojiFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  45%      { transform: translateY(-5px) scale(1.04); }
  55%      { transform: translateY(-4px) scale(1.03); }
}

/* Tooltip */
.wheel-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--bg-card2);
  color: var(--text);
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  padding: 7px 14px;
  font-size: .88rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 1px var(--border);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px) scale(.95);
  transition: opacity .18s ease, transform .18s var(--easing-spring);
  z-index: 100;
  backdrop-filter: blur(8px);
}
.wheel-tooltip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Center circle */
.wheel-center-circle {
  transition: filter .3s ease;
}
.wheel-center-text {
  fill: var(--text-soft);
  pointer-events: none;
  transition: fill .3s ease;
  font-family: var(--font);
}
.wheel-center-emoji {
  pointer-events: none;
}

/* Gentle center pulse — subtle, not distracting */
.wheel-center-pulse {
  animation: centerPulse 4s ease-in-out infinite;
  transform-origin: 250px 250px;
}
@keyframes centerPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* Dot click animation */
.wheel-emoji-dot.wheel-dot-selected {
  animation: dotZoomCenter .4s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes dotZoomCenter {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.8); }
  100% { transform: scale(1.3); }
}

/* Dark mode enhancements */
body.dark-mode .wheel-segment:hover {
  filter: brightness(1.15);
}
body.dark-mode .wheel-emoji-dot:hover {
  filter: drop-shadow(0 0 10px rgba(246,195,68,.8));
}
body.dark-mode .wheel-cat-name {
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
body.dark-mode .wheel-deco {
  opacity: .08;
}
body.dark-mode .wheel-segment-group:hover .wheel-deco {
  opacity: .18;
}
@media (prefers-color-scheme: dark) {
  body:not(.light-mode) .wheel-segment:hover {
    filter: brightness(1.15);
  }
  body:not(.light-mode) .wheel-emoji-dot:hover {
    filter: drop-shadow(0 0 10px rgba(246,195,68,.8));
  }
  body:not(.light-mode) .wheel-deco {
    opacity: .08;
  }
  body:not(.light-mode) .wheel-segment-group:hover .wheel-deco {
    opacity: .18;
  }
}

/* Responsive */
@media (max-width: 600px) {
  .wheel-svg-container {
    max-width: 90vw;
  }
  .wheel-emoji-dot {
    font-size: 16px;
  }
}

/* ---------- Footer ---------- */
.footer {
  margin-top: auto;
  padding: 32px 20px 20px;
  text-align: center;
  font-size: .75rem;
  color: var(--text-soft);
  opacity: .6;
}
.footer p { margin: 0; }
.footer a {
  color: var(--text-soft);
  text-decoration: none;
}
.footer a:hover { text-decoration: underline; }

/* ---------- Dismiss Bar (no match) ---------- */
.dismiss-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(45,42,38,.92);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 90;
  transform: translateY(100%);
  transition: transform .3s ease;
  backdrop-filter: blur(8px);
}
.dismiss-bar.visible {
  transform: translateY(0);
}
.dismiss-hint {
  font-size: .95rem;
}
.dismiss-tip {
  font-size: .8rem;
  opacity: .6;
  font-style: italic;
}

/* ---------- Card Hint Overlay ---------- */
.card-hint-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.card-hint-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.card-hint-card {
  background: var(--bg-card);
  border-radius: 24px;
  padding: 28px 24px;
  max-width: 340px;
  width: calc(100% - 40px);
  text-align: center;
  box-shadow: 0 16px 48px rgba(45,42,38,.2);
  transform: translateY(16px);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.card-hint-overlay.visible .card-hint-card {
  transform: translateY(0);
}
.hint-emoji {
  font-size: 3rem;
  margin-bottom: 12px;
}
.hint-words {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.hint-word-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.1rem;
}
.hint-flag {
  font-size: .9rem;
}
.hint-category {
  font-size: .8rem;
  color: var(--text-soft);
  margin-bottom: 12px;
}
.hint-divider {
  width: 48px;
  height: 2px;
  background: var(--accent);
  margin: 0 auto 12px;
  border-radius: 1px;
}
.hint-prompt {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  font-style: italic;
}
.hint-culture {
  margin-top: 4px;
  text-align: left;
}
.hint-culture-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
  margin-bottom: 6px;
}
.hint-culture-text {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--text-soft);
  background: var(--accent-light);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}
.hint-close-tip {
  margin-top: 16px;
  font-size: .75rem;
  color: var(--text-soft);
  opacity: .6;
}

/* ---------- Animations ---------- */
@keyframes hint-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes card-appear {
  from { opacity: 0; transform: scale(.8) rotateY(0); }
  to { opacity: 1; transform: scale(1) rotateY(0); }
}
.card {
  animation: card-appear .4s ease backwards;
}
.card:nth-child(2) { animation-delay: .03s; }
.card:nth-child(3) { animation-delay: .06s; }
.card:nth-child(4) { animation-delay: .09s; }
.card:nth-child(5) { animation-delay: .12s; }
.card:nth-child(6) { animation-delay: .15s; }
.card:nth-child(7) { animation-delay: .18s; }
.card:nth-child(8) { animation-delay: .21s; }
.card:nth-child(9) { animation-delay: .24s; }
.card:nth-child(10) { animation-delay: .27s; }

@keyframes turn-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--player-color, var(--accent)); }
  50% { box-shadow: 0 0 0 4px var(--player-color, var(--accent)), 0 0 12px var(--player-color, var(--accent)); }
}
.player-badge.current {
  animation: turn-pulse 1.5s ease infinite;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  :root {
    --card-size: 85px;
    --grid-gap: 8px;
  }
  .header h1 { font-size: 1.3rem; }
  .header .subtitle { font-size: .8rem; }
  .stats { gap: 16px; font-size: .82rem; }
  .control-group { padding: 5px 10px; font-size: .8rem; }
  .card-word { font-size: .72rem; }
  .card-emoji { font-size: 1.5rem; }
  .prompt-card { padding: 24px 20px; }
  .mode-tab { padding: 6px 14px; font-size: .8rem; }

  /* Landing: single column */
  .landing-title { font-size: 2rem; }
  .landing-subtitle { font-size: .88rem; }
  .mode-group-cards {
    grid-template-columns: 1fr;
  }
  .mode-grid-primary,
  .more-modes-grid {
    grid-template-columns: 1fr;
  }
  .mode-card {
    flex-direction: row;
    padding: 16px;
    gap: 12px;
    text-align: left;
  }
  .mode-card-icon { font-size: 1.6rem; margin-bottom: 0; }
  .mode-card-name { font-size: .95rem; }
  .mode-card-desc { font-size: .75rem; }
  .settings-bar { max-width: 100%; }
  .btn-back {
    position: relative;
    left: auto;
    top: auto;
    margin-right: auto;
  }
}

@media (max-width: 380px) {
  :root {
    --card-size: 72px;
    --grid-gap: 6px;
  }
  .card-word { font-size: .65rem; }
}

@media (min-width: 601px) and (max-width: 900px) {
  /* Tablet: 2 columns */
  .mode-group-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  :root {
    --card-size: 120px;
    --grid-gap: 14px;
  }
}

@media (min-width: 901px) {
  /* Desktop: 3 columns */
  .mode-group-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Settings Modal ---------- */
.settings-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.settings-modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.settings-modal {
  background: var(--bg-card);
  border-radius: 24px;
  padding: 32px 28px;
  max-width: 400px;
  width: calc(100% - 40px);
  box-shadow: 0 16px 48px rgba(45,42,38,.2);
}
.settings-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin-bottom: 12px;
  text-align: center;
}
.settings-hint {
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: .85rem;
  margin-bottom: 16px;
  text-align: center;
  line-height: 1.4;
}
.settings-help {
  display: block;
  font-size: .75rem;
  color: var(--text-soft);
  margin-top: 4px;
  line-height: 1.4;
}
.settings-help a { text-decoration: underline; }
.settings-field {
  margin-bottom: 16px;
}
.settings-field label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.settings-input, .settings-select {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--card-back);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  transition: border-color .2s;
}
.settings-input:focus, .settings-select:focus {
  outline: none;
  border-color: var(--accent);
}
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.settings-toggle-row label { margin-bottom: 0; }
.settings-toggle {
  padding: 6px 18px;
  border: 2px solid var(--card-back);
  border-radius: 100px;
  background: var(--bg);
  color: var(--text-soft);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}
.settings-toggle.on {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
}
.settings-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

/* ---------- AI Culture Insight in Hints ---------- */
.ai-culture-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  border: 2px solid var(--accent);
  border-radius: 100px;
  background: var(--accent-light);
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
  transition: var(--transition);
}
.ai-culture-btn:hover {
  background: var(--accent);
  color: #fff;
}
.ai-culture-btn:disabled {
  opacity: .5;
  cursor: wait;
}
.ai-insight-box {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-soft);
}
.ai-setup-hint {
  margin-top: 10px;
  font-size: .75rem;
  color: var(--text-soft);
  opacity: .7;
  font-style: italic;
}
.ai-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Journal Mode ---------- */
.journal-mode {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0 20px 32px;
  max-width: 700px;
  width: 100%;
}
.journal-mode.active { display: flex; }
.journal-date {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-soft);
}
.journal-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-align: center;
}
.journal-categories {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.journal-cat-section {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.journal-cat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 700;
  font-size: .95rem;
  border-left: 4px solid var(--cat-color, var(--accent));
  transition: background .2s;
  min-height: 44px;
}
.journal-cat-header:hover { background: var(--accent-light); }
.journal-cat-header .arrow {
  margin-left: auto;
  transition: transform .2s;
  font-size: .7rem;
  color: var(--text-soft);
}
.journal-cat-section.open .journal-cat-header .arrow { transform: rotate(90deg); }
.journal-cat-emotions {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 14px;
}
.journal-cat-section.open .journal-cat-emotions { display: flex; }
.journal-emo-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 2px solid var(--card-back);
  border-radius: 100px;
  background: var(--bg-card);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
  transition: var(--transition);
  color: var(--text);
  min-height: 44px;
}
.journal-emo-btn:hover { border-color: var(--accent); background: var(--accent-light); }
.journal-emo-btn.selected {
  border-color: var(--cat-color, var(--accent));
  background: var(--accent-light);
  box-shadow: 0 0 0 1px var(--cat-color, var(--accent));
}
.journal-note-field {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--card-back);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  resize: vertical;
  min-height: 60px;
  transition: border-color .2s;
}
.journal-note-field:focus { outline: none; border-color: var(--accent); }
.journal-save-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.journal-saved-msg {
  color: var(--accent);
  font-weight: 700;
  font-size: .9rem;
  opacity: 0;
  transition: opacity .3s;
}
.journal-saved-msg.show { opacity: 1; }

/* Journal Heatmap */
.journal-heatmap {
  width: 100%;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.journal-heatmap h4 {
  font-size: .85rem;
  color: var(--text-soft);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.heatmap-grid {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.heatmap-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-width: 40px;
}
.heatmap-cat-label {
  font-size: .7rem;
  color: var(--text-soft);
}
.heatmap-dots {
  display: flex;
  gap: 3px;
}
.heatmap-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: .2;
  transition: opacity .3s;
}
.heatmap-dot.active { opacity: .85; }

/* Journal History */
.journal-history {
  width: 100%;
}
.journal-history h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 12px;
}
.journal-entry-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
}
.journal-entry {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: var(--transition);
}
.journal-entry:hover { box-shadow: var(--shadow); }
.journal-entry-date {
  font-size: .75rem;
  color: var(--text-soft);
  margin-bottom: 4px;
}
.journal-entry-emojis {
  font-size: 1.2rem;
  margin-bottom: 4px;
}
.journal-entry-note {
  font-size: .85rem;
  color: var(--text-soft);
  display: none;
  margin-top: 8px;
  line-height: 1.5;
}
.journal-entry.expanded .journal-entry-note { display: block; }
.journal-entry-ai {
  margin-top: 10px;
  display: none;
}
.journal-entry.expanded .journal-entry-ai { display: block; }

/* Journal AI insight card */
.journal-ai-card {
  width: 100%;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  border-left: 4px solid var(--accent);
}
.journal-ai-card h4 {
  font-size: .9rem;
  margin-bottom: 8px;
}
.journal-ai-card p {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text-soft);
}

/* ==========================================================
   Learn / Flashcard Mode
   ========================================================== */

.learn-mode {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0 20px 32px;
  max-width: 700px;
  width: 100%;
}
.learn-mode.active { display: flex; }

/* -- Dashboard -- */
.learn-dashboard {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.learn-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-align: center;
}
.learn-subtitle {
  color: var(--text-soft);
  text-align: center;
  font-size: .95rem;
  margin-top: -12px;
}

/* Streak */
.learn-streak-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  padding: 10px 20px;
  border-radius: 100px;
  box-shadow: var(--shadow-card);
}
.learn-streak-fire { font-size: 1.4rem; }
.learn-streak-count {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
}
.learn-streak-label {
  font-size: .85rem;
  color: var(--text-soft);
}

/* Mastery bar */
.learn-mastery-bar {
  width: 100%;
  height: 24px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  background: var(--card-back);
  box-shadow: var(--shadow-card);
}
.learn-mastery-seg {
  height: 100%;
  transition: flex .5s ease;
  min-width: 2px;
}
.learn-mastery-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  font-size: .8rem;
  color: var(--text-soft);
}
.learn-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

/* Stats cards */
.learn-stats-row {
  display: flex;
  gap: 12px;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}
.learn-stat-card {
  flex: 1;
  min-width: 90px;
  max-width: 160px;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 12px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.learn-stat-number {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
}
.learn-stat-label {
  font-size: .75rem;
  color: var(--text-soft);
  margin-top: 2px;
}

/* Category breakdown */
.learn-cat-breakdown {
  width: 100%;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.learn-cat-breakdown h3 {
  font-size: .85rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 12px;
}
.learn-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.learn-cat-label {
  font-size: .82rem;
  min-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.learn-cat-bar-bg {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: var(--card-back);
  overflow: hidden;
}
.learn-cat-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width .5s ease;
}
.learn-cat-pct {
  font-size: .75rem;
  font-weight: 800;
  min-width: 32px;
  text-align: right;
  color: var(--text-soft);
}

/* Actions */
.learn-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.learn-export-btn {
  background: none;
  border: 2px solid var(--card-back);
  border-radius: 100px;
  padding: 8px 20px;
  font: inherit;
  font-size: .82rem;
  color: var(--text-soft);
  cursor: pointer;
  transition: var(--transition);
}
.learn-export-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* -- Quiz -- */
.learn-quiz {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Progress bar */
.learn-progress-bar-bg {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--card-back);
  overflow: hidden;
}
.learn-progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width .4s ease;
}

.learn-quiz-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--text-soft);
}
.learn-card-counter { font-weight: 800; }

.learn-quiz-type-label {
  font-size: .75rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Quiz prompt area */
.learn-quiz-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px;
  width: 100%;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.learn-big-emoji {
  font-size: 3.5rem;
  line-height: 1;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid var(--card-back);
}
.learn-prompt-word {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
}
.learn-prompt-hint {
  font-size: 1.8rem;
  opacity: .5;
}
.learn-scenario-text {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text);
  font-style: italic;
}
.learn-audio-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  background: var(--accent-light);
  font-size: 1.8rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.learn-audio-btn:hover {
  background: var(--accent);
  transform: scale(1.05);
}
.learn-audio-hint { font-size: 2.5rem; }

/* Answer grid */
.learn-answer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.learn-answer-grid-6 {
  grid-template-columns: 1fr 1fr 1fr;
}
.learn-answer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 52px;
  padding: 12px 10px;
  border: 2px solid var(--card-back);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font: inherit;
  font-size: .9rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.learn-answer-btn:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  transform: translateY(-1px);
}
.learn-answer-btn .answer-emoji {
  font-size: 1.3rem;
}
.learn-answer-btn .answer-word {
  font-weight: 600;
}

/* Correct / Wrong animations */
.learn-answer-btn.answer-correct {
  border-color: #27AE60;
  background: #D5F5E3;
  animation: correctPulse .5s ease;
}
.learn-answer-btn.answer-wrong {
  border-color: #E74C3C;
  background: #FADBD8;
  animation: wrongShake .4s ease;
}
body.dark-mode .learn-answer-btn.answer-correct {
  background: #1a3d2a;
  border-color: #27AE60;
}
body.dark-mode .learn-answer-btn.answer-wrong {
  background: #3d1a1a;
  border-color: #E74C3C;
}

@keyframes correctPulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* Feedback strip */
.learn-feedback {
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  text-align: center;
  animation: feedbackFade .3s ease;
}
.learn-feedback-correct { background: #D5F5E3; color: #1a6b38; }
.learn-feedback-wrong { background: #FADBD8; color: #922b21; }
body.dark-mode .learn-feedback-correct { background: #1a3d2a; color: #7dcea0; }
body.dark-mode .learn-feedback-wrong { background: #3d1a1a; color: #f1948a; }

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

/* -- Summary -- */
.learn-summary {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 32px 24px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.learn-summary-emoji { font-size: 3rem; }
.learn-summary h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
}
.learn-summary-score {
  font-size: 1.2rem;
  color: var(--text);
}
.learn-summary-details {
  display: flex;
  gap: 20px;
  font-size: .9rem;
  color: var(--text-soft);
}
.learn-summary-upgrades {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  width: 100%;
}
.learn-upgrade-item {
  font-size: .85rem;
  font-weight: 600;
}
.learn-exercise {
  width: 100%;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  text-align: left;
}
.learn-exercise h4 {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
  margin-bottom: 6px;
}
.learn-exercise p {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text);
}
.learn-summary-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

/* -- Responsive -- */
@media (max-width: 600px) {
  .learn-answer-grid-6 { grid-template-columns: 1fr 1fr; }
  .learn-cat-label { min-width: 90px; font-size: .75rem; }
  .learn-big-emoji { font-size: 2.8rem; width: 64px; height: 64px; }
  .learn-prompt-word { font-size: 1.2rem; }
  .learn-stat-card { min-width: 80px; padding: 10px 8px; }
  .learn-stat-number { font-size: 1.1rem; }
}


/* ==========================================================
   Fun Facts — "Wusstest du?" Button + Modal
   ========================================================== */

/* ── Landing Button ── */
.btn-funfact {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px auto 0;
  padding: 9px 20px;
  background: var(--accent-light);
  color: var(--text);
  border: 1.5px solid var(--accent);
  border-radius: 24px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  letter-spacing: .01em;
}
.btn-funfact:hover {
  background: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}
.btn-funfact-icon {
  font-size: 1.1rem;
  animation: ffPulse 2.5s ease-in-out infinite;
}
@keyframes ffPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.18); }
}

/* ── Overlay ── */
.ff-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.ff-overlay.ff-visible {
  opacity: 1;
  pointer-events: all;
}

/* ── Modal Card ── */
.ff-modal {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: 0 16px 60px rgba(0,0,0,.22);
  max-width: 480px;
  width: 100%;
  padding: 28px 28px 20px;
  position: relative;
  transform: translateY(20px) scale(.97);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  max-height: 90dvh;
  overflow-y: auto;
}
.ff-overlay.ff-visible .ff-modal {
  transform: translateY(0) scale(1);
}

/* ── Close button ── */
.ff-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-light);
  border: none;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  transition: background var(--transition);
}
.ff-close:hover { background: var(--accent); color: var(--text); }

/* ── Fact card content ── */
.ff-card {
  transition: opacity .18s ease;
}
.ff-card.ff-fade-out { opacity: 0; }

.ff-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ff-lang {
  font-size: .85rem;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.ff-word {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 6px;
}
.ff-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.ff-body {
  font-size: .9rem;
  line-height: 1.65;
  color: var(--text-soft);
  margin-bottom: 14px;
}
.ff-wow {
  background: var(--accent-light);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 14px;
  margin-bottom: 4px;
}
.ff-wow-label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-coral);
  margin-bottom: 5px;
}
.ff-wow p {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--text);
}

/* ── Navigation ── */
.ff-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 18px;
}
.ff-prev, .ff-next {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-light);
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: background var(--transition), transform var(--transition);
}
.ff-prev:hover, .ff-next:hover {
  background: var(--accent);
  transform: scale(1.1);
}
.ff-counter {
  font-size: .85rem;
  color: var(--text-soft);
  min-width: 48px;
  text-align: center;
}
.ff-cta {
  text-align: center;
  font-size: .8rem;
  color: var(--text-soft);
  margin-top: 14px;
  font-style: italic;
}

/* ── Dark mode ── */
body.dark-mode .ff-wow,
body:not(.light-mode) .ff-wow { background: var(--accent-light); }

/* ── Stats Widget ── */
.stats-widget {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 18px;
  margin: 0 auto 16px;
  max-width: 360px;
  text-align: center;
}
.sw-inner { display: flex; flex-direction: column; gap: 6px; }
.sw-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.sw-num { font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.sw-label { font-size: .85rem; color: var(--text-soft); }
.sw-streak { font-size: .8rem; background: var(--accent-light); padding: 2px 10px; border-radius: 20px; }
.sw-emotions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sw-tag { font-size: .78rem; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px; }
.sw-tag em { color: var(--text-soft); font-style: normal; }

/* ── Backend Status Indicator ── */
.backend-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  position: fixed;
  bottom: 14px;
  right: 14px;
  opacity: 0;
  transition: opacity .4s, background .4s;
  z-index: 100;
}
.backend-status.online  { background: #4CAF50; opacity: 1; }
.backend-status.offline { background: #aaa;    opacity: .5; }

/* ── Share Toast ── */
.share-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: var(--bg);
  padding: 10px 22px;
  border-radius: 30px;
  font-size: .88rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 1000;
}
.share-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Prompt share button ── */
.prompt-share {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 0;
}
.prompt-share:hover { background: var(--accent-light); transform: scale(1.1); }

/* ── Ask Mode ── */
.ask-mode {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 220px);
  min-height: 400px;
  padding: 0 0 8px;
}
.ask-intro {
  font-size: .9rem;
  color: var(--text-soft);
  text-align: center;
  margin-bottom: 10px;
}
.ask-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin-bottom: 14px;
}
.ask-example-chip {
  background: var(--accent-light);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 13px;
  font-size: .78rem;
  cursor: pointer;
  color: var(--text);
  transition: background var(--transition), transform var(--transition);
  text-align: left;
}
.ask-example-chip:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.ask-chat {
  flex: 1;
  overflow-y: auto;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}
.ask-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-width: 90%;
  animation: fadeSlideUp .2s ease;
}
.ask-msg-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.ask-msg-user .ask-msg-text {
  background: var(--accent);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
}
.ask-msg-ai .ask-msg-text {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px 18px 18px 4px;
}
.ask-msg-text {
  padding: 10px 14px;
  font-size: .9rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.ask-msg-icon { font-size: 1.2rem; margin-top: 6px; flex-shrink: 0; }
.ask-input-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.ask-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 24px;
  background: var(--card-bg);
  color: var(--text);
  font-size: .9rem;
  outline: none;
  transition: border-color var(--transition);
}
.ask-input:focus { border-color: var(--accent); }
.ask-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition), transform var(--transition);
}
.ask-send-btn:hover { background: var(--accent-dark, #e6b800); transform: scale(1.05); }
.ask-send-btn:disabled { opacity: .5; cursor: default; }

/* Typing dots for ask mode */
.ask-dots { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
.ask-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-soft);
  animation: askDot 1.2s infinite ease-in-out;
}
.ask-dots span:nth-child(2) { animation-delay: .2s; }
.ask-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes askDot { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* ── Talk Mode AI ── */
.talk-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}
.btn-deep-question {
  background: var(--card-bg);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  border-radius: 24px;
  padding: 9px 18px;
  font-size: .88rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.btn-deep-question:hover { background: var(--accent); color: #fff; }
.btn-deep-question:disabled { opacity: .5; cursor: default; }
.talk-deep-result {
  margin-top: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--accent-light);
  font-size: .92rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--text);
  display: none;
  animation: fadeSlideUp .25s ease;
}
.talk-deep-result.visible { display: block; }

/* ── Story Mode AI ── */
.story-ai-panel { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.btn-story-starter, .btn-story-feedback {
  align-self: center;
  background: var(--card-bg);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  border-radius: 24px;
  padding: 9px 20px;
  font-size: .88rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.btn-story-starter:hover, .btn-story-feedback:hover { background: var(--accent); color: #fff; }
.btn-story-starter:disabled, .btn-story-feedback:disabled { opacity: .5; cursor: default; }
.story-ai-starter {
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--accent-light);
  font-size: .95rem;
  line-height: 1.7;
  font-style: italic;
  display: none;
  animation: fadeSlideUp .25s ease;
}
.story-ai-starter.visible { display: block; }
.story-write-area { display: flex; flex-direction: column; gap: 10px; }
.story-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  color: var(--text);
  font-size: .9rem;
  line-height: 1.6;
  resize: vertical;
  font-family: inherit;
}
.story-textarea:focus { outline: none; border-color: var(--accent); }
.story-feedback-result {
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  font-size: .9rem;
  line-height: 1.6;
  display: none;
  animation: fadeSlideUp .25s ease;
}
.story-feedback-result.visible { display: block; }

/* ── Check-in AI ── */
.btn-checkin-reflection {
  background: var(--card-bg);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  border-radius: 24px;
  padding: 9px 20px;
  font-size: .88rem;
  cursor: pointer;
  margin-top: 10px;
  transition: background var(--transition), color var(--transition);
}
.btn-checkin-reflection:hover { background: var(--accent); color: #fff; }
.btn-checkin-reflection:disabled { opacity: .5; cursor: default; }
.checkin-reflection-box {
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--accent-light);
  font-size: .92rem;
  line-height: 1.65;
  display: none;
  animation: fadeSlideUp .25s ease;
}
.checkin-reflection-box.visible { display: block; }

/* ── Journal Follow-up Question ── */
.journal-follow-up {
  margin-top: 14px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: var(--accent-light);
  border-radius: 0 10px 10px 0;
}
.follow-up-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
  margin-bottom: 6px;
}
.journal-follow-up p { margin: 0; font-size: .92rem; line-height: 1.6; font-style: italic; }

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

/* ── Onboarding Overlay ── */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s ease;
  padding: 16px;
}
.onboarding-overlay.visible { opacity: 1; }
.onboarding-card {
  background: var(--card-bg);
  border-radius: 24px;
  padding: 32px 28px 24px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  transform: translateY(20px);
  transition: transform .3s ease;
  box-shadow: 0 24px 64px rgba(0,0,0,.2);
}
.onboarding-overlay.visible .onboarding-card { transform: translateY(0); }
.onboarding-emoji { font-size: 2.5rem; margin-bottom: 8px; }
.onboarding-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 6px; }
.onboarding-subtitle { color: var(--text-soft); font-size: .95rem; margin: 0 0 22px; }
.onboarding-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.onboarding-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 12px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.onboarding-btn:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  transform: translateY(-2px);
}
.onboarding-btn-icon { font-size: 1.8rem; }
.onboarding-btn-name { font-size: .95rem; font-weight: 600; }
.onboarding-btn-desc { font-size: .75rem; color: var(--text-soft); }
.onboarding-skip {
  background: none;
  border: none;
  color: var(--text-soft);
  font-size: .88rem;
  cursor: pointer;
  padding: 8px 16px;
  transition: color var(--transition);
}
.onboarding-skip:hover { color: var(--text); }

/* ── Prompt Culture Note ── */
.prompt-culture {
  margin: 10px 0 4px;
  padding: 12px 14px;
  background: var(--accent-light);
  border-radius: 10px;
  font-size: .83rem;
  line-height: 1.6;
  color: var(--text);
  text-align: left;
}
.prompt-culture-label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
  margin-bottom: 5px;
}

/* ── Talk Mode Progress ── */
.talk-progress {
  display: block;
  text-align: center;
  font-size: .78rem;
  color: var(--text-soft);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

/* ── Journal Timeline ── */
.journal-timeline {
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.timeline-title {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-soft);
  margin: 0 0 12px;
}
.timeline-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 72px;
}
.timeline-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  height: 100%;
}
.timeline-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height .4s ease;
  opacity: .85;
}
.timeline-label {
  font-size: .7rem;
  color: var(--text-soft);
  white-space: nowrap;
}

/* ── Journal Tools ── */
.journal-tools {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 4px;
}
.btn-journal-export, .btn-journal-reminder {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 8px 16px;
  font-size: .82rem;
  cursor: pointer;
  color: var(--text-soft);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.btn-journal-export:hover { border-color: var(--accent); color: var(--accent); }
.btn-journal-reminder:hover { border-color: #F6C344; color: #c49a00; }
.btn-journal-reminder.active { border-color: #F6C344; color: #c49a00; background: #FFF9E6; }

/* ═══════════════════════════════════════════════════════════
   NEW COMPONENTS — Sprints 1–5
   ═══════════════════════════════════════════════════════════ */

/* ---------- Settings: status block + advanced ---------- */
.settings-status {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: .85rem; margin-bottom: 16px; line-height: 1.4;
}
.settings-status small { font-size: .78rem; opacity: .8; }
.settings-status-ok   { background: #E8F8EF; color: #1a7a46; border: 1px solid #b0e0c5; }
.settings-status-warn { background: #FFF5E6; color: #9a5000; border: 1px solid #f0d0a0; }
body.dark-mode .settings-status-ok   { background: #1a3d2a; color: #7ddba0; border-color: #2d6044; }
body.dark-mode .settings-status-warn { background: #3d2a00; color: #f0c060; border-color: #6a4800; }
.settings-advanced { margin-bottom: 12px; }
.settings-advanced summary {
  cursor: pointer; font-size: .82rem; color: var(--text-soft);
  padding: 6px 0; user-select: none; list-style: none;
}
.settings-advanced summary::-webkit-details-marker { display: none; }
.settings-advanced summary::before { content: '▶ '; font-size: .7rem; }
details[open].settings-advanced summary::before { content: '▼ '; }
.settings-advanced-body { padding-top: 12px; }

/* ---------- Profile display in header ---------- */
.user-profile-display {
  display: flex; align-items: center; gap: 5px;
  font-size: .82rem; color: var(--text-soft);
  background: var(--bg-card); border-radius: 100px;
  padding: 4px 12px; box-shadow: var(--shadow-card);
  flex-shrink: 0;
}
.profile-name { font-weight: 600; color: var(--text); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:not(.show-landing) .user-profile-display { display: none !important; }

/* ---------- Streak card ---------- */
.streak-card {
  width: 100%; max-width: 560px;
  background: var(--bg-card); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 14px 18px;
  border-left: 4px solid var(--accent);
}
.streak-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.streak-badge {
  font-size: .88rem; font-weight: 700; color: var(--text);
  background: var(--accent-light); border-radius: 100px; padding: 4px 12px;
}
.streak-status { font-size: .85rem; color: var(--text-soft); flex: 1; min-width: 120px; }
.streak-cta {
  font: inherit; font-size: .8rem; font-weight: 600;
  color: var(--accent); background: none; border: none;
  cursor: pointer; padding: 0; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px;
}
.streak-cta:hover { color: var(--accent-coral); }

/* ---------- Weekly recap card ---------- */
.weekly-recap-card {
  width: 100%; max-width: 560px;
  /* portrait-inner provides its own card styling; keep container transparent */
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.recap-inner { display: flex; flex-direction: column; gap: 8px; }
.recap-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); }
.recap-text { font-size: .88rem; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.recap-btn {
  align-self: flex-start; font: inherit; font-size: .82rem;
  padding: 7px 16px; border: 2px solid var(--accent);
  border-radius: 100px; background: var(--accent-light);
  color: var(--text); cursor: pointer; transition: var(--transition);
}
.recap-btn:hover { background: var(--accent); }
.recap-result { font-size: .88rem; line-height: 1.6; color: var(--text); white-space: pre-wrap; }

/* ---------- Notification permission banner ---------- */
.notification-banner {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-card); border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(45,42,38,.2); padding: 14px 20px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: 420px; width: calc(100% - 40px); z-index: 500;
  opacity: 0; transition: opacity .3s ease, transform .3s ease;
  border: 1px solid var(--accent-light);
}
.notification-banner.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.notif-msg { font-size: .88rem; flex: 1; min-width: 160px; }
.notif-yes, .notif-no {
  font: inherit; font-size: .82rem; border-radius: 100px;
  padding: 6px 14px; cursor: pointer; border: none; transition: var(--transition);
}
.notif-yes { background: var(--accent); color: #fff; font-weight: 600; }
.notif-yes:hover { background: #e0aa2a; }
.notif-no { background: transparent; color: var(--text-soft); }
.notif-no:hover { color: var(--text); }

/* ---------- Onboarding — new 3-step design ---------- */
.onboarding-overlay {
  position: fixed; inset: 0; background: var(--overlay-bg);
  backdrop-filter: blur(8px); display: flex;
  align-items: center; justify-content: center;
  z-index: 400; opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.onboarding-overlay.visible { opacity: 1; pointer-events: auto; }
.onboarding-card {
  background: var(--bg-card); border-radius: 28px;
  padding: 32px 28px; max-width: 460px; width: calc(100% - 40px);
  max-height: 92dvh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(45,42,38,.2);
  display: flex; flex-direction: column; align-items: center;
  gap: 0; text-align: center;
}
.ob-step-indicator { display: flex; gap: 8px; margin-bottom: 20px; }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--card-back); transition: background .3s; }
.ob-dot.active { background: var(--accent); transform: scale(1.3); }
.ob-dot.done  { background: var(--accent); opacity: .5; }
.ob-emoji { font-size: 2.8rem; margin-bottom: 8px; }
.ob-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; margin-bottom: 4px; }
.ob-subtitle { font-size: .9rem; color: var(--text-soft); margin-bottom: 16px; }
.ob-lang-pairs { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-bottom: 12px; }
.ob-lang-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border: 2px solid var(--card-back);
  border-radius: var(--radius-sm); background: var(--bg);
  font: inherit; cursor: pointer; text-align: left;
  transition: border-color .2s, background .2s;
}
.ob-lang-btn:hover { border-color: var(--accent); background: var(--accent-light); }
.ob-lang-btn.selected { border-color: var(--accent); background: var(--accent-light); }
.ob-lang-flags { font-size: 1.1rem; }
.ob-lang-label { font-size: .85rem; color: var(--text-soft); }
.ob-custom-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin-bottom: 20px;
}
.ob-lang-sep { color: var(--text-soft); flex-shrink: 0; }
.ob-select {
  flex: 1; padding: 8px 10px; border: 2px solid var(--card-back);
  border-radius: var(--radius-sm); background: var(--bg);
  font: inherit; font-size: .82rem; color: var(--text);
  cursor: pointer;
}
.ob-select:focus { outline: none; border-color: var(--accent); }
.ob-primary {
  width: 100%; padding: 14px; border: none; border-radius: var(--radius);
  background: var(--accent); font: inherit; font-size: 1rem; font-weight: 700;
  color: #fff; cursor: pointer; transition: var(--transition); margin-bottom: 10px;
}
.ob-primary:hover { background: #e0aa2a; transform: translateY(-1px); }
.ob-skip, .ob-back, .ob-link {
  background: none; border: none; font: inherit; font-size: .82rem;
  color: var(--text-soft); cursor: pointer; padding: 6px;
  text-decoration: underline; text-underline-offset: 3px;
}
.ob-skip:hover, .ob-back:hover { color: var(--text); }
.ob-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-bottom: 16px; }
.ob-mode-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 12px; border: 2px solid var(--card-back);
  border-radius: var(--radius); background: var(--bg);
  font: inherit; cursor: pointer; text-align: center;
  transition: border-color .2s, background .2s, transform .15s;
}
.ob-mode-btn:hover { border-color: var(--accent); background: var(--accent-light); transform: translateY(-2px); }
.ob-mode-icon { font-size: 1.8rem; }
.ob-mode-name { font-weight: 700; font-size: .9rem; }
.ob-mode-desc { font-size: .75rem; color: var(--text-soft); line-height: 1.3; }
.ob-name-input {
  width: 100%; padding: 12px 16px; margin-bottom: 14px;
  border: 2px solid var(--card-back); border-radius: var(--radius-sm);
  background: var(--bg); font: inherit; font-size: 1rem; color: var(--text);
  text-align: center;
}
.ob-name-input:focus { outline: none; border-color: var(--accent); }
.ob-email-label {
  display: block; font-size: .78rem; color: var(--text-muted);
  text-align: center; margin-bottom: 6px; margin-top: 4px;
}
.ob-email-input {
  width: 100%; padding: 10px 16px; margin-bottom: 18px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); font: inherit; font-size: .9rem; color: var(--text);
  text-align: center; transition: border-color .2s;
}
.ob-email-input:focus { outline: none; border-color: var(--accent); }
.ob-emoji-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-bottom: 20px;
}
.ob-emoji-btn {
  width: 44px; height: 44px; font-size: 1.5rem; border-radius: var(--radius-sm);
  border: 2px solid var(--card-back); background: var(--bg);
  cursor: pointer; transition: border-color .2s, transform .15s;
  display: flex; align-items: center; justify-content: center;
}
.ob-emoji-btn:hover { border-color: var(--accent); transform: scale(1.15); }
.ob-emoji-btn.selected { border-color: var(--accent); background: var(--accent-light); transform: scale(1.15); }
.ob-start-btn { margin-bottom: 10px; }

/* ---------- Check-in: returning user + dimension bars ---------- */
.ci-returning {
  width: 100%; max-width: 640px; padding: 10px 16px;
  background: var(--bg-card); border-radius: var(--radius-sm);
  font-size: .85rem; color: var(--text-soft); border-left: 3px solid var(--accent);
  margin-bottom: 4px; text-align: left;
}
.ci-returning-done { border-color: #4CAF82; color: #2a7a50; }
body.dark-mode .ci-returning-done { color: #7ddba0; }
.ci-dim-summary { width: 100%; display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; }
.ci-dim-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ci-dim-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 100px; border: 1px solid;
  font-size: .78rem; font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.ci-dim-needs { font-size: .82rem; color: var(--text-soft); line-height: 1.4; }

/* ===== UI/UX IMPRESSIVENESS UPGRADE ===== */

/* Smooth background transition for group-color hover */
.mode-card {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}

/* ---------- Mode group color theming ---------- */
.mode-grid > .mode-group:nth-child(1) { --gc: #F6C344; --gcl: rgba(246,195,68,.09); --gcb: rgba(246,195,68,.3); }
.mode-grid > .mode-group:nth-child(2) { --gc: #4CAF82; --gcl: rgba(76,175,130,.09); --gcb: rgba(76,175,130,.3); }
.mode-grid > .mode-group:nth-child(3) { --gc: #7BAFD4; --gcl: rgba(123,175,212,.09); --gcb: rgba(123,175,212,.3); }

.mode-group-label {
  color: var(--gc, var(--text-soft));
  font-weight: 700;
  letter-spacing: .1em;
}
.mode-group .mode-card:hover {
  border-color: var(--gcb, var(--accent));
  background: var(--gcl, var(--bg-card));
  box-shadow: 0 8px 28px rgba(0,0,0,.1), 0 0 0 1px var(--gcb, transparent);
}
.mode-card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  background: var(--gcl, var(--accent-light));
  border-radius: 14px;
  font-size: 1.7rem;
  transition: transform .3s ease;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.mode-card:hover .mode-card-icon {
  transform: scale(1.12) rotate(-4deg);
}
/* Mobile: row layout keeps icon compact */
@media (max-width: 600px) {
  .mode-card-icon { width: 44px; height: 44px; font-size: 1.4rem; border-radius: 11px; margin-bottom: 0; }
}

/* Mode cards stagger in on landing appear */
.mode-group:nth-child(1) .mode-card { animation: cardSlideIn .5s .1s ease both; }
.mode-group:nth-child(1) .mode-card:nth-child(2) { animation-delay: .16s; }
.mode-group:nth-child(1) .mode-card:nth-child(3) { animation-delay: .22s; }
.mode-group:nth-child(2) .mode-card { animation: cardSlideIn .5s .28s ease both; }
.mode-group:nth-child(2) .mode-card:nth-child(2) { animation-delay: .34s; }
.mode-group:nth-child(2) .mode-card:nth-child(3) { animation-delay: .40s; }
.mode-group:nth-child(3) .mode-card { animation: cardSlideIn .5s .46s ease both; }
.mode-group:nth-child(3) .mode-card:nth-child(2) { animation-delay: .52s; }
@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Landing screen transition ---------- */
.landing-screen {
  transition: opacity .22s ease, transform .22s ease;
}
.landing-screen.landing-exiting {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

/* Active mode container fades in */
body:not(.show-landing) .active-mode-container {
  animation: modeFadeIn .3s ease both;
}
@keyframes modeFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Card match burst ---------- */
.card.match-burst {
  animation: matchBurst .6s ease-out !important;
}
@keyframes matchBurst {
  0%   { transform: rotateY(180deg) scale(1);    filter: brightness(1); }
  25%  { transform: rotateY(180deg) scale(1.1);  filter: brightness(1.25); }
  60%  { transform: rotateY(180deg) scale(1.04); filter: brightness(1.1); }
  100% { transform: rotateY(180deg) scale(1);    filter: brightness(1); }
}

/* ---------- Streak empty state ---------- */
.streak-empty {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
}
.streak-empty-icon { font-size: 1.8rem; flex-shrink: 0; }
.streak-empty-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.streak-empty-text { font-size: .9rem; color: var(--text-soft); }
.streak-empty .streak-cta {
  align-self: flex-start;
  background: var(--accent-light);
  color: var(--text);
  border: none; border-radius: 8px;
  padding: 6px 14px; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: background .2s;
}
.streak-empty .streak-cta:hover { background: var(--accent); color: #fff; }

/* Streak badge pulse when streak > 1 */
.streak-badge {
  animation: streakPulse 2.5s ease-in-out infinite;
}
@keyframes streakPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}

/* ---------- Check-in ritual button ---------- */
.btn-checkin-fertig {
  display: block; width: 100%; margin-top: 20px;
  padding: 15px; border-radius: 14px;
  background: linear-gradient(135deg, #4CAF82, #7BAFD4);
  color: #fff; border: none; font-size: 1rem; font-weight: 600;
  cursor: pointer; letter-spacing: .02em;
  transition: opacity .2s, transform .15s;
}
.btn-checkin-fertig:hover { opacity: .9; transform: translateY(-1px); }

/* ---------- Check-in ritual overlay ---------- */
.ritual-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 900; opacity: 0; transition: opacity .4s ease;
}
.ritual-overlay.visible { opacity: 1; }
.ritual-card {
  background: var(--bg-card); border-radius: 24px;
  padding: 40px 32px; max-width: 360px; width: 90%;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  box-shadow: 0 24px 64px rgba(0,0,0,.18);
  animation: fadeSlideUp .35s ease;
}
.ritual-breath { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ritual-circle {
  width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle, #F6C34455, #7BAFD455);
  border: 2.5px solid var(--accent);
  animation: ritualBreathe 4s ease-in-out infinite;
}
@keyframes ritualBreathe {
  0%, 100% { transform: scale(.72); opacity: .55; }
  50%       { transform: scale(1);   opacity: 1; }
}
.ritual-breath-label { font-size: .84rem; color: var(--text-soft); }
.ritual-affirmation {
  font-size: 1.05rem; line-height: 1.65;
  color: var(--text); font-style: italic; max-width: 28ch;
}
.ritual-close {
  padding: 11px 30px; border-radius: 10px;
  background: var(--accent); color: #fff;
  border: none; font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: opacity .2s;
}
.ritual-close:hover { opacity: .85; }

/* ═══════════════════════════════════════════════════════════
   NEW COMPONENTS — Session 2
   ═══════════════════════════════════════════════════════════ */

/* ---------- Daily Fun Fact Card (landing) ---------- */
.daily-funfact-card {
  width: 100%; max-width: 560px;
  background: var(--bg-card); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 18px 20px;
  cursor: pointer; transition: box-shadow var(--transition), transform var(--transition);
  border: 1px solid var(--border);
}
.daily-funfact-card:hover {
  box-shadow: var(--shadow); transform: translateY(-2px);
}
.dff-tag {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 10px;
}
.dff-header {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; flex-wrap: wrap;
}
.dff-flag { font-size: 1.1rem; flex-shrink: 0; }
.dff-word {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
  color: var(--text); line-height: 1.2;
}
.dff-lang { font-size: .78rem; color: var(--text-soft); flex-shrink: 0; }
.dff-title {
  font-size: .92rem; font-weight: 700; color: var(--text); margin-bottom: 6px;
}
.dff-teaser {
  font-size: .84rem; color: var(--text-soft); line-height: 1.55; margin-bottom: 12px;
}
.dff-cta {
  display: inline-block; padding: 7px 16px;
  background: var(--accent-light); border: 1px solid var(--accent);
  border-radius: 100px; font: inherit; font-size: .8rem; font-weight: 600;
  color: var(--text); cursor: pointer; transition: background var(--transition);
}
.dff-cta:hover { background: var(--accent); }

/* ---------- Today's Emotion Card (landing) ---------- */
.todays-emotion-card {
  width: 100%; max-width: 560px;
  background: var(--bg-card); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 20px 22px;
  border-left: 4px solid var(--tde-color, var(--accent));
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 4px; cursor: default;
}
.tde-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tde-color, var(--accent)); margin-bottom: 4px;
}
.tde-emoji { font-size: 3rem; line-height: 1; margin-bottom: 4px; }
.tde-word {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  color: var(--text); line-height: 1.2;
}
.tde-word-secondary { font-size: 1rem; color: var(--text-soft); }
.tde-category { font-size: .8rem; color: var(--text-soft); margin: 4px 0 8px; }
.tde-cta {
  padding: 9px 22px; border: none; border-radius: 100px;
  background: var(--tde-color, var(--accent)); color: #fff;
  font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  opacity: .9; transition: opacity var(--transition), transform var(--transition);
  margin-top: 4px;
}
.tde-cta:hover { opacity: 1; transform: translateY(-1px); }

/* ---------- Emotion Collection Bar (landing) ---------- */
.collection-bar {
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column; gap: 8px;
}
.cbar-label {
  display: flex; align-items: center; gap: 6px;
  font-size: .84rem; color: var(--text-soft); font-weight: 500;
}
.cbar-icon { font-size: 1rem; flex-shrink: 0; }
.cbar-track {
  width: 100%; height: 8px; border-radius: 4px;
  background: var(--card-back); overflow: hidden;
}
.cbar-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--licht), var(--mitte));
  transition: width .6s ease;
}

/* ---------- Favorites Section (landing) ---------- */
.favorites-section {
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column; gap: 10px;
}
.fav-title {
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-soft);
}
.fav-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fav-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 100px;
  background: var(--surface); border: 1.5px solid var(--fav-color, var(--accent));
  color: var(--text); font: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: background var(--transition), transform var(--transition);
}
.fav-chip:hover { background: var(--accent-light); transform: translateY(-1px); }

/* ---------- Discovery Badge (toast) ---------- */
.discovery-badge {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--bg-card); color: var(--text);
  border: 1.5px solid var(--accent); border-radius: 100px;
  padding: 10px 22px; font-size: .88rem; font-weight: 600;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 1500; white-space: nowrap;
}
.discovery-badge.visible {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ---------- Word of the Day Mode ---------- */
.wotd-mode {
  display: none; flex-direction: column; align-items: center;
  gap: 20px; padding: 0 20px 40px; max-width: 560px; width: 100%;
}
.wotd-mode.active { display: flex; }
.wotd-card {
  width: 100%; background: var(--bg-card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border-top: 4px solid var(--wotd-color, var(--accent));
}
.wotd-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--wotd-color, var(--accent)); margin-bottom: 4px;
}
.wotd-emoji {
  font-size: 4rem; line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.12));
}
.wotd-word {
  font-family: var(--font-display); font-size: 2rem; font-weight: 700;
  color: var(--text); line-height: 1.15;
}
.wotd-word-secondary { font-size: 1.2rem; color: var(--text-soft); }
.wotd-speak-row {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin: 4px 0;
}
.wotd-speak-row .speak-btn { font-size: .78rem; padding: 0 12px; width: auto; }
.wotd-category {
  font-size: .82rem; color: var(--text-soft); margin-bottom: 4px;
}
.wotd-divider {
  width: 48px; height: 2px; background: var(--wotd-color, var(--accent));
  border-radius: 1px; margin: 4px 0;
}
.wotd-prompt-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted);
}
.wotd-prompt {
  font-size: 1rem; line-height: 1.6; color: var(--text);
  font-style: italic; max-width: 36ch;
}
.wotd-culture {
  margin: 4px 0; padding: 12px 14px;
  background: var(--accent-light); border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent); text-align: left;
  font-size: .84rem; line-height: 1.55; color: var(--text); width: 100%;
}
.wotd-culture-label { margin-right: 4px; }
.wotd-actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px;
}
.wotd-learn-btn {
  padding: 11px 26px; border: none; border-radius: 100px;
  background: var(--wotd-color, var(--accent)); color: #fff;
  font: inherit; font-size: .9rem; font-weight: 700;
  cursor: pointer; transition: opacity var(--transition);
}
.wotd-learn-btn:hover { opacity: .85; }
.wotd-learn-btn.learned { background: var(--text-muted); cursor: default; opacity: .7; }
.wotd-journal-btn {
  padding: 11px 22px; border: 1.5px solid var(--border); border-radius: 100px;
  background: transparent; color: var(--text-soft);
  font: inherit; font-size: .88rem; cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.wotd-journal-btn:hover { border-color: var(--accent); color: var(--text); }
.wotd-journal-area {
  width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 4px;
  animation: fadeSlideUp .2s ease;
}
.wotd-textarea {
  width: 100%; min-height: 80px; padding: 10px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font: inherit;
  font-size: .9rem; line-height: 1.5; resize: vertical;
}
.wotd-textarea:focus { outline: none; border-color: var(--accent); }
.wotd-journal-save {
  align-self: flex-end; padding: 8px 20px; border: none; border-radius: 100px;
  background: var(--accent); color: #fff; font: inherit; font-size: .82rem;
  font-weight: 600; cursor: pointer; transition: opacity var(--transition);
}
.wotd-journal-save:hover { opacity: .85; }
.wotd-journal-save:disabled { opacity: .5; cursor: default; }

/* WOTD mode card accent */
.mode-card[data-mode="wotd"] { --icon-bg: rgba(255,165,50,.15); --card-glow: radial-gradient(ellipse at 0% 0%, rgba(255,165,50,.07), transparent 60%); }

/* ── WOTD Rich Layout ── */
.wotd-header-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; width: 100%;
}
.wotd-date-badge {
  font-size: .72rem; font-weight: 600; color: var(--text-soft);
  background: var(--bg-surface); border-radius: 100px; padding: 3px 10px;
}
.wotd-hero {
  display: flex; align-items: center; gap: 16px;
  justify-content: flex-start; width: 100%; margin-bottom: 10px;
}
.wotd-hero .wotd-emoji { font-size: 3.2rem; line-height: 1; flex-shrink: 0; }
.wotd-words-block { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.wotd-word {
  font-size: 1.6rem; font-weight: 800; color: var(--text); line-height: 1.15;
  display: flex; align-items: center; gap: 8px;
}
.wotd-word-secondary {
  font-size: 1.15rem; font-weight: 600; color: var(--text-soft);
  display: flex; align-items: center; gap: 8px;
}
.wotd-speak-inline {
  background: none; border: none; cursor: pointer; font-size: 1rem;
  opacity: .6; padding: 0; line-height: 1; transition: opacity .15s;
}
.wotd-speak-inline:hover { opacity: 1; }
.wotd-category-badge {
  display: inline-block; font-size: .78rem; font-weight: 600;
  color: var(--wotd-color, var(--accent));
  background: color-mix(in srgb, var(--wotd-color, var(--accent)) 12%, transparent);
  border-radius: 100px; padding: 4px 12px; margin-bottom: 18px;
}
.wotd-section {
  width: 100%; text-align: left; margin-bottom: 14px;
  padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--bg-surface);
}
.wotd-section-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin-bottom: 6px;
}
.wotd-insight-section { border-left: 3px solid var(--wotd-color, var(--accent)); }
.wotd-insight-text { font-size: .9rem; line-height: 1.65; color: var(--text); }
.wotd-body-section { border-left: 3px solid #7C9EDB; }
.wotd-body-text { font-size: .87rem; line-height: 1.6; color: var(--text-soft); }
.wotd-world-section { border-left: 3px solid #F6C344; }
.wotd-world-words { display: flex; flex-direction: column; gap: 10px; }
.wotd-world-item {
  display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 6px;
}
.wotd-world-word { font-size: .95rem; font-weight: 700; color: var(--text); font-style: italic; }
.wotd-world-lang {
  font-size: .62rem; font-weight: 700; color: var(--text-muted);
  background: var(--bg-card); border-radius: 4px; padding: 1px 5px;
}
.wotd-world-meaning { font-size: .82rem; color: var(--text-soft); line-height: 1.45; }
.wotd-quote-section { background: none; padding: 2px 4px; border-left: none; margin-bottom: 14px; }
.wotd-quote-text {
  font-family: 'Lora', serif; font-style: italic;
  font-size: 1rem; line-height: 1.6; color: var(--text); margin-bottom: 4px;
}
.wotd-quote-author { font-size: .78rem; color: var(--text-muted); text-align: right; }
.wotd-presence-section { border-left: 3px solid #74C0FC; background: rgba(116,192,252,.04); }
.wotd-presence-text { font-size: .92rem; line-height: 1.8; color: var(--text-soft); font-style: italic; letter-spacing: .01em; }
.wotd-question-section { border-left: 3px solid #A78BFA; }
.wotd-prompt { font-size: .92rem; line-height: 1.55; color: var(--text); font-style: italic; }
.wotd-related { width: 100%; text-align: left; margin-bottom: 16px; }
.wotd-related-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.wotd-related-pill {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 100px; padding: 5px 12px; font: inherit; font-size: .8rem;
  color: var(--text-soft); cursor: pointer; transition: all .15s;
}
.wotd-related-pill:hover {
  background: var(--bg-card); color: var(--text);
  border-color: var(--wotd-color, var(--accent));
}

/* ---------- Classroom Mode ---------- */
body.classroom-mode .header .btn-icon:not(#btn-classroom),
body.classroom-mode .header .btn-back,
body.classroom-mode .header .user-profile-display,
body.classroom-mode .controls,
body.classroom-mode .stats,
body.classroom-mode .footer,
body.classroom-mode .settings-bar {
  display: none !important;
}
body.classroom-mode { font-size: 20px; }
body.classroom-mode .card-word { font-size: 1rem; }
body.classroom-mode .card-emoji { font-size: 2.6rem; }
body.classroom-mode .talk-prompt { font-size: 1.4rem; }
body.classroom-mode .talk-card-display .card-word { font-size: 1.6rem; }
body.classroom-mode .talk-card-display .card-emoji { font-size: 4.5rem; }
body.classroom-mode #btn-classroom { background: var(--accent); }

/* ---------- Journey Offer Overlay ---------- */
.journey-offer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; opacity: 0; transition: opacity .35s ease;
  padding: 20px;
}
.journey-offer-overlay.visible { opacity: 1; }
.journey-offer-card {
  background: var(--bg-card); border-radius: 24px;
  padding: 36px 28px; max-width: 380px; width: 100%;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.2);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  animation: fadeSlideUp .35s ease;
}
.journey-offer-icon { font-size: 3rem; line-height: 1; }
.journey-offer-text {
  font-size: 1rem; line-height: 1.6; color: var(--text-soft);
  font-style: italic; max-width: 30ch;
}
.journey-offer-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 4px; }
.journey-explore-btn {
  width: 100%; padding: 13px; border: none; border-radius: var(--radius);
  background: var(--accent); color: #fff; font: inherit; font-size: .95rem;
  font-weight: 700; cursor: pointer; transition: opacity var(--transition);
}
.journey-explore-btn:hover { opacity: .88; }
.journey-skip-btn {
  background: none; border: none; color: var(--text-soft); font: inherit;
  font-size: .84rem; cursor: pointer; padding: 6px;
  transition: color var(--transition);
}
.journey-skip-btn:hover { color: var(--text); }

/* ---------- Streak Heatmap ---------- */
.streak-inner {
  display: flex; flex-direction: column; gap: 8px;
}
.streak-top {
  font-size: .95rem; font-weight: 700; color: var(--text);
}
.streak-heatmap {
  display: flex; gap: 6px; align-items: center;
}
.streak-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--card-back); border: 1.5px solid var(--border2);
  transition: background .3s, transform .3s;
  flex-shrink: 0;
}
.streak-dot.done {
  background: var(--accent); border-color: var(--accent);
}
.streak-dot.today {
  border-color: var(--accent-coral); box-shadow: 0 0 0 2px rgba(255,107,107,.3);
}
.streak-dot.done.today {
  background: var(--accent-coral); border-color: var(--accent-coral);
}
.streak-fire .streak-top { color: var(--accent-coral); }
.streak-fire .streak-dot.done {
  background: #FF6B6B; border-color: #FF6B6B;
  animation: streakDotPop .4s ease;
}
@keyframes streakDotPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ---------- Ask Mode Offline Banner ---------- */
.ask-offline-banner {
  width: 100%; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); border-left: 3px solid var(--accent-coral);
  font-size: .84rem; color: var(--text-soft); line-height: 1.5;
  margin-bottom: 8px;
}
.ask-offline-hint {
  font-size: .78rem; color: var(--text-muted); margin-top: 4px; font-style: italic;
}

/* ---------- Story Mode Save Button ---------- */
.btn-story-save {
  align-self: center; margin-top: 4px;
  background: var(--accent-light); border: 1.5px solid var(--accent);
  border-radius: 24px; padding: 9px 20px;
  font: inherit; font-size: .86rem; font-weight: 600;
  color: var(--text); cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.btn-story-save:hover { background: var(--accent); }
.btn-story-save:disabled { opacity: .5; cursor: default; }

/* ---------- Onboarding Recommended Badge ---------- */
.ob-mode-recommended {
  border-color: var(--accent) !important;
  background: var(--accent-light) !important;
  position: relative;
}
.ob-recommended-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .03em; padding: 3px 10px; border-radius: 100px; white-space: nowrap;
}

/* ---------- Mode Card Badge (e.g. "Empfohlen") ---------- */
.mode-card-badge {
  position: absolute; top: 10px; right: 28px;
  background: var(--accent); color: #fff;
  font-size: .65rem; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 100px; white-space: nowrap;
  pointer-events: none;
}

/* ---------- Fun Fact Share Button ---------- */
.ff-actions {
  display: flex; justify-content: center; margin-top: 14px;
}
.ff-share-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 20px; border: none; border-radius: 100px;
  background: var(--accent-light); border: 1.5px solid var(--accent);
  color: var(--text); font: inherit; font-size: .84rem; font-weight: 600;
  cursor: pointer; transition: background var(--transition);
}
.ff-share-btn:hover { background: var(--accent); }
.ff-share-btn:disabled { opacity: .5; cursor: default; }

/* ═══════════════════════════════════════════════════════════
   PHASE 2 COMPONENTS — Personas · Tandem · Deck · Premium
   ═══════════════════════════════════════════════════════════ */

/* ---- Persona Picker ---- */
.persona-picker {
  width: 100%;
  max-width: 560px;
  margin: 28px auto 0;
}
.persona-section-title {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
  padding: 0 2px;
  display: block;
}
.persona-cards-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.persona-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  width: 80px;
  transition: transform .2s var(--easing-spring, ease);
}
.persona-card:hover { transform: translateY(-4px); }
.persona-face {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid transparent;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  transition: border-color .25s, box-shadow .25s, transform .2s var(--easing-spring, ease);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.persona-face::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .2s;
}
.persona-card:hover .persona-face::after { opacity: 1; }
.persona-card.active .persona-face {
  border-color: var(--pc, var(--accent));
  box-shadow: 0 6px 28px rgba(0,0,0,.4), 0 0 0 1px var(--pc, var(--accent));
  transform: scale(1.06);
}
.persona-initial {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  font-style: italic;
  color: rgba(255,255,255,.95);
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
  line-height: 1;
  user-select: none;
  position: relative; z-index: 1;
}
.persona-name {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .02em;
  transition: color .2s;
}
.persona-origin {
  font-size: .65rem;
  color: var(--text-muted);
  opacity: .6;
  margin-top: -4px;
}
.persona-card.active .persona-name { color: var(--text); }
.persona-card.active .persona-origin { opacity: .8; }

.persona-bio-box {
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.persona-bio-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.persona-bio-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 600; font-style: italic;
  color: rgba(255,255,255,.95);
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.persona-bio-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  display: block;
  line-height: 1.2;
}
.persona-bio-tagline {
  font-size: .74rem;
  color: var(--accent);
  font-weight: 600;
  display: block;
  margin-top: 2px;
  opacity: .9;
}
.persona-bio-text {
  font-size: .82rem;
  color: var(--text-soft);
  line-height: 1.6;
}

/* ---- Tandem Overlay ---- */
.tandem-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000; opacity: 0; transition: opacity .25s;
  padding: 20px;
}
.tandem-overlay.visible { opacity: 1; }
.tandem-overlay-inner {
  background: var(--bg-card); border-radius: 20px;
  padding: 28px 24px; width: 100%; max-width: 420px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  position: relative; max-height: 90vh; overflow-y: auto;
}
.tandem-overlay-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; font-size: 1.1rem;
  color: var(--text-muted); cursor: pointer; padding: 4px 8px;
}
/* Tandem Waitlist */
.tandem-waitlist { text-align: center; padding: 8px 0; }
.tandem-waitlist-icon { font-size: 2.8rem; margin-bottom: 8px; }
.tandem-waitlist-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.tandem-waitlist-desc { font-size: .87rem; color: var(--text-muted); margin-bottom: 16px; line-height: 1.55; }
.tandem-features { display: flex; flex-direction: column; gap: 6px; text-align: left; margin-bottom: 20px; }
.tandem-feature { font-size: .85rem; color: var(--text); }
.tandem-waitlist-form { display: flex; gap: 8px; margin-bottom: 8px; }
.tandem-email-input {
  flex: 1; padding: 9px 14px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--bg);
  color: var(--text); font: inherit; font-size: .88rem;
}
.tandem-email-input:focus { outline: none; border-color: var(--accent); }
.tandem-waitlist-btn {
  padding: 9px 18px; border-radius: 10px; border: none;
  background: var(--accent); color: #fff; font: inherit;
  font-size: .88rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.tandem-waitlist-note { font-size: .74rem; color: var(--text-muted); }
.tandem-waitlist-success { color: var(--success, #06d6a0); font-weight: 700; }
/* Tandem Matching */
.tandem-matching { text-align: center; padding: 8px 0; }
.tandem-matching-cards {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-bottom: 20px;
}
.tandem-lang-chip {
  padding: 8px 16px; border-radius: 100px;
  background: var(--bg); border: 1.5px solid var(--border);
  font-size: .9rem; font-weight: 600;
}
.tandem-matching-dots { display: flex; gap: 6px; align-items: center; }
.tandem-matching-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); animation: tandemDot 1.2s infinite;
}
.tandem-matching-dots span:nth-child(2) { animation-delay: .2s; }
.tandem-matching-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes tandemDot { 0%,80%,100% { opacity:.3; transform:scale(.8); } 40% { opacity:1; transform:scale(1); } }
.tandem-matching-text { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.tandem-matching-sub { font-size: .82rem; color: var(--text-muted); margin-bottom: 20px; }
.tandem-cancel-btn {
  padding: 8px 22px; border-radius: 100px;
  background: var(--bg); border: 1.5px solid var(--border);
  color: var(--text-muted); font: inherit; font-size: .84rem; cursor: pointer;
}
/* Tandem Matched */
.tandem-matched { text-align: center; padding: 8px 0; }
.tandem-matched-icon { font-size: 2.5rem; margin-bottom: 8px; }
.tandem-matched-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; }
.tandem-partner-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 100px;
  background: var(--bg); border: 1.5px solid var(--border);
  margin-bottom: 14px;
}
.tandem-partner-flag { font-size: 1.4rem; }
.tandem-partner-name { font-size: .95rem; font-weight: 700; }
.tandem-partner-learning { font-size: .8rem; color: var(--text-muted); }
.tandem-matched-desc { font-size: .85rem; color: var(--text-muted); margin-bottom: 20px; line-height: 1.55; }
.tandem-start-btn {
  padding: 12px 28px; border-radius: 100px; border: none;
  background: var(--accent); color: #fff; font: inherit;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: opacity .2s;
}
.tandem-start-btn:hover { opacity: .88; }

/* ---- Physical Deck Configurator ---- */
.deck-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 9000; opacity: 0; transition: opacity .25s;
  padding: 20px; overflow-y: auto;
}
.deck-overlay.visible { opacity: 1; }
.deck-configurator {
  background: var(--bg-card); border-radius: 20px;
  padding: 28px 24px; width: 100%; max-width: 480px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25); position: relative;
  margin: auto;
}
.deck-close-btn {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; font-size: 1.1rem;
  color: var(--text-muted); cursor: pointer; padding: 4px 8px;
}
.deck-header { text-align: center; margin-bottom: 24px; }
.deck-header-icon { font-size: 2.5rem; margin-bottom: 8px; }
.deck-header h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: 6px; }
.deck-header p { font-size: .85rem; color: var(--text-muted); line-height: 1.5; }
.deck-preview-row {
  display: flex; gap: 20px; align-items: flex-start;
  margin-bottom: 24px; flex-wrap: wrap;
}
.deck-card-preview {
  flex: 0 0 120px; height: 170px;
  border-radius: 14px; border: 2px solid var(--border);
  background: linear-gradient(145deg, #fff9f0, #fde8b0);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; padding: 12px;
  box-shadow: 4px 6px 18px rgba(0,0,0,.12);
  user-select: none;
}
.deck-preview-word {
  font-size: 1rem; font-weight: 800; text-align: center; color: #2d2d2d;
}
.deck-preview-translation {
  font-size: .85rem; color: #666; text-align: center; font-style: italic;
}
.deck-preview-langs { font-size: .9rem; letter-spacing: .05em; }
.deck-options { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 12px; }
.deck-option-group { display: flex; flex-direction: column; gap: 4px; }
.deck-option-group label { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.deck-option-group select {
  padding: 8px 10px; border-radius: 9px;
  border: 1.5px solid var(--border); background: var(--bg);
  color: var(--text); font: inherit; font-size: .88rem;
}
.deck-price-display {
  display: flex; flex-direction: column; gap: 2px; margin-top: 4px;
}
.deck-price { font-size: 1.5rem; font-weight: 900; color: var(--accent); }
.deck-price-note { font-size: .73rem; color: var(--text-muted); }
.deck-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.deck-order-btn {
  width: 100%; padding: 14px; border-radius: 12px; border: none;
  background: var(--accent); color: #fff; font: inherit;
  font-size: 1rem; font-weight: 800; cursor: pointer; transition: opacity .2s;
}
.deck-order-btn:hover { opacity: .88; }
.deck-waitlist-note { font-size: .78rem; color: var(--text-muted); text-align: center; margin: 0; }
.deck-waitlist-form { display: flex; gap: 8px; width: 100%; }
.deck-email-input {
  flex: 1; padding: 9px 14px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--bg);
  color: var(--text); font: inherit; font-size: .88rem;
}
.deck-email-input:focus { outline: none; border-color: var(--accent); }

/* ---- Premium Gate Modal ---- */
.premium-gate-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9500; opacity: 0; transition: opacity .25s; padding: 20px;
}
.premium-gate-overlay.visible { opacity: 1; }
.premium-gate-card {
  background: var(--bg-card); border-radius: 20px;
  padding: 32px 26px; width: 100%; max-width: 400px;
  box-shadow: 0 12px 40px rgba(0,0,0,.3); text-align: center;
  position: relative;
}
.premium-gate-icon { font-size: 2.8rem; margin-bottom: 10px; }
.premium-gate-card h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 8px; }
.premium-gate-card > p { font-size: .88rem; color: var(--text-muted); margin-bottom: 20px; line-height: 1.55; }
.premium-gate-features {
  display: flex; flex-direction: column; gap: 8px;
  text-align: left; margin-bottom: 22px; padding: 14px 16px;
  background: var(--bg); border-radius: 12px;
}
.premium-gate-features div { font-size: .85rem; }
.premium-upgrade-btn {
  width: 100%; padding: 14px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, var(--accent), #f6c90e);
  color: #fff; font: inherit; font-size: 1rem; font-weight: 800;
  cursor: pointer; margin-bottom: 10px; transition: opacity .2s;
}
.premium-upgrade-btn:hover { opacity: .9; }
.btn-ghost {
  background: none; border: 1.5px solid var(--border);
  color: var(--text-muted); padding: 10px 22px; border-radius: 10px;
  font: inherit; font-size: .88rem; cursor: pointer; width: 100%;
}
.premium-gate-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; font-size: 1.1rem;
  color: var(--text-muted); cursor: pointer; padding: 4px 8px;
}

/* ═══════════════════════════════════════════════════════════
   PHASE 3 — Resonance · Daily Challenge · Detective · Needs Map
   Persona Memory · Congrats Redesign · Shareable Card
   ═══════════════════════════════════════════════════════════ */

/* ---- Resonance Buttons (Win 1) ---- */
.prompt-resonance {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin: 14px 0 10px;
}
.resonance-btn {
  flex: 1; min-width: 100px; padding: 9px 14px;
  border: 1.5px solid var(--border); border-radius: 100px;
  background: var(--card-bg); color: var(--text);
  font: inherit; font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: all .18s ease;
  white-space: nowrap;
}
.resonance-btn:hover {
  border-color: var(--accent); background: var(--accent-light);
  transform: translateY(-1px);
}
.resonance-btn.active {
  background: var(--accent); border-color: var(--accent);
  color: #fff; transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(246,195,68,.35);
}

/* ---- Mode Card Time Estimate (Win 6) ---- */
.mode-card-time {
  font-size: .67rem; font-weight: 500; color: var(--text-muted);
  margin-top: 2px; letter-spacing: .02em;
}

/* ---- Daily Challenge Card (Win 3) ---- */
.daily-challenge-card {
  width: 100%; max-width: 480px;
  background: linear-gradient(135deg, #1a1040 0%, #2d1b69 100%);
  border: 1.5px solid rgba(246,195,68,.3);
  border-radius: 18px; padding: 18px 22px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer; transition: transform .18s, box-shadow .18s;
}
.daily-challenge-card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(246,195,68,.15); }
.daily-challenge-card.done { opacity: .75; cursor: default; }
.daily-challenge-card.done:hover { transform: none; }
.dc-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.dc-details {
  display: flex; align-items: center; gap: 8px;
  font-size: .92rem; color: #fff; font-weight: 600;
}
.dc-sep { color: rgba(255,255,255,.4); }
.dc-stars { font-size: .9rem; margin-left: 4px; }
.dc-btn {
  margin-top: 4px; padding: 10px 20px; border: none; border-radius: 100px;
  background: var(--accent); color: #0d0b14;
  font: inherit; font-size: .88rem; font-weight: 800;
  cursor: pointer; align-self: flex-start;
  transition: opacity .18s, transform .18s;
}
.dc-btn:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
.dc-btn:disabled { opacity: .55; cursor: default; }

/* ---- Daily Detective Card ---- */
.daily-detective-card {
  width: 100%; max-width: 480px;
  background: linear-gradient(135deg, #0e1f2e 0%, #1a3040 100%);
  border: 1.5px solid rgba(100,200,255,.25);
  border-radius: 18px; padding: 18px 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .18s, box-shadow .18s;
}
.daily-detective-card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(100,200,255,.12); }
.daily-detective-card.done { opacity: .72; }
.daily-detective-card.done:hover { transform: none; }
.ddc-header {
  display: flex; align-items: center; gap: 8px;
}
.ddc-icon { font-size: 1.1rem; }
.ddc-title {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #64c8ff; flex: 1;
}
.ddc-streak {
  font-size: .75rem; font-weight: 700; color: #ffb347;
}
.ddc-situation {
  font-size: .88rem; line-height: 1.6; color: rgba(255,255,255,.85);
  font-style: italic;
}
.ddc-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ddc-diff {
  font-size: .75rem; color: rgba(255,255,255,.5); text-transform: capitalize;
}
.ddc-btn {
  padding: 9px 20px; border: none; border-radius: 100px;
  background: #64c8ff; color: #0a1a24;
  font: inherit; font-size: .88rem; font-weight: 800;
  cursor: pointer; transition: opacity .18s, transform .18s;
}
.ddc-btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.ddc-btn.done, .ddc-btn:disabled { background: rgba(255,255,255,.15); color: rgba(255,255,255,.6); cursor: default; }

/* ---- Streak milestone animation ---- */
.streak-milestone .streak-top {
  animation: streak-pulse 1.8s ease-in-out infinite;
}
@keyframes streak-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* ---- Congrats Redesign (Win 7) ---- */
.congrats-emotion-summary {
  margin: 12px 0 4px;
}
.congrats-emoji-row {
  font-size: 1.8rem; letter-spacing: 4px; text-align: center;
  animation: emoji-pop .5s ease;
}
@keyframes emoji-pop {
  0% { opacity: 0; transform: scale(.7); }
  100% { opacity: 1; transform: scale(1); }
}
.congrats-persona-msg { margin: 14px 0 8px; }
.congrats-persona-bubble {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--card-bg); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 13px 16px;
  font-size: .88rem; line-height: 1.55; color: var(--text);
}
.congrats-persona-avatar {
  font-size: 1.5rem; flex-shrink: 0; margin-top: 2px;
}

/* ---- Emotion Detective Mode ---- */
.detective-mode {
  display: none; width: 100%; max-width: 640px; margin: 0 auto;
  padding: 20px 16px; box-sizing: border-box;
}
.detective-mode.active { display: block; }

/* Detective JS-rendered styles */
/* ── Emotion Detective — Redesigned ── */
.det-wrapper { display: flex; flex-direction: column; gap: 14px; }

/* Top bar: progress dots + score */
.det-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px;
}
.det-progress-dots { display: flex; gap: 6px; align-items: center; }
.det-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--border); transition: background .2s;
}
.det-dot.active { background: var(--accent); transform: scale(1.3); }
.det-dot.correct { background: #4CAF50; }
.det-dot.wrong { background: #EF5350; }
.det-score-pill {
  font-size: .82rem; font-weight: 700; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 100px; padding: 4px 12px;
  transition: transform .15s;
}
.det-score-pill.bump { transform: scale(1.25); }

/* Case file card */
.det-case-file {
  background: var(--bg-card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 18px;
  border-top: 3px solid var(--accent); position: relative;
}
.det-case-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.det-case-meta { display: flex; align-items: center; gap: 10px; }
.det-case-num {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.det-difficulty {
  font-size: .72rem; font-weight: 600; color: var(--text-muted);
  background: var(--bg-surface); border-radius: 100px; padding: 2px 8px;
}

/* Clues */
.det-clues { margin-bottom: 12px; }
.det-clues-label {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); margin-bottom: 6px;
}
.det-clues-row { display: flex; flex-wrap: wrap; gap: 6px; }
.det-clue-chip {
  font-size: 1.2rem; width: 36px; height: 36px; display: flex;
  align-items: center; justify-content: center;
  background: var(--bg-surface); border-radius: 10px;
  border: 1.5px solid var(--border);
}

/* Scenario bubble */
.det-scenario-bubble {
  background: var(--bg-surface); border-radius: 14px; padding: 16px 16px;
  margin-bottom: 16px; position: relative;
}
.det-scenario-text {
  font-size: .97rem; line-height: 1.7; color: var(--text);
  font-style: italic;
}

/* Question + instruction */
.det-question {
  font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 4px;
}
.det-instruction {
  font-size: .82rem; color: var(--text-soft); margin: 0 0 16px;
}

/* Choices grid */
.det-choices-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px;
  margin-bottom: 4px;
}
@media (max-width: 440px) {
  .det-choices-grid { grid-template-columns: repeat(2, 1fr); }
}
.det-choice {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border: 2px solid var(--border);
  border-radius: 14px; background: var(--bg-surface);
  color: var(--text); font: inherit; cursor: pointer;
  transition: all .18s; text-align: center;
}
.det-choice:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
  transform: translateY(-2px);
}
.det-choice-emoji { font-size: 1.8rem; line-height: 1; }
.det-choice-label { font-size: .75rem; font-weight: 600; line-height: 1.2; }
.det-choice.correct {
  border-color: #4CAF50 !important;
  background: rgba(76,175,80,.1) !important;
}
.det-choice.correct .det-choice-label { color: #4CAF50; }
.det-choice.wrong {
  border-color: #EF5350 !important;
  background: rgba(239,83,80,.08) !important;
  opacity: .7;
}
.det-choice:disabled { cursor: default; transform: none; }

/* Reveal panel */
.det-reveal {
  margin-top: 14px; border-radius: 12px; padding: 16px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .25s, transform .25s;
}
.det-reveal.visible { opacity: 1; transform: none; }
.det-reveal.correct { background: rgba(76,175,80,.1); border: 1.5px solid rgba(76,175,80,.3); }
.det-reveal.wrong { background: rgba(239,83,80,.08); border: 1.5px solid rgba(239,83,80,.25); }
.det-reveal-result {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .95rem; font-weight: 700; margin-bottom: 12px;
}
.det-reveal-icon {
  font-size: 1.1rem; font-weight: 900;
}
.det-reveal.correct .det-reveal-icon { color: #4CAF50; }
.det-reveal.wrong .det-reveal-icon { color: #EF5350; }
.det-streak-badge {
  font-size: .75rem; font-weight: 700; background: rgba(246,195,68,.2);
  color: #F6C344; border-radius: 100px; padding: 2px 8px;
}
.det-psychology {
  background: var(--bg-card); border-radius: 10px; padding: 12px 14px;
  margin-bottom: 12px;
}
.det-psychology-label {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); margin-bottom: 6px;
}
.det-psychology-text {
  font-size: .87rem; line-height: 1.6; color: var(--text);
}
.det-persona-credit {
  font-size: .72rem; color: var(--text-muted); margin-top: 6px; text-align: right;
}
.det-reflection {
  display: flex; flex-direction: column; gap: 6px;
}
.det-reflection-label {
  font-size: .75rem; font-weight: 600; color: var(--text-soft);
  font-style: italic;
}
.det-reflection-input {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--bg);
  font: inherit; font-size: .88rem; color: var(--text);
  resize: none; line-height: 1.5;
  transition: border-color .18s;
}
.det-reflection-input:focus {
  outline: none; border-color: var(--accent);
}
.det-reflection-input::placeholder { color: var(--text-muted); }

.det-next-btn {
  width: 100%; padding: 13px; border: none; border-radius: 100px;
  background: var(--accent); color: #0D0B14;
  font: inherit; font-size: .92rem; font-weight: 700;
  cursor: pointer; transition: opacity .18s, transform .18s;
}
.det-next-btn:hover { opacity: .9; transform: translateY(-1px); }

/* Results screen */
.det-results {
  display: flex; flex-direction: column; gap: 16px;
  padding: 8px 0;
}
.det-results-header {
  background: var(--bg-card); border-radius: var(--radius);
  padding: 28px 20px; text-align: center;
  box-shadow: var(--shadow);
}
.det-results-badge { font-size: 3rem; margin-bottom: 8px; }
.det-results-rank { font-size: 1.2rem; font-weight: 800; margin-bottom: 4px; }
.det-results-score { font-size: 2.5rem; font-weight: 900; color: var(--text); margin: 4px 0 12px; }
.det-results-bar-wrap { width: 100%; background: var(--bg-surface); border-radius: 100px; height: 6px; }
.det-results-bar { width: 100%; height: 6px; border-radius: 100px; overflow: hidden; }
.det-results-fill { height: 100%; border-radius: 100px; transition: width .6s ease-out; }
.det-history-grid {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.det-history-item {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 100px;
  font-size: .8rem; font-weight: 600;
}
.det-history-item.correct { background: rgba(76,175,80,.12); color: #4CAF50; }
.det-history-item.wrong { background: rgba(239,83,80,.08); color: #EF5350; }
.det-streak-result {
  text-align: center; font-size: .88rem; font-weight: 700;
  color: #F6C344;
}
.det-results-actions { display: flex; flex-direction: column; gap: 10px; }

/* Legacy aliases kept for backward compat */
.detective-header, .detective-card, .detective-badge,
.detective-situation, .detective-instruction,
.detective-grid, .detective-results { /* preserved class names */ }

/* ---- Needs Map Mode ---- */
.needsmap-mode {
  display: none; width: 100%; max-width: 640px; margin: 0 auto;
  padding: 20px 16px; box-sizing: border-box;
}
.needsmap-mode.active { display: block; }
.needsmap-wrap { display: flex; flex-direction: column; gap: 16px; }
.needsmap-title {
  font-size: 1.25rem; font-weight: 800; margin: 0; text-align: center;
}

/* Pattern bar */
.nm-pattern-bar {
  background: var(--card-bg); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.nm-pattern-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted);
}
.nm-pattern-needs {
  font-size: .88rem; font-weight: 600; color: var(--text);
}

/* Category tabs */
.nm-cat-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none;
}
.nm-cat-tabs::-webkit-scrollbar { display: none; }
.nm-cat-tab {
  flex-shrink: 0; padding: 7px 14px; border: 1.5px solid var(--border);
  border-radius: 100px; background: var(--bg);
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--text-muted);
  cursor: pointer; transition: all .18s; white-space: nowrap;
}
.nm-cat-tab:hover { border-color: var(--accent); color: var(--text); }
.nm-cat-tab.active {
  background: var(--accent); border-color: var(--accent);
  color: #0d0b14; font-weight: 800;
}

/* Emotion grid — compact, all 67 */
.nm-emo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 7px;
}
.nm-emo-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 6px; border: 1.5px solid var(--border);
  border-radius: 12px; background: var(--card-bg);
  cursor: pointer; font: inherit; color: var(--text);
  transition: all .15s;
}
.nm-emo-btn:hover {
  border-color: var(--cat-color, var(--accent));
  background: color-mix(in srgb, var(--cat-color, var(--accent)) 10%, transparent);
  transform: translateY(-1px);
}
.nm-emo-icon { font-size: 1.35rem; }
.nm-emo-name { font-size: .65rem; font-weight: 600; text-align: center; line-height: 1.3; }

/* Back button */
.nm-back-btn {
  align-self: flex-start; background: none; border: none; padding: 0;
  font: inherit; font-size: .82rem; color: var(--text-muted);
  cursor: pointer; transition: color .15s;
}
.nm-back-btn:hover { color: var(--text); }

/* Needs list (step 2) */
.nm-needs-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--cat-color, var(--accent)) 8%, var(--card-bg));
  border: 1.5px solid color-mix(in srgb, var(--cat-color, var(--accent)) 30%, transparent);
}
.nm-needs-emo { font-size: 2rem; }
.nm-needs-title { font-size: 1rem; font-weight: 700; }

.nm-needs-list { display: flex; flex-direction: column; gap: 8px; }
.nm-need-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1.5px solid var(--border);
  border-radius: 14px; background: var(--card-bg);
  cursor: pointer; font: inherit; color: var(--text);
  text-align: left; transition: all .18s;
}
.nm-need-card:hover {
  border-color: var(--cat-color, var(--accent));
  background: color-mix(in srgb, var(--cat-color, var(--accent)) 6%, var(--card-bg));
  transform: translateX(2px);
}
.nm-need-emoji { font-size: 1.4rem; flex-shrink: 0; }
.nm-need-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nm-need-name { font-size: .92rem; font-weight: 700; }
.nm-need-insight {
  font-size: .78rem; color: var(--text-muted); line-height: 1.45;
  font-style: italic;
}
.nm-need-arrow { font-size: .9rem; color: var(--text-muted); flex-shrink: 0; }

/* Actions step (step 3) */
.nm-action-header {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--cat-color, var(--accent)) 8%, var(--card-bg));
  border: 1.5px solid color-mix(in srgb, var(--cat-color, var(--accent)) 30%, transparent);
}
.nm-action-emos { font-size: 1.6rem; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.nm-action-need-name { font-size: 1rem; font-weight: 800; }
.nm-action-insight {
  font-size: .82rem; color: var(--text-muted); line-height: 1.55;
  font-style: italic; margin-top: 3px;
}
.nm-action-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); margin: 0;
}
.nm-action-list { display: flex; flex-direction: column; gap: 10px; }
.nm-action-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 16px; border-radius: 12px;
  background: var(--card-bg); border: 1.5px solid var(--border);
  font-size: .88rem; line-height: 1.5; color: var(--text);
}
.nm-action-dot { color: var(--accent); font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

.nm-journal-btn {
  padding: 13px 24px; border: none; border-radius: 100px;
  background: var(--cat-color, var(--accent)); color: #fff;
  font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
  transition: opacity .18s; align-self: flex-start;
}
.nm-journal-btn:hover { opacity: .85; }

/* ---- Persona Onboarding Step 4 ---- */
.ob-persona-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px; width: 100%; margin-bottom: 18px;
}
.ob-persona-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 10px; border: 2px solid var(--border);
  border-radius: 16px; background: var(--card-bg);
  cursor: pointer; font: inherit; color: var(--text);
  transition: all .18s; text-align: center;
}
.ob-persona-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.ob-persona-btn.selected {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 4px 20px rgba(246,195,68,.25);
}
.ob-persona-emoji { font-size: 1.8rem; }
.ob-persona-name { font-size: .88rem; font-weight: 700; }
.ob-persona-desc { font-size: .7rem; color: var(--text-muted); line-height: 1.4; }

/* ---- Share Toast (Win 10) ---- */
.share-toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
  background: var(--card-bg); border: 1.5px solid var(--accent);
  color: var(--text); padding: 12px 24px; border-radius: 100px;
  font-size: .9rem; font-weight: 600; z-index: 9999;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  animation: toast-in .3s ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---- Detective / Needsmap / Masterclass section visibility ---- */
.detective-mode.active,
.needsmap-mode.active,
.masterclass-mode.active {
  display: block;
}

/* ================================================================
   MASTERCLASS MODE
   ================================================================ */

/* Mode card pill */
.mode-card-free-pill {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: #fff;
  border-radius: 10px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
}

/* Container */
.mc-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
  color: var(--text, #e8e0d5);
  font-family: inherit;
}

/* Header */
.mc-header {
  text-align: center;
  margin-bottom: 2rem;
}
.mc-main-title {
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 .4rem;
  background: linear-gradient(135deg, #f5a623, #e91e8c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mc-main-sub {
  font-size: 1rem;
  opacity: .75;
  margin: 0 0 .6rem;
}
.mc-tier-note {
  font-size: .8rem;
  opacity: .55;
}

/* Badges row */
.mc-badges-row {
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.mc-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: .5rem .7rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  font-size: .72rem;
  opacity: .5;
  transition: opacity .2s, border-color .2s;
  cursor: default;
  min-width: 64px;
}
.mc-badge.earned {
  opacity: 1;
  border-color: #f5a623;
  background: rgba(245,166,35,.1);
}
.mc-badge-icon { font-size: 1.4rem; }
.mc-badge-label { font-size: .65rem; font-weight: 600; text-align: center; }

/* Module list */
.mc-modules-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mc-module-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  transition: border-color .2s, background .2s;
}
.mc-module-card:hover {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.07);
}
.mc-module-top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .6rem;
}
.mc-module-icon { font-size: 1.8rem; flex-shrink: 0; }
.mc-module-info { flex: 1; }
.mc-module-title { font-size: 1rem; font-weight: 700; margin: 0 0 .2rem; }
.mc-module-sub { font-size: .82rem; opacity: .65; margin: 0; }

.mc-free-pill, .mc-pro-pill, .mc-done-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: .68rem;
  font-weight: 700;
}
.mc-free-pill { background: rgba(76,175,80,.2); color: #81c784; border: 1px solid #4caf50; }
.mc-pro-pill { background: rgba(245,166,35,.15); color: #f5a623; border: 1px solid #f5a623; }
.mc-done-pill { background: rgba(100,221,100,.15); color: #64dd17; border: 1px solid #64dd17; }

.mc-progress-bar-wrap {
  height: 5px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: .8rem;
}
.mc-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #f5a623, #e91e8c);
  border-radius: 3px;
  transition: width .4s ease;
}
.mc-module-footer { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Buttons */
.mc-btn {
  padding: .5rem 1.1rem;
  border: none;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.mc-btn:hover { opacity: .88; transform: translateY(-1px); }
.mc-btn:active { transform: translateY(0); }
.mc-btn-primary { background: linear-gradient(135deg, #f5a623, #e91e8c); color: #fff; }
.mc-btn-secondary { background: rgba(255,255,255,.12); color: inherit; }
.mc-btn-outline { background: transparent; border: 1px solid rgba(255,255,255,.3); color: inherit; }
.mc-btn-locked { background: rgba(255,255,255,.06); color: rgba(255,255,255,.35); cursor: not-allowed; }
.mc-btn-locked:hover { opacity: 1; transform: none; }
.mc-btn-back { background: rgba(255,255,255,.08); color: inherit; }
.mc-btn-cert { background: linear-gradient(135deg, #ffd700, #ff9800); color: #1a1210; font-weight: 800; }
.mc-btn-dl { background: rgba(255,255,255,.12); color: inherit; }

/* Lesson container */
.mc-lesson-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 1rem 0 3rem;
}
.mc-lesson-header {
  margin-bottom: 1.5rem;
}
.mc-lesson-header h2 {
  font-size: 1.4rem;
  font-weight: 800;
  margin: .4rem 0 .3rem;
}
.mc-lesson-header p {
  font-size: .9rem;
  opacity: .65;
  margin: 0;
}
.mc-lesson-content {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 2rem;
}

/* Content blocks */
.mc-block { border-radius: 12px; padding: 1.1rem 1.2rem; }
.mc-block-hook {
  background: linear-gradient(135deg, rgba(245,166,35,.12), rgba(233,30,140,.1));
  border-left: 3px solid #f5a623;
  font-size: 1.05rem;
  font-style: italic;
}
.mc-block-science {
  background: rgba(100,149,237,.1);
  border-left: 3px solid cornflowerblue;
}
.mc-block-framework {
  background: rgba(100,200,100,.08);
  border-left: 3px solid #4caf50;
}
.mc-block-fact {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}
.mc-block-reflection {
  background: rgba(233,30,140,.08);
  border-left: 3px solid #e91e8c;
}
.mc-block-exercise {
  background: rgba(255,152,0,.08);
  border-left: 3px solid #ff9800;
}
.mc-block-intro, .mc-block-closing {
  background: rgba(255,255,255,.04);
  border-radius: 10px;
}
.mc-block-tools ul,
.mc-block-categories ul { list-style: none; padding: 0; margin: .5rem 0 0; }
.mc-block-tools li,
.mc-block-categories li { padding: .25rem 0; display: flex; align-items: baseline; gap: .4rem; }
.mc-block-title {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .55;
  margin: 0 0 .5rem;
  font-weight: 700;
}
.mc-block-text { font-size: .95rem; line-height: 1.65; margin: 0; }
.mc-block-text + .mc-block-text { margin-top: .5rem; }

/* Untranslatable emotion cards */
.mc-block-untranslatables {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
}
.mc-untranslatable-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .7rem;
  margin-top: .7rem;
}
.mc-ut-card {
  background: rgba(255,255,255,.06);
  border-radius: 10px;
  padding: .7rem .8rem;
  border: 1px solid rgba(255,255,255,.08);
}
.mc-ut-emoji { font-size: 1.5rem; }
.mc-ut-word { font-weight: 700; font-size: .9rem; margin: .2rem 0 .1rem; }
.mc-ut-lang { font-size: .7rem; opacity: .5; }
.mc-ut-desc { font-size: .8rem; opacity: .75; margin: .2rem 0 0; }

/* Quiz */
.mc-quiz-container { max-width: 640px; margin: 0 auto; }
.mc-quiz-q { margin-bottom: 1.5rem; }
.mc-quiz-q p { font-size: 1rem; font-weight: 600; margin: 0 0 .8rem; }
.mc-quiz-options { display: flex; flex-direction: column; gap: .5rem; }
.mc-quiz-opt {
  padding: .7rem 1rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  cursor: pointer;
  font-size: .9rem;
  text-align: left;
  color: inherit;
  transition: background .15s, border-color .15s;
}
.mc-quiz-opt:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.25); }
.mc-quiz-opt.correct { background: rgba(76,175,80,.2); border-color: #4caf50; }
.mc-quiz-opt.wrong { background: rgba(244,67,54,.2); border-color: #f44336; }
.mc-quiz-opt:disabled { cursor: default; }
.mc-quiz-feedback { margin-top: .5rem; font-size: .85rem; padding: .4rem .6rem; border-radius: 6px; }
.mc-quiz-feedback.ok { color: #81c784; }
.mc-quiz-feedback.no { color: #ef9a9a; }
.mc-quiz-score {
  text-align: center;
  padding: 1.5rem;
  background: rgba(255,255,255,.05);
  border-radius: 14px;
}
.mc-quiz-score h3 { font-size: 1.3rem; margin: 0 0 .5rem; }
.mc-quiz-score p { opacity: .7; margin: 0 0 1rem; }

/* Certificate section */
.mc-cert-section {
  text-align: center;
  padding: 2rem 1rem;
  background: linear-gradient(135deg, rgba(245,166,35,.08), rgba(233,30,140,.06));
  border: 1px solid rgba(245,166,35,.3);
  border-radius: 16px;
  margin-top: 2rem;
}
.mc-cert-section h3 { font-size: 1.3rem; margin: 0 0 .5rem; }
.mc-cert-section p { opacity: .7; margin: 0 0 1.2rem; font-size: .9rem; }
.mc-cert-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.mc-cert-issued {
  background: rgba(100,221,23,.06);
  border: 1px solid rgba(100,221,23,.3);
  border-radius: 12px;
  padding: 1.2rem;
  margin-top: 1rem;
  font-size: .85rem;
}
.mc-cert-uuid { font-family: monospace; font-size: .78rem; opacity: .6; margin: .3rem 0 0; }

/* Teacher dashboard */
.mc-dashboard { max-width: 680px; margin: 0 auto; }
.mc-dash-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.mc-dash-tab {
  padding: .5rem 1rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  font-size: .85rem;
  cursor: pointer;
  color: inherit;
  transition: background .15s;
}
.mc-dash-tab.active { background: rgba(245,166,35,.2); border-color: #f5a623; color: #f5a623; font-weight: 700; }
.mc-dash-section { display: none; }
.mc-dash-section.active { display: block; }
.mc-dash-section h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 1rem; }
.mc-class-code-display {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: .15em;
  color: #f5a623;
  text-align: center;
  margin: 1rem 0;
  padding: 1rem;
  background: rgba(245,166,35,.08);
  border: 1px dashed rgba(245,166,35,.4);
  border-radius: 10px;
}

/* Student table */
.mc-student-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  margin-top: .8rem;
}
.mc-student-table th {
  text-align: left;
  padding: .5rem .7rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  opacity: .55;
  font-weight: 600;
}
.mc-student-table td {
  padding: .5rem .7rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Pricing grid */
.mc-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1.2rem 0;
}
.mc-pricing-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 1.2rem 1rem;
  text-align: center;
}
.mc-pricing-card.featured {
  border-color: #f5a623;
  background: rgba(245,166,35,.07);
}
.mc-pricing-card h4 { font-size: 1rem; font-weight: 700; margin: 0 0 .3rem; }
.mc-pricing-price { font-size: 1.5rem; font-weight: 900; color: #f5a623; margin: .3rem 0; }
.mc-pricing-card ul { list-style: none; padding: 0; margin: .6rem 0 0; font-size: .8rem; opacity: .75; text-align: left; }
.mc-pricing-card li { padding: .2rem 0; }
.mc-pricing-card li::before { content: '✓ '; color: #4caf50; }

/* Lesson list */
.mc-lesson-list { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0 1.5rem; }
.mc-lesson-item {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .9rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
}
.mc-lesson-item:hover { background: rgba(255,255,255,.09); }
.mc-lesson-item.done { border-color: rgba(100,221,23,.3); }
.mc-lesson-item.locked { opacity: .45; cursor: not-allowed; }
.mc-lesson-num { font-size: .75rem; font-weight: 700; opacity: .5; min-width: 20px; }
.mc-lesson-name { flex: 1; font-size: .9rem; font-weight: 600; }
.mc-lesson-status { font-size: .8rem; }

/* Responsive */
@media (max-width: 480px) {
  .mc-main-title { font-size: 1.5rem; }
  .mc-untranslatable-grid { grid-template-columns: 1fr 1fr; }
  .mc-pricing-grid { grid-template-columns: 1fr; }
  .mc-class-code-display { font-size: 1.8rem; }
}

/* ═══════════════════════════════════════════════════════════════
   CHECK-IN RITUAL — 3-step flow
   ═══════════════════════════════════════════════════════════════ */

.ci-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 4px 32px;
}

/* Step progress dots */
.ci-steps {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ci-step-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--card-back);
  transition: background .25s, transform .25s;
}
.ci-step-dot.active {
  background: var(--accent);
  transform: scale(1.3);
}
.ci-step-dot.done {
  background: var(--accent);
  opacity: .45;
}

/* Greeting + heading */
.ci-greeting {
  font-size: .82rem;
  color: var(--text-soft);
  text-align: center;
  background: var(--bg-card);
  border-radius: 100px;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ci-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  text-align: center;
  line-height: 1.3;
}
.ci-hint {
  font-size: .82rem;
  color: var(--text-soft);
  text-align: center;
}

/* 3×3 emotion grid */
.ci-emotion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}
.ci-emotion-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--bg-card);
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .18s, transform .18s, box-shadow .18s;
  box-shadow: var(--shadow-card);
  min-height: 80px;
  text-align: center;
}
.ci-emotion-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.ci-emotion-card.selected {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow);
}
.ci-card-emoji { font-size: 1.7rem; line-height: 1; }
.ci-card-name  { font-size: .78rem; font-weight: 600; color: var(--text); }

/* Continue button */
.ci-continue-btn {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
}
.ci-continue-btn:disabled {
  opacity: .35;
  cursor: default;
  transform: none;
}
.ci-continue-btn:not(:disabled):hover { opacity: .9; transform: translateY(-1px); }

/* ── Step 2: needs ── */
.ci-emotion-context {
  font-size: .82rem;
  color: var(--text-soft);
  text-align: center;
}
.ci-needs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
}
.ci-need-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 2px solid var(--card-back);
  border-radius: 100px;
  cursor: pointer;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  transition: border-color .18s, background .18s;
  min-height: 44px;
}
.ci-need-pill:hover { border-color: var(--accent); background: var(--accent-light); }
.ci-need-pill.selected {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 0 0 1px var(--accent);
}
.ci-need-emoji { font-size: 1.1rem; }

.ci-step2-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.ci-done-btn {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
}
.ci-done-btn:disabled {
  opacity: .35;
  cursor: default;
}
.ci-done-btn:not(:disabled):hover { opacity: .9; transform: translateY(-1px); }

.ci-skip-btn {
  background: none;
  border: none;
  color: var(--text-soft);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  text-align: center;
  padding: 8px;
}
.ci-skip-btn:hover { color: var(--text); }

/* ── Step 3: closing ── */
.ci-closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  background: var(--bg-card);
  border-radius: var(--radius-lg, 20px);
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
  width: 100%;
}
.ci-closing-emoji { font-size: 2.2rem; letter-spacing: 4px; }
.ci-closing-insight {
  font-size: .92rem;
  color: var(--text-soft);
  line-height: 1.55;
  font-style: italic;
}
.ci-streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 700;
  font-size: .82rem;
  border-radius: 100px;
  padding: 6px 14px;
}
.ci-closing-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.ci-deeper-btn {
  width: 100%;
  padding: 13px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: opacity .2s;
}
.ci-deeper-btn:hover { opacity: .9; }
.ci-still-btn {
  width: 100%;
  padding: 13px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 2px solid var(--card-back);
  color: var(--text-soft);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.ci-still-btn:hover { border-color: var(--accent); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════
   EMOTION PORTRAIT — weekly recap card
   ═══════════════════════════════════════════════════════════════ */

.portrait-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: var(--bg-card);
  border-radius: var(--radius-lg, 20px);
  box-shadow: var(--shadow-card);
}

.portrait-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.portrait-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}
.portrait-streak-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}
.portrait-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--card-back);
  display: inline-block;
}
.portrait-dot--on {
  background: var(--accent);
}

.portrait-emoji-row {
  display: flex;
  gap: 6px;
  font-size: 1.6rem;
}

.portrait-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portrait-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
}
.portrait-cat-emoji { font-size: 1rem; flex-shrink: 0; }
.portrait-cat-label {
  min-width: 90px;
  font-weight: 600;
  color: var(--text-soft);
  font-size: .78rem;
}
.portrait-bar-track {
  flex: 1;
  height: 8px;
  background: var(--card-back);
  border-radius: 100px;
  overflow: hidden;
}
.portrait-bar-fill {
  height: 100%;
  border-radius: 100px;
  transition: width .6s ease;
}
.portrait-pct {
  min-width: 30px;
  text-align: right;
  color: var(--text-soft);
  font-size: .75rem;
}

.portrait-meta {
  font-size: .75rem;
  color: var(--text-soft);
}
.portrait-empty {
  font-size: .85rem;
  color: var(--text-soft);
  text-align: center;
  padding: 8px 0;
}

.portrait-insight-area { margin-top: 4px; }
.portrait-insight-btn {
  width: 100%;
  padding: 11px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 2px solid var(--card-back);
  color: var(--text-soft);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.portrait-insight-btn:hover { border-color: var(--accent); color: var(--text); }
.portrait-insight-btn:disabled { opacity: .5; cursor: default; }
.portrait-insight-text {
  font-size: .85rem;
  color: var(--text-soft);
  line-height: 1.55;
  font-style: italic;
  margin: 0;
}
.portrait-insight-result {
  font-size: .85rem;
  color: var(--text-soft);
  line-height: 1.55;
  font-style: italic;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .ci-emotion-grid { gap: 8px; }
  .ci-emotion-card { padding: 12px 6px; min-height: 72px; }
  .ci-card-emoji { font-size: 1.5rem; }
  .portrait-cat-label { min-width: 70px; font-size: .72rem; }
}