:root {
  --bg: #FBF7F0;
  --card: #FFFFFF;
  --ink: #1F1B16;
  --muted: #7A7063;
  --line: #E9E1D3;
  --star: #F5A623;
  --star-off: #DDD5C7;
  --accent: #E4572E;
  --good: #23874C;
  --good-bg: #E3F3E9;
  --bad: #C73A3A;
  --bad-bg: #FBE6E4;
  --shadow: 0 1px 2px rgba(40, 30, 20, .05), 0 6px 18px rgba(40, 30, 20, .06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16130F;
    --card: #221E19;
    --ink: #F3EEE6;
    --muted: #A89E90;
    --line: #38312A;
    --star-off: #4A433A;
    --good: #5BD08B;
    --good-bg: #1C3325;
    --bad: #FF8A80;
    --bad-bg: #3A2020;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
button { -webkit-tap-highlight-color: transparent; }

/* Header */
.top {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 560px; width: 100%; margin: 0 auto; padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.logo { font-family: Fraunces, Georgia, serif; font-weight: 800; font-size: 28px; margin: 0; letter-spacing: -.02em; }
.logo span { color: var(--accent); }
.logo-star { color: var(--star); font-style: normal; font-size: .6em; vertical-align: super; margin-left: 2px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font: 700 17px Inter, sans-serif; cursor: pointer;
  display: grid; place-items: center;
}

/* Layout */
.wrap { max-width: 560px; width: 100%; margin: 0 auto; padding: 18px 16px 24px; flex: 1; }
.meta { display: flex; justify-content: space-between; align-items: center; }
.chip { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-weight: 600; font-size: 14px; }
.num { color: var(--muted); font-size: 14px; font-weight: 500; }
.prompt { font-family: Fraunces, Georgia, serif; font-size: 23px; font-weight: 600; margin: 12px 0 16px; line-height: 1.25; }

/* Reviews */
.reviews { display: flex; flex-direction: column; gap: 10px; }
.review { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); }
.review-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.stars { color: var(--star); letter-spacing: 2px; font-size: 17px; line-height: 1; }
.stars .off { color: var(--star-off); }
.who { font-size: 12px; color: var(--muted); font-weight: 500; }
.review p { margin: 0; font-size: 16px; }
.review.locked {
  background: transparent; box-shadow: none; border-style: dashed; color: var(--muted);
  font-size: 14px; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center;
}
.review.locked .stars { font-size: 13px; }
.review.reveal { animation: pop .45s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* Input */
.play { margin-top: 16px; }
#guessForm { display: flex; gap: 8px; }
.input-wrap { position: relative; flex: 1; }
#guessInput {
  width: 100%; height: 48px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink); padding: 0 14px; font: 500 16px Inter, sans-serif; outline: none;
}
#guessInput:focus { border-color: var(--accent); }
.suggestions {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); margin: 0; padding: 6px; list-style: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); z-index: 5; max-height: 264px; overflow: auto;
}
.suggestions li { padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.suggestions li.active, .suggestions li:hover { background: var(--bg); }
.suggestions mark { background: none; color: var(--accent); font-weight: 700; }

.btn { height: 48px; border-radius: 12px; border: 0; padding: 0 18px; font: 600 16px Inter, sans-serif; cursor: pointer; }
.btn.primary { background: var(--ink); color: var(--bg); }
.btn.primary:active { transform: scale(.98); }
.btn.ghost { background: none; color: var(--muted); width: 100%; margin-top: 6px; height: 40px; font-size: 14px; }
.btn.full { width: 100%; }

.guesses { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.guesses li { font-size: 14px; padding: 4px 10px; border-radius: 999px; background: var(--bad-bg); color: var(--bad); font-weight: 500; }
.guesses li.ok { background: var(--good-bg); color: var(--good); }
.guesses li.skip { background: var(--card); color: var(--muted); border: 1px solid var(--line); }

.done { margin-top: 16px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.done p { margin: 0 0 12px; }
.done b { font-family: Fraunces, Georgia, serif; font-size: 20px; }

.shake { animation: shake .35s; }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* Footer */
.foot { text-align: center; color: var(--muted); font-size: 13px; padding: 16px 16px 28px; }
.foot p { margin: 4px 0; }
.foot a { color: inherit; }

/* Dialogs */
dialog {
  border: 0; border-radius: 20px; padding: 0; background: var(--card); color: var(--ink);
  width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 40px); box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
dialog::backdrop { background: rgba(20, 15, 10, .5); }
.dlg { padding: 22px 20px 20px; position: relative; }
.dlg h2 { font-family: Fraunces, Georgia, serif; margin: 0 0 10px; font-size: 24px; }
.dlg h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 20px 0 10px; }
.close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 10px; border: 0; background: none; color: var(--muted); font-size: 26px; cursor: pointer; line-height: 1; }
.steps { padding-left: 20px; }
.steps li { margin-bottom: 6px; }
.example { background: var(--bg); border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.example div { display: flex; justify-content: space-between; padding: 3px 0; }
.muted { color: var(--muted); font-size: 14px; }

.result { text-align: center; }
.result-kicker { margin: 4px 0 0; font-weight: 600; color: var(--muted); }
.result-answer { font-size: 30px !important; margin: 2px 0 6px !important; }
.result-score { font-size: 22px; margin: 0 0 14px; }
.result-score span { display: block; font-size: 14px; color: var(--muted); }
.fact { background: var(--bg); border-radius: 12px; padding: 12px 14px; font-size: 14px; text-align: left; margin: 0 0 14px; }
.next { font-size: 14px; color: var(--muted); margin: 12px 0 0; }
.next b { color: var(--ink); font-variant-numeric: tabular-nums; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; gap: 4px; }
.stat-grid b { display: block; font-size: 26px; font-family: Fraunces, Georgia, serif; line-height: 1.2; }
.stat-grid span { font-size: 12px; color: var(--muted); }
.bar-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 13px; }
.bar-row > span { width: 26px; color: var(--muted); flex: none; }
.bar { background: var(--line); border-radius: 6px; padding: 1px 8px; text-align: right; font-weight: 600; min-width: 26px; }
.bar.hl { background: var(--star); color: #1F1B16; }

.toast {
  position: fixed; top: 70px; left: 50%; transform: translate(-50%, -8px);
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px;
  font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: .2s; z-index: 100;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }