Game-Boy Bot Cards- Coir

<style>
/* IMPORTANT INSTRUCTIONS!! Delete any code you may have connected to your bot card. Open your settings and paste this code into the "about me" section as is. Click save. You can tweak it however you'd like. */

/* Trash */
.pp-cc-wrapper, .pp-cc-wrapper > *:not(.profile-character-card-stack) {
background: transparent !important;
}
.pp-cc-wrapper:hover {
  box-shadow: none;
}
.pp-cc-star-line, .pp-cc-tokens-count, .pp-cc-chats svg, .css-5v5qgx, .css-nip9dx, .css-xrg4vd, .css-1awld45, .css-1utqofo, .css-w89cv5, .css-8828od, .css-1henxb, .css-effh3d, .css-1wqmh16 {
    display: none;
}

/* layout */
.pp-cc-list-container {
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 2rem;
}

/* bot card */
.profile-character-card-stack {
  padding: 6px;
  width: 250px;
  background: #fff;
  border: 3px solid #8e530b;
  border-radius: 50px;
  box-shadow: 15px 15px 0px orange;
  transform: rotateX(10deg) rotateY(-10deg);
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}
.profile-character-card-stack:hover {
  transform: rotateX(0deg) rotateY(0deg);
   box-shadow: 15px 15px 0px orange;
}
/* Hover to View sticker */
.profile-character-card-stack::after {
  content: "hover to View";
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  background-color: #ffffff;
  color: #a86b00;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 1rem;
  padding: 2px 10px;
  border-radius: 8px;
  border: 2px solid #c07821;
  box-shadow: 2px 2px 0 #ff9200;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: bold;
  white-space: nowrap;
}


/* bot card name */
.pp-cc-name {
  background-color: #ff9200;
  max-width: 160px;
  color: white;
  border: 2px solid #ffffff;
  border-radius: 99px;
  text-shadow: none;
  box-shadow:
    inset 0 0 0 1px #ffad1f,
    2px 2px 0 #db8b00,
    0 0 4px 1px rgba(179, 113, 0, 0.7);
  font-family: 'Pixelify Sans';
  padding: 4px 10px;
  margin: auto;
  font-size: .9rem;
  transition: all 0.2s ease-in-out;
}
.pp-cc-name:hover {
  box-shadow: 4px 4px 0 #ffb24d;
  transform: translateY(-4px);
}

/* Using bot card user for button space */
.pp-cc-creator-name {
  font-size: 0;
  background-color: #ffad1f;
  height: 154px;
  width: 100%;
  border: 3px solid #ffe7bd;
  border-radius: 30px;
  position: relative;
}
/* Game-boy cross button */
.pp-cc-creator-name::before {
  content: "";
  position: absolute;
  bottom: 95px;
  left: 30px;
  width: 30px;
  height: 30px;
  background-color: #ffe7bd;
  border-radius: 12px;
  box-shadow:
    -19px -0.1px 0 #ffe7bd,
    -22px -2px 0 #dd8f08,
    19px -0.1px 0 #ffe7bd,
    1px -15px 0 #ffe7bd,
    -2px -18px 0 #dd8f08,
 -1px 15px 0 #ffe7bd,
    -3.8px 18px 0 #db8b00,
inset 0 3px 6px rgba(255 255 255 / 0.6),
  0 3px 6px rgba(0 0 0 / 0.3);
}
/* All other game-boy buttons */
.pp-cc-creator-name::after {
  content: "";
  position: absolute;
  bottom: 105px;
  left: 145px;
  width: 20px;
  height: 20px;
  background-color: #ffe7bd;
  border-radius: 50%;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.5),
    0 3px 4px rgba(0, 0, 0, 0.3),
    35px 5px 0 #ffe7bd,
    35px 5px 4px rgba(0, 0, 0, 0.3),
    35px 5px 0 inset rgba(255, 255, 255, 0.5),
    -100px 80px 0 0 #ffe7bd,
    -95px 80px 0 0 #ffe7bd,
    -90px 80px 0 0 #ffe7bd,
    -87px 80px 0 0 #ffe7bd,
    -98px 83px 0 0 #db8b00,
    -95px 83px 0 0 #db8b00,
    -90px 83px 0 0 #db8b00,
    -103px 83px 0 0 #db8b00,
    7px 80px 0 0 #ffe7bd,
    10px 80px 0 0 #ffe7bd,
    15px 80px 0 0 #ffe7bd,
    1px 80px 0 0 #ffe7bd,
    -1px 83px 0 0 #db8b00,
    5px 83px 0 0 #db8b00,
    9px 83px 0 0 #db8b00,
    14px 83px 0 0 #db8b00;
}

