:root {
  --sceneMaxHeight: 900px;
  --sceneMaxWidth: 1920px;
  --uiMargin: -15px 0 -15px 0;
  --bounceTransition: 0.5s linear(0, 0.94 17%, 1.15 24% 30%, 0.98 51%, 1);
  --debugBorder: none;
  --zpos_ui_cover: 95;
  --zpos_ui: 100;
  --zpos_ui_top: 110;
  --zpos_viewport: 90;
  --zpos_site: 150;

  --inkling_width: 200px;
  --inkling_height: 200px;
  --inkling_center: 110px 95px;
  --inkling_zpos: 91;
  --inkling_pupil_stress_scale: scale(0.55, 0.9);
  --border_thin: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.7)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.7));
}

@font-face {
  font-family: "distorted";
  src: url("../fonts/A_Font_with_Serifs.ttf");
}

@font-face {
  font-family: "mom";
  src: url("../fonts/mom.ttf");
}

@font-face {
  font-family: "urania";
  src: url("../fonts/urania.ttf");
}

@font-face {
  font-family: "albert";
  src: url("../fonts/albert.ttf");
}

@font-face {
  font-family: "crooked";
  src: url("../fonts/Crooked.ttf");
}

@font-face {
  font-family: "dirty";
  src: url("../fonts/Dirty_Classic_Machine.ttf");
}


@media (max-width: 1920px) {
  :root {
    /* --sceneMaxHeight: 800px;
    --sceneMaxWidth: 1500px; */
  }
}


html,
body {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  user-select: none;
  background: #030303;
  overflow-x: hidden;
}

#scalebox {
  transform-origin: top left;
}

#DRAG_PLANE {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
}

#contents {
  display: flex;
  flex-direction: column;
  width: var(--sceneMaxWidth);
  height: var(--sceneMaxHeight);
  position: relative;
  margin: 0 auto;
}

#site {
  width: 90%;
  background: #8b8b8b;
  color: black;
  margin: 50px auto;
  padding: 45px;
  position: relative;
  transition: 0.3s;
  z-index: var(--zpos_site);
  font-size: 22px;
}

[data-shift=true] {
  transform: translateY(-100px);
}

[data-shift=false] {
  transform: translateY(-800px);
}

/* #bounds {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1600px;
    height: 100%;
    border: 3px solid red;
    pointer-events: none;
    z-index: 9999;
} */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  font-family: Arial, Helvetica, sans-serif;

}

/* @media (max-width: 1920px) {
            body {
                width: var(--sceneMaxWidth);
            }

            #contents {
                width: var(--sceneMaxWidth);
                min-height: 1080px;
            }
        } */

[data-display=false] {
  display: none !important;
}

[data-display=true] {
  display: block;
}

.opacity-in {
  opacity: 1;
  animation: opacity-in 0.1s ease-in;
}

.opacity-out {
  opacity: 0;
  animation: opacity-out 0.1s ease-out;
}

@keyframes opacity-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes opacity-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}


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

#START_SCREEN {
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%), url('../img/pats/pat-eggports.png') top center, black;
}


#UI_PLANE {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#VIEWPORT {
    position: relative;
    width: 100%;                /* ← added */
    /* or width: var(--sceneMaxWidth); or width:1200px, etc */
    min-height: 900px;
    margin: var(--uiMargin);
}

#SCENE_CONTENTS {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    min-height: inherit;
    overflow: scroll;
}

#nursery {
    position: relative;
    top: 0;
    left: 0;
    width: 3000px;
    min-width: 3000px;
    min-height: inherit;
    background: url('../img/bg.png') top left no-repeat, white;
}


.debugbox {
  background: url('../img/bg.png') top left no-repeat, white;
}


#INKLING_DELETE {
  display: none;
  position: absolute;
  background: rgba(255, 0, 0, 0.44);
  border: 2px dashed rgba(255, 255, 255, 0.3);
  bottom: 120px;
  right: 130px;
  width: 100px;
  height: 100px;
  transition: background 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  z-index: 10;
    display: none;
}

#INKLING_INSPECT {
  display: none;
  position: absolute;
  background: rgba(0, 0, 0, 0.44);
  border: 2px dashed rgba(255, 255, 255, 0.3);
  top: 100px;
    right: 270px;
  width: 100px;
  height: 100px;
  transition: background 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  z-index: 10;
}

#INKLING_INSPECT:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.5);
}

#INKLING_INSPECT:has(.INKLING) {
  background:  transparent;
  border-style: none;
  rotate: 3deg;
}

#INKLING_INSPECT.reject {
  animation: inspect-shake 0.3s ease-in-out;
  border-color: rgba(255, 100, 100, 0.8) !important;
}

@keyframes inspect-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

#PEEP_STAT_STRIP_BANNER {
  position: absolute;
  top: 50px;
  right: 0px;
  transition: transform 0.2s ease-out;
  transform: translateX(200px);
  width: 650px;
  height: 200px;
  color: black;
  filter: drop-shadow(15px 15px 0px #00000054);
  position: absolute;
  z-index: 10;
  background: url('../img/peep_stat_strip.png') center right no-repeat;
  animation: strip-slide-in 0.2s ease-out forwards;
}

#PEEP_STAT_STRIP_BANNER.remove {
  animation: strip-slide-out 0.2s ease-out forwards;
}

@keyframes strip-slide-in {
  from {
    opacity: 0;
    transform: translateX(700px);
  }

  to {
    transform: translateX(200px);
    opacity: 1;
  }
}

@keyframes strip-slide-out {
  from {
    opacity: 1;
    transform: translateX(200px);
  }

  to {
    transform: translateX(700px);
    opacity: 0;
  }
}

#PEEP_STAT_STRIP_INFO {
  position: absolute;
  top: 50px;
  left: 220px;
  color: white;
  font-size: 18px;
  width: 400px;
  height: 160px;
}

.inkling-collection-wrapper{
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  border: 2px dashed black;
  margin: 0 0 0 5px;
}

