/* roomz · Versa-Kartenbilder und Karten-Effekte – automatisch aus versa.css herausgelöst
   (extract_cards.py in backups/roomz-versa-ui-quelle). Klasse .card heißt hier .vcard. */
@font-face{
  font-family:"Orbitron";
  src:url("./fonts/Orbitron-VariableFont_wght.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
.result-name-stage{position:relative;
  justify-self:center;
  width:100%;
  max-width:100%;
  min-height:114px;
  padding:8px 10px 6px;
  pointer-events:none;
  box-sizing:border-box;
  overflow:visible;
  z-index:1;}
.result-name-card__image{display:block;
  width:100%;
  height:100%;
  object-fit:contain;}
.result-name-stage__rail{position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  min-height:92px;
  overflow:visible;}
.result-name-stage__cards{display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:3px;
  width:100%;
  max-width:100%;
  overflow:visible;}
.result-name-card{position:relative;
  display:block;
  flex:0 1 min(54px, calc((100% - 21px) / 8));
  width:min(54px, calc((100% - 21px) / 8));
  aspect-ratio:.68 / 1;
  opacity:0;
  transform:translate3d(0, 8px, 0) scale(.94);
  animation:result-name-deal .52s ease-out both;
  animation-delay:var(--deal-delay, 0s);
  will-change:transform, opacity;
  backface-visibility:hidden;
  contain:none;
  overflow:visible;}
.result-name-card__hop{position:relative;
  display:block;
  width:100%;
  height:100%;
  transform:translate3d(0, 0, 0);
  animation:result-name-hop 2.2s linear infinite;
  animation-delay:var(--hop-delay, 1.92s);
  will-change:transform;
  backface-visibility:hidden;
  overflow:visible;}
.result-name-card__image{transform:translateZ(0);
  filter:none;}
@keyframes result-name-deal{
  0%{
    opacity:0;
    transform:translate3d(0, 10px, 0) scale(.92);
  }
  60%{
    opacity:1;
    transform:translate3d(0, 2px, 0) scale(.985);
  }
  100%{
    opacity:1;
    transform:translate3d(0, 0, 0) scale(1);
  }
}
@keyframes result-name-hop{
  0%, 100%{
    transform:translate3d(0, 0, 0);
  }
  25%{
    transform:translate3d(0, -4px, 0);
  }
  50%{
    transform:translate3d(0, -10px, 0);
  }
  75%{
    transform:translate3d(0, -4px, 0);
  }
}
.special-card-modal__preview .vcard{--card-w: 116px;
  --card-h: calc(var(--card-w) * 1.46);
  --card-radius: calc(var(--card-w) * .145);
  width:var(--card-w);
  height:var(--card-h);
  pointer-events:none;
  filter:drop-shadow(0 18px 28px rgba(31,43,50,.18));}
.incoming-preview-stage{position:absolute;
  inset:70px 12px 150px;
  z-index:9;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;}
.incoming-preview-stage:not(.hidden){opacity:1;}
.incoming-preview-grid{display:grid;
  grid-template-columns:repeat(var(--preview-cols, 2), minmax(0, var(--preview-card-w, 120px)));
  gap:12px;
  justify-content:center;
  align-content:center;
  padding:18px;
  border-radius:28px;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.52), rgba(255,255,255,.12) 56%, rgba(255,255,255,0) 100%);}
.incoming-preview-card{--card-w:var(--preview-card-w, 120px);
  --card-h:calc(var(--card-w) * 1.46);
  --card-radius:calc(var(--card-w) * 0.145);
  animation:incoming-preview-pop .82s cubic-bezier(.16,.84,.28,1) both;
  animation-delay:calc(var(--preview-index, 0) * .045s);
  filter:drop-shadow(0 18px 22px rgba(31,43,50,.22));}
.incoming-preview-card--penalty{box-shadow:0 0 0 4px rgba(120,107,216,.18);}
.incoming-preview-card--draw{box-shadow:0 0 0 4px rgba(22,169,200,.14);}
.ui-effect-layer{position:fixed;
  inset:0;
  z-index:28;
  pointer-events:none;}
.incoming-flight-card{position:fixed;
  margin:0;
  transform-origin:50% 50%;
  opacity:1;
  filter:drop-shadow(0 18px 22px rgba(31,43,50,.22));
  transition:
    transform .72s cubic-bezier(.16,.84,.24,1),
    opacity .72s ease,
    filter .72s ease;
  transition-delay:var(--flight-delay, 0s);}
