@charset "UTF-8";
: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_center: 110px 95px;
  --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");
}
html,
body {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: #030303;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

#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);
  position: relative;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
}

#SITE_MAIN {
  position: relative;
  z-index: 200;
  width: 90%;
  background: #8b8b8b;
  color: black;
  margin: 50px auto;
  padding: 45px;
  transition: 0.3s;
  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%, rgb(0, 0, 0) 100%), url("../img/pats/pat-eggports.png") top center, black;
}

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

#DUST_QUEUE {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 9999;
}

#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: 0px;
  left: 0px;
  margin: 0px;
  width: 101%;
  min-height: inherit;
  overflow: scroll;
}

#nursery {
  position: relative;
  top: 0px;
  left: 0px;
  margin: 0px;
  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-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;
}

@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);
  }
}
#TALK_SCREEN {
  position: absolute;
  opacity: 1;
  transition: opacity 0.2s ease-out;
  top: 0;
  left: 0;
  z-index: 91;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
}
#TALK_SCREEN.fade-out {
  animation: fade-out 0.5s ease-out forwards;
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
#TALK_SCREEN.fade-in {
  animation: fade-in 0.5s ease-out forwards;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#TALK_SCREEN .name {
  position: absolute;
  font-size: 25px;
  top: -34px;
  border-radius: 25px;
  text-transform: uppercase;
  background: rgb(72, 72, 72);
  border: 3px dashed rgba(255, 255, 255, 0.554);
  padding: 15px;
}
#TALK_SCREEN .arrow {
  background: white;
}
#TALK_SCREEN .DIALOGUE_PORT_CONTAINER {
  position: absolute;
  bottom: 330px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
}
#TALK_SCREEN .DIALOGUE_PORT_ART {
  pointer-events: none;
  animation-fill-mode: forwards;
}
#TALK_SCREEN .dialogue-bounce {
  animation: portrait-bounce 0.2s ease-in;
  transform-origin: bottom center;
}
@keyframes portrait-bounce {
  0% {
    transform: scale(1) translateY(0);
  }
  40% {
    transform: scale(1.01) translateY(5px) rotate(-0.3deg);
  }
  70% {
    transform: scale(1) translateY(-5px) rotate(0deg);
  }
  100% {
    transform: scale(1) translateY(0) rotate(0deg);
  }
}
#TALK_SCREEN .dialogue {
  z-index: 89;
  left: 50%;
  bottom: 150px;
  border: 3px dashed rgba(255, 255, 255, 0.512);
  width: 1000px;
  height: 200px;
  transform: translateX(-50%);
  padding: 40px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 25px;
  border-radius: 55px;
  background: rgb(0, 0, 0);
  color: white;
  animation: dialogue-entrance 0.5s ease-out;
}
@keyframes dialogue-entrance {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0px);
  }
}
#TALK_SCREEN .dialogue .text {
  max-width: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.letter.animate {
  display: inline-block;
  animation: pop-in 0.1s ease-in;
}
@keyframes pop-in {
  0% {
    opacity: 1;
    transform: scale(1) translate(20px, -5px) rotate(5deg);
  }
  80% {
    opacity: 1;
    transform: scale(1) translate(-6px, 2px) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate(0, 0px) rotate(0deg);
  }
}
.letter.highlight-anim {
  display: inline-block;
  animation: highlight-pop-in 0.3s ease-in;
  color: #ffffff;
  font-weight: bold;
}
@keyframes highlight-pop-in {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-10deg);
  }
  80% {
    opacity: 1;
    transform: scale(1.3) rotate(10deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

#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;
}
#REWARD_SCREEN .info: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 {
  rotate: -90deg;
  position: absolute;
  bottom: 65px;
  left: 235px;
  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;
  -webkit-mask-image: url("../img/exp-key.png");
          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: rgba(0, 0, 0, 0.7019607843);
  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-bottom {
  bottom: 15px;
}

#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 rgba(0, 0, 0, 0.4705882353));
}

#TAB_EXPEDITION {
  z-index: 91;
}

