/* The coming-soon landing at dungeonknights.io.
 *
 * Laid out like the reference (one centred column: crest, wordmark, line, two actions, footer) and
 * wearing the game's own theme — Cinzel Decorative, the gold accent, the same button language as the
 * Kingdom Gate — because this page and the game are one product.
 *
 * Three deliberate constraints:
 *   - it never depends on a route inside the app (the app host is password-gated, so a public page
 *     linking into it would be a dead end for a stranger),
 *   - the video is decoration, never the layout. Everything above it is text, so the page reads
 *     correctly with the video missing, blocked, still loading, or turned off by the visitor, and
 *   - the column has to survive a phone held sideways and a laptop window dragged short, which is
 *     why this sheet undoes the viewport pinning `theme.css` does — see "the un-pinning" below.
 *
 * Everything here is measured rather than assumed, because this is the one page a stranger sees
 * before they have any reason to trust the project: the two costs that were worth real bytes were a
 * 37 MB 1080p loop (now `/assets/intro-web.mp4`, 3.2 MB) and a 965 KB JPEG painting a phone screen
 * that is 390 points wide (now an 85 KB WebP — see the desktop/mobile pair in the background rule).
 */

.home-page {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* The footer below is absolutely positioned, so the column has to reserve its height. One
       variable, read by both rules, so the reservation and the thing it reserves for cannot drift
       apart: 18px above the copyright line and 18px below it — or the home indicator, whichever is
       taller, which is what the inset is for. Without it the text sits in the swipe-up bar on every
       iPhone with no home button. The 0px fallback is for a browser that knows `env()` but not
       `safe-area-inset-bottom`; both older than that would drop the declaration, hence the plain
       value on the line before each use. */
    --home-foot-gap: max(18px, env(safe-area-inset-bottom, 0px));
    padding: 32px 24px 84px;
    padding: 32px 24px calc(84px + var(--home-foot-gap)) 24px;

    overflow: hidden;
    background: #12100E url('/assets/images/menu-background.webp') center / cover no-repeat;

    /* A tap on a gold button used to flash the system's grey highlight over the art, and iOS likes
       to inflate text in landscape unless it is told not to. Both are one line, both are invisible
       on a desktop. */
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.home-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* Two gradients rather than one flat wash: the top one keeps the wordmark legible over a bright
 * frame, the bottom one keeps the footer legible over a dark one. */
.home-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(8, 7, 6, 0.72) 0%, rgba(8, 7, 6, 0.42) 34%, rgba(8, 7, 6, 0.62) 74%, rgba(8, 7, 6, 0.88) 100%),
        radial-gradient(ellipse at 50% 42%, rgba(8, 7, 6, 0.15) 0%, rgba(8, 7, 6, 0.6) 100%);
}

.home-center {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 720px;
    margin: auto;
    text-align: center;
}

.home-crest {
    width: 46px;
    height: 46px;
    image-rendering: pixelated;
    margin-bottom: 14px;
    filter: brightness(1.25) drop-shadow(0 0 18px rgba(212, 175, 55, 0.35));
}

.home-title {
    margin: 0;
    font-family: var(--font-display, 'Cinzel Decorative', serif);
    font-size: clamp(2.1rem, 6vw, 3.6rem);
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent-gold, #D4AF37);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.85), 0 0 44px rgba(212, 175, 55, 0.28);
}

.home-sub {
    margin: 12px 0 0;
    font-family: var(--font-heading, 'Cinzel', serif);
    font-size: clamp(0.78rem, 2.1vw, 0.95rem);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-primary, #E8E0D4);
}

.home-line {
    margin: 22px auto 0;
    max-width: 560px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.75;
    color: #c9c1b4;
}

/* ---------------------------------------------------------------- the two doorways */
.home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 30px;
}

.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 240px;
    padding: 14px 22px;
    border-radius: 4px;
    font-family: var(--font-heading, 'Cinzel', serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease;

    /* The single most consequential line on this page for a thumb: without it a double tap on
       "Join the Points Program" is a zoom gesture, and the browser holds every other tap for the
       300ms it waits to find out. Nothing here needs double-tap zoom. */
    touch-action: manipulation;
}