.incoming-flight-card.is-flying{transform:translate(var(--flight-x), var(--flight-y)) scale(var(--flight-scale, .72));
  opacity:.18;
  filter:drop-shadow(0 8px 12px rgba(31,43,50,.08));}
.tornado-effect-stage{position:absolute;
  left:50%;
  top:50%;
  z-index:8;
  width:min(420px, 88vw);
  height:min(420px, 88vw);
  transform:translate(-50%, -50%);
  pointer-events:none;
  opacity:0;}
.tornado-effect-stage.is-active{opacity:1;}
.tornado-effect-stage::before{content:"";
  position:absolute;
  inset:12%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.26), rgba(255,255,255,0) 58%);
  filter:blur(8px);}
.tornado-effect-stage--red::before{background:radial-gradient(circle, rgba(226,80,98,.24), rgba(255,255,255,0) 60%);}
.tornado-effect-stage--blue::before{background:radial-gradient(circle, rgba(61,110,168,.24), rgba(255,255,255,0) 60%);}
.tornado-effect-stage--green::before{background:radial-gradient(circle, rgba(118,216,168,.24), rgba(255,255,255,0) 60%);}
.tornado-effect-stage--gold::before{background:radial-gradient(circle, rgba(237,165,46,.26), rgba(255,255,255,0) 60%);}
.tornado-effect-stage--anthracite::before{background:radial-gradient(circle, rgba(0,0,0,.36), rgba(255,255,255,0) 60%);}
.tornado-effect-core{position:absolute;
  left:50%;
  top:50%;
  width:44%;
  aspect-ratio:1;
  transform:translate(-50%, -50%);
  display:grid;
  place-items:center;
  animation:tornado-core-pulse 1.55s ease both;}
.tornado-effect-core__img{width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(35,48,58,.24));}
.tornado-effect-ring{position:absolute;
  left:50%;
  top:50%;
  width:58%;
  aspect-ratio:1;
  transform:translate(-50%, -50%);
  border-radius:50%;
  border:2px solid rgba(255,255,255,.74);
  box-shadow:0 0 0 10px rgba(255,255,255,.08), 0 0 34px rgba(255,255,255,.24);
  animation:tornado-ring-spin 1.3s linear both;}
.tornado-effect-cards{position:absolute;
  inset:0;}
.tornado-effect-card{position:absolute;
  left:50%;
  top:50%;
  width:12.8%;
  aspect-ratio:.71;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.9);
  background:
    linear-gradient(145deg, rgba(255,255,255,.16), transparent 26%),
    var(--card-fill);
  box-shadow:
    0 12px 18px rgba(31,43,50,.18),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -5px 8px rgba(0,0,0,.16);
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--slot) * 29deg))
    translateY(-150px)
    scale(.62);
  opacity:0;
  animation:tornado-card-deal-cycle 1.72s cubic-bezier(.18,.83,.27,1) forwards;
  animation-delay:var(--delay);}
.tornado-effect-card::before{content:"";
  position:absolute;
  inset:3px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.58);
  background:
    linear-gradient(145deg, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.06));}
