/* Caesar brand override — loaded when BRAND=caesar.
   Overrides the CSS variables defined in styles.css :root so the app
   adopts caesar.nl's palette without touching the base stylesheet.

   Inter ships self-hosted (same file the display screens already use) and
   is preloaded by the server's branded HTML head so it's in cache before
   first paint. This eliminates the intermittent FOUT/title-ghost where
   Google Fonts' Inter swap was completing after the first paint had been
   captured to the iOS render cache. The Google Fonts stylesheet is no
   longer linked for Caesar — this @font-face is the only Inter source. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-v20-latin-variable.woff2') format('woff2');
}

:root {
    --primary-color: #224f82;
    --background: #82cdcd;          /* Full-bleed teal across every screen */
    --surface: #defffc;
    --surface-dark: #82cdcd;
    --text-primary: #224f82;        /* Navy reads cleanly on the teal bg */
    --text-secondary: #444444;
    --error-color: #c0392b;
    --accent-gold: #38b5ad;
    --wood-light: #defffc;
    --wood-dark: #82cdcd;
    --canvas-bg: #fcfcfc;
    --loading-bg: #224f82;
    --shadow-warm: rgba(34, 79, 130, 0.15);
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* =========================================
   Caesar Kartevent start-screen treatment
   (elements injected by app.js when brand.id === 'caesar')
   ========================================= */
#start-screen .screen-content {
    position: relative;
    z-index: 1;
}

.caesar-booth-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    color: #224f82;
    text-align: center;
    font-size: 2.6rem;
    line-height: 0.95;
    letter-spacing: -0.01em;
    margin: 1.25rem 0 0.75rem;
}
.caesar-booth-title span {
    display: block;
}

.caesar-date-pill {
    display: inline-block;
    background: #224f82;
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.5rem 1.4rem;
    border-radius: 999px;
    font-size: 0.95rem;
    box-shadow: 0 6px 14px rgba(34, 79, 130, 0.25);
    margin: 0 auto 1.5rem;
}

.caesar-kart-hero {
    display: block;
    width: 92%;
    max-width: 360px;
    margin: 0 auto 1.75rem;
}

/* Subtle confetti scatter across the booth start screen. Sits behind the
   .screen-content (which has z-index: 1) and is hidden on screens other
   than start so it doesn't interfere with camera/upload/result UX. */
.caesar-booth-confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.caesar-booth-confetti .conf {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    transform: rotate(var(--r, 0deg)) scale(var(--s, 1));
    animation: caesarBoothDrift calc(var(--dur, 6s)) ease-in-out infinite alternate;
    animation-delay: var(--d, 0s);
    color: var(--c, #e85d5d);
}
.caesar-booth-confetti svg { display: block; overflow: visible; }
@keyframes caesarBoothDrift {
    0%   { transform: rotate(var(--r, 0deg)) scale(var(--s, 1)) translateY(0); }
    100% { transform: rotate(var(--r, 0deg)) scale(var(--s, 1)) translateY(-8px); }
}

/* Hide booth chrome that doesn't fit the Caesar layout */
.caesar-start #booth-brand,
.caesar-start .app-subtitle,
.caesar-start .booth-divider {
    display: none;
}