@font-face {
  font-family: 'Charles Wright';
  src: url('CharlesWright-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --tarmac: #1b1d1f;
  --tarmac-line: #2c2f33;
  --plate-yellow: #f4c500;
  --plate-white: #f7f7f5;
  --euro-blue: #0a3d91;
  --ink: #0c0c0c;
  --paper: #eceae4;
  --paper-dim: #9a9891;
  --accent: #f4c500;
  --plate-font: 'Charles Wright', 'UKNumberPlate', Arial, 'Helvetica Neue', sans-serif;

  /* Spec ratios from the DVLA plate dimensions (character height 79mm,
     top/bottom margin 11mm each, character width 50mm, space between
     characters 11mm). Used below so the input's proportions -- not just
     its font -- match a real plate, and so the line box is forced to
     exactly the height we want rather than left to the font's own
     (mismatched) internal metrics. */
  --plate-char-size: clamp(3.2rem, 18vw, 5.2rem);
  --plate-line-height: calc(var(--plate-char-size) * 1.278); /* (79 + 11 + 11) / 79 */
  --plate-letter-spacing: 0.22em; /* 11mm gap / 50mm character width */

  /* Charles Wright's own ascent/descent metrics aren't symmetric around
     the visible letters, so even with height == line-height above, the
     text still renders too high (measured from a real screenshot: the
     gap below the letters was ~66% bigger than the gap above). This
     nudges it down to compensate. If you change the font file, re-check
     this against a screenshot and adjust. */
  --plate-vertical-nudge: 0.10em;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--tarmac);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 118px, var(--tarmac-line) 118px 122px),
    linear-gradient(var(--tarmac), var(--tarmac));
  color: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 8vh 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.title {
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--paper);
}

.subtitle {
  margin: 0 0 5vh;
  color: var(--paper-dim);
  font-size: 0.98rem;
  line-height: 1.5;
  max-width: 46ch;
}

/* ---- Plate ---- */

.plate-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 5vh;
}

.plate {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  background: var(--plate-yellow);
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 10px 30px rgba(0,0,0,0.45),
    0 2px 0 rgba(0,0,0,0.3);
  padding: 10px;
  border: 1px solid #d1a900;
}

.plate-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--euro-blue);
  color: var(--plate-white);
  border-radius: 4px;
  width: clamp(34px, 9vw, 46px);
  margin-right: 10px;
  padding: 4px 0;
  flex-shrink: 0;
}

.plate-flag svg {
  width: 16px;
  height: 16px;
  fill: var(--plate-yellow);
}

.plate-country {
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  margin-top: 2px;
}

.plate-input {
  font-family: var(--plate-font);
  font-weight: 700;
  font-size: var(--plate-char-size);
  /* Height and line-height are set to the SAME value on purpose: this is
     what actually fixes vertical centering. A browser centers input text
     using the font's own ascent/descent metrics, which for a display
     font like this one don't match where the letters visually sit --
     forcing the line box to this exact height, rather than "normal",
     removes that mismatch. */
  height: var(--plate-line-height);
  line-height: var(--plate-line-height);
  letter-spacing: var(--plate-letter-spacing);
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
  text-align: center;
  text-transform: uppercase;
  width: clamp(220px, 60vw, 330px);
  padding: 0 6px 0 14px;
  caret-color: var(--euro-blue);
  transform: translateY(var(--plate-vertical-nudge));
}

.plate-input::placeholder {
  color: rgba(12,12,12,0.28);
}

.plate-input:focus {
  outline: none;
}

.plate:focus-within {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 10px 30px rgba(0,0,0,0.45),
    0 0 0 3px rgba(244,197,0,0.35),
    0 2px 0 rgba(0,0,0,0.3);
}

/* ---- Results ---- */

.results {
  width: 100%;
  min-height: 30vh;
}

.hint {
  color: var(--paper-dim);
  font-size: 0.95rem;
}

.error {
  color: #e0685a;
  font-size: 0.95rem;
}

.winner-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--paper-dim);
  margin: 0 0 10px;
}

.winner-word {
  display: block;
  font-family: var(--plate-font);
  font-weight: 700;
  font-size: clamp(2.4rem, 10vw, 3.4rem);
  letter-spacing: var(--plate-letter-spacing);
  color: var(--plate-yellow);
  text-transform: uppercase;
  margin: 0 auto 6px;
  word-break: break-word;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.winner-word:hover,
.winner-word:focus-visible {
  color: #fff6d0;
}

.winner-meta {
  color: var(--paper-dim);
  font-size: 0.85rem;
  margin: 0 0 4vh;
}

.definition {
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--paper-dim);
  max-width: 40ch;
  margin: 6px auto 0;
}

.winner-word + .definition {
  margin: 8px auto 10px;
  max-width: 42ch;
  text-align: center;
}

.other-label {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: var(--paper-dim);
  margin: 0 0 10px;
}

.word-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.word-list li {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 7px 12px;
  max-width: 100%;
}

.word-chip {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin: 0 auto;
  font: inherit;
  font-size: 0.95rem;
  color: var(--paper);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.word-chip:hover,
.word-chip:focus-visible {
  color: var(--plate-yellow);
}

.word-list li .definition {
  max-width: 26ch;
  margin-top: 6px;
}

.more-note {
  margin-top: 14px;
  color: var(--paper-dim);
  font-size: 0.85rem;
}

.footer {
  text-align: center;
  color: var(--paper-dim);
  font-size: 0.78rem;
  padding: 20px;
  opacity: 0.7;
}

@media (max-width: 420px) {
  .page { padding-top: 6vh; }
  .plate { padding: 8px; }
  .plate-input { padding: 0 4px 0 10px; }
}