:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: #021427;
  overflow: hidden;
  font-family: 'Alata', sans-serif;
}

.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #021427;
}

/* Scale the whole 1920x1080 composition as one rigid unit (never distort
   per-axis) -- COVER the viewport instead of fitting inside it (max(), not
   min()), so .slide always fully fills the window with zero letterbox bars.
   The internal 16:9 coordinate system (every %-based position, the screen
   clip-path, button placement) stays exactly correct either way since
   .slide itself is still rendered at a true 16:9 ratio -- it's just scaled
   up and center-cropped by .stage's overflow:hidden on non-16:9 windows,
   trimming the outer decorative edges rather than shrinking to fit and
   leaving a visible boundary against the background. Desktop/laptop
   monitors only (16:9, 16:10, ultrawide, 4:3 etc.); phone/tablet portrait
   is explicitly out of scope. */
.slide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1920 / 1080;
  width: max(100vw, calc(100vh * 1920 / 1080));
  height: max(100vh, calc(100vw * 1080 / 1920));
  overflow: hidden;
  background: #021427;
  container-type: inline-size;
}

/* Pinned to .stage (the real viewport) directly, not .slide -- so it
   never scales, crops, or dims with the cabinet composition underneath.
   z-index is above everything, including the popup overlay. */
.header {
  position: absolute;
  z-index: 1000;
  margin: 0;
  color: #e3fae0;
  font-family: 'Alata', sans-serif;
  font-weight: 400;
  font-size: 1.0417vw;
  line-height: 1.25;
}

.header--left {
  left: 0.3646%;
  top: 0.3704%;
  width: 48.8021%;
}

.header--right {
  right: 0.7813%;
  top: 0.463%;
  width: 39.8438%;
  text-align: right;
}

/* Very subtle darkening strip along the real viewport's top edge, purely
   to keep the pinned header text readable over whatever's behind it --
   sits below the header (z-index) but above the cabinet composition. */