.tornado-effect-card.vortex-card--red{--card-fill:linear-gradient(135deg, #e25062, #a5263b);}
.tornado-effect-card.vortex-card--blue{--card-fill:linear-gradient(135deg, #3d6ea8, #16345a);}
.tornado-effect-card.vortex-card--green{--card-fill:linear-gradient(135deg, #76d8a8, #299565);}
.tornado-effect-card.vortex-card--gold{--card-fill:linear-gradient(135deg, #eda52e, #ba6b08);}
.tornado-effect-card.vortex-card--anthracite{--card-fill:linear-gradient(135deg, #4b4b4b, #000000);}
@keyframes tornado-core-pulse{
  0%{ transform:translate(-50%, -50%) scale(.54); opacity:0; }
  20%{ transform:translate(-50%, -50%) scale(.98); opacity:1; }
  70%{ transform:translate(-50%, -50%) scale(1.06); opacity:1; }
  100%{ transform:translate(-50%, -50%) scale(.94); opacity:0; }
}
@keyframes tornado-ring-spin{
  0%{ transform:translate(-50%, -50%) scale(.32) rotate(0deg); opacity:0; }
  18%{ opacity:1; }
  100%{ transform:translate(-50%, -50%) scale(1.16) rotate(320deg); opacity:0; }
}
@keyframes tornado-card-deal-cycle{
  0%{
    opacity:0;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--slot) * 29deg))
      translateY(-170px)
      scale(.52);
  }
  14%{
    opacity:1;
  }
  46%{
    opacity:1;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--slot) * 62deg))
      translateY(-74px)
      scale(.88);
  }
  62%{
    opacity:1;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--slot) * 105deg))
      translateY(-12px)
      scale(.42);
  }
  72%{
    opacity:1;
    transform:
      translate(-50%, -50%)
      rotate(0deg)
      translate(0, 0)
      scale(.34);
  }
  100%{
    opacity:0;
    transform:
      translate(-50%, -50%)
      rotate(var(--deal-r))
      translate(var(--deal-x), var(--deal-y))
      scale(.86);
  }
}
.vcard{--accent: #13a8c7;
  --accent-dark: #087b92;
  --accent-rgb: 19,168,199;
  width: var(--card-w);
  height: var(--card-h);
  position: relative;
  flex: 0 0 auto;
  border-radius: var(--card-radius);
  user-select: none;
  transform-style: preserve-3d;
  transition: transform .18s ease, filter .18s ease;
  filter: drop-shadow(0 12px 12px rgba(31,43,50,.18));}
.vcard.face{overflow: hidden;
  border: 1px solid rgba(42,54,61,.19);
  background:
    linear-gradient(145deg, rgba(255,255,255,.99), rgba(224,230,233,.96) 43%, rgba(249,250,251,.98) 44%, rgba(197,207,212,.97));
  box-shadow: inset 0 1px 2px #fff, inset 0 -3px 5px rgba(48,61,68,.16);}
.vcard.face::before{content: "";
  position: absolute;
  inset: calc(var(--card-w) * .065);
  z-index: 12;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: calc(var(--card-radius) - 5px);
  box-shadow: inset 0 0 0 1px rgba(29,41,48,.07), 0 0 0 1px rgba(255,255,255,.24);}
.vcard.face::after{content: "";
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  opacity: .75;
  background:
    linear-gradient(111deg, transparent 0 37%, rgba(255,255,255,.57) 38%, transparent 42%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.017) 0 1px, transparent 1px 3px);
  mix-blend-mode: soft-light;}
.color-sweep{position: absolute;
  left: -18%;
  top: 20%;
  width: 136%;
  height: 42%;
  transform: rotate(-13deg);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.28), transparent 30%),
    linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: inset 0 2px 2px rgba(255,255,255,.42), inset 0 -5px 9px rgba(0,0,0,.14), 0 8px 19px rgba(var(--accent-rgb),.25);}
.color-sweep::before,.color-sweep::after{content: "";
  position: absolute;
  border-radius: inherit;}
.color-sweep::before{inset: 11% 10%;
  border: 1px solid rgba(255,255,255,.34);}
.color-sweep::after{left: 18%;
  right: 18%;
  bottom: -11%;
  height: 17%;
  opacity: .38;
  background: var(--accent-dark);
  filter: blur(5px);}
.corner{position: absolute;
  left: calc(var(--card-w) * .10);
  top: calc(var(--card-w) * .085);
  z-index: 14;
  display: grid;
  justify-items: center;
  min-width: calc(var(--card-w) * .17);
  line-height: .84;
  color: #263139;
  text-shadow: 0 1px 0 #fff;}
.corner.bottom{inset: auto calc(var(--card-w) * .10) calc(var(--card-w) * .085) auto;
  transform: rotate(180deg);}
.corner--top-right{left: auto;
  right: calc(var(--card-w) * .10);}
.corner--bottom-left{top: auto;
  bottom: calc(var(--card-w) * .085);
  transform: rotate(180deg);}
.corner--bottom-right{top: auto;
  bottom: calc(var(--card-w) * .085);
  left: auto;
  right: calc(var(--card-w) * .10);
  transform: rotate(180deg);}
.corner-value{display:grid;
  place-items:center;
  min-width:100%;
  min-height:calc(var(--card-w) * .205);
  text-align:center;
  font-size: calc(var(--card-w) * .205);
  font-weight: 1000;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;}
.corner-pip{width: calc(var(--card-w) * .075);
  aspect-ratio: 1;
  margin-top: calc(var(--card-w) * .035);
  transform: rotate(45deg);
  border-radius: 28%;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);}
