/* v2.16 strategic battle rules */
.energy-meter {
  min-width: 64px;
  padding: 5px 7px;
  display: grid;
  place-items: center;
  gap: 1px;
  border: 1px solid rgba(154, 204, 255, .34);
  border-radius: 9px;
  background: rgba(17, 29, 44, .76);
  color: #d9eeff;
  box-shadow: inset 0 0 12px rgba(81, 161, 230, .08);
}

.energy-meter span {
  font-size: .48rem;
  font-weight: 950;
  letter-spacing: .11em;
  opacity: .78;
}

.energy-meter strong {
  color: #83c9ff;
  font-size: .9rem;
  line-height: 1;
}

.card-topline {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 3px;
}

.card-cost {
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #356a9d;
  color: #fff;
  font-size: .5rem;
  font-weight: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .22);
  white-space: nowrap;
}

.card-keyword {
  justify-self: center;
  align-self: end;
  max-width: 92%;
  margin-bottom: 2px;
  padding: 2px 5px;
  overflow: hidden;
  border: 1px solid rgba(74, 51, 28, .2);
  border-radius: 999px;
  background: rgba(255, 248, 228, .54);
  color: rgba(53, 35, 19, .78);
  font-size: .43rem;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-face.has-keyword {
  grid-template-rows: auto 1fr auto auto;
}

.field-card.guard-card {
  border-color: #80b9d8;
  box-shadow: 0 0 0 3px rgba(95, 186, 232, .14), 0 7px 16px rgba(0, 0, 0, .29);
}

.field-card.guard-card::after {
  content: "GUARD";
  position: absolute;
  top: -7px;
  right: -7px;
  padding: 3px 5px;
  border-radius: 999px;
  background: #356a9d;
  color: white;
  font-size: .42rem;
  font-weight: 1000;
  letter-spacing: .04em;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

.field-card.summon-sick {
  filter: saturate(.72) brightness(.88);
}

.hero-badge.guard-blocked {
  box-shadow: 0 6px 16px rgba(0, 0, 0, .34), inset 0 0 0 2px rgba(255,255,255,.08), 0 0 0 3px rgba(82, 161, 207, .12);
}

.card-detail-stat.cost {
  background: #356a9d;
}

@media (max-width: 760px) {
  .energy-meter {
    min-width: 58px;
    padding: 4px 6px;
  }

  .energy-meter strong {
    font-size: .8rem;
  }

  .card-cost {
    min-width: 17px;
    height: 17px;
    padding-inline: 3px;
    font-size: .43rem;
  }

  .card-keyword {
    font-size: .38rem;
    padding: 2px 4px;
  }
}

.card-detail-card .card-cost {
  min-width: 28px;
  height: 28px;
  font-size: .68rem;
}

.card-detail-card .card-keyword {
  padding: 3px 8px;
  font-size: .62rem;
}