/* WEB-SKIN-V01: deterministic Red Tithe card faces. */
.red-tithe-face { display: none; }

body[data-card-skin="red-tithe"] .card:not(.empty),
body[data-card-skin="red-tithe"] .mini-card,
body[data-card-skin="red-tithe"] .replay-card {
  overflow: hidden;
  border-color: rgba(239, 40, 88, 0.92);
  background-color: #080204;
  background-image:
    radial-gradient(circle at 50% 38%, rgba(239, 40, 88, 0.08), transparent 44%),
    linear-gradient(155deg, #130307 0%, #050203 48%, #0c0205 100%);
  box-shadow:
    0 0 0 1px rgba(95, 5, 29, 0.88) inset,
    0 0 12px rgba(239, 40, 88, 0.18),
    0 7px 16px rgba(0, 0, 0, 0.62);
}

body[data-card-skin="red-tithe"] .card.selectable.selected {
  border-color: #ffb3c6;
  box-shadow:
    0 0 0 3px rgba(239, 40, 88, 0.42),
    0 0 28px rgba(239, 40, 88, 0.34),
    0 12px 22px rgba(0, 0, 0, 0.76);
}

body[data-card-skin="red-tithe"] .red-tithe-face {
  position: absolute;
  inset: 2.3%;
  z-index: 2;
  display: grid;
  grid-template-rows: 7% 16% 2% 31% 6% 22% 14%;
  min-width: 0;
  min-height: 0;
  padding: 3.5%;
  border: 1px solid rgba(255, 51, 101, 0.72);
  border-radius: 4%;
  color: #ffe7ed;
  background:
    linear-gradient(90deg, rgba(255, 45, 94, 0.1), transparent 15%, transparent 85%, rgba(255, 45, 94, 0.1)),
    rgba(4, 1, 2, 0.62);
  box-shadow:
    0 0 0 1px rgba(88, 4, 25, 0.9),
    0 0 8px rgba(242, 38, 95, 0.16) inset;
  font-size: clamp(3.1px, 1.1vw, 6.2px);
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.025em;
  pointer-events: none;
  text-align: left;
  text-transform: uppercase;
}

body[data-card-skin="red-tithe"] .red-tithe-face::before,
body[data-card-skin="red-tithe"] .red-tithe-face::after {
  content: "";
  position: absolute;
  width: 12%;
  height: 8%;
  pointer-events: none;
}

body[data-card-skin="red-tithe"] .red-tithe-face::before {
  left: 2%;
  top: 2%;
  border-left: 1px solid #ff3568;
  border-top: 1px solid #ff3568;
  border-radius: 35% 0 0;
}

body[data-card-skin="red-tithe"] .red-tithe-face::after {
  right: 2%;
  bottom: 2%;
  border-right: 1px solid #ff3568;
  border-bottom: 1px solid #ff3568;
  border-radius: 0 0 35%;
}

body[data-card-skin="red-tithe"] .rt-top,
body[data-card-skin="red-tithe"] .rt-title,
body[data-card-skin="red-tithe"] .rt-stars,
body[data-card-skin="red-tithe"] .rt-weights,
body[data-card-skin="red-tithe"] .rt-gold,
body[data-card-skin="red-tithe"] .rt-footer {
  min-width: 0;
}

body[data-card-skin="red-tithe"] .rt-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 3%;
  color: #d7a9b3;
  font-size: 0.62em;
  white-space: nowrap;
}

body[data-card-skin="red-tithe"] .rt-top small:last-child {
  color: #ff5f83;
  text-align: right;
}

body[data-card-skin="red-tithe"] .rt-title {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 5%;
  overflow: hidden;
}

body[data-card-skin="red-tithe"] .rt-title strong {
  align-self: center;
  color: #ff6a8d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.65em;
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 0.8;
  text-shadow: 0 0 7px rgba(255, 39, 91, 0.56);
}

body[data-card-skin="red-tithe"] .rt-title em {
  overflow: hidden;
  padding-bottom: 4%;
  color: #ff456f;
  font-size: 0.88em;
  font-style: normal;
  font-weight: 850;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-card-skin="red-tithe"] .rt-rule {
  align-self: center;
  height: 1px;
  background: linear-gradient(90deg, #ff2e61, rgba(255, 46, 97, 0.12));
}

body[data-card-skin="red-tithe"] .rt-stars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 1%;
}

body[data-card-skin="red-tithe"] .rt-channel {
  display: grid;
  grid-template-rows: 1fr auto auto;
  place-items: center;
  min-width: 0;
  color: #e8c8cf;
  font-style: normal;
}

body[data-card-skin="red-tithe"] .rt-channel b {
  color: #2d161d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.2em;
  font-weight: 400;
  line-height: 0.95;
  text-shadow: 0 0 1px #6f263b;
}

