@font-face {
  font-family: 'm6x11medium';
  src: url('https://lilithdev.neocities.org/fonts/m6x11.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

:root {
  --small-pixel-clip: polygon(
    0px calc(100% - 3px),
    1px calc(100% - 3px),
    1px calc(100% - 2px),
    2px calc(100% - 1px),
    3px calc(100% - 1px),
    3px 100%,
    calc(100% - 3px) 100%,
    calc(100% - 3px) calc(100% - 1px),
    calc(100% - 2px) calc(100% - 1px),
    calc(100% - 1px) calc(100% - 2px),
    calc(100% - 1px) calc(100% - 3px),
    100% calc(100% - 3px),
    100% 3px,
    calc(100% - 1px) 3px,
    calc(100% - 1px) 2px,
    calc(100% - 2px) 1px,
    calc(100% - 3px) 1px,
    calc(100% - 3px) 0px,
    3px 0px,
    3px 1px,
    2px 1px,
    1px 2px,
    1px 3px,
    0px 3px
  );
}

#ogl-canvas {
  border: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -30;
}

#music {
  max-width: 100%;
}

#trans-in {
  border: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -20;
  background: white;
  opacity: 1;
  transition: opacity 2s;
}

#hide-load {
  border: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background: white;
  opacity: 1;
  transition: opacity 0.8s ease-in;
  pointer-events: none;
  user-select: none;
}

#example {
  top: -4px;
  left: -2px;
  position: absolute;
  opacity: 0.8;
  /*display: none;*/
}

#example.right {
  top: -4px;
  left: 300px;
  position: absolute;
  opacity: 1;
  /*display: none;*/
}

.pixel-corners {
  clip-path: polygon(0 calc(100% - 12px), 3px calc(100% - 12px), 3px calc(100% - 6px), 6px calc(100% - 6px), 6px calc(100% - 3px), 12px calc(100% - 3px), 12px 100%, calc(100% - 12px) 100%, calc(100% - 12px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 12px), 100% calc(100% - 12px), 100% 12px, calc(100% - 3px) 12px, calc(100% - 3px) 6px, calc(100% - 6px) 6px, calc(100% - 6px) 3px, calc(100% - 12px) 3px, calc(100% - 12px) 0, 12px 0, 12px 3px, 6px 3px, 6px 6px, 3px 6px, 3px 12px, 0 12px);
}

/* Thank you! https://pixelcorners.lukeb.co.uk/?radius=5&multiplier=1 */
.small-pixel-corners {
  clip-path: polygon( 0px calc(100% - 3px), 1px calc(100% - 3px), 1px calc(100% - 2px), 2px calc(100% - 1px), 3px calc(100% - 1px), 3px 100%, calc(100% - 3px) 100%, calc(100% - 3px) calc(100% - 1px), calc(100% - 2px) calc(100% - 1px), calc(100% - 1px) calc(100% - 2px), calc(100% - 1px) calc(100% - 3px), 100% calc(100% - 3px), 100% 3px, calc(100% - 1px) 3px, calc(100% - 1px) 2px, calc(100% - 2px) 1px, calc(100% - 3px) 1px, calc(100% - 3px) 0px, 3px 0px, 3px 1px, 2px 1px, 1px 2px, 1px 3px, );
}

body {
  font-family: 'm6x11medium';
  overflow-x: hidden;
}

.normal-text {
  font-size: 26px;
}

.funny-header {
  font-size: 33px;
  background: white;
  border-radius: 8px;
  color: #3a5055;
  padding: 0px 6px;
  text-align: center;
  padding-top: 6px;
}

@keyframes local-sin-anim {
  0% { --local-sin: 0deg; }
  100% { --local-sin: 360deg; }
}
@property --local-sin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.dark-edition {
  /*--local-r: 0.5;
  --local-g: 1;
  --local-b: 0.5;*/
  /* This is straight from the game, who knew you could do this with css????*/
  animation: local-sin-anim 6s linear infinite;
  --local-r: calc(0.6 + 0.2 * sin(var(--local-sin)));
  --local-b: calc(0.6 + 0.2 * (1 - sin(var(--local-sin))));
  --local-g: min(var(--local-r), var(--local-b));
  --dark-color: rgba(calc(255 * var(--local-r)), calc(255 * var(--local-g)), calc(255 * var(--local-b)), 1);
}

