/* Page: Mascot (#page-mascot) */

.icon-dark{
  display:none;
}
.dark-mode .icon-dark{
  display:block;
}
.icon-light{
  display:none;
}
.light-mode .icon-light{
  display:block;
}



.hanmari{
  --character-fg:light-dark(
    var(--character-hanmari-mane-black),
    var(--character-hanmari-body));
  --character-bg:light-dark(
    var(--character-hanmari-body),
    var(--character-hanmari-mane-black));
  --character-body:var(--character-hanmari-body);
  --character-mane:var(--character-hanmari-mane-black);
  --character-minimize-bg:var(--character-hanmari-body);
}
.leebyeori{
  --character-fg:light-dark(
    var(--character-leebyeori-mane-brown),
    var(--character-leebyeori-body));
  --character-bg:light-dark(
    var(--character-leebyeori-body),
    var(--character-leebyeori-mane-brown));
  --character-body:var(--character-leebyeori-body);
  --character-mane:var(--character-leebyeori-mane-brown);
  --character-minimize-bg:var(--character-leebyeori-body);
}

#mascot-selector{
  /* Many length values are calculated from below variable.*/
  --mascot-container-width:calc(var(--pages-actual-width) - 64px);
  
  --mascot-divider-width: 5px;
  --mascot-minimized-width:50px;

  display:flex;
  flex-direction:row-reverse;
  position:relative;
  
  padding-bottom:24px;
}

.mascot-selector-divider{
  width:var(--mascot-divider-width);
  align-self:stretch;
  /*
  margin-left:2px;
  margin-right:2px;*/
  /*background-color:var(--color-text-auto);*/
}

/* .mascot-container 
     + .isolate : when the bg is transparent
     + .isolate.minimize : when it is squished to the side
                           because the other mascot is opened
     (nothing) : when it is opened, and the refsheet is visible
 */
.mascot-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  transition-property: max-height, max-width, background-color,filter;
  transition-duration: 1.0s,       1.0s,      1.0s,            0.3s;
  max-width:var(--mascot-container-width);
  /* Just a rough estimate of how tall things should be. */
  max-height:calc((var(--mascot-container-width) /1.5) + 50em);
  background-color:transparent;
  position:relative;
}
.anim-disabled .mascot-container{
  transition-duration:0s;
}
.mascot-container.isolate{
  max-width:calc(var(--mascot-container-width) * 0.50);
  max-height:calc(var(--mascot-container-width) / 1.556 );
  cursor:pointer;
}
.mascot-container.isolate.minimize{
  max-width:var(--mascot-minimized-width);
  background-color:var(--character-minimize-bg);
  filter:brightness(0.7);
}

@media ((hover: hover) and (pointer: fine)) {
  .mascot-container.isolate.minimize:hover{
    filter:none;
  }
  .mascot-container.isolate:hover .refsheet-thumb-isolated{
    filter:drop-shadow(0 0 6px var(--character-fg));
  }
  .mascot-container.isolate:hover .mascot-label{
    box-shadow:0 0 12px var(--character-body);
    background-color: color-mix(in srgb, var(--character-mane) 80%, var(--character-body));
  }
}


.mascot-content{
  width:calc(var(--mascot-container-width) + var(--mascot-divider-width) + var(--mascot-minimized-width));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  transition-property:opacity;
  transition-duration: 1.0s;
}
.anim-disabled .mascot-content{
  transition-duration:0s;
}
.isolate .mascot-content{
  pointer-events:none;
  opacity:0;
}
.mascot-container.hanmari .mascot-content{
  align-self:flex-end;
}
.mascot-container.leebyeori .mascot-content{
  align-self:flex-start;
}
.mascot-title{
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  gap:8px;
  margin-top:12px;
  font-size:2.0em;
  font-weight:700;
  color: var(--character-fg);
}
.mascot-title .sublang{
  font-size:0.7em;
}
.mascot-stats{
  color: var(--character-fg);
  font-size:1.0em;
  font-weight:700;
}
.mascot-bio{
  color: var(--character-fg);
  align-self:stretch;
  text-align:center;
  line-height:1.5;
}

.refsheet-image{
  width:var(--mascot-container-width);
  height: calc(var(--mascot-container-width) / 1.556);
  position:relative;
  /*border: 2px solid var(--character-bg);*/
  flex-shrink:0;
  flex-grow:0;
  overflow:hidden;
  width:100%;
}