.center-medallion{position: absolute;
  left: 50%;
  top: 48%;
  z-index: 13;
  width: calc(var(--card-w) * .60);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-7deg);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 28%;
  color: #fff;
  font-size: calc(var(--card-w) * .40);
  font-weight: 1000;
  line-height: 1;
  text-align:center;
  letter-spacing:-.04em;
  text-shadow: 0 3px 8px rgba(0,0,0,.22);
  background:
    linear-gradient(145deg, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: inset 0 2px 2px rgba(255,255,255,.54), inset 0 -7px 12px rgba(0,0,0,.14), 0 9px 21px rgba(var(--accent-rgb),.31);}
.symbol-glyph{display:block;
  width:100%;
  height:100%;
  color:currentColor;}
.symbol-glyph--text{display:grid;
  place-items:center;
  width:100%;
  height:100%;
  line-height:1;}
.symbol-glyph--corner{width:calc(var(--card-w) * .18);
  height:calc(var(--card-w) * .18);}
.symbol-glyph--center{width:calc(var(--card-w) * .34);
  height:calc(var(--card-w) * .34);}
.vcard.special .symbol-glyph--center{width:calc(var(--card-w) * .36);
  height:calc(var(--card-w) * .36);}
.vcard.special .symbol-glyph--corner{width:calc(var(--card-w) * .165);
  height:calc(var(--card-w) * .165);}
.center-medallion::after{content: "";
  position: absolute;
  inset: 11%;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 23%;}
.card-title{position: absolute;
  left: 50%;
  bottom: 12.5%;
  z-index: 14;
  transform: translateX(-50%);
  width:72%;
  color: #344149;
  font-size: calc(var(--card-w) * .062);
  font-weight: 1000;
  letter-spacing: .13em;
  line-height:1.04;
  text-align:center;
  text-transform: uppercase;
  text-wrap: balance;}
.vcard.special .color-sweep{top: 15%;
  height: 49%;
  transform: rotate(13deg);
  background:
    linear-gradient(108deg, transparent 0 34%, rgba(255,255,255,.26) 38%, rgba(255,255,255,.08) 49%, transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.28), transparent 30%),
    linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: inset 0 2px 2px rgba(255,255,255,.42), inset 0 -5px 9px rgba(0,0,0,.14), 0 8px 19px rgba(var(--accent-rgb),.25);}
.vcard.special .center-medallion{top: 47%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    conic-gradient(from 210deg, rgba(255,255,255,.42), transparent 18%, rgba(255,255,255,.11) 36%, transparent 57%),
    linear-gradient(135deg, var(--accent), var(--accent-dark));}
.vcard.special .center-medallion::after{border-radius: 50%;}
.vcard.special .card-title{bottom: 10.1%;
  width:76%;
  font-size: calc(var(--card-w) * .053);}
.vcard.card--lock .color-sweep{top:16%;
  height:48%;
  transform:rotate(-10deg);
  background:
    linear-gradient(108deg, transparent 0 34%, rgba(255,255,255,.24) 38%, rgba(255,255,255,.07) 49%, transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.3), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 72%, white 28%), var(--accent-dark) 66%, color-mix(in srgb, var(--accent-dark) 82%, black 18%));
  box-shadow: inset 0 2px 2px rgba(255,255,255,.42), inset 0 -6px 10px rgba(32,48,64,.20), 0 10px 22px rgba(var(--accent-rgb),.24);}
.vcard.card--lock .center-medallion{border-radius:24%;
  transform:translate(-50%, -50%);
  background:
    linear-gradient(145deg, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 62%, white 38%), color-mix(in srgb, var(--accent-dark) 88%, black 12%) 72%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.5), inset 0 -8px 14px rgba(33,49,65,.22), 0 11px 24px rgba(var(--accent-rgb),.28);}
.vcard.card--lock .center-medallion::after{border-radius:20%;}
.vcard.card--all .center-medallion{display:none;}
.vcard.card--all .all-field{position:absolute;
  inset:calc(var(--card-w) * .13) calc(var(--card-w) * .08) calc(var(--card-w) * .22);
  display:grid;
  place-items:center;}