#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;
}
.MAP .item: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;
}
.MAP .found-item: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);
  }
}
.SIDE_UI {
  position: absolute;
  bottom: 75px;
  left: 50%;
  width: 1500px;
  height: 800px;
  font-size: 20px;
  z-index: 100;
  transition: transform 0.3s ease-out;
  transform: translateX(-50%) translateX(1700px);
}
.SIDE_UI .INTERIOR {
  position: relative;
  width: inherit;
  height: inherit;
  padding: 30px;
  text-align: center;
  border: 2px solid rgba(0, 0, 0, 0.539);
  background: #cccccc;
  display: flex;
  flex-direction: row;
  gap: 20px;
}
.SIDE_UI .snap_contents {
  position: relative;
  flex: 1;
  background: #f0f0f0;
  padding: 10px;
}
.SIDE_UI .snap_contents .CARD_USE_BUTTON, .SIDE_UI .snap_contents .CARD_RECORD_BUTTON {
  position: relative;
  border: 2px dashed red;
  padding: 25px;
  z-index: 120;
  border-radius: 25px;
  margin: 10px;
  top: -75px;
}
.SIDE_UI .main_contents {
  text-align: left;
  position: relative;
  flex: 2;
  background: #e0e0e0;
  padding: 10px;
}
.SIDE_UI .scroll {
  text-align: left;
  width: calc(100% - 55px);
  height: calc(100% - 55px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.SIDE_UI.slide-in {
  z-index: 110 !important;
  animation: slide-in-inkling-binder 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}
@keyframes slide-in-inkling-binder {
  0% {
    transform: translateX(-50%) translateX(1700px);
  }
  100% {
    transform: translateX(-50%) translateX(1200px);
  }
}
.SIDE_UI.slide-out {
  z-index: 110;
  pointer-events: none;
  animation: slide-out-inkling-binder 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}
@keyframes slide-out-inkling-binder {
  0% {
    transform: translateX(-50%) translateX(1200px);
  }
  100% {
    transform: translateX(-50%) translateX(1700px);
  }
}
.SIDE_UI.active {
  rotate: 0deg !important;
}
.SIDE_UI.slide-in-full {
  z-index: 120;
  animation: slide-in-full-binder 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
  transform: translateX(-50%) translateX(60px);
}
@keyframes slide-in-full-binder {
  0% {
    transform: translateX(-50%) translateX(1700px);
  }
  100% {
    transform: translateX(-50%) translateX(60px);
  }
}
.SIDE_UI.slide-out-full {
  pointer-events: none;
  animation: slide-out-full-binder 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}
@keyframes slide-out-full-binder {
  0% {
    transform: translateX(-50%) translateX(60px);
  }
  100% {
    transform: translateX(-50%) translateX(1700px);
  }
}
.SIDE_UI:hover {
  transform: translateX(-50%) translateX(1690px);
}
.SIDE_UI:hover label {
  transform: translateX(0px);
  cursor: pointer;
}
.SIDE_UI.slide-in, .SIDE_UI.slide-in-full {
  z-index: 199;
}
.SIDE_UI.slide-in label, .SIDE_UI.slide-in-full label {
  transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  transform: translateX(140px);
}
.SIDE_UI.slide-in.slide-out, .SIDE_UI.slide-in.slide-out-full, .SIDE_UI.slide-in-full.slide-out, .SIDE_UI.slide-in-full.slide-out-full {
  z-index: 199;
}
.SIDE_UI.slide-in.slide-out label, .SIDE_UI.slide-in.slide-out-full label, .SIDE_UI.slide-in-full.slide-out label, .SIDE_UI.slide-in-full.slide-out-full label {
  transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  transform: translateX(100px);
}
.SIDE_UI label {
  z-index: -1;
  position: absolute;
  left: -200px;
  width: 300px;
  height: 75px;
  transform: translateX(100px);
  transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  top: 20px;
}
.SIDE_UI.active label {
  filter: brightness(1.35);
  transform: translateX(60px);
}
.SIDE_UI .UPDATE_COUNT {
  position: absolute;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  text-align: center;
  top: -15px;
  left: -15px;
  font-size: 25px;
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: black;
}

.SIDE_UI:nth-child(1).slide-in-full .INTERIOR {
  rotate: -0.4deg;
  transition: rotate 0.05s ease-out;
}

.SIDE_UI:nth-child(2).slide-in-full .INTERIOR {
  rotate: 0.5deg;
  transition: rotate 0.05s ease-out;
}

.SIDE_UI:nth-child(3).slide-in-full .INTERIOR {
  rotate: -0.3deg;
  transition: rotate 0.05s ease-out;
}

.SIDE_UI:nth-child(4).slide-in-full .INTERIOR {
  rotate: 0.4deg;
  transition: rotate 0.05s ease-out;
}

.SIDE_UI:nth-child(5).slide-in-full .INTERIOR {
  rotate: -0.5deg;
  transition: rotate 0.05s ease-out;
}

.SIDE_UI.slide-in-full.active .INTERIOR {
  rotate: 0deg;
}

.SIDE_UI + .SIDE_UI label {
  top: 105px;
}

.SIDE_UI + .SIDE_UI + .SIDE_UI label {
  top: 190px;
}

.SIDE_UI + .SIDE_UI + .SIDE_UI + .SIDE_UI label {
  top: 275px;
}

.SIDE_UI + .SIDE_UI + .SIDE_UI + .SIDE_UI + .SIDE_UI label {
  top: 360px;
}

#INKLING_BINDER label {
  background: black;
  text-align: left;
  font-size: 33px;
  padding: 15px;
  color: white;
}
#INKLING_BINDER #INKLING_BINDER_DATA {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  border: 3px dashed rgba(0, 0, 0, 0.418);
  border-radius: 25px;
  width: 80%;
  height: 500px;
}
#INKLING_BINDER .INKLING_DELETE_BUTTON {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: rgb(0, 0, 0);
  color: white;
  cursor: pointer;
  z-index: 120;
}
#INKLING_BINDER .INKLING_DELETE_BUTTON:hover {
  background: rgb(200, 50, 50);
}
#INKLING_BINDER #INKLING_SNAP_BOX {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100px;
  border-radius: 120px;
  border: 2px dashed rgba(0, 0, 255, 0.537);
  background: rgba(0, 0, 255, 0.1);
  z-index: 99;
  width: 100px;
  height: 100px;
  transition: transform 0.2s ease-in-out;
}
#INKLING_BINDER #INKLING_SNAP_BOX.hover {
  transform: translateX(-50%) scale(1.1);
}

