@font-face {
    font-family: 'Trajan Pro';
    src: url('fonts/TrajanPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: normal;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background: #000000; /* dark so any momentary gap behind the video blends in */
    color: #E3C086;
    min-height: 100vh;
    min-height: 100dvh;
    /* dvh tracks mobile browser chrome; vh is the fallback */
    padding: 2rem;
}

/* Fullscreen background video. cover = fills the window without
   stretching; bottom origin = the bottom edge is always in view.
   The still (= first frame) shows via poster + CSS fallback until
   the video starts. */
.bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;   /* fallback */
    height: 100lvh;  /* large viewport: stays covered when the address bar hides */
    object-fit: cover;
    object-position: center bottom;
    z-index: -1;
    background: url('../gfx/BG_vertical_still.jpg') center bottom / cover no-repeat;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    /* Fill the viewport so .fill screens can push their button to the bottom.
       Subtract the body padding (2rem top + 2rem bottom) so short screens
       don't gain a small spurious scroll. */
    min-height: calc(100vh - 4rem);
    min-height: calc(100dvh - 4rem);
    display: flex;
    flex-direction: column;
}

header {
    text-align: center;
    margin-bottom: 15px;
}

.logo {
    width: 100%;
    max-width: 150px;
    height: auto;
}

.subtitle {
    font-size: 0.8rem;
    margin-bottom: 15px;
}

.card {
    margin-bottom: 12px;
    /* Plays once when a screen mounts. Each screen is its own component,
       so this fires on navigation but not on in-page updates (polls).
       No "both"/forwards on purpose: a retained transform would make the
       card the containing block for the fixed .modal-overlay inside it,
       so the overlay would size to the card instead of the viewport. */
    animation: pageIn 0.3s ease-out;
}

@keyframes pageIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* The e-mail confirm / removed-from-queue modal gets the same pop. */
.modal-overlay {
    animation: fadeIn 0.2s ease-out both;
}

.modal {
    animation: pageIn 0.25s ease-out both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .card,
    .modal,
    .modal-overlay {
        animation: none;
    }
}

/* Trajan for display headings and paragraph copy; form controls and the
   long-form legal pages stay sans (see input/.button and .legal p). */
h1,
h2,
p {
    font-family: 'Trajan Pro', serif;
}


p {
    margin-bottom: .5rem;
}

/* Terms / privacy: keep the wall of body text readable in sans. */
.card.legal {
    text-align: left;
}

/* Hide the top logo while a legal page is showing (header is a sibling
   of the screen card, so :has on the container reaches it). */
.container:has(.card.legal) header {
    display: none;
}

.legal p {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    margin-left: 2rem;
    margin-right: 2rem;
}

/* Links in the legal copy: gold to match the theme, and break the long
   URL so it can't overflow the column. */
.legal a {
    color: #E3C086;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.legal button.button{
    margin-top: 3rem;
}

