/* ─────────────────────────────────────────────────────────────────
   Tile array — split-flap mechanics, minimal Vestaboard depth
   ───────────────────────────────────────────────────────────────── */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 22), var(--tile-size));
  grid-template-rows:    repeat(var(--grid-rows, 6),  var(--tile-size));
  gap: var(--tile-gap, 3px);
  justify-content: center;
  position: relative;
  z-index: 1;
  --tile-size: 42px;
  --tile-gap: 3px;
  --flip-step-duration: 90ms;
}

/* ── Tile wrapper ────────────────────────────────────────────── */

.tile {
  width: var(--tile-size);
  height: var(--tile-size);
  position: relative;
  background: #000;
  border-radius: 1px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

body[data-theme="light"] .tile {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

/* Central axle seam */
.tile::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-0.5px);
  background: rgba(0, 0, 0, 0.55);
  z-index: 3;
  pointer-events: none;
}
body[data-theme="light"] .tile::after {
  background: rgba(0, 0, 0, 0.18);
}

/* ── Half elements ───────────────────────────────────────────── */

.tile-static-top,
.tile-static-bottom,
.tile-flap-upper,
.tile-flap-lower {
  position: absolute;
  left: 1px;
  right: 1px;
  height: calc(50% - 1px);
  overflow: hidden;
  background: var(--tile-bg);
}

.tile-static-top,
.tile-flap-upper {
  top: 1px;
  border-radius: 1px 1px 0 0;
}

.tile-static-bottom,
.tile-flap-lower {
  bottom: 1px;
  border-radius: 0 0 1px 1px;
}

.tile-flap-upper,
.tile-flap-lower {
  z-index: 2;
  backface-visibility: hidden;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
body[data-theme="light"] .tile-flap-upper,
body[data-theme="light"] .tile-flap-lower {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

.tile-flap-upper {
  transform-origin: center bottom;
  transform: perspective(280px) rotateX(0deg);
}

.tile-flap-lower {
  transform-origin: center top;
  transform: perspective(280px) rotateX(90deg);
}

/* ── Character spans ─────────────────────────────────────────── */

.tile-static-top span,
.tile-flap-upper span {
  position: absolute;
  top: calc(var(--tile-size) * -0.5);
  left: 0;
  right: 0;
  height: calc(var(--tile-size) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile-static-bottom span,
.tile-flap-lower span {
  position: absolute;
  top: calc(var(--tile-size) * -1);
  left: 0;
  right: 0;
  height: calc(var(--tile-size) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile-static-top span,
.tile-static-bottom span,
.tile-flap-upper span,
.tile-flap-lower span {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: calc(var(--tile-size) * 0.62);
  font-weight: 800;
  color: var(--tile-text);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
}

/* ── Flap animations ─────────────────────────────────────────── */

@keyframes flapFallUpper {
  0%   { transform: perspective(280px) rotateX(0deg); }
  100% { transform: perspective(280px) rotateX(-90deg); }
}

@keyframes flapRiseLower {
  0%   { transform: perspective(280px) rotateX(90deg); }
  78%  { transform: perspective(280px) rotateX(-5deg); }
  100% { transform: perspective(280px) rotateX(0deg); }
}

.tile-flap-upper.flapping {
  animation: flapFallUpper var(--flip-step-duration, 90ms) cubic-bezier(0.42, 0, 0.98, 0.6) forwards;
  will-change: transform;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8)) brightness(0.88);
}

.tile-flap-lower.flapping {
  animation: flapRiseLower var(--flip-step-duration, 90ms) cubic-bezier(0.0, 0.55, 0.28, 1.0) forwards;
  animation-delay: calc(var(--flip-step-duration, 90ms) * 0.4);
  will-change: transform;
}