/* SEEDSED — app.css: look of Own Your Words.
   Layout: one thumb-width column for a phone: one task at a time, grown-up and calm, like a phone game
   rather than a workbook. The keyboard is the app's own, pinned where a phone keyboard would be. */
:root {
  --bg: #F3F4EE; --surface: #FFFFFF; --ink: #16201D; --muted: #55635D; --line: #D3D8CE;
  --accent: #0F6B5C; --accent-ink: #FFFFFF; --soft: #DDEDE7; --gold: #A9770A; --gold-soft: #F7EBCD;
  --right: #1D7F55; --near: #B8860B; --no: #7C8783; --try: #E8EBF5; --try-ink: #36477F;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #0E1412; --surface: #182220; --ink: #E7EEEA; --muted: #9FB0A8; --line: #2C3A36;
  --accent: #4DBBA3; --accent-ink: #06201A; --soft: #17332C; --gold: #E5B84A; --gold-soft: #3A2E11;
  --right: #3FAE7F; --near: #C79A22; --no: #5E6A66; --try: #1E2740; --try-ink: #AEBBEA; color-scheme: dark } }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 18px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
.wrap { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; min-height: 100dvh;
  padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; }
h1 { font-size: 1.5em; } h2 { font-size: 1.25em; } h3 { font-size: 1.02em; }
p { margin: 0; }
.muted { color: var(--muted); } .small { font-size: .82em; }
.eyebrow { font-size: .72em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
button { font: inherit; color: inherit; cursor: pointer; min-height: 52px; padding: 10px 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); touch-action: manipulation; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
button.quiet { background: transparent; border-color: transparent; color: var(--muted); min-height: 44px; padding: 6px 10px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; } .row > button { flex: 1 1 130px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
input.text, textarea.text, select.text { font: inherit; color: var(--ink); background: var(--bg); border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; min-width: 0; }
input.text { min-height: 50px; } textarea.text { min-height: 110px; resize: vertical; }

/* Home */
.hero { background: var(--accent); color: var(--accent-ink); border: none; border-radius: 20px; padding: 20px; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.hero .big { font-size: 1.45em; font-weight: 800; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 6px; text-align: center; }
.stat b { display: block; font-size: 1.5em; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--accent); }
.stat span { font-size: .72em; color: var(--muted); }
.games { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.game { text-align: left; border-radius: 16px; padding: 14px; min-height: 96px; display: flex; flex-direction: column; gap: 4px; }
.game b { font-size: 1.02em; } .game span { font-size: .78em; color: var(--muted); }
.goal { display: flex; flex-direction: column; gap: 6px; }
.goal .bar, .bar { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.goal small { color: var(--muted); }
.done-tag { color: var(--gold); font-weight: 700; }
.weeks { display: flex; gap: 6px; flex-wrap: wrap; }
.week { font-size: .72em; padding: 3px 8px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); font-variant-numeric: tabular-nums; }
.week.met { background: var(--soft); border-color: var(--accent); color: var(--ink); font-weight: 700; }
button.week { min-height: 40px; }
.banner { background: var(--gold-soft); border-radius: 14px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Practice */
.play { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.stage { text-align: center; align-items: center; }
.target { font-size: clamp(2.2rem, 11vw, 3.4rem); font-weight: 800; letter-spacing: .01em; overflow-wrap: anywhere; line-height: 1.1; }
.meaning { font-size: 1.02em; }
.sentence { font-size: 1.12em; font-weight: 600; }
.gap { display: inline-block; min-width: 3.5em; border-bottom: 3px solid var(--accent); }
.dots { display: flex; gap: 5px; justify-content: center; }
.dots i { width: 22px; height: 6px; border-radius: 9px; background: var(--line); } .dots i.on { background: var(--accent); }
.typed { min-height: 58px; width: 100%; border: 2px solid var(--line); background: var(--surface); border-radius: 14px; padding: 10px 14px; font-size: 1.6em; font-weight: 700; letter-spacing: .05em; display: flex; align-items: center; justify-content: center; overflow-wrap: anywhere; text-align: center; }
.typed.long { font-size: 1.05em; letter-spacing: 0; justify-content: flex-start; text-align: left; min-height: 96px; align-items: flex-start; font-weight: 500; }
.typed .caret { display: inline-block; width: 2px; height: 1em; background: var(--accent); margin-left: 2px; animation: blink 1.1s steps(1) infinite; }
.kb { display: flex; flex-direction: column; gap: 5px; margin-top: auto; user-select: none; }
.kb div { display: flex; gap: 4px; justify-content: center; }
.kb button { flex: 1 1 0; min-width: 0; min-height: 50px; padding: 0; border-radius: 9px; font-size: 1.05em; font-weight: 600; border-width: 1px; }
.kb button.wide { flex: 1.6 1 0; font-size: .85em; } .kb button.space { flex: 4 1 0; } .kb button.go { flex: 2 1 0; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-size: .9em; font-weight: 700; }
.options { display: flex; flex-direction: column; gap: 8px; }
.options button { text-align: left; font-size: 1.1em; min-height: 56px; }
.options button.spell { text-align: center; font-weight: 700; letter-spacing: .03em; }
.options button.good { background: var(--soft); border-color: var(--right); }
.fb { border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; animation: pop .25s ease-out; }
.fb.great { background: var(--soft); } .fb.try { background: var(--try); color: var(--try-ink); }
.fb h3 { font-size: 1.1em; }
.cmp { font-size: 1.35em; font-weight: 700; letter-spacing: .05em; overflow-wrap: anywhere; }
.cmp .x { color: var(--gold); text-decoration: underline; }
.hint { background: var(--gold-soft); border-radius: 12px; padding: 8px 12px; font-weight: 600; }

/* Code Crack */
.grid { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.line { display: flex; gap: 5px; }
.tile { width: clamp(30px, 11vw, 44px); height: clamp(36px, 12vw, 48px); border: 2px solid var(--line); border-radius: 8px; display: grid; place-items: center; font-weight: 800; text-transform: uppercase; background: var(--surface); }
.tile.right { background: var(--right); border-color: var(--right); color: #fff; }
.tile.near { background: var(--near); border-color: var(--near); color: #fff; }
.tile.no { background: var(--no); border-color: var(--no); color: #fff; }
.kb button.k-right { background: var(--right); border-color: var(--right); color: #fff; }
.kb button.k-near { background: var(--near); border-color: var(--near); color: #fff; }
.kb button.k-no { background: var(--no); border-color: var(--no); color: #fff; opacity: .75; }

/* Spot the typo */
.tap-sentence { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tap-sentence button { min-height: 48px; padding: 6px 10px; font-weight: 600; }

/* Text Thread */
.chat { display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 84%; padding: 10px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); align-self: flex-start; }
.bubble.me { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.bubble small { display: block; font-size: .7em; opacity: .75; }

/* Block Drop */
.game.arcade { border-color: var(--gold); }
canvas.board { display: block; margin: 0 auto; height: min(56dvh, 150vw); max-width: 100%; aspect-ratio: 12 / 18; border-radius: 10px; }
.pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: auto; }
.pad button { min-height: 64px; font-size: 1.5em; }

/* Lists */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-block: 10px; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: none; }
.list li > div { min-width: 0; flex: 1 1 180px; overflow-wrap: anywhere; }
.list small { color: var(--muted); display: block; }
pre.report { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .85em; margin: 0; background: var(--bg); border-radius: 12px; padding: 12px; }
.cert-win { border: 2px solid var(--gold); background: var(--gold-soft); }
canvas.preview { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
@keyframes pop { from { transform: scale(.97); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }