/* ----------------------------------------------- */
/* RITA: add our project-specific css-classes here */
/* ----------------------------------------------- */
body{
  background-color: white;
  background-attachment: fixed;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.6rem;

    overflow: hidden;
}

/* main */
.container{
  height: 100%;
  width: 100%;
}

/* 
  ╔═════════════════════════════════════════════════════════════════════════════╗
  ║                                                                             ║
  ║                                MAIN BUTTON                                  ║
  ║                                                                             ║
  ╚═════════════════════════════════════════════════════════════════════════════╝
*/
.main_button{
  background-color: var(--sugarhill_col_orange);
  color: var(--sugarhill_col_white);

  min-width: 26.26dvw;
  min-height: 10.54dvh;

  display: grid;
  grid-template-columns: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 0.8dvh 0;
  
  transition: transform 0.15s ease-in-out;

  clip-path: polygon(
    0% 0%,  /* oben links etwas weiter innen */
    100% 0%,  /* oben rechts */
    96.4% 100%, /* unten rechts */
    3.6% 100%   /* unten links */
  );

  cursor: pointer;
  user-select: none;
}

.main_button:hover{
  transform: scale(1.05);
}

.main_button>span{
  display: block;
  transform: rotateZ(-1deg);
  font-size: var(--sugarhill_fontSize_button);
  font-family: var(--sugarhill_font_second);
}

.main_button.inactive{
  opacity: 0.35;
  pointer-events: none;
}

/* 
  ╔═════════════════════════════════════════════════════════════════════════════╗
  ║                                                                             ║
  ║                                CLOSE BUTTON                                 ║
  ║                                                                             ║
  ╚═════════════════════════════════════════════════════════════════════════════╝
*/
.close_button{    
  grid-row-start: 1;
  grid-column-start: 1;
  justify-self: flex-end;
  height: 10.54dvh;
  width: auto;

  aspect-ratio: 1 / 1;
  display: grid;
  justify-content: center;
  align-items: center;
  transform: rotate(5deg);

  color: var(--sugarhill_col_white);
  font-size: 8.14dvh;

  clip-path: polygon(
      0% 0%,  /* oben links etwas weiter innen */
      100% 0%,  /* oben rechts */
      98.42% 100%, /* unten rechts */
      2.1% 100%   /* unten links */
  );
  background-color: var(--sugarhill_col_main);

  cursor: pointer;
  pointer-events: all;
}

.close_button:hover{
  transform: scale(1.05);
}

/* 
  ╔═════════════════════════════════════════════════════════════════════════════╗
  ║                                                                             ║
  ║                                REPLAY BUTTON                                ║
  ║                                                                             ║
  ╚═════════════════════════════════════════════════════════════════════════════╝
*/
.replay_button{
  width: 9.58dvw;
  height: 14.35dvh;
  position: absolute;
  color: var(--sugarhill_col_white);
  background-color: var(--sugarhill_col_main);
  font-size: 10.55dvh;
  align-items: center;
  justify-content: center;
  display: grid;
  left: 3.96dvw;
  bottom: 7.5dvh;
  pointer-events: all;
  cursor: pointer;
}

.replay_button:hover{
  transform: scale(1.05);
}

/* 
  ╔═════════════════════════════════════════════════════════════════════════════╗
  ║                                                                             ║
  ║                                BACKGROUND                                   ║
  ║                                                                             ║
  ╚═════════════════════════════════════════════════════════════════════════════╝
*/
.main_background{
  height: 100%;
  width: 100%;
  position: relative;
  background-image: radial-gradient(circle at 50% 50%, #EFA939, #E09022);
  z-index: 1;
}

.main_background::after{
  content: ' ';
  position: absolute;
  background-image: url(../../assets/img/shopping_cart_bkg.svg);
  background-size: cover;
  background-repeat: repeat;
  z-index: -1;
  height: 100%;
  width: 100%;
}

/*Note(AZ): scrolling animation for .main_background::after
 needs to be further improved and adjusted before it works*/
/*left: 50%;*/
/*top: 0;*/
/*translate: -50% 0%;*/
/*min-width: 1200px;*/
/*will-change: background-position;*/
/*animation: pan 45s linear infinite;*/

/*Source for the effect: https://www.youtube.com/watch?v=x872keruUWQ*/
/*Full source code: https://codepen.io/Hyperplexed/pen/zYXZoZg*/
/*@keyframes pan {*/
/*  0% {*/
/*    background-position: 0% 0%;*/
/*  }*/
/*  100% {*/
/*    background-position: 100% 0%;*/
/*  }*/
/*}*/

/* 
  ╔═════════════════════════════════════════════════════════════════════════════╗
  ║                                                                             ║
  ║                                QUIZ                                         ║
  ║                                                                             ║
  ╚═════════════════════════════════════════════════════════════════════════════╝
*/
.main_quiz_button{
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 100%;
  position: relative;

  align-items: center;
  color: var(--sugarhill_col_white);
  border: none;
  padding: 0 3dvw;
  font-size: 4.9dvh;
  cursor: pointer;
  transform: rotate(-2deg);
  transition: transform 0.15s ease-in-out;

  min-height: 8.59dvh;
  width: 48.28dvw;
}
.main_quiz_button::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--sugarhill_col_brown);
  clip-path: polygon(
      0% 9.7%,  /* oben links etwas weiter innen */
      100% 0%,  /* oben rechts */
      98.54% 88.15%, /* unten rechts */
      2.2% 100%   /* unten links */
  );
}
.main_quiz_button.inactive{
  opacity: 0.35;
  pointer-events: none;
}
.main_quiz_button:hover{
  transform: scale(1.05) rotate(-2deg);
}
.main_quiz_button.inactive:hover{
  transform: none;
}

