/* ==========================================================
   Everest Weekly Lottery — Site Stylesheet
   Theme: "Summit" — a real photograph of Everest's north face held
   still behind the page, a navy header with fine gold hairlines,
   navy-glass result cards and crisp white reading panels.

   CACHE-BUSTING: every page that uses this file links it as
   "/main.css?v=13" (menu.js / live-status.js / live-stream.js carry
   their own "?v=N"). After editing any of those files and re-uploading
   to Hostinger, bump the number — e.g. "?v=13" to "?v=14" — in every
   page that links it (index.php, results.html, schemes.html,
   contact.html and core-panel/access.php), otherwise visitors'
   browsers (and Hostinger's own cache) may keep serving the old cached
   copy instead of your update.

   Background photo: images/bg-everest.jpg (desktop) and
   images/bg-everest-mobile.jpg (portrait crop for phones) — "Mount
   Everest north face" by Weichao Deng, Unsplash License (free for
   commercial use, no attribution required).
   ========================================================== */

:root {
    /* navy & gold */
    --navy-950: #070F1C;
    --navy-900: #0B1626;
    --navy-800: #12223A;
    --navy-700: #1B2F4D;
    --gold: #C9A45C;
    --gold-light: #E2C88F;
    --gold-line: rgba(201, 164, 92, 0.42);

    /* neutrals */
    --ink: #0F1B2D;
    --ink-2: #334155;
    --ink-3: #5B6B80;
    --line: #E2E8F0;
    --surface: #FFFFFF;
    --surface-2: #F6F8FB;

    /* actions & states */
    --teal: #0A7F89;
    --teal-dark: #076670;
    --success: #0E8A5F;
    --warning: #B45309;
    --warning-bg: #FEF4E2;
    --danger: #C2384B;

    /* glass on the photo */
    --glass: rgba(9, 18, 33, 0.56);
    --glass-line: rgba(255, 255, 255, 0.14);

    /* type */
    --font-display: 'Montserrat', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* shape & depth */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --shadow-panel: 0 1px 2px rgba(7, 15, 28, 0.06), 0 18px 40px -22px rgba(7, 15, 28, 0.55);
    --shadow-glass: 0 24px 48px -26px rgba(0, 0, 0, 0.85);
    --ring: 0 0 0 3px rgba(201, 164, 92, 0.45);
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    --header-h: 72px;

    /* line icons (used as CSS masks, coloured by background) */
    --icon-ticket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M13 5v2M13 11v2M13 17v2'/%3E%3C/svg%3E");
    --icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
    --icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    --icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");

    /* the photograph, with a navy wash for legibility */
    --photo: url("/images/bg-everest.jpg");
    --photo-wash: linear-gradient(180deg,
        rgba(7, 15, 28, 0.74) 0%,
        rgba(7, 15, 28, 0.42) 32%,
        rgba(7, 15, 28, 0.48) 62%,
        rgba(7, 15, 28, 0.88) 100%);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background: var(--navy-950);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Sticky-footer layout: on short pages (few results, little text)
   this stretches to fill the remaining viewport height so the
   footer sits at the bottom of the screen instead of floating
   mid-page with empty background below it. On tall pages it just
   grows normally and the page scrolls as usual. */
body > main {
    flex: 1 0 auto;
}

/* results.html only — its content (date picker + two result blocks)
   is naturally short, so on tall phone screens it was barely taller
   than one viewport. This gives it real scroll room instead of
   feeling cramped. Scoped to this one page on purpose. */
main.results-page {
    min-height: 82vh;
}

body.nav-open {
    overflow: hidden;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
}

h1, h2, h3, .display {
    font-family: var(--font-display);
    line-height: 1.25;
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

::selection {
    background: rgba(201, 164, 92, 0.35);
    color: var(--ink);
}

/* ================= FIXED BACKDROP ================= */
/* The Everest photograph, pinned to the viewport and perfectly still
   while the page scrolls over it. menu.js writes an inline transform
   on this element for a parallax nudge; it is cancelled here on
   purpose so the mountain never moves. */
.bg-fixed {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    background:
        var(--photo-wash),
        var(--photo) center 28% / cover no-repeat,
        var(--navy-950);
    transform: none !important;
    transition: none;
}

/* soft vignette around the edges */
.bg-fixed::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 120% 90% at 50% 40%, rgba(7, 15, 28, 0) 55%, rgba(7, 15, 28, 0.55) 100%);
    pointer-events: none;
}

