:root {
  --bg: #ffffff;
  --fg: #1a1a1b;
  --muted: #787c7e;
  --line: #d3d6da;
  --tile-empty-border: #d3d6da;
  --tile-filled-border: #878a8c;
  --key-bg: #d3d6da;
  --key-fg: #1a1a1b;
  --correct: #6aaa64;
  --present: #c9b458;
  --absent: #787c7e;
  --accent: #6aaa64;

  /* Tiles shrink for narrow screens and for short ones — six rows, each with a
     line of translation under it, plus a keyboard, have to fit a laptop window
     in landscape. */
  --tile: min(56px, 13vw, 5.4vh);
  --gap: 5px;
  --key-height: min(52px, 7vh);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121213;
    --fg: #e9e9e9;
    --muted: #8f9295;
    --line: #3a3a3c;
    --tile-empty-border: #3a3a3c;
    --tile-filled-border: #565758;
    --key-bg: #818384;
    --key-fg: #ffffff;
    --correct: #538d4e;
    --present: #b59f3b;
    --absent: #3a3a3c;
    --accent: #538d4e;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

header {
  border-bottom: 1px solid var(--line);
  padding: 6px 10px 8px;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
}

h1 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(24px, 7vw, 34px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
}

.tricolore {
  max-width: 520px;
  height: 3px;
  margin: 6px auto 0;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    #008c45 0 33.3%,
    var(--line) 33.3% 66.6%,
    #cd212a 66.6% 100%
  );
}

.tagline {
  margin: 6px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.icon-button {
  flex: none;
  min-width: 34px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.icon-button:hover {
  border-color: var(--muted);
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  min-height: 0;
  overflow-y: auto;
}

.boot-warning {
  max-width: 40ch;
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.boot-warning code {
  color: var(--fg);
  font-size: 13px;
}

.puzzle-label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.board {
  display: grid;
  /* Wider than the 3px inside a row, so each translation reads as belonging to
     the row above it rather than the one below. */
  gap: calc(var(--gap) + 6px);
}

/* The translation sits in the gap under its row. That gap is reserved whether
   or not there's anything in it, so the grid stays centred and still while you
   play, instead of hanging off to one side around an empty column. */
.row {
  display: grid;
  /* Exactly as wide as the tiles, so a long translation can't stretch it. */
  grid-template-columns: calc(5 * var(--tile) + 4 * var(--gap));
  justify-content: center;
  gap: 3px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(5, var(--tile));
  gap: var(--gap);
}

.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tile);
  height: var(--tile);
  border: 2px solid var(--tile-empty-border);
  font-size: calc(var(--tile) * 0.5);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
}

.tile[data-filled='true'] {
  border-color: var(--tile-filled-border);
  animation: pop 100ms ease-out;
}

.tile[data-state='correct'] {
  background: var(--correct);
  border-color: var(--correct);
  color: #fff;
}

.tile[data-state='present'] {
  background: var(--present);
  border-color: var(--present);
  color: #fff;
}

.tile[data-state='absent'] {
  background: var(--absent);
  border-color: var(--absent);
  color: #fff;
}

.tile.flip {
  animation: flip 500ms ease forwards;
  animation-delay: calc(var(--i) * 240ms);
}

.gloss {
  /* One reserved line: enough for a translation, never enough to shove the
     board around when one appears. */
  height: 1.3em;
  max-width: 100%;
  font-size: clamp(12px, 3.4vw, 15px);
  line-height: 1.3;
  color: var(--fg);
  font-style: italic;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
}

.gloss-missing {
  color: var(--muted);
}

.gloss.show {
  animation: fade-in 260ms ease forwards;
  animation-delay: var(--gloss-delay, 0ms);
}

.row.invalid .tiles {
  animation: shake 500ms;
}

.toast {
  margin: 0;
  min-height: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  text-align: center;
}

/* [hidden] loses to a display declaration, so say it here too. */
[hidden] {
  display: none !important;
}

.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
}

.result-word {
  margin: 0;
  font-size: 18px;
}

.result-word strong {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.result-word span {
  color: var(--muted);
  font-style: italic;
}

.result-line {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.result-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.button {
  padding: 9px 18px;
  border: none;
  border-radius: 20px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.button-quiet {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg);
}

.keyboard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}

.keyboard-row {
  display: flex;
  gap: 5px;
  justify-content: center;
}

.key {
  flex: 1;
  min-width: 0;
  max-width: 44px;
  height: var(--key-height);
  border: none;
  border-radius: 4px;
  background: var(--key-bg);
  color: var(--key-fg);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.key.wide {
  flex: 1.6;
  max-width: 70px;
  font-size: 11px;
}

.key[data-state='correct'] {
  background: var(--correct);
  color: #fff;
}

.key[data-state='present'] {
  background: var(--present);
  color: #fff;
}

.key[data-state='absent'] {
  background: var(--absent);
  color: #fff;
  opacity: 0.85;
}

dialog {
  max-width: 420px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--fg);
  padding: 20px;
  line-height: 1.45;
}

dialog::backdrop {
  background: rgb(0 0 0 / 0.5);
}

dialog h2 {
  margin-top: 0;
}

dialog ul {
  padding-left: 20px;
}

.legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  font-size: 14px;
}

.legend div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tile.mini {
  width: 30px;
  height: 30px;
  font-size: 15px;
  border-width: 2px;
}

.small {
  font-size: 13px;
  color: var(--muted);
}

/* Short windows: the board and the keyboard come first. */
@media (max-height: 800px) {
  .tagline {
    display: none;
  }

  header {
    padding-top: 4px;
    padding-bottom: 5px;
  }
}

@keyframes pop {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}

@keyframes flip {
  0% {
    transform: rotateX(0);
  }
  50% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes shake {
  10%,
  90% {
    transform: translateX(-2px);
  }
  20%,
  80% {
    transform: translateX(4px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-6px);
  }
  40%,
  60% {
    transform: translateX(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
  }
  .gloss.show {
    opacity: 1;
  }
}