.main_quiz_button>span{
  transform: rotate(-0.6deg);
  z-index: 1;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
}

.main_quiz_button.selected{
    background-color: var(--sugarhill_col_white);
    clip-path: polygon(
        0% 9.7%,  /* oben links etwas weiter innen */
        100% 0%,  /* oben rechts */
        98.31% 93.03%, /* unten rechts */
        2.54% 100%   /* unten links */
    );
    height: 8.59dvh;
}
.main_quiz_button.selected::after{
    height: 83.9%;
    width: 97.8%;
    align-self: anchor-center;
    justify-self: anchor-center;
    
}

/* Fallback für Firefox & Co. */
@supports not (align-self: anchor-center) {
  .main_quiz_button.selected::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
  }
}

/* 
  ╔═════════════════════════════════════════════════════════════════════════════╗
  ║                                                                             ║
  ║                                CARDS                                        ║
  ║                                                                             ║
  ╚═════════════════════════════════════════════════════════════════════════════╝
*/
.card_wrapper_outer{
  grid-row-start: 1;
  grid-column-start: 1;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  width: auto;
  height: 24.35dvh;
  aspect-ratio: 1.07/1;
  position: relative;
  transition: transform 0.15s ease-in-out;

  cursor: pointer;
}

.card_wrapper_outer:hover{
  transform: scale(1.05) !important;
}


.card_wrapper{
  grid-row-start: 1;
  grid-column-start: 1;
  font-size: 2.78dvh;
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;

  position: relative;

  /* flex: 0 1 calc(20% - 0.22dvw); */
  box-sizing: border-box;

  font-family: var(--sugarhill_font_second);
  color: var(--sugarhill_col_white);

  clip-path: polygon(
    0% 2.66%,  /* oben links etwas weiter innen */
    100% 0%,  /* oben rechts */
    98.58% 97.72%, /* unten rechts */
    2.13% 100%   /* unten links */
  );

  background-color: var(--rarity_bg);
  background-image: none;
  background-size: cover;
  background-position: center;
}

.image_loading{
  background-color: var(--rarity_bg);
  background-image: none !important; 
}

.image_error{
  background-color: var(--sugarhill_col_attention);
  background-image: none !important; 
}

.card_wrapper.selected, .card_wrapper.selected>.card_question, .card_wrapper.selected>.zoom_wrapper{
  background-color: var(--sugarhill_col_orange);
  /* background-image: none; */
}


