/* ── Vestaboard Component Styles ── */

.vestaboard-container {
  position: relative;
  width: 680px;
  max-width: 90vw;
  margin-bottom: 15px;
}

.vestaboard-container img.vb-photo {
  width: 100%;
  height: auto;
  display: block;
}

.char-grid {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Calibrated values from prototype */
  top: 33.2%;
  left: 21.7%;
  width: 56.4%;
  height: 31.1%;
  gap: 12.2%;
}

.char-row {
  display: flex;
  justify-content: space-between;
  height: 30%;
}

.cell {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 200px;
  overflow: hidden;
  margin: 0 1.35%;
}

.cell-face {
  position: absolute;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(12px, 2.2vw, 22px);
  font-weight: 700;
  color: rgba(26, 26, 26, 0.7);
  overflow: hidden;
  backface-visibility: hidden;
}

.cell-top {
  top: 0;
  height: 50%;
  align-items: flex-end;
}
.cell-top span { transform: translateY(50%); }

.cell-bottom {
  bottom: 0;
  height: 50%;
  align-items: flex-start;
}
.cell-bottom span { transform: translateY(-50%); }

.cell-flip-top {
  top: 0;
  height: 50%;
  align-items: flex-end;
  transform-origin: bottom center;
  z-index: 3;
}
.cell-flip-top span { transform: translateY(50%); }
.cell-flip-top.flipping {
  animation: flipDown 0.25s ease-in forwards;
}

.cell-flip-bottom {
  bottom: 0;
  height: 50%;
  align-items: flex-start;
  transform-origin: top center;
  transform: rotateX(90deg);
  z-index: 2;
}
.cell-flip-bottom span { transform: translateY(-50%); }
.cell-flip-bottom.flipping {
  animation: flipUp 0.25s ease-out 0.25s forwards;
}

@keyframes flipDown {
  0%   { transform: rotateX(0deg); }
  100% { transform: rotateX(-90deg); }
}
@keyframes flipUp {
  0%   { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}

.cell::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  height: 1px;
  background: rgba(0,0,0,0.08);
  z-index: 10;
  pointer-events: none;
}

@media (max-width: 640px) {
  .vestaboard-container {
    width: 95vw;
    margin-bottom: 48px;
  }
}