/* Stuff that is displayed over the page. Mostly stuff in #stickies */


/* Debug panel */
#debug-print-area{
  z-index:99;
  background-color:#00000040;
  color:#88FF8880;
  position:absolute;
  bottom:0;
  left:0;
  width:160px;
  font-size:10px;
  font-family:"DM Mono";
  font-weight:700;
  padding:4px;
  display:flex;
  flex-direction:column-reverse;
}
#debug-features-buttons{
  display:flex;
  flex-direction:row;
  justify-content:space-around;
  margin-top:2px;
}
#debug-features-buttons > div{
  width:60px;
  text-align:center;
  background:#00000040;
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
  font-size:1.3em;
}
#debug-button-feature-auto{
  text-align:center;
  background:#00000040;
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
  font-size:1.3em;
}

/* Hanmari in the bottom right corner. L2D or image. */


#l2d-container{
  
  width:var(--l2d-canvas-size);
  height:var(--l2d-canvas-size);
  position:absolute;
  right:0;
  bottom:0;
  z-index:22;
  pointer-events:none;
}
@keyframes l2d-load-flicker{
  0%{
    opacity:0.6;
  }
  100%{
    opacity:0.4;
  }
}
@property --l2d-scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 1.0;
}

#l2d-load-overlay{
  position:absolute;
  
  
  width: calc(100% * 1.19 * var(--l2d-scale));
  aspect-ratio:1.0;
  right: calc(-15% * 1.19 * var(--l2d-scale));
  bottom: calc(-15% * 1.19 * var(--l2d-scale));
  
  animation-name:l2d-load-flicker;
  animation-play-state:playing;
  animation-iteration-count:infinite;
  animation-direction: alternate;
  animation-duration:0.4s;
  animation-timing-function:linear;
  
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:2;
}
#l2d-load-overlay-text{
  z-index:4;
  color: light-dark(#FFF,#000);
  font-weight:700;
}
.l2d-load-overlay-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  
  opacity:0.7;
}
#l2d-canvas{
  width:100%;
  height:100%;
  z-index:1;
  position:absolute;
  inset:0;
}
#l2d-buttons-container{
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  z-index:7;
  
  display:flex;
  justify-content:flex-start;
  align-items:flex-end;
  flex-direction:column;
  
  padding-right:20px;
  gap:20px;
  padding-top:10%;
  
  transition-property:padding-top;
  transition-duration:0.5s;
  transition-timing-function:ease-in-out;
}
.anim-disabled #l2d-buttons-container{
  transition-duration:0s;
}
#l2d-buttons-container.on-nonintro-page{
  padding-top:30%;
}
.l2d-button{
  pointer-events:auto;
  border:1px solid #FFF;
  border-radius:4px;
  color:#FFF;
  background-color:#00000040;
  width:32px;
  height:32px;
  
  display:flex;
  justify-content:center;
  align-items:center;
  
  margin-top:-0.5em;
  font-size:24px;
  
  user-select:none;
  
  opacity:0.4;
  transition-property:opacity;
  transition-duration:0.3s;
}
.anim-disabled .l2d-button{
  transition-duration:0s;
}
.l2d-button:hover{
  opacity:1.0;
}
.l2d-button.hidden.hidden{ /* Raise specificity above :hover (not really needed) */
  opacity:0.0;
  pointer-events:none;
}


/* Email popup */
#email-popup{
  z-index:30;
  pointer-events:auto;
  justify-content:center;
  align-items:center;
  background-color:#000000A0;
}
#email-display-body{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:240px;
  height:120px;
  background-color:var(--color-background-light);
  color:var(--color-text-dark);
  text-align:center;
  gap:16px;
}


/* Buttons on top right */
#switch-positioner{
  display:flex;
  pointer-events:none;
  
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-end;
  gap:8px;
  
  margin-top:16px;
  margin-right:16px;
  
}
#switch-positioner .link-button{
  --lb-color-bg:light-dark(var(--color-text-light),var(--color-text-dark));
  --lb-color-text:light-dark(var(--color-text-dark),var(--color-text-light));
}
#switch-positioner .link-button{
  /* Add to .link-buton transitions*/
  transition-property: background-color, color, opacity;
  transition-duration: 0.2s,             0.2s,  0.5s;
}
#switch-positioner .link-button:not(.activated){
  pointer-events:none;
  opacity:0.0;
}
#switch-positioner .link-button.activated{
  pointer-events:auto;
  opacity:1.0;
}
.anim-disabled #switch-positioner #animswitch-btn{
  --lb-color-bg:light-dark(#F88,#A44);
  --lb-color-text:light-dark(var(--color-text-dark),var(--color-text-light));
}



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

/* Mobile mode */
@media (width<640px) {
  #l2d-buttons-container{
    padding-right:12px;
    gap:32px;
    padding-top:80px;
  }
  .l2d-button{
    width:48px;
    height:48px;
    opacity:0.7;
  }
  #switch-positioner{    
    margin-top:8px;
    margin-right:8px;
  }
}

/* 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 */
}