:root {
      /* Size & look */
      --tile-width: clamp(1.8rem, 6vw, 1.8rem);
      --tile-height: calc(var(--tile-width) * 1.25);
      --gap: clamp(0.1rem, 1vw, 0.2rem);
      --radius: 0.5rem;
      --font-size: calc(var(--tile-height) * 0.62);
      --font-weight: 700;

      --page-bg: #0d1117;
      --board-bg: #0f141b;
      --tile-bg: #0a0a0a; /* Updated tile colour */
      --tile-edge: #333;
      --hinge: #111111;
      --text: #ffbf00; /* Updated text colour */
      --shadow: rgba(0,0,0,.6);

      /* Animation timing */
      --flip-speed: 180ms; /* faster per flip */
      --stagger: 70ms;     /* pause between each letter settling */
      --cycles-min: 4;
      --cycles-max: 9;
    }

 
    .board {
      padding: calc(var(--gap) * 1.2);
      cursor: pointer; /* click to replay */
      user-select: none;
      text-align:center;
    }

    .title {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: var(--tile-width);
      gap: var(--gap);
      align-items: center;
    }

    .tile {
      position: relative;
      width: var(--tile-width);
      height: var(--tile-height);
      border-radius: var(--radius);
      background: var(--tile-bg);
      box-shadow:
        inset 0 0 0 1px var(--tile-edge),
        inset 0 14px 18px -12px rgba(255,255,255,.08),
        inset 0 -10px 16px -10px rgba(0,0,0,.35),
        0 4px 14px -6px var(--shadow);
      background-image:
        linear-gradient(180deg, transparent 49%, var(--hinge) 50%, transparent 51%),
        radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 55%);
      background-blend-mode: normal, soft-light;
      overflow: hidden;
      isolation: isolate;
    }

    /* Character halves (center a single glyph on the hinge; clip top/bottom) */
    .tile::before,
    .tile::after {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: var(--font-weight);
      font-size: var(--font-size);
      line-height: 1;
      letter-spacing: 0.02em;
      color: var(--text);
      text-transform: uppercase;
      text-shadow: 0 1px 2px rgba(0,0,0,.9);
      will-change: transform, filter;
      pointer-events: none;
      --glyph-nudge: 0px; /* tweak ±px if seam looks misaligned per font */
    }

    .tile::before {
      content: attr(data-top);
      clip-path: inset(0 0 50% 0); /* top half only */
      transform: translateY(var(--glyph-nudge));
    }

    .tile::after {
      content: attr(data-bottom);
      clip-path: inset(50% 0 0 0); /* bottom half only */
      transform-origin: 50% 50%;
      transform: translateY(var(--glyph-nudge));
    }

    /* Flip keyframes for the bottom flap */
    @keyframes flap {
      0%   { transform: translateY(var(--glyph-nudge)) rotateX(0deg);   filter: brightness(1); }
      45%  { transform: translateY(var(--glyph-nudge)) rotateX(-92deg); filter: brightness(0.85); }
      55%  { transform: translateY(var(--glyph-nudge)) rotateX(-92deg); filter: brightness(0.85); }
      100% { transform: translateY(var(--glyph-nudge)) rotateX(0deg);   filter: brightness(1); }
    }
    .tile.flip::after { animation: flap var(--flip-speed) ease-in-out both; }

    /* Space tiles appear as empty but visible tiles */
    .tile[data-top=" "][data-bottom=" "] { 
      opacity: 1;
    }

    .sub {
      margin-top: 1rem;
      text-align: center;
      color: #ffbf00;
      font: 500 0.9rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      opacity: .8;
    }