/* Global reset for layout: make the app fill the viewport and remove
   stray margins/padding that produced extra whitespace around the pages */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Inter, sans-serif;
  background-color: #000;
  color: #fff;
}

/* Top bar/header visible on desktop and mobile */
#topBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Desktop: make the top bar taller and add symmetric vertical padding
    so the visual height is 80px and there's 30px of space above and
    below the inner content. Using border-box (global) means padding
    is included in the specified height. */
  height: 80px;
  padding: 30px 0;
  background: #000;
  color: #fff;
  display: flex;
  /* center content vertically within the available content area */
  align-items: center;
  z-index: 10000;
  /* visible white separator line at the bottom of the top bar */
  border-bottom: 1px solid #fff;
}

/* Inverted / light variant used on message & final screens so the top bar
   transitions from dark-background / white text to white-background /
   black text (and black separator). The class `light` is toggled from JS. */
#topBar.light {
  background: #fff;
  color: #000;
  border-bottom-color: #000;
}

/* Smooth transitions for background, color and border when toggling variants */
#topBar,
#topBar.light {
  transition: background-color 320ms var(--page-fade-easing), color 320ms var(--page-fade-easing), border-color 320ms var(--page-fade-easing);
}

.topbar-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 50px; /* restore side padding to 50px */
  box-sizing: border-box;
}

.topbar-title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Position the small topbar label 50px from the viewport left edge */
.topbar-title {
  position: absolute;
  left: 50px;
  /* vertically center the absolute-positioned label inside #topBar */
  top: 50%;
  transform: translateY(-50%);
}

/* Reusable inner container so page elements align with the top bar */
.page-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 50px; /* same side padding as .topbar-inner */
  box-sizing: border-box;
}

/* Prevent the main document from showing a vertical scrollbar caused by
   canvas or absolute elements. Final overlay elements (fixed) can still
   scroll internally because they have their own overflow rules. */
html, body {
  overflow-x: hidden;
  overflow-y: hidden; /* hide document scrollbars so main screen doesn't scroll */
}

/* Make the p5 canvas a block-level, full-viewport element without extra margins */
canvas, #defaultCanvas0 {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

h1 {
  /* ensure the heading sits 50px from the viewport left edge and
     leaves a 30px gap below the top bar's bottom border on desktop.
     The top bar is 80px tall; margin-top = 80 + 30 = 110px. */
  margin: 110px 0 0 50px;
  font-size: 88px; /* larger on desktop to match the reference image */
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.6px;
}

/* Input field */
input {
  position: absolute;
  bottom: 56px; /* raise input so it sits just above the bottom edge like the reference */
  left: 50px;
  width: calc(100% - 196px); /* leave room for the enter control on the right */
  height: 36px;
  /* tighten vertical padding so text sits closer to the underline */
  padding: 6px 10px 4px 10px;
  font-size: 16px;
  background: transparent;
  color: #fff;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.9);
  outline: none;
}

input::placeholder {
  color: rgba(255,255,255,0.6);
  font-size: 16px;
}

/* Enter button */
button {
  position: absolute;
  /* vertically center-align the button with the input box */
  bottom: 54px; /* align with the input's baseline */
  right: 48px;  /* place closer to the right edge like the screenshot */
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 700;
  text-transform: lowercase; /* show 'enter →' as in the provided style */
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

button:hover {
  color: #999;
}

/* Message screen */
#messageScreen {
  position: fixed;
  inset: 0;
  background-color: #fff;
  color: #000;
  font-family: Inter, sans-serif;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  font-weight: 600;
  text-align: center;
}

#spotifyLinkDisplay {
  font-size: 18px;
  margin-top: 20px;
  color: #1DB954; /* Spotify green */
  text-decoration: none;
}

#spotifyLinkDisplay:hover {
  text-decoration: underline;
}

/* Animate the message text while the message screen is visible. The text
   will fade in and out (soft pulse) to indicate loading/wait state. */
.message-text {
  /* slower, gentler fade pulse (opacity only). No movement. */
  animation: sr-pulse 2200ms ease-in-out infinite;
  opacity: 0.95; /* slightly translucent so pulse looks soft */
  line-height: 1.05;
}

@keyframes sr-pulse {
  0% { opacity: 0.18; }
  50% { opacity: 1; }
  100% { opacity: 0.18; }
}

/* Utility for screen-reader-only text */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Back button */
/* Back button removed from message screen; styles kept elsewhere for final screen */

/* Final screen card */
/* Reusable page/screen fade helper. Use `.screen` on any full-viewport overlay and
   toggle the `.visible` class from JS to fade it in. While hidden the element
   is not interactive (pointer-events:none) and is visually hidden (opacity:0).
   The `transition` animates opacity and a small translate for a soft motion. */