.scanlines {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 2147483648;
  background: linear-gradient(to bottom, transparent 50%, rgba(100, 100, 100, 0.1) 51%);
  background-size: 100% 4px;
  pointer-events: none;
  user-select: none;
  opacity: 0.69;
}

.tooltip-object {
  /*position: absolute;*/
  position: relative;
  width: fit-content;
}

.tooltip-description-object,
.tooltip-badge-object,
.tooltip-name-object {
  position: relative;
}

.tooltip-container-outer {
  background: #dee2ea;
  padding: 4px;
  width: fit-content;
  /*display: flex;*/
}

.tooltip-container {
  background: #394346;
  /*width: 64px;
  height: 64px;*/
  /*padding: 12px 4px;*/
  /*padding: 9px 6px;*/
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*gap: 10px;*/
  gap: 12px;
}

.tooltip-shadow {
  background: #919499;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 6px;
}

.tooltip-description-shadow {
  background: #aaaaaa;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 4px;
}

.tooltip-name-object {
  color: white;
  /*font-weight: bold;*/
  /*font-size: 48px;
  letter-spacing: 3px;
  line-height: 1em;*/
  font-size: 45px;
  letter-spacing: 3px;
  line-height: 1em;
  /*text-shadow: 0px 5px rgba(0, 0, 0, 0.3);*/
  /*margin-bottom: -6px;*/
  margin-bottom: -8px;
  position: relative;
  margin-left: 8px;
  margin-right: 8px;
}

.tooltip-name {
  position: relative;
}

.tooltip-name-shadow {
  color: rgba(0, 0, 0, 0.3);
  /*width: 100%;
  height: 100%;*/
  position: absolute;
  top: 3.5px;
  line-break: anywhere;

  /* Slight shadow offset */
  transform-origin: bottom center;
  transform: scaleY(0.94) translateY(-3%);
}

.tooltip-description-object {
  min-width: 100%;
}

.tooltip-description {
  background: white;
  /*padding: 6px 18px;*/
  /*padding: 6px 12px;
  word-spacing: 5px;*/
  padding: 7px 6px;
  padding-bottom: 3px;
  word-spacing: 4px;
  font-size: 26px;
  line-height: 27px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #3a5055;

  min-height: 60px;

  line-height: 27.3px;
  /*word-spacing: 5px;*/
}

.tooltip-badge {
  /*background: #ab5bb5;*/
  background: var(--badge-primary-color);
  padding: 6px 16px;
  padding: 7px 16px;
  padding-top: 5px;
  padding-bottom: 8px;
  /*padding-left: 14px;
  padding-right: 12px;*/
  padding-left: 17px;
  padding-right: 14px;
  min-width: 140px;
  /*padding: 4px 16px;
  font-weight: bold;
  font-size: 1.2em;
  color: white;*/
  /*text-shadow: 0px 3px rgba(0, 0, 0, 0.3);*/

  /* center rarity text in badge */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tooltip-badge-shadow {
  /*background: #6d3574;*/
  background: var(--badge-shadow-color);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 4px;
}

.tooltip-badge-name-object {
  color: white;
  /*font-weight: bold;*/
  /*font-size: 48px;
  letter-spacing: 3px;
  line-height: 1em;*/
  /*font-size: 32px;*/
  font-size: 33px;
  letter-spacing: 1.2px;
  /*letter-spacing: 2px;*/
  line-height: 1em;
  /*text-shadow: 0px 5px rgba(0, 0, 0, 0.3);*/
  margin-bottom: -6px;
  position: relative;
}

.tooltip-badge-name {
  position: relative;
}

.tooltip-badge-name-shadow {
  color: var(--badge-shadow-color);
  /*width: 100%;
  height: 100%;*/
  position: absolute;
  top: 3px;
}

.button-stack {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 16px;
}

.legendary {
  --badge-primary-color: #ab5bb5;
  --badge-shadow-color: #6d3574;
}

.rare {
  --badge-primary-color: #ff4c40;
  --badge-shadow-color: #aa2b23;
}

.uncommon {
  --badge-primary-color: #35bd86;
  --badge-shadow-color: #1b7954;
}

.common {
  --badge-primary-color: #0093ff;
  --badge-shadow-color: #005caa;
}

.deco-chips {
  color: #0093ff;
}

.deco-mult {
  color: #ff4c40;
}

.deco-text-outline {
  --outline-color: white;
  text-shadow: 0px 0.06em var(--outline-color), 0px -0.06em var(--outline-color), 0px 0.06em var(--outline-color), 0.06em 0 var(--outline-color), -0.06em 0 var(--outline-color);
}

.deco-spades {
  color: #292189;
}

.deco-hearts {
  color: #f11b52;
}

.deco-money {
  color: #f5b244;
}

.deco-green {
  color: #35bd86;
}

.deco-planet {
  color: #00aacc;
}

.deco-xmult {
  color: white;
  background: #ff4c40;
  /*border-radius: 2px;*/
  /*border-radius: 5px;*/
  margin-left: -2px;
  padding: 5px 2px 0px 5px;
  clip-path: var(--small-pixel-clip);
}

.deco-pmult {
  color: white;
  /*background: #ff4c40;*/
  background: var(--dark-color);
  /*border-radius: 2px;*/
  /*border-radius: 5px;*/
  margin-left: -2px;
  padding: 5px 2px 0px 5px;
  clip-path: var(--small-pixel-clip);
}

.deco-negative {
  color: var(--dark-color);
}

.deco-img {
  vertical-align: middle;
  display: inline-block;
}

.deco-inactive {
  color: #b1b1b1;
}

.deco-highlight {
  color: #ff8f00;
}

#test-card-screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: end;
}