#CARD_BINDER label {
  background: rgb(126, 0, 0);
  text-align: left;
  font-size: 33px;
  padding: 15px;
  color: white;
}
#CARD_BINDER .CARD_DELETE_BUTTON {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: rgb(0, 0, 0);
  color: white;
  cursor: pointer;
}
#CARD_BINDER .CARD_DELETE_BUTTON:hover {
  background: rgb(200, 50, 50);
}
#CARD_BINDER #CARD_BINDER_DATA {
  margin: 25px auto;
  border: 3px dashed rgba(0, 0, 0, 0.418);
  border-radius: 25px;
  width: 80%;
  height: 300px;
}
#CARD_BINDER #CARD_SNAP_BOX {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  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;
  transition: transform 0.2s ease-in-out;
  perspective: 1200px;
}
#CARD_BINDER #CARD_SNAP_BOX.hover {
  transform: translateX(-50%) scale(1.1);
}
#CARD_BINDER #CARD_SNAP_BOX .hand_card:hover, #CARD_BINDER #CARD_SNAP_BOX .hand_card.hover {
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: translateY(-18px) rotateX(22deg) rotateZ(2deg) scale(1.06);
}

#SETTINGS_BINDER label {
  background: rgb(55, 31, 85);
  text-align: left;
  font-size: 33px;
  padding: 15px;
  color: white;
}

#MAP_BINDER label {
  background: rgb(31, 55, 85);
  text-align: left;
  font-size: 33px;
  padding: 15px;
  color: white;
}
#MAP_BINDER #MAP_SCROLL_CONTAINER {
  text-align: left;
  width: calc(100% - 55px);
  height: calc(100% - 55px);
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#COLLECTION_BINDER label {
  background: rgb(60, 85, 31);
  text-align: left;
  font-size: 33px;
  padding: 15px;
  color: white;
}

