* { box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x: hidden;
}


.bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #000;
}

.bg-video{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 700px;  
  height: auto;
  display: block;
  opacity: 0.7;
}

.bg-video-mirror{
  position: absolute;
  left: 0;
  top: 0;
  width: 1000px;
  height: auto;
  transform: scale(-1, -1); 
  display: block;
  opacity: 0.7;
}

.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.10);
  pointer-events: none;
}


.logo-link{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.logo-img{
  width: 120px;
  height: 120px;
  image-rendering: pixelated;
  user-select: none;
  background: transparent;
  transition: transform 140ms ease, filter 140ms ease;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
}

.logo-link:hover .logo-img{
  transform: scale(1.08);
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.45));
}


:root{
  --menu-max-width: 720px;
  --menu-top-padding: 10px;

  --hotbar-left: 9.35%;
  --hotbar-bottom: 8.35%;

  --slot-size: 56px;
  --slot-gap: 10px;

  --icon-scale: 0.68;
  --icon-hover-scale: 0.80;

  --sidebar-left: 8.5%;
  --sidebar-top: 2.5%;
  --sidebar-slot-size: 75px;
  --sidebar-gap: 15px;

  --single-left: 79.5%;
  --single-top: 33.5%;
  --single-size: 75px;

  --date-box-offset-y: 0px;
  --daily-box-offset-y: 0px;
  --daily-box-offset-x: 0px;
}

.top{ width: 100%; }

.menu-wrap{
  width: min(var(--menu-max-width), 92vw);
  margin: 0 auto;
  padding-top: var(--menu-top-padding);
  position: relative;
}

.menu-img{
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
  user-select: none;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
}

.menu-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.panel-gif{
  position: absolute;
  left: 18.9%;
  top: 7.55%;
  width: 27.1%;
  height: 64.93%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
  pointer-events: none;
}

.lucca-gif{
  max-width: 180%;
  max-height: 180%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
}


.hotbar{
  position: absolute;
  left: var(--hotbar-left);
  bottom: var(--hotbar-bottom);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--slot-size);
  gap: var(--slot-gap);
  pointer-events: auto;
  overflow: visible;
}

.icon-btn{
  width: var(--slot-size);
  height: var(--slot-size);
  display: grid;
  place-items: center;
  text-decoration: none;
  overflow: visible;
  transition: filter 140ms ease;
  position: relative;
}

.icon-btn img{
  width: calc(var(--slot-size) * var(--icon-scale));
  height: calc(var(--slot-size) * var(--icon-scale));
  display: block;
  image-rendering: pixelated;
  user-select: none;
  transition: transform 140ms ease, filter 140ms ease;
  transform: translateX(0px) translateY(0px) scale(1);
}

.icon-btn:hover img{
  transform: translateX(0px) translateY(0px)
    scale(calc(var(--icon-hover-scale) / var(--icon-scale)));
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.45));
}

.hotbar .icon-btn:nth-child(1) img{ transform: translateX(0px) scale(1); }
.hotbar .icon-btn:nth-child(1):hover img{
  transform: translateX(0px) scale(calc(var(--icon-hover-scale) / var(--icon-scale)));
}

.hotbar .icon-btn:nth-child(2) img{ transform: translateX(1px) scale(1); }
.hotbar .icon-btn:nth-child(2):hover img{
  transform: translateX(1px) scale(calc(var(--icon-hover-scale) / var(--icon-scale)));
}

.hotbar .icon-btn:nth-child(3) img{ transform: translateX(4px) scale(1); }
.hotbar .icon-btn:nth-child(3):hover img{
  transform: translateX(4px) scale(calc(var(--icon-hover-scale) / var(--icon-scale)));
}

.hotbar .icon-btn:nth-child(4) img{ transform: translateX(8px) scale(1); }
.hotbar .icon-btn:nth-child(4):hover img{
  transform: translateX(8px) scale(calc(var(--icon-hover-scale) / var(--icon-scale)));
}

.hotbar .icon-btn:nth-child(5) img{ transform: translateX(11px) scale(1); }
.hotbar .icon-btn:nth-child(5):hover img{
  transform: translateX(11px) scale(calc(var(--icon-hover-scale) / var(--icon-scale)));
}

.hotbar .icon-btn:nth-child(6) img{ transform: translateX(14px) scale(1); }
.hotbar .icon-btn:nth-child(6):hover img{
  transform: translateX(14px) scale(calc(var(--icon-hover-scale) / var(--icon-scale)));
}

.hotbar .icon-btn:nth-child(7) img{ transform: translateX(15px) scale(1); }
.hotbar .icon-btn:nth-child(7):hover img{
  transform: translateX(15px) scale(calc(var(--icon-hover-scale) / var(--icon-scale)));
}

.hotbar .icon-btn:nth-child(8) img{ transform: translateX(17px) scale(1); }
.hotbar .icon-btn:nth-child(8):hover img{
  transform: translateX(17px) scale(calc(var(--icon-hover-scale) / var(--icon-scale)));
}


.sidebar{
  position: absolute;
  left: var(--sidebar-left);
  top: var(--sidebar-top);
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: var(--sidebar-slot-size);
  gap: var(--sidebar-gap);
  pointer-events: none;
}

.side-btn{
  text-decoration: none;
  pointer-events: auto;
}

.side-slot[aria-hidden="true"]{
  pointer-events: none;
}

.side-slot{
  width: var(--sidebar-slot-size);
  height: var(--sidebar-slot-size);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.side-btn{
  text-decoration: none;
}

.side-btn img{
  width: calc(var(--sidebar-slot-size) * var(--icon-scale));
  height: calc(var(--sidebar-slot-size) * var(--icon-scale));
  display: block;
  image-rendering: pixelated;
  user-select: none;
  transition: transform 140ms ease, filter 140ms ease;
  transform: scale(1);
}

.side-btn:hover img{
  transform: scale(calc(var(--icon-hover-scale) / var(--icon-scale)));
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.45));
}


