@font-face{
  font-family:"maintitle";
  src:url("fonts/maintitle.ttf");
}

@font-face{
  font-family:"subtitle";
  src:url("fonts/subtitle.otf");
}

@font-face{
  font-family:"support";
  src:url("fonts/support.otf");
}

@font-face{
  font-family:"text";
  src:url("fonts/notosans.ttf");
}

@font-face{
  font-family:"copyright";
  src:url("fonts/copyright.otf");
}


body{

  text-align:center;
  font-family:"text";

}

.titleBlock{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.mainTitle {
  font-size: 72px;
  position:absolute;
  top:10px;
  left:770px;
  line-height: 2;
  font-family:"maintitle";
}

.subTitle {
  font-size: 27px;
  position:absolute;
  top:100px;
  left:770px;
  color: #444;
  font-family:"subtitle";
  font-weight: bold;
}

.copyRight {
  font-size: 27px;
  position:absolute;
  top:875px;
  left:1785px;
  color: #444;
  font-family:"copyright";
  font-weight: bold;
}

.controls {
  display: flex;
  position:absolute;
  top:160px;
  left:660px;
  gap: 18px;
  margin-bottom: 20px;
  z-index:50;
}

.support{
  font-size:27px;
  position:absolute;
  left:80px;
  top:60px;
  margin-top:30px;
  margin-bottom:20px;
  font-family:"support";
  color: #332
}

#aboutBox{

  position:absolute;

  right:260px;
  top:180px;

  width:340px;

  padding:20px;

  background-image:url("backgrounds/maya.png");

  border:2px solid rgba(255,255,255,0.35);

  border-radius:14px;

  backdrop-filter:blur(4px);

  color:white;

  text-align:left;

  box-shadow:
    0 0 20px rgba(0,0,0,0.4);

}

.aboutTitle{

  font-family:"subtitle";

  font-size:34px;

  margin-bottom:18px;

  text-shadow:
    0 0 6px rgba(0,0,0,0.7);

}

.aboutText{

  font-family:"text";

  font-size:18px;

  line-height:1.6;

  text-shadow:
    0 0 4px rgba(0,0,0,0.9);

}

#infoTabs{
  position:absolute;

  top:140px;
  left:40px;

  display:flex;
  gap:6px;

  z-index:60;
}

.infoTab{
  width:60px;
  height:60px;

  border:3px solid black;
  border-radius:8px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:12px;
  font-weight:bold;

  cursor:pointer;
  user-select:none;

  position:relative;
  overflow:hidden;

}


.redTab{
  background:rgba(255,0,0,0.7);
}

.whiteTab{
  background:rgba(255,255,255,0.7);
}

.blueTab{
  background:rgba(0,0,255,0.7);
}

.yellowTab{
  background:rgba(255,255,0,0.7);
}

.greenTab{
  background:rgba(0,128,0,0.7);
}

.infoTab img{
  opacity:1;
  filter:drop-shadow(0 0 0px black);

}

.tab{
  position:relative;

  width:60px;
  height:60px;

  border:3px solid black;
  border-radius:8px;

  display:flex;
  align-items:center;
  justify-content:center;
}

.tabSense{
  position:absolute;

  width:50px;
  height:50px;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);
}

#infoPanel{

  position:absolute;

  left:1px;
  top:90px;

  width:450px;
  height:620px;

  padding:20px;

  border-radius:16px;

  background:rgba(0,0,0,0.35);

  border:
    2px solid rgba(255,255,255,0.25);

  backdrop-filter:blur(6px);

  box-shadow:
    0 0 25px rgba(0,0,0,0.45);

  color:white;

  text-align:left;

  overflow:hidden;

  z-index:20;

  transition:
    background 0.35s ease,
    border 0.35s ease;
}

#infoPanelTitle{

  font-family:"subtitle";

  font-size:34px;

  margin-bottom:16px;

  text-shadow:
    0 0 8px rgba(0,0,0,0.8);
}

#infoPanelContent{

  font-family:"text";

  font-size:18px;

  line-height:1.7;

  overflow-y:auto;

  padding-right:10px;

  text-shadow:
    0 0 5px rgba(0,0,0,0.9);
}

.chakraTitle{

  background-image:url("backgrounds/chakras.png");

  opacity:0.9;

}

#appBackground{
  position:absolute;

  left:0;
  top:0;

  width:2000px;
  height:1000px;

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

  z-index:-1;

  pointer-events:none;
}

#app{
  position:relative;

  width:2000px;
  height:1000px;

  margin:0 auto;
  overflow:hidden;
  transform-origin:top center;
}

body{
  margin:0;
  overflow:hidden;
}

/* Desktop + landscape */
@media (orientation: landscape){

  #app{
    transform:scale(min(calc(100vw / 2000), calc(100vh / 1000)));
  }
}

:root{
  --mobileScale: 0.42;
}

@media (orientation: portrait){

  #app{
    position:fixed;

    left:50%;
    top:50%;

    margin:0;

    transform-origin:center center;

    transform:
      translate(-50%, -50%)
      rotate(90deg)
      scale(var(--mobileScale));
  }
}

@media (orientation: portrait){

  #stepButton{

    position:fixed;

    right:380px;
    bottom:830px;

    width:120px;
    height:120px;

    border-radius:50%;

    font-size:32px;

    z-index:99999;
  }

}

html,
body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

body{
  position:fixed;
}

svg{
  position:absolute;
  left:400px;
  top:155px;
  z-index:1;
}

html{
  overflow:hidden;
}

body{
  overflow:hidden;

  margin:0;
}

.infoTab.activeTab{
  box-shadow:
    0 0 12px rgba(255,255,255,0.9),
    0 0 24px currentColor,
    0 0 36px currentColor;

  transform:scale(1.08);

  z-index:80;
}

.dateControls{

  display:flex;
  gap:6px;
  align-items:center;
}

#dayInput{
  width:35px;
}

#monthInput{
  width:35px;
}

#yearInput{
  width:55px;
}