:root {
  --bg: #faf7f0; --surface: #fff; --ink: #1a1a1a; --muted: #6b6b6b;
  --line: #e6e0d4; --accent: #c8102e; --amber: #d98a00; --good: #2e8b57; --radius: 14px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#14140f; --surface:#1e1e18; --ink:#f2efe6; --muted:#a19b8c; --line:#2e2e26;
          --accent:#ff5a6e; --amber:#e0a83a; --good:#5cc98a; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* beat the flex/grid display rules below */
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
}
.app {
  max-width: 480px; margin: 0 auto; min-height: 100svh;
  padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
.header { text-align: center; }
.logo { font-size: clamp(28px, 8vw, 40px); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.logo .q { color: var(--accent); }
.clue { color: var(--muted); margin: 8px 0 0; font-size: .98rem; }
.clue b { color: var(--ink); }

/* The "printed page" the sentence sits on */
.sheet {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 18px; box-shadow: 0 1px 0 var(--line);
}
.sentence {
  margin: 0; font-size: clamp(1.15rem, 5.4vw, 1.5rem); line-height: 1.7;
  font-family: Georgia, "Times New Roman", serif;
}

/* Each word is a chip you can tap to accuse it of being the misprint */
.word {
  display: inline; border: none; background: none; cursor: pointer;
  font: inherit; color: inherit; padding: 1px 2px; margin: 0; border-radius: 5px;
  -webkit-tap-highlight-color: transparent;
}
.word:hover { background: rgba(200,16,46,.08); }
.word.wrong { animation: shake .3s; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted); }
.word.found { background: rgba(217,138,0,.18); color: var(--amber); font-weight: 700; border-radius: 5px; }
.word.fixed { color: var(--good); font-weight: 700; background: rgba(46,139,87,.12); }
.word.dud   { cursor: default; }
.word.dud:hover { background: none; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }

.restore { display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.restore-label { font-size: .9rem; color: var(--muted); }
.restore-row { display: flex; gap: 10px; }
.restore-input {
  flex: 1; min-width: 0; padding: 12px 14px; font-size: 1.05rem; letter-spacing: .04em;
  font-family: ui-monospace, Menlo, Consolas, monospace; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg); color: var(--ink);
}
.restore-input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.restore-input.bad { animation: shake .3s; border-color: var(--accent); }

.submit {
  padding: 12px 16px; font-size: 1rem; font-weight: 700; color: #fff; white-space: nowrap;
  background: var(--accent); border: none; border-radius: 10px; cursor: pointer;
}
.submit:disabled { opacity: .4; cursor: not-allowed; }
.linkbtn { align-self: flex-start; background: none; border: none; color: var(--muted);
  font-size: .85rem; text-decoration: underline; cursor: pointer; padding: 0; }

.note { margin: 0; text-align: center; color: var(--muted); font-size: .9rem; min-height: 1.2em; }

.result { display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.score-line { margin: 0; font-size: 1.15rem; }
.wobble { margin: 0; text-align: center; color: var(--muted); font-size: .95rem; font-style: italic; }
.copied { color: var(--accent); font-size: .85rem; margin: 0; }
.foot { margin-top: auto; text-align: center; color: var(--muted); font-size: .78rem; }