:root {
  /* Responsive unit that scales based on the constraining dimension (width or height) */
  /* For 16:9 aspect ratio: 1vw = 1.778vh, so min() picks whichever is smaller */
  --ru: min(1vw, 1.778vh);
}

body { 
  margin: 0;
  background: #000;
}

pixel-stream { 
  display: block;
  width: 100vw;
  height: 100vh;
  user-select: none;
  pointer-events: none;
}

img {
  user-select: none;
  pointer-events: none;
}

p {
  font-family: SeroOffc, sans-serif;
  color: white;
  text-align: left;
  line-height: 1.1em;
  letter-spacing: -0.3px;
}

/* Hide all states by default */
.state { display: none; }

/* Show the right state based on the component's status */
pixel-stream[status="connected"]      .state-idle,
pixel-stream[status="starting"]       .state-starting,
pixel-stream[status="queued"]         .state-queued,
pixel-stream[status="rendezvoused"]   .state-launching,
pixel-stream[status="negotiating"]    .state-launching,
pixel-stream[status="ready"]          .state-idle,
pixel-stream[status="failed"]         .state-error,
pixel-stream[status="ended"]          .state-error {
  background-image: url('../assets/VAEOnline/vae-bg.jpg');
  background-size: contain; /* Aspect ratio preserved, no cropping */
  background-repeat: no-repeat;
  background-position: center;
  min-height: 100vh;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Show black screen until connected to help hide asset load */
pixel-stream[status="idle"]           .state-idle,
pixel-stream[status="idle"]           .fullscreen-button,
pixel-stream[status="connecting"]     .state-idle,
pixel-stream[status="connecting"]     .fullscreen-button,
pixel-stream[status="authenticating"] .state-idle,
pixel-stream[status="authenticating"] .fullscreen-button { 
  display: none;
}

/* Hide overlay during streaming */
pixel-stream[status="streaming"] .overlay { 
  display: none; 
}

@font-face { 
  font-family: SeroOffc; src: url('../assets/SeroOffc.ttf'); 
  font-weight: normal;
}

@font-face { 
  font-family: SeroOffc; src: url('../assets/SeroOffc-Medium.ttf'); 
  font-weight: bold;
}

.idle-state-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--ru) * 0.9);
  width: 100%;
  max-width: 177.78vh; /* Constrain to 16:9 aspect ratio (100vh × 16/9) */
  padding-left: 6.4%;
  box-sizing: border-box;
}

.idle-state-row {
  display: flex;
  align-items: center;
  gap: calc(var(--ru) * 2);
  margin-top: calc(var(--ru) * 2);
}

.state-idle .logo {
  height: calc(var(--ru) * 8.28);
  width: auto;
  max-height: calc(var(--ru) * 4.3);
  margin: 0;
}

.idle-state-header {
  margin: 0;
  font-weight: 600;
  text-shadow: 0px 8px 8px rgba(0, 0, 0, 0.50);
  font-family: SeroOffc, sans-serif;
  line-height: 1.1em;
  color: white;
  font-style: bold;
  font-size: calc(var(--ru) * 6.8);
  text-align: left;
  max-width: 70%;
}

.play-button {
  width: calc(var(--ru) * 8.4);
  padding: calc(var(--ru) * 0.55) calc(var(--ru) * 1.04);
  font-size: calc(var(--ru) * 1);
  border-radius: calc(var(--ru) * 0.83);
  border: calc(var(--ru) * 0.1) solid white;
  background: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  pointer-events: all;
  -webkit-tap-highlight-color: transparent;
}

.play-button:hover {
  background: white;
}

.play-icon {
  width: calc(var(--ru) * 1.3);
  margin-left: calc(var(--ru) * 0.36);
}

.play-icon-path {
  fill: white;
  stroke: white;
}

.play-button:hover .play-icon-path {
  fill: black;
  stroke: black;
}

.idle-state-button-row-text {
  font-weight: 400;
  text-shadow: 0px 8px 8px rgba(0, 0, 0, 0.50);
  font-size: calc(var(--ru) * 3.1);
  font-family: SeroOffc, sans-serif;
  line-height: 1;
  text-align: center;
  color: white;
}

.content-box {
  width: calc(var(--ru) * 61);
  height: calc(var(--ru) * 32);
  padding: calc(var(--ru) * 2);
  position: relative;
  border-radius: calc(var(--ru) * 3.25);
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  gap: calc(var(--ru) * 2);
}

.state-starting .content-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}

.starting-state-header {
  position: absolute;
  top: calc(var(--ru) * 5.06);
  left: calc(var(--ru) * 3.5);
  width: 50%;
  margin: 0;
  font-weight: 400;
  font-size: calc(var(--ru) * 3.75);
  font-family: SeroOffc, sans-serif;
  color: white;
  z-index: 2;
  text-align: left;
  line-height: calc(var(--ru) * 3.94);
}

