/* Woordjes — app styles. Tokens come from design/theme.css +
   design/tokens.css (vendored; see tools/sync-design.js); shared reset
   from design/base.css. App CSS uses semantic tokens only. */
html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.hidden { display: none !important; }

/* ---------- Home: the sun starts words; two tiles start numbers & letters. ---------- */
#screen-home { gap: 7vmin; }
#sun-wrap { position: relative; }
#sun-btn {
  width: min(40vmin, 300px);
  height: min(40vmin, 300px);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #e2854f, var(--accent) 65%, var(--accent-deep));
  box-shadow: 0 18px 50px rgba(196, 101, 63, 0.35), 0 0 0 14px rgba(196, 101, 63, 0.10);
  position: relative;
  animation: breathe 3.2s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}
#sun-btn::after {
  content: '';
  width: 34%;
  height: 34%;
  margin-left: 9%;
  background: #fffcf5;
  clip-path: polygon(8% 0%, 100% 50%, 8% 100%);
  border-radius: 6px;
}
#sun-btn .ray {
  position: absolute;
  left: 50%; top: 50%;
  width: 9%; height: 26%;
  background: rgba(196, 101, 63, 0.45);
  border-radius: 99px;
  transform-origin: 50% 0;
}
#sun-btn.done-today { filter: saturate(0.75); }
#home-moon-badge {
  position: absolute;
  top: -3vmin;
  right: -5vmin;
  font-size: min(9vmin, 64px);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.12));
  pointer-events: none;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

#course-tiles {
  display: flex;
  gap: 6vmin;
}
.course-tile {
  position: relative;
  width: min(30vmin, 220px);
  height: min(21vmin, 154px);
  background: var(--surface);
  border-radius: 26px;
  box-shadow: 0 10px 28px rgba(38, 34, 28, 0.10), inset 0 0 0 1px var(--line);
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: min(6.5vmin, 46px);
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: transform 0.12s;
}
.course-tile:active { transform: scale(0.95); }
.course-tile.done-today { filter: saturate(0.6); opacity: 0.85; }
#tile-numbers span { color: var(--accent-deep); }
#tile-letters span { color: var(--en); }
.tile-moon {
  position: absolute;
  top: -14px;
  right: -8px;
  font-size: 26px;
  pointer-events: none;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.12));
}

/* ---------- Session: one big picture ---------- */
#screen-session { gap: 4vmin; }

#lang-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  opacity: 0.55;
  transition: background 0.3s;
}
#lang-dot.en { background: var(--en); }
#lang-dot.nl { background: var(--nl); }

#card {
  width: min(74vmin, 560px);
  height: min(74vmin, 560px);
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: 0 16px 44px rgba(38, 34, 28, 0.10), inset 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5vmin;
  position: relative;
  transition: box-shadow 0.25s;
}
#card-emoji {
  font-size: min(44vmin, 330px);
  line-height: 1;
  pointer-events: none;
}
#card-emoji.glyph {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  color: var(--ink);
}
#card-emoji.glyph-letter { font-size: min(42vmin, 310px); }
#card-emoji.glyph-number { font-size: min(30vmin, 220px); color: var(--accent-deep); }
#card-count {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2vmin;
  max-width: min(32vmin, 240px);
  pointer-events: none;
}
#card-count.hidden { display: none; }
.cdot {
  width: min(4vmin, 30px);
  height: min(4vmin, 30px);
  border-radius: 50%;
  background: var(--accent);
}
#card.pop { animation: pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
#card.happy { animation: happy 0.7s cubic-bezier(0.3, 1.6, 0.4, 1); }
#card.soft { animation: soften 0.9s ease; }
#card.listening {
  box-shadow: 0 16px 44px rgba(38, 34, 28, 0.10), 0 0 0 5px rgba(196, 101, 63, 0.35), inset 0 0 0 1px var(--line);
  animation: listenpulse 1.6s ease-in-out infinite;
}
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes happy {
  0% { transform: scale(1); }
  35% { transform: scale(1.12) rotate(2deg); }
  70% { transform: scale(0.98) rotate(-1deg); }
  100% { transform: scale(1); }
}
@keyframes soften {
  0% { transform: translateY(0); }
  40% { transform: translateY(2.5vmin) scale(0.985); }
  100% { transform: translateY(0); }
}
@keyframes listenpulse {
  0%, 100% { box-shadow: 0 16px 44px rgba(38,34,28,0.10), 0 0 0 4px rgba(196,101,63,0.25), inset 0 0 0 1px var(--line); }
  50% { box-shadow: 0 16px 44px rgba(38,34,28,0.10), 0 0 0 12px rgba(196,101,63,0.12), inset 0 0 0 1px var(--line); }
}

