/* Riegel 4 — Geteiltes Memory. 3D-Flip-Karten in Stahl und Messing. */

.oben { display: grid; gap: 12px; justify-items: center; }

.paare { margin: 0; color: var(--messing-hell); font-size: 13px; letter-spacing: 0.08em; }

.fremd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--creme-60);
  font-size: 12px;
}
.fremd-karte {
  flex: none;
  width: 14px;
  height: 20px;
  border-radius: 3px;
  background: linear-gradient(155deg, var(--stahl-hell), var(--stahl));
  border: 1px solid var(--messing-dunkel);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ── Kartenraster ──────────────────────────────────────────────────────── */
.karten {
  --kw: clamp(54px, 16vw, 72px);
  --kh: calc(var(--kw) * 1.32);
  display: grid;
  grid-template-columns: repeat(2, var(--kw));
  grid-template-rows: repeat(4, var(--kh));
  gap: clamp(9px, 2.6vw, 15px);
}

.karte {
  appearance: none;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  perspective: 900px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.karte:disabled { cursor: default; }
.karte:focus-visible { outline: 3px solid var(--creme); outline-offset: 3px; border-radius: 10px; }

.karte-innen {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.3, 1);
}
.karte.offen .karte-innen,
.karte.geloest .karte-innen { transform: rotateY(180deg); }
.karte:not(:disabled):active .karte-innen { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  .karte:not(:disabled):hover .karte-innen { transform: translateY(-2px); }
  .karte.offen:not(:disabled):hover .karte-innen,
  .karte.geloest:not(:disabled):hover .karte-innen { transform: rotateY(180deg); }
}

.karte-seite {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.karte-rueck {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, var(--stahl-hell), var(--stahl) 70%);
  border: 1px solid var(--messing-dunkel);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 6px 14px rgba(0, 0, 0, 0.45);
}
.monogramm { font-size: 22px; color: var(--messing); opacity: 0.85; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }

.karte-vorn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transform: rotateY(180deg);
  background: linear-gradient(165deg, #fff, var(--creme) 60%);
  border: 2px solid var(--messing);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.karte.geloest .karte-vorn { filter: brightness(0.88); border-color: var(--messing-hell); }

.karte-emoji { font-size: clamp(40px, 11vw, 46px); line-height: 1; }
.karte-name {
  font-size: 10px;
  color: var(--tinte);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .karte-innen { transition: none; }
}