.board {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
  padding: 6px 12px calc(14px + env(safe-area-inset-bottom));
}

.card {
  position: relative;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  perspective: 600px;
}

.card .face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--ink);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.3s;
}

.card .back {
  background: repeating-linear-gradient(45deg, #8b4dff 0 10px, #6f33e0 10px 20px);
  font: 400 2.6rem var(--head);
  color: var(--paper);
  text-shadow: 2px 2px 0 var(--ink);
}

.card .front {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, #fff8cf 0%, var(--paper) 100%);
  color: var(--ink);
  font: 700 1.6rem/1.15 var(--num);
  overflow: hidden;
  word-break: keep-all;
}

.card.answer .front { background: linear-gradient(180deg, #d8fff0 0%, #7df0bd 100%); }
.card .front small {
  display: block;
  margin-top: 4px;
  font: 700 0.62rem/1.1 var(--num);
  color: #4a3a8a;
}

.card.flip .back { transform: rotateY(180deg); }
.card.flip .front { transform: rotateY(0); }
.card.done .front { background: var(--green); animation: pulse 0.5s; }
.card.done { pointer-events: none; }
.card.miss .front { background: #ffb3b3; }

@keyframes pulse { 50% { transform: scale(1.08); } }

.card:active .back { filter: brightness(1.2); }

.f-s { font-size: 1.15rem !important; }
.f-xs { font-size: 0.95rem !important; }
.f-xxs { font-size: 0.8rem !important; }