/* ================= HEADER ================= */
/* Solid navy bar with a gold hairline. Never add transform / filter /
   backdrop-filter / perspective / contain / will-change to .header or
   .menu-container: on core-panel/access.php the position:fixed
   .dropdown is nested inside them and any of those would trap it. */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--header-h);
    padding: 0 clamp(16px, 3.2vw, 40px);
    background: var(--navy-900);
    border-bottom: 1px solid var(--gold-line);
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9);
}

.logo {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--gold-line), 0 6px 16px -6px rgba(0, 0, 0, 0.8);
}

.logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.title {
    flex: 1;
    min-width: 0;
    text-align: left;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* access.php writes the subtitle as a plain <span> after a <br> */
.title .subtitle,
.title > span {
    display: block;
    margin-top: 3px;
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.26em;
    color: var(--gold);
    overflow: hidden;
    text-overflow: ellipsis;
}

.title > br {
    display: none;
}

/* ================= MENU BUTTON ================= */
.menu-container {
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
}

.menu-btn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--r-md);
    background: transparent;
    color: #FFFFFF;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}

@media (hover: hover) {
    .menu-btn:hover {
        border-color: var(--gold);
        color: var(--gold-light);
    }
}

body.nav-open .menu-btn {
    border-color: var(--gold);
    background: rgba(201, 164, 92, 0.12);
    color: var(--gold-light);
}

/* ================= NAV PANEL ================= */
/* A navy panel that unfolds from beneath the sticky header, so ☰ stays
   visible as the close control (including on access.php, where the
   panel lives inside the header and there is no backdrop). */
.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 980;
    background: rgba(7, 15, 28, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}

.nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--ease), visibility 0s;
}

.dropdown {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 990;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px max(16px, calc((100% - 1040px) / 2)) 22px;
    background: var(--navy-900);
    border-bottom: 1px solid var(--gold-line);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition:
        opacity 0.25s var(--ease),
        transform 0.3s var(--ease),
        visibility 0s linear 0.3s;
}

.dropdown.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
        opacity 0.25s var(--ease),
        transform 0.3s var(--ease),
        visibility 0s;
}

.dropdown a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 14px 8px 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.86);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.dropdown a:last-child {
    border-bottom: none;
}

/* gold marker on the left */
.dropdown a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 2px;
    background: var(--gold);
    transform: scaleY(0);
    transition: transform 0.25s var(--ease);
}

