/*
 * വാക്ക് · Vaakku
 * Palette: lime-washed wall, backwater ink, banana-leaf green, kasavu brass,
 * laterite red for focus. Type: Baloo Chettan 2 for letters on the board,
 * Anek Malayalam for everything you tap and read.
 */
:root {
  --bg: #F3F5EF;
  --surface: #FFFFFF;
  --ink: #16271F;
  --ink-soft: #56675D;
  --line: #CAD3CB;
  --line-strong: #8C9B91;
  --key: #DEE5DC;
  --hit: #257A4B;
  --near: #B8820F;
  --miss: #6E7A73;
  --strike: rgba(22, 39, 31, 0.5);
  --hint: #E07A1F;
  --on-state: #FFFFFF;
  --accent: #A3462B;
  --gold: #C29B2A;
  --overlay: rgba(14, 26, 20, 0.5);
  --shadow: 0 18px 50px rgba(14, 26, 20, 0.25);
  --font-ui: "Anek Malayalam", "Noto Sans Malayalam", "Manjari", "Kartika", system-ui, sans-serif;
  --font-display: "Baloo Chettan 2", "Anek Malayalam", "Noto Sans Malayalam", "Kartika", system-ui, sans-serif;
  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1713;
    --surface: #17221C;
    --ink: #E3EBE5;
    --ink-soft: #98A99F;
    --line: #2E3C34;
    --line-strong: #5E7065;
    --key: #28352E;
    --hit: #2C8A55;
    --near: #B8820F;
    --miss: #3E4943;
    --strike: rgba(227, 235, 229, 0.55);
    --hint: #F39A45;
    --accent: #E38561;
    --gold: #C9A43A;
    --overlay: rgba(0, 0, 0, 0.6);
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0F1713;
  --surface: #17221C;
  --ink: #E3EBE5;
  --ink-soft: #98A99F;
  --line: #2E3C34;
  --line-strong: #5E7065;
  --key: #28352E;
  --hit: #2C8A55;
  --near: #B8820F;
  --miss: #3E4943;
  --strike: rgba(227, 235, 229, 0.55);
  --hint: #F39A45;
  --accent: #E38561;
  --gold: #C9A43A;
  --overlay: rgba(0, 0, 0, 0.6);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.app {
  height: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding-inline: 16px;
  display: flex;
  flex-direction: column;
}

/* ----- Header, edged like a kasavu border */
.masthead {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  padding-block: 10px 8px;
  border-bottom: 5px double var(--gold);
}
.brand { display: flex; align-items: baseline; gap: 6px; margin-right: auto; min-width: 0; }
.name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 27px;
  line-height: 1.1;
}
.edition { font-size: 13px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tools { display: flex; align-items: center; gap: 6px; }
.icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
/* Type in English: abc → അ */
.en-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 11px 0 9px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.en-toggle svg { flex: none; color: var(--ink-soft); }
.en-toggle-text { padding-top: 2px; }
.en-toggle .arrow { margin-inline: 2px; color: var(--ink-soft); font-weight: 500; }
.en-toggle[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.en-toggle[aria-pressed="true"] svg, .en-toggle[aria-pressed="true"] .arrow { color: inherit; }

/* ----- Board: as many boxes to a row as today's word has letters */
.play {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-block: 10px 12px;
}
.board-wrap {
  position: relative;
  flex: 1 1 0;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}
.board {
  --cols: 4;
  --rows: 6;
  --tile-max: 76px;
  width: min(100cqw, calc(100cqh * var(--cols) / (var(--rows) * 0.95)), calc(var(--cols) * var(--tile-max)));
  aspect-ratio: var(--cols) / calc(var(--rows) * 0.95);
  display: grid;
  grid-template-rows: repeat(var(--rows), 1fr);
  gap: 5px;
  container-type: inline-size;
}
.row { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 5px; }
.tile {
  --tile: calc(100cqw / var(--cols));
  display: grid;
  place-items: center;
  min-width: 0;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(13px, calc(var(--tile) * 0.44));
  line-height: 1;
  padding-top: 0.12em;
  white-space: nowrap;
  user-select: none;
}
.tile[data-size="m"] { font-size: max(12px, calc(var(--tile) * 0.36)); }
.tile[data-size="l"] { font-size: max(11px, calc(var(--tile) * 0.28)); }
.tile.filled:not([data-state]) { border-color: var(--line-strong); animation: pop 120ms ease-out; }
.row.typing .tile { cursor: pointer; }
.tile.active { border-color: var(--accent); box-shadow: inset 0 -4px 0 var(--accent); }
.tile.active.replace { animation: blink 1s ease-in-out infinite; }
@keyframes blink { 50% { border-color: var(--line-strong); box-shadow: inset 0 -4px 0 transparent; } }
.tile[data-state] { color: var(--on-state); border-color: transparent; }
.tile[data-state="hit"] { background: var(--hit); }
.tile[data-state="near"] { background: var(--near); }
.tile[data-state="miss"] { background: var(--miss); }
.tile.flip {
  animation: flip 560ms ease-in-out both;
  animation-delay: calc(var(--i) * 280ms);
  transition: background-color 0s, background-image 0s, border-color 0s, color 0s;
  transition-behavior: allow-discrete;
  transition-delay: calc(var(--i) * 280ms + 280ms);
}
.row.shake { animation: shake 420ms; }
.row.win .tile { animation: bounce 760ms ease both; animation-delay: calc(var(--i) * 90ms); }

@keyframes pop { 50% { transform: scale(1.08); } }
@keyframes flip { 50% { transform: rotateX(90deg); } }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
@keyframes bounce {
  0%, 20% { transform: translateY(0); }
  40% { transform: translateY(-14px); }
  50% { transform: translateY(2px); }
  60% { transform: translateY(-5px); }
  80%, 100% { transform: translateY(0); }
}

.toast {
  position: absolute;
  top: 4px;
  left: 50%;
  z-index: 5;
  max-width: calc(100% - 16px);
  padding: 9px 14px 7px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -6px);
  transition: opacity 160ms, transform 160ms;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ----- Letters under the current tile: its conjuncts, then its vowel forms */
.forms {
  display: grid;
  gap: 5px;
  min-height: 77px;
  align-content: start;
}
.strip {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  padding-right: 18px;
}
.strip::-webkit-scrollbar { display: none; }
.form {
  flex: 0 0 auto;
  min-width: 40px;
  height: 36px;
  padding: 3px 8px 0;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.strip.family .form { background: var(--key); border-color: transparent; font-weight: 600; }
.form[data-size="m"] { font-size: 16px; }
.form[data-size="l"] { font-size: 14px; }
.form[aria-pressed="true"] { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--bg); }
.forms-hint {
  grid-column: 1 / -1;
  min-height: 77px;
  margin: 0;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 15px;
  text-align: center;
  line-height: 1.3;
}
.forms-hint small { font-size: 13px; }
.forms-hint .start { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; color: var(--ink); font-weight: 600; }
.start-word {
  height: 32px;
  border: 2px solid var(--gold) !important;
  background: color-mix(in srgb, var(--gold) 14%, var(--surface)) !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
}
.pill {
  margin-top: 2px;
  padding: 5px 14px 3px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ----- Typing in English: the box under the board; the words it could be come in the strip below it */
.forms-cap { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.35; }
.strip.words .form { height: 38px; font-size: 19px; font-weight: 600; }
.english { min-height: 0; }
.en-field { position: relative; }
.en-field input {
  width: 100%;
  height: 40px;
  padding: 2px 42px 0 12px;
  border: 2px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  font-size: 17px; /* 16px or more, or iPhones zoom in */
  font-weight: 500;
  letter-spacing: 0.02em;
}
.en-field input:focus { outline: none; border-color: var(--accent); }
.en-field input::placeholder { color: var(--ink-soft); opacity: 0.85; letter-spacing: 0; }
.en-field input:disabled { opacity: 0.6; }
.en-clear {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/*
 * ----- Aksharamaala: a group of keys to a line, all alike. The vowels run in one
 * line across the top; below, each varga has a line of its own beside യ to ഴ, the
 * chillus, റ with ◌ം ◌് ⌫, and ശരി. On wider screens the same groups sit in four
 * lines. app.js names each group's grid area.
 */
.keys {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-areas:
    "vowels vowels vowels vowels vowels vowels vowels vowels vowels vowels"
    "v0 v0 v0 v0 v0 ya ya ya ya ya"
    "v1 v1 v1 v1 v1 sha sha sha sha sha"
    "v2 v2 v2 v2 v2 chillus chillus chillus chillus chillus"
    "v3 v3 v3 v3 v3 ra signs signs back back"
    "v4 v4 v4 v4 v4 enter enter enter enter enter";
  gap: 6px 10px;
}
.key-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  gap: 4px;
  border-radius: 8px;
  transition: box-shadow 200ms ease, background-color 200ms ease;
}
.key-line.vowels { gap: 3px; }
/* One of this varga's letters is in the word: an orange ring round the line, with a small tag saying so */
.key-line.hint {
  background: color-mix(in srgb, var(--hint) 22%, transparent);
  box-shadow: 0 0 0 2.5px var(--hint);
}
.hint-tag {
  display: none;
  position: absolute;
  z-index: 2;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px 0;
  border-radius: 999px;
  background: var(--hint);
  color: #1D1006;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.key-line.hint .hint-tag { display: block; }
.key {
  height: 42px;
  height: clamp(34px, 5.4dvh, 46px);
  min-width: 0;
  padding: 3px 0 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: var(--key);
  color: var(--ink);
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.key-line.vowels .key { font-size: 17px; }
.key.action { font-size: 16px; font-weight: 700; }
.key.enter { background: var(--ink); color: var(--bg); }
.key.sign { font-size: 22px; }
.key[data-state="hit"], .key[data-state="near"] { color: var(--on-state); }
.key[data-state="hit"] { background: var(--hit); }
.key[data-state="near"] { background: var(--near); }
/* Not in the word: the key keeps its colour, faded, with a light line across it */
.key[data-state="miss"] {
  color: var(--ink-soft);
  background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--strike) calc(50% - 1px), var(--strike) calc(50% + 1px), transparent calc(50% + 1px));
}
.key[data-state="miss"]:not(:active) { opacity: 0.75; }
.key:active, .form:active { transform: translateY(1px); filter: brightness(0.94); }

/* Wider screens: the same groups in four long lines */
@media (min-width: 640px) {
  .app { max-width: 760px; }
  .keys {
    grid-template-columns: repeat(15, minmax(0, 1fr));
    grid-template-areas:
      "vowels vowels vowels vowels vowels vowels vowels vowels vowels vowels vowels vowels vowels signs signs"
      "v0 v0 v0 v0 v0 v1 v1 v1 v1 v1 v2 v2 v2 v2 v2"
      "v3 v3 v3 v3 v3 v4 v4 v4 v4 v4 ya ya ya ya ya"
      "sha sha sha sha sha ra chillus chillus chillus chillus chillus back back enter enter";
    gap: 7px 12px;
  }
  .key-line, .key-line.vowels { gap: 5px; }
  .key { height: clamp(38px, 6.2dvh, 54px); font-size: 21px; }
  .key-line.vowels .key { font-size: 20px; }
  .board { --tile-max: 84px; gap: 6px; }
  .row { gap: 6px; }
}

/* Laptops and other wide, low screens: the board beside the keys, as tall as it can be */
@media (min-width: 980px) and (min-aspect-ratio: 5/4) {
  .app { max-width: 1200px; }
  .play {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 660px);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: clamp(28px, 4vw, 64px);
    row-gap: 14px;
    padding-block: 16px 20px;
  }
  .board-wrap { grid-column: 1; grid-row: 1 / -1; min-height: 0; }
  .forms, .english { grid-column: 2; grid-row: 2; }
  .keys { grid-column: 2; grid-row: 3; }
  .board { --tile-max: 96px; }
  .key { height: clamp(40px, 7dvh, 56px); }
}

/* Short phones: less air between the parts so the whole keyboard stays on screen */
@media (max-height: 700px) {
  .play { gap: 6px; padding-block: 6px 8px; }
  .board-wrap { min-height: 172px; }
  .keys { row-gap: 5px; }
  .forms, .forms-hint { min-height: 69px; }
  .form, .strip.words .form { height: 32px; }
  .en-field input { height: 36px; }
  .en-clear { top: 2px; }
  .key { height: clamp(32px, 5.2dvh, 46px); }
}
@media (max-height: 640px) {
  .board-wrap { min-height: 156px; }
}

/* A phone typing in English: its own keyboard takes the aksharamaala's place */
html.en-typing .keys { display: none; }
html.en-typing .app { height: var(--app-h, 100%); }
html.en-typing body { overflow: hidden; }

/* ----- Overlays */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
  background: var(--overlay);
}
.sheet:focus { outline: none; }
.sheet {
  position: relative;
  width: min(100%, 440px);
  max-height: 100%;
  overflow-y: auto;
  padding: 22px 20px 20px;
  border-top: 5px double var(--gold);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.close {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 1;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.sheet h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  text-wrap: balance;
}
.sheet h3 { margin: 18px 0 8px; font-size: 16px; }
.rules { margin: 0; padding-left: 18px; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; }
.example { display: grid; grid-template-columns: repeat(4, 48px); gap: 5px; margin-top: 10px; }
.example .tile { height: 48px; font-size: 19px; animation: none; }
.example-note { margin: 6px 0 0; font-size: 14px; line-height: 1.4; }
.key-example { margin-top: 12px; padding: 3px; }
.key-example .key-line { width: min(100%, 250px); grid-template-columns: repeat(5, 1fr); }
.key-example .key { height: 40px; cursor: default; }
.recipe { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; color: var(--ink-soft); }
kbd {
  min-width: 38px;
  padding: 7px 8px 4px;
  border-radius: 6px;
  background: var(--key);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 18px;
  text-align: center;
}
kbd.inline { padding: 2px 6px 0; font-size: 14px; font-weight: 700; white-space: nowrap; }
kbd.made { background: var(--hit); color: var(--on-state); font-family: var(--font-display); font-weight: 700; }
.fine { margin: 10px 0 0; font-size: 14px; line-height: 1.45; }

/* ----- Results and streak */
.stats-sheet { width: min(100%, 460px); }
.result { margin-bottom: 14px; text-align: center; }
.verdict { margin: 4px 0 0; font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--hit); }
.verdict.lost { color: var(--accent); }
.verdict-en { margin: 0; color: var(--ink-soft); font-size: 14px; }
.answer-card {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
  padding: 10px 18px 8px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
}
.answer-word { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.2; }
.answer-meaning { color: var(--ink-soft); font-size: 14px; }
.answer-meaning:empty { display: none; }

/* The streak: a clay lamp, lit while the days run on, and the last seven days */
.streak {
  display: grid;
  justify-items: center;
  margin: 0 0 14px;
  padding: 12px 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--gold) 13%, var(--surface));
  text-align: center;
}
.streak-lamp { width: 76px; height: 76px; overflow: visible; }
.streak-lamp .bowl { fill: #B8552B; }
.streak-lamp .oil { fill: #7E3517; }
.streak-lamp .foot { fill: #8F3E1C; }
.streak-lamp .wick { fill: #4A2E1A; }
.streak-lamp .glow { fill: #FFC857; opacity: 0.32; }
.streak-lamp .outer { fill: #F08A24; }
.streak-lamp .inner { fill: #FFE08A; }
.streak-lamp .flame { opacity: 0; transform-box: view-box; transform-origin: 32px 31px; }
.streak.lit .streak-lamp .flame { opacity: 1; animation: flicker 2.6s ease-in-out infinite; }
.streak.lit.ignite .streak-lamp .flame { animation: ignite 1s ease-out both, flicker 2.6s 1s ease-in-out infinite; }
.streak:not(.lit) .streak-lamp { filter: saturate(0.35); opacity: 0.7; }
@keyframes ignite {
  0% { opacity: 0; transform: scale(0.15); }
  55% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes flicker {
  0%, 100% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.03, 0.97) rotate(-1.5deg); }
  65% { transform: scale(0.98, 1.03) rotate(1.2deg); }
}
.streak-num { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 0; }
.streak-num strong { font-family: var(--font-display); font-size: 46px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.streak-num span { font-size: 17px; font-weight: 700; }
.streak-note { margin: 4px 0 10px; max-width: 34ch; color: var(--ink-soft); font-size: 14px; line-height: 1.35; }
.week {
  list-style: none;
  width: 100%;
  max-width: 330px;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.week li { display: grid; justify-items: center; gap: 4px; }
.week .wd { color: var(--ink-soft); font-size: 12px; font-weight: 600; line-height: 1; }
.week .is-today .wd { color: var(--ink); font-weight: 800; }
.week .dot {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px dashed var(--line-strong);
  border-radius: 50%;
  color: var(--on-state);
}
.week .dot svg { width: 16px; height: 16px; }
.week .won .dot { border: 0; background: var(--hit); }
.week .lost .dot { border: 0; background: var(--miss); }
.week .today .dot { border: 2.5px solid var(--accent); }
.week .before .dot { border: 0; background: color-mix(in srgb, var(--ink) 7%, transparent); }

.award-new {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 2px solid var(--gold);
  border-radius: 14px;
  background: color-mix(in srgb, var(--gold) 12%, var(--surface));
}
.award-new p { margin: 0; }
.award-new-kicker { color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: 0.02em; }
.award-new-name { font-family: var(--font-display); font-size: 23px; font-weight: 800; line-height: 1.2; }
.award-new-what { color: var(--ink-soft); font-size: 14px; }
.award-icon { display: block; width: 44px; height: 44px; }
.award-icon.big { width: 68px; height: 68px; }
.award-new.pop { animation: award-pop 800ms 500ms both cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes award-pop {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

.next {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 10px 10px 10px 14px;
  border-radius: 12px;
  background: var(--key);
  font-size: 14px;
}
.next strong { margin-right: auto; font-family: var(--font-display); font-size: 23px; font-variant-numeric: tabular-nums; }
.next .btn { min-width: 108px; }

.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.numbers div { display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: center; text-align: center; }
.numbers dd { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.numbers dt { font-size: 12px; line-height: 1.25; }
.dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.dist li { display: grid; grid-template-columns: 14px 1fr; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.dist .try { font-size: 14px; font-weight: 600; text-align: right; }
.dist .bar {
  display: block;
  width: var(--w);
  min-width: 26px;
  padding: 3px 8px 1px;
  border-radius: 4px;
  background: var(--miss);
  color: var(--on-state);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}
.dist li.mine .bar { background: var(--hit); }

.awards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.award {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 3px;
  padding: 10px 3px 8px;
  border-radius: 12px;
  background: var(--key);
  text-align: center;
}
.award-name { font-size: 13px; font-weight: 700; line-height: 1.2; }
.award-days { color: var(--ink-soft); font-size: 12px; line-height: 1.2; }
.award.locked .award-icon { filter: grayscale(1); opacity: 0.32; }
.award.locked .award-name { color: var(--ink-soft); }
.award.earned {
  background: color-mix(in srgb, var(--gold) 16%, var(--surface));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 65%, transparent);
}
.award-next { margin: 8px 0 0; color: var(--ink-soft); font-size: 13.5px; text-align: center; }
.saved-note { margin: 16px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 12.5px; line-height: 1.4; }

.btn {
  min-height: 44px;
  padding: 6px 12px 3px;
  border: 0;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.btn.primary { background: var(--hit); color: var(--on-state); }
.share-fallback {
  width: 100%;
  margin: -6px 0 16px;
  padding: 8px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.4 var(--font-ui);
  resize: none;
}

@media (max-width: 380px) {
  .masthead { gap: 6px; }
  .name { font-size: 24px; }
  .tools { gap: 4px; }
  .en-toggle { padding-inline: 8px 9px; gap: 4px; font-size: 13px; }
  .key { font-size: 17px; }
  .key-line.vowels .key { font-size: 15px; }
  .awards { gap: 5px; }
  .award-name { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .streak.lit .streak-lamp .flame { opacity: 1; }
}