.game.is-lobby {
  display: block;
  height: 100dvh;
  min-width: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.card.is-mulligan-selected {
  outline: 2px solid rgba(255, 214, 102, 0.95);
  box-shadow: 0 0 0 4px rgba(255, 214, 102, 0.18), 0 16px 34px rgba(255, 214, 102, 0.18);
  transform: translateY(-8px);
}

.card-mulligan-badge {
  position: absolute;
  left: 20%;
  bottom: 6%;
  z-index: 4;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 214, 102, 0.96);
  color: #231600;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
}



/* card layout v0.6.4 */
.card {
  container-type: inline-size;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px;
  padding: 34px 8px 8px;
}

/* The bitmap frame owns the card perimeter. */
.card.card { border: 0; }

.hand-card-wrap { height: clamp(146px, calc(23vh - 28px), 184px); }

.card-reactor-badge { left: 8px; top: 8px; right: auto; bottom: auto; }

.card-info { top: 8px; right: 8px; }

.card-status-badge { top: -9px; left: 50%; right: auto; min-width: 44px; height: 20px; padding: 0 8px; font-size: 0.62rem; transform: translateX(-50%); }

.card-art { order: 1; min-height: 0; display: grid; place-items: center; align-self: stretch; font-size: clamp(2.15rem, 6vh, 3.25rem); text-align: center; }

.card-name {
  order: 2;
  min-height: 36px;
  margin: 0 -2px;
  padding: 6px 5px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
  font-size: clamp(0.72rem, 1.55vh, 0.88rem);
  line-height: 1.08;
  font-weight: 500;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.16));
}

/* mobile / low height */
@media (max-width: 900px), (max-height: 520px) {
  .card { height: 98px; grid-template-rows: minmax(0, 1fr) 28px; gap: 3px; padding: 27px 5px 5px; }

  .hand-card-wrap { height: 98px; }

  .card-reactor-badge { left: 5px; top: 5px; right: auto; bottom: auto; min-width: 22px; height: 14px; }

  .card-reactor-battery { width: 20px; height: 12px; }

  .card-reactor-battery span { font-size: 0.46rem; font-weight: 800; }

  .card-reactor-battery::after { top: 2px; right: -3px; width: 2px; height: 6px; }

  .card-info { top: 5px; right: 5px; width: 18px; height: 18px; font-size: 0.68rem; }

  .card-status-badge { top: -7px; left: 50%; right: auto; min-width: 36px; height: 17px; padding: 0 6px; border-radius: 4px; font-size: 0.52rem; transform: translateX(-50%); }

  .card-status-badge { gap: 3px; }

  .card-art { min-height: 0; font-size: 1.6rem; }

  .card-name { min-height: 26px; padding: 4px 3px 0; font-size: 0.6rem; line-height: 1.05; }
}


.card-art{display:flex;align-items:center;justify-content:center;}
.card-art-img{width:90%;height:90%;object-fit:cover;display:block;filter:none;pointer-events:none;}

.online-game .hand-card-wrap .card {
  display: block;
  padding: 0;
  overflow: hidden;
  background: #02060d;
}

.online-game .hand-card-wrap .card-art {
  position: absolute;
  inset: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.online-game .hand-card-wrap .card-art-img {
  width: 90%;
  height: 90%;
  object-fit: cover;
  filter: none;
}

.card-frame-img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.card-rarity-gem {
  position: absolute;
  top: 1%;
  left: 50%;
  z-index: 3;
  width: 16%;
  height: auto;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 3px rgba(180, 225, 255, 0.32));
  pointer-events: none;
}

.card-art { position: relative; z-index: 1; }
.card-name {
  position: absolute;
  z-index: 3;
  left: 10%;
  right: 10%;
  bottom: 5%;
  width: auto;
  height: 15.5%;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  -webkit-line-clamp: unset;
  text-wrap: balance;
  font-size: clamp(9px, 9cqi, 13px);
  line-height: 0.96;
  font-weight: 700;
  border-top: 0;
  background: transparent;
}
.card-reactor-badge,
.card-confirm-badge,
.card-mulligan-badge { z-index: 4; }