/* Cabo Karten – alles skaliert mit --cw (Kartenbreite) */
:root { --cw: 70px; }
.card {
  --sh: 0 calc(var(--cw) * .025) calc(var(--cw) * .07) rgba(0,0,0,.4), 0 0 0 calc(var(--cw) * .008) rgba(255,255,255,.14);
  position: relative;
  flex: none;
  width: var(--cw);
  height: calc(var(--cw) * 1.4);
  perspective: calc(var(--cw) * 6);
  container-type: inline-size;
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.card .inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform .5s cubic-bezier(.3,.7,.3,1);
  transform-style: preserve-3d;
  transform: rotate(var(--rot, 0deg)) rotateY(0deg);
}
.card.up .inner { transform: rotate(var(--rot, 0deg)) rotateY(180deg); }
.card .face {
  position: absolute; inset: 0;
  border-radius: calc(var(--cw) * .12);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: var(--sh);
  user-select: none; -webkit-user-select: none;
}
.card .face.front { transform: rotateY(180deg); }

/* ---------- Vorderseite ---------- */
.cf {
  --h: 120;
  position: absolute; inset: 0;
  background: linear-gradient(145deg, hsl(var(--h) 85% 56%), hsl(calc(var(--h) - 14) 85% 34%));
  color: hsl(var(--h) 85% 28%);
}
.cf .pl {
  position: absolute; inset: calc(var(--cw) * .055);
  border-radius: calc(var(--cw) * .085);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, hsl(var(--h) 90% 99% / .9), transparent 70%),
    linear-gradient(160deg, hsl(var(--h) 90% 96%), hsl(var(--h) 70% 86%));
  box-shadow: inset 0 0 0 max(1px, calc(var(--cw) * .008)) hsl(var(--h) 80% 30% / .35);
}
.cf .pat {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle, hsl(var(--h) 80% 40% / .22) calc(var(--cw) * .008), transparent calc(var(--cw) * .012)) 0 0 / calc(var(--cw) * .075) calc(var(--cw) * .075);
}
.cf .ring {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--cw) * .9); height: calc(var(--cw) * .9);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, hsl(var(--h) 90% 72% / .3), transparent 68%);
}
.cf.has-b .ring { top: 42%; }
.cf .sym {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--cw) * .78); height: calc(var(--cw) * .78);
  transform: translate(-50%, -50%);
  color: hsl(var(--h) 80% 40% / .38);
  overflow: visible;
}
.cf.has-b .sym { top: 42%; width: calc(var(--cw) * .62); height: calc(var(--cw) * .62); }
.cf .num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: calc(var(--cw) * .74);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: lining-nums;
  color: hsl(var(--h) 88% 27%);
  text-shadow: 0 calc(var(--cw) * .018) 0 rgba(255,255,255,.75), 0 calc(var(--cw) * .04) calc(var(--cw) * .05) hsl(var(--h) 80% 30% / .3);
  padding-bottom: calc(var(--cw) * .03);
}
.cf .num.d2 { font-size: calc(var(--cw) * .6); letter-spacing: -.06em; }
.cf.has-b .num { inset: calc(var(--cw) * .1) 0 calc(var(--cw) * .5) 0; font-size: calc(var(--cw) * .6); }
.cf.has-b .num.d2 { font-size: calc(var(--cw) * .5); }
.cf .co {
  position: absolute;
  font-size: calc(var(--cw) * .2);
  line-height: 1; font-weight: 800;
  color: hsl(var(--h) 85% 30%);
  text-align: center;
  min-width: calc(var(--cw) * .2);
}
.cf .co.tl { left: calc(var(--cw) * .06); top: calc(var(--cw) * .05); }
.cf .co.br { right: calc(var(--cw) * .06); bottom: calc(var(--cw) * .05); }
.cf .co.d2 { font-size: calc(var(--cw) * .17); letter-spacing: -.05em; }
.cf .bdg {
  position: absolute; left: 50%; bottom: calc(var(--cw) * .27);
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  gap: calc(var(--cw) * .03);
  height: calc(var(--cw) * .19);
  padding: 0 calc(var(--cw) * .07) 0 calc(var(--cw) * .05);
  border-radius: 999px;
  background: linear-gradient(180deg, hsl(var(--h) 80% 38%), hsl(var(--h) 85% 26%));
  color: #fff;
  box-shadow: 0 calc(var(--cw) * .015) calc(var(--cw) * .03) rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25);
  white-space: nowrap;
}
.cf .bdg.only { padding: 0; width: calc(var(--cw) * .19); }
.cf .ico { width: calc(var(--cw) * .135); height: calc(var(--cw) * .135); flex: none; }
.cf .bdg.only .ico { width: calc(var(--cw) * .12); height: calc(var(--cw) * .12); }
.cf .lbl { font-size: calc(var(--cw) * .1); font-weight: 700; letter-spacing: .02em; line-height: 1; }
.cf .shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.34) 47%, rgba(255,255,255,.08) 54%, transparent 60%);
}
@container (max-width: 54px) {
  .cf .lbl { display: none; }
  .cf .bdg { padding: 0; width: calc(var(--cw) * .24); height: calc(var(--cw) * .24); }
  .cf .bdg .ico { width: calc(var(--cw) * .15); height: calc(var(--cw) * .15); }
  .cf .bdg.only { width: calc(var(--cw) * .24); }
  .cf .pat { display: none; }
}

