/* Lacuna: quiet and editorial. The entry is set in a reading serif with
   square blanks where the subject was; when the round ends, the answer
   types itself into every blank, underlined. Mint is only its hub color. */

:root { --mint: #96f2d7; --serif: 'Source Serif 4', Georgia, serif; --won: #2f8a4c; --lost: #c0392b; }
.lacuna { --game: var(--mint); gap: 16px; padding-top: 14px; }

/* the top bar title, with its maker underneath */
.g-name { display: flex; flex-direction: column; align-items: center; }
.g-name .by { font: 600 11px/1.2 var(--ui); color: var(--muted); letter-spacing: 0.01em; }

.levels { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 999px; background: var(--wash); }
.levels .lv { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 600 14px var(--ui); color: var(--muted); }
.levels .lv.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.levels .lv i { width: 7px; height: 7px; border-radius: 50%; }
.levels .lv i.won { background: var(--won); }
.levels .lv i.lost { background: var(--lost); }

.entry { padding: 4px 0 0; }
.kicker { margin: 0 0 10px; font: 700 12px var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.text { margin: 0; font: 400 clamp(18px, 4.8vw, 20px)/1.6 var(--serif); color: var(--ink); overflow-wrap: break-word; }
.blank { display: inline-block; width: 2.8em; height: 1.05em; margin: 0 0.15em; vertical-align: -0.16em; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--paper); }
.fill { font-weight: 600; text-decoration: underline 3px; text-underline-offset: 5px; animation: write 0.4s var(--ease) backwards; animation-delay: calc(var(--i) * 80ms); }
.fill.won { text-decoration-color: var(--won); }
.fill.lost { text-decoration-color: var(--lost); }
@keyframes write { from { opacity: 0; } }
.source { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.source a { color: var(--ink); }

.hints { padding: 12px 14px; border-radius: 10px; background: var(--wash); }
.hints h2 { margin: 0 0 6px; font: 700 12px var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.hints p { margin: 0; font-size: 15px; line-height: 1.6; }
.hints p:empty { display: none; }
.hints .soon { color: var(--muted); }
.hints .letter { font: 900 18px var(--serif); }

.ask label { display: block; margin-bottom: 6px; font-size: 14px; }
.ask .row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ask input { height: 48px; min-width: 0; padding: 0 18px; border: 1.5px solid var(--rule); border-radius: 999px; font: 500 17px var(--ui); background: var(--paper); }
.ask input:focus { outline: none; border-color: var(--ink); }
.ask .btn { height: 48px; }

.tries { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tries li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--rule); font-size: 16px; }
.tries li em { font-style: normal; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.tries .wrong span { text-decoration: line-through; color: var(--muted); }
.tries .wrong em { color: var(--lost); }
.tries .right { border-color: var(--won); background: #eef7f0; }
.tries .right em { color: var(--won); }

/* the help's first line credits the game's maker */
.d-body .maker { margin: -8px 0 14px; font-size: 14px; font-weight: 600; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .fill { animation: none; }
}