.append-bottom-tooltip {
  bottom: -16px;
  left: 50%;
  --offset-x: 0px;
  --offset-y: 0px;
  transform: translate(-50%, 100%) translate(var(--offset-x), var(--offset-y));
  position: absolute;
  width: max-content;
  z-index: 5;
  pointer-events: none;
}

.append-top-alt {
  bottom: unset;
  transform: translate(-50%, -100%) translate(var(--offset-x), var(--offset-y));
  top: -16px;
}

.card-area {
  background: rgba(0, 0, 0, 0.3);
  /*width: 32px;
  height: 32px;*/
  border-radius: 8px;
  padding: 8px;
  display: flex;
  gap: 8px;
  justify-content: space-evenly;
  align-items: center;
  max-width: 95%;
  /*width: 50vw;*/
}

/* For card area layout purpose without affecting the hitbox */
.card-wrapper {
  flex: 0 1 auto;
  min-width: 0;
}

.card-wrapper:last-child {
  width: fit-content;
  flex-shrink: 0;
}

.card-object {
  width: fit-content;
  position: relative;
  /*--card-side-tilt: calc(-1 * var(--card-area-tilt) + (var(--card-area-index) / (var(--card-area-count)-1)) * var(--card-area-tilt) * 2);*/
  --card-hover-strength: 0.3;
}

.card-main {
  width: fit-content;
  transform-style: preserve-3d;
  pointer-events: none;
}

.card-front {
  /*width: fit-content;*/
  width: calc(71px * 2);
  image-rendering: pixelated;
  /* Avoid weird image bottom gap */
  display: block;
  /* Missing the game's post processing so I'm doing this */
  filter: contrast(1.1) saturate(1.2);
}

/*.card-soul {
  width: calc(71px * 2);
  image-rendering: pixelated;
  display: block;
  position: absolute;
  top: 0;
  animation: ambient-animation 4s linear infinite;
  transform-style:preserve-3d;
  transform: perspective(1000px) translateZ(8px) scale(calc(1 + 2 * 0.02 * sin(var(--ambient-angle)))) rotate(calc(-50deg * 0.05 * sin(var(--ambient-angle))));
}*/

