@import 'ChromeConvoy.Web.Client.n4rzwx4zec.bundle.scp.css';

/* _content/ChromeConvoy.Web/Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-3l9xi0ddjy] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem calc(1.25rem + env(safe-area-inset-right, 0px)) calc(0.7rem + env(safe-area-inset-bottom, 0px)) calc(1.25rem + env(safe-area-inset-left, 0px));
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-3l9xi0ddjy] {
        cursor: var(--cursor-action);
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/ChromeConvoy.Web/Components/Pages/Home.razor.rz.scp.css */
/*
  Title screen. The scene covers the viewport and the two pieces of content
  sit over it - logotype pinned to the top, menu to the bottom - so neither
  depends on how the scene happens to crop. Nothing here scrolls, at any
  size.
*/

.title-screen[b-3ov36oaj7f] {
    /* Above the boot splash in App.razor, and opaque, so the splash is
       covered rather than showing through this page's own background. */
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh; /* iOS: the toolbar's height is not part of the viewport it reports */
    overflow: hidden;
    background: #2b1b52;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* preserveAspectRatio="slice" in the markup means the scene always covers,
   cropping at the edges rather than letterboxing - so a phone in portrait
   keeps the road and loses some sky, which is the right half to lose. */
.title-scene[b-3ov36oaj7f] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Sized as a share of the viewport rather than in px: it is the one element
   that should dominate at every width, and its own SVG uses the default
   "meet" scaling, so it fits whatever box it is given - which is what keeps
   it from being cropped the way the scene deliberately is. */
.title-logo[b-3ov36oaj7f] {
    position: relative;
    z-index: 1;
    width: min(760px, 92vw);
    margin-top: clamp(12px, 5vh, 56px);
    overflow: visible;
}

.title-logo text[b-3ov36oaj7f] {
    /* A slab face rather than the cockpit's monospace: this is a logotype,
       not a readout. Arial Black is present on both macOS and Windows;
       Impact and the generic weights behind it keep the same heft where it
       isn't. */
    font-family: 'Arial Black', 'Helvetica Neue', Impact, system-ui, sans-serif;
    font-weight: 900;
    font-size: 96px;
    letter-spacing: 4px;
    fill: #ff6a33;
    stroke: #7a1f0d;
    stroke-width: 2;
    paint-order: stroke fill;
}

/* Sign-in state (Arena progression Phase 3) - top-right, above the scene,
   same green button vocabulary as the rest of this page's interactive
   elements. Both states render server-side; Home.razor's own inline script
   picks one client-side before paint. */
.title-account[b-3ov36oaj7f] {
    position: absolute;
    z-index: 2;
    /* Plus the safe-area inset (0 without a notch) - see cockpit.css's --cockpit-safe-* tokens. */
    top: calc(10px + var(--cockpit-safe-top, 0px));
    right: calc(10px + var(--cockpit-safe-right, 0px));
    text-align: right;
}

.title-account-state[b-3ov36oaj7f] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.title-account-link[b-3ov36oaj7f] {
    text-decoration: none;
    font-size: 12px;
    padding: 5px 12px;
    white-space: nowrap;
}

/* The name is a link to the Profile page (title-account.js fills its text).
   Same colour as the surrounding text, underlined, so it reads as a link
   without competing with the scene. */
.title-account-name-link[b-3ov36oaj7f] {
    color: inherit;
    text-decoration: underline;
}

.title-account-name-link:hover[b-3ov36oaj7f] {
    color: #fff1d6;
}

.title-account-name[b-3ov36oaj7f] {
    font-family: var(--cockpit-font);
    color: #ffd9a8;
    font-size: 12px;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

@media (max-width: 700px) {
    .title-account[b-3ov36oaj7f] {
        top: calc(6px + var(--cockpit-safe-top, 0px));
        right: calc(6px + var(--cockpit-safe-right, 0px));
    }

    .title-account-name[b-3ov36oaj7f] {
        display: none;
    }
}

.title-overlay[b-3ov36oaj7f] {
    position: relative;
    z-index: 1;
    width: min(560px, 92vw);
    padding: 0 16px calc(6vh + var(--cockpit-safe-bottom, 0px));
    text-align: center;
}

.title-tagline[b-3ov36oaj7f] {
    font-family: var(--cockpit-font);
    color: #ffd9a8;
    font-size: clamp(13px, 2.4vw, 17px);
    letter-spacing: 1px;
    margin: 0 0 18px;
    /* The road runs right behind this, so the text needs its own ground to
       stay readable rather than relying on whatever it happens to sit on. */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

.title-menu[b-3ov36oaj7f] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

/* The flag button is an <a> here rather than a <button>, so it needs the
   text-decoration and box-sizing an anchor brings with it removed. */
.title-play[b-3ov36oaj7f] {
    text-decoration: none;
    box-sizing: border-box;
    max-width: 420px;
}

.title-secondary[b-3ov36oaj7f] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.title-secondary .cockpit-button[b-3ov36oaj7f] {
    text-decoration: none;
    font-size: 12px;
    padding: 5px 12px;
    /* Semi-opaque: these sit directly on the road, and a solid plate would
       read as a hole cut in the scene. */
    background: rgba(1, 18, 10, 0.78);
}

/* The one piece of motion: the centre line running toward the viewer, which
   is what turns a still picture of a road into a road being driven. Slow,
   and the only thing on the screen that moves. */
.title-centreline[b-3ov36oaj7f] {
    animation: title-road-b-3ov36oaj7f 2.6s linear infinite;
}

@keyframes title-road-b-3ov36oaj7f {
    from { transform: translateY(0); }
    /* Not a full dash cycle - the dashes are perspective-spaced, so there is
       no repeating interval to match. A short travel that resets reads as
       continuous motion at this speed, where a long one would visibly jump. */
    to { transform: translateY(14px); }
}

@media (prefers-reduced-motion: reduce) {
    .title-centreline[b-3ov36oaj7f] {
        animation: none;
    }
}

/* Build identifier for testing - deliberately understated (low contrast,
   small type) so it reads as a diagnostic corner-stamp, not a piece of the
   scene's own art direction. */
.title-version[b-3ov36oaj7f] {
    position: absolute;
    z-index: 1;
    right: 10px;
    bottom: 6px;
    font-family: var(--cockpit-font);
    font-size: 11px;
    color: rgba(255, 217, 168, 0.5);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    pointer-events: none;
}

/* Mirrors .title-version's corner treatment on the opposite side - a real
   legal notice, so it stays legible (not hidden/invisible) even though its
   contrast is deliberately as understated as the version stamp's. */
.title-copyright[b-3ov36oaj7f] {
    position: absolute;
    z-index: 1;
    left: 10px;
    bottom: 6px;
    /* Leaves room for .title-version on the opposite corner: without a cap,
       the 44-character notice runs underneath it on a 320-360px phone and
       the two draw over each other. Bottom-anchored, so it wraps upward. */
    max-width: calc(100% - 90px);
    font-family: var(--cockpit-font);
    font-size: 11px;
    color: rgba(255, 217, 168, 0.5);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    pointer-events: none;
}

/* The notice itself never eats clicks meant for the scene, but its two legal
   links have to be clickable. Underlined and at the notice's own dim colour so
   they read as links without competing with the art. */
.title-copyright a[b-3ov36oaj7f] {
    pointer-events: auto;
    color: inherit;
    text-decoration: underline;
}

.title-copyright a:hover[b-3ov36oaj7f] {
    color: rgba(255, 217, 168, 0.9);
}

/* Portrait crops the scene horizontally, which leaves a tall band of empty
   sky above the horizon. Widening the logotype and dropping it toward the
   sun fills that band rather than leaving the top third blank. */
@media (max-width: 700px) {
    .title-logo[b-3ov36oaj7f] {
        width: 96vw;
        margin-top: 9vh;
    }

    .title-overlay[b-3ov36oaj7f] {
        padding-bottom: 4vh;
    }
}