.card_wrapper::after{
  width: 100%;
  height: 100%;
  content: '';
  position: absolute;
  display: grid;
  place-content: center;

  clip-path: polygon(
    2% 5.05%,  /* oben links etwas weiter innen */
    97.64% 2.53%,  /* oben rechts */
    96.28% 95.67%, /* unten rechts */
    4.05% 97.83%   /* unten links */
  );
  
  align-self: anchor-center;
  justify-self: anchor-center;

  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.card_question{
  box-sizing: border-box;
  width: 100%;
  height: auto;
  max-height: 80%;
  align-self: flex-end;
  text-align: center;
  align-content: end;
  padding: 1.39dvh 0.68dvw;
  /* text-shadow: 1px 1px 5px black; */
  background: var(--rarity_bg);
  
  grid-row-start: 1;
  grid-column-start: 1;
}

.card_question .markdown_text>p{
  margin: 0;
}

.small_star{
  position: absolute;
  grid-row-start: 1;
  grid-column-start: 1;
  right: 3%;
  top: 3%;
  align-self: flex-start;
  justify-self: flex-end;
  font-size: 2.04dvh;
  color: var(--sugarhill_col_card_rare);
  transform: rotate(-9deg);
}

.card_amount_wrapper{
  position: absolute;
  bottom: -0.5dvh;
  right: -1dvh;
  height: 5.18dvh;
  aspect-ratio: 1/1;
  width: auto;
  display: grid;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--sugarhill_col_white);
  background-color: var(--sugarhill_col_brown);
  border-radius: 100px;
  
  grid-row-start: 1;
  grid-column-start: 1;

  font-size: 3.2dvh;
}
.card_amount{
  text-align: center;
  align-content: end;
  /* text-shadow: 1px 1px 5px black; */
}

.big_star{
  position: absolute;
  top: -0.5dvh;
  right: -1dvh;
  text-shadow: -1px 0px 0px var(--sugarhill_col_white), 1px 0px 0px var(--sugarhill_col_white), 0px -1px 0px var(--sugarhill_col_white), 0px 1px 0px var(--sugarhill_col_white);
  color: var(--sugarhill_col_card_legendary);
  transform: rotate(-9deg);
  font-size: 3.8dvh;
}

.zoom_wrapper{
  position: absolute;
  top: 2.66%;
  left: 0;
  height: 3.7dvh;
  width: 3.13dvw;
  clip-path: polygon(
    0% 0%,  /* oben links etwas weiter innen */
    100% 0%,  /* oben rechts */
    96.28% 100%, /* unten rechts */
    0% 100%  /* unten links */
  );
  background-color: var(--rarity_bg);

  display: grid;
  color: var(--sugarhill_col_white);

  text-align: center;
  justify-content: center;
  align-items: center;

  font-size: 2.2dvh;

  cursor: pointer;
}

.zoom_wrapper:hover{
  color: var(--sugarhill_col_white_50);

}

/* 
  ╔═════════════════════════════════════════════════════════════════════════════╗
  ║                                                                             ║
  ║                                FULLSCREEN VIEWER                            ║
  ║                                                                             ║
  ╚═════════════════════════════════════════════════════════════════════════════╝
*/
#viewer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  pointer-events: all;
}

#viewer.hidden { display: none; }

#viewer_backdrop {
  position: absolute;
  inset: 0;
  background: var(--sugarhill_col_popUpBlackout);
}

#viewer_content {
  position: relative;
  max-width: 92dvw;
  max-height: 92dvh;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  place-items: center;
  z-index: 1;
}

#viewer_img,
#viewer_video {
  max-width: 100%;
  max-height: 100%;
  outline: none;
  background: rgba(0,0,0,.2);
  border-radius: 12px;
}

#viewer_close {
  position: absolute;
  top: 2.2dvh;
  right: 1.31dvw;
  z-index: 2;
}
/* Standard: beide Medien verstecken */
#viewer_img, #viewer_video { display: none; }

/* Nur das aktive Medium zeigen */
#viewer[data-type="image"] #viewer_img { display: block; }
#viewer[data-type="video"] #viewer_video { display: block; }

#viewer_backdrop { position: absolute; inset: 0; z-index: 0; }
#viewer_content { position: relative; z-index: 1; }

#viewer_video { pointer-events: auto; }

/*
  ╔═════════════════════════════════════════════════════════════════════════════╗
  ║                                                                             ║
  ║                                HOLOWATCH                                    ║
  ║                                                                             ║
  ╚═════════════════════════════════════════════════════════════════════════════╝
*/


.holowatch_fullscreen_container {
  position: relative;
  display: grid;

  place-items: center;

  height: 100%;
  width: 100%;

  user-select: none;

  /* debug image like in designs */
  /* background-image: var(--holowatch_template_bg); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  backdrop-filter: blur(10px);
}

.holowatch_container{
  position: relative;

  height: min(86.6dvh, 936px);
  width: min(53.28dvw, 1023px);
  /*aspect-ratio: 1 / 0.985;*/
}
/* Smartphones (max-width: 915px) */
@media (max-width: 915px) {
  .holowatch_container {
    background: radial-gradient(circle at 50% 50%, var(--sugarhill_col_mainDarker) 0%, var(--sugarhill_col_main_33) 100%);
    min-height: 100%;
    width: 100%;
  }
  .holowatch_background{
    display: none;
  }
  #logout_button_mobile{
    display: grid !important;
  }
  #logout_button{
    display: none !important;
  }
}

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