.card-soul {
  width: calc(71px * 2);
  image-rendering: pixelated;
  display: block;
  position: absolute;
  top: 0;
  --soul-sca: 0deg;
  --soul-rot: 0deg;
  transform-style:preserve-3d;
  animation: soul-sca-animation 4s linear infinite, soul-rot-animation 6s linear infinite;
  /*--ambient-angle: 180deg;*/
  transform: perspective(1000px) translateZ(8px) scaleX(calc(1 + 2 * 0.02 * sin(var(--soul-sca)))) scaleY(calc(1 + 0.9 * 2 * 0.02 * sin(var(--soul-sca)))) rotate(calc(-50deg * 0.05 * sin(var(--soul-rot))));
}
@keyframes soul-sca-animation {
  0% { --soul-sca: 0deg; }
  50% { --soul-sca: 180deg; }
  100% { --soul-sca: 360deg; }
}
@keyframes soul-rot-animation {
  0% { --soul-rot: 0deg; }
  50% { --soul-rot: 180deg; }
  100% { --soul-rot: 360deg; }
}
@property --soul-sca {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --soul-rot {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.card-soul-shadow {
  width: calc(71px * 2);
  image-rendering: pixelated;
  display: block;
  position: absolute;
  top: 0;
  --soul-sca: 0deg;
  --soul-rot: 0deg;
  filter: brightness(0) opacity(0.5);
  transform-style:preserve-3d;
  animation: soul-sca-animation 4s linear infinite, soul-rot-animation 6s linear infinite;
  /*--ambient-angle: 180deg;*/
  transform: perspective(1000px) translateY(calc(8px + 1px * sin(var(--soul-sca)))) translateZ(0px) scaleX(calc(1 + 2 * 2 * 0.02 * sin(var(--soul-sca)))) scaleY(calc(1 + 0.9 * 2 * 0.02 * sin(var(--soul-sca)))) rotate(calc(-50deg * 0.05 * sin(var(--soul-rot))));
}

.card-ambient {
  --ambient-angle: 120;
  /*--ambient-amount: 0.2;*/
  --ambient-amount: 0.06;/*0.05;*/
  transform-style: preserve-3d;
  /*transform: perspective(500px) rotateX(20deg) rotateY(20deg);*/
  /*transform: perspective(500px)
    rotateX(calc((0.5 + 0.5 * var(--ambient-amount) * cos(var(--ambient-angle)) * 120deg)))
    rotateY(calc((0.5 + 0.5 * var(--ambient-amount) * sin(var(--ambient-angle)) * 120deg)));*/
  animation: ambient-animation 3s linear;
  /*animation-delay: calc(-200ms * var(--card-area-index));*/
  animation-delay: calc(-1200ms * var(--card-area-index));
  animation-iteration-count: infinite;
  /*transform: rotateX(var(--ambient-angle));*/
  /*transform: perspective(500px)
    rotateX(calc(0.5 + 0.5 * var(--ambient-amount) * cos(var(--ambient-angle)) * 120deg))
    rotateY(calc(0.5 + 0.5 * var(--ambient-amount) * sin(var(--ambient-angle)) * 120deg));*/
  transform: perspective(1000px)
    rotateX(calc((0.5 + 0.5 * var(--ambient-amount) * cos(var(--ambient-angle)) * 120) * 1deg))
    rotateY(calc((0.5 + 0.5 * var(--ambient-amount) * sin(var(--ambient-angle)) * 120) * 1deg))
    rotateZ(calc(cos(var(--ambient-angle)) * -1deg));
  position: relative;
  transform-style:preserve-3d;
}

.card-shadow {
  position: absolute;
  top: 0;
  filter: brightness(0) opacity(0.5);
  transform: translateY(8%) scale(0.95) rotate(var(--card-side-tilt));
}

.card-hover {
  position: relative;
  pointer-events: all;
  /*transform: rotate(calc(var(--card-side-tilt))) translateY(calc(pow(abs(var(--card-side-tilt) / 1deg), 2) * 1px));*/
  transform: rotate(var(--card-side-tilt));
  transform-style:preserve-3d;
}

.card-hover:hover {
  /*animation: wiggle 1.2s linear;*/
  animation: wiggle 0.8s linear 1;
}

.force-wiggle {
  animation: wiggle 1.2s linear 1;
}

.card-ambient:has(.card-hover:hover) {
  --ambient-amount: 0.02;
}

@keyframes ambient-animation {
  0% { --ambient-angle: 0deg; }
  50% { --ambient-angle: 180deg; }
  100% { --ambient-angle: 360deg; }
}

@property --ambient-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
/* https://codepen.io/arepi/pen/PwYvGjE */
@keyframes wiggle {
    0% {
        transform:
            perspective(5000px)
            rotate(var(--card-side-tilt))
            scale(calc(1));

    }
    4% {
        transform:
            perspective(5000px)
            rotateZ(calc(var(--card-side-tilt) - 6deg * var(--card-hover-strength)))
            scale(calc(1 + .37 * var(--card-hover-strength)));
    }
    8% {
        transform:
            perspective(5000px)
            rotateZ(calc(var(--card-side-tilt) + 4deg * var(--card-hover-strength)))
            scale(calc(1 + (1 - 0.87) * var(--card-hover-strength)));
    }
    14% {
        transform:
            perspective(5000px)
            rotateZ(calc(var(--card-side-tilt) - 3deg * var(--card-hover-strength)))
            scale(calc(1 + .04 * var(--card-hover-strength)));
    }
    18% {
        transform:
            perspective(5000px)
            rotateZ(calc(var(--card-side-tilt) + 2deg * var(--card-hover-strength)))
            scale(calc(1 + .05 * var(--card-hover-strength)));
    }
    26%, 28% {
        transform:
            perspective(5000px)
            rotateZ(calc(var(--card-side-tilt) - 1deg * var(--card-hover-strength)))
            scale(calc(1 + (1 - 0.98) * var(--card-hover-strength)));
    }
    40%, 42% {
        transform:
            perspective(5000px)
            rotateZ(calc(var(--card-side-tilt) - 1deg * var(--card-hover-strength)))
            scale(calc(1 + .01 * var(--card-hover-strength)));
    }
    56%, 58%, 72%, 86%, 100% {
        transform:
            perspective(5000px)
            rotateZ(var(--card-side-tilt))
            scale(var(1));
    }
}

html, body {
  margin: 0;
}

.title-area {
  position: relative;
  max-width: 95%;
}

.version-number {
  position: absolute;
  top: 50px;
  right: 90px;
  color: white;
  font-size: 23px;
}

#title-screen {
  width: 100vw;
  /*height: 100vh;*/
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

#title-menu {
  position: relative;
  top: 100%;
  transition: top 0.2s cubic-bezier(0,1.3,.5,1);
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.dark-bg-object {
  position: relative;
}

.dark-bg-container {
  background: #1e2b2d;
  /*width: 64px;
  height: 64px;*/
  /*padding: 12px 4px;*/
  /*padding: 9px 6px;*/
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*gap: 10px;*/
  gap: 12px;
  color: white;
  position: relative;
}

.dark-bg-container > * {
  margin: 0;
}

.dark-bg-shadow {
  background: #0b1415;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 3px;
}

.skip-tag-object {
  vertical-align: text-top;
  position: relative;
  height: fit-content;
  display: inline-block;
  image-rendering: pixelated;
  --card-hover-strength: 0.2;
  --card-side-tilt: 0deg;
  height: 34px;
}

.skip-tag-shadow {
  position: absolute;
  left: 0;
  top: 0;
  filter: brightness(0) opacity(0.2);
  transform: translate(4px, 6px);
}

.skip-tag-hover {
  display: inline-block;
  position: relative;
}

.skip-tag-object:hover {
  animation: wiggle 0.8s linear 1;
}

.magic-padding {
  visibility: hidden;
  user-select: none;
  pointer-events: none;
  margin-bottom: 24px;
}

#game-logo {
  width: calc(666px*1.5);
  image-rendering: pixelated;
  max-width: 100%;
  display: block;
  position: relative;
}

#game-logo-trans {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  filter:brightness(0) invert();
  transition: opacity 4s;
}

