.setup-title { font-size: 1.4rem; flex: 1; min-width: 0; overflow-wrap: anywhere; }

.game-view:has(.board) {
  height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 10px);
  gap: 8px;
  max-width: 1100px;
}

.game-head { display: flex; align-items: center; justify-content: space-between; flex: none; }
.game-score { display: flex; gap: 22px; padding-right: 8px; font: 700 1.25rem var(--serif); text-align: right; }
.game-score small { display: block; font: 400 0.72rem var(--sans); color: var(--ink-2); }

.board {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), var(--card-w, 1fr));
  grid-auto-rows: var(--card-h, 1fr);
  gap: 8px;
  justify-content: center;
  align-content: center;
}

.card {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  perspective: 700px;
  cursor: pointer;
  color: inherit;
  border-radius: 10px;
}
.card.matched { cursor: default; }

.card-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.card.up .card-inner, .card.matched .card-inner { transform: rotateY(180deg); }

.face {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.face-back {
  background:
    repeating-linear-gradient(45deg, transparent 0 7px, rgb(255 255 255 / 0.07) 7px 9px),
    repeating-linear-gradient(-45deg, transparent 0 7px, rgb(255 255 255 / 0.07) 7px 9px),
    var(--card-back);
  box-shadow: inset 0 0 0 3px var(--card-back-2);
}

.face-front {
  transform: rotateY(180deg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  padding: 4px 5px;
}
.face-front.clipped { align-items: flex-start; }
.card.back .face-front { border-top-color: var(--card-back-2); background: var(--surface-2); }

.card-text {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--serif);
  line-height: 1.15;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.card.matched .face-front { border-color: var(--good); background: var(--good-soft); }
.card.matched .card-inner { animation: pop 0.34s ease-out; }

@keyframes pop {
  0% { scale: 1; }
  45% { scale: 1.07; }
  100% { scale: 1; }
}

.readout {
  flex: none;
  min-height: 62px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-family: var(--serif);
  overflow-wrap: anywhere;
}
.readout.good { border-color: var(--good); background: var(--good-soft); }
.readout.miss p + p { color: var(--ink-2); }

.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.result-stats div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: center; }
.result-stats dt { color: var(--ink-2); font-size: 0.82rem; }
.result-stats dd { margin: 0; font: 700 1.5rem var(--serif); }

.result-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.result-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.result-list li:first-child { border-top: 0; }
.tag-good, .tag-bad { flex: none; font-size: 0.8rem; font-weight: 600; }
.tag-good { color: var(--good); }
.tag-bad { color: var(--bad); }