.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.levels .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 12px; display: flex; flex-direction: column; }
.box .lbl { font-size: 12px; color: var(--muted); }
.box strong { font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.best { margin: 4px 2px 10px; font-size: 13px; color: var(--muted); min-height: 1.5em; }
.actions { margin: 14px 0 10px; display: grid; }

.deck { display: grid; gap: 10px; grid-template-columns: repeat(var(--cols, 4), 1fr); }
.card {
  position: relative; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit;
  container-type: size; perspective: 600px; border-radius: 12px;
}
.card .in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 220ms ease; border-radius: 12px; }
.card.up .in, .card.done .in { transform: rotateY(180deg); }
.card .back, .card .front {
  position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqh;
}
.card .back {
  background: repeating-linear-gradient(45deg, #2A1A0E 0 8px, #34210F 8px 16px); border: 2px solid #4a2f19; color: #F0D9B5; font-weight: 800; font-size: 34cqh;
}
.card .front { transform: rotateY(180deg); background: var(--card2); border: 2px solid var(--line); }
.card .face { font-size: 44cqh; line-height: 1; }
.card .nm { font-size: 14cqh; font-weight: 700; color: var(--text); }
.card.done .front { background: #123524; border-color: var(--accent); }
.card.done .front::after { content: "✓"; position: absolute; top: 4cqh; right: 8cqh; font-size: 16cqh; font-weight: 800; color: var(--accent); }
.card:hover .back { border-color: var(--accent); }
.card:focus-visible { outline: 3px solid #F2C94C; outline-offset: 3px; z-index: 2; }
.card[disabled] { cursor: default; }
@media (prefers-reduced-motion: reduce) { .card .in { transition: none; } }