/* The phone's look: Vista-style "Aero", made for one hand in a dim room.
   A dark glass window on the aurora background, with glossy buttons.

   Kept light for weak cell signal: two small font files, one 3 KB
   background, everything else is CSS. No hover effects (phones don't hover).
   Buttons are at least 56px tall. Works from 320px to 430px wide. */

/* VT323: an old computer-terminal pixel font. One small file, no bold
   (font-synthesis: none stops the phone from faking a smeary bold). */
@font-face {
  font-family: "VT323";
  src: url("fonts/vt323.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --font-main: "VT323", "Courier New", monospace;

  --color-text: #eaf4ff;
  --color-text-soft: #a9c4dc;
  --color-heading: #ffffff;

  /* Selection highlight for the chosen strip. */
  --color-select: #3fa9ff;

  /* A blank strip with three 4:3 photo spots (at 3%, 26% and 49% from
     the top), used as a placeholder until real designs exist. */
  --mini-strip:
    linear-gradient(#c3ced8, #9babb9) 50% 3.8% / 84% 21% no-repeat,
    linear-gradient(#c3ced8, #9babb9) 50% 32.9% / 84% 21% no-repeat,
    linear-gradient(#c3ced8, #9babb9) 50% 62% / 84% 21% no-repeat,
    #fff;

  /* Glossy blue button. */
  --button-light: #8fd9ff;
  --button-mid: #2b9be0;
  --button-dark: #0a63b0;
}

/* hidden always wins, even over display: flex on buttons and the tip. */
[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Every screen fits on the phone, so the page itself never scrolls or
   rubber-bands. (The strip picker still swipes sideways on its own.) */
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: #04101f url("images/aurora.svg") center / cover no-repeat fixed;
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 24px;
  line-height: 1.2;
  font-synthesis: none;
}

h1,
p {
  margin: 0;
}

/* ---------- Screens ---------- */

/* Every screen fills the phone; only the active one shows. */
.screen {
  display: none;
  height: 100vh;
  height: 100dvh;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

.screen.active {
  display: flex;
}

.screen.active .window {
  animation: window-open 0.28s ease-out;
}

@keyframes window-open {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Glass window ---------- */

.window {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 7px 7px;
  border: 1px solid rgba(0, 8, 20, 0.85);
  border-radius: 10px 10px 6px 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0, rgba(255, 255, 255, 0.1) 20px, rgba(255, 255, 255, 0) 21px),
    rgba(110, 165, 205, 0.32);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 14px 36px rgba(0, 0, 0, 0.55);
}

.titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 4px;
}

.title-icon {
  width: 24px;
  height: 24px;
}

.title {
  font-size: 22px;
  color: #06101a;
  text-shadow: 0 0 8px #fff, 0 0 14px rgba(255, 255, 255, 0.9);
}

/* The inside of the window: dark glass, easy on the eyes in a dim room. */
.client {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 16px 16px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(8, 20, 36, 0.9), rgba(4, 10, 20, 0.94));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.client-center {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
}

h1 {
  text-wrap: balance;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-heading);
}

.client-center p {
  color: var(--color-text-soft);
  max-width: 280px;
}

/* ---------- Buttons ---------- */

button {
  font: inherit;
  margin: 0;
}

/* Glossy Aero button: lighter top half, darker bottom half. */
.aero-button {
  width: 100%;
  min-height: 56px;
  padding: 12px 20px;
  border: 1px solid #3c3c3c;
  border-radius: 5px;
  background: linear-gradient(180deg, #f6f6f6 0, #e8e8e8 49%, #d6d6d6 50%, #c9c9c9 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
  color: #10181f;
  font-size: 26px;
}

.aero-button.primary {
  border-color: #032c57;
  background: linear-gradient(180deg, var(--button-light) 0, #4fb4ec 49%, var(--button-mid) 50%, var(--button-dark) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 14px rgba(80, 190, 255, 0.45);
  color: #fff;
  font-size: 30px;
  font-weight: 400;
  text-shadow: 0 1px 2px rgba(0, 30, 70, 0.7);
}

/* Pressed: the classic pale-blue pressed look. */
.aero-button:active {
  border-color: #1b4f75;
  background: linear-gradient(180deg, #e5f4fc 0, #c4e5f6 49%, #98d1ef 50%, #68b3db 100%);
  color: #0b2a44;
  text-shadow: none;
}

.link-button {
  align-self: center;
  min-height: 48px;
  padding: 8px 20px;
  border: 0;
  background: none;
  color: #7fc8ff;
  font-size: 24px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-button:active {
  color: #fff;
}

.button-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

/* ---------- Choose a strip ---------- */

/* Sideways-swipe row of strip designs. Its height comes from the screen
   height (not leftover space), so Safari and Chrome size it the same.
   The 320px is roughly everything else on this screen. */
.strip-choices {
  flex: none;
  display: flex;
  gap: 14px;
  height: clamp(220px, calc(100vh - 320px), 560px);
  height: clamp(220px, calc(100dvh - 320px), 560px);
  margin: 0 -16px;
  padding: 12px 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  scrollbar-width: none;
}

.strip-choices::-webkit-scrollbar {
  display: none;
}

/* Each choice: a little picture of the strip, with its name under it. */
.strip-choice {
  position: relative;
  flex: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font-size: 22px;
  scroll-snap-align: start;
  opacity: 0.6;
}

.strip-choice .thumb {
  position: relative;
  flex: none;
  height: calc(100% - 32px);
  aspect-ratio: 1 / 3;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  background: var(--mini-strip);
  overflow: hidden;
}

/* The design's frame, with gray where the photos go. */
.strip-choice .thumb.has-frame {
  background: #9aa9b7;
}

.strip-choice .thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The chosen one gets the blue selection glow and a check. */
.strip-choice.selected {
  opacity: 1;
}

.strip-choice.selected .thumb {
  border-color: var(--color-select);
  box-shadow: 0 0 0 3px rgba(63, 169, 255, 0.45), 0 0 18px rgba(63, 169, 255, 0.6);
}

.strip-choice.selected::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -3px;
  right: 1px;
  width: 7px;
  height: 13px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.strip-choice.selected::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #032c57;
  background: radial-gradient(circle at 50% 30%, #bfeaff, var(--button-mid) 60%, var(--button-dark));
}

.hint {
  margin-top: -8px;
  color: var(--color-text-soft);
  font-size: 20px;
  text-align: center;
}

.hint::after {
  content: " >>";
}

#start-button {
  margin-top: auto;
  min-height: 64px;
  font-size: 36px;
}

/* ---------- Countdown and busy ---------- */

/* Spinning "please wait" ring. */
.busy-ring {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(63, 169, 255, 0) 0deg, rgba(63, 169, 255, 0.15) 120deg, #3fa9ff 300deg, #c9f0ff 360deg);
  animation: spin 1.1s linear infinite;
}

/* The ring's hole, with a little gloss. */
.busy-ring::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 70% 40% at 50% 18%, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 70%),
    #07121f;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.status {
  font-size: 28px;
  color: var(--color-text);
}

/* ---------- Review ---------- */

/* A 2 x 6 strip (1:3). The finished strip image goes in here.
   Sized from the screen height, so the real (tall) strip image can't push
   Retake and "I'm done" off the bottom. The 410px is roughly everything
   else on this screen. */
.strip-thumb {
  align-self: center;
  flex: none;
  height: clamp(150px, calc(100vh - 410px), 560px);
  height: clamp(150px, calc(100dvh - 410px), 560px);
  aspect-ratio: 1 / 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12%;
  background: var(--mini-strip);
  border: 1px solid #9fb3c4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  color: #6b7a88;
  font-size: 20px;
}

.strip-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The real strip: no placeholder behind it. Press and hold saves it. */
.strip-thumb.has-image {
  padding: 0;
  border: 0;
  background: none;
}

/* Pale-blue info bar under the strip. */
.save-tip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #7fb6dc;
  border-radius: 4px;
  background: linear-gradient(180deg, #f3faff 0, #dcefff 100%);
  color: #0d2f4d;
  font-size: 22px;
  line-height: 1.25;
  text-wrap: balance;
}

/* Little glossy "i" bubble. */
.tip-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #0a4f9c;
  background: radial-gradient(circle at 50% 30%, #bfeaff, var(--button-mid) 60%, var(--button-dark));
  color: #fff;
  font-weight: 400;
  font-size: 22px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* ---------- Expired ---------- */

.dialog-icon {
  width: 84px;
  height: 84px;
}

/* ---------- Video ---------- */

/* Room on the review screen for the "Watch your video" button (about 70px). */
.has-video .strip-thumb {
  height: clamp(150px, calc(100vh - 480px), 560px);
  height: clamp(150px, calc(100dvh - 480px), 560px);
}

.aero-button:disabled {
  opacity: 0.6;
}

/* When the video is ready the button turns glossy blue and pops. */
#video-button {
  font-size: 24px;
}

#video-button.surprise {
  animation: surprise-pop 0.6s ease-out;
}

@keyframes surprise-pop {
  from { transform: scale(0.6) rotate(-4deg); }
  70% { transform: scale(1.08) rotate(1.5deg); }
  to { transform: none; }
}

/* The Download link looks like the other glossy buttons. */
a.aero-button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Widescreen, like the camera. */
.clip {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid #9fb3c4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ---------- Small phones (iPhone SE and similar) ---------- */

@media (max-height: 640px) {
  .client {
    gap: 10px;
    padding: 14px 12px 12px;
  }

  h1 {
    font-size: 30px;
  }

  .save-tip {
    padding: 6px 10px;
    font-size: 20px;
  }

  .button-stack {
    gap: 4px;
  }

  #start-button {
    min-height: 56px;
  }
}