.vcard.card--all .all-plus{position:absolute;
  left:50%;
  top:50%;
  width:calc(var(--card-w) * .64);
  aspect-ratio:1;
  transform:translate(-50%, -50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  font-size:calc(var(--card-w) * .34);
  font-weight:1000;
  letter-spacing:-.08em;
  text-shadow:0 3px 8px rgba(0,0,0,.22);
  background:
    linear-gradient(145deg, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(145deg, var(--accent), var(--accent-dark));
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.44),
    inset 0 -8px 14px rgba(0,0,0,.2),
    0 12px 24px rgba(var(--accent-rgb),.28);}
.vcard.card--all .all-plus::before{content:"";
  position:absolute;
  inset:11%;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;}
.vcard.card--all .all-receiver,.vcard.card--all .all-arrow{display:none;}
.vcard.card--tornado{--accent:#eef2f6;
  --accent-dark:#aeb9c4;
  --accent-rgb:138,151,165;}
.vcard.card--tornado .color-sweep,.vcard.card--tornado .center-medallion{display:none;}
.vcard.card--tornado .corner-pip{display:none;}
.vcard.card--tornado .corner-value{width:calc(var(--card-w) * .13);
  height:calc(var(--card-w) * .13);
  display:grid;
  place-items:center;}
.vcard.card--tornado .corner-value img{width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 4px 8px rgba(46,60,72,.14));}
.vcard.card--tornado .tornado-field{position:absolute;
  inset:calc(var(--card-w) * .08);
  border-radius:calc(var(--card-radius) - 12px);
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.92), rgba(255,255,255,0) 24%),
    linear-gradient(180deg, rgba(252,253,255,.98) 0%, rgba(241,245,249,.94) 100%);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:inset 0 0 0 1px rgba(23,33,42,.06);}
.vcard.card--tornado .vortex{position:absolute;
  inset:6% 4% 14%;
  display:block;}
.vcard.card--tornado .vortex-image{position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 16px 18px rgba(41,57,70,.14));}
.vcard.card--tornado .vortex-cards{position:absolute;
  inset:0;
  pointer-events:none;}
.vcard.card--tornado .vortex-card{position:absolute;
  width:17%;
  aspect-ratio:.71;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.92);
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), transparent 26%),
    var(--card-fill);
  box-shadow:
    0 10px 20px rgba(41,57,70,.16),
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -5px 8px rgba(0,0,0,.16);
  overflow:hidden;}
.vcard.card--tornado .vortex-card::before{content:"";
  position:absolute;
  inset:3px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.6);
  background:
    linear-gradient(145deg, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);}
.vcard.card--tornado .vortex-card::after{content:"";
  position:absolute;
  inset:0 0 5px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:clamp(8px, 1.15vw, 12px);
  font-weight:1000;
  letter-spacing:-.04em;
  text-shadow:0 2px 4px rgba(0,0,0,.18);}
