/* Město, jméno, zvíře, věc: the round's letter and the clock on top, the
   players' plates, then one sheet of ruled paper (the lines to write on, the
   doubtful words, the table of the round) and one button at the bottom.
   With the phone keyboard up (.kb) the plates make room and the letter
   shrinks, so that the letter, the clock and the line being written stay
   in sight above the keyboard. */
.mesto{
  --L:clamp(62px,19vw,92px); /* the letter's tile */
  --mesto-kb:0px;            /* how much of the screen the keyboard covers */
  position:absolute;inset:0;margin:0 auto;max-width:680px;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;
  padding-bottom:var(--mesto-kb);
  overflow:hidden;
}

/* ── letter, round, clock ────────────────────────────────────────────── */
.mesto-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 14px 6px}
.mesto-letter{
  width:var(--L);height:var(--L);display:grid;place-items:center;
  border-radius:calc(var(--L)*.17);background:var(--ivory);color:var(--cherry);
  box-shadow:0 10px 22px -12px rgba(0,0,0,.9),inset 0 -3px 0 rgba(23,23,15,.14);
  transform:rotate(-3deg);
}
.mesto-letter b{font-family:var(--display);font-weight:400;font-size:calc(var(--L)*.8);line-height:1;margin-top:-.06em}
.mesto-letter.two b{font-size:calc(var(--L)*.54);letter-spacing:-.03em}
.mesto-info{display:grid;gap:4px;justify-items:start;min-width:0}
.mesto-round{margin:0;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
.mesto-status{justify-self:start;padding:.35em .85em;font-size:.9rem;text-align:left;max-width:100%}
.mesto-status:not(.go){padding-left:0}
.mesto-clock{display:grid;justify-items:center;gap:3px;min-width:58px}
.mesto-clock[hidden]{display:none}
.mesto-sec{font-family:var(--display);font-weight:400;font-size:2.3rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--gold)}
.mesto-bar{display:block;width:56px;height:5px;border-radius:999px;background:var(--line);overflow:hidden}
.mesto-bar i{display:block;height:100%;background:var(--gold);transform-origin:0 50%;transition:transform .2s linear}
.mesto-clock.low .mesto-sec{color:#ff8fa5;animation:mesto-beat 1s ease-in-out infinite}
.mesto-clock.low .mesto-bar i{background:var(--cherry)}
@keyframes mesto-beat{50%{transform:scale(1.14)}}

/* ── plates ──────────────────────────────────────────────────────────── */
.mesto-plates{display:flex;gap:6px;padding:4px 10px 6px}
.mesto-plate{
  position:relative;display:flex;align-items:center;gap:6px;
  flex:1 1 0;min-width:0;min-height:40px;padding:3px 9px 3px 4px;
  border:1.5px solid var(--line);border-radius:999px;background:rgba(13,18,10,.3);
}
.mesto-plate .ava{width:30px;height:30px;font-size:.9rem;flex:none}
.mesto-plate .ava .chipico{width:14px;height:14px;right:-4px;bottom:-3px;padding:1.5px}
.mesto-who{display:grid;line-height:1.15;min-width:0;flex:1}
.mesto-who .nm{font-weight:600;font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mesto-who .sub{font-size:.68rem;color:var(--mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mesto-total{flex:none;font-size:.95rem;font-variant-numeric:tabular-nums;color:var(--ivory)}
.mesto-plate.ahead .mesto-total,.mesto-plate.best .mesto-total{color:var(--gold)}
.mesto-plate.me{border-color:rgba(244,240,232,.42)}
.mesto-plate.best{border-color:var(--gold);background:rgba(118,176,67,.13)}
/* finished with this stage: a gold tick on the avatar */
.mesto-tick{
  position:absolute;left:22px;top:-3px;width:17px;height:17px;border-radius:50%;
  background:var(--gold) center/72% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23241a2d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow:0 0 0 2px var(--plum-2);
  transform:scale(0);transition:transform .2s var(--ease);
}
.mesto-plate.ok .mesto-tick{transform:scale(1)}
@media (max-width:440px){
  .mesto-plates[data-n="4"] .mesto-who{display:none}
  .mesto-plates[data-n="4"] .mesto-plate{justify-content:space-between;padding-right:10px}
  .mesto-plates[data-n="3"] .mesto-plate .ava{width:26px;height:26px;font-size:.8rem}
  .mesto-plates[data-n="3"] .mesto-tick{left:18px}
}

/* ── the sheet ───────────────────────────────────────────────────────── */
.mesto-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 10px 8px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.mesto-sheet{
  border-radius:10px;background:var(--ivory);color:var(--ink);
  box-shadow:0 14px 28px -16px rgba(0,0,0,.9);
}
.mesto [hidden]{display:none}

/* writing: a ruled line per category, the margin line of a school notebook */
.mesto-form{margin:0;padding:2px 0}
.mesto-row{
  display:grid;grid-template-columns:5.6em minmax(0,1fr) 30px;align-items:stretch;
  min-height:50px;border-bottom:1px solid rgba(40,90,150,.28);cursor:text;
}
.mesto-row:last-child{border-bottom:0}
.mesto-cat{
  display:flex;align-items:center;padding:0 8px 0 12px;
  font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(23,23,15,.66);
  border-right:1.5px solid rgba(201,42,42,.5);
}
/* the shell dresses every text field as a dark pill; here it is a line of the paper */
.mesto-row input.mesto-in{
  min-width:0;width:100%;min-height:0;padding:10px 4px 10px 10px;
  border:0;border-radius:0;background:none;outline:0;
  font:500 1.14rem/1.2 var(--ui);color:var(--ink);
}
.mesto-row input.mesto-in:disabled{opacity:1;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.mesto-row:focus-within{background:rgba(118,176,67,.3)}
.mesto-row:focus-within .mesto-cat{color:var(--ink)}
.mesto-mark{align-self:center;justify-self:center;width:20px;height:20px;border-radius:50%;background:center/100% no-repeat}
.mesto-row.fine .mesto-mark{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.4 3.4L15 6.5' fill='none' stroke='%23241a2d' stroke-opacity='.5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.mesto-row.bad .mesto-mark{background-color:var(--cherry);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v6.2' stroke='%23fbf5ea' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.6' r='1.4' fill='%23fbf5ea'/%3E%3C/svg%3E")}
.mesto-row.bad input.mesto-in{color:var(--cherry);-webkit-text-fill-color:var(--cherry)}
.mesto-form.locked{background:#efe7d8}
.mesto-form.locked .mesto-row{cursor:default}

/* the review: one card for every doubtful word */
.mesto-review{display:grid;gap:8px;align-content:start}
.mesto-lead{margin:2px 4px 2px;font-size:.9rem;line-height:1.3;color:var(--mist)}
.mesto-card{
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"cat verdict" "word verdict" "by verdict";align-items:center;column-gap:10px;
  padding:9px 10px 9px 13px;border-radius:10px;background:var(--ivory);color:var(--ink);
  box-shadow:0 12px 24px -16px rgba(0,0,0,.9);
}
.mesto-cardcat{grid-area:cat;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(23,23,15,.66)}
.mesto-word{grid-area:word;font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1.15;overflow-wrap:anywhere}
.mesto-by{grid-area:by;font-size:.8rem;color:rgba(23,23,15,.7);overflow-wrap:anywhere}
.mesto-verdict{grid-area:verdict;display:grid;gap:6px}
.mesto-verdict button{
  min-width:5.6em;min-height:44px;padding:.3em .9em;
  font:600 .92rem/1.1 var(--ui);color:var(--ink);
  border:1.5px solid rgba(23,23,15,.3);border-radius:999px;background:none;cursor:pointer;
}
.mesto-verdict button:disabled{cursor:default;opacity:.55}
.mesto-yes[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--ivory);opacity:1}
.mesto-no[aria-pressed=true]{background:var(--cherry);border-color:var(--cherry);color:var(--ivory);opacity:1}
.mesto-note{grid-area:verdict;max-width:9em;font-size:.8rem;line-height:1.25;text-align:right;color:rgba(23,23,15,.7)}
.mesto-card.own{background:#efe7d8}

/* the table of a round: categories down, players across */
.mesto-table{padding:2px 4px 8px}
.mesto-tab{width:100%;border-collapse:collapse;table-layout:fixed}
.mesto-tab th,.mesto-tab td{padding:7px 4px;border-bottom:1px solid rgba(40,90,150,.28);vertical-align:top;text-align:center}
.mesto-tab tbody th,.mesto-tab tfoot th,.mesto-corner{
  width:4.7em;padding-left:8px;text-align:left;vertical-align:middle;
  font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(23,23,15,.66);
  border-right:1.5px solid rgba(201,42,42,.5);
}
.mesto-corner b{font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1;letter-spacing:0;color:var(--cherry)}
.mesto-tab thead th{font-size:.82rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.mesto-tab thead th.me{box-shadow:inset 0 -3px 0 var(--gold)}
.mesto-ans{display:block;font-size:.9rem;line-height:1.2;font-weight:500;overflow-wrap:anywhere;min-height:1.2em}
.mesto-tab td.bad .mesto-ans,.mesto-tab td.no .mesto-ans,.mesto-tab td.unknown .mesto-ans{color:var(--cherry);text-decoration:line-through}
/* a word the lists do not know: why, and the button that reports it */
.mesto-why{display:block;font-size:.62rem;line-height:1.2;color:rgba(23,23,15,.66)}
.mesto-rep{
  display:block;margin:4px auto 0;min-height:32px;padding:.25em .8em;border:1px solid rgba(23,23,15,.35);border-radius:999px;
  background:transparent;font:600 .7rem/1.1 var(--ui);color:var(--ink);cursor:pointer;
}
.mesto-rep:active{background:rgba(23,23,15,.08)}
.mesto-tab td.none .mesto-ans{color:rgba(23,23,15,.4)}
/* points: 20 gold, 10 ink, 5 an outline, 0 faint */
.mesto-pts{
  display:inline-block;min-width:2.1em;margin-top:3px;padding:.12em .4em;border-radius:999px;
  font-size:.74rem;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums;text-align:center;
  border:1.5px solid transparent;
}
.mesto-pts.p20{background:var(--gold);color:var(--ink);box-shadow:0 0 0 1.5px rgba(196,130,20,.6)}
.mesto-pts.p10{background:var(--ink);color:var(--ivory)}
.mesto-pts.p5{border-color:rgba(23,23,15,.62);color:var(--ink)}
.mesto-pts.p0{color:rgba(23,23,15,.38)}
.mesto-tab tfoot td{vertical-align:middle;font-variant-numeric:tabular-nums}
.mesto-tab .gain td{font-weight:700;font-size:.95rem}
.mesto-tab .sum th,.mesto-tab .sum td{border-bottom:0}
.mesto-tab .sum td{font-family:var(--display);font-size:1.45rem;line-height:1.1}
.mesto-key{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;margin:8px 4px 0;font-size:.72rem;color:rgba(23,23,15,.7)}
.mesto-key span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.mesto-key .mesto-pts{margin:0}

/* ── the button ──────────────────────────────────────────────────────── */
.mesto-foot{display:flex;justify-content:center;padding:6px 10px 10px}
.mesto-go{width:min(100%,22rem);min-height:50px}

.mesto-sum{margin:.2em 0 .6em;font-size:.9rem;opacity:.75;text-align:center}

/* ── the keyboard is up ──────────────────────────────────────────────── */
.mesto.kb{--L:46px}
.mesto.kb .mesto-head{padding:4px 12px 3px;gap:10px}
.mesto.kb .mesto-plates,.mesto.kb .mesto-round{display:none}
.mesto.kb .mesto-sec{font-size:1.7rem}
.mesto.kb .mesto-body{padding-top:2px;padding-bottom:4px}
.mesto.kb .mesto-row{min-height:46px}
.mesto.kb .mesto-foot{padding:3px 10px 5px}
.mesto.kb .mesto-go{min-height:44px}

/* a short screen: everything a little tighter */
@media (max-height:600px){
  .mesto{--L:clamp(52px,15vw,64px)}
  .mesto-head{padding:5px 12px 3px}
  .mesto-sec{font-size:1.9rem}
  .mesto-plates{padding:2px 8px 4px}
  .mesto-plate{min-height:36px}
  .mesto-plate .ava{width:26px;height:26px;font-size:.8rem}
  .mesto-tick{left:18px}
  .mesto-row{min-height:46px}
  .mesto-foot{padding:4px 10px 6px}
  .mesto-go{min-height:46px}
  .mesto-tab th,.mesto-tab td{padding:5px 3px}
}
/* a wide screen: more air, larger words */
@media (min-width:700px) and (min-height:620px){
  .mesto-head{padding-top:18px;gap:18px}
  .mesto-row{grid-template-columns:7.5em minmax(0,1fr) 36px;min-height:58px}
  .mesto-cat{font-size:.82rem;padding-left:18px}
  .mesto-row input.mesto-in{font-size:1.3rem;padding-left:16px}
  .mesto-ans{font-size:1rem}
  .mesto-tab tbody th,.mesto-tab tfoot th,.mesto-corner{width:7em;font-size:.76rem;padding-left:16px}
  .mesto-tab th,.mesto-tab td{padding:7px 6px}
  .mesto-foot{padding-bottom:22px}
}
@media (prefers-reduced-motion:reduce){
  .mesto-clock.low .mesto-sec{animation:none}
  .mesto-bar i,.mesto-tick{transition:none}
}
/* four columns of words on a narrow phone */
@media (max-width:400px){
  .mesto-tab[data-n="4"] .mesto-ans{font-size:.76rem}
  .mesto-tab[data-n="4"] tbody th,.mesto-tab[data-n="4"] tfoot th,.mesto-tab[data-n="4"] .mesto-corner{width:5.6em;padding-left:5px;font-size:.6rem;letter-spacing:0}
  .mesto-tab[data-n="4"] thead th{font-size:.74rem}
  .mesto-tab[data-n="4"] td{padding-left:2px;padding-right:2px}
}