/* Memory — bovenop klastools.css. Het bord vult het speelveld; js/memory.js rekent de kaartgrootte uit. */
.app.mem { height: 100%; height: 100dvh; min-height: 520px; gap: 10px; }

/* keuzes bovenaan */
.setup { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; }
.setup .modes { align-self: auto; width: min(100%, 560px); }
.opts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 52px; }
.opts .seg button { font-size: 16px; padding: 9px 12px; }
.opts .chips.toggles button { font-family: var(--font-display); font-weight: 800; font-size: 16px; min-width: 44px; min-height: 36px; }
.seg-label { align-self: center; padding: 0 6px 0 8px; font-weight: 700; font-size: 15px; color: var(--muted); }
#segSize button { min-width: 48px; }
.hint { margin: 0; color: var(--muted); font-weight: 700; font-size: 17px; }

/* scorebord en uitleg */
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; }
.scores { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pill {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 14px; border-radius: 14px; background: rgba(0,0,0,.25);
  font-weight: 700; font-size: 15px; color: var(--muted);
}
.pill b { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pill.rec b { color: var(--gold); }
.pill.team { align-items: center; color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 20px; box-shadow: inset 0 0 0 3px transparent; transition: box-shadow .2s, background .2s; }
.pill.team i { width: 16px; height: 16px; border-radius: 50%; background: var(--tc); }
.pill.team.on { background: var(--tc); color: var(--ti); box-shadow: 0 0 0 3px #fff, 0 0 22px var(--tc); }
.pill.team.on i { background: var(--ti); }
.pill.team.on b { color: var(--ti); }
.bar .status { flex-basis: auto; font-size: 18px; color: var(--ink); }
.bar .status b { color: var(--gold); }

/* bord */
.mem .stage { min-height: 260px; }
.board {
  position: absolute; inset: 0; margin: auto; display: grid; align-content: center; justify-content: center;
  grid-template-columns: repeat(var(--cols, 4), var(--cw, 120px)); grid-auto-rows: var(--ch, 120px); gap: var(--gap, 10px);
}
/* De knop zelf beweegt (uitdelen, schudden, gevonden); alleen .flip draait om. Zo zit geen animatie het omdraaien in de weg. */
.mcard { position: relative; border: 0; padding: 0; background: none; perspective: 900px; border-radius: 14px; }
.mcard:focus-visible { outline: 4px solid var(--gold); outline-offset: 3px; }
.mcard .flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3,1.3,.5,1); }
.mcard.open .flip { transform: rotateY(180deg); }
.mcard .face {
  position: absolute; inset: 0; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 4px 6px; overflow: hidden;
}
.mcard .back {
  background: repeating-linear-gradient(45deg, #5b4bd6 0 10px, #4a3cc0 10px 20px); border: 4px solid #fff; box-shadow: 0 6px 16px rgba(0,0,0,.35);
  font-family: var(--font-display); font-weight: 800; font-size: calc(var(--ch) * .3); color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.25);
}
.mcard:not(.open):hover .back { filter: brightness(1.15); }
.mcard .front {
  transform: rotateY(180deg); background: #fff; color: #1a1640; border: 4px solid #fff; box-shadow: 0 6px 16px rgba(0,0,0,.35);
  text-align: center; transition: background .3s, border-color .3s, color .3s;
}
.mcard .front b { font-family: var(--font-display); font-weight: 800; font-size: var(--fs, 20px); line-height: 1.05; overflow-wrap: break-word; max-width: 100%; }
.mcard .front small { font-weight: 800; font-size: max(9px, min(calc(var(--ch) * .1), calc(var(--cw) * .1))); text-transform: uppercase; letter-spacing: .05em; color: #6d68a0; }
.mcard.emoji .front b { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-weight: 400; line-height: 1; }
.mcard.open:not(.found) .front { border-color: var(--gold); }
.mcard.found .front { background: var(--tc); color: var(--ti); border-color: #fff; }
.mcard.found .front small { color: var(--ti); opacity: .75; }
.mcard.found { cursor: default; animation: found .55s cubic-bezier(.3,1.6,.5,1); }
.mcard.nope { animation: nope .45s ease .35s; }
.mcard.deal { animation: deal .4s cubic-bezier(.3,1.4,.5,1) backwards; }
@keyframes found { 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes nope { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes deal { from { transform: translateY(-30px) scale(.6); opacity: 0; } }

.result-sub { font-size: clamp(20px, 3vw, 30px); font-weight: 700; color: var(--muted); }
.result-sub b { color: var(--ink); }
.result-names span { font-size: clamp(40px, 7vw, 88px); }

@media (max-width: 560px) {
  .app.mem { gap: 8px; }
  .opts { min-height: 0; }
  .opts .seg { flex-wrap: wrap; justify-content: center; }
  .opts .seg button { font-size: 14px; padding: 7px 9px; }
  .pill { padding: 4px 10px; font-size: 13px; }
  .pill b { font-size: 20px; }
  .bar .status { font-size: 15px; text-align: center; }
  .controls { gap: 8px; }
  .controls .seg button { font-size: 15px; padding: 8px 10px; }
  .mcard .face { border-width: 3px; border-radius: 10px; padding: 2px 3px; }
  .mcard { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mcard .flip, .pill.team { transition: none; }
  .mcard.found, .mcard.nope, .mcard.deal { animation: none; }
}