.inkling-collection-wrapper .btn{
  position: absolute;
  bottom: -10px;
  z-index: 100;
}

#PEEP_STATBLOCK {
  cursor: pointer;
  top: 120px;
  left: 200px;
  width: 461px;
  height: 550px;
  color: black;
  filter: drop-shadow(15px 15px 0px #00000054);
  position: absolute;
  z-index: var(--zpos_ui);
  background: url('../img/infocard.png') center center no-repeat;
}

#PEEP_STATBLOCK.slide {
  animation: slide-in 0.2s;
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: rotate(-10deg) translateY(-650px);
  }

  to {
    opacity: 1;
    transform: rotate(0deg) translateY(0px);
  }
}

#PEEP_STATBLOCK.yeet {
  animation: yeetCard 0.2s;
  opacity: 0;
  transform: translateX(-650px);
}

@keyframes yeetCard {
  from {
    opacity: 1;
    transform: rotate(0deg) translateX(0px);
  }

  to {
    opacity: 0;
    transform: translateX(-650px);
  }
}

@keyframes flick-in-left {
  from {
    opacity: 0;
    transform: rotateY(0deg) translateX(1500px);
  }

  to {
    opacity: 1;
    transform: rotate(0deg) translateX(0px);
  }
}

@keyframes flick-out-right {
  from {
    opacity: 1;
    transform: rotateY(0deg) translateX(0);
  }

  to {
    opacity: 0;
    transform: rotate(-12deg) translateX(-1000px);
  }
}

#REWARD_SCREEN .center {
    position: absolute;
    left: 50%;
    top: 140px;
    width: 600px;
    transform: translateX(-50%);
    z-index: 200;
}

#REWARD_SCREEN .info {
    position: relative;
    width: inherit;
    height: 400px;
    margin-bottom: -375px;
    border: 5px dashed white;
    background: rgb(0, 0, 0);
    color: white;
    padding: 50px;
    border-radius: 15px;
    transition: transform 0.2s ease-out;

    &:hover {
        transform: translate(-25px, 0px);
    }
}

#REWARD_SCREEN .info:nth-child(2n) {
rotate: 0.3deg;
}

#REWARD_SCREEN .info:nth-child(3n) {
rotate: -0.3deg;
}


#REWARD_SCREEN .info.add{
    animation: flick-in-left 0.1s ease-out;
}

#REWARD_SCREEN .info.remove{
    animation: flick-out-right 0.5s ease-out;
    pointer-events: none;
}

#REWARD_SCREEN .inkling_box {
    position: absolute;
    width: 100px;
    height: 100px;
    bottom: 30px;
    right: 30px;
    border: 3px dashed gray;
    background: rgba(114, 114, 114, 0.793);
}

#REWARD_SCREEN .info h1 {
    font-size: 40px;
    position: relative;
    margin: -30px auto 5px auto;
    text-align: center;
}

#peepview {
  position: absolute;
  top: 120px;
  left: 130px;
}

#peepstats {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

#player-base {
  position: absolute;
  bottom: 40px;
  left: -15px;
  transform: scale(40%);
  transform-origin: bottom left;

  width: 619px;
  height: 914px;
  z-index: var(--zpos_ui_top);
  filter: drop-shadow(0px 0px 2px #000000) drop-shadow(0px 0px 2px #000000);
  transition: 1s;
  cursor: pointer;
}

.animation-wrapper {
  animation: floatie 12s ease-in-out infinite;
}


@keyframes floatie {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}

#player-base img {
  position: absolute;
  top: 0;
  left: 0;
}

.level-panel {
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 55px;
  color: white;
  z-index: var(--zpos_ui_top);
}

.level-tag {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 215px;
  height: 215px;
  background: url('../img/egg-tag.png') center center no-repeat;
}

.egg-eyes {
  position: absolute;
  top: 0;
  left: 0;
  width: 619px;
  height: 914px;
  background: url('../img/egg-eyes.png') top left no-repeat;
}

.egg-eyes.blink {
  animation: egg-eyes-anim 0.2s steps(3) 1;
}

@keyframes egg-eyes-anim {
  0% {
    background-position-x: 0px;
  }

  100% {
    background-position-x: -1857px;
  }
}

.EGG_KEY_WRAPPER {
  position: absolute;
  bottom: 60px;
  left: 175px;
  width: 323px;
  height: 111px;
  filter: drop-shadow(0px 0px 1px #000000) drop-shadow(0px 0px 1px #000000);
  z-index: var(--zpos_ui);
  transform-origin: bottom left;
  scale: 0.6;
}

.EGG_KEY_MASK {
  position: absolute;
  width: 323px;
  height: 111px;
  mask-image: url('../img/exp-key.png');
}

.EGG_EXP_BAR {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #737373;
}

#EGG_EXP_FILL {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #FFFFFF;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#EGG_KEY_EXP {
  position: absolute;
  top: 15px;
  left: 110px;
  width: 300px;
  height: 50px;
  color: white;
  font-size: 20px;
}

.btn.close {
  position: absolute;
  top: 10px;
  right: 30px;
  font-size: 5rem;
  z-index: var(--zpos_ui);
  pointer-events: auto;
  cursor: pointer;
}

.cover.flex {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: center;
}

.cover.scroll {
  overflow: scroll;
}

.cover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: var(--zpos_ui_cover);
}

.transparent-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: var(--zpos_ui_cover);
}

.transparent-cover:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.cover:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000B3;
  z-index: -1;
  backdrop-filter: blur(5px);
}

.cover .pagecontainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  height: 674px;
  width: 1192px;
  background:
    url('../img/paper-inventory.png') center center no-repeat;
}

.cover .scrollcontainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 97%;
  height: 95%;
}

#playerDoll {
  width: 200px;
  height: auto;
}

.cover h1 {
  padding: 50px 0 0 55px;
}

.cover .title {
  text-align: center;
  flex: 0 0 100%;
  font-size: 55px;
  padding: 0 55px;
}

