:root {
  --bg: #fafafa;
  --fg: #1a1a1a;
  --muted: #6b7280;
  --line: #e5e7eb;
  --card: #ffffff;
  --green: #6aaa64;
  --yellow: #c9b458;
  --gray: #c7ccd1;
  --accent: #1a1a1a;
  --radius: 10px;
  --maxw: 560px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121213; --fg: #f3f4f6; --muted: #9ca3af; --line: #2a2a2c;
    --card: #1c1c1e; --gray: #3a3a3c; --accent: #f3f4f6;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh;
}

.topbar {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem; border-bottom: 1px solid var(--line);
  max-width: var(--maxw); width: 100%; margin: 0 auto;
}
.logo { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin: 0; flex: 1; }
.modeswitch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.mode-btn {
  border: 0; background: transparent; color: var(--muted);
  padding: .35rem .8rem; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.mode-btn[aria-pressed="true"] { background: var(--accent); color: var(--bg); }
.icon-btn {
  border: 1px solid var(--line); background: var(--card); color: var(--fg);
  width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer; font-weight: 700;
}

main { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 1rem; }
.puzzle-no { text-align: center; color: var(--muted); font-size: .8rem; letter-spacing: .12em; margin: .2rem 0 1rem; }

.specimen {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1rem; text-align: center; margin-bottom: 1rem; min-height: 120px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.specimen-text {
  font-size: clamp(2.4rem, 12vw, 4rem); line-height: 1.05; word-break: break-word;
  /* font-family set at runtime to the mystery font */
}
.reveal-hint { margin-top: .9rem; color: var(--muted); font-size: .9rem; font-style: italic; max-width: 40ch; }

.guess-area { display: flex; gap: .5rem; margin-bottom: .75rem; }
.combo { position: relative; flex: 1; }
#guess-input {
  width: 100%; padding: .7rem .8rem; font-size: 1rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--card); color: var(--fg);
}
.autocomplete {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  list-style: none; margin: 0; padding: .25rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); max-height: 240px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.autocomplete li { padding: .5rem .6rem; border-radius: 6px; cursor: pointer; }
.autocomplete li[aria-selected="true"], .autocomplete li:hover { background: var(--line); }
.ac-name { font-size: 1.05rem; }
.ac-meta { color: var(--muted); font-size: .75rem; margin-left: .4rem; }

.primary {
  border: 0; background: var(--accent); color: var(--bg); font-weight: 700;
  padding: .7rem 1.1rem; border-radius: var(--radius); cursor: pointer; font-size: 1rem;
}
.primary:disabled { opacity: .5; cursor: not-allowed; }

.casual-options { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; }
.casual-opt {
  padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); color: var(--fg); cursor: pointer; font-size: 1rem; font-weight: 600;
  text-align: center; transition: opacity .15s;
}
.casual-opt:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }

.legend { display: flex; gap: 1rem; justify-content: center; color: var(--muted); font-size: .78rem; margin: .5rem 0 1rem; flex-wrap: wrap; }

.board { display: flex; flex-direction: column; gap: .4rem; }
.row { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; }
.tile {
  aspect-ratio: 1 / 1; border-radius: 8px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #fff; font-weight: 700;
  text-align: center; padding: 2px; min-height: 48px;
}
.tile .t-label { font-size: .58rem; opacity: .9; text-transform: uppercase; letter-spacing: .03em; line-height: 1; }
.tile .t-val { font-size: .72rem; line-height: 1.1; margin-top: 2px; }
.tile .t-arrow { font-size: .9rem; line-height: 1; }
.tile.green { background: var(--green); }
.tile.yellow { background: var(--yellow); }
.tile.gray { background: var(--gray); color: var(--fg); }
.row-guess-name { grid-column: 1 / -1; font-size: .75rem; color: var(--muted); margin-top: -.1rem; }

.endgame { text-align: center; margin-top: 1.25rem; }
.endgame-msg { font-size: 1.15rem; font-weight: 700; }
.answer-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem; margin: .75rem 0;
}
.answer-name { font-size: 1.5rem; font-weight: 800; }
.answer-meta { color: var(--muted); font-size: .85rem; margin-top: .3rem; }
.streak { font-weight: 700; margin-top: .8rem; }
.next-in { color: var(--muted); font-size: .85rem; }

.foot { text-align: center; color: var(--muted); font-size: .75rem; padding: 1rem; border-top: 1px solid var(--line); }
.foot a { color: var(--muted); }

dialog {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--fg);
  max-width: 440px; padding: 1.5rem;
}
dialog::backdrop { background: rgba(0,0,0,.5); }
dialog h2 { margin-top: 0; }
dialog ul { padding-left: 1.1rem; }
dialog li { margin: .2rem 0; }

.toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%);
  background: var(--accent); color: var(--bg); padding: .6rem 1rem; border-radius: var(--radius);
  font-weight: 600; z-index: 50; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.toast.show { opacity: 1; }