:root {
  --tsumego-view-top-menu-color: #ddd;
  --tsumego-view-top-menu-instruction-text-color: #777;
  --tsumego-view-top-menu-user-text-color: #6a6a6a;
  --tsumego-view-top-menu-selection-color: rgba(200, 200, 200, 0.35);
}

html[data-theme="light"] {
  --tsumego-view-top-menu-color: #ddd;
  --tsumego-view-top-menu-instruction-text-color: #777;
  --tsumego-view-top-menu-user-text-color: #6a6a6a;
  --tsumego-view-top-menu-selection-color: rgba(160, 160, 160, 0.35);
}

html[data-theme="dark"] {
  --tsumego-view-top-menu-color: #0d0d0d;
  --tsumego-view-top-menu-instruction-text-color: #777;
  --tsumego-view-top-menu-user-text-color: #6f6f6f;
  --tsumego-view-top-menu-selection-color: #171717;
  --tsumego-view-top-menu-selection-color: rgba(50, 50, 50, 0.5);
}

#btp-tsumego-top-menu {
  position: absolute;
  z-index: 300;
  left: 0;
  right: 0;
  top: 0;
  box-shadow: 0 0 2vh rgba(0, 0, 0, var(--tsumego-view-shadow-opacity));
  background-color: var(--tsumego-view-top-menu-color);
}

.btp-top-menu-selected {
  background-color: var(--tsumego-view-top-menu-selection-color);
}

#btp-tsumego-top-menu-icon-container {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  cursor: pointer;
}

#btp-tsumego-top-menu-icon {
  position: relative;
  width: 4vh;
  height: 4vh;
  background-image: url("../img/burger-icon.svg");
  background-size: 100%;
  background-position: center;
}

#btp-tsumego-top-menu-instruction-container {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#btp-tsumego-top-menu-instruction-icon {
  position: relative;
}

.top-menu-icon-hidden {
  display: none;
}

#btp-tsumego-top-menu-instruction-text {
  position: relative;
  color: var(--tsumego-view-top-menu-instruction-text-color);
  text-align: center;
  font-family: "Noto Sans",Sans-Serif;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#btp-tsumego-top-menu-user-name-container {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: var(--tsumego-view-top-menu-user-text-color);
  text-align: center;
  font-style: italic;
  font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

#btp-tsumego-top-menu-user-icon-container {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#btp-tsumego-top-menu-user-icon {
  position: relative;
  height: 58%;
  opacity: 0.75;
}

#btp-tsumego-top-menu-user-icon-verified {
  position: relative;
  height: 72%;
  border-radius: 50%;
  opacity: 0.86;
  background-color: #fbe8bf;
}

.top-menu-diff-text {
  position: absolute;
  right: min(2.4vh, 3.2vw);
  font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
  font-size: min(4vh, 8vw);
  line-height: min(4vh, 8vw);
  font-weight: bold;
}

.top-menu-diff-green {
  color: rgb(40, 160, 40);
  animation: green-glidein 1600ms ease-in forwards;
}

.top-menu-diff-red {
  color: rgb(220, 40, 40);
  animation: red-glidein 1400ms ease-in forwards;
}

@keyframes green-glidein {
  from {
    bottom: 0vh;
    opacity: 0.65;
  }
  to {
    bottom: -6vh;
    opacity: 0;
  }
}

@keyframes red-glidein {
  from {
    bottom: 0vh;
    opacity: 0.75;
  }
  to {
    bottom: -6vh;
    opacity: 0;
  }
}