/* chevron drawn with borders (no text for screen readers to announce) */
.dropdown a::after {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.45;
    transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

.dropdown a:focus-visible {
    color: var(--gold-light);
    outline-offset: -2px;
}

@media (hover: hover) {
    .dropdown a:hover {
        color: var(--gold-light);
        background: rgba(255, 255, 255, 0.03);
    }

    .dropdown a:hover::before {
        transform: scaleY(1);
    }

    .dropdown a:hover::after {
        transform: translateX(3px) rotate(45deg);
        opacity: 1;
    }
}

/* ================= TICKER STRIP ================= */
.ticker-strip {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    height: 38px;
    overflow: hidden;
    background: rgba(7, 15, 28, 0.82);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ticker-strip__track {
    display: inline-flex;
    padding-left: 100%;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    animation: ev-ticker 30s linear infinite;
}

@media (hover: hover) {
    .ticker-strip:hover .ticker-strip__track {
        animation-play-state: paused;
    }
}

/* ================= HERO ================= */
/* Both heroes sit directly on the photograph — no panel. */
.hero,
.page-hero {
    position: relative;
    text-align: center;
    color: #FFFFFF;
}

.hero {
    padding: 56px 20px 34px;
}

.page-hero {
    padding: 56px 20px 30px;
}

.hero__badge {
    width: 104px;
    height: 104px;
    margin: 0 auto 22px;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px var(--gold-line),
        0 0 0 8px rgba(7, 15, 28, 0.35),
        0 24px 48px -18px rgba(0, 0, 0, 0.9);
    animation: ev-rise 0.8s var(--ease) backwards;
}

.hero__badge img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.page-hero h1,
.page-hero h2,
.hero h1 {
    margin: 0 0 12px;
    color: #FFFFFF;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
    animation: ev-rise 0.8s var(--ease) 0.06s backwards;
}

/* fine gold rule under the page title */
.page-hero h1::after,
.page-hero h2::after,
.hero h1::after {
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    margin: 16px auto 0;
    background: var(--gold);
}

.page-hero h1,
.page-hero h2 {
    font-size: 32px;
}

.page-hero p,
.hero p {
    max-width: 520px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.84);
    font-size: 15.5px;
    line-height: 1.6;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
    animation: ev-rise 0.8s var(--ease) 0.12s backwards;
}

.draw-date {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 10px 18px;
    background: rgba(7, 15, 28, 0.55);
    border: 1px solid var(--gold-line);
    border-radius: var(--r-md);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: ev-rise 0.8s var(--ease) 0.18s backwards;
}

.draw-date::before {
    content: "";
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    background: var(--gold);
    -webkit-mask: var(--icon-calendar) center / contain no-repeat;
    mask: var(--icon-calendar) center / contain no-repeat;
}

.content {
    padding: 8px 16px 0;
}

/* ================= RESULT BLOCKS ================= */
/* Navy glass over the photograph. The perspective gives the small
   3D tilt (scroll-driven on the homepage, plus a mouse tilt from the
   script in index.php) its depth. */
.results-grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 10px 16px 56px;
    perspective: 1200px;
}

.result-block {
    --rx: 0deg;
    --ry: 0deg;
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 20px 20px 24px;
    background: var(--glass);
    border: 1px solid var(--glass-line);
    border-radius: var(--r-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow-glass);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    color: #FFFFFF;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    animation: ev-glass-rise 0.8s var(--ease) 0.1s backwards;
    transition: transform 0.5s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.result-block:nth-child(2) {
    animation-delay: 0.2s;
}

/* slim accent on the left edge: white at rest, gold once a result is out */
.result-block::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: rgba(255, 255, 255, 0.28);
    transition: background-color 0.3s var(--ease);
}

.result-block:has(.is-live) {
    border-color: rgba(201, 164, 92, 0.5);
}

.result-block:has(.is-live)::before {
    background: var(--gold);
}

/* glint that follows the mouse tilt (index.php sets --mx / --my) */
.result-block::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--mx, 15%) var(--my, 0%), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}

.result-block > * {
    position: relative;
    z-index: 1;
}

@media (hover: hover) {
    .result-block:hover {
        transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(10px);
        border-color: rgba(255, 255, 255, 0.24);
    }
}

/* the 🎟️ in the markup is replaced by a gold line icon */
.result-block__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(201, 164, 92, 0.12);
    box-shadow: inset 0 0 0 1px var(--gold-line);
    font-size: 0;
    color: transparent;
}

.result-block__icon::before {
    content: "";
    width: 22px;
    height: 22px;
    background: var(--gold-light);
    -webkit-mask: var(--icon-ticket) center / contain no-repeat;
    mask: var(--icon-ticket) center / contain no-repeat;
}

.result-block__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.result-block__title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: #FFFFFF;
    font-variant-numeric: tabular-nums;
}

.result-block__time {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.68);
    font-variant-numeric: tabular-nums;
}

.result-block__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

/* ---- live-stream button (markup currently commented out) ---- */
.live-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 14px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--r-md);
    background: transparent;
    color: #FFFFFF;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.live-btn__dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #E5484D;
    animation: ev-pulse 1.4s ease-in-out infinite;
}

@media (hover: hover) {
    .live-btn:hover {
        border-color: var(--gold);
        background: rgba(201, 164, 92, 0.1);
    }
}