@media (max-width: 1023px) {
  #MAP_SCROLL_CONTAINER {
    overflow: scroll !important;
  }
}
#ROLLOVER_CLOCK {
  position: absolute;
  z-index: 100;
  top: 40px;
  left: 30px;
  width: 200px;
  height: 200px;
  border: 3px dashed black;
  background: rgba(0, 0, 0, 0.132);
  border-radius: 50%;
}

.hour-hand, .minute-hand, .second-hand {
  position: absolute;
  width: 50%;
  height: 2px;
  background: black;
  top: 50%;
  left: 50%;
  transform-origin: 0% 50%;
  transform: rotate(0deg);
}

.second-hand {
  position: absolute;
  width: 90px;
  height: 6px;
  border-radius: 15px;
  background: rgb(0, 0, 0);
  top: 50%;
  left: 50%;
  transform-origin: 0% 50%;
  transform: rotate(0deg);
}

#CARD_COLLECTION_BLOCK .item {
  display: inline-block;
  padding: 25px;
  border-radius: 25px;
  margin: 0 5px;
  border: 3px dashed black;
}

#CARD_BLOCK {
  perspective: 1200px;
  pointer-events: none;
  position: absolute;
  z-index: 200;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 1500px;
  transition: width 0.3s ease-in;
  direction: ltr;
}
#CARD_BLOCK:hover .hand_card {
  margin: 0 -65px 0 0;
  pointer-events: auto !important;
}
#CARD_BLOCK .hand_card {
  transition: margin 0.2s cubic-bezier(0.075, 0.82, 0.165, 1), transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
  margin: 0 -65px 0 0;
  transform: translateY(0px) rotate(0deg);
  filter: var(--border_thin) drop-shadow(-3px 2px 0px rgba(0, 0, 0, 0.4274509804)) !important;
}
#CARD_BLOCK .hand_card.slide-away {
  transform: translateY(100px) rotate(1deg) !important;
  pointer-events: none !important;
}
#CARD_BLOCK .hand_card:nth-child(2n) {
  transform: translateY(-3px) rotate(-1deg);
}
#CARD_BLOCK .hand_card:nth-child(3n) {
  transform: translateY(2px) rotate(1deg);
}
#CARD_BLOCK .hand_card:nth-child(4n) {
  transform: translateY(-2px) rotate(-1deg);
}
#CARD_BLOCK .hand_card:nth-child(5n) {
  transform: translateY(2px) rotate(-1deg);
}
#CARD_BLOCK .hand_card:nth-child(6n) {
  transform: translateY(-3px) rotate(0deg);
}
#CARD_BLOCK .hand_card.placeholder {
  border: 5px dashed white;
  background: none;
  z-index: 200;
}
#CARD_BLOCK .hand_card:hover {
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: translateY(-155px);
}
#CARD_BLOCK .hand_card.hover-sm {
  background: rgb(180, 230, 185);
  border: 16px solid rgb(31, 215, 117);
  transform: translateY(-10px) rotate(1deg);
}
#CARD_BLOCK .hand_card.hover {
  background: rgb(230, 230, 180);
  border: 16px solid rgb(180, 160, 40);
  transform: translateY(-170px) rotate(2deg);
}

#CARD_BLOCK.add {
  animation: card-block-snap 0.1s ease-out forwards;
}