#listen-dots {
  height: 5vmin;
  display: flex;
  gap: 1.6vmin;
  align-items: center;
  visibility: hidden;
}
#listen-dots.on { visibility: visible; }
#listen-dots i {
  width: 2.4vmin; height: 2.4vmin;
  max-width: 16px; max-height: 16px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.35;
  animation: bounce 1.1s ease-in-out infinite;
}
#listen-dots i:nth-child(2) { animation-delay: 0.18s; }
#listen-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes bounce { 0%, 100% { transform: translateY(0); opacity: 0.3; } 50% { transform: translateY(-1.4vmin); opacity: 0.85; } }

#session-bar {
  width: min(50vmin, 380px);
  height: 7px;
  border-radius: 99px;
  background: rgba(38, 34, 28, 0.08);
  overflow: hidden;
}
#session-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--accent);
  transition: width 0.5s ease;
}

/* Parent confirm dots — deliberately quiet, in the bottom corners. */
.pdot {
  position: absolute;
  bottom: calc(20px + env(safe-area-inset-bottom));
  width: 62px; height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: opacity 0.2s, transform 0.1s;
}
.pdot:active { transform: scale(0.92); opacity: 0.9; }
.pdot svg { width: 26px; height: 26px; }
#btn-miss { left: calc(20px + env(safe-area-inset-left)); background: rgba(38, 34, 28, 0.07); }
#btn-hit { right: calc(20px + env(safe-area-inset-right)); background: var(--good-soft); }
body.mode-mic .pdot { opacity: 0.18; width: 52px; height: 52px; }

/* ---------- Done: goodnight ---------- */
#screen-done { background: linear-gradient(180deg, #3a3552, var(--night)); }
#done-moon { font-size: min(34vmin, 240px); animation: pop 0.7s cubic-bezier(0.2, 1.4, 0.4, 1); }
.done-star {
  position: absolute;
  font-size: 26px;
  animation: twinkle 2.6s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.9; } }

/* ---------- Parent gate ---------- */
#parent-gate {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(14px + env(safe-area-inset-right));
  width: 46px; height: 46px;
  border-radius: 50%;
  opacity: 0.28;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}
#parent-gate svg { width: 22px; height: 22px; }
#gate-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p, 0) * 1%), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
}

/* ---------- Parent zone ---------- */
#parent {
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 50;
  display: flex;
  flex-direction: column;
  -webkit-user-select: text;
  user-select: text;
}
#parent header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 20px 10px;
}
#parent header h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
#parent header .hdr-actions { display: flex; align-items: center; gap: 8px; }
#parent-home {
  padding: 10px 14px;
  border-radius: 99px;
  background: rgba(38, 34, 28, 0.06);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
#parent-close {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(38, 34, 28, 0.07);
  font-size: 18px;
}
#parent nav {
  display: flex;
  gap: 8px;
  padding: 0 20px 14px;
  overflow-x: auto;
}
#parent nav button {
  padding: 9px 16px;
  border-radius: 99px;
  background: rgba(38, 34, 28, 0.06);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
#parent nav button.active { background: var(--ink); color: var(--surface); }
#parent-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 20px calc(30px + env(safe-area-inset-bottom));
}

.pcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 14px;
}
.pcard h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.bigline { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; }
.sub { color: var(--muted); font-size: 14px; line-height: 1.5; }
.statrow { display: flex; gap: 10px; margin-bottom: 14px; }
.stat {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 14px;
  text-align: center;
}
.stat b { display: block; font-size: 26px; letter-spacing: -0.02em; }
.stat span { font-size: 12px; color: var(--muted); }