.vcard.card--tornado .vortex-card .mini-corner,.vcard.card--tornado .vortex-card .mini-corner-bottom{display:none;}
.vcard.card--tornado .vortex-card--red{--card-fill:linear-gradient(135deg, #e25062, #a5263b);}
.vcard.card--tornado .vortex-card--blue{--card-fill:linear-gradient(135deg, #3d6ea8, #16345a);}
.vcard.card--tornado .vortex-card--green{--card-fill:linear-gradient(135deg, #76d8a8, #299565);}
.vcard.card--tornado .vortex-card--gold{--card-fill:linear-gradient(135deg, #eda52e, #ba6b08);}
.vcard.card--tornado .vortex-card--anthracite{--card-fill:linear-gradient(135deg, #4b4b4b, #000000);}
.vcard.card--tornado .vortex-card.a{left:2%; top:10%; transform:rotate(-20deg);}
.vcard.card--tornado .vortex-card.b{right:4%; top:8%; transform:rotate(16deg);}
.vcard.card--tornado .vortex-card.c{left:-1%; top:43%; width:15%; transform:rotate(22deg);}
.vcard.card--tornado .vortex-card.d{right:1%; top:41%; width:15%; transform:rotate(-15deg);}
.vcard.card--tornado .vortex-card.e{left:15%; bottom:4%; width:14%; transform:rotate(-11deg);}
.vcard.card--tornado .vortex-card.f{right:15%; bottom:6%; width:14%; transform:rotate(12deg);}
.vcard.card--tornado .vortex-card.g{left:41%; bottom:-1%; width:15%; transform:rotate(7deg);}
.vcard.card--tornado .vortex-card.h{left:37%; top:3%; width:14%; transform:rotate(-6deg);}
.vcard.card--tornado .vortex-card.i{left:34%; top:28%; width:13%; transform:rotate(-18deg);}
.vcard.card--tornado .vortex-card.j{right:33%; top:31%; width:13%; transform:rotate(14deg);}
.vcard.card--tornado .vortex-card.k{left:43%; top:43%; width:12%; transform:rotate(6deg);}
.vcard.card--tornado .card-title{bottom:8.8%;
  width:76%;
  font-size:calc(var(--card-w) * .068);
  letter-spacing:.16em;}
@keyframes orbit-ring{
  to { transform: rotate(360deg); }
}
.cyan{--accent:#3d6ea8; --accent-dark:#16345a; --accent-rgb:61,110,168;}
.ruby{--accent:#e25062; --accent-dark:#a5263b; --accent-rgb:226,80,98;}
.amber{--accent:#eda52e; --accent-dark:#ba6b08; --accent-rgb:237,165,46;}
.jade{--accent:#76d8a8; --accent-dark:#299565; --accent-rgb:118,216,168;}
.onyx{--accent:#3f3f3f; --accent-dark:#000000; --accent-rgb:63,63,63;}
.violet{--accent:#786bd8; --accent-dark:#4d3ba1; --accent-rgb:120,107,216;}
.pink{--accent:#df4f94; --accent-dark:#9e245f; --accent-rgb:223,79,148;}
.graphite{--accent:#64717a; --accent-dark:#27323a; --accent-rgb:100,113,122;}
.vcard.wild{--accent:#8b6bd5;
  --accent-dark:#28343b;
  --accent-rgb:139,107,213;}
.vcard.wild .color-sweep{background:
    linear-gradient(108deg, transparent 0 34%, rgba(255,255,255,.25) 38%, rgba(255,255,255,.08) 49%, transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.25), transparent 30%),
    conic-gradient(from 20deg, #16a9c8, #43ab7e, #eda52e, #f2c94c, #e25062, #df4f94, #786bd8, #16a9c8);}
.vcard.wild .center-medallion{background: conic-gradient(from 20deg, #16a9c8, #43ab7e, #eda52e, #f2c94c, #e25062, #df4f94, #786bd8, #16a9c8);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.55), inset 0 -7px 12px rgba(0,0,0,.17), 0 9px 21px rgba(69,79,87,.28);}
.vcard.back{overflow: hidden;
  border: 1px solid rgba(39,51,58,.23);
  background:
    linear-gradient(145deg, rgba(255,255,255,.995), rgba(240,245,249,.98) 42%, rgba(252,253,254,.995) 43%, rgba(220,229,237,.985));
  box-shadow: inset 0 1px 2px #fff, inset 0 -4px 7px rgba(35,47,54,.14);}
.back-field{position: absolute;
  inset: calc(var(--card-w) * .065);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: calc(var(--card-radius) - 5px);
  background:
    radial-gradient(circle at 18% 18%, rgba(226,80,98,.76), transparent 22%),
    radial-gradient(circle at 82% 16%, rgba(61,110,168,.72), transparent 22%),
    radial-gradient(circle at 24% 82%, rgba(118,216,168,.66), transparent 24%),
    radial-gradient(circle at 86% 78%, rgba(237,165,46,.78), transparent 24%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.11) 0 2px, transparent 2px 9px),
    linear-gradient(145deg, rgba(248,250,252,.98), rgba(225,235,243,.96) 48%, rgba(210,223,233,.97));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.16), inset 0 0 24px rgba(132,156,177,.10);}
.back-field::before,.back-field::after{content: "";
  position: absolute;
  width: 118%;
  height: 31%;
  left: -9%;
  border-radius: 999px;
  transform: rotate(-28deg);}
.back-field::before{display: none;}
.back-field::after{top: 48%;
  height: 28%;
  background: linear-gradient(90deg, rgba(255,255,255,.30), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.22);}
.back-emblem{position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 76%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: #223446;
  font-size: calc(var(--card-w) * .52);
  font-weight: 1000;
  font-style: italic;
  letter-spacing: 0;
  text-shadow: 0 8px 18px rgba(59,78,94,.10), 0 1px 0 rgba(255,255,255,.26);
  background: none;
  box-shadow: none;}
.back-emblem::after{display: none;}
.back-emblem span{position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  text-align: center;
  transform: translateX(-.03em);}
.back-name{display:none;}
.hand-effect-stage{position:absolute;
  inset:0;
  z-index:7;
  pointer-events:none;
  overflow:visible;}
.hand-effect-card{position:absolute;
  margin:0;
  animation:hand-card-tornado-collapse .92s cubic-bezier(.17,.79,.22,1) forwards;
  animation-delay:var(--delay, 0s);
  transform-origin:50% 60%;}
.discard-drop-in{animation:none;}
@keyframes room-close-backdrop-in{
  0%{ opacity:0; }
  100%{ opacity:1; }
}
@keyframes room-close-shell-in{
  0%{
    opacity:0;
    transform:translateY(18px) scale(.95);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
@keyframes room-close-shadow-in{
  0%{
    opacity:0;
    transform:scale(.72);
  }
  100%{
    opacity:1;
    transform:scale(1);
  }
}
@keyframes room-close-storm-card{
  0%{
    opacity:0;
    transform:translate(var(--storm-from-x), var(--storm-from-y)) rotate(calc(var(--storm-rot) * 1.2)) scale(.7);
  }
  16%{
    opacity:1;
  }
  58%{
    opacity:1;
    transform:translate(var(--storm-to-x), var(--storm-to-y)) rotate(var(--storm-rot)) scale(1);
  }
  82%{
    opacity:1;
    transform:translate(calc(var(--storm-to-x) * .6), calc(var(--storm-to-y) * .6)) rotate(calc(var(--storm-rot) * .55)) scale(.94);
  }
  100%{
    opacity:0;
    transform:translate(0, 0) rotate(0deg) scale(.9);
    filter:blur(.3px);
  }
}
@keyframes room-close-stack-card{
  0%{
    opacity:0;
    transform:translate(0, 0) rotate(0deg) scale(.84);
  }
  100%{
    opacity:1;
  }
}
@keyframes room-close-trump-drop{
  0%{
    opacity:0;
    transform:translateY(-160px) scale(.78) rotate(-16deg);
  }
  58%{
    opacity:1;
    transform:translateY(10px) scale(1.04) rotate(-4deg);
  }
  76%{
    opacity:1;
    transform:translateY(-8px) scale(1) rotate(-1deg);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1) rotate(0deg);
  }
}
@keyframes room-close-copy-in{
  0%{
    opacity:0;
    transform:translateY(10px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes play-ready-pulse{
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(22,169,200,.14), 0 14px 26px rgba(8,120,143,.3), inset 0 1px 0 rgba(255,255,255,.34);
    filter: saturate(1.08) brightness(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(22,169,200,.18), 0 16px 30px rgba(8,120,143,.34), inset 0 1px 0 rgba(255,255,255,.34);
    filter: saturate(1.16) brightness(1.03);
  }
}
@keyframes draw-penalty-pulse{
  0% {
    box-shadow:0 0 0 0 rgba(120,107,216,.30), 0 10px 22px rgba(77,59,161,.24), inset 0 1px 0 rgba(255,255,255,.22);
    filter:brightness(1);
  }
  55% {
    box-shadow:0 0 0 12px rgba(120,107,216,0), 0 14px 28px rgba(77,59,161,.32), inset 0 1px 0 rgba(255,255,255,.22);
    filter:brightness(1.04);
  }
  100% {
    box-shadow:0 0 0 0 rgba(120,107,216,0), 0 10px 22px rgba(77,59,161,.24), inset 0 1px 0 rgba(255,255,255,.22);
    filter:brightness(1);
  }
}
@keyframes discard-drop-in{
  0% {
    transform: translateY(-26px) scale(.88) rotate(-7deg);
    opacity: .22;
  }
  65% {
    transform: translateY(3px) scale(1.03) rotate(1.5deg);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1) rotate(0);
    opacity: 1;
  }
}
@keyframes result-card-float{
  0% {
    transform:translate3d(0, 0, 0) rotate(var(--rotate)) scale(.78);
    opacity:0;
  }
  10% {
    transform:translate3d(calc(var(--drift) * .1), calc(var(--rise) * -.12), 0) rotate(calc(var(--rotate) * .92)) scale(.98);
    opacity:1;
  }
  100% {
    transform:translate3d(var(--drift), calc(var(--rise) * -1.18), 0) rotate(calc(var(--rotate) * -.55)) scale(.86);
    opacity:1;
  }
}
@keyframes self-turn-flash{
  0% {
    box-shadow: 0 0 0 0 rgba(22,169,200,0), var(--shadow), inset 0 1px 0 #fff, inset 0 -45px 100px rgba(67,81,89,.09);
    filter: brightness(1);
  }
  35% {
    box-shadow: 0 0 0 10px rgba(22,169,200,.12), 0 22px 52px rgba(22,169,200,.18), inset 0 1px 0 #fff, inset 0 -45px 100px rgba(67,81,89,.05);
    filter: brightness(1.03);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(22,169,200,0), var(--shadow), inset 0 1px 0 #fff, inset 0 -45px 100px rgba(67,81,89,.09);
    filter: brightness(1);
  }
}
@keyframes hand-card-incoming{
  0% {
    transform: translateY(-18px) translateX(18px) scale(.96);
    opacity:.24;
  }
  72% {
    transform: translateY(2px) translateX(0) scale(1.02);
    opacity:1;
  }
  100% {
    transform: translateY(0) translateX(0) scale(1);
    opacity:1;
  }
}
@keyframes hand-card-penalty-incoming{
  0% {
    transform: translateY(-30px) translateX(26px) rotate(-5deg) scale(.94);
    opacity:.14;
    filter: drop-shadow(0 24px 26px rgba(91,71,184,.22));
  }
  58% {
    transform: translateY(3px) translateX(0) rotate(0deg) scale(1.03);
    opacity:1;
    filter: drop-shadow(0 18px 20px rgba(91,71,184,.18));
  }
  100% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    opacity:1;
    filter: drop-shadow(0 12px 12px rgba(31,43,50,.18));
  }
}
@keyframes hand-card-tornado-incoming{
  0% {
    transform: translateY(-132px) translateX(0) rotate(-9deg) scale(.34);
    opacity:.04;
    filter: drop-shadow(0 28px 28px rgba(79,90,101,.22));
  }
  42% {
    transform: translateY(-48px) translateX(8px) rotate(6deg) scale(.82);
    opacity:.94;
    filter: drop-shadow(0 22px 24px rgba(79,90,101,.18));
  }
  78% {
    transform: translateY(3px) translateX(0) rotate(0deg) scale(1.03);
    opacity:1;
    filter: drop-shadow(0 15px 18px rgba(79,90,101,.14));
  }
  100% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    opacity:1;
    filter: drop-shadow(0 12px 12px rgba(31,43,50,.18));
  }
}
@keyframes hand-card-tornado-collapse{
  0% {
    opacity:1;
    transform:translate3d(0,0,0) rotate(0deg) scale(1);
    filter:drop-shadow(0 12px 12px rgba(31,43,50,.18));
  }
  54% {
    opacity:1;
    transform:translate3d(calc(var(--to-x) * .62), calc(var(--to-y) * .62), 0) rotate(calc(var(--to-r) * .66)) scale(.66);
    filter:drop-shadow(0 22px 24px rgba(79,90,101,.16));
  }
  100% {
    opacity:0;
    transform:translate3d(var(--to-x), var(--to-y), 0) rotate(var(--to-r)) scale(.24);
    filter:drop-shadow(0 30px 26px rgba(79,90,101,.08));
  }
}
@keyframes incoming-preview-pop{
  0% {
    opacity:0;
    transform:translateY(18px) scale(.76);
  }
  24% {
    opacity:1;
  }
  54% {
    opacity:1;
    transform:translateY(-4px) scale(1.02);
  }
  100% {
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
@keyframes chat-bubble-in{
  from{ opacity:0; transform:translateX(10px) translateY(4px); }
  to{ opacity:1; transform:translateX(0) translateY(0); }
}
@keyframes chat-bubble-out{
  from{ opacity:1; transform:translateX(0) translateY(0); }
  to{ opacity:0; transform:translateX(10px) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce){.discard-drop-in{ animation:none; }.hand-effect-card{ animation:none; }.incoming-flight-card{ transition:none; }}