.card h1 {
    font-size: 3rem;
    line-height: 2.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.card h2 {
    font-size: 0.95rem;
    margin-bottom: 10px;
}

/* Screens with a sticky bottom button: card and form stretch to fill
   the viewport so margin-top: auto can push the button down. */
.card.fill {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card.fill form {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.button.sticky {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin-top: auto;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

/* Finish screen: action buttons stacked in normal flow (not sticky, so
   they never overlap the copy above them). */
.finish-actions {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    padding-bottom: env(safe-area-inset-bottom);
}

/* "Try another growl" — Trajan, a touch larger, set apart from Download. */
.finish-actions .text-link {
    margin-top: 1.5rem;
    font-family: 'Trajan Pro', serif;
    font-size: 1.1rem;
}

/* Centered, prompt-style screens (queue / ready / action / finish) */
.card.center {
    text-align: center;
    padding: 32px 0;
}

.card.center h2 {
    border-bottom: none;
    font-size: 1.2rem;
    margin-bottom: 16px;
}

.lead {
    font-size: 0.95rem;
    margin: 8px 0;
}

.muted {
    color: #555;
    font-size: 0.8rem;
    margin-top: 8px;
}

.center-text {
    text-align: center;
}

/* Signup form */
form {
    margin-top: 3rem;
    padding: 0 3rem;
}

.form-group {
    margin-bottom: 10px;
}

.form-group:last-child {
    margin-bottom: 0;
}

label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.82rem;
}

input[type="text"],
input[type="email"],
button.button,
a.button {
    display: block;
    width: 100%;
    height: 2.5rem;
    /* fixed, taller than the line so text sits in a band */
    margin: 0 auto;
    /* center the field horizontally */
    border: none;
    border-radius: .5rem;
    /* slightly rounded */
    outline: none;
    /* no focus outline */
    background-color: #E3C086;
    color: #000000;
    font-family: inherit;
    font-size: 1.1rem;
    text-align: center;
    /* text horizontally centered; single-line inputs
                              center it vertically within the height by default */
}

/* Suppress the Firefox focus line / any UA focus ring on the fields. */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="text"]:active,
input[type="email"]:active {
    outline: none;
    box-shadow: none;
}

/* Consistent placeholder colour across browsers. opacity:1 is required
   because Firefox dims placeholders by default, making them look lighter. */
input::placeholder {
    color: #555555;
    opacity: 1;
}

.button {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #000;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.08s ease;
    white-space: nowrap;
    background: #ffffff;
    color: #000000;
    font-family: inherit;
    width: 100%;
    margin-top: 8px;
    text-align: center;
    text-decoration: none;
}

.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.button:hover:not(:disabled) {
    background: #000000;
    color: #ffffff;
}

/* Display action buttons (signup, accept, withdraw, download) use Trajan.
   Placed after the shared field rule so it wins the font; covers both
   <button> and <a> buttons. Modal rows stay sans (see .modal .button). */
button.button,
a.button {
    font-family: 'Trajan Pro', serif;
}

/* An <a> won't vertically center its label in the fixed height the way a
   native <button> does, so center it explicitly (download button). */
a.button {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Press feedback: scale down so taps feel physical. */
.button:active:not(:disabled),
.text-link:active,
.back-button:active {
    transform: scale(0.95);
}

.text-link,
.back-button {
    transition: transform 0.08s ease;
}

@media (prefers-reduced-motion: reduce) {

    .button:active:not(:disabled),
    .text-link:active,
    .back-button:active {
        transform: none;
    }
}

/* "I'm over 18" checkbox: box left, label right */
.checkbox-group {
    display: flex;
    align-items: flex-start;   /* checkbox sits at the top of the first line */
    gap: 8px;
    margin: 12px 0;
    font-size: 0.85rem;
    text-align: left;          /* label reads left-aligned, not centered */
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    -webkit-appearance: none;
    /* lets background/border actually apply */
    appearance: none;
    position: relative;
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
    margin: 2px 0 0 0;  /* nudge down to align with the first line's cap height */
    border: none;
    border-radius: .35rem;
    /* matches the slightly rounded fields */
    outline: none;
    /* no focus ring, as on the inputs */
    background-color: #E3C086;
    /* same as the input fields */
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.checkbox-group input[type="checkbox"]:checked {
    background-color: #000000;
    border: 2px solid #E3C086;
}

/* Gold checkmark drawn on the black box when checked. */
.checkbox-group input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: .32rem;
    height: .62rem;
    border: solid #E3C086;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Terms / privacy text links under the sign-up button */
.legal-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-family: "Trajan Pro";
}

.text-link {
    background: none;
    border: none;
    padding: 2px;
    font-family: inherit;
    font-size: 0.85rem;
    color: #E3C086;
    cursor: pointer;
}

/* Back arrow on terms / privacy pages */
.back-button {
    display: inline-block;
    margin: 0 0 1rem -1rem;
    /* negative left aligns the icon to the content edge */
    background: none;
    border: none;
    padding: 4px 8px;
    line-height: 0;
    cursor: pointer;
}

.back-icon {
    display: block;
    width: 1.6rem;
    height: 1.6rem;
}

/* E-mail confirmation modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal {
    background: #E3C086;
    /* gold, matching the form fields */
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    /* clip the stacked rows to the rounded corners */
    width: 80%;
    max-width: 320px;
    padding: 0;
    /* rows run edge to edge */
    text-align: center;
    color: #000000;
}

.modal p {
    font-size: 1.1rem;
    padding: 1.2rem 1rem;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.modal-email {
    background: #F4E7C9;
    /* lighter cream highlight band */
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    padding: 0.9rem 1rem;
    font-size: 1rem;
    word-break: break-all;
}

/* Confirm / Back render as flat, full-width rows separated by hairlines,
   overriding the generic gold pill button. */
.modal .button {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0.95rem 1rem;
    background: transparent;
    background-color: transparent;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    /* modal rows stay sans */
    font-size: 0.95rem;
}

.modal .button:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.05);
    color: #000000;
}

.status {
    padding: 8px 12px;
    font-size: 0.85rem;
    margin-bottom: 10px;
    /* border: 1px solid #000; */
}

/* Queue position */
.queue-position {
    margin: 5rem 0;
}

.position-number {
    font-size: 7rem;
    line-height: 1;
    font-family: "Trajan Pro";
}

/* Action / blank state */
.card.blank {
    padding: 64px 0;
}

/* Finish video: capped height so it never fills the screen;
   the element letterboxes portrait footage within the box. */
/* Portrait result clip. The box is forced to 9:16 so a 9:16 video fills
   it with no letterbox bars; height-driven and centered, sized smaller. */
.result-video {
    display: block;
    height: 40vh;
    height: 30dvh;
    width: auto;
    max-width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    margin: 1rem auto;
    border: none;
    border-radius: .5rem;
    background: transparent;
}

.loading {
    margin: 32px 0;
}

.spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    border: 3px solid #ddd;
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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