.langbar { margin: 12px 0; }
.langbar .lb-top { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.langbar .lb-top em { font-style: normal; color: var(--muted); font-weight: 500; }
.langbar .track { height: 8px; border-radius: 99px; background: rgba(38, 34, 28, 0.07); overflow: hidden; }
.langbar .fill { display: block; height: 100%; border-radius: 99px; }
.langbar.en .fill { background: var(--en); }
.langbar.nl .fill { background: var(--nl); }

.dinner-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.dinner-item:last-child { border-bottom: 0; }
.dinner-item .em { font-size: 34px; line-height: 1.2; }
.em-glyph {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  color: var(--accent-deep);
  text-align: center;
}
.dinner-item .dw { font-size: 19px; font-weight: 700; }
.dinner-item .dw .chip { margin-left: 8px; }
.dinner-item p { font-size: 14px; color: var(--muted); line-height: 1.45; margin-top: 3px; }
.dinner-item .say {
  margin-left: auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent-soft);
  flex-shrink: 0;
  font-size: 15px;
}

.chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 99px;
  vertical-align: middle;
  color: #fff;
}
.chip.en { background: var(--en); }
.chip.nl { background: var(--nl); }

.wgrid { display: flex; flex-direction: column; }
.wrow {
  display: grid;
  grid-template-columns: 44px 1fr 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.wrow:last-child { border-bottom: 0; }
.wrow .em { font-size: 26px; }
.wcell { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.wcell .st { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.st.new { background: rgba(38, 34, 28, 0.15); }
.st.learning { background: var(--accent); }
.st.known { background: var(--good); }
.st.dropped { background: transparent; box-shadow: inset 0 0 0 2px rgba(38, 34, 28, 0.25); }
.wcell small { color: var(--muted); font-weight: 500; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .st { width: 10px; height: 10px; border-radius: 50%; }

/* Voices tab */
.vrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.vrow:last-child { border-bottom: 0; }
.vrow .em { font-size: 26px; width: 36px; }
.vlang { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.vlang b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.vbtn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(38, 34, 28, 0.06);
  font-size: 14px;
  flex-shrink: 0;
}
.vbtn.has-rec { background: var(--accent-soft); }
.vbtn.recording { background: var(--accent); color: #fff; animation: recpulse 1s ease-in-out infinite; }
.vbtn.vdel { background: none; color: var(--muted); font-size: 13px; width: 26px; margin-left: -4px; }
.vbtn.vdel:active { color: var(--accent-deep); }
@keyframes recpulse { 50% { transform: scale(1.12); } }

/* Settings */
.setrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.setrow:last-child { border-bottom: 0; }
.setrow label { font-size: 15px; font-weight: 600; }
.setrow .hint { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; margin-top: 2px; max-width: 300px; }
.setrow select, .setrow input[type="text"] {
  font: inherit;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  max-width: 170px;
}
.setrow input[type="range"] { width: 150px; accent-color: var(--accent); }
.setrow .val { font-size: 14px; color: var(--muted); min-width: 34px; text-align: right; }
.switch { position: relative; width: 52px; height: 32px; flex-shrink: 0; }
.switch input { opacity: 0; width: 100%; height: 100%; position: absolute; z-index: 2; }
.switch i {
  position: absolute; inset: 0;
  border-radius: 99px;
  background: rgba(38, 34, 28, 0.15);
  transition: background 0.2s;
}
.switch i::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}
.switch input:checked + i { background: var(--good); }
.switch input:checked + i::after { transform: translateX(20px); }

.danger {
  width: 100%;
  padding: 13px;
  border-radius: 14px;
  background: rgba(196, 101, 63, 0.1);
  color: var(--accent-deep);
  font-weight: 700;
  font-size: 15px;
}
.notice {
  background: var(--accent-soft);
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--accent-deep);
  margin-bottom: 14px;
}

@media (min-width: 700px) {
  #parent-body, #parent header, #parent nav { max-width: 640px; width: 100%; margin: 0 auto; }
}