.tile {
  position: relative;
  width: var(--tile-width);
  height: var(--tile-height);
  border-radius: 4px;
  background: #101011;
  perspective: 280px;
  contain: layout style;
}

/* ── Shared half-panel base ─────────────────── */
.tile-upper,
.tile-lower,
.tile-flap-face {
  overflow: hidden;
  background: #1f1f20;
}

/* ── Static halves ──────────────────────────── */
.tile-upper {
  position: absolute;
  top: 4px;
  left: 3px;
  right: 3px;
  height: calc(50% - 4.5px);
  border-radius: 1px 1px 0 0;
  z-index: 1;
}

.tile-lower {
  position: absolute;
  bottom: 4px;
  left: 3px;
  right: 3px;
  height: calc(50% - 4.5px);
  border-radius: 0 0 1px 1px;
  z-index: 2;
  transform-origin: top center;
}

/* Pre-rendered shadow overlay — always in DOM, hidden until animation */
.tile-lower::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

/* ── Character text ─────────────────────────── */
.tile-upper span,
.tile-lower span,
.tile-flap-face span {
  position: absolute;
  left: 0;
  right: 0;
  height: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f3f3ef;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(var(--tile-width) * 0.8);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
  transform: scaleX(0.58);
  transform-origin: center;
  -webkit-font-smoothing: antialiased;
}

.tile-upper span,
.tile-flap-top .tile-flap-face span {
  top: 0;
}

.tile-lower span,
.tile-flap-bottom .tile-flap-face span {
  bottom: 0;
}

/* ── Top flap (flips down, hinged at bottom) ── */
.tile-flap-top {
  position: absolute;
  top: 4px;
  left: 3px;
  right: 3px;
  height: calc(50% - 4.5px);
  transform-origin: bottom center;
  transform-style: preserve-3d;
  z-index: 4;
}

.tile-flap-top .tile-flap-face {
  position: absolute;
  inset: 0;
  border-radius: 1px 1px 0 0;
  backface-visibility: hidden;
}

/* Black back of top flap via pseudo-element (no extra DOM node) */
.tile-flap-top::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #0e0e0f;
  border-radius: 0 0 1px 1px;
  backface-visibility: hidden;
  transform: rotateX(180deg);
}

/* ── Bottom flap (settles into place, hinged at top) ── */
.tile-flap-bottom {
  position: absolute;
  bottom: 4px;
  left: 3px;
  right: 3px;
  height: calc(50% - 4.5px);
  transform-origin: top center;
  transform-style: preserve-3d;
  transform: rotateX(90deg);
  z-index: 3;
}

.tile-flap-bottom .tile-flap-face {
  position: absolute;
  inset: 0;
  border-radius: 0 0 1px 1px;
  backface-visibility: hidden;
}

/* Black back of bottom flap via pseudo-element */
.tile-flap-bottom::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #0e0e0f;
  border-radius: 1px 1px 0 0;
  backface-visibility: hidden;
  transform: rotateX(180deg);
}

/* ── Flip animations ────────────────────────── */

/* Promote to GPU layer only during animation */
.tile.is-flipping .tile-flap-top {
  will-change: transform;
  animation: flapDown 95ms cubic-bezier(0.32, 0, 0.67, 0) forwards;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.tile.is-flipping .tile-flap-bottom {
  will-change: transform;
  z-index: 5;
  animation: flapSettle 55ms 55ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.tile.is-flipping .tile-lower {
  will-change: transform;
  animation: lowerRock 90ms ease-in-out;
}

.tile.is-flipping .tile-lower::after {
  animation: flapShadow 95ms ease-in-out forwards;
}

/* Gravity-driven fall with bounce at mechanical stop */
@keyframes flapDown {
  0%    { transform: rotateX(0deg); }
  18%   { transform: rotateX(-14deg); }
  40%   { transform: rotateX(-65deg); }
  60%   { transform: rotateX(-135deg); }
  78%   { transform: rotateX(-182deg); }
  90%   { transform: rotateX(-177deg); }
  100%  { transform: rotateX(-180deg); }
}

@keyframes flapSettle {
  0%   { transform: rotateX(90deg); }
  50%  { transform: rotateX(-5deg); }
  75%  { transform: rotateX(2deg); }
  100% { transform: rotateX(0deg); }
}

@keyframes lowerRock {
  0%   { transform: rotateX(0deg); }
  25%  { transform: rotateX(6deg); }
  55%  { transform: rotateX(-1deg); }
  100% { transform: rotateX(0deg); }
}

@keyframes flapShadow {
  0%   { opacity: 0; }
  35%  { opacity: 0.3; }
  55%  { opacity: 1; }
  80%  { opacity: 0.3; }
  100% { opacity: 0; }
}