.holowatch_background>.orange-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}

.holowatch_background>.orange-outline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.holowatch_header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;

  font-family: var(--sugarhill_font_main);
  color: var(--sugarhill_col_white);
  position: relative;
}

.holowatch_header_title {
  font-size: 6.2dvh;
}

/* Smartphones (max-width: 915px) */
@media (max-width: 915px) {
  .holowatch_header_title {
    font-size: 42px;
  }
}

#report_button {
  position: absolute;
  top: 5.2777dvh;
  right: 2.8645dvw;
  font-size: 9.25925dvh;
  color: var(--sugarhill_col_white);
  cursor: pointer;
  pointer-events: all;
}



.add_friend_icon{
  height: 4.4444dvh;
  font-size: 1.944dvh;

  justify-self: flex-end;
  width: auto;

  aspect-ratio: 1 / 1;
  display: grid;
  justify-content: center;
  align-items: center;
  transform: rotate(5deg);

  color: var(--sugarhill_col_white);

  clip-path: polygon(
          0% 0%,  /* oben links etwas weiter innen */
          100% 0%,  /* oben rechts */
          98.42% 100%, /* unten rechts */
          2.1% 100%   /* unten links */
  );
  background-color: var(--sugarhill_col_main);

  cursor: pointer;
}

.add_friend_icon>span{
  transform: rotate(-4deg);
}

.add_friend_icon:hover{
  transform: scale(1.05);
}

/*
    ╔═════════════════════════════════════════════════════════════════════════════╗
    ║                                                                             ║
    ║                      HOLOWATCH NAVIGATION TABS                              ║
    ║                                                                             ║
    ╚═════════════════════════════════════════════════════════════════════════════╝
*/

.holowatch_nav_tabs {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  /*gap: 3.23dvw;*/
  flex-wrap: wrap;
}

.holowatch_nav_tab {
  font-family: var(--sugarhill_font_second);
  font-size: 3.703dvh;
  color: white;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  /* transform: rotate(-1deg); */
  margin-right: 3.23dvw;
}
.holowatch_nav_tab:not(.active) {
  opacity: 0.5;
  cursor: pointer;
}

.holowatch_nav_tab:hover {
  opacity: 0.8;
}

/* Smartphones (max-width: 915px) */
@media (max-width: 915px) {
  .holowatch_nav_tab {
    font-size: 24px !important;
  }
}

/*
    ╔═════════════════════════════════════════════════════════════════════════════╗
    ║                                                                             ║
    ║                    HOLOWATCH-SCROLLBAR                                      ║
    ║                                                                             ║
    ╚═════════════════════════════════════════════════════════════════════════════╝
*/

.holowatch_container{
  scrollbar-width: thin;
  scrollbar-color: var(--sugarhill_col_main) var(--sugarhill_col_brown_30);
}
.holowatch_container::-webkit-scrollbar {
  width: 6px;
}
.holowatch_container::-webkit-scrollbar-thumb{
  background-color: var(--sugarhill_col_main);
  border-radius: 6px;
}
.holowatch_container::-webkit-scrollbar-track{
  background-color: var(--sugarhill_col_brown_30);
  border-radius: 6px;
  margin: 1.0416dvw 0;
}

.holowatch_container::-webkit-scrollbar-button {
  display: none; /* hides arrows */
}

.holowatch_container::-webkit-scrollbar-button:start:decrement,
.holowatch_container::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
}

/*
  ╔═════════════════════════════════════════════════════════════════════════════╗
  ║                                                                             ║
  ║                        MOVEMENT CONTROLS HELP                               ║
  ║                                                                             ║
  ╚═════════════════════════════════════════════════════════════════════════════╝
*/
.movement_controls_circle {
    position: relative;
    height: 15.61dvh;
    /*width: 11.145dvw;*/
    aspect-ratio: 1 / 0.9346;
    margin: 3dvh 1dvw;
    align-self: center;
}

.key {
    position: absolute;
    padding: 0.35em 0.8em 0.25em 0.8em;
    background: var(--sugarhill_col_white);
    color: var(--sugarhill_col_main);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-wrap-mode: nowrap;
    text-wrap: nowrap;
    clip-path: polygon(
            0% 0%,
            100% 0%,
            94% 100%,
            6% 100%
    );
    font-size: 2.7dvh;

}