/* desc container */
.profile-character-card-description-box {
  position: absolute;
  border-radius: 20px;
  min-height: 140px;
  left: 22px;
  top: 299px;
  min-width: 200px;
  max-width: 200px;
  background: #8e530b;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
/* desc text/scroll/hover */
.pp-cc-description {
  color: #fff !important;
  font-size: 1rem;
  max-height: 145px;
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  overflow-y: auto;
  padding: 1rem;
}
.pp-cc-description::-webkit-scrollbar-thumb {
  background-color: #ffffff;
}
.profile-character-card-stack:hover .profile-character-card-description-box {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
/* tags container */
.pp-cc-tags {
  position: absolute;
  top: 200px;
  left: 13px;
  width: 215px;
  height: 80px;
  background-color: #fff;
  border-radius: 20px;
  border: 3px solid #ffad1f;
  overflow: hidden;
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.8s ease;
}
.profile-character-card-stack:hover .pp-cc-tags {
  opacity: 1;
  transform: translateY(-8px);
}
.profile-character-card-stack:hover .pp-cc-tags > * {
  animation: slot-machine-scroll 6s steps(10) infinite;
}
.css-k1urot {
  padding-right: 10px;
}
/* individual tags */
.pp-cc-tags span {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: .8rem;
  font-weight: 500;
  padding: 2px 5px;
  background: #fff;
  border: 2px solid #db8b00;
  border-radius: 999px;
  color: #db8b00;
  box-shadow: 0 2px 0 #b57300;
  transition: border-color 0.3s ease;
}
.pp-cc-tags span:hover {
  border-color: #ffad1f;
}
@keyframes slot-machine-scroll {
  0% {
    transform: translateY(50px) translateX(15px);
  }
  100% {
    transform: translateY(-100%) translateX(15px);
  }
}
/* Bot card ribbon/ rocket ship */
.pp-cc-ribbon {
  position: relative;
  opacity: 0;
  top: 20px;
  right: -90px;
  width: 90px;
  height: 40px;
  clip-path: polygon(
    0% 50%, 25% 30%, 55% 30%, 70% 15%, 85% 40%,
    85% 60%, 70% 85%, 55% 70%, 25% 70%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  animation: floatBounce 4s ease-in-out infinite;
  transition: right 0.4s ease, opacity 0.4s ease;
}
.profile-character-card-stack:hover .pp-cc-ribbon {
  right: -45px;
  opacity: 1;
}
.pp-cc-ribbon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 140%;
  background: #ffffff;
  font-family: 'Press Start 2P', monospace;
}
.pp-cc-chats {
  color: #8e530b;
}
@keyframes floatBounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(5deg);
  }
  75% {
    transform: translateY(-3px) rotate(-3deg);
  }
}

/* for mobile */
@media (max-width: 600px) {
/* Tap instead of Hover for mobile sticker */
  .profile-character-card-stack::after {
    content: "tap to View";
  }
}
</style>

<style>
/*Credit: You can delete this only if you put the credit somewhere else */
.coir-credit {
  font-size: 12px;
  font-family: 'Pixelify Sans', sans-serif;
  color: #ffffff;
}
.coir-credit a {
  color: #ff9200;
  font-weight: bold;
  transition: color 0.2s ease;
}
</style>
<p class="coir-credit">
  Bot cards by
  <a href="https://janitorai.com/profiles/f8f5d030-87df-470b-af99-c8f6cee6180d_profile-of-coir" target="_blank">
    coir
  </a>
</p>