/* Individual physical character modules. Board layout lives in board-immersive.css. */
.flap-bank {
  --slot-w: 24px;
  --slot-h: 46px;
  display: inline-flex;
  gap: 0;
  max-width: 100%;
  overflow: hidden;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1;
}

.flap-slot {
  position: relative;
  display: inline-block;
  flex: 0 0 var(--slot-w);
  width: var(--slot-w);
  height: var(--slot-h);
  border: 0;
  border-right: 1px solid #090909;
  color: #f5f2e9;
  background: linear-gradient(90deg, #080808, #222 12%, #151515 55%, #090909);
  box-shadow: inset 1px 0 rgba(255,255,255,.06), inset -1px 0 rgba(0,0,0,.8);
  font: 900 var(--glyph-size, min(calc(var(--slot-h) * .68), calc(var(--slot-w) * 1.36)))/1 "NmBoardDisplay", "Arial Black", sans-serif;
}
.flap-slot:last-child { border-right: 0; }
.flap-slot.is-flipping { perspective: 650px; transform-style: preserve-3d; }

.flap-static-top,
.flap-static-bottom,
.flap-flip-top,
.flap-flip-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
}
.flap-static-top,
.flap-flip-top {
  top: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), transparent 46%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, #151515, #242424 18%, #181818 55%, #0d0d0d);
}
.flap-static-bottom,
.flap-flip-bottom {
  bottom: 0;
  background:
    linear-gradient(0deg, rgba(255,255,255,.03), transparent 45%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, #0b0b0b, #1b1b1b 20%, #111 56%, #070707);
}
.flap-static-top,
.flap-static-bottom { z-index: 1; }
.flap-flip-top { display: none; z-index: 3; transform-origin: center bottom; opacity: 0; backface-visibility: hidden; }
.flap-flip-bottom { display: none; z-index: 2; transform-origin: center top; transform: rotateX(90deg); opacity: 0; backface-visibility: hidden; }

/* Both clipped halves share the exact same glyph box and baseline. */
.flap-glyph {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--slot-h);
  line-height: .96;
  text-align: center;
  transform: scaleX(.68);
  transform-origin: center;
}
.flap-static-top .flap-glyph,
.flap-flip-top .flap-glyph { top: 0; }
.flap-static-bottom .flap-glyph,
.flap-flip-bottom .flap-glyph { top: calc(var(--slot-h) * -.5); }

.flap-hinge {
  position: absolute;
  z-index: 5;
  top: calc(50% - .5px);
  left: 0;
  right: 0;
  height: 1px;
  background: #080808;
  box-shadow: 0 1px 0 rgba(255,255,255,.03);
  pointer-events: none;
}

.flap-slot.is-flipping .flap-flip-top {
  display: block;
  opacity: 1;
  animation: flap-leaf-top .07s cubic-bezier(.4,0,.2,1) both;
}
.flap-slot.is-flipping .flap-flip-bottom {
  display: block;
  opacity: 1;
  animation: flap-leaf-bottom .07s cubic-bezier(.4,0,.2,1) both;
}
@keyframes flap-leaf-top {
  0% { transform: rotateX(0deg); opacity: 1; }
  49% { transform: rotateX(-90deg); opacity: 1; }
  50%, 100% { transform: rotateX(-90deg); opacity: 0; }
}
@keyframes flap-leaf-bottom {
  0%, 49% { transform: rotateX(90deg); opacity: 0; }
  50% { transform: rotateX(90deg); opacity: 1; }
  100% { transform: rotateX(0deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .flap-slot.is-flipping .flap-flip-top,
  .flap-slot.is-flipping .flap-flip-bottom { animation: none !important; }
}