.key>span {
    transform: rotate(-1deg);
}

.w { top: -10%; left: 50%; transform: translateX(-50%); }
.a { top: 50%; left: -10%; transform: translateY(-50%); }
.s { bottom: -10%; left: 50%; transform: translateX(-50%); }
.d { top: 50%; right: -10%; transform: translateY(-50%); }

.arrow {
    position: absolute;
    color: var(--sugarhill_col_main);
    font-size: 1.8dvh;
}

.up   { top: 27%; left: 50%; transform: translateX(-50%) rotate(180deg); }
.down { bottom: 27%; left: 50%; transform: translateX(-50%) rotate(0deg); }
.left { top: 50%; left: 27%; transform: translateY(-50%) rotate(90deg); }
.right{ top: 50%; right: 27%; transform: translateY(-50%) rotate(-90deg); }


.controls_interact_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.625dvw;
    flex-grow: 1;
}

.controls_interact_container>span {
    /* transform: rotate(-1deg); */
    font-family: var(--sugarhill_font_main);
    color: var(--sugarhill_col_white);
    text-shadow: #0000005e 0px 0px 10px;
}

.controls_interact_container>.key{
    position: relative !important;
}

/*
  ╔═════════════════════════════════════════════════════════════════════════════╗
  ║                                                                             ║
  ║                                COINS                                        ║
  ║                                                                             ║
  ╚═════════════════════════════════════════════════════════════════════════════╝
*/
#coin_wrapper{
    /* margin-top: 7.3dvh; */
    width: 15.8dvw;
    height: 9.17dvh;

    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;

    grid-row-start: 1;
    grid-column-start: 2;

    justify-self: flex-end;
    align-self: flex-start;

    position: relative;
}
#coin_wrapper::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 78.8%;
    background-color: var(--sugarhill_col_main);
    align-self: flex-end;
    clip-path: polygon(
            0% 0%,  /* oben links etwas weiter innen */
            100% 0%,  /* oben rechts */
            100% 100%, /* unten rechts */
            1.6% 100%   /* unten links */
    );
    z-index: -1;
}

#coin_icon,#coin_amount{
    grid-row-start: 1;
    grid-column-start: 1;

}

#coin_icon{
    width: auto;
    height: 90.9%;
    aspect-ratio: 1/1;
    align-self: flex-start;
    justify-self: flex-start;
    margin-left: 2px;
}

#coin_amount{
    font-size: 4.72dvh;
    font-family: var(--sugarhill_font_second);
    justify-self: center;
    transform: rotate(-1deg);
    height: 78.8%;
    align-self: end;
    line-height: 7.72dvh;
}

/* 
  ╔═════════════════════════════════════════════════════════════════════════════╗
  ║                                                                             ║
  ║                                UTILS                                        ║
  ║                                                                             ║
  ╚═════════════════════════════════════════════════════════════════════════════╝
*/
.hidden{
  display: none !important;
}

.all_caps{
  text-transform: uppercase;
}

.text_shortage{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.freeze{
    pointer-events: none !important;
    cursor: default !important;
}

/* 
  ╔═════════════════════════════════════════════════════════════════════════════╗
  ║                                                                             ║
  ║                                RESPONSIVE                                   ║
  ║                                                                             ║
  ╚═════════════════════════════════════════════════════════════════════════════╝
*/
/* Smartphones (max-width: 915px) */
@media (max-width: 915px) and (max-height: 430px) {
  .main_button {
    min-width: 240px;
    min-height: 40px;
    padding: 0.6vh 0;
  }
  .main_button>span {
    font-size: 30px !important;
  }
}

/* Tablets (min-width: 916px and max-width: 1368px) */
@media (min-width: 916px) and (max-width: 1368px) and (min-height: 540px) and (max-height: 1024px) {
  .main_button {
    min-width: 300px;
    min-height: 50px;
    padding: 0.8vh 0;
  }
  .main_button>span {
    font-size: 36px !important;
  }

  .close_button {
    height: 70px;
    font-size: 54.25px;
  }

}

/*
    ╔═════════════════════════════════════════════════════════════════════════════╗
    ║                                                                             ║
    ║                                LAZY LOADING                                 ║
    ║                                                                             ║
    ╚═════════════════════════════════════════════════════════════════════════════╝
*/

.bottom_lazy_loading_sentinel {
  margin-bottom: 0.5dvh;
}
.top_lazy_loading_sentinel {
  margin-top: 0.5dvh;
}

/*
    ╔═════════════════════════════════════════════════════════════════════════════╗
    ║                                                                             ║
    ║                                TOASTS                                       ║
    ║                                                                             ║
    ╚═════════════════════════════════════════════════════════════════════════════╝
*/

.rice_toast {
  width: 25dvw !important;
  aspect-ratio: auto !important;
  right: 0 !important;
}


/*
    ╔═════════════════════════════════════════════════════════════════════════════╗
    ║                                                                             ║
    ║                                ITEMS                                        ║
    ║                                                                             ║
    ╚═════════════════════════════════════════════════════════════════════════════╝
*/
#item_scroll_container{
  height: 100%;
  width: 100%;
  min-height: 0;

  overflow: auto;
  padding-right: 1dvw;
}

