/* Gedeelde kaartstyling voor telefoon en TV (FIX 1) */
.kaart {
  position: relative;
  background: #fdfcf7;
  border-radius: 8px;
  border: 1px solid #c9c3ad;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  display: inline-block;
  box-sizing: border-box;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  overflow: hidden;
  flex: none;
}
.kaart.rood { color: #c0392b; }
.kaart.zwart { color: #1a1a1a; }

.kaart-hoek { position: absolute; display: flex; flex-direction: column; align-items: center; }
.kaart-hoek b { font-weight: 700; }
.kaart-hoek i { font-style: normal; }
.kaart-hoek.linksboven { top: 6%; left: 7%; }
.kaart-hoek.rechtsonder { bottom: 6%; right: 7%; transform: rotate(180deg); }

.kaart-midden {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}

/* maten */
.kaart-small  { width: 60px;  height: 86px; }
.kaart-medium { width: 90px;  height: 130px; }
.kaart-big    { width: 200px; height: 288px; }

.kaart-small  .kaart-hoek { font-size: 13px; }
.kaart-small  .kaart-midden { font-size: 30px; }
.kaart-medium .kaart-hoek { font-size: 19px; }
.kaart-medium .kaart-midden { font-size: 46px; }
.kaart-big    .kaart-hoek { font-size: 40px; }
.kaart-big    .kaart-midden { font-size: 104px; }

/* kaartrug */
.kaart-dicht {
  background:
    repeating-linear-gradient(45deg, #0b3d2e 0 8px, #0f4d3a 8px 16px);
  border: 2px solid #d4af37;
}
.kaart-dicht::after {
  content: '';
  position: absolute; inset: 6px;
  border: 1px solid rgba(212, 175, 55, .75);
  border-radius: 4px;
}