.col {
  flex: 1 1 0;
  padding: 12px;
  position: relative;
  display: flex;
  align-items: center;
}

.col.left {
  flex-direction: column;
  align-items: flex-end;
}

.col.right {
  align-items: flex-start;
  flex-direction: column;
}

.col.center {
  flex: 0 0 50px;
  text-align: center;
  background: url('../img/line-center.png') center center no-repeat;
}

#ui-top,
#ui-bottom {
  display: flex;
  position: relative;
  gap: 1rem;
  height: 20px;
  padding: 1rem;
  color: white;
  z-index: var(--zpos_ui_top);
  border: var(--debugBorder);
}

#ui-top-center {
  font-size: 3rem;
}


#ui-top {
  background: url('../img/ui-top-trim.png') bottom center repeat-x;
}

#ui-bottom {
  background: url('../img/ui-bottom-trim.png') top center repeat-x;
}

.ui.top {
  color: white;
}

.ui.top,
.ui.bottom {
  flex: 1;
  padding: 1rem;
  text-align: center;
}

.UI_BOTTOM_COUNTERS {
  position: absolute;
  bottom: 65px;
  right: 100px;
  font-size: 18px;
}

.tab.container {
  position: absolute;
}

.ui.tab.top {
  width: 110px;
  display: inline-block;
  margin: -80px 0 0 0;
  transition: 0.3s;
  filter: brightness(100%) drop-shadow(0 5px 0px #00000078);
}

#TAB_EXPEDITION{
    z-index: 91;
}

#MAP_SCROLL_CONTAINER{
    width: 1500px;
    height: 750px;
    border: 3px solid rgba(0, 0, 0, 0.241);
    overflow: scroll;
}

#SPIRE_MAP{
    position: relative;
    padding: 0;
    width: 1500px;
    height: 750px;
}

.MAP{
    background: url('../img/pats/map_grid.png') center center, rgba(255, 255, 255, 0.564);
    cursor: grab;
    position: absolute;
    top: 0;
    left: 0;
}

.island.spire {
    pointer-events: none;
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    animation: floating1 10s ease-in-out infinite;
}

@keyframes floating1 {
0% {
    transform: translateY(0px) translateX(-50%);
}

50% {
    transform: translateY(-10px) translateX(-50%);
}

100% {
    transform: translateY(0px) translateX(-50%);
}

}

.MAP .line{
    background: url('../img/line.png') center center;
    height: 5px;
}

.MAP .timer{
    z-index: 14;
    position: absolute;
}

.MAP .item {
    z-index: 12;
    position: absolute;
    width: 45px;
    height: 45px;
    border-radius: 100px;
    background: black;
    color: white;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, background 0.2s ease-in-out;
    &:hover{
        transform: scale(1.2);
        background:rgb(0, 209, 161);
    }
}

.MAP .found-item {
    z-index: 15;
    position: absolute;
    width: 45px;
    height: 45px;
    border-radius: 100px;
    background: rgb(5, 91, 156);
    color: white;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, background 0.2s ease-in-out;
    &:hover{
        transform: scale(1.2);
        background:rgb(0, 209, 161);
    }
}

.MAP .item, .MAP .found-item {
    animation: float2 15s ease-in-out infinite;
}

@keyframes float2 {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes float3 {
    0% {
        transform: translateY(-5px);
    }
    50% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-5px);
    }
}

@keyframes float4 {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0px);
    }
}


.MAP .item .tag{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 20px;
    font-weight: bold;
    pointer-events: none;
}

.MAP .item.active {
    background: rgb(255, 0, 0);
    cursor: pointer;
}

.MAP .item.selected{
    background:rgb(0, 209, 161);
    border: 3px dashed red;
}

.MAP .item.onhand {
    background: rgb(2, 124, 2);
}


.MAP .item.clear {
    background: rgb(164, 8, 166);
}

.MAP .item.expired {
    background: rgba(0, 0, 0, 0.54);
}


.MAP .item.add {
    animation: map-item-add 0.6s ease-in-out forwards;
}

.MAP .item.remove {
    animation: map-item-remove 0.6s ease-in-out forwards;
}

@keyframes map-item-remove {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translateY(150px);
    }
}