/* Guarded, because a touch screen fires `:hover` on the first tap and then leaves the button
 * lifted by a pixel until something else is tapped. A desktop gets the lift; a phone does not. */
@media (hover: hover) and (pointer: fine) {
    .home-btn:hover { transform: translateY(-1px); }
    .home-btn-secondary:hover { border-color: rgba(232, 224, 212, 0.6); }
    .home-collab:hover { color: var(--accent-gold-light, #F4D03F); border-bottom-color: var(--accent-gold, #D4AF37); }
    .home-footer a:hover { color: var(--accent-gold, #D4AF37); }
}

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

/* Keyboard visitors land on a dark page: the browser's default ring is a hairline that disappears
 * against the gold border. Named here rather than left to the theme, which styles none of this
 * page's controls. */
.home-btn:focus-visible,
.home-footer a:focus-visible,
.home-collab:focus-visible {
    outline: 2px solid var(--accent-gold-light, #F4D03F);
    outline-offset: 3px;
}

.home-btn-primary {
    border: 1px solid var(--accent-gold, #D4AF37);
    background: linear-gradient(180deg, #4a3d18, #2a2210);
    color: var(--accent-gold-light, #F4D03F);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 10px 28px rgba(212, 175, 55, 0.16);
}

.home-btn-secondary {
    border: 1px solid rgba(232, 224, 212, 0.35);
    background: rgba(12, 11, 10, 0.72);
    color: var(--text-primary, #E8E0D4);
}

.home-btn .home-btn-note {
    display: block;
    margin-top: 2px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: none;
    color: #9d968a;
}

/* ------------------------------------------------------------- the third doorway
 * The collab page, for somebody arriving with a project rather than a wallet. It is a line of text
 * under the pair rather than a third tile in the row: the two buttons above are a choice between
 * things a visitor can do today, and a third one at that weight would read as a third way to join
 * the same thing. Same tracked-out bronze as the footer row, one step brighter and underlined, so
 * it belongs to this page without competing with what the page is actually asking for.
 *
 * The underline is load-bearing — with no fill and no border, it is the only thing that says
 * "link" — and `touch-action` is here for the same reason it is on the buttons: this is still a
 * tap target on a phone, and the one way off the page for a keyboard. */
.home-collab {
    display: inline-block;
    margin-top: 14px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(232, 224, 212, 0.22);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #b3aa9c;
    text-decoration: none;
    touch-action: manipulation;
}

/* ---------------------------------------------------------------------- the queue
 * One line, and the only thing on this page that comes from the server. The form it used to sit
 * under — and the follow checkbox, and the message box — moved to /genesis with the rest of the
 * collection: the page that argues for owning one is the page that should ask for an address. */
/* ------------------------------------------------------------------------- footer */
.home-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px max(24px, env(safe-area-inset-right, 0px)) var(--home-foot-gap) max(24px, env(safe-area-inset-left, 0px));
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    letter-spacing: 0.6px;
    color: #8a8377;
}

.home-footer a {
    color: #b3aa9c;
    text-decoration: none;
}

/* The row of pages a stranger can open — the same list the /docs footer ends with, and the same look:
 * uppercase, tracked out, bronze until it is hovered (the hover and focus rules below already cover
 * it, because it is inside `.home-footer`). `flex-basis: 100%` gives it a line of its own at every
 * width; left to flow it would sit beside the copyright on a laptop and above it on a phone, and the
 * order of a footer is not something to make a reader re-find per screen. */
.home-footer-nav {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 22px;
    margin-bottom: 2px;
}

.home-footer-nav a {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #b3aa9c;
    text-decoration: none;
}

/* A phone plays the same loop a laptop does. This rule used to be a `display: none` on `.home-video`
 * with the argument that a phone should not spend its data on a background loop; the owner asked for
 * the footage on every screen instead, and that is the standing choice — one file for the whole site,
 * paid for on the device that gets the same 29 seconds. `display: none` really did save the bytes (a
 * media element that is not rendered never runs source selection, so the file was never requested),
 * so this is a deliberate cost and not an oversight: 3.2 MB on a phone.
 *
 * What is left here is only the art behind the element: 85 KB at 900px wide instead of 292 KB at
 * 1920, for a screen 390 points across that shows it under two gradients anyway, plus the paint for
 * the moment before the first frame decodes and for a browser that plays no video at all, where the
 * poster and this background are the whole page. Only the image layer is replaced, so the colour, the
 * `cover` sizing and the position all carry over from the shorthand above. The 965 KB JPEG both of
 * these replaced is still on disk — `/hub`, the three game screens and the social card all still ask
 * for it by name.
 *
 * That a phone will autoplay at all is not this sheet's doing: it is the `muted playsinline` on the
 * element in `lib/static-pages.js`, which is what iOS requires before it plays anything untapped. */
@media (max-width: 760px) {
    .home-page { background-image: url('/assets/images/menu-background-mobile.webp'); }
}

/* Motion is still a request, and a looping background video is exactly what that setting is for. This
 * is now the only rule that removes the loop, on any screen: the phone rule above is about bytes and
 * keeps the video, this one is about the visitor and has no substitute. */
@media (prefers-reduced-motion: reduce) {
    .home-video { display: none; }
}

/* ------------------------------------------------------------------ the un-pinning
 * theme.css pins html/body to `height: 100%; overflow: hidden`, and every game screen wants exactly
 * that: a fixed, app-like frame with no page scrollbar. A landing page does not. The column below is
 * centred in the viewport, so the moment the viewport is shorter than the column — a phone held
 * sideways, a laptop window dragged short, a browser at 200% zoom — the footer and the second button
 * fall outside a box that cannot be scrolled. Same shape as the vault and the collection page use
 * for phones: let the document scroll, and let the page grow past the viewport.
 *
 * The two conditions are one failure. A phone in portrait is inside the first query even though it
 * fits, because on iOS `dvh` follows the URL bar and the address bar takes about 100px off the
 * height; the second query is what catches the window case, and it costs nothing on a desktop,
 * where the column is 320px tall and no window is 620px tall by accident. */
@media (max-width: 760px), (max-height: 620px) {
    html,
    body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .home-page { overflow: visible; }
}

/* --------------------------------------------------------------- landscape, short
 * A phone in landscape has 360px of height and 740px of width — the opposite of the shape this
 * column was drawn for. Nothing is hidden here; every element stays and the rhythm tightens, so the
 * whole page fits in the 360px instead of asking a visitor to scroll a hero. */
@media (max-height: 620px) and (max-width: 1024px) {
    .home-page { padding-top: 20px; }
    .home-crest { width: 34px; height: 34px; margin-bottom: 8px; }
    .home-title { font-size: clamp(1.6rem, 4.4vh, 2.4rem); letter-spacing: 3px; }
    .home-sub { margin-top: 6px; font-size: 0.72rem; letter-spacing: 2px; }
    .home-line { margin-top: 12px; max-width: 620px; font-size: 12.5px; line-height: 1.55; }
    .home-actions { margin-top: 16px; gap: 10px; }
    .home-btn { min-width: 200px; padding: 11px 18px; }
    /* The third line has to earn its 14px here: a phone in landscape is the one shape with no
       height to spare, and this row is the newest thing in the column. */
    .home-collab { margin-top: 9px; font-size: 10.5px; letter-spacing: 0.1em; }
}

@media (max-width: 560px) {
    .home-page {
        padding: 28px 18px 132px;
        padding: 28px 18px calc(114px + var(--home-foot-gap)) 18px;
    }
    .home-title { letter-spacing: 2px; }
    .home-btn { min-width: 100%; }
}

/* Measured on the smallest phones still in use, where a 320pt screen leaves 284px for the button:
 * "Join the Points Program" in Cinzel at 13px with 2px of tracking needs more than that, so the
 * label broke over two lines and the button grew from 47px to 64px. Tightening the tracking and the
 * copy size is what keeps it on one line — the target stays comfortably past 44px either way. */
@media (max-width: 380px) {
    .home-btn { padding: 13px 14px; font-size: 12px; letter-spacing: 1px; }
}