/***** SCROLLBAR *****/
/*firefox*/
#item_scroll_container{
  scrollbar-color: var(--sugarhill_col_brown) var(--sugarhill_col_brown_20);
  scrollbar-width: thin;
}
/*chrome*/
#item_scroll_container::-webkit-scrollbar {
  width: 0.438rem;
  border-radius: 100px;
  -webkit-appearance: none;
  background: var(--sugarhill_col_brown_20);
}
#item_scroll_container::-webkit-scrollbar-thumb{
  background-color: var(--sugarhill_col_brown);
  width: thin;
  border-radius: 100px;
}
/********************/

#item_container{
  height: 100%;
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  column-gap: 1.25dvw;
  row-gap: 5dvh;
  padding: 1rem;

  align-content: flex-start;

  position: relative;
}

#item_container:after{
  content: "";
  position: relative;
  width: 100%;
  align-self: flex-end;
  height: 1dvh;
}

.item_wrapper{
  font-size: 2.78dvh;
  width: auto;
  height: 24.35dvh;
  aspect-ratio: 1.07/1;

  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;

  position: relative;
  transition: transform 0.15s ease-in-out;

  /* flex: 0 1 calc(20% - 0.22dvw); */
  box-sizing: border-box;

  font-family: var(--sugarhill_font_second);
  color: var(--sugarhill_col_white);

  clip-path: polygon(
          0% 2.66%,  /* oben links etwas weiter innen */
          100% 0%,  /* oben rechts */
          98.58% 97.72%, /* unten rechts */
          2.13% 100%   /* unten links */
  );

  background-color: var(--sugarhill_col_brown);
  background-size: cover;
  background-position: center;

  cursor: pointer;
}

.item_static{
  cursor: default !important;
}
.item_static:hover{
  transform: none !important;
}

.item_loading{
  background-color: var(--sugarhill_col_brown);
}

.item_error{
  background-color: var(--sugarhill_col_attention);
}

.item_wrapper:hover{
  transform: scale(1.05);
}

.item_wrapper.equipped{
  background-color: #EFA939;
}

.item_wrapper.equipped::after{
  width: 100%;
  height: 100%;
  content: '';
  position: absolute;

  clip-path: polygon(
          2% 5.05%,  /* oben links etwas weiter innen */
          97.64% 2.53%,  /* oben rechts */
          96.28% 95.67%, /* unten rechts */
          4.05% 97.83%   /* unten links */
  );

  align-self: anchor-center;
  justify-self: anchor-center;

  background-color: var(--sugarhill_col_brown);
  box-shadow: 0 0 35px 0 #EFA939 inset;
  z-index: -1;
}

.item_wrapper.selected{
  background-color: var(--sugarhill_col_white);
}

.item_wrapper.selected::after{
  width: 100%;
  height: 100%;
  content: '';
  position: absolute;

  clip-path: polygon(
          2% 5.05%,  /* oben links etwas weiter innen */
          97.64% 2.53%,  /* oben rechts */
          96.28% 95.67%, /* unten rechts */
          4.05% 97.83%   /* unten links */
  );

  align-self: anchor-center;
  justify-self: anchor-center;

  background-color: var(--sugarhill_col_brown);
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.item_image_container{
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  justify-items: center;
}
.item_image_container>*{
  width: auto;
  height: 90%;
  align-self: center;

  object-fit: cover;
  object-position: center center;

  grid-row-start: 1;
  grid-column-start: 1;
}

.color_dot{
  height: 50%;
  width: auto;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  align-self: center;
  justify-self: center;
}

.item_image{
  z-index: 2;
}

.nothing_item{
  align-self: center;
  justify-self: center;
  height: 70%;
}

.puppet_head_img{
  z-index: 1;
}