@keyframes map-item-add {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.MAP .info, .MAP .disc-info{
    z-index: 15;
    cursor: pointer;
    position: absolute;
    width: 200px;
    background: rgba(0, 0, 0, 0.782);
    border: 2px dashed white;
    color: white;
    border-radius: 25px;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, background 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.MAP .info.add, .disc-info.add{
    transform: translateY(-20px);
    opacity: 1;
}

.MAP .info.selector, .disc-info.selector{
    background: rgba(50, 150, 50, 0.9);
    border-color: rgb(100, 255, 100);
    transform: translateY(-20px) scale(1.05);
}

.MAP .info.remove, .disc-info.remove{
    animation: info-remove 0.2s ease-in-out forwards;
}

@keyframes info-remove {
    from {
        opacity: 1;
        transform: translateY(-20px);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

#CARD_BLOCK{
    pointer-events: none;
    position: absolute;
    z-index: 92;
    bottom: -120px;
    right: 175px;
    width: 1250px;
    text-align: left;
    filter: var(--border_thin);
}

#CARD_DELETION_BOX{
    display: none;
    position: absolute;
    right: 75px;
    bottom: 100px;
    border: 2px dashed rgba(255, 0, 0, 0.537);
    background: rgba(255, 0, 0, 0.254);
    z-index: 99;
    width: 200px;
    height: 250px;

}

.card{
    pointer-events: auto;
    position: relative;
    background: rgb(204, 204, 204);
    border: 16px solid rgb(83, 83, 83);
    display: inline-block;
    vertical-align: bottom;
    width: 200px;
    height: 250px;
    border-radius: 15px;
    margin: 0 -60px 0 0;
    padding: 15px;
    transition: transform 0.2s ease-in-out, margin 0.2s ease-in-out, background 0.2s ease-in-out, border-color 0.2s ease-in-out;
    cursor: pointer;
    &:hover{
        transform: translateY(-130px) rotate(2deg);
    }
}

.card.dragging{
    cursor: grabbing;
    pointer-events: none;
    z-index: 99;
    transform: scale(0.6) rotate(3deg);
    filter: drop-shadow(15px 15px 5px #00000072);
}

.card:nth-child(2n){
rotate: 1deg;
}


.card.hover{
    background: rgb(230, 230, 180);
    border: 16px solid rgb(180, 160, 40);
    transform: translateY(-170px) rotate(2deg);
}

.card.hover-sm{
    background: rgb(230, 230, 180);
    border: 16px solid rgb(180, 160, 40);
    transform: translateY(-10px) rotate(1deg);
}


.card.active{
    background: rgb(7, 184, 190);
    border: 16px solid rgb(2, 93, 111);
}

.card.expired{
    border: 16px solid red!important;
    background: rgb(180, 106, 106);
        transform: translateY(-60px);
            &:hover{
        transform: translateY(-130px) rotate(-2deg);
    }
}

.card.remove{
    animation: expedition-item-remove 0.3s ease-out forwards;
    transform: translateY(-130px) rotate(-2deg);
}

.card.add{
    animation: expedition-item-add 0.2s ease-out forwards;
    position: relative;
    z-index: 10;
}

.card .card-snap-box{
    position: absolute;
    width: 100px;
    height: 100px;
    bottom: 10px;
    left: 35px;
    transition: border-color 0.2s ease-in-out;
}

.card .expedition-timer {
    display: block;
    contain: layout style;
}

@keyframes expedition-item-remove {
    0%{
        opacity: 1;
    }
    35%{
        opacity: 1;
        transform: translateY(-100px) rotate(-2deg);
    }
    100%{
        opacity: 0;
        transform: translateY(-750px) rotate(-2deg);
    }
}

@keyframes expedition-item-add {
    0%{
        opacity: 0;
        transform: translateX(1750px) rotate(5deg);
    }
    100%{
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
    }
}


.ui.tab.top.inactive {
  transform: translateY(-500px);
}

.ui.tab.top.active {
  transform: translateY(-20px);
}

.ui.tab.top:hover {
  cursor: pointer;
  transform: translateY(20px);
  filter: brightness(125%) drop-shadow(0 5px 0px #00000078);
}

.ui.tab.top .highlighted {
  cursor: auto;
  transform: translateY(20px);
  filter: brightness(125%) drop-shadow(0 5px 0px #00000078);
}

#lower {
  background: #030303;
  color: white;
  width: 100%;
  font-size: 30px;
  flex: 0 0 auto;
  max-height: 160px;
}

#alldata {
  white-space: pre-wrap;
  padding: 20px;
}

.deadcenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}


.centertext {
  text-align: center;
}

#START_BUTTON,
#LOAD_BUTTON {
  border-radius: 20px;
  background: white;
  color: black;
  width: 200px;
  padding: 30px;
  margin: 5px;
  text-align: center;
  font-weight: bold;
  font-size: 25px;
  margin: auto;
  transition: transform 0.2s ease-in-out;

  &:hover {
    transform: scale(1.1);
    cursor: pointer;
    background: #e0e0e0;

  }
}

#DELETE_DATA_BUTTON {
  background: #ff4d4d;
  color: white;
  width: 200px;
  padding: 30px;
  transform: scale(1) translateY(40px);
  margin: 5px;
  text-align: center;
  font-weight: bold;
  font-size: 25px;
  margin: auto;
  border-radius: 20px;
  transition: transform 0.2s ease-in-out;

  &:hover {
    transform: scale(1.1) translateY(40px);
    cursor: pointer;
    background: #000000;
  }
}

/* the great inkling style reset */
.INKLING {
  cursor: pointer;
  z-index: var(--inkling_zpos);
  transform-origin: center center;
  width: var(--inkling_width);
  height: var(--inkling_height);
  transition: rotate 1s;
  filter: var(--border_thin);
  pointer-events: auto !important;
  /*because imgs can't have any but this has to have access*/
}

.INKLING .selection {
  position: absolute;
  z-index: -2;

  width: 200px;
  height: 200px;
  background: url('../img/selection-arrow.png') center center no-repeat;
  opacity: 0;
  animation: rotate 5s linear infinite;
}

.INKLING.highlighted{
  /* filter: var(--border_thin) drop-shadow(0px 0px 15px #ffffff8a)!important; */
  border: 2px solid red;
}