.mascot-label-positioner{
  position:absolute;
  left:-100px;
  right:-100px;
  top:calc(calc(var(--mascot-container-width) * 0.50) - 30px);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  transition-property: top;
  transition-duration: 1.0s;
}
.anim-disabled .mascot-label-positioner{
  transition-duration:0s;
}
/* English text is longer so it may protrude outside and be ugly */
.langmode-en .minimize .mascot-label-positioner{
  /* Try to align bottom-ish of the vertical text to bottom of refsheet. */
  top:calc(calc(var(--mascot-container-width) * 0.55) - 60px);
}
.mascot-label{
  opacity:0;
  transition-property: opacity, transform, box-shadow, background-color;
  transition-duration: 1.0s,    1.0s,      0.3s,       0.2s;
  transform:none;
  z-index:10;
  font-size:24px;
  color: var(--character-body);
  background-color:var(--character-mane);
  border-radius:4px;
  padding:8px;
}
.anim-disabled .mascot-label{
  transition-duration:0s;
}
.mobile-mode .mascot-label{
  font-size:20px;
}
.isolate .mascot-label{
  opacity:1;
}
.hanmari.minimize .mascot-label{
  transform:rotate(90deg);
}
.leebyeori.minimize .mascot-label{
  transform:rotate(-90deg);
}
.refsheet-image > img{
  position:absolute;
  top:0;
  left:0;
  width:var(--mascot-container-width);;
  height:calc(var(--mascot-container-width) / 1.556);;
  transition-property: left, opacity, filter;
  transition-duration: 1.0s, 1.0s,    0.3s;
}
.anim-disabled .refsheet-image > img{
  transition-duration:0s;
}

.hanmari.isolate .refsheet-image > img{
  left:calc(var(--mascot-container-width) * -0.27);
}
.leebyeori.isolate .refsheet-image > img{
  left:calc(var(--mascot-container-width) * -0.23);
}
.hanmari.isolate.minimize .refsheet-image > img{
  left:calc(var(--mascot-container-width) * -0.39);
}
.leebyeori.isolate.minimize .refsheet-image > img{
  left:calc(var(--mascot-container-width) * -0.46);
}

.refsheet-thumb-full{
  z-index:1;
  opacity:1;
}
.isolate .refsheet-thumb-full{
  opacity:0;
}
.refsheet-thumb-isolated{
  z-index:2;
}

@keyframes fade-out{
  0%{
    opacity:1.0;
  }
  100%{
    opacity:0.0;
  }
}
@keyframes fade-in{
  0%{
    opacity:0.0;
  }
  100%{
    opacity:1.0;
  }
}
#mascot-click-suggester{
  position:absolute;
  z-index:20;
  top:calc((var(--mascot-container-width) / 1.556) - 0.3em );
  font-size:0.9em;
  font-weight:700;
  left:0;
  right:0;
  text-align:center;
  /*
  border-radius:4px;
  padding:8px;
  color: var(--color-text-auto);
  background-color:var(--color-background-auto);*/
  
  animation-fill-mode: both;
  animation-iteration-count:1;
}
#mascot-click-suggester.hidden{
  animation-delay:0.0s;
  animation-duration:0.5s;
  animation-name:fade-out;
  animation-play-state:running;
}
#mascot-click-suggester:not(.hidden){
  animation-delay:1.0s;
  animation-duration:1.0s;
  animation-name:fade-in;
  animation-play-state:running;
}

/* Responsive Section */
/* Targeting down to 300px. */

/* Mobile mode */
@media (width<640px) {
  .refsheet-downloads{
    flex-direction:column;
  }
  .mascot-label{
    font-size:20px;
  }
}

/* Smaller Mobiles */
@media (width<480px) {
}

/* Ridiculously Small Mobiles */
@media (width<360px) {
}

/* Mobile ladder */
/* PC <-640-> Big Mobile <-480-> Small Mobile <-360-> Ridiculous <-300-> I give up */
@media (width>=480px) and (width<640px) {
  /* 640 ~ 480 : Big Mobiles */
  
}
@media (width>=360px) and (width<480px) {
  /* 480 ~ 360 : Small Mobiles */
  
}
@media (width<360px) {
  /* 360 ~ 300 : Ridiculously Small Mobiles */
  
}