.top-vignette {
  position: absolute;
  inset: 0 0 auto 0;
  height: 9%;
  z-index: 900;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.machine {
  position: absolute;
  left: 4.5313%;
  top: 0;
  width: 90.8854%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.logo {
  position: absolute;
  left: 26.9271%;
  top: 9.9074%;
  width: 4.4885%;
  height: 7.5%;
  pointer-events: none;
  user-select: none;
  /* sits partly over the curved glass -- full-bleed carousel thumbnails
     paint later in the DOM (.screen-clip) and would otherwise cover it */
  z-index: 4;
}

.title-box {
  position: absolute;
  left: 30.3646%;
  top: 33.8889%;
  width: 39.2708%;
  height: 14.4444%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-box img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.joystick-btn {
  position: absolute;
  top: 64.7222%;
  width: 10.5227%;
  height: 24.7222%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 5;
}

.joystick-btn:hover:not(.is-disabled) .joystick-part {
  filter: brightness(1.15);
}

.joystick-btn:focus-visible {
  outline: 3px solid #98e7df;
  outline-offset: 4px;
  border-radius: 50%;
}

.joystick-btn.is-disabled {
  cursor: default;
}

.joystick-btn--left {
  left: 24.8958%;
}

.joystick-btn--right {
  left: 63.6458%;
}

.joystick-part {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

/* Pivot sits where the stick plugs into the base disc, so the ball
   swings but the stick's foot stays anchored over the base. */
.joystick-top {
  transform-origin: 50% 66.7%;
}

.joystick-btn.is-pushing-right .joystick-top {
  animation: pushRight 0.42s ease;
}

.joystick-btn.is-pushing-left .joystick-top {
  animation: pushLeft 0.42s ease;
}

.joystick-btn.is-refusing .joystick-top {
  animation: refuse 0.3s ease;
}

@keyframes pushRight {
  0% { transform: rotate(0deg); }
  55% { transform: rotate(24deg); }
  100% { transform: rotate(0deg); }
}

@keyframes pushLeft {
  0% { transform: rotate(0deg); }
  55% { transform: rotate(-24deg); }
  100% { transform: rotate(0deg); }
}

@keyframes refuse {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(8deg); }
  60% { transform: rotate(-8deg); }
}

.arcade-button {
  position: absolute;
  left: 44.2708%;
  top: 80.8333%;
  width: 10.4688%;
  height: 8.269%;
  pointer-events: none;
  user-select: none;
}

.screen-list {
  position: absolute;
  left: 50%;
  top: 30.2778%;
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  font-family: 'Alata', sans-serif;
  font-weight: 400;
  font-size: 1.6667cqw;
  line-height: 2.9688cqw;
  color: #063e79;
  text-align: center;
  white-space: nowrap;
}

.screen-list p {
  margin: 0;
}

/* Big bold gradient heading, e.g. "SDG 14 TARGETS" / "CREDIT" / "REFERENCE" */
.screen-heading {
  position: absolute;
  left: 50%;
  top: 22.9599%;
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 3.125cqw;
  line-height: 4.4792cqw;
  letter-spacing: -0.09375cqw;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  background-image: linear-gradient(-73.64deg, #021427 1.65%, #07488d 98.35%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Higher position for the heading on pages without a body paragraph below, e.g. Credit/Reference */
.screen-heading--top {
  top: 15.1389%;
}

/* Two-line variant of the bold heading, e.g. "SDG GOAL 14 / (LIFE BELOW WATER)" */
.screen-heading-lines {
  position: absolute;
  left: 50%;
  top: 22.9599%;
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 3.125cqw;
  line-height: 4.4792cqw;
  letter-spacing: -0.09375cqw;
  text-align: center;
  text-transform: uppercase;
  background-image: linear-gradient(-73.64deg, #021427 1.65%, #07488d 98.35%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.screen-heading-lines p {
  margin: 0;
  white-space: nowrap;
}

/* Centered block anchored to its own midpoint, e.g. the SDG 14 goal statement */
.screen-subtext-centered {
  position: absolute;
  left: 50%;
  top: 53.7083%;
  transform: translate(-50%, -50%);
  width: 38.75%;
  margin: 0;
  font-family: 'Alata', sans-serif;
  font-weight: 400;
  font-size: 2.0833cqw;
  line-height: 2.9167cqw;
  color: #042b54;
  text-align: center;
}

/* Centered body paragraph under the "SDG 14 TARGETS" heading, e.g. each
   14.1-14.5 target statement (node 180:203 etc.) -- top is set per instance
   inline since it drifts a few px per target depending on line count in
   Figma's own layout; centering/width/font here are shared and confirmed
   consistent across all five. */
.screen-body {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 32.9630%;
  width: 47.0313%;
  margin: 0;
  font-family: 'Alata', sans-serif;
  font-weight: 400;
  font-size: 1.6667cqw;
  line-height: 2.9688cqw;
  color: #042b54;
  text-align: left;
}

/* Centered italic quote -- values pulled directly from Figma (node 180:124),
   corrected from an earlier estimate that didn't match (wrong top/weight/
   size/line-height, missing letter-spacing) */
.screen-quote {
  position: absolute;
  left: 50%;
  top: 25.5509%;
  transform: translateX(-50%);
  width: 41.1979%;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 3.125cqw;
  line-height: 4.4792cqw;
  letter-spacing: -0.09375cqw;
  color: #042b54;
  text-align: center;
}

.screen-quote-author {
  position: absolute;
  left: 65.1302%;
  top: 51.2963%;
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  font-family: 'Alata', sans-serif;
  font-weight: 400;
  font-size: 1.6667cqw;
  line-height: 2.9688cqw;
  color: #042b54;
  text-align: center;
  white-space: nowrap;
}

/* Centered two-line italic black heading, e.g. section dividers -- values
   pulled directly from Figma (node 189:89), corrected from an earlier
   estimate that didn't match (wrong top/size/line-height, missing
   letter-spacing) */
.screen-title-italic {
  position: absolute;
  left: 50%;
  top: 30.8361%;
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 3.125cqw;
  line-height: 4.4792cqw;
  letter-spacing: -0.09375cqw;
  color: #042b54;
  text-align: center;
  white-space: nowrap;
}

.screen-title-italic p {
  margin: 0;
}

/* Full-width left-aligned paragraph starting near the top, e.g. slide 24 */
/* Reference page: a single wrapping citation (not the short nowrap name
   list .screen-list uses for the Credit page) */
.screen-reference {
  position: absolute;
  left: 50%;
  top: 30.2778%;
  transform: translateX(-50%);
  width: 50%;
  margin: 0;
  font-family: 'Alata', sans-serif;
  font-weight: 400;
  font-size: 1.6667cqw;
  line-height: 2.9688cqw;
  color: #063e79;
  text-align: left;
}

.screen-paragraph {
  position: absolute;
  left: 50%;
  top: 19.8148%;
  transform: translateX(-50%);
  width: 44.7396%;
  margin: 0;
  font-family: 'Alata', sans-serif;
  font-weight: 400;
  font-size: 1.6667cqw;
  line-height: 2.9688cqw;
  color: #063e79;
  text-align: left;
}

/* Centered bold team name under the "CREDIT" heading */
.screen-team-name {
  position: absolute;
  left: 50%;
  top: 23.3306%;
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 2.6042cqw;
  line-height: 4.4792cqw;
  letter-spacing: -0.078125cqw;
  color: #063e79;
  text-align: center;
  white-space: nowrap;
}

.screen-list--credit {
  top: 33.0528%;
}

/* ============================================================
   Single-page shell: one persistent cabinet, content swapped
   inside the curved screen via app.js instead of one .html per
   slide. The clip-path below is the real "Vector 23" screen
   shape traced from Figma (node 163:11), normalized against the
   full 1920x1080 slide -- so every .screen-* class above keeps
   working unmodified (their percentages were already authored
   against the full slide, confirmed against Figma directly for
   .title-box) and just gets cropped to the curved glass instead
   of spilling past it.
   ============================================================ */

.screen-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: url(#seaventureScreenClip);
}

.screen-content {
  position: absolute;
  inset: 0;
}

.page-panel {
  position: absolute;
  inset: 0;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.page-panel.is-leaving-left  { opacity: 0; transform: translateX(-6%); }
.page-panel.is-leaving-right { opacity: 0; transform: translateX(6%); }
.page-panel.is-enter-from-left  { opacity: 0; transform: translateX(-6%); transition: none; }
.page-panel.is-enter-from-right { opacity: 0; transform: translateX(6%); transition: none; }

/* -- game-select carousel: each item is its own full-screen panel --
   Centered on the CURVED SCREEN's own bounding box (from the clip-path
   trace), not the full slide -- the curve's top cap makes its visual
   center sit above the slide's geometric center, so centering on inset:0
   (the full slide) put content noticeably too low relative to the glass. */
.carousel-item {
  position: absolute;
  left: 23.2846%;
  top: 4.2578%;
  width: 53.4489%;
  height: 70.0926%;
  padding: 0 6%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2%;
  text-align: center;
}

.carousel-item .item-emoji {
  font-size: 10cqw;
  line-height: 1;
}

/* Real exported thumbnails fill the whole curved screen edge-to-edge --
   no padding/label, just the artwork (the clip-path on #screenContent
   still crops it to the curve's actual shape). */
.carousel-item.has-thumb {
  padding: 0;
  gap: 0;
}

.carousel-item .item-thumb-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-item .item-label {
  width: 100%;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 3.2cqw;
  text-transform: uppercase;
  letter-spacing: 0.05cqw;
  color: #021427;
}

.carousel-item.kind-exit .item-emoji,
.carousel-item.kind-exit .item-label { color: #063e79; }

/* Random's "?" and label match the gradient text treatment used
   elsewhere (screen-heading, the idle prompt) instead of a flat color. */
.carousel-item.kind-random .item-emoji,
.carousel-item.kind-random .item-label {
  background-image: linear-gradient(-73.64deg, #021427 1.65%, #07488d 98.35%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.select-track.is-spinning .carousel-item { transition: none; }

/* -- idle prompt shown on the game-select page before browsing -- */
.idle-prompt {
  position: absolute;
  left: 23.2846%;
  top: 4.2578%;
  width: 53.4489%;
  height: 70.0926%;
  padding: 0 6%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5%;
}

.idle-prompt .prompt-label {
  width: 100%;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 3.4cqw;
  letter-spacing: -0.05cqw;
  text-align: center;
  text-transform: uppercase;
  background-image: linear-gradient(-73.64deg, #021427 1.65%, #07488d 98.35%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: promptPulse 1.6s ease-in-out infinite;
}

.idle-prompt .prompt-hint {
  width: 100%;
  margin: 0;
  font-family: 'Alata', sans-serif;
  font-size: 1.4cqw;
  text-align: center;
  color: #063e79;
  opacity: 0.8;
}

@keyframes promptPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* -- arcade center button: base (static) + dome (presses down) -- */
/* Base's own box matches base.svg's true aspect ratio (201x73.866, from
   Figma node 279:1640) -- it was previously stretched to the OLD combined
   button.svg's taller aspect ratio, which is what made the button look
   oddly placed. Dome is positioned in base-relative % from Figma node
   279:1639: it protrudes above the base's own top edge (negative top),
   which is correct -- that's the dome's natural overlap with the rim. */
.arcade-button-btn {
  position: absolute;
  left: 44.2675%;
  top: 82.2643%;
  width: 10.4688%;
  height: 6.8394%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 6;
}

.arcade-button-btn .btn-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.arcade-button-btn .btn-dome {
  position: absolute;
  left: 11.6617%;
  top: -20.8811%;
  width: 76.7776%;
  height: 64.1703%;
  pointer-events: none;
  user-select: none;
  transform-origin: 50% 100%;
}

.arcade-button-btn:hover .btn-dome { filter: brightness(1.1); }

.arcade-button-btn.is-pressed .btn-dome {
  animation: domePress 0.22s ease;
}

@keyframes domePress {
  0% { transform: translateY(0); }
  40% { transform: translateY(16%); }
  100% { transform: translateY(0); }
}

/* -- popup: fullscreen-ish 16:9 reveal for a selected generative art
   piece, dims the whole cabinet (this is the one place allowed to
   break out of the curved-screen clip) -- */
.popup-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 20, 39, 0);
  pointer-events: none;
  transition: background 0.35s ease;
}

.popup-overlay.is-open {
  display: flex;
  background: rgba(2, 20, 39, 0.86);
  pointer-events: auto;
}

.popup-frame {
  position: relative;
  width: 82%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 0.6cqw;
  box-shadow: 0 0 4cqw rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transform: scale(0.92);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.popup-overlay.is-open .popup-frame {
  transform: scale(1);
  opacity: 1;
}

.popup-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: none;
}

.popup-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  font-family: 'Alata', sans-serif;
  color: #e3fae0;
  text-align: center;
  padding: 0 2cqw;
}

.popup-placeholder .ph-title {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 2.4cqw;
  text-transform: uppercase;
}

.popup-placeholder .ph-note {
  font-size: 1.2cqw;
  opacity: 0.7;
  max-width: 70%;
}

.popup-close {
  position: absolute;
  top: 1.5%;
  right: 1.5%;
  width: 2.8cqw;
  height: 2.8cqw;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #e3fae0;
  font-family: 'Alata', sans-serif;
  font-size: 1.6cqw;
  line-height: 1;
  cursor: pointer;
}

.popup-close:hover { background: rgba(255, 255, 255, 0.24); }