.INKLING.dragging {
  cursor: grabbing !important;
  filter: var(--border_thin) drop-shadow(0px 0px 20px #ffffffcc)!important;
  pointer-events: none;
  z-index: 99;
}

.INKLING.static {
    position: absolute !important;
    top: -50px !important;
    left: -50px !important;
    filter: var(--border_thin)!important;
    z-index: unset;
}

.INKLING {
  cursor: grab;
}

.INKLING .moods {
  position: absolute;
  right: 0;
  top: 0;
  z-index: +1;
  width: 90px;
  height: 60px;
  
}

.INKLING .moods.stress {
  background: url('../img/inklings/mood_stress.png') center center no-repeat;
  animation: 1.2s mood-stress forwards;
}

.INKLING .moods.happy {
  background: url('../img/inklings/mood_happy.png') center center no-repeat;
  animation: 1.2s mood-stress forwards;
}

.INKLING .moods.attention {
  background: url('../img/inklings/mood_attention.png') center center no-repeat;
  animation: 1.2s mood-stress forwards;
}

.INKLING .moods.angry {
  background: url('../img/inklings/mood_angry.png') center center no-repeat;
  animation: 1.2s mood-angry ease-in-out;
}

@keyframes mood-happy {
  0% {
    transform: scale(2);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes mood-angry {
  0% {
    transform: scale(2);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes mood-stress {
  0% {
    transform: translate(-20px, 0);
    opacity: 1;
  }

  100% {
    transform: translate(20px, 0);
    opacity: 0;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(180deg);
  }
}

.INKLING .selection.highlighted {
  opacity: 1;

}

.INKLING,
.INKLING .animation_box img {
  position: absolute;
  pointer-events: none;
}

.INKLING .eye {
  position: absolute;
  width: 123px;
  height: 149px;
  left: 41px;
  top: 34px;
  z-index: 6;
  text-align: left;
  transform-origin: center;
  will-change: transform;
  filter: var(--border_thin);
}

.INKLING .eye.blink {
  animation-duration: 0.6s !important;
  animation: eye-blink forwards;
}

@keyframes eye-blink {
  0% {
    transform: scaleY(100%) rotate(1deg);
  }

  50% {
    transform: scaleY(90%) rotate(0deg);
  }

  70% {
    transform: scaleY(0%) rotate(0deg);
  }

  75% {
    transform: scaleY(2%) rotate(0deg);
  }

  90% {
    transform: scaleY(120%) rotate(1deg);
  }

  100% {
    transform: scaleY(100%) rotate(1deg);
  }
}

.INKLING .eye.animation {
  animation: peep-eye infinite;
}

.INKLING .eyelash {
  position: absolute;
  left: 0px;
  top: 0px;
}

.INKLING .eye_art {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 7;
}

.INKLING .pupil {
  position: absolute;
  z-index: 8;
  transform-origin: 46px 65px;
  will-change: transform;
}

.INKLING .pupil.animation {
  animation: pupil-flit2 0.5s steps(1) 1;
}

.INKLING.dragging .pupil.animation {
  animation: pupil-stress 8s steps(1) infinite!important;
}

@keyframes pupil-stress {
  0% {
    transform: translate(3px, -3px) var(--inkling_pupil_stress_scale);
  }
  5% {
    transform: translate(5px, 5px) var(--inkling_pupil_stress_scale);
  }
  15% {
    transform: translate(2px, 1px) var(--inkling_pupil_stress_scale);
  }
  20% {
    transform: translate(-4px, -2px) var(--inkling_pupil_stress_scale);
  }
  25% {
    transform: translate(5px, 0px) var(--inkling_pupil_stress_scale);
  }
    25% {
    transform: translate(2px, 1px) var(--inkling_pupil_stress_scale);
  }
  35% {
    transform: translate(0px, 3px) var(--inkling_pupil_stress_scale);
  }
  40% {
    transform: translate(5px, -1px) var(--inkling_pupil_stress_scale);
  }
    45% {
    transform: translate(0px, 8px) var(--inkling_pupil_stress_scale);
  }
     50% {
    transform: translate(-4px, -1px) var(--inkling_pupil_stress_scale);
  }
       55% {
    transform: translate(9px, -2px) var(--inkling_pupil_stress_scale);
  }
   75% {
    transform: translate(12px, 7px) var(--inkling_pupil_stress_scale);
  }
     65% {
    transform: translate(0px, 0px) var(--inkling_pupil_stress_scale);
  }
}

@keyframes pupil-flit2 {
  0% {
    transform: translate(0px, 0px);
  }

  25% {
    transform: translate(-10px, 5px);
  }
  30% {
    transform: translate(12px, 6px);
  }
}

.INKLING .pupil.flit {
  animation-duration: 0.6s !important;
  animation: pupil-flit forwards;
}


@keyframes pupil-animation {
  0% {
    transform: translate(0px, 0px);
  }

  25% {
    transform: translate(-4px, 5px) rotate(-5deg);
  }
}

@keyframes pupil-flit {
  0% {
    transform: translate(0px, 0px);
  }

  25% {
    transform: translate(-10px, 5px);
  }
}

.pupil-focus {
  animation-duration: 0.4s !important;
  animation: pupil-focus forwards;
}

@keyframes pupil-focus {
  from {
    transform: scale(0.6, 0.7) translate(0px, 0px);
  }

  to {
    transform: scale(1) translate(0px, 0px);
  }
}

.INKLING .beak_top {
  top: 83px;
  left: 0px;
  z-index: 5;
  transform-origin: bottom right;
}

.INKLING .beak_top.animation {
  animation: beak-top infinite;
}

.INKLING.dragging .beak_top.animation {
  animation: beak-top-drag 0.3s infinite!important;
}

.INKLING.dragging .beak_bottom.animation {
  animation: beak-bottom-drag 0.3s infinite!important;
}

.INKLING .beak_bottom {
  left: 0px;
  top: 106px;
  z-index: 5;
  transform-origin: top right;

}

.INKLING .body {
  left: 21px;
  top: 21px;
  z-index: 4;
}

.INKLING.dragging .fullbody.animation {
  animation: inkling-move-drag 0.4s infinite!important;
}

.INKLING .beak_bottom.animation {
  animation: beak-bottom infinite;
}

.INKLING .wing {
  left: 99px;
  top: 142px;
  z-index: 10;
  transform-origin: top left;
}

.INKLING .wing.animation {
  animation: peep-wing-happy infinite;
}

.INKLING.dragging .wing.animation {
  animation: peep-wing-happy 0.15s infinite!important;
}

.INKLING .fin {
  left: 57px;
  top: 0px;
  z-index: 5;
  transform-origin: bottom center;
}

.INKLING .fin.pop {
  animation: finpop 0.2s forwards;
}

@keyframes finpop {
  from {
    transform: scaleY(0%);
  }

  to {
    transform: scaleY(100%);
  }
}

.INKLING .fin.animation {
  animation: peep-fin infinite;
}

.INKLING.dragging .fin.animation {
  animation: peep-fin-drag 0.3s infinite!important;
}


.INKLING .tail {
  left: 150px;
  top: 34px;
  z-index: 4;
  transform-origin: center left;
}

.INKLING .tail.animation {
  animation: peep-tail infinite;
}

.INKLING.dragging .tail.animation {
  animation: peep-tail-drag 0.3s infinite ease-out!important;
}




.INKLING .fullbody.animation {
  /* default anim*/
  transform-origin: center;
}

.INKLING .fullbody.animation.idle {
  animation: inkling-move-idle infinite ease-in-out;
}

.INKLING .fullbody.animation.fast {
  animation: inkling-move-fast infinite ease-in-out;
}

.INKLING .fin.snap {
  animation-duration: 0.5s !important;
  animation: fin-snap forwards;
}

@keyframes fin-snap {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(25deg);
  }

  25% {
    transform: rotate(30deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes inkling-move-fast {
  0% {
    transform: rotate(0deg) translate(-20px, -5px) scale(98%, 100%);
  }

  30% {
    transform: rotate(3deg) translate(5px, 7px) scale(100%, 100%);
  }

  60% {
    transform: rotate(5deg) translate(-10px, -9px) scale(95%, 100%);
  }

  100% {
    transform: rotate(0deg) translate(-20px, -5px) scale(98%, 100%);
  }
}

@keyframes inkling-move-drag {
  0% {
    transform: rotate(0deg) translate(-20px, -5px) scale(98%, 100%);
  }

  30% {
    transform: rotate(8deg) translate(5px, 7px) scale(100%, 100%);
  }

  60% {
    transform: rotate(10deg) translate(-10px, -9px) scale(95%, 100%);
  }

  100% {
    transform: rotate(0deg) translate(-20px, -5px) scale(98%, 100%);
  }
}

@keyframes inkling-move-idle {
  0% {
    transform: translateY(-5px) translateX(-15px) rotate(-5deg) scaleX(97%);
  }

  50% {
    transform: translateY(0px) translateX(15px) rotate(5deg) scaleX(100%);
  }

  100% {
    transform: translateY(-5px) translateX(-15px) rotate(-5deg) scaleX(97%);
  }
}


@keyframes peep-fin {
  0% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(6deg);
  }

  100% {
    transform: rotate(-5deg);
  }
}

@keyframes peep-fin-drag {
  0% {
    transform: rotate(20deg);
  }

  50% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(20deg);
  }
}

@keyframes peep-tail {
  0% {
    transform: scaleX(100%) rotate(3deg);
  }

  50% {
    transform: scaleX(90%) rotate(0deg);
  }

  100% {
    transform: scaleX(100%) rotate(3deg);
  }
}

@keyframes peep-tail-drag {
  0%   { transform: rotate(-15deg); }
  50%  { transform: rotate(15deg); }
  100% { transform: rotate(-15deg); }
}

@keyframes peep-wing-happy {
  0% {
    transform: scaleY(-45%) rotate(10deg);
  }

  50% {
    transform: scaleY(90%) rotate(0deg);
  }

  55% {
    transform: scaleY(100%) rotate(0deg);
  }

  100% {
    transform: scaleY(-45%) rotate(10deg);
  }
}

@keyframes peep-eye {
  0% {
    transform: scaleY(100%);
  }

  50% {
    transform: scaleY(104%);
  }

  100% {
    transform: scaleY(100%);
  }
}

@keyframes peep-eye-blink {
  0% {
    transform: scaleY(100%) rotate(1deg);
  }

  50% {
    transform: scaleY(90%) rotate(0deg);
  }

  70% {
    transform: scaleY(0%) rotate(0deg);
  }

  75% {
    transform: scaleY(2%) rotate(0deg);
  }

  100% {
    transform: scaleY(100%) rotate(1deg);
  }
}

@keyframes peep-pupil {
  0% {
    transform: translate(0px, 0px);
  }

  50% {
    transform: translate(-5px, 5px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

/* @keyframes peep-pupil {
    0% {
        transform: translate(0px, 0px);
    }
    10% {
        transform: translate(20px, 5px);
    }
    15% {
        transform: translate(-5px, 10px);
    }

    45% {
        transform: translate(5px, -15px);
    }

    100% {
        transform: translate(0px, 0px);
    }
} */

.top-snap {
  animation-duration: 0.4s !important;
  animation: beak-top-snap forwards;
}

.bottom-snap {
  animation-duration: 0.4s !important;
  animation: beak-bottom-snap forwards;
}

@keyframes beak-top-snap {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(25deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes beak-bottom-snap {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(-22deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes beak-top {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes beak-bottom {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}


@keyframes beak-top-drag {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(12deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes beak-bottom-drag {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-12deg);
  }

  100% {
    transform: rotate(0deg);
  }
}


@keyframes animate-bg {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: 400px 400px;
  }
}

.branches {
  pointer-events: none;
  position: absolute;
  bottom: -180px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 91;
  filter: blur(7px);
}

.branches.left {
  background: url('../img/branches-bottom-left.png') bottom left no-repeat;
  /* animation: branches-sway-left 15s infinite; */
}

.branches.right {
  background: url('../img/branches-bottom-right.png') bottom right no-repeat;
  /* animation: branches-sway-right 7s infinite; */
}

@keyframes branches-sway-left {
  0% {
    transform: translateX(-10px);
  }

  50% {
    transform: translateX(-0px);
  }

  100% {
    transform: translateX(-10px);
  }
}


.INKLING .animation_box {
  transform-origin: var(--inkling_center);
}

.boing {
  animation: boing 0.4s;
}

.boing2 {
  animation: boing2 0.4s;
}

.bite {
  animation: bite 0.4s;
}

.boing_turn {
  animation: boing_turn 0.5s ease-in-out;
}

@keyframes bite {
  0% {
    transform: scale(1, 1);
  }

  25% {
    transform: scale(0.8, 1.1) rotate(4deg);
  }

  50% {
    transform: scale(1.1, 0.8) rotate(0deg) translateX(-30px);
  }

  75% {
    transform: scale(0.95, 1.05);
  }
}

@keyframes boing {

  from,
  to {
    transform: scale(1, 1);
  }

  25% {
    transform: scale(0.9, 1.1);
  }

  50% {
    transform: scale(1.1, 0.9);
  }

  75% {
    transform: scale(0.95, 1.05);
  }
}

@keyframes boing2 {
  0% {
    transform: scale(1, 1);
  }

  25% {
    transform: scale(0.8, 1.1) rotate(4deg);
  }

  50% {
    transform: scale(1.1, 0.8) rotate(0deg);
  }

  75% {
    transform: scale(0.95, 1.05);
  }
}

@keyframes boing_turn {
  0% {
    transform: scale(1, 1) translate(0px, 0px);
  }

  25% {
    transform: scale(0.8, 1.1) rotate(3deg) translate(40px, 15px);
  }

  50% {
    transform: scale(1, 0.8) rotate(0deg) translate(-20px, 15px);
  }

  75% {
    transform: scale(0.95, 1.05);
  }
}


.peeper img {
  pointer-events: none;
}

.peep.scale {
  transform-origin: center center;
}

.fish-right {
  transform: scaleX(1);
  /* animation: boing-right 0.4s 1; */
}

.fish-left {
  transform: scaleX(-1);
  /* animation: boing-left 0.4s 1; */
}

/* Dragging state animations */
.INKLING.dragging.fish-right {
  animation: drag-dangle-right 0.2s ease-in-out infinite!important;
}

.INKLING.dragging.fish-left {
  animation: drag-dangle-left 0.2s ease-in-out infinite!important;
}

@keyframes drag-dangle-right {
  0% {
    transform: scaleX(1) rotate(28deg) scaleY(1.02);
  }
  50% {
    transform: scaleX(1) rotate(45deg) scaleY(0.98);
  }
  100% {
    transform: scaleX(1) rotate(28deg) scaleY(1.02);
  }
}

@keyframes drag-dangle-left {
  0% {
    transform: scaleX(-1) rotate(28deg) scaleY(1.02);
  }
  50% {
    transform: scaleX(-1) rotate(45deg) scaleY(0.98);
  }
  100% {
    transform: scaleX(-1) rotate(28deg) scaleY(1.02);
  }
  }

@keyframes boing-right {

  from,
  to {
    transform: scale(1, 1) scaleX(1);
  }

  25% {
    transform: scale(0.9, 1.1) scaleX(1);
  }

  50% {
    transform: scale(1.1, 0.9) scaleX(1);
  }

  75% {
    transform: scale(0.95, 1.15) scaleX(1);
  }
}

@keyframes boing-left {

  from,
  to {
    transform: scale(1, 1) scaleX(-1);
  }

  25% {
    transform: scale(0.9, 1.1) scaleX(-1);
  }

  50% {
    transform: scale(1.1, 0.9) scaleX(-1);
  }

  75% {
    transform: scale(0.95, 1.15) scaleX(-1);
  }
}

@keyframes idle-pet {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}


.DEBUG .array {
  position: relative;
  font-size: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 5px;
  padding: 8px;
  border-radius: 15px;
  color: rgb(144, 144, 144);
  border: 3px dashed #00000025;
}

.DEBUG strong {
  color: black;
  font-weight: bold;
}

.DEBUG .object:not(:first-child) {
  border: 3px solid #00000025;
  cursor: pointer;
  transition: 0.3s;

  &:hover {
    transform: scale(1.03);
  }
}

.DEBUG .object {
  border: 12px solid #3a3a3a;
  backdrop-filter: blur(5px);
  border: 1px solid #cccccc28;
  display: inline-block;
  position: relative;
  font-size: 15px;
  display: block;
  margin: 10px;
  padding: 10px;
  border-radius: 15px;
  flex: 0 0 calc(25% - 20px);
}

.DEBUG .null {}

#TAB_INVENTORY .item {
  width: 167px;
  height: 167px;
  background: url('../img/item-backdrop.png') center center no-repeat;
  color: black;
  font-weight: bold;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

#TAB_INVENTORY .item .sum {
  position: absolute;
  bottom: 3px;
  right: 3px;
  font-size: 18px;
}

.debug-boundaries {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(0, 0, 0, 0.308);
  pointer-events: none;
  z-index: 51;
}

.debug-target-scaled {
  border: 5px dotted rgba(0, 255, 81, 0.486);
  background: radial-gradient(circle, rgba(0, 255, 81, 0.101) 0%, rgba(0, 0, 0, 0) 100%);
  border-radius: 666px;
  padding: 5px;
  position: absolute;
  pointer-events: none;
  z-index: 50;
  transform-origin: center center;
  animation: debug-target-fadein 1s forwards;
  text-shadow: 0.05em 0 black, 0 0.05em black, -0.05em 0 black, 0 -0.05em black, -0.05em -0.05em black, -0.05em 0.05em black, 0.05em -0.05em black, 0.05em 0.05em black;
  color: white;
  font-weight: bold;
}

.debug-target-scaled-last {
  border: 5px dotted rgba(255, 0, 0, 0.315);
  background: radial-gradient(circle, rgba(0, 255, 81, 0.101) 0%, rgba(0, 0, 0, 0) 100%);
  border-radius: 666px;
  padding: 5px;
  position: absolute;
  pointer-events: none;
  z-index: 50;
  transform-origin: center center;
  animation: debug-target-fadein 1s forwards;
  text-shadow: 0.05em 0 black, 0 0.05em black, -0.05em 0 black, 0 -0.05em black, -0.05em -0.05em black, -0.05em 0.05em black, 0.05em -0.05em black, 0.05em 0.05em black;
  color: white;
  font-weight: bold;
}

.debug-target-unscaled {
  position: absolute;
  border-radius: 2px;
  padding: 5px;
  border-radius: 666px;

  background: radial-gradient(circle, rgba(94, 255, 0, 0.13) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 90;
  transform-origin: center center;
  animation: debug-target-fadein 1s forwards;
}


.debug-target-scaled.remove,
.debug-target-unscaled.remove,
.debug-target-marker.remove,
.debug-target-scaled-last.remove {
  animation: debug-target-fadeout 1s forwards;
}

@keyframes debug-target-fadeout {
  from {
    opacity: 1;
    transform: scale(100%);
  }

  to {
    opacity: 0;
    transform: scale(120%);
  }
}

@keyframes debug-target-fadein {
  from {
    opacity: 0;
    transform: scale(120%);
  }

  to {
    opacity: 1;
    transform: scale(100%);
  }
}

/* Debug line styles */
.debug-line {
  position: absolute;
  height: 8px;
  border-radius: 6px;
  background: linear-gradient(-90deg, #ff000092 0%, rgba(0, 0, 0, 0) 80%);
  z-index: 1000;
  pointer-events: none;
  z-index: 80;
}

.debug-line.animate {
  width: 0;
  animation: line-grow 1s ease-in-out forwards;
}

@keyframes line-grow {
  from {
    width: 0;
  }

  to {
    width: var(--target-width);
  }
}

.debug-line:hover {
  opacity: 1;
}

/* Optional: Add a subtle animation to make it more visible */
.debug-line.remove {
  animation: debug-line-pulse 0.5s forwards;
}

@keyframes debug-line-pulse {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.debug-line[data-trait="thief"] {
  background: linear-gradient(-90deg, #00ff2f92 0%, rgba(0, 0, 0, 0) 80%);
}

.debug-line[data-trait="gatherer"] {
  background: linear-gradient(-90deg, #0800ff92 0%, rgba(0, 0, 0, 0) 80%);
}

.dust {
  cursor: pointer;
  position: absolute;
  width: 65px;
  height: 65px;
  background: url('../img/dust.png') center center no-repeat;
  filter: drop-shadow(0px 0px 12px rgba(255, 255, 255, 0.5));
  z-index: 90;
}

.dust.add {
  animation: dust_add 0.2s ease-in;
  transform-origin: center center;
}

@keyframes dust_add {
  0% {
    transform: scale(50%);
    opacity: 0;
  }

  100% {
    transform: scale(100%);
    opacity: 1;
  }
}

.dust.float {
  animation: dust_float infinite ease-in-out 3s;
}

@keyframes dust_float {
  0% {
    transform: translateY(0px) scale(90%);
  }

  50% {
    transform: translateY(-10px) scale(100%);
  }

  100% {
    transform: translateY(0px) scale(90%);
  }
}

.dust.yeet {
  animation: dust_yeet 0.5s forwards;
}

@keyframes dust_yeet {
  0% {
    transform: translateY(0px) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateY(-270px);
    opacity: 0;
    rotate: 360deg;
  }
}

.EXP-floats {
  position: absolute;
  font-size: 30px;
  color: white;
  font-weight: bold;
  animation: EXP-float 2s forwards;
}

@keyframes EXP-float {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }

  100% {
    transform: translateY(-90px);
    opacity: 0;
  }
}

.exp-notification {
  transform: translate(90px, 25px);
  position: absolute;
  border-radius: 6px;
  padding: 6px 10px;
  font-family: sans-serif;
  z-index: 92;
  pointer-events: none;
  transition: opacity 0.3s ease;
  min-width: 70px;
}

.exp-notif-level {
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 4px;
  text-align: center;
}

.exp-notif-bar {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.46);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 3px;
}

.exp-notif-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
  border-radius: 4px;
  transition: width 3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

.exp-notif-text {
  font-size: 10px;
  color: #ffffff;
  text-align: center;
  opacity: 0.85;
}

#updateCards {
  position: absolute;
  z-index: calc(var(--zpos_ui) + 1);
  top: 80px;
  right: 45px;
  rotate: 1deg;
  font-size: 18px;
}

#updateCards h2 {
  font-size: 28px;
  margin: -7px auto;
}

.updateCard {
  user-select: none;
  cursor: pointer;
  transition: var(--bounceTransition);
  position: relative;
  margin: 0 0 -330px 0;

  width: 250px;
  height: 341px;
  filter: drop-shadow(0px 0px 2px #00000090) drop-shadow(3px 3px 1px #000000B3);
  animation: cardShuffle 0.2s 1;

  &:hover {
    transform: translateY(12px) !important;
  }
}

@keyframes cardShuffle {
  0% {
    transform: translateY(-330px);
  }

  50% {
    transform: translateY(25px);
  }

  100% {
    transform: translateY(0px);
  }
}


.updateCard .center-el {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  padding: 0 30px;
}

.tilt {
  cursor: pointer;
  transition: 0.5s;
  user-select: none;
  filter: saturate(100%) brightness(1.2) drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.6)) !important;

  &:hover {
    transition: 0.5s;
    transform: translateX(-3px) translateY(-15px) rotateX(12deg) rotateY(5deg) rotateZ(-2deg) !important;
    filter: saturate(100%) brightness(1.2) drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.6)) !important;
  }
}

[data-card="error"] {
  background: url("../img/upd_card.png") no-repeat center center;
  color: #4b4d3c;
}

[data-card="update"] {
  background: url("../img/upd_card_dark.png") no-repeat center center;
  color: #3d6c46;
}

[data-card="update"] h2 {
  color: #3d6c46;
}

[data-card="error"] h2 {
  color: #4b4d3c;
}

.byebye {
  animation: byeCard 0.5s forwards;
  transition: var(--bounceTransition);

  pointer-events: none !important;
  translate: 350px;
}

@keyframes byeCard {
  0% {
    opacity: 1;
    rotate: 3deg;
    translate: 0px;
  }

  100% {
    opacity: 0;
    rotate: 3deg;
    translate: 350px;
  }
}

/* 
@keyframes inkling-move-fast {
    0% {
        transform: translateY(-5px) translateX(-20px) rotate(0deg) scaleX(98%);
    }

    30% {
        transform: translateY(7px) translateX(5px) rotate(3deg) scaleX(100%);
    }

    60% {
        transform: translateY(-9px) translateX(-10px) rotate(5deg) scaleX(95%);
    }
    
    100% {
        transform: translateY(-5px) translateX(-20px) rotate(0deg) scaleX(98%);
    }
} */