@keyframes card-block-snap {
  0% {
    transform: translateX(-50%) translateX(0px);
  }
  80% {
    transform: translateX(-50%) translateX(120px);
  }
  80% {
    transform: translateX(-50%) translateX(-60px);
  }
  100% {
    transform: translateX(-50%) translateX(0px);
  }
}
.hand_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;
  text-align: center;
  font-size: 20px !important;
  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;
}
.hand_card.pickup {
  animation: pickup-pop 0.15s ease-in forwards;
}
@keyframes pickup-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2) translateY(-30px);
  }
  100% {
    transform: scale(1) translateY(0px);
  }
}
.hand_card .card_amount_tag {
  position: absolute;
  top: -5px;
  left: -5px;
  rotate: -10deg;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: black;
  border: 3px solid rgba(255, 255, 255, 0.502);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.hand_card[data-type=resource] {
  background: rgb(180, 230, 185);
  border: 16px solid rgb(31, 215, 117);
}

.hand_card[data-type=expedition] {
  background: rgb(255, 237, 34);
  border: 16px solid rgba(215, 172, 0, 0.758);
}

.hand_card.dragging {
  cursor: grabbing;
  filter: var(--border_thin) drop-shadow(5px 25px 0px rgba(0, 0, 0, 0.4274509804));
  pointer-events: none;
  animation: jitter 0.12s ease-in-out infinite; /* Add sway animation */
  z-index: 99; /* Ensure it stays on top */
}

@keyframes jitter {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  25% {
    transform: translate(2px, -2px) rotate(-1deg);
  }
  50% {
    transform: translate(0px, 2px) rotate(1deg);
  }
  75% {
    transform: translate(-2px, -1px) rotate(-0.5deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}
.hand_card:nth-child(2n) {
  rotate: 1deg;
}

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

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

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

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

.hand_card .card-snap-box {
  position: absolute;
  width: 100px;
  height: 100px;
  bottom: 10px;
  left: 35px;
  transition: border-color 0.2s ease-in-out;
  border: 2px dashed rgba(0, 0, 0, 0.537);
  background: rgba(0, 0, 0, 0.13);
  border-radius: 150px;
}

.hand_card .expedition-timer {
  display: block;
  contain: layout style;
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  margin-top: 6px;
  overflow: hidden;
}
.hand_card .expedition-timer .expedition-timer-fill {
  height: 100%;
  width: 0%;
  background: #f0c040;
  border-radius: 3px;
  transition: width 0.3s linear;
}

@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.active {
  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 rgba(0, 0, 0, 0.4705882353));
}

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

#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;
}
#START_BUTTON:hover,
#LOAD_BUTTON: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;
}
#DELETE_DATA_BUTTON:hover {
  transform: scale(1.1) translateY(40px);
  cursor: pointer;
  background: #000000;
}