.starting-state-image {
  position: absolute;
  right: 0;
  top: 0;
  width: 60%;
  height: 100%;
  object-fit: contain;
  border-top-right-radius: calc(var(--ru) * 3.25);
  border-bottom-right-radius: calc(var(--ru) * 3.25);
}

.state-starting .progress-bar {
  position: absolute;
  bottom: calc(var(--ru) * 6);
  left: 50%;
  transform: translateX(-50%);
  width: 45%;
}

.content-carousel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.carousel-image {
  width: calc(var(--ru) * 30.5);
  margin-bottom: calc(var(--ru) * 1);
}

.carousel-header {
  margin: 0;
  margin-bottom: calc(var(--ru) * 0.3);
  font-size: calc(var(--ru) * 1.4);
  font-family: SeroOffc, sans-serif;
  font-weight: 350;
  color: white;
  text-align: left;
  line-height: 1.1em;
  letter-spacing: -0.3px;
}

.carousel-body {
  margin: 0;
  font-size: calc(var(--ru) * 1);
  font-family: SeroOffc, sans-serif;
  font-weight: 350;
  color: white;
  text-align: left;
  line-height: 1.1em;
  letter-spacing: -0.3px;
}

.content-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
}

.logo {
  width: calc(var(--ru) * 9);
  margin-bottom: calc(var(--ru) * 0.98);
  margin-left: calc(var(--ru) * 2);
  margin-top: calc(var(--ru) * 9.28);
}

.queued-state-header,
.launching-state-header {
  margin: 0;
  margin-bottom: calc(var(--ru) * 1);
  margin-left: calc(var(--ru) * 2);
  font-size: calc(var(--ru) * 2.3);
  font-family: SeroOffc, sans-serif;
  font-weight: 500;
  line-height: 1.1em;
  letter-spacing: -0.3px;
  color: white;
  text-align: left;
}

.launching-state-header {
  margin: 0;
  margin-bottom: calc(var(--ru) * 9.7);
  margin-left: calc(var(--ru) * 2);
}

.queued-state-body {
  margin: 0;
  margin-bottom: calc(var(--ru) * 5.62);
  margin-left: calc(var(--ru) * 2);
  font-size: calc(var(--ru) * 1.4);
  font-weight: 350;
  max-width: 80%;
}

.progress-bar {
  width: 100%;
}

.progress-bar progress {
  display: block;
  width: 100%;
  height: calc(var(--ru) * 1.125);
  border: 0;
  border-radius: calc(var(--ru) * 0.8);
  -webkit-appearance: none;
  appearance: none;
  /* Firefox background */
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 0px calc(var(--ru) * 0.3) rgba(119, 119, 119, 0.5) inset;
}

.progress-bar progress::-webkit-progress-bar {
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: calc(var(--ru) * 0.8);
  box-shadow: 0px 0px calc(var(--ru) * 0.3) rgba(119, 119, 119, 0.5) inset;
}

.progress-bar progress::-webkit-progress-value {
  height: 100%;
  background: white;
  border-radius: calc(var(--ru) * 0.8);
  box-shadow: 0px 0px calc(var(--ru) * 0.3) white inset;
}

.progress-bar progress::-moz-progress-bar {
  background: white;
  border-radius: calc(var(--ru) * 0.8);
  box-shadow: 0px 0px calc(var(--ru) * 0.3) white inset;
}

.state-error .content-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--ru) * 2);
}

.error-icon {
  color: white;
  width: calc(var(--ru) * 5);
  height: calc(var(--ru) * 5);
}

.error-state-body {
  margin: 0;
  font-size: calc(var(--ru) * 1.8);
  font-weight: 500;
  text-align: center;
  line-height: 1.3em;
  max-width: 80%;
}

.fullscreen-button {
  position: absolute;
  bottom: max(calc(var(--ru) * 2.75), calc((100vh - 56.25vw) / 2 + calc(var(--ru) * 2.75)));
  right: max(calc(var(--ru) * 3), calc((100vw - 177.78vh) / 2 + calc(var(--ru) * 3)));
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--ru) * 0.5);
  z-index: 1000;
  user-select: none;
  pointer-events: all;
  -webkit-tap-highlight-color: transparent;
}

.fullscreen-button svg {
  width: calc(var(--ru) * 3.75);
  height: calc(var(--ru) * 3.75);
}

.fullscreen-button:hover svg circle {
  fill: #e0e0e0;
}

/* Show enter fullscreen icon when not in fullscreen */
.fullscreen-button .svg-enter-fullscreen {
  display: block;
}

.fullscreen-button .svg-exit-fullscreen {
  display: none;
}

/* Show exit fullscreen icon when in fullscreen */
.fullscreen-button.fullscreen-active .svg-enter-fullscreen {
  display: none;
}

.fullscreen-button.fullscreen-active .svg-exit-fullscreen {
  display: block;
}

