/* A stable one-screen canvas prevents iOS from repeatedly relaying out the SVG after rotation. */
html, body { width: 100%; height: 100%; overflow: hidden; }
body { min-height: 100svh; position: relative; isolation: isolate; }
main { isolation: isolate; height: 100svh; min-height: 0; z-index: 1; }

/* Quiet Music-Riot note field, strongest in the free side areas of landscape mode. */
.music-notes {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: .38;
}
.music-notes span {
  position: absolute;
  color: #3c8ed4;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1;
  opacity: .09;
  text-shadow: 0 0 24px #2d75c477;
  user-select: none;
}
.music-notes span:nth-child(1) { left: 3%; top: 12%; font-size: 112px; transform: rotate(-13deg); }
.music-notes span:nth-child(2) { left: 9%; bottom: 6%; font-size: 154px; transform: rotate(12deg); }
.music-notes span:nth-child(3) { left: 26%; top: 43%; font-size: 78px; transform: rotate(-8deg); }
.music-notes span:nth-child(4) { right: 3%; top: 9%; font-size: 126px; transform: rotate(15deg); }
.music-notes span:nth-child(5) { right: 7%; bottom: 4%; font-size: 166px; transform: rotate(-11deg); }
.music-notes span:nth-child(6) { right: 26%; top: 46%; font-size: 74px; transform: rotate(9deg); }
.music-notes span:nth-child(7) { left: 40%; bottom: -4%; font-size: 102px; transform: rotate(-16deg); }
.music-notes span:nth-child(8) { right: 40%; top: -3%; font-size: 94px; transform: rotate(14deg); }

/* Keep the large SVG on one compositor layer while Safari changes orientation. */
.stage, #headstock, #headstock > svg {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.orientation-changing *, .orientation-changing *::before, .orientation-changing *::after {
  transition-duration: 0s !important;
}

/* The original logo is cropped only by layout. Its artwork stays intact. */
.brand-half {
  --brand-size: min(70vw, 286px);
  position: absolute;
  left: 12px;
  top: 0;
  width: var(--brand-size);
  height: calc(var(--brand-size) * .70);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: .88;
  filter: drop-shadow(0 12px 20px #0003);
}
.brand-link-layer {
  --brand-size: min(70vw, 286px);
  position: absolute;
  left: 12px;
  top: 0;
  width: var(--brand-size);
  height: calc(var(--brand-size) * .70);
  pointer-events: none;
  z-index: 6;
}
.brand-half img {
  position: absolute;
  left: 0;
  top: calc(var(--brand-size) * -.30);
  width: var(--brand-size);
  height: var(--brand-size);
  border-radius: 50%;
  display: block;
}
.brand-site-link {
  position: absolute;
  left: 4%;
  top: 8%;
  width: 92%;
  height: 16%;
  pointer-events: auto;
  border-radius: 8px;
  cursor: pointer;
}
.brand-site-link:focus-visible {
  outline: 2px solid #e9bf71;
  outline-offset: 3px;
}
.brand-half::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #06122c45, transparent 65%);
}
.controls {
  position: relative;
  z-index: 7;
  pointer-events: none;
  height: 76px;
  align-items: flex-end;
  padding-bottom: 4px;
}
.instruments, .controls button { pointer-events: auto; }
.instruments { position: absolute; right: 0; bottom: 4px; gap: 12px; }
.instruments button { font-size: 11px; }
.settings-button { align-self: flex-start; margin-top: 12px; }
#settings { top: 75px; z-index: 4; }
.stage { position: relative; z-index: 1; }
#headstock > svg { filter: drop-shadow(9px 14px 16px #0005); }
.bottom-controls { position: relative; z-index: 2; justify-content: center; height: 44px; }
#hint { text-align: center; }
#error { z-index: 5; width: auto; font-family: inherit; cursor: pointer; }
#start {
  background: linear-gradient(180deg, #c34750, #962e39);
  border-color: #e56c73;
  color: #fff4f4;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: inset 0 1px 0 #ffffff20, 0 4px 14px #0003;
}
#start.listening {
  background: linear-gradient(180deg, #ef5862, #bd3443);
  border-color: #ff8d94;
  color: #ffffff;
  box-shadow: inset 0 1px 0 #ffffff30, 0 0 14px #ec4c6126;
}
@media (min-width: 701px) {
  .brand-half, .brand-link-layer { --brand-size: 300px; left: 16px; top: 0; }
  .controls { height: 88px; }
  #settings { top: 86px; }
}
@media (max-height: 620px) {
  .brand-half, .brand-link-layer { --brand-size: min(65vw, 240px); top: 0; }
  .controls { height: 64px; }
  #settings { top: 63px; }
}
@media (orientation: landscape) {
  .music-notes { opacity: 1; }
  .music-notes span { opacity: .105; }
}
@media (orientation: portrait) and (max-width: 700px) {
  :root { --portrait-top-shift: max(12px, calc(env(safe-area-inset-top, 0px) - 22px)); }
  main { padding-top: var(--portrait-top-shift); }
  .brand-half, .brand-link-layer { top: var(--portrait-top-shift); }
  .music-notes span:nth-child(3),
  .music-notes span:nth-child(6),
  .music-notes span:nth-child(7),
  .music-notes span:nth-child(8) { display: none; }
}