:root {
  --page-fade-duration: 420ms;
  --page-fade-easing: cubic-bezier(.2,.9,.2,1);
}

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  z-index: 1000;
  overflow-y: auto;
  /* make the overlay itself visibly distinct from the dark app background */
  background-color: rgba(245,245,245,0.98);
  color: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--page-fade-duration) var(--page-fade-easing), transform calc(var(--page-fade-duration) / 1.4) var(--page-fade-easing);
  will-change: opacity, transform;
}



.screen.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}

#finalScreen {
  /* keep screen-specific background and content sizing, but visibility is
     handled by the .screen / .visible / .hidden classes above */
  background-color: #f5f5f5; /* light card background */
}



.final-card {
  background-color: #fff;
  border-radius: 12px;
  /* Slightly more generous desktop padding and spacing so the card
     looks larger on larger viewports. Mobile rules below will override
     when necessary. */
  padding: 28px 48px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px; /* larger card on desktop */
  width: 80%;
}

.final-card iframe {
  width: 100%;
  /* larger embed for desktop tracks by default */
  height: 240px;
  border: none;
  margin-bottom: 0;
}

/* Make playlist embeds taller so the Spotify player shows full controls */
.final-card.playlist iframe {
  /* playlists are larger to show full controls */
  height: 500px;
}

.final-card h2 {
  margin: 0 0 6px 0;
  font-size: 20px;
  font-weight: 600;
}

.final-card p {
  margin: 5px 0;
  font-size: 16px;
  color: #555;
}

.final-card a button {
  margin-top: 0; /* ensure no extra top gap when button is inside card */
  padding: 14px 24px; /* larger tappable area on desktop */
  background: #1DB954;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-transform: none; /* preserve capitalization for 'Open Spotify' */
  font-size: 16px; /* larger button text on desktop */
}

/* Force minimal spacing between iframe and action button inside the card.
   Use !important to override any inline styles or earlier rules that may add
   extra spacing. This applies to desktop and mobile unless a media query
   overrides it further below. */
.final-card iframe { margin-bottom: 2px !important; }
.final-card > a { margin-top: 0 !important; }
.final-card > a button { margin-top: 0 !important; }
.final-card p { margin-top: 4px !important; }

.final-card a button:hover {
  background: #17a74a;
}

/* Center and pin the open-spotify button to the bottom of the card */
.final-card {
  /* allow the card to size to its content so the button sits closer to the widget */
  min-height: 0;
  padding-bottom: 16px; /* slightly reduced bottom padding */
}

.final-card.playlist {
  /* playlist embeds are taller; but don't force a huge min-height */
  min-height: 0;
}

/* Action area that sits directly below the card and centers the button */
.final-action {
  margin-top: 12px;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* When the open button is placed inside the card, make it sit at the card bottom */
.final-card > a {
  margin-top: 8px; /* small gap above button */
  width: 100%;
  display: flex;
  justify-content: center;
}

.final-card > a button {
  margin: 0 0 6px 0; /* small bottom gap */
}

/* Make the open-spotify button span the same width as the iframe inside the card */
.final-card > a {
  box-sizing: border-box;
  padding: 0 0; /* keep it flush with card content area */
}

.final-card > a button,
.final-card a button {
  width: 100%;
  max-width: none;
  text-align: center;
  padding: 12px 16px;
  font-weight: 600;
  border-radius: 6px;
}

.final-action a button {
  padding: 10px 20px;
  background: #1DB954;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.final-action a button:hover {
  background: #17a74a;
}

/* Back-to-home button placed bottom-left of the final screen */
.final-back {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 9999;
}

.final-back button {
  /* mirror the style used by #backButton on the message screen */
  padding: 8px 12px;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #000;
  position: static; /* ensure it participates in layout inside .final-back */
}

.final-back button:hover {
  color: #555;
}

/* Inline validation error shown above the input field */
/* error message sits just under the input underline */
#errorMessage {
  position: absolute;
  /* place the error message directly below the input underline (desktop) */
  bottom: 36px; /* sit just under the input underline */
  left: 50px;
  color: rgba(255,255,255,0.85); /* soft white text */
  background: transparent;
  border: none;
  padding: 6px 0 0 0;
  font-size: 12px;
  display: none;
  max-width: calc(100% - 160px);
}

/* Override generic absolute positioning for buttons inside final UI so they
   behave like normal flow elements (this prevents the open-spotify button
   from being pinned to the viewport bottom-right). */
.final-card button,
.final-action button {
  position: static;
  right: auto;
  bottom: auto;
}

/* Preserve capitalization for buttons inside the final UI (override global lowercase) */
.final-card button,
.final-action a button,
.final-card > a button {
  text-transform: none;
}