.INKLING {
  cursor: pointer;
  filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.7)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.7));
  position: absolute;
  z-index: 91;
  transform-origin: center center;
  width: 200px;
  height: 200px;
  transition: rotate 1s ease-in;
  pointer-events: auto !important;
}
.INKLING.fish-left {
  transform: scaleX(-1);
}
.INKLING.fish-right {
  transform: scaleX(1);
}
.INKLING.highlighted {
  filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.7)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.7)) drop-shadow(0px 0px 15px rgba(255, 255, 255, 0.5411764706)) !important;
}
.INKLING.dragging {
  cursor: grabbing !important;
  filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.7)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.7)) drop-shadow(0px 0px 20px rgba(255, 255, 255, 0.8)) !important;
  pointer-events: none;
  z-index: 200;
}
.INKLING.dragging .fullbody.animation {
  animation: inkling-move-drag 0.4s infinite !important;
}
@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%);
  }
}
.INKLING.dragging .pupil.animation {
  animation: pupil-stress 8s steps(1) infinite !important;
}
@keyframes pupil-stress {
  0% {
    transform: translate(3px, -3px) scale(0.55, 0.9);
  }
  5% {
    transform: translate(5px, 5px) scale(0.55, 0.9);
  }
  15% {
    transform: translate(2px, 1px) scale(0.55, 0.9);
  }
  20% {
    transform: translate(-4px, -2px) scale(0.55, 0.9);
  }
  25% {
    transform: translate(5px, 0px) scale(0.55, 0.9);
  }
  35% {
    transform: translate(0px, 3px) scale(0.55, 0.9);
  }
  40% {
    transform: translate(5px, -1px) scale(0.55, 0.9);
  }
  45% {
    transform: translate(0px, 8px) scale(0.55, 0.9);
  }
  50% {
    transform: translate(-4px, -1px) scale(0.55, 0.9);
  }
  55% {
    transform: translate(9px, -2px) scale(0.55, 0.9);
  }
  65% {
    transform: translate(0px, 0px) scale(0.55, 0.9);
  }
  75% {
    transform: translate(12px, 7px) scale(0.55, 0.9);
  }
}
.INKLING.dragging .beak_top.animation {
  animation: beak-top-drag 0.3s infinite !important;
}
@keyframes beak-top-drag {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(12deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.INKLING.dragging .beak_bottom.animation {
  animation: beak-bottom-drag 0.3s infinite !important;
}
@keyframes beak-bottom-drag {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-12deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.INKLING.dragging .wing.animation {
  animation: peep-wing-drag 0.15s infinite !important;
}
@keyframes peep-wing-drag {
  0% {
    transform: scaleY(-45%) rotate(-25deg);
  }
  50% {
    transform: scaleY(90%) rotate(0deg);
  }
  55% {
    transform: scaleY(110%) rotate(0deg);
  }
  100% {
    transform: scaleY(-45%) rotate(25deg);
  }
}
.INKLING.dragging .fin.animation {
  animation: peep-fin-drag 0.3s infinite !important;
}
@keyframes peep-fin-drag {
  0% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(20deg);
  }
}
.INKLING.dragging .tail.animation {
  animation: peep-tail-drag 0.3s infinite ease-out !important;
}
@keyframes peep-tail-drag {
  0% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}
.INKLING.asset_face_right {
  transform: scaleX(1);
}
.INKLING.asset_face_left {
  transform: scaleX(-1);
}
.INKLING.static {
  position: absolute !important;
  top: -50px !important;
  left: -50px !important;
  filter: var(--border_thin) !important;
  z-index: unset;
}
.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;
}
@keyframes mood-stress {
  0% {
    transform: translate(-20px, 0);
    opacity: 1;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 0;
  }
}
.INKLING .moods.happy {
  background: url("../img/inklings/mood_happy.png") center center no-repeat;
  animation: 1.2s mood-happy forwards;
}
@keyframes mood-happy {
  0% {
    transform: scale(2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.INKLING .moods.attention {
  background: url("../img/inklings/mood_attention.png") center center no-repeat;
  animation: 1.2s mood-attention forwards;
}
@keyframes mood-attention {
  0% {
    transform: translate(-20px, 0);
    opacity: 1;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 0;
  }
}
.INKLING .moods.angry {
  background: url("../img/inklings/mood_angry.png") center center no-repeat;
  animation: 1.2s mood-angry ease-in-out;
}
@keyframes mood-angry {
  0% {
    transform: scale(2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.INKLING .animation_box {
  transform-origin: var(--inkling_center);
}
.INKLING .animation_box img {
  position: absolute;
  pointer-events: none;
}
.INKLING .animation_box.boing_turn {
  animation: boing_turn 0.5s ease-in-out;
}
@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);
  }
}
.INKLING .animation_box.boing {
  animation: boing 0.4s;
}
@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);
  }
}
.INKLING .animation_box.boing2 {
  animation: boing2 0.4s;
}
@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);
  }
}
.INKLING .animation_box.bite {
  animation: bite 0.4s;
}
@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);
  }
}
.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 .eye_art {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 7;
}
.INKLING .eye .pupil {
  position: absolute;
  z-index: 8;
  transform-origin: 46px 65px;
  will-change: transform;
}
.INKLING .eye .pupil.animation {
  animation: pupil-flit2 0.5s steps(1) 1;
}
@keyframes pupil-flit2 {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(-10px, 5px);
  }
  30% {
    transform: translate(12px, 6px);
  }
}
.INKLING .eye .pupil.flit {
  animation-duration: 0.6s !important;
  animation: pupil-flit forwards;
}
@keyframes pupil-flit {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(-10px, 5px);
  }
}
.INKLING .eye .pupil.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 .fullbody.animation {
  transform-origin: center;
}
.INKLING .fullbody.animation.idle {
  animation: inkling-move-idle infinite ease-in-out;
}
@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%);
  }
}
.INKLING .fullbody.fast {
  animation: inkling-move-fast infinite ease-in-out;
}
@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%);
  }
}
.INKLING .body {
  left: 21px;
  top: 21px;
  z-index: 4;
}
.INKLING .wing {
  left: 99px;
  top: 142px;
  z-index: 10;
  transform-origin: top left;
}
.INKLING .wing.animation {
  animation: peep-wing-happy infinite;
}
@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);
  }
}
.INKLING .beak_top {
  top: 83px;
  left: 0px;
  z-index: 5;
  transform-origin: bottom right;
}
.INKLING .beak_top.animation {
  animation: beak-top infinite;
}
@keyframes beak-top {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.INKLING .beak_top.top-snap {
  animation-duration: 0.4s !important;
  animation: beak-top-snap forwards;
}
@keyframes beak-top-snap {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(25deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.INKLING .beak_bottom {
  left: 0px;
  top: 106px;
  z-index: 5;
  transform-origin: top right;
}
.INKLING .beak_bottom.animation {
  animation: beak-bottom infinite;
}
@keyframes beak-bottom {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.INKLING .beak_bottom.bottom-snap {
  animation-duration: 0.4s !important;
  animation: beak-bottom-snap forwards;
}
@keyframes beak-bottom-snap {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(-22deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.INKLING .fin {
  left: 57px;
  top: 0px;
  z-index: 5;
  transform-origin: bottom center;
}
.INKLING .fin.fin.animation {
  animation: peep-fin infinite;
}
@keyframes peep-fin {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(6deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}
.INKLING .fin.pop {
  animation: finpop 0.2s forwards;
}
@keyframes finpop {
  from {
    transform: scaleY(0%);
  }
  to {
    transform: scaleY(100%);
  }
}
.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);
  }
}
.INKLING .tail {
  left: 150px;
  top: 34px;
  z-index: 4;
  transform-origin: center left;
}
.INKLING .tail.animation {
  animation: peep-tail infinite;
}
@keyframes peep-tail {
  0% {
    transform: scaleX(100%) rotate(3deg);
  }
  50% {
    transform: scaleX(90%) rotate(0deg);
  }
  100% {
    transform: scaleX(100%) rotate(3deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
@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);
  }
}
.peeper img {
  pointer-events: none;
}

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

/* Dragging state animations */
.INKLING.dragging.fish-right {
  animation: drag-dangle-right 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);
  }
}

.INKLING.dragging.fish-left {
  animation: drag-dangle-left 0.2s ease-in-out infinite !important;
}
@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);
  }
}