/* ---- live-stream modal ---- */
.live-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(7, 15, 28, 0.82);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}

.live-modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--ease), visibility 0s;
}

.live-modal {
    width: min(760px, 100%);
    overflow: hidden;
    background: var(--navy-900);
    border: 1px solid var(--gold-line);
    border-radius: var(--r-lg);
    box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}

.live-modal-backdrop.is-open .live-modal {
    opacity: 1;
    transform: none;
}

.live-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.live-modal__close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--r-md);
    color: #FFFFFF;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

@media (hover: hover) {
    .live-modal__close:hover {
        border-color: var(--gold);
        color: var(--gold-light);
    }
}

.live-modal__body {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
}

.live-modal__body iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.live-modal__empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    font-size: 15px;
    line-height: 1.6;
}

/* ---- right-side action button (the live/disabled toggle) ---- */
/* live-status.js swaps .is-checking / .is-live / .is-unavailable and
   the disabled attribute; every state keeps the same footprint so the
   card never jumps when the label changes. */
.result-action {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
    min-width: 176px;
    min-height: 52px;
    padding: 8px 18px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--r-md);
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color 0.25s var(--ease),
        border-color 0.25s var(--ease),
        color 0.25s var(--ease),
        box-shadow 0.25s var(--ease),
        transform 0.25s var(--ease);
}

/* soft shimmer, shown only while checking */
.result-action::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.12) 50%, transparent 80%);
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

.result-action__label {
    position: relative;
    text-align: left;
}

.result-action__sub {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    opacity: 0.8;
}

.result-action__dot {
    position: relative;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* ping ring (animated only when live) */
.result-action__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
}

.result-action:disabled {
    cursor: not-allowed;
}

.result-action.is-checking {
    border-color: rgba(226, 200, 143, 0.45);
    color: var(--gold-light);
    cursor: progress;
}

.result-action.is-checking::before {
    opacity: 1;
    animation: ev-shimmer 1.4s ease-in-out infinite;
}

.result-action.is-checking .result-action__dot {
    animation: ev-pulse 1s ease-in-out infinite;
}

.result-action.is-live {
    background: var(--teal);
    border-color: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.8);
    animation: ev-pop 0.4s var(--ease);
}

.result-action.is-live .result-action__dot {
    background: #FFFFFF;
}

.result-action.is-live .result-action__dot::after {
    animation: ev-ping 1.8s var(--ease) infinite;
}

@media (hover: hover) {
    .result-action.is-live:hover {
        background: #0C8F9A;
        transform: translateY(-1px);
    }
}

.result-action.is-live:active {
    transform: scale(0.98);
}

.result-action.is-unavailable {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.7);
}

.result-action.is-unavailable .result-action__dot {
    background: rgba(255, 255, 255, 0.4);
    animation: none;
}

/* ================= OLD RESULTS DATE PICKER ================= */
.date-picker {
    position: relative;
    z-index: 1;
    margin: 0 0 6px;
    padding: 0 16px;
    text-align: center;
}

.date-picker input[type="date"] {
    width: min(320px, 100%);
    min-height: 52px;
    padding: 12px 16px;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.8);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    outline: none;
    cursor: pointer;
    transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.date-picker input[type="date"]:focus {
    border-color: var(--gold);
    box-shadow: var(--ring), 0 16px 34px -18px rgba(0, 0, 0, 0.8);
}

.date-picker input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
}

/* ================= SCROLL REVEAL ================= */
/* Sections marked .reveal rest slightly low and faint, then settle
   into place once menu.js's IntersectionObserver adds .is-visible (see
   the rootMargin comment in menu.js). Only opacity / transform are
   used, because the pages' <noscript> fallback resets exactly those.

   Important: the resting state is a faint PEEK (0.3 opacity) rather
   than fully invisible. This is deliberate — a fully invisible section
   still occupies its normal layout space, so a short scroll past the
   result cards used to land on plain empty background with no clue
   that text existed just below. This way, the instant any sliver of
   the section scrolls into view the user sees a soft "something is
   here" hint (pure CSS, so it works the instant it's on screen with
   zero dependency on JS/observer timing) and it then settles fully
   once the observer fires. */