/* Ensure any global button resets don't remove our styling for the final button */
.final-action button {
  display: inline-block;
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  h1 {
    font-size: 46px;
    /* topBar (60px) + desired gap (24px) = 84px margin-top on mobile */
    margin: 84px 20px 0 28px; /* mobile inset set to 28px */
  }

  /* adjust top bar for smaller screens: set mobile bar height to 60px
    and keep the label vertically centered (desktop padding is cleared) */
  #topBar { padding: 0; height: 60px; align-items: center; }
  .topbar-title { font-size: 12px; }

  /* Move input/button into fixed bottom positions suitable for phones/tablets */
  input {
    position: fixed;
    left: 28px;
    right: 120px;
    bottom: 64px; /* increased gap on tablet/mobile */
    width: calc(100% - 148px); /* account for left 28 + right 120 */
    height: 44px;
    padding: 10px 12px;
    font-size: 14px;
  }

  /* smaller placeholder text for mobile */
  input::placeholder {
    font-size: 12px;
  }

  button {
    position: fixed;
    right: 16px;
    /* center-align the button vertically with the input (both 44px height) */
    bottom: 64px;
    height: 44px;
    padding: 0 12px;
  }

  #errorMessage {
    left: 28px;
    /* place error below the mobile input underline (input bottom = 64px) */
    bottom: 44px;
    max-width: calc(100% - 120px);
    font-size: 12px;
  }
  /* ensure topbar label also moves on mobile */
  .topbar-title { left: 28px; }

  .final-card {
    max-width: 360px;
    width: 92%;
    padding: 16px 20px;
  }

  .final-card.playlist iframe {
    height: 300px;
  }
}

@media (max-width: 420px) {
  h1 {
    font-size: 36px;
    /* keep left/right insets but increase top margin so gap to top bar is 24px */
    margin: 84px 16px 0 28px;
  }

  /* smaller top bar text on very small screens: keep the mobile height
    consistent with other mobile breakpoints while reducing text size */
  #topBar { padding: 0; height: 60px; align-items: center; }
  .topbar-title { font-size: 10px; }

  input {
    left: 28px;
    right: 110px;
    width: calc(100% - 138px);
    height: 46px;
    bottom: 48px; /* increased gap on very small screens */
    font-size: 14px;
    /* even smaller placeholder on very small screens */
    --mobile-placeholder-size: 12px;
  }

  button {
    padding: 0 10px;
    font-size: 14px;
    bottom: 48px; /* match input bottom on very small screens */
  }

  /* final-screen button smaller on very small screens */
  .final-card a button,
  .final-card > a button,
  .final-card button,
  .final-action a button {
    font-size: 12px;
  }

  /* error message position for very small screens - sit below underline */
  #errorMessage {
    left: 28px;
    bottom: 28px; /* below input underline (input bottom = 48px) */
    font-size: 12px;
    max-width: calc(100% - 120px);
  }

  /* ensure topbar label also moves on very small screens */
  .topbar-title { left: 28px; }

  /* Make the final-screen heading smaller on very small screens */
  /* Force a smaller heading for the final card on very small devices.
     Use a more specific selector and !important to ensure this overrides
     any other stylesheet rules or inline styles that may be applied. */
  #finalScreen .final-card h2 {
    font-size: 16px !important;
    line-height: 1.1 !important;
    margin: 4px 0 6px 0 !important;
    font-weight: 600 !important;
  }

  /* Also apply for slightly larger small devices if devicePixelRatio causes
     the viewport width to be reported differently. */
  @media (max-width: 480px) {
    #finalScreen .final-card h2 {
      font-size: 12px !important;
    }
  }

  /* Add horizontal padding so the heading doesn't touch the edges on very
     small screens. This creates visible margins on both sides of the text. */
  #finalScreen .final-card h2 {
    padding: 0 24px !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
  }

  /* Additional visual tuning: increase the heading size and add large
     vertical padding inside the card so the heading appears centered and
     spaced like the provided screenshot. These values are mobile-only. */
  /* Reduce the top/bottom padding on very small screens so the card
     doesn't have excessive white space. Kept slightly roomy for visual
     breathing but much smaller than before. */
  #finalScreen .final-card {
    padding: 24px 16px !important; /* tighter top & bottom padding */
    max-width: 360px !important;
    width: calc(100% - 32px) !important;
  }

  #finalScreen .final-card h2 {
    font-size: 16px !important; /* mobile heading size adjusted to 16px */
    line-height: 1.05 !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 12px !important;
    word-break: break-word !important;
  }

  .final-card.playlist iframe {
    height: 260px;
  }

  /* Reduce the vertical gap between the track iframe and the Open Spotify
     button on small screens so content feels more compact. Make it tighter: */
  .final-card > a {
    margin-top: 0 !important;
  }

  /* tighten small caption spacing when present */
  .final-card p {
    margin-top: 4px;
    font-size: 10px;
  }

  /* Track embeds on small screens should be smaller to fit the viewport */
  .final-card iframe {
    height: 180px;
  }
}