body[data-card-skin="red-tithe"] .rt-channel.is-gold b {
  color: #ff426d;
  text-shadow:
    0 0 2px #fff0f4,
    0 0 8px rgba(255, 37, 91, 0.92);
}

body[data-card-skin="red-tithe"] .rt-channel i {
  margin-top: 8%;
  color: #f7dfe4;
  font-size: 0.92em;
  font-style: normal;
  font-weight: 900;
}

body[data-card-skin="red-tithe"] .rt-channel small {
  overflow: hidden;
  width: 100%;
  margin-top: 8%;
  color: #b48d96;
  font-size: 0.48em;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

body[data-card-skin="red-tithe"] .rt-weights {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  color: #e5cdd2;
  font-size: 0.75em;
  font-style: normal;
  text-align: center;
}

body[data-card-skin="red-tithe"] .rt-weights i { font-style: normal; }

body[data-card-skin="red-tithe"] .rt-gold {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  align-items: center;
  padding: 5% 6%;
  border: 1px solid rgba(255, 42, 91, 0.72);
  border-radius: 7%;
  background: rgba(18, 2, 7, 0.72);
  box-shadow: 0 0 7px rgba(255, 37, 91, 0.18) inset;
}

body[data-card-skin="red-tithe"] .rt-gold small {
  color: #ff456f;
  font-size: 0.86em;
  font-weight: 900;
}

body[data-card-skin="red-tithe"] .rt-gold b {
  grid-row: 2;
  color: #ff6a8d;
  font-size: 2.8em;
  font-weight: 800;
  line-height: 0.8;
}

body[data-card-skin="red-tithe"] .rt-gold code {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: #f4d8df;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 1.25em;
  letter-spacing: 0.08em;
}

body[data-card-skin="red-tithe"] .rt-footer {
  align-self: end;
  display: grid;
  gap: 10%;
  color: #ead9dd;
  font-size: 0.72em;
  text-align: center;
}

body[data-card-skin="red-tithe"] .rt-footer b { font-weight: 750; }
body[data-card-skin="red-tithe"] .rt-footer small { color: #c59da7; font-size: 0.8em; }

/* Capture and replay cards retain identity without pretending tiny text is readable. */
body[data-card-skin="red-tithe"] .mini-card,
body[data-card-skin="red-tithe"] .replay-card {
  position: relative;
}

body[data-card-skin="red-tithe"] .mini-card .red-tithe-face,
body[data-card-skin="red-tithe"] .replay-card .red-tithe-face {
  grid-template-rows: 34% 4% 42% 20%;
  padding: 5%;
  font-size: 3px;
}

body[data-card-skin="red-tithe"] .mini-card .rt-top,
body[data-card-skin="red-tithe"] .mini-card .rt-weights,
body[data-card-skin="red-tithe"] .mini-card .rt-gold,
body[data-card-skin="red-tithe"] .mini-card .rt-footer,
body[data-card-skin="red-tithe"] .mini-card .rt-title em,
body[data-card-skin="red-tithe"] .replay-card .rt-top,
body[data-card-skin="red-tithe"] .replay-card .rt-weights,
body[data-card-skin="red-tithe"] .replay-card .rt-footer,
body[data-card-skin="red-tithe"] .replay-card .rt-channel small {
  display: none;
}

body[data-card-skin="red-tithe"] .mini-card .rt-title,
body[data-card-skin="red-tithe"] .replay-card .rt-title {
  display: block;
}

body[data-card-skin="red-tithe"] .mini-card .rt-title strong,
body[data-card-skin="red-tithe"] .replay-card .rt-title strong {
  font-size: 5em;
}

body[data-card-skin="red-tithe"] .mini-card .rt-channel b,
body[data-card-skin="red-tithe"] .replay-card .rt-channel b {
  font-size: 2.5em;
}

body[data-card-skin="red-tithe"] .mini-card .rt-channel i { display: none; }

body[data-card-skin="red-tithe"] .replay-card .rt-gold {
  display: flex;
  justify-content: space-between;
  padding: 3% 6%;
}

body[data-card-skin="red-tithe"] .replay-card .rt-gold b { font-size: 2em; }
body[data-card-skin="red-tithe"] .replay-card .rt-gold code { font-size: 0.9em; }

@media (max-width: 430px) {
  body[data-card-skin="red-tithe"] .card .red-tithe-face {
    font-size: clamp(2.8px, 1vw, 4.8px);
  }

  body[data-card-skin="red-tithe"] .card .rt-channel small,
  body[data-card-skin="red-tithe"] .card .rt-top small:first-child {
    display: none;
  }

  body[data-card-skin="red-tithe"] .card .rt-top { justify-content: flex-end; }
}