.reveal {
    opacity: 0.3;
    transform: translateY(18px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ================= ARTICLE / SEO TEXT ================= */
.article {
    position: relative;
    width: min(860px, calc(100% - 32px));
    margin: 8px auto 72px;
    padding: 52px 52px 44px;
    background: #FFFFFF;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-panel);
    color: var(--ink-2);
    font-size: 16px;
    line-height: 1.8;
}

.article p {
    margin: 0 0 14px;
}

.article h2 {
    margin: 40px 0 10px;
    color: var(--navy-900);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0;
}

.article h3 {
    margin: 26px 0 6px;
    color: var(--navy-900);
    font-size: 16.5px;
    font-weight: 600;
}

.article .article__lead {
    margin-top: 0;
    text-align: center;
    font-size: 26px;
    letter-spacing: -0.01em;
}

.article .article__lead::after {
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    margin: 16px auto 26px;
    background: var(--gold);
}

.article a {
    color: var(--teal-dark);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(10, 127, 137, 0.35);
    text-underline-offset: 3px;
    transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}

@media (hover: hover) {
    .article a:hover {
        color: var(--navy-900);
        text-decoration-color: var(--gold);
    }
}

/* ================= SCHEMES PAGE ================= */
.schemes-card {
    width: min(760px, 100%);
    margin: 0 auto;
    padding: 34px 32px 28px;
    background: #FFFFFF;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-panel);
}

.schemes-card__title {
    margin: 0 0 20px;
    color: var(--navy-900);
    text-align: center;
    font-size: 22px;
    font-weight: 700;
}

.schemes-card__title::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    margin: 12px auto 0;
    background: var(--gold);
}

.schemes-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.schemes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.schemes-table th {
    padding: 13px 16px;
    background: var(--navy-900);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: right;
    white-space: nowrap;
}

.schemes-table th:first-child {
    text-align: left;
}

.schemes-table td {
    padding: 13px 16px;
    border-top: 1px solid var(--line);
    color: var(--ink-2);
    font-weight: 500;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.schemes-table td:first-child {
    color: var(--navy-900);
    font-family: var(--font-display);
    font-weight: 600;
    text-align: left;
}

.schemes-table tbody tr:nth-child(even) {
    background: var(--surface-2);
}

/* the 1st Prize row gets a fine gold highlight */
.schemes-table tbody tr:first-child {
    background: #FBF6EA;
}

.schemes-table tbody tr:first-child td {
    color: var(--navy-900);
    font-weight: 700;
}

.schemes-table tbody tr:first-child td:first-child {
    box-shadow: inset 3px 0 0 var(--gold);
}

@media (hover: hover) {
    .schemes-table tbody tr:hover {
        background: #EEF3F8;
    }
}

.schemes-download {
    margin: 22px 0 64px;
    text-align: center;
}

.schemes-download a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 50px;
    padding: 12px 26px;
    background: rgba(7, 15, 28, 0.6);
    border: 1px solid var(--gold);
    border-radius: var(--r-md);
    color: var(--gold-light);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

@media (hover: hover) {
    .schemes-download a:hover {
        background: var(--gold);
        color: var(--navy-950);
    }
}

/* ================= CONTACT PAGE ================= */
.contact-card {
    width: min(520px, 100%);
    margin: 0 auto 64px;
    padding: 8px 28px;
    background: #FFFFFF;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-panel);
}

.contact-card p {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 20px 0;
    color: var(--ink);
    font-size: 15.5px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.contact-card p + p {
    border-top: 1px solid var(--line);
}

/* the emoji in the markup are replaced by gold line icons */
.contact-card .contact-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--navy-900);
    font-size: 0;
    color: transparent;
}

.contact-card .contact-icon::before {
    content: "";
    width: 20px;
    height: 20px;
    background: var(--gold);
    -webkit-mask: var(--icon-mail) center / contain no-repeat;
    mask: var(--icon-mail) center / contain no-repeat;
}

.contact-card p:nth-child(2) .contact-icon::before {
    -webkit-mask-image: var(--icon-pin);
    mask-image: var(--icon-pin);
}

/* ================= FOOTER ================= */
.site-footer {
    position: relative;
    z-index: 1;
    margin-top: 40px;
    padding: 34px 16px 30px;
    background: var(--navy-950);
    border-top: 1px solid var(--gold-line);
    text-align: center;
}

.site-footer__stars {
    margin: 0 0 14px;
    padding-left: 0.6em;
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 0.6em;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 28px;
    margin: 0 0 16px;
}

.site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s var(--ease);
}

