:root {
  --bg-color: #0f1014;
  --text-color: #2c2c2c; /* Dark text for the light paper */
  --accent-color: #ff3e3e;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html {
  width: 100%;
  height: 100svh;
  background-color: var(--bg-color);
  font-family: 'Inter', sans-serif;
  overflow: hidden; /* Default to hidden */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Landscape Mode on Mobile specific overscale */
@media (max-height: 500px) and (orientation: landscape) {
  body, html {
    overflow-y: auto !important; 
    align-items: flex-start !important; 
  }

  .scene {
    height: auto !important;
    min-height: 100svh !important;
    padding: 0 !important; 
    justify-content: flex-start !important; 
    gap: 0 !important; 
  }

  .ticket-wrapper {
    width: 100vw !important;
    flex-shrink: 0 !important;
    /* Massive negative margin slicing off the baked transparent padding at the TOP of the image */
    margin-top: -6vw !important; 
    margin-bottom: 0 !important; 
  }

  .bottom-bar {
    width: 100vw !important;
    height: 16vw !important; 
    flex-shrink: 0 !important;
    /* -19vw gently eases the brutal overlap down by roughly 2-4 pixels to find the sweet spot */
    margin-top: calc(-19vw + 3px) !important; 
    margin-bottom: 4vw !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1vw !important; 
  }

  .bottom-logo {
    position: relative !important; 
    left: auto !important;
    right: auto !important;
    height: 14vw !important; 
    max-width: 30vw !important;
  }

  .submit-btn img {
    height: 18vw !important; 
    max-width: 50vw !important;
  }
}



/* 3D Scene */
.scene {
  container-type: size;
  width: 100vw;
  height: 100svh;
  perspective: 1800px; /* 3D depth */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0; /* Removing gap to allow maximum growth */
}

/* Force Landscape by rotating the scene in portrait mode */
@media (orientation: portrait) {
  .scene {
    position: absolute;
    width: 100dvh; 
    height: 100vw; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
  }
  
  .ticket-wrapper {
    width: 215vw !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    flex-shrink: 0 !important;
    margin: 0 !important; 
  }
  
  .bottom-bar {
    /* Pin the button container firmly inside the physical bounds at the very edge */
    position: absolute !important;
    bottom: calc(1vw - 3px) !important; 
    left: 50% !important; 
    transform: translateX(-50%) !important; 
    
    /* Using auto physically shrinks the bounding box so the 3 items cluster perfectly in the center, totally missing the Safari chrome! */
    width: auto !important;
    height: auto !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important; 
    gap: 6vw !important; 
    z-index: 999 !important;
  }

  .bottom-logo {
    position: relative !important;
    height: 14vw !important; 
    max-width: 33vw !important;
    left: auto !important;
    right: auto !important;
  }

  .submit-btn img {
    height: 28vw !important; 
    max-width: 55vw !important;
  }
}

/* Ticket Container Wrapper */
.ticket-wrapper {
  position: relative;
  /* Dynamically constrain the width so the 16/9 ratio perfectly fits within 95vw OR 85svh */
  width: min(95cqw, calc(85cqh * 16 / 9)); 
  aspect-ratio: 16 / 9;
  perspective: 1800px;
  container-type: inline-size;
}

/* Ticket Container */
.ticket {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  cursor: pointer;
  z-index: 10;
}

/* Ticket Faces */
.ticket-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Hides back when flipped */
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  background-color: transparent;
}

.ticket-bg {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

/* Front specific */
.ticket-front {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateY(0deg);
}

/* Back specific (Requires 180deg flip initially to face wrong way) */
.ticket-back {
  transform: rotateY(180deg);
  display: block; /* Remove flex to avoid alignment conflicts */
  cursor: default; 
}

/* Form Styles */
.form-container {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

#ticket-form {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.form-group {
  position: absolute;
  left: 18.5%;
  width: 58%;
  pointer-events: auto;
}

.form-group:nth-child(1) { top: 37.5%; }
.form-group:nth-child(2) { top: 47.5%; }
.checkbox-group {
  top: 55.5%;
  display: flex;
  align-items: center;
  gap: 0.8cqw;
}

/* Mobile-specific adjustments to fix text baseline and wrapping overlap */
@media (max-width: 1024px), (orientation: portrait) {
  .form-group:nth-child(1) { top: 34.5%; }
  .form-group:nth-child(2) { top: 44.5%; }
  .checkbox-group { top: 52.5%; }
}
.checkbox-group input {
  width: 1.33cqw;
  height: 1.33cqw;
}
.checkbox-group label {
  font-family: 'Inter', sans-serif;
  font-size: 0.9cqw;
  text-transform: none;
  font-weight: 500;
  color: #555;
  margin: 0;
}

label {
  font-family: 'Space Mono', monospace;
  font-size: 0.8cqw;
  text-transform: uppercase;
  color: var(--text-color);
  margin-bottom: 0.4cqw;
  font-weight: 700;
}

input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif !important;
  font-size: 1.7cqw;
  color: #555555;
  font-weight: 600 !important;
  text-align: left !important;
}

input:focus, input:focus-visible, input:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

input::placeholder {
  color: #888888;
  opacity: 1;
}

.bottom-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(95cqw, calc(85cqh * 16 / 9)); /* Exacly matches the ticket wrapper width for edge-aligned logos */
  height: 16cqh; /* Expanded for massive high-vis logos */
  margin-top: -10cqh; /* aggressively pull up under the transparent padding of the ticket */
  position: relative;
  z-index: 100;
}

.bottom-logo {
  position: absolute;
  height: 100%; /* Perfectly fill the 12svh container */
  max-width: 30cqw;
  object-fit: contain;
}

.bottom-logo.left {
  left: 0;
}

.bottom-logo.right {
  right: 0;
}

.submit-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s;
  display: flex;
  align-items: center;
}

.submit-btn img {
  height: 20cqh; /* Massively punchy center button */
  max-width: 40cqw; /* Prevent image stretching horizontally if wrapper breaks */
  object-fit: contain;
}

.confirmed-msg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
}

.confirmed-msg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  z-index: 1;
}

.submit-btn:hover {
  transform: translateY(-2px);
}

.submit-btn:active {
  transform: translateY(0);
}

/* Stamp Graphic */
.stamp {
  position: absolute;
  top: 42%;
  left: 77%;
  transform: translate(-50%, -50%) scale(5); /* start large and invisible */
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transform-origin: center center;
  width: 16cqw;
}