/* Morse as graphics. --u is one unit: a dot is 1u, a dash 3u, gaps 1u inside a letter, 3u between letters, 7u between words. */
.code { --u: 6px; display: inline-flex; align-items: center; gap: var(--u); height: calc(var(--u) * 1.6); }
.code i { display: block; flex: none; width: var(--u); height: var(--u); border-radius: calc(var(--u) / 2); background: currentColor; transition: opacity 0.12s; }
.code i.h { width: calc(var(--u) * 3); }
.seq { --u: 8px; display: inline-flex; align-items: center; gap: calc(var(--u) * 3); }
.seq .code { --u: inherit; }
.seq .wgap { width: calc(var(--u) * 4); }

/* The yellow capsule keeps its colour at rest: it names a code, it is not a signal. */
.cap { display: inline-flex; align-items: center; padding: 14px 18px; border-radius: 999px; background: var(--y); color: var(--on-y); }

/* Letter tiles: the letter above its code */
.words { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 0; padding: 0; list-style: none; }
.letters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-width: 64px; min-height: 92px; padding: 14px 14px 18px; border: 0; border-radius: var(--r-tile);
  background: var(--tile); color: var(--ink);
  transition: background-color 0.12s, color 0.12s, transform 0.25s var(--spring);
}
.tile .ch { font-size: 34px; line-height: 1; font-weight: 300; letter-spacing: -0.01em; font-feature-settings: "ss06" 1; }
.tile.on { background: var(--y); color: var(--on-y); transform: translateY(-3px); }
.tile.on .code i { opacity: 0.32; }
.tile.on .code i.lit { opacity: 1; }
.tile.bad { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.tile.bad .ch { color: var(--sec); }
.miss { font-size: 13px; line-height: 1; color: var(--sec); }
button.tile { cursor: pointer; font: inherit; }
button.tile:hover { background: color-mix(in srgb, var(--tile) 80%, var(--ink) 8%); }
button.tile.on:hover { background: var(--y); }

/* Signal lamp: a ring at rest, a yellow glow while the signal is on */
.lamp {
  display: block; flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: var(--panel); box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 9px var(--panel), inset 0 0 0 30px var(--tile);
  transition: box-shadow 0.06s, background-color 0.06s;
}
.lamp.on { background: var(--y); box-shadow: inset 0 0 0 4px var(--ink), 0 0 0 8px color-mix(in srgb, var(--y) 35%, transparent), 0 0 36px 6px color-mix(in srgb, var(--y) 70%, transparent); }

/* Entrance: tiles land with a spring and their marks draw left to right */
@keyframes tile-in { from { opacity: 0; transform: translateY(14px) scale(0.86); } to { opacity: 1; transform: none; } }
@keyframes mark-in { from { opacity: 0; transform: scaleX(0.2); } to { opacity: 1; transform: none; } }
.letters > li:nth-child(2) { --i: 1; } .letters > li:nth-child(3) { --i: 2; } .letters > li:nth-child(4) { --i: 3; }
.letters > li:nth-child(5) { --i: 4; } .letters > li:nth-child(6) { --i: 5; } .letters > li:nth-child(7) { --i: 6; }
.letters > li:nth-child(n + 8) { --i: 7; }
.code i:nth-child(2) { --k: 1; } .code i:nth-child(3) { --k: 2; } .code i:nth-child(4) { --k: 3; }
.code i:nth-child(5) { --k: 4; } .code i:nth-child(n + 6) { --k: 5; }
.intro .tile, .tile.enter { animation: tile-in 0.55s var(--spring) both; animation-delay: calc(var(--d0, 0ms) + var(--i, 0) * 95ms); }
.intro .code i, .tile.enter .code i { animation: mark-in 0.32s var(--ease) both; transform-origin: left center; animation-delay: calc(var(--d0, 0ms) + 160ms + var(--i, 0) * 95ms + var(--k, 0) * 55ms); }
.intro { --d0: 260ms; }
.letters > li.enter { --i: 0; }

@media (prefers-reduced-motion: reduce) {
  .intro .tile, .tile.enter, .intro .code i, .tile.enter .code i { animation: none; }
  .tile, .code i, .lamp { transition: none; }
}