/* Landscape */
@media (orientation: landscape) {

  #btp-tsumego-top-menu {
    height: 8vh;
  }
  
  #btp-tsumego-top-menu-icon-container {
    width: 10vh;
    height: 8vh;
  }
  
  #btp-tsumego-top-menu-instruction-container {
    top: 0.25vh;
    left: 12vh;
    height: 8vh;
    width: 62vh;
    max-width: 44vw;
  }

  #btp-tsumego-top-menu-instruction-icon {
    margin-right: 1.2vh;
  }

  .top-menu-icon-black {
    width: 3.5vh;
    height: 3.5vh;
    opacity: 0.9;
  }

  .top-menu-icon-white {
    width: 3.8vh;
    height: 3.8vh;
    opacity: 0.75;
  }

  .top-menu-icon-correct {
    width: 3.2vh;
    height: 3.2vh;
    opacity: 0.45;
  }

  .top-menu-icon-wrong {
    width: 3.2vh;
    height: 3.2vh;
    opacity: 0.64;
  }

  #btp-tsumego-top-menu-instruction-text {
    font-size: 3.4vh;
    line-height: 3.4vh;
    text-shadow: rgba(140, 140, 140, 0.2) 0 0.3vh 0;
  }
  
  #btp-tsumego-top-menu-user-name-container {
    padding-top: 0.5vh;
    right: 10vh;
    height: 7.5vh;
    width: 32.5vh;
    border-radius: 1.4vh 0 0 1.4vh;
  }

  #btp-tsumego-top-menu-user-name-animation-container {
    position: relative;
    width: 100%;
    height: 3.6vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    opacity: 0.9;
  }

  #btp-tsumego-top-menu-user-name-text {
    position: absolute;
    width: auto;
    height: 100%;
    right: 0;
    top: 0;
    padding-right: 0.2vh;
    font-size: 2.4vh;
    line-height: 2.4vh;
    text-shadow: rgba(140, 140, 140, 0.2) 0 0.2vh 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }

  #btp-tsumego-top-menu-user-name-diff {
    position: absolute;
    width: auto;
    height: 100%;
    right: 0;
    top: 105%;
    font-size: 2.4vh;
    line-height: 2.4vh;
    text-shadow: rgba(140, 140, 140, 0.2) 0 0.2vh 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }

  #btp-tsumego-top-menu-user-name-diff-amount {
    margin-right: 1vh;
    font-weight: bold;
    opacity: 0.9;
  }

  #btp-tsumego-top-menu-user-name-diff-text {
    margin-right: 1vh;
    opacity: 0.9;
  }
  
  #btp-tsumego-top-menu-user-icon-container {
    width: 10vh;
    height: 8vh;
    top: 0vh;
    right: 0vh;
  }
  
  #btp-tsumego-top-menu-user-icon-container {
    width: 10vh;
    height: 8vh;
    top: 0vh;
    right: 0vh;
  }
  
  #btp-tsumego-top-menu-user-icon-container {
    width: 10vh;
    height: 8vh;
    top: 0vh;
    right: 0vh;
  }
  
  #btp-tsumego-top-menu-user-icon-container {
    width: 10vh;
    height: 8vh;
    top: 0vh;
    right: 0vh;
  }

}

/* Portrait */
@media (orientation: portrait) {

  #btp-tsumego-top-menu {
    height: 8vh;
  }
  
  #btp-tsumego-top-menu-icon-container {
    width: 9vh;
    height: 8vh;
  }
  
  #btp-tsumego-top-menu-instruction-container {
    top: 0.25vh;
    left: 12vh;
    right: 12vh;
    height: 8vh;
  }

  #btp-tsumego-top-menu-instruction-icon {
    margin-right: min(1.2vh, 2.2vw);
  }

  .top-menu-icon-black {
    width: min(3.5vh, 5.5vw);
    height: min(3.5vh, 5.5vw);
    opacity: 0.9;
  }

  .top-menu-icon-white {
    width: min(3.8vh, 6vw);
    height: min(3.8vh, 6vw);
    opacity: 0.64;
  }

  .top-menu-icon-correct {
    width: min(3.2vh, 5vw);
    height: min(3.2vh, 5vw);
    opacity: 0.45;
  }

  .top-menu-icon-wrong {
    width: min(3.2vh, 5vw);
    height: min(3.2vh, 5vw);
    opacity: 0.64;
  }



  #btp-tsumego-top-menu-instruction-text {
    font-size: min(3.6vh, 4.6vw);
    line-height: min(3.8vh, 4.9vw);
    text-shadow: rgba(140, 140, 140, 0.16) 0 0.4vw 0;
  }
  
  #btp-tsumego-top-menu-user-name-container {
    display: none;
    visibility: hidden;
  }
  
  #btp-tsumego-top-menu-user-icon-container {
    width: 9vh;
    height: 8vh;
    top: 0vh;
    right: 0vh;
  }

}