@media (hover: hover) {
    .site-footer__links a:hover {
        color: var(--gold-light);
    }
}

.site-footer__note {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12.5px;
    letter-spacing: 0.02em;
}

/* ================= BACK-TO-TOP BUTTON ================= */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 500;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--gold-line);
    border-radius: 50%;
    background: var(--navy-900);
    color: var(--gold-light);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity 0.25s var(--ease),
        transform 0.25s var(--ease),
        visibility 0s linear 0.25s,
        border-color 0.2s var(--ease);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
        opacity 0.25s var(--ease),
        transform 0.25s var(--ease),
        visibility 0s,
        border-color 0.2s var(--ease);
}

@media (hover: hover) {
    .back-to-top:hover {
        border-color: var(--gold);
    }
}

/* ================= ADMIN LOGIN (core-panel/access.php) ================= */
/* access.php has no classes on its login block: it is the plain <div>
   directly after the header (on the public pages that slot holds
   .nav-backdrop, so these rules never reach them). It shows the same
   photograph with a centred white card. The card is drawn by ::before
   spanning the four content rows (heading, two optional messages,
   form) of a three-column grid, so it always wraps exactly what PHP
   printed. */
.header + div:not([class]) {
    flex: 1 0 auto;
    position: relative;
    display: grid;
    grid-template-columns: minmax(16px, 1fr) minmax(0, 400px) minmax(16px, 1fr);
    grid-template-rows: repeat(4, auto);
    align-content: center;
    padding: 64px 0 96px;
    text-align: center;
    background:
        var(--photo-wash),
        var(--photo) center 28% / cover no-repeat,
        var(--navy-950);
    transition: filter 0.3s var(--ease);
}

/* the menu panel has no backdrop on this page — dim the scene instead */
body.nav-open .header + div:not([class]) {
    filter: brightness(0.55);
}

.header + div:not([class])::before {
    content: "";
    grid-column: 2;
    grid-row: 1 / -1;
    z-index: 1;
    background: #FFFFFF;
    border-top: 3px solid var(--gold);
    border-radius: var(--r-lg);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.75);
    animation: ev-rise 0.5s var(--ease) backwards;
}

.header + div:not([class]) > * {
    grid-column: 2;
    position: relative;
    z-index: 2;
    animation: ev-rise 0.5s var(--ease) backwards;
}

.header + div:not([class]) > h2 {
    grid-row: 1;
    margin: 0;
    padding: 36px 32px 6px;
    color: var(--navy-900);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
}

.header + div:not([class]) > h2::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A45C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / 20px 20px no-repeat,
        var(--navy-900);
}

/* error / "kicked" notices — colours come from their own style="" */
.header + div:not([class]) > p {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 32px 0;
    padding: 11px 14px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
}

.header + div:not([class]) > p::before {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    background: currentColor;
    -webkit-mask: var(--icon-alert) center / contain no-repeat;
    mask: var(--icon-alert) center / contain no-repeat;
}

.header + div:not([class]) > p:nth-of-type(1) {
    grid-row: 2;
}

.header + div:not([class]) > p:nth-of-type(2) {
    grid-row: 3;
}

.header + div:not([class]) > form {
    grid-row: 4;
    display: grid;
    gap: 12px;
    padding: 24px 32px 34px;
}

.header + div:not([class]) form br {
    display: none;
}