/* 0: irisierend */
.cf.v0 { background: conic-gradient(from 210deg at 50% 50%, #3ee8d0, #5aa8ff, #c07bff, #ff8fd0, #ffd27a, #7af0b0, #3ee8d0); }
.cf.v0 .sym { color: rgba(0,120,120,.4); }
.cf.v0 .num { color: #0a6e72; }
.cf.v0 .co { color: #0a6e72; }
.cf.v0 .bdg { background: linear-gradient(180deg, #ffe27a, #f5a623); color: #7a4a00; }

/* 13: schwarz-gold */
.cf.v13 { background: linear-gradient(145deg, #fbe7a1, #c8961e 45%, #7a5410 70%, #e9c25a); color: #f3cf6a; }
.cf.v13 .pl {
  background:
    radial-gradient(circle at 50% 42%, #3a3020, transparent 65%),
    linear-gradient(160deg, #17171d, #07070a);
  box-shadow: inset 0 0 0 max(1px, calc(var(--cw) * .01)) rgba(243,207,106,.55);
}
.cf.v13 .pat { background: radial-gradient(circle, rgba(243,207,106,.25) calc(var(--cw) * .008), transparent calc(var(--cw) * .012)) 0 0 / calc(var(--cw) * .075) calc(var(--cw) * .075); }
.cf.v13 .sym { color: rgba(243,207,106,.28); }
.cf.v13 .ring { background: radial-gradient(circle, rgba(243,207,106,.16), transparent 70%); }
.cf.v13 .num { color: #f6d776; text-shadow: 0 calc(var(--cw) * .02) calc(var(--cw) * .04) rgba(0,0,0,.8), 0 0 calc(var(--cw) * .12) rgba(243,190,60,.45); }
.cf.v13 .co { color: #f3cf6a; }
.cf.v13 .bdg { background: linear-gradient(180deg, #f8e08a, #b8860b); color: #2a1c00; }
.cf.v13 .shine { background: linear-gradient(115deg, transparent 38%, rgba(255,230,150,.22) 47%, rgba(255,255,255,.05) 54%, transparent 60%); }

/* ---------- Rückseite ---------- */
.cb {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(140,110,255,.45), transparent 62%),
    linear-gradient(135deg, transparent 47%, rgba(255,214,120,.2) 48% 52%, transparent 53%) 0 0 / calc(var(--cw) * .18) calc(var(--cw) * .18),
    linear-gradient(45deg, transparent 47%, rgba(255,214,120,.2) 48% 52%, transparent 53%) 0 0 / calc(var(--cw) * .18) calc(var(--cw) * .18),
    linear-gradient(155deg, #3a3a9a, #28206a 50%, #17194a);
}
.cb::before {
  content: ""; position: absolute; inset: calc(var(--cw) * .05);
  border-radius: calc(var(--cw) * .08);
  border: max(1px, calc(var(--cw) * .014)) solid rgba(255,214,120,.8);
  box-shadow: inset 0 0 calc(var(--cw) * .08) rgba(255,214,120,.25), 0 0 calc(var(--cw) * .05) rgba(255,214,120,.25);
}
.cb::after {
  content: ""; position: absolute; inset: calc(var(--cw) * .09);
  border-radius: calc(var(--cw) * .05);
  border: max(1px, calc(var(--cw) * .006)) solid rgba(120,220,255,.45);
}
.cb .emb {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--cw) * .66); height: calc(var(--cw) * .66);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #4a3fb5, #15123d 75%);
  box-shadow: 0 0 0 max(1px, calc(var(--cw) * .02)) #ffd678, 0 0 0 calc(var(--cw) * .045) rgba(20,16,60,.9), 0 0 0 calc(var(--cw) * .052) rgba(120,220,255,.8), 0 0 calc(var(--cw) * .18) rgba(120,200,255,.55);
  z-index: 1;
}
.cb .emb .st { width: calc(var(--cw) * .15); height: calc(var(--cw) * .15); color: #ffd678; margin-bottom: calc(var(--cw) * .015); }
.cb .emb b {
  font-size: calc(var(--cw) * .165); font-weight: 900; letter-spacing: .06em; line-height: 1;
  padding-left: .06em;
  background: linear-gradient(180deg, #fff3c4, #ffc94d 60%, #e59a1a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cb .shine { position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.14) 48%, transparent 56%); }
@container (max-width: 54px) {
  .cb .emb .st { display: none; }
  .cb .emb b { font-size: calc(var(--cw) * .17); }
}

/* ---------- Zustände (auf .face, damit der Flip nicht gestört wird) ---------- */
.card.selectable { cursor: pointer; }
.card.selectable .face { animation: caboPulse 1.8s ease-in-out infinite; }
.card.selected .face, .card.selected.selectable .face {
  animation: none;
  box-shadow: 0 0 0 calc(var(--cw) * .045) #ffd45e, 0 0 calc(var(--cw) * .28) calc(var(--cw) * .03) rgba(255,212,94,.85), 0 calc(var(--cw) * .04) calc(var(--cw) * .1) rgba(0,0,0,.5);
}
.card.glow .face { animation: caboGlow 1.5s ease-out 1; }
.card.dim .face { filter: grayscale(.85) brightness(.55); }
.card.dim { opacity: .75; }

@keyframes caboPulse {
  0%, 100% { box-shadow: var(--sh), 0 0 0 calc(var(--cw) * .02) rgba(120,220,255,.55), 0 0 calc(var(--cw) * .06) rgba(120,220,255,.25); }
  50%      { box-shadow: var(--sh), 0 0 0 calc(var(--cw) * .03) rgba(120,220,255,.9),  0 0 calc(var(--cw) * .2) rgba(120,220,255,.6); }
}
@keyframes caboGlow {
  0%   { box-shadow: var(--sh), 0 0 0 calc(var(--cw) * .05) rgba(255,255,255,.95), 0 0 calc(var(--cw) * .45) calc(var(--cw) * .08) rgba(255,230,140,.95); }
  100% { box-shadow: var(--sh), 0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(255,230,140,0); }
}
@media (prefers-reduced-motion: reduce) {
  .card .inner { transition-duration: .01s; }
  .card.selectable .face { animation: none; box-shadow: var(--sh), 0 0 0 calc(var(--cw) * .025) rgba(120,220,255,.8); }
}

/* Flache Karten (Deko): keine 3D-Drehung */
.card.flat .inner, .card.flat.up .inner { transform: rotate(var(--rot, 0deg)); transform-style: flat; }
.card.flat .face.front { transform: none; }

/* Absicherung gegen durchscheinende Rückseiten (backface-visibility ist in manchen
   Browsern unzuverlässig): die abgewandte Seite wird zur Hälfte der Drehung ausgeblendet */
.card:not(.flat) .face { transition: visibility 0s linear .25s; }
.card.up:not(.flat) .face.back { visibility: hidden; }
.card:not(.up):not(.flat) .face.front { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .card:not(.flat) .face { transition-delay: 0s; } }