.absolute {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.joker-name-wave {
  white-space: break-spaces;
}

.joker-letter {
  /*animation: joker-text-bounce 2.5s linear 0s infinite;*/
  animation: joker-text-bounce 2s ease-in 0s infinite;
  display: inline-block;
}
/*animation-delay: -400ms * index;*/

@keyframes joker-text-bounce {
  /*0% { transform: translateY(0); animation-timing-function: ease-in; }
  8% { transform: translateY(-0.06em); }
  16% { transform: translateY(-0.06em); animation-timing-function: ease-out; }
  24% { transform: translateY(0);  }*/
  /*0% { transform: translateY(0); }
  8% { transform: translateY(-0.06em); animation-timing-function: ease-in; }
  16% { transform: translateY(-0.06em);  }
  24% { transform: translateY(0); animation-timing-function: ease-out;  }*/

  /*0% { transform: translateY(0); }
  10% { transform: translateY(-0.065em); animation-timing-function: ease-in; }
  20% { transform: translateY(-0.065em);  }
  30% { transform: translateY(0); animation-timing-function: ease-out;  }*/

  /*0% { transform: translateY(0); }
  10% { transform: translateY(-0.065em); animation-timing-function: ease-in; }
  20% { transform: translateY(-0.065em);  }
  30% { transform: translateY(0); animation-timing-function: ease-out;  }*/
  0% { transform: translateY(0); /*animation-timing-function: cubic-bezier(0,0,1,0);*/ }
  12% { transform: translateY(-0.065em); }
  18% { transform: translateY(-0.065em); /*animation-timing-function: cubic-bezier(0,0,0,1);*/ }
  30% { transform: translateY(0); }

  /*0% { transform: translateY(0); animation-timing-function: ease-in; }
  8% { transform: translateY(-0.06em); }
  16% { transform: translateY(-0.06em); animation-timing-function: ease-out; }
  24% { transform: translateY(0);  }*/
}

.text-smooth-wave {
  white-space: break-spaces;
}

.smooth-wave-letter {
  /*animation: smooth-wave-bounce 2.5s ease-in-out 0s infinite;*/
  /*animation: smooth-wave-bounce 2s ease-in-out 0s infinite;*/
  animation: smooth-wave-bounce 3s ease-in-out 0s infinite;
  display: inline-block;
  position: relative;
}

.collection {
  max-width: 100%;
}

/*.collection .card-wrapper {
  min-width: 100px;
}*/

.collection-bg {
  /* .tooltip-container-outer padding is 4 */ 
  width: calc(100% - 4px * 2);
  height: calc(100% - 4px * 2);
  position: absolute;
}

.collection-container {
  --my-padding: 20px;
  /*position: absolute;
  top: 0;
  width: calc(100% - var(--my-padding)*2);
  height: calc(100% - var(--my-padding)*2);*/
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding:var(--my-padding);
}

.collection-inner-bg {
  padding: var(--my-padding);
  --my-padding: 20px;
  width: calc(100% - var(--my-padding)*2);
  height: calc(100% - var(--my-padding)*2);
}

.progress-container {
  display: flex;
  gap: 8px;
  flex-direction: row;
  font-size: 33px;
  width: min(500px,100vw);
  justify-content: space-around;
  /*padding-bottom: 4px;*/
  text-align: center;
}

.progress-container > * {
  width: 50%;
}

@keyframes smooth-wave-bounce {
  /*0% { transform: translateY(0.06em); }
  50% { transform: translateY(-0.06em);  }
  100% { transform: translateY(0.06em); }*/
  0% { transform: translateY(0.06em); }
  50% { transform: translateY(-0.04em);  }
  100% { transform: translateY(0.06em); }
  /*0% { top: 0; }
  50% { top: -0.065em;  }
  100% { top: 0; }*/
}

.mask-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.bala-button {
  --button-bg: #0093ff;
  background: var(--button-bg) 63%;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.bala-button:hover {
  background: color-mix(in srgb, var(--button-bg) 63%, black 37%);
}

.bala-button:hover:active {
  transform: translateY(5px);
}

.tinytip-object {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(calc(100% + 4px), -50%);
}

.tinytip-object.left {
  right: unset;
  left: 0;
  top: 50%;
  transform: translate(calc(-100% - 4px), -50%);
}

.tinytip-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  background-color: #677b7e;
  color: white;
  font-size: 16px;
  /*letter-spacing: 1.2px;*/
  line-height: 1em;
  position: relative;

  /*padding: 7px 6px;
  padding-bottom: 3px;
  word-spacing: 4px;*/
  font-size: 26px;
  line-height: 27px;
}

.tinytip-name {
  margin-top: 4px;
  margin-bottom: -1px;
}

.tinytip-description {
  color: #3a5055;
  background: white;
  padding: 7px 8px;
  padding-bottom: 4px;
  line-height: 24px;
  text-align: center;
}

@media (max-width: 800px) {
  #title-screen {
    height: fit-content;
    margin-top: 24px;
  }

  #title-menu {
    display:none;
  }

  .version-number {
    top: 16px;
    right: 20px;
    color: white;
  }

  .card-area > .card-wrapper > .card-object {
    --card-side-tilt: 0deg !important;
  }
  
  .card-wrapper {
    /* doesn't do anything but if i do basis everything explodes */
    min-width: 70px;
  }

  .card-area {
    flex-wrap: wrap;
  }
}


@media (max-width: 600px) {
  .button-stack {
    flex-direction: column;
    gap: 8px;
  }
}