.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 rgba(0, 0, 0, 0.1450980392);
}

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

.DEBUG .object:not(:first-child) {
  border: 3px solid rgba(0, 0, 0, 0.1450980392);
  cursor: pointer;
  transition: 0.3s;
}
.DEBUG .object:not(:first-child):hover {
  transform: scale(1.03);
}

/* Countdown pie timer */
.countdown-pie {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.countdown-pie::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #111;
}

.countdown-pie-label {
  position: relative;
  z-index: 1;
  font-size: 7px;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  pointer-events: none;
  white-space: nowrap;
}

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

#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, rgba(255, 0, 0, 0.5725490196) 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, rgba(0, 255, 47, 0.5725490196) 0%, rgba(0, 0, 0, 0) 80%);
}

.debug-line[data-trait=gatherer] {
  background: linear-gradient(-90deg, rgba(8, 0, 255, 0.5725490196) 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-out forwards;
  transform-origin: center center;
}
@keyframes dust_add {
  0% {
    transform: scale(50%) translateY(-900px);
    opacity: 0;
  }
  60% {
    transform: translateY(130px);
  }
  100% {
    transform: scale(100%) translateY(0);
    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 {
  -webkit-user-select: none;
     -moz-user-select: none;
          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 rgba(0, 0, 0, 0.5647058824)) drop-shadow(3px 3px 1px rgba(0, 0, 0, 0.7019607843));
  animation: cardShuffle 0.2s 1;
}
.updateCard: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;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  filter: saturate(100%) brightness(1.2) drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.6)) !important;
}
.tilt: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;
  }
}
.EXPEDITION_CONFIRM {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}
.EXPEDITION_CONFIRM .EXPEDITION_CONFIRM_STATS {
  font-size: 9px;
  color: #ddd;
  white-space: nowrap;
  letter-spacing: 0.05em;
}
.EXPEDITION_CONFIRM .EXPEDITION_CONFIRM_BTN {
  width: 110px;
  height: 28px;
  font-size: 10px;
  background: #2a5c3a;
  color: #e8f5e0;
  border: 1px solid #4a9c6a;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.05em;
}
.EXPEDITION_CONFIRM .EXPEDITION_CONFIRM_BTN:hover {
  background: #3a8c5a;
}/*# sourceMappingURL=main.css.map */