.header + div:not([class]) input {
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 14px;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: var(--r-md);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 500;
    outline: none;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.header + div:not([class]) input::placeholder {
    color: var(--ink-3);
    opacity: 1;
}

.header + div:not([class]) input:focus {
    border-color: var(--gold);
    box-shadow: var(--ring);
}

.header + div:not([class]) button {
    min-height: 50px;
    margin-top: 6px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: var(--navy-900);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 14px !important;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

@media (hover: hover) {
    .header + div:not([class]) button:hover {
        background: var(--navy-700);
        box-shadow: 0 0 0 1px var(--gold-line);
    }
}

/* ================= HOMEPAGE — subtle 3D ================= */
/* The result cards lean in from below and tilt back slightly as they
   scroll up under the header (scroll-driven, where the browser
   supports it; elsewhere they simply stay flat). */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .home .result-block {
            animation: ev-depth linear both;
            animation-timeline: view();
        }
    }
}

/* ================= MOTION ================= */
@keyframes ev-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes ev-glass-rise {
    from { opacity: 0; translate: 0 18px; }
}

@keyframes ev-depth {
    0% { rotate: x 10deg; opacity: 0.7; }
    22%, 70% { rotate: x 0deg; opacity: 1; }
    100% { rotate: x -8deg; opacity: 0.6; }
}

@keyframes ev-pop {
    0% { transform: scale(0.96); }
    100% { transform: scale(1); }
}

@keyframes ev-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}

@keyframes ev-ping {
    0% { opacity: 0.6; transform: scale(1); }
    80%, 100% { opacity: 0; transform: scale(2.6); }
}

@keyframes ev-shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

@keyframes ev-ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 760px) {
    :root {
        --header-h: 64px;
    }

    .header {
        gap: 12px;
    }

    .logo {
        width: 44px;
        height: 44px;
    }

    .title {
        font-size: 13.5px;
        letter-spacing: 0.08em;
    }

    .title .subtitle,
    .title > span {
        font-size: 9.5px;
        letter-spacing: 0.2em;
    }

    .hero {
        padding: 40px 16px 26px;
    }

    .page-hero {
        padding: 44px 16px 24px;
    }

    .hero__badge {
        width: 92px;
        height: 92px;
    }

    .page-hero h1,
    .page-hero h2,
    .hero h1 {
        font-size: 27px;
    }

    .article {
        margin-bottom: 56px;
        padding: 36px 22px 28px;
        font-size: 15.5px;
        line-height: 1.75;
    }

    .article .article__lead {
        font-size: 22px;
    }

    .article h2 {
        font-size: 19px;
    }

    .schemes-card {
        padding: 26px 16px 18px;
    }

    .schemes-table th,
    .schemes-table td {
        padding: 12px 12px;
    }

    .schemes-table th {
        font-size: 10.5px;
        letter-spacing: 0.1em;
        white-space: normal;
    }

    .contact-card {
        padding: 4px 18px;
    }

    .contact-card p {
        gap: 12px;
        font-size: 14.5px;
    }

    .header + div:not([class]) {
        padding: 40px 0 64px;
    }

    .header + div:not([class]) > h2 {
        padding: 30px 22px 4px;
    }

    .header + div:not([class]) > p {
        margin: 14px 22px 0;
    }

    .header + div:not([class]) > form {
        padding: 20px 22px 26px;
    }

    .back-to-top {
        right: 14px;
        bottom: 14px;
    }
}

/* phones: the photo switches to a portrait crop, the glass gets lighter
   blur (smoother scrolling) and each result card's button takes its
   own full-width row (results.html has the button as a direct child of
   .result-block; index.php wraps it in .result-block__actions) */
@media (max-width: 600px) {
    :root {
        --photo: url("/images/bg-everest-mobile.jpg");
    }

    .result-block {
        flex-wrap: wrap;
        gap: 14px;
        padding: 18px 16px 16px 20px;
        -webkit-backdrop-filter: blur(10px) saturate(1.2);
        backdrop-filter: blur(10px) saturate(1.2);
    }

    .result-block__actions,
    .result-block > .result-action {
        flex: 1 0 100%;
    }

    .result-block__actions .result-action,
    .result-block > .result-action {
        width: 100%;
    }

}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .ticker-strip__track {
        animation: none;
        padding-left: 16px;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}