/* Public character panels and the standalone WhatsApp icon. */
.character-panels,
.character-panels * {
  box-sizing: border-box;
}

.character-panels {
  display: grid;
  grid-template-columns: minmax(142px, .85fr) minmax(170px, 1fr) minmax(210px, 1.2fr);
  gap: 8px;
  width: 100%;
}

.character-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #8b6948;
  background: #d9c29c;
  box-shadow: inset 0 0 0 1px rgba(255, 246, 218, .7), 0 2px 5px rgba(50, 29, 14, .2);
}

.character-panel h3 {
  min-height: 29px;
  margin: 0;
  padding: 7px 8px 6px;
  border-bottom: 1px solid #2d1a10;
  color: #fff4d6;
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  text-shadow: 1px 1px 0 #120905;
  background: linear-gradient(#73421f, #462512);
}

.character-panel-body {
  height: 230px;
  background: linear-gradient(#3b3028, #201a16);
}

.character-scroll-panel {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #a9783e #201812;
  scrollbar-width: thin;
}

.character-scroll-panel:focus {
  outline: 2px solid #d6a95d;
  outline-offset: -2px;
}

.character-scroll-panel::-webkit-scrollbar {
  width: 9px;
}

.character-scroll-panel::-webkit-scrollbar-track {
  background: #201812;
}

.character-scroll-panel::-webkit-scrollbar-thumb {
  border: 2px solid #201812;
  border-radius: 6px;
  background: #a9783e;
}

.character-stat-row,
.character-gem-row {
  display: flex;
  align-items: center;
  min-height: 39px;
  border-bottom: 1px solid rgba(217, 194, 156, .17);
  color: #ead9bc;
  background: rgba(255, 255, 255, .025);
}

.character-stat-row:nth-child(even),
.character-gem-row:nth-child(even) {
  background: rgba(195, 149, 86, .08);
}

.character-stat-row {
  justify-content: space-between;
  gap: 7px;
  padding: 0 10px;
}

.character-stat-row span,
.character-gem-row span {
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-stat-row strong,
.character-gem-row strong {
  flex: 0 0 auto;
  color: #ffcc68;
  font-size: 12px;
}

.character-gem-row {
  gap: 6px;
  padding: 3px 8px 3px 5px;
}

.character-gem-row img,
.character-gem-fallback {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
}

.character-gem-row img {
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.character-gem-fallback {
  display: grid;
  place-items: center;
  border: 1px solid #766047;
  color: #b894d9;
  font-size: 17px;
  line-height: 30px;
  text-align: center;
  text-shadow: 0 0 5px rgba(184, 148, 217, .65);
  background: radial-gradient(circle, #493457, #211927);
}

.character-gem-row span {
  flex: 1 1 auto;
}

.character-equipment-body {
  display: grid;
  place-items: center;
  padding: 14px 6px;
}

.character-equipment-grid {
  border: 1px solid #8b795e;
  background: #171412;
  box-shadow: 0 0 10px rgba(0, 0, 0, .45);
}

.character-equipment-grid table {
  background: #29231f;
}

.character-equipment-grid td td {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #695d50;
  text-align: center;
  vertical-align: middle;
  background: #292929;
}

.character-equipment-grid td td img {
  display: block;
  margin: auto;
}

#TheOnlyOneWhatsApp {
  box-sizing: border-box;
  display: block;
  width: 170px;
  min-height: 154px;
  margin: 10px 0 0 5px;
  border: 2px solid #4d341c;
  border-radius: 2px;
  overflow: hidden;
  color: #25170c;
  background: #d3ba8e;
  box-shadow: inset 0 0 0 1px #ecd9ad, 0 2px 4px rgba(0, 0, 0, .72);
  text-align: center;
  text-decoration: none;
  transition: filter 140ms ease, transform 140ms ease;
  -webkit-tap-highlight-color: transparent;
}

#TheOnlyOneWhatsApp .TheOnlyOneWhatsAppHeader {
  box-sizing: border-box;
  display: block;
  height: 25px;
  padding: 4px 5px 0;
  border-bottom: 2px solid #4d341c;
  color: #f7e8bd;
  background: linear-gradient(to bottom, #80633d 0%, #5d452b 100%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1.4px;
  line-height: 17px;
  text-shadow: 1px 1px 1px #211407;
}

#TheOnlyOneWhatsApp .TheOnlyOneWhatsAppBody {
  box-sizing: border-box;
  display: block;
  min-height: 125px;
  padding: 9px 8px 8px;
  background: linear-gradient(to bottom, #dcc69e 0%, #c9ad7d 100%);
}

#TheOnlyOneWhatsApp .TheOnlyOneWhatsAppIcon {
  box-sizing: border-box;
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 auto 5px;
  padding: 6px;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: #22c86b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

#TheOnlyOneWhatsApp img {
  display: block;
  width: 36px;
  height: 36px;
  border: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#TheOnlyOneWhatsApp .TheOnlyOneWhatsAppCopy {
  display: block;
  min-height: 25px;
  margin: 0 0 6px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 9px;
  font-weight: bold;
  line-height: 12px;
}

#TheOnlyOneWhatsApp .TheOnlyOneWhatsAppButton {
  box-sizing: border-box;
  display: block;
  width: 146px;
  height: 21px;
  margin: 0 auto;
  padding: 4px 3px 0;
  border: 1px solid #08772f;
  border-radius: 3px;
  color: #fff;
  background: linear-gradient(to bottom, #2ee57c 0%, #10aa50 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(0, 0, 0, .4);
  font-family: Arial, sans-serif;
  font-size: 8px;
  font-weight: bold;
  line-height: 11px;
  text-shadow: 1px 1px 1px #07672c;
  white-space: nowrap;
}

#TheOnlyOneWhatsApp:hover,
#TheOnlyOneWhatsApp:focus {
  outline: none;
  filter: brightness(1.08);
  transform: translateY(-1px);
}

#TheOnlyOneWhatsApp:hover .TheOnlyOneWhatsAppButton,
#TheOnlyOneWhatsApp:focus .TheOnlyOneWhatsAppButton {
  background: linear-gradient(to bottom, #48ef91 0%, #16ba5c 100%);
}

#TheOnlyOneWhatsApp:focus-visible {
  outline: 2px solid #79dd8d;
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .character-panels {
    grid-template-columns: 1fr;
  }

  .character-panel-body {
    height: 215px;
  }
}