.single-slot{
  position: absolute;
  left: var(--single-left);
  top: var(--single-top);
  width: var(--single-size);
  height: var(--single-size);
  pointer-events: auto;
}

.single-btn{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  text-decoration: none;
  overflow: hidden;
}

.single-btn img{
  width: calc(var(--single-size) * var(--icon-scale));
  height: calc(var(--single-size) * var(--icon-scale));
  display: block;
  image-rendering: pixelated;
  user-select: none;
  transition: transform 140ms ease, filter 140ms ease;
  transform: scale(1);
}

.single-btn:hover img{
  transform: scale(calc(var(--icon-hover-scale) / var(--icon-scale)));
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.45));
}


.reserved{
  width: min(1100px, 94vw);
  margin: 0 auto;
  height: 0;
  padding: 0;
  background: none;
  border: 0;
}


.date-box{
  width: 310px;
  margin: 25px auto 0;
  text-align: center;
  position: relative;
  transform: translateY(var(--date-box-offset-y));
}

.date-box-img{
  position: absolute;
  left: 47%;
  top: -250%;
  width: 735px;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.custom-date{
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  font-family: "Press Start 2P", monospace;
  font-size: 14px;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0,0,0,0.70);
  user-select: none;
  white-space: nowrap;
  top: 6px;
}


.daily-container{
  width: min(620px, 80vw);
  margin: 40px auto 0 255px;
  font-family: "Press Start 2P", monospace;
  text-align: center;
  color: #ffffff;
}

.daily-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 53px;
  width: 100%;
}

.daily-block{
  width: calc(50% - 14px);
  min-width: 0;
  position: relative;
  transform: translate(var(--daily-box-offset-x), var(--daily-box-offset-y));
}

.daily-box-img{
  position: absolute;
  left: 105%;
  top: 0;
  width: 730px;
  height: auto;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.daily-block-content{
  position: relative;
  z-index: 1;
  min-height: 0;
  padding-top: 18px;
}

.daily-title{
  margin-top: 3%;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
  text-shadow: 0 3px 0 rgba(0,0,0,0.70);
}

.daily-info{
  font-size: 12px;
  line-height: 1.7;
  margin-top: 3px;
  word-break: break-word;
  white-space: pre-wrap;
  text-shadow: 0 3px 0 rgba(0,0,0,0.70);
}


.daily-music-title{
  margin-bottom: 18px;
}


.daily-art-button{
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.daily-art-frame{

  width: 100%;
  height: 300px;
  overflow: hidden;
  margin: 0 auto;
}

.daily-art{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  border: 0;
  background: none;
  transition: transform 160ms ease, filter 160ms ease;
}

.daily-art-button:hover .daily-art{
  transform: scale(1.02);
  filter: brightness(1.03);
}


#dailyMusic{
  width: 100%;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 0;

  height: 32px; 
  width: 250px;    
}

#dailyMusic::-webkit-media-controls-panel{
  border-radius: 0 !important;
}

#dailyMusic::-webkit-media-controls-enclosure{
  border-radius: 0 !important;
}

.daily-poem{
  width: 100%;
  margin-top: 40px; 
}

.daily-poem > .daily-title{
  position: relative;
  top: 19px;
}



.daily-poem-box{
  width: calc(100% + 45px);
  margin-top: -45px;
  margin-left: -26.5px;
  background: rgba(103, 103, 103, 0.95);
  border-radius: 5px;
  padding: 40px 24px 15px;
}



.daily-poem-title{
  font-size: 14px;
  line-height: 1.6;
  text-shadow: 0 3px 0 rgba(0,0,0,0.70);
}

.daily-poem-text{
  font-family: "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.9;
  margin-top: 40px;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: center;
}


.art-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.90);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 26px;
}

.art-modal.is-open{
  display: flex;
}

.art-modal-img{
  max-width: 94vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  display: block;
}

.art-modal-close{
  position: fixed;
  top: 20px;
  right: 18px;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}


@media (max-width: 600px){
  :root{
    --slot-size: 46px;
    --slot-gap: 8px;
    --hotbar-left: 9.55%;
    --hotbar-bottom: 8.0%;
    --icon-scale: 0.70;
    --icon-hover-scale: 0.82;
    --sidebar-slot-size: 46px;
    --sidebar-gap: 10px;
    --single-size: 46px;
  }
}

@media (max-width: 900px){
  .logo-img{
    display: none;
  }
}

@media (max-width: 760px){
  .daily-top{
    flex-direction: column;
    gap: 34px;
  }

  .daily-block{
    width: 100%;
    transform: translate(0, var(--daily-box-offset-y));
  }

  .daily-art-frame{
    height: 280px;
  }

  .daily-poem{
    margin-top: 56px;
  }

  .daily-poem-text{
    font-size: 18px;
  }
}

.about-tag{
  position: absolute;
  top: 7.8%;
  right: 5.5%;
  width: 23%;
  height: 10.5%;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  pointer-events: auto;
  z-index: 3;

  font-family: "Press Start 2P", monospace;
  font-size: 12px;
  line-height: 1;
  color: #f2f2f2;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
  white-space: nowrap;
}

.about-name,
.about-sep{
  color: #f2f2f2;
}

.about-link{
  color: #f2f2f2;
  text-decoration: underline;
  transition: transform 140ms ease, filter 140ms ease;
  display: inline-block;

}

.about-link:hover{
  color: rgb(0, 132, 255);
  /* transform: scale(1.06);
  filter: brightness(1.2); */
}