/* Babel: terracotta. A stack of name cards, one per language, each word set
   big in a serif that can write every script here. Unrevealed cards wait
   as blank slots so you can see how many clues are left. */

:root { --clay: #e98c6e; --clay-ink: #9a3d22; --clay-wash: #fdf1ec; --word: 'Noto Serif', Georgia, serif; }
.babel { --game: var(--clay); gap: 14px; }

.lead { margin: 0; font: 700 22px/1.2 var(--slab); }

.clues { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.clue {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px;
  min-height: 60px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid #f0c9bb; background: var(--clay-wash);
}
.clue .lang { font-size: 13px; font-weight: 700; color: var(--clay-ink); text-align: right; }
.clue .word { font: 700 26px/1.15 var(--word); color: var(--ink); overflow-wrap: anywhere; }
.clue .latin { display: block; font: 500 14px var(--ui); color: var(--muted); }
.clue.new { animation: in 0.3s var(--ease); }
.clue.slot { min-height: 18px; padding: 0; border: 1.5px dashed var(--rule); background: transparent; height: 18px; }
.clue.all { opacity: 0.85; min-height: 48px; padding: 8px 14px; }
.clue.all .word { font-size: 20px; }
@keyframes in { from { opacity: 0; transform: translateY(6px); } }

.guess { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.guess input {
  height: 52px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--ink);
  font: 600 18px var(--ui); background: var(--paper);
}
.guess input:focus { outline: none; border-color: var(--clay-ink); }
.guess.shake { animation: shake 0.32s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.guess .btn { height: 52px; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tried { margin: 0; font-size: 14px; color: var(--muted); }
.tried s { text-decoration-color: var(--red); }

/* results */
.answer { margin: 0 0 4px; text-align: center; font: 700 40px/1 var(--slab); color: var(--clay-ink); }
.res-squares { display: flex; justify-content: center; gap: 4px; margin: 4px 0 8px; }
.res-squares i { width: 26px; height: 26px; background: var(--rule); }
.res-squares i.no { background: var(--red); }
.res-squares i.ok { background: var(--green); }
.every { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 8px 0 16px; font-size: 14.5px; }
.every b { font-family: var(--word); font-weight: 700; }
.every span { color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .clue.new, .guess.shake { animation: none; } }

/* the picker */
.pick { gap: 14px; }
.pick-head { text-align: center; padding: 6px 0 4px; }
.pick-icon { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 12px; background: var(--clay); }
.pick-icon svg { width: 46px; height: 46px; }
.pick-head h2 { margin: 12px 0 4px; font: 700 28px/1.1 var(--slab); }
.pick-head p { margin: 0; color: var(--muted); }
.mode {
  display: grid; gap: 6px; padding: 16px 18px; border-radius: 12px; border: 1.5px solid #f0c9bb;
  background: var(--clay-wash); color: var(--ink); text-decoration: none;
}
.mode:hover { border-color: var(--clay-ink); }
.mode-name { font: 700 24px/1.1 var(--slab); color: var(--clay-ink); }
.mode-desc { font-size: 15px; }
.mode-eg { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 8px 12px; border-radius: 8px; background: var(--paper); }
.mode-eg span { font: 500 17px var(--word); }
.mode-eg b { font-weight: 800; }
.mode-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.mode-status .done { font-size: 14px; font-weight: 700; }

/* Babel: Language */
.lwords { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lword { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px; min-height: 64px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid #f0c9bb; background: var(--clay-wash); }
.lword .word { font: 700 30px/1.15 var(--word); overflow-wrap: anywhere; }
.lword .means { font-size: 13px; font-weight: 700; color: var(--clay-ink); }
.lword.slot { min-height: 18px; height: 18px; padding: 0; border: 1.5px dashed var(--rule); background: transparent; }
.lword.new { animation: in 0.3s var(--ease); }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt {
  min-height: 56px; padding: 8px 10px; border-radius: 10px; border: 2px solid var(--ink); background: var(--paper); cursor: pointer;
  font: 700 17px var(--ui); touch-action: manipulation;
}
.opt:hover { background: var(--clay-wash); }
.opt.right { border-color: var(--green); background: #eef7ed; color: #2d6a28; }
.opt.wrong { border-color: var(--red); background: #fdf0ee; color: var(--red); }
.opt:disabled { cursor: default; }
.opt.dim { opacity: 0.45; }
.lrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lrow p { margin: 0; font-size: 14px; color: var(--muted); }
.lverdict { min-height: 22px; margin: 0; text-align: center; font-size: 16px; font-weight: 800; }
.lverdict.good { color: #3d7a37; }
.lverdict.bad { color: var(--red); }
.res-squares i.p3 { background: var(--green); }
.res-squares i.p2 { background: var(--yellow); }
.res-squares i.p1 { background: #e0a43a; }
.res-squares i.p0 { background: var(--red); }
.lsum { margin: 6px 0 16px; border-top: 1px solid var(--rule); }
.lsum p { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.lsum b { font-family: var(--word); }
.dots { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 5px; }
.dots li { width: 30px; height: 8px; border-radius: 4px; background: var(--rule); }
.dots li.now { background: var(--ink); }
.dots li.ok { background: var(--green); }
.dots li.no { background: var(--red); }