.feedback-form-textarea {
  position: fixed;
  z-index: 99;
  background-color: #ffffff;
  color: #000000;
  overflow: hidden;
  resize: none;
  padding: calc(var(--ru) * 1.25);
  border: none;
  font-size: calc(var(--ru) * 2.4);
  font-family: SeroOffc, sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: text;
  top: max(calc(var(--ru) * 22.5), calc((100vh - 56.25vw) / 2 + calc(var(--ru) * 22.5)));
  left: max(calc(var(--ru) * 45), calc((100vw - 177.78vh) / 2 + calc(var(--ru) * 45)));
  right: max(calc(var(--ru) * 12.5), calc((100vw - 177.78vh) / 2 + calc(var(--ru) * 12.5)));
  bottom: max(calc(var(--ru) * 18), calc((100vh - 56.25vw) / 2 + calc(var(--ru) * 18)));
  width: auto;
  height: auto;
}

#feedback-email-field {
  top: max(calc(var(--ru) * 40.78), calc((100vh - 56.25vw) / 2 + calc(var(--ru) * 40.78)));
  left: max(calc(var(--ru) * 15.5), calc((100vw - 177.78vh) / 2 + calc(var(--ru) * 15.5)));
  right: max(calc(var(--ru) * 60.25), calc((100vw - 177.78vh) / 2 + calc(var(--ru) * 60.25)));
  bottom: max(calc(var(--ru) * 11.25), calc((100vh - 56.25vw) / 2 + calc(var(--ru) * 11.25)));
  height: auto;
}

.feedback-form-textarea::placeholder {
  font-style: italic;
}

.feedback-form-textarea:focus {
  outline: 2px solid #000000;
}

.feedback-form-textarea.feedback-form-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* Mobile style overrides */

@media only screen and (pointer: coarse) {
  .idle-state-row {
    gap: calc(var(--ru) * 3.5);
  }

  .state-idle .logo {
    max-height: calc(var(--ru) * 5.5);
    margin-bottom: calc(var(--ru) * 1);
  }

  .idle-state-header {
    font-size: calc(var(--ru) * 6);
    line-height: 1.3em;
  }

  .play-button {
    width: calc(var(--ru) * 12);
    padding: calc(var(--ru) * 1.1) calc(var(--ru) * 1.5);
    font-size: calc(var(--ru) * 1.3);
    border-radius: calc(var(--ru) * 1.1);
    border: calc(var(--ru) * 0.15) solid white;
  }

  .play-icon {
    width: calc(var(--ru) * 1.7);
    margin-left: calc(var(--ru) * 0.5);
  }

  .idle-state-button-row-text {
    font-size: calc(var(--ru) * 4.1);
  }

  /* Scale up content box for better touch interaction */
  .content-box {
    width: calc(var(--ru) * 70);
    height: calc(var(--ru) * 35);
    padding: calc(var(--ru) * 2.5);
    gap: calc(var(--ru) * 2.5);
  }

  .starting-state-header {
    font-size: calc(var(--ru) * 4.5);
    line-height: calc(var(--ru) * 4.8);
  }

  .state-starting .progress-bar {
    bottom: calc(var(--ru) * 9.5);
  }

  .carousel-header {
    margin: 0;
    margin-bottom: calc(var(--ru) * 0.7);
    font-size: calc(var(--ru) * 2);
  }

  .carousel-body {
    font-size: calc(var(--ru) * 1.5);
  }

  .logo {
    margin-top: calc(var(--ru) * 7.7);
  }

  .queued-state-header,
  .launching-state-header {
    font-size: calc(var(--ru) * 2.8);
  }

  .queued-state-body {
    font-size: calc(var(--ru) * 1.7);
  }

  .launching-state-header {
      margin: 0;
      margin-bottom: calc(var(--ru) * 10.2);
      margin-left: calc(var(--ru) * 2);
  }

  /* Larger progress bar for visibility */
  .progress-bar progress {
    height: calc(var(--ru) * 1.5);
  }

  .error-state-body {
    font-size: calc(var(--ru) * 2.2);
  }

  /* Larger fullscreen button for easier touch */
  .fullscreen-button {
    bottom: max(calc(var(--ru) * 3.5), calc((100vh - 56.25vw) / 2 + calc(var(--ru) * 3.5)));
    right: max(calc(var(--ru) * 4), calc((100vw - 177.78vh) / 2 + calc(var(--ru) * 4)));
  }

  .fullscreen-button svg {
    width: calc(var(--ru) * 7);
    height: calc(var(--ru) * 7);
  }

  /* Disable hover states on touch devices to prevent sticky hover */
  .play-button:hover {
    background: none;
  }

  .play-button:hover .play-icon-path {
    fill: white;
    stroke: white;
  }

  .fullscreen-button:hover svg circle {
    fill: none;
  }

  /* Use active states for press feedback instead */
  .play-button:active {
    background: white;
  }

  .play-button:active .play-icon-path {
    fill: black;
    stroke: black;
  }

  .fullscreen-button:active svg circle {
    fill: #e0e0e0;
  }
}